/* ==========================================================================
   TENET — production stylesheet
   Compiled from the approved prototype (TENET.html). Every value here is
   traceable to that file or to README.md §1. Tokens live in :root only.
   ========================================================================== */

@import url('fonts.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour — README §1.1 */
  --green:      #14251C;
  --ivory:      #F8F8F7;   /* brand "Paper" — unified with /brand, Sep 2026 */
  --ink:        #161616;
  --body-ink:   #33322E;
  --hair:       #E8E5DD;
  --muted:      #6A675F;
  --faint:      #8B877C;
  --ghost:      #B4B0A4;
  --img-a:      #E4E1D8;
  --img-b:      #E9E6DD;
  --name-grey:  #8A8A86;
  --desc-grey:  #A9A8A3;
  --tint:       #5F8268;   /* brand "Sage" — unified with /brand, Sep 2026 */
  --tan:        #C77B3B;
  --ph-label:   #9A968D;
  --ph-caption: #A6A198;
  /* Portrait tile. Matches the studio backdrop in the supplied photographs, so
     the fill shown while an image loads does not flash a different grey. The
     four deck portraits keep their own backdrop; only Christy is composited. */
  --portrait-bg: #949AA5;

  /* Ivory at opacity, on green surfaces — README §1.1 */
  --iv-72: rgba(248, 248, 247, 0.72);
  --iv-62: rgba(248, 248, 247, 0.62);
  --iv-55: rgba(248, 248, 247, 0.55);
  --iv-50: rgba(248, 248, 247, 0.50);
  --iv-32: rgba(248, 248, 247, 0.32);
  --iv-24: rgba(248, 248, 247, 0.24);
  --iv-16: rgba(248, 248, 247, 0.16);
  --iv-14: rgba(248, 248, 247, 0.14);

  /* Type */
  --head: 'Playfair Display', Georgia, serif;
  --body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --head-ls: -0.005em;

  /* Layout — README §1.3 */
  --maxw: 1340px;
  --gutter: clamp(24px, 6vw, 88px);
  --nav-gutter: clamp(20px, 2.5vw, 36px);
  --nav-h: 74px;
  --sec-pad: clamp(72px, 10vh, 140px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Short pages (Insights, Portfolio) used to end above the fold, leaving a
     band of page colour under the green footer. The column fills the
     viewport and <main> takes the slack, so the footer always sits at the
     bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* Justified body copy (review, Sep 2026), limited to the long-measure
   text where it reads well: the essay bodies and the team bios. Short
   measures on the landing stay ragged — without hyphenation, justifying
   them opened visible gaps between words. */
.acc__bio p,
.article__body p,
.legal__body p,
.lp-body {
  text-align: justify;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.nav, .footer { flex: 0 0 auto; }

img { max-width: 100%; }
button { font-family: inherit; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--green); color: #FFFFFF; }

/* Shared wrappers */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sec-pad);
  border-top: 1px solid var(--hair);
}

/* Visible keyboard focus. The prototype had none; this is additive and does
   not alter any rendered state. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--ivory);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 12px 18px;
}
.skip-link:focus { left: 0; }

/* Visually hidden, still read by assistive tech and search. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Legal body that opens the page: no headline above, so no top gap. */
.legal__body--bare { margin-top: 0; }
.legal__body--bare > .legal__h2:first-child { margin-top: 0; }

/* A page headline with no eyebrow above it. */
.h2--solo { margin-top: 0; }

/* --------------------------------------------------------------------------
   3. Type primitives
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow .num { color: var(--green); }

/* Named for the prototype's "Section H2" role. On the inner pages this class
   is applied to the page's <h1>, since each page now needs exactly one. The
   rendered result is identical; only the tag changed. */
.h2 {
  font-family: var(--head);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.14;
  margin: 16px 0 0;
}

/* --------------------------------------------------------------------------
   4. Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green);
  border-bottom: 1px solid var(--iv-16);
}

.nav__bar {
  width: 100%;
  height: var(--nav-h);
  padding-inline: var(--nav-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* V4 landing nav: official full lockup (Tenet_Full_Logo — large symbol
   beside the wordmark, small star cut out of the N) as an ivory CSS mask,
   20px tall per the design, and three mono uppercase links. No drawer: the
   row shrinks on small screens instead. */
.nav__logo { display: flex; align-items: center; }

.nav__lockup {
  display: block;
  flex: 0 0 auto;
  height: 20px;
  aspect-ratio: 3805.614 / 768.202;
  background-color: var(--ivory);
  -webkit-mask: url('../img/tenet-full-logo.834d1804.svg') no-repeat center / contain;
  mask: url('../img/tenet-full-logo.834d1804.svg') no-repeat center / contain;
}

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }

/* Same setting as the footer's legal links (review): mono, 13px, 0.08em,
   sentence case. */
