/* ============================================================
   THE CREATIVE OPERATOR by Paul Von Rieter
   Design system: field manual meets fashion masthead.
   Family DNA: cream / forest / sage / one gold accent / grain.
   Display: TG-Dethrone. Body: Newsreader. Labels: JetBrains Mono.
   ============================================================ */

@font-face {
  font-family: 'TG Dethrone';
  src: url('../fonts/TG-Dethrone.woff2') format('woff2'),
       url('../fonts/TG-Dethrone.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F7F2EE;
  --cream-dark: #EDE5DC;
  --cream-deep: #E5DCD1;
  --forest: #182F24;
  --forest-deep: #10221A;
  --night: #0D0D0D;
  --sage: #83897D;
  --sage-light: #A8AEA1;
  --sage-deep: #5F6559;
  --gold: #C9A84C;
  --gold-light: #D4B85E;
  --gold-deep: #8A6F1A; /* locked rule: gold TEXT on light backgrounds uses gold-deep */
  --brick: #8B3A2A;
  --warm-border: #E0DCD7;
  --ink: #1E241F;

  --display: 'TG Dethrone', 'Arial Narrow', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --lockup: 'Josefin Sans', sans-serif;

  --w-max: 1240px;
  --pad: clamp(20px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--forest); }

/* ---------- film grain: dark panels only (the cream brand stays smooth) ---------- */
.night-panel::after, .dark.filmic::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.dark .kicker, .night-panel .kicker { color: var(--sage-light); }

.lede {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  font-weight: 400;
}

.serif-i { font-style: italic; }

.mono-note {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--sage-deep);
}

.num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}
.dark .num, .night-panel .num { color: var(--gold); }

/* marker-swipe highlight: gold wash behind words, never colored text */
.mark-swipe {
  background: linear-gradient(transparent 30%, rgba(201,168,76,0.28) 30%, rgba(201,168,76,0.28) 92%, transparent 92%);
  padding: 0 2px;
}

/* ghost numerals: the signature flourish */
.ghost-num {
  position: absolute;
  right: -0.05em;
  top: -0.18em;
  font-family: var(--display);
  font-size: clamp(15rem, 30vw, 34rem);
  line-height: 1;
  color: var(--forest);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.dark .ghost-num, .night-panel .ghost-num { color: var(--cream); opacity: 0.05; }

/* trail of dots: solid past, gold you-are-here, dashed future */
.trail {
  display: flex; align-items: center; gap: 0;
  padding: 8px 0;
}
.trail .t-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--forest); flex: none;
}
.trail .t-dot.sage { background: var(--sage); }
.trail .t-dot.here {
  width: 15px; height: 15px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201,168,76,0.22);
}
.trail .t-dot.future { background: transparent; border: 1.5px solid var(--sage-light); }
.trail .t-line { height: 0; flex: 1; border-top: 1.5px solid var(--cream-deep); min-width: 26px; }
.trail .t-line.dashed { border-top-style: dashed; border-top-color: #D1CDC4; }
.dark .trail .t-dot { background: var(--cream); }
.dark .trail .t-dot.sage { background: var(--sage); }
.dark .trail .t-dot.here { background: var(--gold); }
.dark .trail .t-dot.future { background: transparent; border-color: var(--sage); }
.dark .trail .t-line { border-color: rgba(247,242,238,0.25); }

/* ---------- layout ---------- */
.wrap { max-width: var(--w-max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { position: relative; }

.rule { border: none; border-top: 1px solid var(--warm-border); }
.dark .rule { border-color: rgba(247,242,238,0.14); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(247,242,238,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--warm-border);
  transition: transform 0.35s ease;
}
.nav-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.85rem;
  letter-spacing: 0.03em;
  color: var(--forest);
  text-decoration: none;
  text-transform: uppercase;
  display: flex; align-items: baseline; gap: 2px;
  white-space: nowrap;
}
.wordmark .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  transform: translateY(-1px);
}
.nav-links { display: flex; gap: clamp(14px, 2.4vw, 30px); align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav-links a:hover { border-color: var(--gold); }
.nav-links a.active { border-color: var(--gold); color: var(--sage-deep); }
.nav-cta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream) !important;
  background: var(--forest);
  padding: 9px 16px !important;
  border: none !important;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--brick); }

