/* ============================================================
   pomilad.com: Zachariah Jones
   Swiss Editorial · cool paper · midnight ink · slate-blue brand accent #7B91AB
   ============================================================ */

/* ---------- Fonts (self-hosted, Fontshare) ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* color: cool paper & midnight ink; every neutral carries the slate hue.
     Brand accent #7B91AB = oklch(64.9% 0.046 252.8). It only reaches 2.9:1 on
     paper, so on light surfaces text/UI accents use --accent-deep (6.4:1);
     the raw brand color lives on decoration and the dark chapter (5.5:1). */
  --paper:        oklch(96.5% 0.004 250);
  --paper-raise:  oklch(94.5% 0.006 250);
  --ink:          oklch(21% 0.015 255);
  --ink-soft:     oklch(35% 0.015 255);
  --ink-mute:     oklch(47% 0.018 252);
  --ink-faint:    oklch(52% 0.02 252);
  --accent:        #7b91ab;                     /* brand slate blue */
  --accent-deep:   oklch(46% 0.055 252);        /* accent as text/UI on paper */
  --accent-bright: oklch(78% 0.045 250);        /* accent highlights on ink */
  --err:           oklch(78% 0.1 30);
  --hairline:     oklch(21% 0.015 255 / 0.14);
  --hairline-soft:oklch(21% 0.015 255 / 0.07);

  /* placeholder tints: one per project, all whisper-quiet, slate-adjacent */
  --tint-a: oklch(90% 0.028 250);
  --tint-b: oklch(90% 0.022 200);
  --tint-c: oklch(90% 0.022 285);
  --tint-d: oklch(91% 0.02 80);

  /* type */
  --font-display: "Clash Display", Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", sans-serif;
  --font-body: "Switzer", Seravek, "Gill Sans Nova", Ubuntu, Calibri, sans-serif;

  --text-hero:    clamp(3.4rem, 10.5vw, 12.5rem);
  --text-giant:   clamp(6rem, 21vw, 21rem);
  --text-h2:      clamp(2.2rem, 4.5vw, 4.25rem);
  --text-h3:      clamp(1.25rem, 1.6vw, 1.6rem);
  --text-body:    clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  --text-label:   clamp(0.6875rem, 0.3vw + 0.6rem, 0.8125rem);

  /* motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);
  --dur-fast: 250ms;
  --dur-med:  450ms;

  /* space & shape */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  /* beyond ~1800px viewports, extra width becomes margin so the
     composition keeps its tension (backgrounds still run full-bleed) */
  --page-pad: max(var(--gutter), calc((100vw - 1720px) / 2));
  --radius: 2px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--accent-deep); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: var(--radius);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: 99; padding: 0.6rem 1rem;
  background: var(--ink); color: var(--paper);
  font-size: var(--text-label); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: 0.75rem; }

/* labels: tracked-out caps, the site's connective tissue */
.label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-mute);
}