.nav__link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--ivory);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--ivory); opacity: 0.75; }
.nav__link[aria-current='page'] { border-bottom-color: var(--iv-55); }

@media (max-width: 480px) {
  .nav__lockup { height: 16px; }
  .nav__links { gap: 14px; }
  .nav__link { font-size: 11px; letter-spacing: 0.06em; }
}

/* --------------------------------------------------------------------------
   5. Home — the V4 landing
   Compiled from the design export. Motion state lives in tenet.js
   (initLanding); everything here is the FINAL, at-rest state, so the page
   reads correctly without JavaScript. The pinned era sequence is desktop +
   full-motion only; the static grid serves everyone else (see the fallback
   rules at the end of this section).
   -------------------------------------------------------------------------- */

/* ---- hero ---- */

.lp-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  background: var(--ivory);
  overflow: hidden;
}

.lp-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: var(--sec-pad);
  padding-bottom: 112px;
}

.lp-hero__box { max-width: 1040px; }

.lp-hero__h1 {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.08;
  font-size: clamp(44px, 5.6vw, 84px);
  color: var(--ink);
  margin: 0;
}

/* Each line sits in an overflow mask so it can rise into view. The negative
   margin trick keeps descenders from being clipped while masked. */
.lp-hero__mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.lp-hero__line { display: block; }

/* The "rebuilt" plate. At rest (and with no JS) the wipe is fully drawn and
   the text is ivory; tenet.js rewinds it and plays it on load. */
/* display: inline (not inline-block) so a text selection across the headline
   reads as one continuous band — an inline-block box sat visibly proud of
   the selection. The absolutely positioned wipe covers the inline's box. */
.lp-hl {
  position: relative;
  display: inline;
  padding: 0 0.16em;
  white-space: nowrap;
}
.lp-hl__wipe { position: absolute; inset: 0; background: var(--green); }
.lp-hl__text { position: relative; color: var(--ivory); }

/* The official four-point symbol, masked so the colour stays a token and
   sized in em so it scales with the headline instead of sitting at a fixed
   22px. 0.42em matches the proportion the original hero end-mark used;
   the vertical-align centres it optically on the "rebuilt" plate. */
.lp-hero__star {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.06em;
  vertical-align: 0.36em;   /* high, like an asterisk, per review */
  background-color: var(--ink);
  -webkit-mask: url('../img/tenet-symbol.368f3b85.svg') no-repeat center / contain;
  mask: url('../img/tenet-symbol.368f3b85.svg') no-repeat center / contain;
}

.lp-hero__subs {
  max-width: 680px;   /* lets the lede sit on one line at desktop widths */
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Lede in Lato at a step above the sub, not italic Playfair: review found
   the italic serif read as generic. Two Lato weights of the same voice. */
.nowrap { white-space: nowrap; }
/* Both hero paragraphs share one voice: Lato regular, same size, justified,
   no hyphenation (review, Sep 2026). */
.lp-hero__lede,
.lp-hero__sub {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--ink);
}




/* ---- shared landing primitives ---- */

.lp-section { background: var(--ivory); }
.lp-section > .wrap { padding-block: var(--sec-pad); }

/* Section labels: sentence-case Lato in green. The mono uppercase numbered
   kicker from the export was dropped at review. */
.lp-kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--green);
  margin-bottom: 22px;
}

.lp-h2 {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  font-size: clamp(34px, 3.9vw, 58px);
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.lp-h2--display {
  line-height: 1.15;
  font-size: clamp(34px, 4.6vw, 66px);
  max-width: 900px;
}

.lp-lede {
  margin: 28px 0 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body-ink);
}

.lp-body {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--body-ink);
  text-wrap: pretty;
}

.lp-hair {
  height: 1px;
  background: var(--hair);
}
.lp-section .lp-hair:first-child { margin-bottom: clamp(56px, 8vh, 96px); }

/* ---- era grid (static fallback) ---- */

.lp-eragrid {
  display: none;   /* shown for mobile / no-JS / reduced motion below */
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 4vw, 64px);
  margin-top: clamp(56px, 8vh, 96px);
}

.lp-eraimg {
  aspect-ratio: 4 / 3;
  background: var(--img-a);
  overflow: hidden;
  filter: grayscale(1) brightness(0.92);
}
.lp-eraimg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-eracell__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 22px;
}
.lp-erayear {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.lp-eraword {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: var(--head-ls);
  font-size: clamp(28px, 2.6vw, 40px);
  color: var(--green);
  margin: 0;
}
.lp-eraline {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body-ink);
}

/* ---- pinned era sequence ---- */

.lp-pin { position: relative; height: 700vh; background: var(--ivory); }
.lp-pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;   /* tracks the phone toolbar as it collapses */
  overflow: hidden;
}

