/* ============================================================
   HOME V2 — home-v2.css
   Type/accessibility retune of home-sketch.css. Same layout,
   spacing, grid structure, and visual style — only typography
   and base a11y behavior changed. See report in conversation
   for the token-placement rationale and any contrast flags.
   Load after tokens.css (uses its color + font tokens).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --hs-max:        1000px;   /* content column */
  --hs-gutter:     40px;
  --hs-mat:        #D9D9D9;  /* full-bleed hero mat */
  --hs-mat-light:  #EDEDEA;  /* per-card image mat */
  --hs-rule:       #141414;

  /* ── Type scale — 1.25 (Major Third) ratio off a 1rem/16px body,
     kept local to this page rather than tokens.css. See report:
     tokens.css's existing --type-* ramp is fixed-px and built for
     the 16:9 slide-deck component (.slide, .eyebrow, .slide-title),
     a different layout paradigm than this fluid scrolling page —
     promoting these to tokens.css would either collide with that
     ramp's names or force px/rem and fixed/fluid conventions to
     coexist under one prefix. Once a second page reuses this scale,
     promoting it to tokens.css becomes the right call.

     Every tier is clamp(rem, rem + vw, rem): the bounds are rem so
     they still grow with the browser's text-zoom/base font-size,
     the middle term adds a small vw contribution for in-between
     fluidity. Label/Caption sit under the 1rem body floor on
     purpose — they're wayfinding/nav chrome, never running content. */
  /* Rescaled 2026-08: body floor moved 16px → 14px. Min/max anchors
     now sit on Tailwind's default type scale (0.75/0.875/1/1.125/
     1.25/1.5/1.875/2.25rem = 12/14/16/18/20/24/30/36px) rather than
     the old bespoke floats — 14px is exactly Tailwind's `sm`. Mid-
     term vw coefficients are derived per tier for a 400–1000px
     fluid viewport range (only place decimals remain, since clamp()
     needs a continuous preferred value between the two anchors). */
  --hv2-type-label:   clamp(0.625rem,  0.5833rem + 0.1667vw, 0.6875rem); /* 10–11px */
  --hv2-type-caption: clamp(0.75rem,   0.7083rem + 0.1667vw, 0.8125rem); /* 12–13px */
  --hv2-type-body:    clamp(0.875rem,  0.8333rem + 0.1667vw, 0.9375rem); /* 14–15px — floor, never smaller */
  --hv2-type-body-lg: clamp(1rem,      0.9583rem + 0.1667vw, 1.0625rem); /* 16–17px — running-prose body copy (.pp-prose, .pp-context-text, .hs-block__desc) */
  --hv2-type-h3:      clamp(1.125rem,  1.0417rem + 0.3333vw, 1.25rem);   /* 18–20px — unused on this page, see report */
  --hv2-type-h2:      clamp(1.25rem,   1.0833rem + 0.6667vw, 1.5rem);    /* 20–24px */
  --hv2-type-h1:      clamp(1.5rem,    1.25rem + 1vw,        1.875rem);  /* 24–30px — unused on this page, see report */
  --hv2-type-display:  clamp(1.875rem, 1.625rem + 1vw,       2.25rem);   /* 30–36px */

  --hv2-lh-display: 1.1;
  --hv2-lh-heading: 1.15;   /* Display / H1 / H2 / H3 */
  --hv2-lh-body:    1.65;   /* Body / Body-lg */
  --hv2-lh-small:   1.45;   /* Caption / Label */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--hv2-type-body);
  line-height: var(--hv2-lh-body);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

.hs-page { padding-bottom: 96px; }

/* Content column — shared by every non-bleed region */
.hs-wrap {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
}

/* ── Focus & motion — applies site-wide on this page ────────── */
a {
  transition: color 150ms ease, outline-offset 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

/* Visible on every link (nav, footer, hero shot, card shots).
   Accent (#287E91) checked at ≥3:1 against white, the hero mat
   (#D9D9D9), and the card mat (#EDEDEA) — passes on all three. */
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Masthead ──────────────────────────────────────────────── */
.hs-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-small);
  font-weight: 500;
}