.accent { color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--page-pad);
  transition: background-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.site-header.scrolled {
  background: oklch(96.5% 0.004 250 / 0.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline-soft);
}
.site-header.on-dark { color: oklch(95% 0.005 250); }
.site-header.on-dark.scrolled {
  background: oklch(21% 0.015 255 / 0.85);
  box-shadow: 0 1px 0 oklch(95% 0.005 250 / 0.1);
}
.site-header.on-dark .site-nav a { color: oklch(95% 0.005 250 / 0.7); }
.site-header.on-dark .site-nav a:hover { color: oklch(95% 0.005 250); }
.site-header.on-dark .header-loc,
.site-header.on-dark .wordmark-mark { color: oklch(95% 0.005 250 / 0.55); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-mark { color: var(--ink-faint); font-weight: 500; }

.site-nav { display: flex; gap: clamp(0.9rem, 2.5vw, 2rem); }
.site-nav a {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.35rem 0;           /* ≥24px hit target with line-height */
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 2px solid var(--accent-deep);
  transition: right var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { right: 0; }
.site-header.on-dark .site-nav a::after { border-color: var(--accent); }

.header-loc {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
}
.loc-dot, .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.status-dot { margin-right: 0.5rem; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(4.5rem + 3vh) var(--page-pad) 0;
}

.hero-eyebrow { margin-bottom: clamp(1rem, 3vh, 2.5rem); color: var(--ink-mute); }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero-title .line-tail {
  font-size: 0.42em;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  margin-top: 0.35em;
}
.line-indent { margin-left: clamp(2rem, 11vw, 12rem); }

/* line masks: JS slides .line-inner up into view.
   padding-bottom keeps descenders (g, y, j) inside the mask window;
   the negative margin gives the space back so rhythm is unchanged */
.line { display: block; overflow: hidden; padding-bottom: 0.13em; margin-bottom: -0.13em; }
.line-inner { display: inline-block; will-change: transform; }

/* the signature moment: PROBLEM arrives as loose type and solves itself.
   Letters are plain inline-blocks; only JS ever displaces them, so
   no-JS / no-GSAP / reduced-motion all read the solved state. */
.sl { display: inline-block; will-change: transform; }

/* drawn accent bar (replaces a typed dash: crisper, font-independent) */
.accent-bar {
  display: inline-block;
  width: 0.85em;
  height: 0.13em;
  margin-left: 0.18em;
  background: var(--accent);
  vertical-align: 0.19em;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-top: clamp(2rem, 5vh, 4rem);
}
.hero-sub { max-width: 44ch; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero-rail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--hairline);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding: 1rem 0 1.1rem;
}
.hero-rail .label { display: flex; align-items: center; }
.rail-mail { text-decoration: none; color: var(--ink-soft); padding-block: 0.45rem; }  /* ≥24px target */
.rail-mail:hover { color: var(--accent-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform 200ms var(--ease-out);
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: clip;
  border-block: 1px solid var(--hairline);
  padding: 0.9rem 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink-soft);
}
.marquee-track i {
  font-style: normal;
  color: var(--accent);
  margin: 0 1.1em;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Sections shared ---------- */
.chapter {
  color: var(--accent-deep);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* ---------- About ---------- */
.about { padding: clamp(5rem, 14vh, 10rem) var(--page-pad) clamp(4rem, 10vh, 7rem); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.about-main .section-title { margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.about-copy {
  max-width: 58ch;
  display: grid;
  gap: 1.25em;
  font-size: calc(var(--text-body) * 1.12);
  line-height: 1.6;
  color: var(--ink-soft);
}
.about-copy strong { color: var(--ink); font-weight: 600; }

.about-side {
  display: grid;
  gap: 2.25rem;
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
.about-portrait {
  border-radius: var(--radius);
  overflow: clip;
}
.about-portrait img { width: 100%; height: auto; }
.side-block .label { margin-bottom: 0.8rem; color: var(--accent-deep); }
.side-list { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.side-list li { font-weight: 500; }
.side-list-inline { display: flex; flex-wrap: wrap; gap: 0.3rem 0; }
.side-list-inline li { font-weight: 400; color: var(--ink-soft); }
.side-list-inline li:not(:last-child)::after { content: ",\00a0"; color: var(--ink-faint); }
.side-note { color: var(--ink-soft); }

/* ---------- Journey ledger ---------- */
.journey { padding: clamp(4rem, 10vh, 8rem) var(--page-pad); }
.journey .section-title { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); max-width: 12ch; }

.ledger { list-style: none; padding: 0; counter-reset: row; }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 6fr) minmax(0, 1.5fr);
  gap: 1rem 2rem;
  padding: clamp(1.5rem, 3vh, 2.25rem) 0;
  border-top: 1px solid var(--hairline);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ledger li:last-child { border-bottom: 1px solid var(--hairline); }
.ledger-row:hover { transform: translateX(8px); }

.ledger-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.ledger-org {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ledger-role { font-weight: 500; color: var(--ink-soft); margin-top: 0.2rem; }
.ledger-note { color: var(--ink-mute); margin-top: 0.55rem; max-width: 62ch; }
.ledger-loc { text-align: right; align-self: start; padding-top: 0.4rem; }

/* compact rows: the non-design chapters stay honest but step back,
   so the eye lands on ORU and MasterWork */
.ledger-compact { padding-block: 1.05rem; }
.ledger-compact .ledger-org {
  font-size: 1.02rem;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.ledger-compact .ledger-role {
  font-size: 0.92em;
  font-weight: 400;
  color: var(--ink-mute);
  margin-top: 0.1rem;
}

.current-tag {
  display: inline-block;
  color: var(--paper);
  background: var(--accent-deep);
  border-radius: var(--radius);
  padding: 0.2rem 0.55rem;
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* ---------- Work ---------- */
.work { padding: clamp(5rem, 14vh, 10rem) var(--page-pad) clamp(4rem, 10vh, 8rem); }

.work-title {
  font-family: var(--font-display);
  font-size: var(--text-giant);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-left: -0.045em;              /* optical align to the gutter */
  margin-bottom: clamp(1rem, 3vh, 2rem);
}
.work-intro {
  max-width: 42ch;
  color: var(--ink-soft);
  margin-left: auto;
  margin-bottom: clamp(3rem, 8vh, 6rem);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vh, 5rem) clamp(1rem, 2.5vw, 2.5rem);
}
.project { min-width: 0; }
.p-1 { grid-column: 1 / span 5; }
.p-2 { grid-column: 7 / span 6; margin-top: clamp(3rem, 10vh, 8rem); }
.p-3 { grid-column: 2 / span 8; }
.p-4 { grid-column: 6 / span 7; margin-top: clamp(-2rem, -4vh, -1rem); }

.project-link { text-decoration: none; display: block; }

.project-media {
  position: relative;
  overflow: clip;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  transition: transform var(--dur-med) var(--ease-out);
}
.ratio-3x4  { aspect-ratio: 3 / 4; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* the four ORU posters as a light table: two staggered columns that
   drift at different speeds on scroll (JS scrub; static offset without it) */
.project-media.poster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  align-items: start;
  overflow: visible;
}
.poster-col {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  will-change: transform;
}
.poster-col-b { margin-top: clamp(2.5rem, 7vw, 6rem); }
.project-media.poster-grid img {
  position: static;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  outline: 1px solid var(--hairline-soft);
  outline-offset: -1px;
}

/* video facade: YouTube loads only after the visitor presses play */
.video-facade {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--ink);
  width: 100%;
  transition: transform var(--dur-med) var(--ease-out);
}
.video-facade:hover { transform: scale(0.985); }
.play-btn {
  position: relative;
  z-index: 1;
  width: clamp(3.5rem, 6vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(96.5% 0.004 250 / 0.92);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.play-btn::after {
  content: "";
  width: 0; height: 0;
  border-left: 1.1rem solid var(--ink);
  border-block: 0.7rem solid transparent;
  margin-left: 0.25rem;
}
.video-facade:hover .play-btn,
.video-facade:focus-visible .play-btn { background: var(--accent); transform: scale(1.06); }
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* brand specimen sheet: one mark, three colorways on hairline-ruled white */
.project-media.brand-sheet {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--hairline);
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
}
.project-media.brand-sheet img {
  position: static;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;   /* the artwork's own paper, not a UI surface */
  padding: 7%;
  min-height: 0;
}
.project-media.brand-sheet .bs-primary { grid-row: 1 / span 2; padding: 10%; }

/* live-site screenshot inside a minimal browser chrome */
.project-media.browser-frame {
  display: flex;
  flex-direction: column;
  background: var(--paper-raise);
  outline: 1px solid var(--hairline-soft);
  outline-offset: -1px;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.browser-url {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-left: 0.45rem;
}
.project-media.browser-frame img {
  position: static;
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

/* artwork with its own ground (logos): show whole, breathing room */
.project-media.media-contain { background: #fff; }  /* the artwork's own paper, not a UI surface */
.project-media.media-contain img { object-fit: contain; padding: 9%; }
.tint-a { background: var(--tint-a); }
.tint-b { background: var(--tint-b); }
.tint-c { background: var(--tint-c); }
.tint-d { background: var(--tint-d); }

.project-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.ph-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 9rem);
  letter-spacing: -0.03em;
  color: oklch(21% 0.015 255 / 0.16);
  user-select: none;
}
.ph-cross::before, .ph-cross::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), oklch(21% 0.015 255 / 0.08) 50%, transparent calc(50% + 0.5px));
}
.ph-cross::after {
  background:
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), oklch(21% 0.015 255 / 0.08) 50%, transparent calc(50% + 0.5px));
}

.project-link:hover .project-media,
.project-link:focus-visible .project-media { transform: scale(0.985); }

.project-meta { padding-top: 1.1rem; }
.project-name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 0.5rem;
}
.project-arrow {
  color: var(--accent-deep);
  display: inline-block;
  transform: translateX(-4px);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.project-link:hover .project-arrow,
.project-link:focus-visible .project-arrow,
.project-title-link:hover .project-arrow,
.project-title-link:focus-visible .project-arrow { transform: translateX(0); opacity: 1; }
.project-title-link { text-decoration: none; }

.project-desc { color: var(--ink-mute); margin-top: 0.4rem; max-width: 48ch; }
.project-tags {
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.project-year { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* case studies: native <details>, styled as an editorial expander */
.case { margin-top: 1.1rem; border-top: 1px solid var(--hairline-soft); }
.case summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  cursor: pointer;
}
.case summary::-webkit-details-marker { display: none; }
.case summary .label {
  color: var(--accent-deep);
  transition: color var(--dur-fast) var(--ease-out);
}
.case summary:hover .label { color: var(--ink); }
.case-x {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--accent-deep);
  transition: transform var(--dur-fast) var(--ease-out);
}
.case[open] .case-x { transform: rotate(45deg); }
.case-body {
  display: grid;
  gap: 1.15rem;
  padding: 0.35rem 0 1.4rem;
  max-width: 54ch;
}
/* open/close eases where the platform can (Chromium, newer Safari/Firefox);
   elsewhere it snaps, which is native <details> behavior */
:root { interpolate-size: allow-keywords; }
.case::details-content {
  block-size: 0;
  overflow-y: clip;
  opacity: 0;
  transition: block-size var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out),
              content-visibility var(--dur-med) allow-discrete;
}
.case[open]::details-content {
  block-size: auto;
  opacity: 1;
}
.case-beat .label { margin-bottom: 0.4rem; }
.case-beat p { color: var(--ink-soft); }

.work-more { margin-top: clamp(3rem, 8vh, 5rem); text-align: right; }
.work-more a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.2rem;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.work-more a:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- Contact (inverted chapter) ---------- */
.contact {
  --paper: oklch(21% 0.015 255);          /* scoped inversion */
  background: var(--paper);
  color: oklch(95% 0.005 250);
  padding: clamp(5rem, 14vh, 10rem) var(--page-pad) 0;
}
.contact .label { color: oklch(95% 0.005 250 / 0.65); }
.contact .chapter { color: var(--accent); }
.contact :focus-visible { outline-color: var(--accent); }

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 8rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.contact-title .line-tail {
  font-size: 0.45em;
  font-weight: 500;
  text-transform: none;
  color: oklch(95% 0.005 250 / 0.65);
  margin-top: 0.3em;
}
.contact-lede {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 46ch;
  color: oklch(95% 0.005 250 / 0.72);
  font-size: calc(var(--text-body) * 1.08);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 7vw, 8rem);
  margin-top: clamp(3.5rem, 9vh, 6rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid oklch(95% 0.005 250 / 0.15);
}

.contact-info { display: grid; gap: 2.25rem; align-content: start; }
.info-block .label { margin-bottom: 0.6rem; }
.mail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; }
.mail-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid oklch(95% 0.005 250 / 0.25);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  overflow-wrap: anywhere;
}
.mail-link:hover { color: var(--accent); border-color: var(--accent); }

.copy-btn {
  background: transparent;
  color: oklch(95% 0.005 250 / 0.6);
  border: 1px solid oklch(95% 0.005 250 / 0.25);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }

.info-link { text-decoration: none; border-bottom: 1px solid oklch(95% 0.005 250 / 0.25); }
.info-link:hover { color: var(--accent); border-color: var(--accent); }
.info-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.info-sep { margin: 0 0.5rem; color: oklch(95% 0.005 250 / 0.35); }

/* form: hairline editorial fields */
.contact-form { display: grid; gap: 1.75rem; align-content: start; }
.field { display: grid; gap: 0.5rem; }
.field input, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid oklch(95% 0.005 250 / 0.3);
  border-radius: 0;
  color: oklch(95% 0.005 250);
  font: inherit;
  padding: 0.55rem 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:hover, .field textarea:hover { border-color: oklch(95% 0.005 250 / 0.55); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--err); }

.form-foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.contact .btn-solid {
  background: oklch(95% 0.005 250);
  color: oklch(21% 0.015 255);
  border-color: oklch(95% 0.005 250);
}
.contact .btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-send[disabled] { opacity: 0.6; cursor: wait; }
.form-note { color: oklch(95% 0.005 250 / 0.55); font-size: 0.95rem; }
.form-status { min-height: 1.5em; font-weight: 500; }
.form-status.ok { color: oklch(80% 0.14 140); }
.form-status.err { color: var(--err); }

/* footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid oklch(95% 0.005 250 / 0.15);
  font-size: 0.95rem;
  color: oklch(95% 0.005 250 / 0.7);
}
.footer-credit {
  display: inline-block;
  padding-block: 0.35rem;                                          /* ≥24px target */
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-credit:hover { color: var(--accent-bright); }

/* ---------- Reveal states (JS-gated so no-JS still reads) ----------
   .is-in lifts the hidden state entirely instead of overriding it, so
   CSS :hover transforms (ledger rows) work after the reveal finishes. */
html.js .reveal:not(.is-in),
html.js .reveal-load:not(.is-in) {
  opacity: 0;
  transform: translateY(30px);
}
html.js .line-inner { transform: translateY(135%); }  /* past the mask incl. descender padding */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-side {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 2rem;
  }
  .p-1, .p-2, .p-3, .p-4 { grid-column: 1 / -1; margin-top: 0; }
  .p-2 { grid-column: 2 / -1; }
  .p-4 { grid-column: 1 / span 11; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .ledger-loc { text-align: left; padding-top: 0.3rem; }
}

@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; row-gap: 0.15rem; padding-block: 0.85rem; }
  .site-nav { width: 100%; order: 3; gap: 1.25rem; }
  .header-loc { display: none; }
  .wordmark-mark { display: none; }
  /* pin the eyebrow under the header so the bottom-anchored hero
     doesn't leave half the first screen empty */
  .hero { padding-top: 6.25rem; }
  .hero-eyebrow { margin-bottom: auto; }
  .hero-rail .rail-scroll { display: none; }
  .p-2, .p-4 { grid-column: 1 / -1; }
  .site-footer { flex-direction: column; gap: 0.5rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  html.js .reveal:not(.is-in),
  html.js .reveal-load:not(.is-in),
  html.js .line-inner {
    opacity: 1; transform: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}