.lp-seq {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  will-change: opacity;
}
.lp-seq__row {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.lp-seq__imgbox {
  width: 44%;
  flex: none;
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--img-a);
  overflow: hidden;
}
.lp-seq__img {
  position: absolute;
  inset: 0;
  transform: translateX(104%);   /* offstage right; JS drives the push */
  filter: grayscale(1) brightness(0.92);
  will-change: transform;
}
.lp-seq__img[data-eimg='0'] { transform: translateX(0); }
.lp-seq__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-seq__text { flex: 1; min-width: 0; }

.lp-seq__meta { display: flex; align-items: center; gap: 22px; }
.lp-seq__year {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--ink);
  transition: opacity 220ms ease;
}
.lp-seq__prog {
  flex: none;
  display: flex;
  gap: 6px;
  width: min(200px, 30%);
}
.lp-seq__prog i {
  flex: 1;
  height: 2px;
  background: var(--img-a);
  transition: background 400ms ease;
}
.lp-seq__prog i:first-child { background: var(--ink); }

.lp-seq__stack {
  position: relative;
  height: clamp(180px, 24vh, 260px);
  margin-top: 22px;
}
.lp-seq__panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.lp-seq__panel[data-etxt='0'] { opacity: 1; }
.lp-seq__word {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: var(--head-ls);
  line-height: 1.05;
  font-size: clamp(44px, 5.5vw, 80px);
  color: var(--green);
  margin: 0;
}
.lp-seq__line {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body-ink);
}

/* ---- finale ---- */

.lp-finale {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.45);
  filter: grayscale(1) brightness(0.92);
  will-change: transform, opacity, filter;
  transform-origin: 50% 55%;
}
.lp-finale img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-finale__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 37, 28, 0.62) 0%, rgba(20, 37, 28, 0) 55%);
  will-change: opacity;
}

.lp-finale__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  display: flex;
  align-items: flex-end;
}
.lp-finale__layer > .wrap { padding-bottom: 40px; }

/* Same setting as the thesis line below it (review): one voice for both
   finale captions. */
.lp-finale__cap {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  font-size: clamp(30px, 3.05vw, 44px);
  color: var(--ivory);
  margin: 0;
  max-width: 1120px;
  text-wrap: pretty;
}
/* Justified (review). Sized so it sets as two lines at desktop widths — a
   justified first line and a natural last line — instead of three lines
   with a one-word orphan and visibly stretched word gaps. */
.lp-finale__thesis {
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  font-size: clamp(30px, 3.05vw, 44px);
  color: var(--ivory);
  margin: 0;
  max-width: 1120px;
  text-wrap: pretty;
}

/* ---- where we come in ---- */

.lp-twocol {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.lp-twocol__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vh, 34px);
  padding-top: 6px;
}

/* Lato regular, upright — same treatment as the hero lede (review found
   the italic serif read as generic). */
.lp-pull {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}

.lp-worldview {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: clamp(16px, 3vh, 28px);
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  white-space: nowrap;
  align-self: flex-start;
}
.lp-arrow {
  display: inline-block;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-worldview:hover { color: var(--ink); }
.lp-worldview:hover .lp-arrow { transform: translateX(10px); }

/* ---- brand moment ---- */

.lp-brand { background: var(--ivory); }
.lp-brand__inner {
  padding-block: clamp(120px, 18vh, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.lp-brand__logo {
  width: clamp(220px, 28vw, 400px);
  height: auto;
  display: block;
}
.lp-brand__def {
  margin: 0;
  max-width: 440px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body-ink);
}

/* ---- pinned sequence on phones: stacked, shorter runway ---- */

@media (max-width: 767px) {
  /* Longer runway than the first pass (520vh): the era hand-offs went by too
     quickly under a thumb. */
  .lp-pin { height: 640vh; }
  /* "rebuilt" drops to its own line on phones, and the plate's top edge sat
     hard against the descenders of the line above. A touch more leading in
     the headline and a small inset on the plate's top give it air. */
  .lp-hero__h1 { line-height: 1.2; }
  /* The plate is the inline's content box, which overshoots the line box by
     ~0.07em each way at this leading; 0.22em pulls its top edge clear of the
     descenders above while still sitting above the ascenders of "rebuilt". */
  .lp-hl__wipe { top: 0.22em; }
  .lp-seq__row {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .lp-seq__imgbox { width: 100%; aspect-ratio: 4 / 3; }
  .lp-seq__stack { height: clamp(150px, 26vh, 220px); margin-top: 16px; }
  .lp-seq__word { font-size: clamp(38px, 11vw, 52px); }
  .lp-seq__line { font-size: 16px; margin-top: 12px; }
  .lp-seq__year { font-size: 12px; }
  .lp-finale__layer > .wrap { padding-bottom: 32px; }
  .lp-finale__cap,
  .lp-finale__thesis { font-size: clamp(26px, 7vw, 38px); }
}

/* ---- static finale (no-JS / reduced motion) ---- */

.lp-finstat { display: none; margin-top: clamp(56px, 8vh, 96px); }

/* Full-bleed within .wrap: pull out by the gutter on both sides. */
.lp-finstat__img {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--green);
}
.lp-finstat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-finstat__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 37, 28, 0.72) 0%, rgba(20, 37, 28, 0) 55%);
}
.lp-finstat__cap {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 28px;
  z-index: 1;
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  font-size: clamp(28px, 7vw, 40px);
  color: var(--ivory);
  text-wrap: pretty;
}
.lp-finstat__thesis {
  margin: clamp(28px, 5vh, 44px) 0 0;
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.15;
  font-size: clamp(26px, 6.2vw, 36px);
  color: var(--green);
  text-wrap: pretty;
}
@media (min-width: 600px) {
  .lp-finstat__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .lp-eragrid { grid-template-columns: 1fr; }
}