.hs-nav__mark { color: #141414; letter-spacing: -0.01em; }

.hs-nav__links { color: var(--color-text-secondary); }

/* Text stays the same visual size; the ::before pseudo-element
   extends the invisible hit/tap area to ~44px without adding to
   document flow, so the nav bar's height and spacing don't shift. */
.hs-nav__links a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.hs-nav__links a::before {
  content: '';
  position: absolute;
  inset: -14px -6px;
}

.hs-nav__links a:hover { color: var(--color-accent); }
.hs-nav__sep { color: var(--color-border); padding: 0 4px; }

/* Bleeds to the viewport's right edge while its left edge stays
   aligned with the nav/title above and below it: the negative
   margin covers the wrap's own right gutter, plus — once the
   viewport is wider than the content column — the extra gap
   from --hs-wrap's centering. */
.hs-rule {
  height: 5px;
  background: var(--hs-rule);
  margin-top: 26px;
  margin-right: calc(-1 * var(--hs-gutter) - max(0px, (100vw - var(--hs-max)) / 2));
}

/* Display tier — largest text on the page. .hs-title stays a
   semantic <h1> (there is exactly one, and it's the correct top
   heading), but is sized as Display since this page has no other
   heading competing for that visual weight. See report. */
.hs-title {
  margin: 12px 0 0;
  font-size: var(--hv2-type-display);
  font-weight: 600;
  line-height: var(--hv2-lh-display);
  letter-spacing: -0.02em;
  color: #141414;
}

/* ── Project block (eyebrow + title share a left rule) ─────── */
.hs-block { margin-top: 74px; }

.hs-block__head {
  position: relative;
  left: 1px;
  border-left: 5px solid var(--hs-rule);
  padding-left: 14px;
}

/* Label tier — decorative wayfinding text, intentionally below
   the 16px body floor. Uppercase + letter-spacing preserve
   legibility at this size; contrast against white is ~4.68:1,
   which clears the 4.5:1 small-text minimum (see report). */
.hs-eyebrow {
  display: block;
  font-size: var(--hv2-type-label);
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: var(--hv2-lh-small);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 7px;
}

/* H2 tier — matches the <h2> tag already on this element. */
.hs-block__title {
  margin: 0;
  font-size: var(--hv2-type-h2);
  font-weight: 600;
  line-height: var(--hv2-lh-heading);
  letter-spacing: -0.02em;
  color: #141414;
}

/* Body tier — one size everywhere it's used (see report: the
   split/duo overrides that previously dropped this to 14px are
   removed so no reading copy on the page falls under 16px). */
.hs-block__desc {
  margin: 18px 0 0;
  max-width: 80ch;
  font-size: var(--hv2-type-body-lg);
  line-height: var(--hv2-lh-body);
  color: var(--color-text);
}

/* Lead block sets its own rhythm above the full-bleed hero */
.hs-lead { margin-top: 62px; }
.hs-lead .hs-block__desc { margin-top: 20px; max-width: none; }

/* ── Full-bleed hero mat ───────────────────────────────────── */
.hs-hero {
  margin-top: 40px;
  background: var(--hs-mat);
  padding: 36px 0;
}

.hs-hero a { display: block; }

.hs-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.hs-shot {
  display: block;
  background: var(--hs-mat-light);
  padding: 14px;
}

.hs-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Project grid ─────────────────────────────────────────────
   Repeating 2-column grid holding every project after the lead
   feature. Add a .hs-grid__item and it flows to a new row on its
   own — no per-count layout classes to maintain as projects are
   added. (Replaced the old bespoke .hs-split / .hs-duo pair,
   which were composed for exactly four projects.) */
.hs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 96px 48px;
  margin-top: 96px;
  align-items: start;
}

.hs-grid .hs-block { margin-top: 0; }

/* Shots sit in equal-height mats so each row reads as one band,
   whatever aspect ratio each source image happens to have */
.hs-grid .hs-shot {
  margin-top: 26px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-grid .hs-shot img { max-height: 380px; width: auto; max-width: 100%; }

/* ── Split row: text rail + wide shot ─────────────────────────
   For a project that should stand out from the 2-column grid —
   one row, text on the left, a wide image on the right. */
.hs-split {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: 48px;
  align-items: start;
  margin-top: 96px;
}

.hs-split .hs-block { margin-top: 0; }

/* ── About ─────────────────────────────────────────────────── */
.hs-about {
  margin-top: 96px;
  background: var(--hs-mat-light);
  text-align: center;
}

.hs-about__inner {
  max-width: 640px;
  padding-top: 80px;
  padding-bottom: 80px;
}

.hs-about__title {
  margin: 0 0 20px;
  font-size: var(--hv2-type-h2);
  font-weight: 600;
  line-height: var(--hv2-lh-heading);
  letter-spacing: -0.02em;
  color: #141414;
}

.hs-about p {
  margin: 0 0 16px;
  font-size: var(--hv2-type-body);
  line-height: var(--hv2-lh-body);
  color: var(--color-text);
}

.hs-about p:last-of-type { margin-bottom: 0; }

@media (max-width: 760px) {
  .hs-about__inner { padding-top: 48px; padding-bottom: 48px; }
}

/* ── Footer ────────────────────────────────────────────────── */
.hs-footer {
  margin-top: 96px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  font-size: var(--hv2-type-caption);
  line-height: var(--hv2-lh-small);
  color: var(--color-muted);
}

/* NOTE (contrast — flagged, not changed): var(--color-muted)
   (#8B8B86) on white measures ~3.42:1. This text sits well under
   the "large text" size cutoff, so it needs 4.5:1 and currently
   fails. Left as-is per scope (token values not to be changed
   here) — flagging per the accessibility-check instructions. */

.hs-footer a {
  position: relative;
  color: inherit;
}

.hs-footer a::before {
  content: '';
  position: absolute;
  inset: -14px -6px;
}

/* ── Narrow ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --hs-gutter: 22px; }

  .hs-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 60px;
  }

  .hs-grid .hs-shot { height: auto; }
  .hs-grid .hs-shot img { max-height: none; width: 100%; }

  .hs-split {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 60px;
  }

  .hs-footer { flex-direction: column; gap: 6px; }
}