/* ==========================================================================
   Shozbot studio site
   Palette is sampled from the robot itself: mohawk purple and white, the
   wood of its head and body, and the resin of its hands and feet.
   ========================================================================== */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 300 700;         /* variable font: one file, whole range */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- from the robot --- */
  --mohawk:        #6c4fa3;   /* the purple of the mohawk, deepened so text on
                                 paper clears WCAG AA */
  --mohawk-deep:   #4a3372;
  --mohawk-soft:   #efe9f7;
  --wood:          #8a7457;   /* the head block */
  --wood-light:    #c8a87a;
  --resin-orange:  #f08a18;   /* hands */
  --resin-yellow:  #ffd23f;   /* left foot */
  --resin-blue:    #2d54cd;   /* right foot */
  --resin-red:     #8b1d1e;   /* the stripe across the chest */

  /* --- surfaces and text --- */
  --paper:         #faf7f2;
  --card:          #ffffff;
  --ink:           #241f1a;
  --muted:         #6d6358;
  --line:          #e6ded2;

  --shadow:        0 1px 2px rgba(36, 31, 26, .05),
                   0 8px 24px -12px rgba(36, 31, 26, .18);
  --shadow-lift:   0 2px 4px rgba(36, 31, 26, .06),
                   0 16px 32px -14px rgba(36, 31, 26, .28);

  --radius:        14px;
  --measure:       62ch;
  --gutter:        clamp(20px, 5vw, 48px);

  --font-display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;
  --font-tagline: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
                  Roboto, Helvetica, Arial, sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
                  Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mohawk:      #b49ae0;   /* lightened so it reads on a dark surface */
    --mohawk-deep: #d3c2ef;
    --mohawk-soft: #2b2338;
    --paper:       #17141a;
    --card:        #201c26;
    --ink:         #f2ece4;
    --muted:       #a99f93;
    --line:        #332d3c;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 32px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mohawk); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--mohawk);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mohawk);
  color: #fff;
  padding: 10px 16px;
  z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- wordmark -------------------------------------------------- *
 * Casing is set here in one place. To switch the brand to `Shozbot` or
 * `SHOZBOT`, change `text-transform` below — nothing else needs to move.
 * --------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;   /* none | capitalize | uppercase */
}

/* ---------- hero ------------------------------------------------------ */
.hero {
  padding-block: clamp(40px, 9vw, 88px) clamp(20px, 4vw, 40px);
}

.hero-inner {
  display: grid;
  gap: clamp(24px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 720px) {
  /* The text column shrinks to its content so the robot stands next to the
     wordmark rather than at the far edge — and the wordmark still lines up
     with the cards below it. */
  .hero-inner {
    grid-template-columns: minmax(0, auto) auto;
    justify-content: start;
  }
  .hero-inner > div { max-width: 34rem; }
}

.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 0.95;
}

.hero .tagline {
  margin: clamp(14px, 2.5vw, 20px) 0 0;
  font-family: var(--font-tagline);   /* the one line that is not mono */
  font-weight: 500;
  font-size: clamp(1.12rem, 3.5vw, 1.55rem);
  line-height: 1.25;
  color: var(--mohawk);
}

.hero .blurb {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--muted);
}

.robot {
  display: block;
  width: min(58vw, 300px);
  height: auto;
  justify-self: center;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1);
  transform-origin: 50% 88%;
}

/* A slight tilt when you point at it or tap it. Nothing that loops. */
@media (hover: hover) {
  .robot:hover { transform: rotate(-4deg) translateY(-4px); }
}
.robot:active { transform: rotate(-4deg) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .robot { transition: none; }
  .robot:hover, .robot:active { transform: none; }
}

/* ---------- sections -------------------------------------------------- */
.section { padding-block: clamp(28px, 5vw, 48px); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------- add-to-home-screen note ----------------------------------- */
.install {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--mohawk) 5%, var(--card));
  padding: 14px 18px;
}

.install summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  list-style: none;                 /* the default triangle, replaced below */
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.install summary::-webkit-details-marker { display: none; }

.install summary::before {
  content: "+";
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--mohawk);
  line-height: 1;
}

.install[open] summary::before { content: "\2212"; }   /* a real minus sign */

.install summary:focus-visible {
  outline: 2px solid var(--mohawk);
  outline-offset: 4px;
  border-radius: 4px;
}

.install-body {
  margin-top: 12px;
  padding-left: 22px;               /* lines up under the summary's text */
  max-width: 62ch;
}

.install-body p {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
}

.install-body p:last-child { margin-bottom: 0; }
.install-body b { color: var(--ink); font-weight: 600; }

.install-why {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* A quiet qualifier beside a section heading — deliberately not in the h2's
   uppercase and tracking, so it reads as an aside rather than part of the
   label. It sits before the ::after rule, so the rule still fills the row. */
.section-note {
  font-size: .82rem;
  color: var(--muted);
  opacity: .8;
  /* No nowrap: these grew from "phone-first" to a phrase, and held on one line
     they run past the edge of a small phone. Wrapping is the graceful failure;
     the rule after them takes whatever room is left. */
  min-width: 0;
}

.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- app cards ------------------------------------------------- */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--mohawk) 45%, var(--line));
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}