/* ---- hairline reveal + fallbacks ---- */

[data-hairline] { transform-origin: left center; }

/* The pinned sequence needs JS, a desktop viewport, and full motion. In
   every other situation the static grid takes over. */
.no-js .lp-pin { display: none; }
.no-js .lp-eragrid { display: grid; }
.no-js .lp-finstat { display: block; }
@media (prefers-reduced-motion: reduce) {
  .lp-pin { display: none; }
  .lp-eragrid { display: grid; }
  .lp-finstat { display: block; }
}
/* Phones keep the pinned sequence (stacked layout below); the static path
   is for no-JS and reduced motion only. */
@media (max-width: 720px) {
  .lp-eragrid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lp-twocol { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  margin-top: clamp(36px, 4.5vh, 56px);
}

.about__h2 {
  font-family: var(--head);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

.about__copy { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 28px); max-width: 60ch; }

.about__copy p {
  margin: 0;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  color: var(--body-ink);
  line-height: 1.62;
}

.about__pull {
  display: block;
  margin-top: clamp(22px, 3.2vh, 34px);
  color: var(--green);
  font-weight: 700;
  font-family: var(--head);
}

/* Era sequence */
.eras { margin-top: clamp(40px, 6vh, 88px); }

.era {
  min-height: 85vh;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(28px, 4vh, 64px);
}

/* Fill shows only while the photograph loads. The prototype used --ink, which
   flashed black; --img-b matches the placeholder tone used elsewhere. */
.era__frame { aspect-ratio: 4 / 3; background: var(--img-b); overflow: hidden; }
.era__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.04);
  display: block;
}

.era__year {
  font-family: var(--mono);
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  letter-spacing: 0.14em;
  color: var(--green);
}

.era__word {
  font-family: var(--head);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1;
  color: var(--green);
  margin: clamp(10px, 1.6vh, 16px) 0 0;
}

.era__line {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  color: var(--body-ink);
  line-height: 1.5;
  margin: clamp(16px, 2.2vh, 24px) 0 0;
  /* Each of these reads as a single sentence and was breaking one word onto a
     second line. The 24ch measure from the prototype was the cause; the
     longest line is 35 characters. */
  max-width: 38ch;
}

.era--turn { display: flex; align-items: center; }
.era--turn p {
  margin: 0;
  font-family: var(--head);
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.1;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}

/* Placeholder frame inside an era step */
.era__frame--ph {
  background: var(--img-b);
  display: flex;
  align-items: flex-end;
  padding: clamp(14px, 2vw, 20px);
}
.era__frame--ph span {
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.9vw, 0.74rem);
  letter-spacing: 0.12em;
  line-height: 1.55;
  color: var(--ph-label);
}

/* Full-bleed bands */
.band {
  position: relative;
  width: 100%;
  background: var(--img-a);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.band--now { height: clamp(460px, 75vh, 940px); }
.band--candid { height: clamp(360px, 52vh, 640px); }

.band__ph {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-caption);
  text-align: center;
  padding: 0 24px;
}
.band--now .band__ph { max-width: 46ch; line-height: 1.7; }

.band__caption {
  position: absolute;
  left: var(--gutter);
  font-family: var(--mono);
  letter-spacing: 0.06em;
}
.band--now .band__caption { bottom: clamp(20px, 3.5vh, 38px); font-size: 0.78rem; color: var(--ink); }
.band--candid .band__caption { bottom: clamp(18px, 3vh, 30px); font-size: 0.76rem; color: var(--muted); }

.band__caption .star { color: var(--green); margin-right: 7px; }
.band--candid .band__caption .star { display: inline-block; font-size: 0.82em; }