.nav-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest);
  padding: 8px;
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--warm-border);
    flex-direction: column;
    padding: 24px var(--pad) 32px;
    align-items: flex-start;
    gap: 18px;
  }
  .nav-links.open { display: flex; }
  .nav-burger { display: block; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border: 1px solid var(--forest);
  color: var(--forest);
  background: transparent;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--forest); color: var(--cream); }
.btn.solid { background: var(--forest); color: var(--cream); }
.btn.solid:hover { background: var(--brick); border-color: var(--brick); }
.btn.gold { border-color: var(--gold); color: var(--gold); }
.btn.gold:hover { background: var(--gold); color: var(--forest); }
.btn.on-dark { border-color: rgba(247,242,238,0.4); color: var(--cream); }
.btn.on-dark:hover { background: var(--cream); color: var(--forest); }
.btn .arrow { transition: transform 0.22s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 120px;
  position: relative;
  overflow: hidden;
}
/* the hero is a full-bleed nameplate: one line, always filling the window edge to edge.
   Fallback size is 21.5vw; main.js measures the real glyph run and locks it exactly. */
.hero > .wrap { max-width: none; width: 100%; }
.hero-topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0.6em;
}
.hero-title {
  font-size: clamp(3.5rem, min(11.5vw, 18.5svh), 24rem);
  color: var(--forest);
  margin: 0 0 0.12em;
  line-height: 0.8;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 70px);
  align-items: end;
  width: 100%;
}
.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: clamp(24px, 4vh, 50px);
}
.hero-portrait {
  height: min(66svh, 640px);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(24,47,36,0.10), 0 2px 8px rgba(24,47,36,0.06);
}
.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  /* mobile state: the type goes full-column massive, portrait anchors below */
  .hero-title { font-size: clamp(3rem, min(58vw, 23svh), 22rem); }
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-right { align-items: flex-start; }
  .hero-portrait { height: min(48svh, 430px); }
}
.hero-title .h-dot {
  display: inline-block;
  width: 0.11em; height: 0.11em;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 0.06em;
}
.hero-title .line { display: block; overflow: hidden; white-space: nowrap; }
.hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.hero-title .line:nth-child(2) span { animation-delay: 0.12s; }
.hero-title .line:nth-child(3) span { animation-delay: 0.24s; }
.hero-title .indent { text-align: right; }
.hero-title .gold-word { color: var(--gold); }
.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 80px);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: clamp(30px, 5vh, 60px);
}
@keyframes rise { to { transform: translateY(0); } }

.hero-fade { opacity: 0; animation: fade-up 0.9s ease 0.55s forwards; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- ticker ---------- */
.ticker {
  border-top: 1px solid var(--warm-border);
  border-bottom: 1px solid var(--warm-border);
  overflow: hidden;
  white-space: nowrap;
  background: var(--cream);
}
.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 36s linear infinite;
  padding: 13px 0;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-deep);
  padding: 0 26px;
  display: inline-flex; align-items: center; gap: 26px;
}
.ticker-track span::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 12vw, 150px) 0; }
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 6vw, 70px); }
.section-title {
  font-size: clamp(3.6rem, 9.5vw, 9rem);
  color: var(--forest);
}
.dark .section-title, .night-panel .section-title { color: var(--cream); }

.dark {
  background: var(--forest);
  color: rgba(247,242,238,0.86);
}
.dark-deep { background: var(--forest-deep); }
.night-panel { background: var(--night); color: rgba(240,235,225,0.88); }

/* ---------- doctrine (field notes wall) ---------- */
.doctrine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(247,242,238,0.12);
  border: 1px solid rgba(247,242,238,0.12);
}
.doctrine-card {
  background: var(--forest);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 220px;
  justify-content: space-between;
  transition: background 0.25s;
}
.doctrine-card:hover { background: var(--forest-deep); }
.doctrine-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--cream);
}
.doctrine-card .num { color: var(--gold); }
@media (max-width: 900px) { .doctrine-grid { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  background: var(--cream);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
  position: relative;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(24,47,36,0.09);
  border-color: var(--sage-light);
}
.card h3 { font-size: clamp(2.3rem, 3.6vw, 3.4rem); color: var(--forest); }
.card .price {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.card p { font-size: 0.98rem; color: var(--sage-deep); }
.card .card-cta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--warm-border);
}
.card .card-cta .arrow { transition: transform 0.2s; color: var(--gold); }
.card:hover .card-cta .arrow { transform: translateX(5px); }