.card img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: block;
}

.card h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;           /* mono runs wide — a notch down holds the line */
  letter-spacing: -0.03em;
}

.card p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}

/* What a game asks of you, under its description. Quieter than the line it
   follows: the description sells the game, this is metadata somebody reads
   only when weighing one game against another — so it is smaller again than
   .section-note and carries the same muted colour at lower opacity.

   Deliberately not a badge row. Six cards each wearing three pills would
   shout louder than the descriptions they sit under, and the point of the
   line is that it waits to be noticed. */
/* What a game asks of you, under its description. The hairline is what makes
   it read as a different kind of information rather than another sentence of
   the paragraph above — tried on its own, a gap and a smaller size were not
   enough, because the description's own line spacing swallows them.

   Deliberately not a badge row. Six cards each wearing three pills would
   shout louder than the descriptions they sit under, and the point of the
   line is that it waits to be noticed. */
.card-skills {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  line-height: 1.45;
  /* Mohawk rather than --muted. In --muted it was the same colour as the
     description right above it and read as a continuation of it; colour is
     what says "different kind of information" where size alone did not. Full
     strength, not faded: --mohawk is the value that was deepened to pass AA on
     paper, and an opacity on top of it gives that back. */
  color: var(--mohawk);
}

/* The featured card sits on its own and runs full width. */
.card--feature {
  grid-template-columns: 72px 1fr;
  padding: clamp(20px, 4vw, 28px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--mohawk) 7%, var(--card)),
      var(--card));
  border-color: color-mix(in srgb, var(--mohawk) 30%, var(--line));
}

.card--feature img { width: 72px; height: 72px; border-radius: 16px; }
.card--feature h3 { font-size: 1.45rem; }
.card--feature p { font-size: 1.02rem; max-width: 56ch; }

/* The featured card carries a second link — the course it supports — so it is
   a <div> with the title's link stretched over the whole thing rather than an
   <a> wrapping everything. Two links cannot nest. */
.card--feature { position: relative; }

.card-title-link {
  color: inherit;
  text-decoration: none;
}

/* This is what makes the whole card clickable. */
.card-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-title-link:focus-visible {
  outline: 2px solid var(--mohawk);
  outline-offset: 3px;
  border-radius: 4px;
}

/* …and this restores the lift the other cards get on keyboard focus, which the
   card itself no longer receives now that the link inside it does. */
.card--feature:has(.card-title-link:focus-visible) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--mohawk) 45%, var(--line));
}

/* The course credit. Under the description on a narrow screen; beside it, in a
   third column, once there is room. */
/* Qualified with .card--feature so these beat `.card--feature p`, which sets a
   font-size and a 56ch max-width. Left unqualified, the credit inherits that
   56ch, refuses to wrap in its own column, and squeezes the description hard
   enough to push the badge onto a line of its own. */
.card--feature .card-aside {
  grid-column: 2;
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Only the words themselves are lifted above the stretched link, not the whole
   line — otherwise the space around them becomes a dead patch in the middle of
   a card that is supposed to be clickable everywhere. */
.card-aside a {
  position: relative;
  color: inherit;
  text-decoration-color: var(--mohawk);
}
.card-aside a:hover { color: var(--mohawk); }

/* In its narrow column the credit broke "Type-Well" at the hyphen, which reads
   as a typo. Line breaking treats an existing hyphen as a break opportunity,
   and no hyphens property changes that — the fragment has to be held together. */
.nowrap { white-space: nowrap; }

@media (min-width: 900px) {
  .card--feature { grid-template-columns: 72px 1fr auto; }
  .card--feature .card-aside {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    margin: 0 0 0 36px;
    max-width: 17ch;
    text-align: right;
  }
}

.badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mohawk-soft);
  color: var(--mohawk-deep);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- footer ---------------------------------------------------- */
.footer {
  margin-top: clamp(40px, 8vw, 80px);
  border-top: 1px solid var(--line);
  padding-block: 28px clamp(32px, 6vw, 56px);
  color: var(--muted);
  font-size: .9rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer img { width: 48px; height: auto; display: block; flex: none; }
.footer p { margin: 0; }
.footer a { color: inherit; text-decoration-color: var(--mohawk); }
.footer a:hover { color: var(--mohawk); }

/* ---------- 404 ------------------------------------------------------- */
.lost {
  min-height: 82vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  padding-block: 48px;
}

.lost img {
  width: auto;
  max-width: min(60vw, 240px);
  height: min(46vh, 340px);
  margin-inline: auto;
}
.lost h1 { font-family: var(--font-display); font-size: 2rem; margin: 16px 0 0; }
.lost p { margin: 0; color: var(--muted); }
.lost .home { margin-top: 20px; font-family: var(--font-display); font-weight: 500; }