/* --------------------------------------------------------------------------
   8. Portfolio
   -------------------------------------------------------------------------- */

.rows { margin-top: clamp(40px, 5vh, 64px); }
/* Lists that open the page with no headline above them. */
.rows--bare, .acc--bare { margin-top: 0; }

.prow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(20px, 4vw, 48px);
  padding-block: clamp(22px, 3.2vh, 36px);
  border-top: 1px solid var(--hair);
  color: var(--ink);
}
.prow:last-child { border-bottom: 1px solid var(--hair); }

.prow__num {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ghost);
}

.prow__name {
  flex: 1 1 auto;
  font-family: var(--head);
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.05;
  color: var(--name-grey);
  transition: color 0.2s ease;
}

.prow__desc {
  flex: 0 0 auto;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--desc-grey);
  transition: color 0.2s ease;
}

.prow:hover .prow__name { color: var(--green); }
.prow:hover .prow__desc { color: var(--ink); }

/* --------------------------------------------------------------------------
   9. Insights
   -------------------------------------------------------------------------- */

.irow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px clamp(20px, 4vw, 48px);
  padding-block: clamp(22px, 3.2vh, 34px);
  border-top: 1px solid var(--hair);
  color: var(--ink);
}
.irow:last-child { border-bottom: 1px solid var(--hair); }

.irow__date {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--tint);
  padding-top: 0.5em;
}

.irow__body { flex: 1 1 300px; min-width: 0; }

.irow__title {
  font-family: var(--head);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.08;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.14em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Title and excerpt share one measure (set on .irow__body below) so the
   excerpt no longer wraps at a narrower width than the title above it. */
.irow__excerpt {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
}
.irow__body { max-width: 820px; }

.irow:hover .irow__title { color: var(--green); text-decoration-color: var(--green); }

/* --------------------------------------------------------------------------
   9b. Insights article
   -------------------------------------------------------------------------- */

.article__back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.article__back:hover { color: var(--green); border-bottom-color: var(--tint); }

.article__date {
  margin-top: clamp(32px, 5vh, 56px);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--tint);
}

.article__title {
  font-family: var(--head);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  margin: clamp(14px, 2vh, 20px) 0 0;
  max-width: 30ch;
  text-wrap: balance;
}

.article__standfirst {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.65;
  color: var(--body-ink);
  margin: clamp(20px, 3vh, 30px) 0 0;
  max-width: 72ch;
}

.article__body {
  margin-top: clamp(36px, 5vh, 60px);
  padding-top: clamp(30px, 4vh, 48px);
  border-top: 1px solid var(--hair);
  max-width: 82ch;
}
.article__body p {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.72;
  color: var(--body-ink);
  margin: 0 0 1.25em;
}
.article__body h2 {
  font-family: var(--head);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.2;
  margin: clamp(36px, 5vh, 56px) 0 clamp(12px, 2vh, 18px);
}
.article__body blockquote {
  margin: clamp(28px, 4vh, 40px) 0;
  padding-left: clamp(18px, 3vw, 28px);
  border-left: 2px solid var(--green);
  font-family: var(--head);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--green);
}
.article__body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tint); text-underline-offset: 0.14em; }

/* Visible marker while a piece is unwritten. Delete the block with the copy. */
.article__todo {
  background: var(--img-b);
  padding: clamp(24px, 4vw, 36px);
}
.article__todo-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ph-label);
  margin-bottom: 12px;
}
.article__todo p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. Team accordion
   -------------------------------------------------------------------------- */

.acc { margin-top: clamp(36px, 4.5vh, 56px); border-top: 1px solid var(--hair); }
.acc__item { border-bottom: 1px solid var(--hair); }

.acc__header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  padding-block: clamp(20px, 3vh, 30px);
  /* The UA gives <button> 6px side padding, which nudged every name off the
     hairline and the portrait below it. */
  padding-inline: 0;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  color: var(--ink);
  font: inherit;
}

.acc__name {
  flex: 1 1 auto;
  font-family: var(--head);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.05;
}

.acc__role { flex: 0 0 auto; font-size: 0.95rem; color: var(--muted); }

.acc__sign {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--tan);
  width: 1em;
  text-align: center;
}

.acc__panel {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: 0 0 clamp(30px, 4vh, 44px);
  align-items: start;
  animation: accOpen 0.3s ease;
}
.acc__panel[hidden] { display: none; }

.acc__portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 220px;
  background: var(--img-b);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.acc__portrait span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--ghost);
}

/* Real portrait in place of the placeholder tile.

   The photographs are used exactly as delivered — full frame, nothing cropped,
   nothing reframed. That means the tile must NOT impose a square: the earlier
   `aspect-ratio: 1/1` with `object-fit: cover` was silently trimming the top
   and bottom off every one of them. The image sets its own height instead.

   All five happen to share a ratio of about 0.986, so the row still lines up. */