.card .tag {
  position: absolute;
  top: 0; right: 18px;
  border-radius: 0 0 6px 6px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: var(--forest);
  color: var(--cream);
}
.card .tag.gold-tag { background: var(--gold); color: var(--forest); }
.card .tag.brick-tag { background: var(--brick); color: var(--cream); }

/* ---------- arsenal (brand wall) ---------- */
.arsenal-list { border-top: 1px solid var(--warm-border); }
.arsenal-row {
  display: grid;
  grid-template-columns: 54px clamp(56px, 6vw, 84px) 1.1fr 1.6fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--warm-border);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.25s ease, background 0.25s;
}
.arsenal-row:hover { padding-left: 14px; background: rgba(201,168,76,0.05); }
.arsenal-row h3 {
  font-size: clamp(2.8rem, 5.4vw, 4.8rem);
  color: var(--forest);
  transition: color 0.2s;
}
.arsenal-row:hover h3 { color: var(--brick); }
.arsenal-row .desc { font-size: 0.95rem; color: var(--sage-deep); max-width: 480px; }
.arsenal-row .status {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--warm-border);
  color: var(--sage-deep);
  white-space: nowrap;
}
.arsenal-row .status.live { border-color: var(--gold); color: var(--gold-deep); }
@media (max-width: 900px) {
  .arsenal-row { grid-template-columns: clamp(56px,14vw,84px) 1fr; gap: 10px 16px; }
  .arsenal-row .num { grid-column: 1 / -1; }
  .arsenal-row .desc, .arsenal-row .status { grid-column: 2; }
  .arsenal-row .status { justify-self: start; }
}

/* ---------- stats / proof ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(240,235,225,0.14);
  border: 1px solid rgba(240,235,225,0.14);
}
.proof-cell {
  background: var(--night);
  padding: clamp(26px, 3vw, 44px) clamp(20px, 2.5vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
}
.proof-cell .big {
  font-family: var(--display);
  font-size: clamp(3.6rem, 7.5vw, 7.5rem);
  color: var(--cream);
  line-height: 0.9;
}
.proof-cell .big em { font-style: normal; color: var(--gold); }
.proof-cell .label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-light);
  line-height: 1.6;
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- ledger bars (contact sheet echo) ---------- */
.ledger {
  display: flex; align-items: flex-end; gap: 6px;
  height: 54px;
}
.ledger i {
  flex: 1;
  background: var(--gold);
  opacity: 0.85;
  animation: ledger-grow 1s cubic-bezier(0.19,1,0.22,1) both;
}
.ledger i:nth-child(odd) { background: var(--sage); }
@keyframes ledger-grow { from { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- forms ---------- */
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.input {
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 15px 18px;
  border: 1px solid rgba(247,242,238,0.3);
  background: rgba(247,242,238,0.06);
  color: var(--cream);
  min-width: 0;
  flex: 1 1 220px;
  outline: none;
  transition: border-color 0.2s;
}
.input::placeholder { color: rgba(247,242,238,0.4); }
.input:focus { border-color: var(--gold); }
.light-form .input {
  border-color: var(--warm-border);
  background: #fff;
  color: var(--ink);
}
.light-form .input::placeholder { color: var(--sage); }

.form-note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--sage-light); }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19,1,0.22,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-title .line span { transform: none; }
  .hero-fade { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ---------- footer ---------- */
.footer {
  background: var(--forest-deep);
  color: rgba(247,242,238,0.75);
  padding: clamp(60px, 8vw, 100px) 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  margin-bottom: 60px;
}
.footer h4 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer a {
  color: rgba(247,242,238,0.75);
  text-decoration: none;
  display: block;
  font-size: 0.92rem;
  padding: 5px 0;
  transition: color 0.2s;
}
.footer a:hover { color: var(--gold); }
.footer-lockup { display: flex; flex-direction: column; gap: 12px; }
.footer-lockup .mark {
  font-family: var(--display);
  font-size: 3.2rem;
  color: var(--cream);
  text-transform: uppercase;
  line-height: 1;
}
.pvr-lockup {
  display: flex; align-items: center; gap: 10px;
}
.pvr-lockup .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.pvr-lockup .name {
  font-family: var(--lockup);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
}
.pvr-lockup .role {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--sage-light);
}
.footer-bottom {
  border-top: 1px solid rgba(247,242,238,0.12);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--sage);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  padding: clamp(140px, 20vh, 220px) 0 clamp(50px, 8vw, 90px);
}
.page-hero h1 {
  font-size: clamp(4rem, 12.5vw, 12.5rem);
  color: var(--forest);
  margin: 18px 0 22px;
}
.page-hero .lede { max-width: 720px; color: var(--sage-deep); }

