/* =============================================================
   components.css — anamobe.com
   Depends on tokens.css. Load that first.

   Every value here resolves to a token. If you find yourself
   wanting to change a colour or size, change it in tokens.css —
   if it isn't in there, it probably should be.

   Measurements derived from the Figma frames (file
   scYAIBEp25iq54gJWdzQ3B) and normalised to the 8px grid. Where
   the mockup drifted off-grid I've said so in a comment rather
   than silently rounding.
   ============================================================= */

/* -------------------------------------------------------------
   WEBFONTS

   Both families are open-source and free to self-host. Download
   them, put the .woff2 files in assets/fonts/, and uncomment.
   Until then the site renders in system-ui.

   Self-host rather than using Google's CDN: EU rulings have gone
   against fonts.googleapis.com on GDPR grounds (it logs visitor
   IPs), and self-hosting is faster anyway.

   font-display: swap shows the fallback immediately and swaps the
   real font in when it arrives — text is readable the whole time
   instead of invisible while the font loads.

   Static cuts, not the variable [wght] files that also shipped:
   only two weights are used site-wide, so two static files are
   smaller than one variable font carrying every weight between.
   Switch to the variable files if the design ever needs more.
   ------------------------------------------------------------- */

@font-face {
  font-family: "Miranda Sans";
  src: url("assets/fonts/MirandaSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Miranda Sans";
  src: url("assets/fonts/MirandaSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Miranda Sans";
  src: url("assets/fonts/MirandaSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   BASE
   ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  /* The hero star deliberately overhangs its cell. `clip` stops that
     turning into a horizontal scrollbar on narrow screens, without the
     side effects `overflow: hidden` has on position:sticky. */
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(100% - (var(--page-margin) * 2), var(--container-max));
  margin-inline: auto;
}

/* The narrower column the redesign runs the main content in. Same
   60px floor as .container on narrow screens, but caps at 1134px so
   the hero and "How I work" sit inset from the header and footer. */
.container-narrow {
  width: min(100% - (var(--page-margin) * 2), var(--container-narrow));
  margin-inline: auto;
}

/* Off-screen but still read aloud. The Work page's sections start at
   "01_Product Design", so there's no visible h1 — this gives screen
   readers and search engines the page title they expect without
   putting anything on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 48rem) {
  :root { --page-margin: var(--space-md); } /* 60px -> 24px */
}

/* -------------------------------------------------------------
   TYPE
   One class per Figma text style. Nothing else should set a
   font-size directly.
   ------------------------------------------------------------- */

.t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h5b,
.t-body, .t-caption, .t-tiny, .t-numeral { margin: 0; }

.t-h1 {
  font-family: var(--h1-family); font-weight: var(--h1-weight);
  font-size: var(--h1-size); line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
}
.t-h2 {
  font-family: var(--h2-family); font-weight: var(--h2-weight);
  font-size: var(--h2-size); line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
}
.t-h3 {
  font-family: var(--h3-family); font-weight: var(--h3-weight);
  font-size: var(--h3-size); line-height: var(--h3-leading);
  letter-spacing: var(--h3-tracking);
}
.t-h4 {
  font-family: var(--h4-family); font-weight: var(--h4-weight);
  font-size: var(--h4-size); line-height: var(--h4-leading);
  letter-spacing: var(--h4-tracking);
}
.t-h5 {
  font-family: var(--h5-family); font-weight: var(--h5-weight);
  font-size: var(--h5-size); line-height: var(--h5-leading);
  letter-spacing: var(--h5-tracking);
}
.t-h5b {
  font-family: var(--h5b-family); font-weight: var(--h5b-weight);
  font-size: var(--h5b-size); line-height: var(--h5b-leading);
  letter-spacing: var(--h5b-tracking);
}
.t-body {
  font-family: var(--body-family); font-weight: var(--body-weight);
  font-size: var(--body-size); line-height: var(--body-leading);
}
.t-caption {
  font-family: var(--caption-family); font-weight: var(--caption-weight);
  font-size: var(--caption-size); line-height: var(--caption-leading);
  text-transform: var(--caption-transform);
}
.t-tiny {
  font-family: var(--tiny-family); font-weight: var(--tiny-weight);
  font-size: var(--tiny-size); line-height: var(--tiny-leading);
}
.t-numeral {
  font-family: var(--numeral-family); font-weight: var(--numeral-weight);
  font-size: var(--numeral-size); line-height: var(--numeral-leading);
}

/* -------------------------------------------------------------
   NAV
   Figma: 24px, centred, 24px gap, 46-52px from the top.
   Active item is PolySans Median + olive accent + strikethrough.

   NOTES and EXPERIMENTS exist in the Figma nav but are hidden.
   They're supported here — add the <li> and they'll just work.
   ------------------------------------------------------------- */

/* Logo left, nav right, on a sticky white band. Full-bleed so the
   white background covers the full viewport width as content scrolls
   under it — the inner .container keeps the logo and nav on the 60px
   margin (Figma: logo at x=60, nav ending at x=1380, band 108px). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 6.75rem; /* 108px */
  flex-wrap: wrap;
}

.site-header__logo { display: block; }
.site-header__logo img,
.site-header__logo svg { display: block; width: 47px; height: 48px; }

.nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md); /* 24px, matches Figma exactly */
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.nav__link {
  font-family: var(--nav-family);
  font-weight: var(--nav-weight);
  font-size: var(--nav-size);
  line-height: var(--nav-leading);
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-muted); /* quiet grey, darkens on hover */
}

/* Active links darken to ink and strike through on hover. */
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-ink);
  text-decoration: line-through;
}

/* Current page. The strikethrough carries this on its own — it never
   depended on colour perception. */
.nav__link[aria-current="page"] {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-decoration: line-through;
}

/* Pages that don't exist yet. Rendered as <span>, not <a> — a link to
   nowhere is worse than no link: it's focusable, announced as a link,
   and 404s. aria-disabled tells assistive tech it's present but not
   available. Same grey as the rest of the nav, minus the hover. */
.nav__link--inactive {
  color: var(--color-muted);
  cursor: default;
  user-select: none;
}

/* On a phone the three uppercase items don't fit beside the logo at
   18px. Drop to 16px with a tighter gap; the bar still wraps the nav
   under the logo if it ever needs to. */
@media (max-width: 30rem) {
  .nav { gap: var(--space-sm); } /* 24 -> 16 */
  .nav__link { font-size: 1rem; } /* 18 -> 16 */
}

/* -------------------------------------------------------------
   CASE STUDY CARD
   Figma: 1319x288 blue rectangle, square corners, absolutely
   positioned text on top. Rebuilt as a grid.

   Column 1 is the numeral (160px: numeral starts 32 from the card
   edge, title always at 192). Column 3 is the CTA, bottom-aligned.
   The meta row is pushed to the bottom with margin-top:auto rather
   than pinned at a fixed offset, so a one-line description doesn't
   leave it floating.
   ------------------------------------------------------------- */

.case-card {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto; /* 160px numeral column */
  column-gap: 0; /* the numeral column already contains its own gutter — see below */
  min-height: 18rem; /* 288px */
  padding: var(--space-2xl) var(--space-lg) var(--space-lg); /* 64/32/32 — Figma had 60/35 */
  background: var(--color-primary-blue);
  color: var(--color-white);
  text-decoration: none;
}

/* The numeral sits in a fixed 160px column with no grid gap after it,
   which lands the title at exactly 192px from the card edge — the
   offset every card in the Figma file uses.

   The column is deliberately wider than the numerals. They're not the
   same width (PolySans has no tabular figures, even in the licensed
   cuts as far as I can tell): "01." is 119.8px, "04." is 147.5px. They
   align on their left edge, which is the edge that reads, and the
   widest one still clears the title by 12.5px. */
.case-card__number {
  grid-column: 1;
  color: var(--color-white);
}

.case-card__body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 16px, title -> description */
}

.case-card__title { color: var(--color-white); }

/* Plain Body: Polymath Regular, 18px. The Figma mockup had this at
   24px Light; confirmed 2026-07-16 to match the rest of the site. */
.case-card__desc {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.4;
  margin: 0;
  max-width: 48rem;
  color: var(--color-white);
}

.case-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-2xl);
  margin: var(--space-lg) 0 0; /* 32px clear of the description */
  margin-top: auto;            /* ...but bottom-aligned when there's room */
}

/* Value sits above its label. DOM order stays label-then-value so a
   screen reader reads "Role: Principal Designer"; column-reverse
   handles the visual flip. */
.meta-pair {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2xs);
  margin: 0;
}

/* Both rows are 14px — the Figma mockup had values at 18px above 14px
   labels; flattened to a single size 2026-07-16. Case is now the only
   thing separating them, so don't drop the uppercase on the label: it's
   carrying the whole distinction.

   Naming note: label = your Tiny style uppercased, which is exactly how
   your Caption style is defined. Value = your Caption style without the
   uppercase, which is exactly your Tiny. The two styles are one style
   and a text-transform. Worth collapsing in Figma. */
.meta-pair__label,
.meta-pair__value {
  font-family: var(--tiny-family);
  font-weight: var(--tiny-weight);
  font-size: var(--tiny-size);
  line-height: var(--tiny-leading);
  color: var(--color-white);
  margin: 0;
}

.meta-pair__label { text-transform: uppercase; }

.case-card__cta {
  grid-column: 3;
  align-self: end;
  margin-left: var(--space-lg); /* column-gap is 0, so the CTA carries its own */
  font-family: var(--font-display);
  font-weight: var(--weight-neutral);
  font-size: var(--body-size); /* 18px — matches the arrow links. Figma had 24px. */
  line-height: 1;
  white-space: nowrap;
  color: var(--color-accent-on-blue); /* ~11:1 on the blue */
}

.case-card:hover .case-card__cta,
.case-card:focus-visible .case-card__cta { text-decoration: underline; }

.case-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 32px — Figma drifted 30/36/36 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Below ~64rem the three columns can't hold. Numeral and CTA drop
   into the flow rather than shrinking into unreadability. */
@media (max-width: 64rem) {
  .case-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg);
  }
  .case-card__number,
  .case-card__body,
  .case-card__cta { grid-column: 1; }
  .case-card__cta { align-self: start; }
  .case-card__number { font-size: var(--h1-size); } /* 96 -> 64 */
  .case-card__meta { margin-top: var(--space-sm); }
}

/* -------------------------------------------------------------
   WORK CARD
   The redesigned Work page. Replaces the old blue case-card.

   Figma auto-layout: VERTICAL, 1px stroke, 649x400, padding
   48/48/24/48 for text-only cards and 32/24/16/24 for the ones
   under an image. Title 40 Miranda Regular, description 20
   Figtree, "coming soon" 24 Miranda Medium in link blue.

   space-between rather than fixed offsets, so titles that run to
   two lines push the description down instead of colliding, and
   the status line stays pinned to the bottom edge.
   ------------------------------------------------------------- */

.work-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 100%;
  min-height: 25rem; /* 400px */
  padding: var(--space-xl) var(--space-xl) var(--space-md); /* 48/48/24 */
  border: var(--rule);
  color: var(--color-ink);
  text-decoration: none;
}

.work-card__title {
  font-family: var(--h3-family);
  font-weight: var(--weight-regular);
  font-size: var(--h3-size); /* 40px */
  line-height: var(--h3-leading);
  margin: 0;
}

.work-card__desc {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  font-size: var(--body-lg-size); /* 20px */
  line-height: var(--body-lg-leading);
  margin: 0;
}

/* Right-aligned, bottom-anchored. A <span>, not a link — these
   case studies don't exist yet, so there's nothing to point at. */
.work-card__status {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--nav-size); /* 24px */
  line-height: 1;
  color: var(--color-link);
  text-align: right;
  margin: 0;
}

/* Cards that sit under an image: tighter padding. Keeps all four
   borders — the rule between image and text is part of the design. */
.work-card--under-image {
  min-height: 0;
  padding: var(--space-lg) var(--space-md) var(--space-sm); /* 32/24/16 */
}

.work-media {
  display: flex;
  flex-direction: column;
}

/* The image supplies three of its four edges; the card below draws the
   fourth, so the seam is one rule rather than two stacked.

   The exported files used to carry the border baked into the pixels —
   Figma exports a rectangle together with its stroke — which put a
   second line alongside every CSS one. They're cropped now, so the
   border lives here and only here. If a re-export ever looks heavy at
   the edges again, that's the cause. */
.work-media__img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule);
  border-bottom: 0;
}

/* Side-by-side variant: the card sits to the right rather than below,
   so the image needs its bottom edge back. It keeps its right border
   too — that's the seam, and the card drops its left one to match. */
.work-media__img--side { border-bottom: var(--rule); }

/* -------------------------------------------------------------
   ARROW LINK
   Figma Home: the "→linkedin / →cv / →email" stack. In the file
   it's a single text node, so this is a rebuild rather than a
   transcription. The arrow is decorative and hidden from screen
   readers — "→linkedin" should announce as "linkedin".
   ------------------------------------------------------------- */

.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs); /* 8px arrow -> word */
  font-family: var(--h5-family);
  font-size: var(--h5-size); /* 24px */
  letter-spacing: var(--h5-tracking);
  color: var(--color-ink);
  text-decoration: none;
}

/* inline-block matters here. Text decorations don't propagate into
   atomic inline boxes, so the hover strikethrough below runs through the
   word and stops at the arrow. Left as a plain inline, the line would cut
   straight through the arrow at exactly the height of its own shaft and
   read as a longer arrow rather than a struck-through link. */
.arrow-link::before {
  content: "→";
  display: inline-block;
  speak: never;
}

/* Matches the nav's hover, so every link on the site strikes through. */
.arrow-link:hover,
.arrow-link:focus-visible { text-decoration: line-through; }

.arrow-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------
   SECTION HEADING
   Figma: "How I work" and "What people say about me" are both 40px
   PolySans Neutral — H3.
   ------------------------------------------------------------- */

.section-heading {
  font-family: var(--h3-family);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  color: var(--color-ink);
  margin: 0;
}

/* -------------------------------------------------------------
   GRID CELLS
   Home is drawn as a set of bordered rectangles forming a visible
   hairline grid. In Figma they're separate rectangles that overlap
   by 1px so shared edges don't double up. Here the border lives on
   the cell and negative margins collapse the shared edges, which
   gets the same result without four rectangles per row.
   ------------------------------------------------------------- */

.grid-row {
  display: grid;
  border-top: var(--rule);
  border-left: var(--rule);
}

/* Stacked rows would otherwise draw two hairlines on the same seam —
   the upper row's cell border-bottom plus the lower row's border-top —
   giving a 2px line between sections and 1px everywhere else. The row
   above already supplies the divider, so a row that follows another
   drops its own top border. */
.grid-row + .grid-row { border-top: 0; }

.grid-cell {
  border-right: var(--rule);
  border-bottom: var(--rule);
  padding: var(--space-md);
  min-width: 0; /* lets long words wrap instead of blowing the column out */
}

/* -------------------------------------------------------------
   HOW I WORK
   2026-07-28 redesign. A 3-column grid: the "How I work" heading in
   the left column, then the four cards in a 2x2 to its right. Each
   card is an illustration, a 24px title and a 16px body.

   Figma: three 326px columns, 78px gutters, 48px between the rows.
   The heading top-aligns with the first row of cards. Explicit grid
   placement keeps the heading in column 1 and the cards out of it —
   otherwise auto-flow would drop the third card into the empty cell
   under the heading.
   ------------------------------------------------------------- */

.hiw {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* stacked by default */
  row-gap: var(--space-2xl); /* 64px when stacked */
}

.hiw__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Reserve the tallest illustration's height and sit each figure on the
   bottom of it, so titles line up across a row whatever the art height
   (Figma arts run 172-220 tall). */
.hiw__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-lg); /* 32px art -> title (Figma 36) */
}

.hiw__art img,
.hiw__art svg { display: block; max-width: 100%; height: auto; }

.hiw__title {
  font-family: var(--h5-family);
  font-weight: var(--h5-weight);
  font-size: var(--h5-size);
  line-height: var(--h5-leading);
  letter-spacing: var(--h5-tracking);
  color: var(--color-ink);
  margin: 0 0 var(--space-xs); /* 8px title -> body */
}

.hiw__body {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0;
  max-width: 34rem;
}

/* From ~1024px up: the heading beside a 2x2 of cards. */
@media (min-width: 64rem) {
  .hiw {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 4.875rem; /* 78px — Figma */
    row-gap: var(--space-xl); /* 48px */
  }
  .hiw__art { min-height: 13.75rem; } /* 220px — tallest illustration */
  .hiw__heading            { grid-column: 1; grid-row: 1; }
  .hiw__card:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .hiw__card:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .hiw__card:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .hiw__card:nth-of-type(4) { grid-column: 3; grid-row: 2; }
}

/* -------------------------------------------------------------
   TESTIMONIAL
   Figma: 18px quote, then a 14px uppercase attribution 24px below.
   The three columns are bottom-aligned — quotes are different
   lengths and it's the attributions that line up, not the tops.
   ------------------------------------------------------------- */

/* Figma auto-layout: VERTICAL, SPACE_BETWEEN, fixed 412px, 1px
   stroke, padding 32/20/20/20.

   space-between is what makes this work: quotes start at a common
   top edge, attributions sit on a common bottom edge, and the gap
   absorbs the difference in quote length. That retires the old
   two-line min-height reserved on the role — the alignment is now
   structural rather than a measurement that a three-line job title
   would have broken. */
.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height:100% is what makes space-between work across all three.
     The grid stretches every cell to the tallest, but without this the
     testimonial only grows to its own content — so each one ends at a
     different height and the attributions stop agreeing. min-height
     keeps the 412px floor when the quotes are short. */
  height: 100%;
  min-height: 25.75rem; /* 412px */
  padding: var(--space-lg) var(--space-md) var(--space-md); /* 32/24/24 — Figma 32/20/20 */
  margin: 0;
}

/* The boxes around each quote are the grid's own cell borders, so the
   testimonial doesn't draw its own — it just supplies the padding.
   Pair this with .cell-flush on the containing cell. */

.testimonial__quote {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0;
}

/* Name and role are one text node in Figma, two lines. Split here so
   the name can be a <cite> and the role stays a plain line. */
.testimonial__attribution {
  margin: var(--space-md) 0 0; /* 24 — matches Figma */
  font-style: normal;
}

.testimonial__name,
.testimonial__role {
  display: block;
  font-family: var(--caption-family);
  font-weight: var(--caption-weight);
  font-size: var(--caption-size);
  line-height: 1.2;
  text-transform: var(--caption-transform);
  color: var(--color-ink);
}

/* No min-height here any more — space-between on .testimonial anchors
   the attribution to the bottom edge, so a role of any length works. */

/* -------------------------------------------------------------
   HERO
   2026-07-28 redesign. Left-aligned now: an eyebrow and a 64px
   headline in a ~64% column, the grainy star hanging at the top-right
   (~24.5%), and the contact links stacked below the lot. The portrait
   photo is gone.

   Figma (content column 1096 wide): text block 63.68%, star 24.53%
   sitting ~28px lower, then 35px down to the links.
   ------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 32px headline block -> links (Figma 35) */
}

.hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
}

.hero__intro {
  flex: 0 1 63.7%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 32px eyebrow -> headline (Figma 35) */
}

.hero__eyebrow {
  font-family: var(--h5-family);
  font-weight: var(--h5-weight);
  font-size: var(--h5-size);
  line-height: var(--h5-leading);
  letter-spacing: var(--h5-tracking);
  color: var(--color-ink);
  margin: 0;
}

.hero__headline {
  font-family: var(--h1-family);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: var(--color-ink);
  margin: 0;
}

/* The star hangs top-right of the headline column. It sits ~28px below
   the eyebrow's cap line in Figma; the top margin carries that. */
.hero__star {
  flex: 0 0 24.5%;
  width: 24.5%;
  max-width: 269px;
  height: auto;
  margin-top: var(--space-md); /* ~28px in Figma */
}

.hero__links { margin: 0; }

/* The hard break before "Daily building with AI." is a desktop
   nicety; on narrow screens it forces a line wider than the viewport,
   so let the headline wrap naturally there instead. */
.hero__break { display: inline; }

/* Below ~1024px the star drops above the headline and the text takes
   the full width. */
@media (max-width: 64rem) {
  .hero__top { flex-direction: column; gap: var(--space-lg); }
  .hero__intro { flex-basis: auto; }
  .hero__star { order: -1; width: 40%; max-width: 200px; margin-top: 0; }
  .hero__headline { font-size: var(--h2-size); } /* 64 -> 48 */
  .hero__break { display: none; }
}

/* On a phone the headline at 48px eats most of the first screen; step
   down the ramp rather than inventing a size. */
@media (max-width: 30rem) {
  .hero__headline { font-size: var(--h4-size); } /* 48 -> 32 */
}

/* -------------------------------------------------------------
   FOOTER
   2026-07-28 redesign, simplified. The grainy star on the left, the
   three contact links right-aligned, and the colophon centred along
   the bottom. The "Ooooh, talk to me." headline and the email line
   are gone.

   Full-bleed dark band, so it sits OUTSIDE .container in the markup
   with its own .container inside — otherwise the band would stop at
   the container edge and float in the middle of the page.
   ------------------------------------------------------------- */

.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-white);
  padding: 2.5rem 0 1.25rem; /* 40 top / 20 bottom — Figma */
}

.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  row-gap: var(--space-xl); /* 48px row -> colophon (Figma 42) */
}

.site-footer__logo {
  grid-column: 1;
  grid-row: 1;
}
.site-footer__logo img,
.site-footer__logo svg { display: block; width: 72px; height: auto; }

/* The links trail their arrow rather than lead with it, and they're
   right-aligned — the mirror of the hero's stack. */
.site-footer__links {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arrow-link--trailing {
  flex-direction: row;
  color: var(--color-link-on-dark);
}

.arrow-link--trailing::before { content: none; }
.arrow-link--trailing::after {
  content: "→";
  display: inline-block;
  speak: never;
}

.site-footer__colophon {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  font-family: var(--caption-family);
  font-size: var(--caption-size);
  color: var(--color-white);
  margin: 0;
}