.acc__portrait--photo {
  padding: 0;
  display: block;
  aspect-ratio: auto;
  height: auto;
  background: var(--portrait-bg);
}
.acc__portrait--photo img {
  width: 100%;
  height: auto;
  object-fit: fill;
  display: block;
}

.acc__bio { max-width: 64ch; }
.acc__bio p {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.62;
  color: var(--body-ink);
}

.acc__inv { margin-top: 24px; }
.acc__inv-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.acc__inv-list {
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--green);
  line-height: 1.8;
  margin-top: 10px;
}
.acc__inv-list .tbd { color: var(--ghost); }

@keyframes accOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11. Contact — UNUSED. The Contact page was removed at review; the address now
   sits in the footer beside LinkedIn and X. Rules kept in case a page returns.
   -------------------------------------------------------------------------- */

.contact {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(64px, 9vh, 120px);
}

.contact__h2 {
  font-family: var(--head);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  margin: clamp(20px, 3vh, 34px) 0 0;
}

.contact__emailwrap {
  margin-top: clamp(28px, 5vh, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vh, 44px);
}

.contact__email {
  width: fit-content;
  font-family: var(--head);
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.035em;
  text-underline-offset: 0.1em;
  transition: text-decoration-color 0.2s ease;
}
.contact__email:hover { text-decoration-color: var(--tint); }

.contact__social {
  margin-top: clamp(36px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.contact__social-row { display: flex; gap: 20px; }
.contact__social a {
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-bottom-color 0.2s ease;
}
.contact__social a:hover { border-bottom-color: var(--tint); }

/* --------------------------------------------------------------------------
   12. Footer — V4 landing design, identical on every page.
   Hairline rule, ivory lockup (CSS mask), mono definition line, underlined
   mono social links, legal column right-aligned.
   -------------------------------------------------------------------------- */

.footer {
  background: var(--green);
  color: var(--ivory);
}
.footer > .wrap { padding-top: 64px; padding-bottom: 30px; }

.footer__rule {
  height: 1px;
  background: rgba(232, 229, 221, 0.28);
  margin-bottom: 40px;
}

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 760px;
}

.footer__lockup {
  display: block;
  height: 22px;
  aspect-ratio: 3805.614 / 768.202;
  background-color: var(--ivory);
  -webkit-mask: url('../img/tenet-full-logo.834d1804.svg') no-repeat left center / contain;
  mask: url('../img/tenet-full-logo.834d1804.svg') no-repeat left center / contain;
}

.footer__def {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ivory);
  text-wrap: pretty;
}
.footer__def .word { color: var(--ivory); }
.footer__gloss { color: var(--ghost); }

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.footer__social a {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--ghost);
  transition: text-decoration-color 0.2s ease;
}
.footer__social a:hover { color: var(--ivory); text-decoration-color: var(--ivory); }

.footer__legal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--ghost);
}
.footer__legal a { color: var(--ghost); }
.footer__legal a:hover { color: var(--ivory); }
.footer__copy { color: var(--ghost); }

@media (max-width: 700px) {
  .footer__legal { align-items: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   13. 404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(64px, 9vh, 120px);
}

.notfound__h1 {
  font-family: var(--head);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.12;
  margin: clamp(20px, 3vh, 34px) 0 0;
  max-width: 20ch;
  text-wrap: balance;
}

.notfound__back {
  display: inline-block;
  margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-bottom-color 0.2s ease;
}
.notfound__back:hover { border-bottom-color: var(--tint); }

/* --------------------------------------------------------------------------
   14. Scroll reveal
   -------------------------------------------------------------------------- */

/* The V4 landing's timing, applied sitewide: slow, weighty settle.
   Per-element stagger comes from data-delay, set as transitionDelay in JS. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Hairlines draw from the left instead of fading. */
[data-hairline] {
  transform: scaleX(0);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-hairline].is-visible { transform: scaleX(1); }

/* No-JS: never leave content hidden. */
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js [data-hairline] { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-hairline] { transform: scaleX(1); transition: none; }
}

/* --------------------------------------------------------------------------
   15. Breakpoint — 760px. README §1.4: this is the only one.
   -------------------------------------------------------------------------- */

@media (max-width: 759.98px) {
  .era { grid-template-columns: 1fr; }
  .acc__panel { grid-template-columns: 1fr; }
  /* Team headers: as a wrapping flex row the +/– sign landed somewhere
     different on every item (after the role, alone on a third line, flush
     right). Fixed shape on phones: name with the sign at the right edge,
     role on its own line underneath. */
  .acc__header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name sign" "role role";
    gap: 6px 16px;
    align-items: baseline;
  }
  .acc__name { grid-area: name; }
  .acc__role { grid-area: role; }
  .acc__sign { grid-area: sign; }
  /* Portfolio rows: the description always takes its own line under the
     name, aligned with it, instead of sometimes fitting beside it. */
  .prow {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "num name" ". desc";
    gap: 6px 20px;
    align-items: baseline;
  }
  .prow__num { grid-area: num; align-self: baseline; }
  .prow__name { grid-area: name; }
  .prow__desc { grid-area: desc; }
}