/* ---------- misc ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.checklist li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 1rem;
}
.checklist li::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  flex: none;
  margin-top: 0.55em;
}

.big-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--cream);
  max-width: 900px;
}
.big-quote .att {
  display: block;
  margin-top: 28px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--forest);
  padding: 10px 16px; font-family: var(--mono); font-size: 0.8rem;
  z-index: 2001;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- credibility chips ---------- */
.cred-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--taupe, #D1CDC4);
  border-radius: 100px;
  color: var(--sage-deep);
  background: var(--cream);
  white-space: nowrap;
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--warm-border); }
.faq-item:first-of-type { border-top: 1px solid var(--warm-border); }
.faq-item summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--forest);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--gold-deep);
  flex: none;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a {
  padding: 0 0 26px;
  color: var(--sage-deep);
  max-width: 720px;
  font-size: 1rem;
}


/* ---------- the journey timeline (about) ---------- */
.journey { max-width: 900px; }
.j-row { display: grid; grid-template-columns: 34px 1fr; column-gap: 22px; }
.j-rail { display: flex; flex-direction: column; align-items: center; }
.j-rail .jd { width: 11px; height: 11px; border-radius: 50%; background: var(--forest); flex: none; margin-top: 8px; }
.j-row.here .j-rail .jd { width: 15px; height: 15px; background: var(--gold); box-shadow: 0 0 0 5px rgba(201,168,76,0.22); }
.j-rail .jl { width: 0; flex: 1; border-left: 1.5px dashed #D1CDC4; margin: 6px 0; }
.j-row:last-child .j-rail .jl { display: none; }
.j-body { padding-bottom: clamp(28px, 4vw, 44px); }
.j-body h3 { font-size: clamp(2.2rem, 4vw, 3.6rem); color: var(--forest); margin: 4px 0 10px; }
.j-body p { color: var(--sage-deep); max-width: 640px; font-size: 1rem; }

/* ---------- image system ---------- */
.img-frame {
  position: relative;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(24,47,36,0.10), 0 2px 8px rgba(24,47,36,0.06);
  background: var(--cream-dark);
}
.img-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(0.98);
}
.img-frame.bw img { filter: grayscale(1) contrast(1.02); }
.img-frame .ph-chip {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(13,13,13,0.72);
  color: var(--gold);
  pointer-events: none;
}
.img-caption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--sage-deep);
  margin-top: 10px;
}
.dark .img-caption, .night-panel .img-caption { color: var(--sage-light); }

/* filmstrip: a contact-sheet row */
.filmstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.filmstrip .img-frame { aspect-ratio: 3 / 4; border-radius: 8px; }
.night-panel .filmstrip .img-frame { border-color: rgba(240,235,225,0.2); }
.night-panel .filmstrip .img-frame img { filter: grayscale(1) contrast(1.05) brightness(0.92); transition: filter 0.35s; }
.night-panel .filmstrip .img-frame:hover img { filter: saturate(0.85) contrast(1); }
@media (max-width: 900px) { .filmstrip { grid-template-columns: repeat(3, 1fr); } }

/* arsenal thumbnails */
.arsenal-thumb {
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  border-radius: 10px;
  border: 1px solid var(--warm-border);
  overflow: hidden;
  background: var(--cream-dark);
  flex: none;
}
.arsenal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }