/* =============================================================
   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;
}

/* 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 — the redesign moved the nav off centre.
   Figma: logo at x=60, nav ending at x=1380, band 108px tall. */
.site-header {
  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-link);
}

.nav__link:hover,
.nav__link:focus-visible {
  text-decoration: line-through;
}

/* Current page. The redesign dropped the olive accent, so the
   strikethrough now carries this on its own — which is fine, and
   arguably better: it never depended on colour perception. */
.nav__link[aria-current="page"] {
  font-weight: var(--weight-semibold);
  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, it's announced as a
   link, and clicking it 404s. aria-disabled tells assistive tech the
   item is present but not available.

   #a0a0a0 on the grey page is ~2.6:1 — still clearly "not available",
   but legible rather than nearly invisible. */
.nav__link--inactive {
  color: #a0a0a0;
  cursor: default;
  user-select: none;
}

/* -------------------------------------------------------------
   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-2xs);
  font-family: var(--h5-family);
  font-size: 1.25rem; /* 24px — Figma, not the 18px I guessed before */
  letter-spacing: var(--h5-tracking);
  color: var(--color-link);
  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 */
}

/* -------------------------------------------------------------
   PRINCIPLE CARD
   Figma: illustration, then a 24px title, then 18px body. Both
   Polymath Regular in Primary Blue.

   Gaps in the file were art->title 22-32 and title->body 12. Put
   on the grid at 32 and 16.

   The art slot is empty until the illustrations are exported out
   of Figma as SVG — see the note in the styleguide.
   ------------------------------------------------------------- */

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

/* The four illustrations are different heights (219 / 183 / 173 / 215),
   so left to themselves the titles beneath them land up to 42px apart.
   Reserving the height of the tallest and sitting every figure on the
   bottom of it gives them a common ground line — and, because the box is
   now a fixed height, the titles below line up too.

   min-height rather than height so a taller illustration later grows the
   box instead of overflowing it. */
/* width:100% + centre is what centres each illustration over its own text
   rather than over the card. Those are the same thing here only because
   the text fills the column — the body's 34rem max-width is wider than the
   ~400px column, so it never kicks in. If a column ever gets wider than
   34rem the text would stop short and the art would drift off its centre;
   at that point the max-width wants moving onto the card. */
.principle-card__art {
  min-height: 14rem; /* 224px — tallest artwork is 219 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-lg); /* 32 */
}

/* Single column on mobile — nothing to align against, so don't reserve
   space the artwork isn't using. */
@media (max-width: 64rem) {
  .principle-card__art { min-height: 0; }
}

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

/* Centred under the illustration; the body below stays left-aligned.
   align-self:stretch is what makes text-align do anything — the card is a
   flex column with align-items:flex-start, so without it the heading box
   shrinks to fit its own text and there's no width to centre within. */
.principle-card__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;
  align-self: stretch;
  text-align: center;
}

.principle-card__body {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.2;
  color: var(--color-ink);
  margin: var(--space-sm) 0 0; /* 16 — Figma had 12 */
  max-width: 34rem;
}

/* -------------------------------------------------------------
   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
   Figma: a 335px left cell (contact links, sitting low) beside a
   986px right cell (portrait, name, H1). The star and hand overlap
   the cell edges, so the art needs to escape its box — that's what
   the isolation/overflow handling below is for.
   ------------------------------------------------------------- */

.hero {
  grid-template-columns: 335fr 986fr; /* the ratio Figma uses */
}

.hero__aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* links sit near the bottom of the cell */
  gap: var(--space-md);
}

.hero__main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* Portrait + its two decorations. Everything is a percentage of the
   portrait box so the cluster scales as one thing.

   Figma places these absolutely on the artboard:
     portrait  884,169  389x355
     star     1279,103  156x155   -> starts 6px past the portrait's
                                     right edge and 66px above its top
     hand      827,420  103x145   -> 57px left of the portrait, 251 down

   The 11% right margin is not decoration: the portrait sits inset from
   the cell edge in the design, and that inset is what leaves room for
   the star to hang out to ~1430px without pushing past the 1440
   artboard. Right-align the portrait instead and the star causes a
   horizontal scrollbar. */
/* The top margin is load-bearing, not decoration: the star is pinned
   71px above the portrait, so the portrait has to sit at least that far
   below the cell's top edge or the star escapes the hero box. 24px of
   cell padding + 48px here = 72px of clearance. */
.hero__figure {
  position: relative;
  width: 47.3%;         /* 466 / 986 of the cell */
  margin-left: auto;
  margin-right: 11%;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.hero__portrait {
  display: block;
  width: 100%;
  height: auto;
}

.hero__star {
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* Star overlaps the portrait's top-right corner. The redesign adopted
   this — in the new artboard the star spans x=1143-1351 against a
   portrait ending at 1273, so Figma and the site now agree.

   It also grew: 208px against a 466px portrait, so ~45% of the
   portrait's width rather than the old 40%.

   The hand was removed in the redesign (hidden in the artboard). */
/* Ratios taken from the artboard: the star box is 208 wide against a
   466 portrait (44.6%), starts 336px across it (72%) and 71px above its
   top (-20% of the 355 height). */
.hero__star { width: 44.6%; left: 72%; top: -20%; }

.hero__eyebrow {
  font-family: var(--h5-family);
  font-weight: var(--h5-weight);
  font-size: var(--h5-size);
  line-height: var(--h5-leading);
  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;
  text-wrap: balance;
}

@media (max-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__figure { width: 70%; margin-right: 15%; }
  .hero__headline { font-size: var(--h2-size); } /* 64 -> 48 */
}

/* On a phone the headline is long enough that 48px eats most of the
   first screen — measured at 512px tall in a 375x812 viewport. Steps
   down the ramp rather than inventing a size. */
@media (max-width: 30rem) {
  .hero__headline { font-size: var(--h4-size); } /* 48 -> 32 */
  /* The star now overlaps the portrait rather than hanging past it, so it
     needs less room to the right and the photo can be bigger. Measured at
     32px clearance from the viewport edge at 375px wide. */
  .hero__figure { width: 80%; margin-right: 10%; }
}

/* -------------------------------------------------------------
   FOOTER
   Dark full-bleed band, 322px in Figma. Logo left; headline, email
   and links right-aligned to the container edge; copyright centred
   along the bottom.

   Full-bleed means this must sit OUTSIDE .container in the markup,
   with its own .container inside — otherwise the dark band stops at
   1320px and floats in the middle of the page.
   ------------------------------------------------------------- */

.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-white);
  padding: var(--space-lg) 0;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  min-height: 15.5rem; /* 248px — the band minus its padding */
}

.site-footer__logo { align-self: start; }
.site-footer__logo img,
.site-footer__logo svg { display: block; width: 47px; height: 48px; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
  text-align: right;
}

.site-footer__cta {
  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-white);
  margin: 0;
}

.site-footer__email {
  font-family: var(--h5-family);
  font-size: var(--h5-size);
  letter-spacing: var(--h5-tracking);
  color: var(--color-white);
}

/* The footer's arrow links trail their arrow rather than lead with
   it, and they're right-aligned — the mirror of the hero's stack. */
.site-footer__links {
  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;
  align-self: end;
  text-align: center;
  font-family: var(--caption-family);
  font-size: var(--caption-size);
  color: var(--color-white);
  margin: 0;
}

@media (max-width: 48rem) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__contact { align-items: flex-start; text-align: left; }
  .site-footer__links { align-items: flex-start; }
  .site-footer__cta { font-size: var(--h3-size); } /* 64 -> 40 */
}