/* Touch screens have no hover, so the dim-until-hover rows would stay dim
   for the whole visit. Show them at full strength there. */
@media (hover: none) {
  .prow__name { color: var(--green); }
  .prow__desc { color: var(--ink); }
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */

/* (section 17, review mode, is at the end of this file) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .acc__panel { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   17. Review mode  —  INTERNAL ONLY, DELETE BEFORE LAUNCH
   Everything here is scoped under .review-on, which assets/js/review.js adds
   to <html> only when ?review is active. With review mode off, none of these
   rules can match, so the public site is untouched.
   -------------------------------------------------------------------------- */

.review-on { --rv: #B4472B; }
.review-on body { padding-top: 44px; }
.review-on .nav { top: 44px; }

.rv-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(12px, 2vw, 24px);
  background: var(--rv);
  color: #FFF6F2;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
.rv-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: #FFF6F2; flex: 0 0 auto; }
.rv-bar__label { flex: 1 1 auto; }
.rv-bar__count { opacity: 0.8; }
.rv-bar__btn {
  background: rgba(255, 246, 242, 0.14);
  border: 1px solid rgba(255, 246, 242, 0.4);
  color: #FFF6F2;
  font: inherit;
  padding: 5px 12px;
  cursor: pointer;
}
.rv-bar__btn:hover { background: rgba(255, 246, 242, 0.26); }

@media (max-width: 759.98px) {
  .rv-bar__label { display: none; }
  .rv-bar { font-size: 0.68rem; gap: 8px; }
}

.rv-target { cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.12s ease; }
.rv-target:hover { box-shadow: inset 0 0 0 1px rgba(180, 71, 43, 0.55); background: rgba(180, 71, 43, 0.05); }
.rv-target--active { box-shadow: inset 0 0 0 2px var(--rv); background: rgba(180, 71, 43, 0.08); }

.rv-panel {
  position: absolute;
  z-index: 210;
  width: 340px;
  background: #FFFFFF;
  border: 1px solid #DCD8CF;
  box-shadow: 0 12px 40px rgba(20, 37, 28, 0.18);
  padding: 16px;
  font-family: var(--body);
}
.rv-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rv-panel__where {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rv);
}
.rv-panel__x { background: none; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 2px; }
.rv-panel__quote {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: #F4F2EC;
  border-left: 2px solid #DCD8CF;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--body-ink);
  max-height: 88px;
  overflow: auto;
}
.rv-panel__lab {
  display: block;
  margin: 14px 0 5px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.rv-panel__ta, .rv-panel__in {
  width: 100%;
  font-family: var(--body);
  font-size: 0.92rem;
  padding: 8px 10px;
  border: 1px solid #DCD8CF;
  background: #FFFFFF;
  color: var(--ink);
  resize: vertical;
}
.rv-panel__ta:focus, .rv-panel__in:focus { outline: 2px solid var(--rv); outline-offset: 1px; }
.rv-panel__row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rv-panel__send {
  background: var(--rv);
  color: #FFF6F2;
  border: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 9px 16px;
  cursor: pointer;
}
.rv-panel__send:hover { background: #9C3C24; }
.rv-panel__msg { font-size: 0.78rem; color: var(--muted); }
.rv-panel__msg a { color: var(--rv); text-decoration: underline; }

/* The static form Netlify's deploy scanner needs in order to register the
   endpoint. Never shown to anyone. */
.rv-formdetect { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Note pins — a marker beside every element that already has feedback. */
.rv-target--noted { box-shadow: inset 0 0 0 1px rgba(180, 71, 43, 0.35); }

.rv-pin {
  position: absolute;
  z-index: 205;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: none;
  border-radius: 11px;
  background: var(--rv);
  color: #FFF6F2;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 37, 28, 0.25);
}
.rv-pin:hover { background: #9C3C24; }

.rv-thread { max-height: 260px; overflow: auto; margin-top: 10px; }
.rv-note { padding: 10px 0; border-bottom: 1px solid #EDE9E1; }
.rv-note:last-child { border-bottom: none; }
.rv-note__who {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.rv-note__body { font-size: 0.9rem; line-height: 1.55; color: var(--body-ink); }
.rv-panel .rv-panel__send { margin-top: 12px; }
.rv-note__ref {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 4px;
}


/* --------------------------------------------------------------------------
   18. Legal pages — Disclosures, Terms of Use & Privacy
   Long-form regulatory copy. Narrower measure and a slightly smaller size than
   editorial body text, which is the convention for this material and stops a
   1,200-word page reading as a manifesto.
   -------------------------------------------------------------------------- */

.legal__title {
  font-family: var(--head);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.14;
  margin: 16px 0 0;
}

.legal__body {
  margin-top: clamp(32px, 4.5vh, 52px);
  max-width: 74ch;
}

.legal__body p {
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  line-height: 1.68;
  color: var(--body-ink);
  margin: 0 0 1.35em;
}

.legal__body p strong {
  font-weight: 700;
  color: var(--ink);
}

.legal__h2 {
  font-family: var(--head);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  line-height: 1.2;
  margin: clamp(40px, 5.5vh, 64px) 0 clamp(16px, 2.4vh, 24px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--hair);
}
.legal__h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--tint);
  text-underline-offset: 0.14em;
}

.legal__updated {
  margin-top: clamp(32px, 4vh, 44px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}
/* Under the heading rather than at the foot: no top rule, tight to the title. */
.legal__updated--top {
  margin: 0 0 clamp(22px, 3vh, 32px);
  padding-top: 0;
  border-top: 0;
  text-align: left;
  /* Same face and size as the body paragraphs beneath it. */
  font-family: var(--body);
  font-size: inherit;
  letter-spacing: 0;
  color: var(--body-ink);
}

/* Attribution line at the foot of an article that first appeared elsewhere. */
.article__byline {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.article__origin {
  margin-top: clamp(36px, 5vh, 52px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--hair);
  font-size: 0.92rem !important;
  line-height: 1.6;
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   19. Brand assets page (/brand)
   Quiet reference page, footer-linked only. Swatch and preview hexes are the
   brand-spec values supplied for this page (#F8F8F7 paper, #5F8268 sage) and
   are deliberately literal rather than site tokens.
   -------------------------------------------------------------------------- */

.brand .h2 { margin-bottom: 0; }

.brand__intro {
  max-width: 84ch;   /* wide enough that the <br> is the only line break */
  margin: 20px 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--body-ink);
}

.brand__h2 {
  font-family: var(--head);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: var(--head-ls);
  margin: clamp(48px, 7vh, 72px) 0 20px;
}

.brand__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.brand__tile { border: 1px solid var(--hair); }

.brand__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(30px, 4.5vw, 56px);
  min-height: 170px;
}
.brand__preview--paper { background: #F8F8F7; }
.brand__preview--green { background: #14251C; }
/* Marks are matched by HEIGHT, not width — equal widths made the wordmark
   render far larger. "Height" here means the LETTERS: the lockup's letters
   occupy 84.8% of its box (the large symbol is taller than the caps), so
   the wordmark — whose letters fill its box — renders at 84.8% of the
   lockup's height to put the two sections' letters at the same size. */
.brand__mark { width: auto; max-width: 100%; display: block; }
.brand__mark--lockup   { height: clamp(44px, 4.5vw, 72px); }
.brand__mark--wordmark { height: clamp(37.3px, 3.816vw, 61px); }

.brand__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--hair);
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand__dl { white-space: nowrap; }
.brand__dl a { color: var(--ink); border-bottom: 1px solid var(--ghost); padding-bottom: 1px; }
.brand__dl a:hover { border-bottom-color: var(--ink); }

.brand__note,
.brand__rules {
  max-width: 56ch;
  margin: 26px 0 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--faint);
}

.brand__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.brand__swatch { border: 1px solid var(--hair); }
.brand__swatch-color { height: 104px; }
/* Fills live here, not in style="" — the CSP blocks inline styles. */
.brand__swatch-color--green { background: #14251C; }
.brand__swatch-color--paper { background: #F8F8F7; }
.brand__swatch-color--sage  { background: #5F8268; }
.brand__swatch-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--hair);
  padding: 11px 16px;
  font-size: 0.86rem;
  color: var(--body-ink);
}
.brand__hex {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.brand__zip {
  display: inline-block;
  margin-top: clamp(36px, 5vh, 52px);
  padding: 15px 28px;
  background: var(--green);
  color: var(--ivory);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand__zip:hover { color: var(--ivory); background: #1D3428; }

.brand__contact {
  margin: clamp(36px, 5vh, 52px) 0 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.brand__contact a { color: var(--muted); border-bottom: 1px solid var(--ghost); }
.brand__contact a:hover { color: var(--ink); }

/* Footnotes at the foot of an article: smaller, muted, hairline above. */
.article__notes {
  margin-top: clamp(36px, 5vh, 52px);
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--hair);
}
.article__notes p {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
  margin: 0 0 10px !important;
  max-width: none;
}
.article__notes sup { margin-right: 4px; }