/* ============================================================
   THE LAUREL ROOM — v3 "The Dossier"
   Paper, ink, marigold, oxblood. Drawings instead of photos.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Day sheet */
  --paper: #F7F2E6;
  --paper-2: #EFE8D6;
  --ink: #2B241A;
  --ink-soft: rgba(43, 36, 26, 0.78);
  --ink-mute: rgba(43, 36, 26, 0.62);
  --laurel: #45584A;
  --marigold: #E9A13B;
  --marigold-deep: #8F5A0E;
  --oxblood: #7E3327;
  --line: rgba(43, 36, 26, 0.22);
  --line-soft: rgba(43, 36, 26, 0.10);
  --foil: linear-gradient(105deg, #8C6B3F 0%, #C9A87C 45%, #8C6B3F 100%);

  /* Bands own their local tokens */
  --band-ink: var(--paper);

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Anek Latin', 'Avenir Next', 'Segoe UI', sans-serif;
  --wonk: "SOFT" 0, "WONK" 1;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);

  /* Motion — fast and few */
  --quick: 0.15s ease;
  --settle: 0.5s cubic-bezier(0.3, 0.9, 0.4, 1);
}

/* Evening mode: the venue at night, not a grey inversion */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #221D14;
    --paper-2: #2A2418;
    --ink: #F0E8D6;
    --ink-soft: rgba(240, 232, 214, 0.82);
    --ink-mute: rgba(240, 232, 214, 0.64);
    --laurel: #8FA98B;
    --marigold: #E9A13B;
    --marigold-deep: #E9A13B;
    --oxblood: #C77B6B;
    --line: rgba(240, 232, 214, 0.28);
    --line-soft: rgba(240, 232, 214, 0.12);
  }
}

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

html {
  scroll-padding-top: 5.5rem;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 340;
  font-variation-settings: "wdth" 100;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; }
legend { padding: 0; }
strong { font-weight: 600; }
[hidden] { display: none !important; }

::selection { background: var(--marigold); color: #2B241A; }

:focus-visible {
  outline: 2.5px solid var(--marigold-deep);
  outline-offset: 3px;
}
.band :focus-visible { outline-color: var(--band-ink); }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3000;
  padding: 0.7rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Paper grain — one texture, whole site */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2500;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.display-1 {
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  font-weight: 620;
  line-height: 0.98;
}

.display-2 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  max-width: 16em;
}

.display-3 {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 560;
  line-height: 1.15;
}

.note {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--wonk);
  font-weight: 460;
  font-size: 1.1em;
  letter-spacing: 0;
  text-transform: none;
}

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 36em;
}

.label {
  font-size: 0.72rem;
  font-weight: 620;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

p + p { margin-top: 1em; }
.small { font-size: 0.86rem; color: var(--ink-mute); }
.prose { max-width: 40em; color: var(--ink-soft); }
.prose strong { color: var(--ink); }

.dropcap::first-letter {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 640;
  font-size: 3.6em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--oxblood);
}

/* Numbers behave like a spec sheet */
.num, .specdex, .rates, .price { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.rule-thick { border: 0; border-top: 3px solid var(--ink); }
.rule { border: 0; border-top: 1px solid var(--line); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 640;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--quick), color var(--quick), border-color var(--quick), transform var(--quick);
}
.btn:hover { background: var(--marigold); border-color: var(--marigold); color: #2B241A; }
.btn:active { transform: translate(1px, 1px); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.btn--quiet {
  background: transparent;
  color: var(--ink);
}
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.band .btn { background: var(--band-ink); border-color: var(--band-ink); color: var(--band-bg, var(--ink)); }
.band .btn:hover { background: transparent; color: var(--band-ink); }

.linkline {
  display: inline-block;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--marigold-deep);
  transition: text-decoration-color var(--quick), color var(--quick);
}
.linkline:hover { color: var(--marigold-deep); text-decoration-thickness: 2.5px; }
.linkline::after { content: ' \2192'; }
.linkline--plain::after { content: none; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.95rem var(--gutter);
}

.wordmark {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 620;
  font-size: 1.18rem;
  line-height: 1;
  text-decoration: none;
  margin-right: auto;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8C6B3F; /* fallback if clip unsupported */
}

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }

.nav__link {
  font-size: 0.78rem;
  font-weight: 560;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--quick), border-color var(--quick);
}
.nav__link:hover { color: var(--ink); }
.nav__link--current { color: var(--ink); border-bottom-color: var(--marigold); }

.nav__cta {
  padding: 0.6rem 1.1rem;
  font-size: 0.72rem;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 1002;
}
.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--quick), opacity var(--quick);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem var(--gutter) 2.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.nav__mobile--open { visibility: visible; opacity: 1; }

.nav__mobile-link {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(2rem, 8.5vw, 3rem);
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  padding-block: 0.55rem;
}
.nav__mobile-link:hover { color: var(--oxblood); }

.nav__mobile-foot {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 3px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 0.9rem;
}
.nav__mobile-foot a { text-decoration: none; color: var(--ink-soft); }

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ---------- Titleblock (page masthead) ---------- */
.titleblock { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }

.titleblock__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  padding-top: 0.7rem;
  border-top: 3px solid var(--ink);
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  font-size: 0.72rem;
  font-weight: 620;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.titleblock__meta strong { color: var(--ink); font-weight: 640; }
.titleblock__meta .spacer { flex: 1; }

.titleblock__dek { margin-top: 1.4rem; }

/* ---------- Spec index (dossier TOC / spec strips) ---------- */
.specdex { border-top: 3px solid var(--ink); }

.specdex__row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
a.specdex__row { transition: background var(--quick); }
a.specdex__row:hover { background: var(--paper-2); }

.specdex__no {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--wonk);
  font-size: 0.95rem;
  color: var(--ink-mute);
}
.specdex__key {
  font-size: 0.78rem;
  font-weight: 620;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.specdex__val {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 560;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
.specdex__val em { font-style: italic; color: var(--oxblood); }

@media (max-width: 640px) {
  .specdex__row { grid-template-columns: 2.2rem 1fr; }
  .specdex__val { grid-column: 2; }
}

/* ---------- Drawing sheets ---------- */
.sheet {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: clamp(1.2rem, 3vw, 2.4rem);
}

.sheet__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.6rem;
  padding-bottom: 0.8rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 620;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sheet__bar strong { color: var(--ink); }
.sheet__bar .spacer { flex: 1; }

/* registration marks */
.sheet::before, .sheet::after {
  content: '+';
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-mute);
  line-height: 1;
}
.sheet::before { top: 0.4rem; left: 0.55rem; }
.sheet::after { bottom: 0.4rem; right: 0.55rem; }

/* ---------- Drawing internals (SVG) ---------- */
.drawing { width: 100%; height: auto; display: block; }
.d-line { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.d-heavy { stroke: var(--ink); stroke-width: 2.6; fill: none; }
.d-thin { stroke: var(--ink); stroke-width: 0.8; fill: none; opacity: 0.5; }
.d-acc { stroke: var(--plan-accent, var(--laurel)); fill: none; transition: stroke var(--settle); }
.d-accfill { fill: var(--plan-accent, var(--laurel)); transition: fill var(--settle); }
.d-wash { fill: var(--plan-wash, rgba(69, 88, 74, 0.10)); transition: fill var(--settle); }
.d-dot { fill: var(--plan-glow, var(--marigold)); transition: fill var(--settle); }
.d-paper { stroke: var(--paper-2); }
.d-lbl { font-family: var(--font-body); font-size: 11px; font-weight: 620; letter-spacing: 0.1em; fill: var(--ink); }
.d-note { font-family: var(--font-display); font-style: italic; font-size: 13.5px; fill: var(--plan-text, var(--laurel)); transition: fill var(--settle); }
.d-dim { font-family: var(--font-body); font-size: 10px; font-weight: 560; letter-spacing: 0.12em; fill: var(--ink); opacity: 0.62; }

/* Preset states for the plan */
[data-preset="laurel"] { --plan-accent: #45584A; --plan-text: #45584A; --plan-wash: rgba(69, 88, 74, 0.10); --plan-glow: #E9A13B; }
[data-preset="golden"] { --plan-accent: #A06C24; --plan-text: #8F5A0E; --plan-wash: rgba(176, 122, 56, 0.13); --plan-glow: #E4B15A; }
[data-preset="blush"] { --plan-accent: #A85B4E; --plan-text: #8F4437; --plan-wash: rgba(176, 106, 94, 0.12); --plan-glow: #E2A492; }
[data-preset="mono"] { --plan-accent: #4A4A46; --plan-text: #4A4A46; --plan-wash: rgba(74, 74, 70, 0.10); --plan-glow: #A9A9A2; }
[data-preset="regal"] { --plan-accent: #6E3A5C; --plan-text: #6E3A5C; --plan-wash: rgba(110, 58, 92, 0.12); --plan-glow: #C99BB6; }

@media (prefers-color-scheme: dark) {
  [data-preset="laurel"] { --plan-accent: #8FA98B; --plan-text: #8FA98B; --plan-wash: rgba(143, 169, 139, 0.14); }
  [data-preset="golden"] { --plan-accent: #D69A45; --plan-text: #D69A45; --plan-wash: rgba(214, 154, 69, 0.14); }
  [data-preset="blush"] { --plan-accent: #D69185; --plan-text: #D69185; --plan-wash: rgba(214, 145, 133, 0.13); }
  [data-preset="mono"] { --plan-accent: #B9B9B2; --plan-text: #B9B9B2; --plan-wash: rgba(185, 185, 178, 0.12); }
  [data-preset="regal"] { --plan-accent: #C58BAD; --plan-text: #C58BAD; --plan-wash: rgba(197, 139, 173, 0.13); }
}

/* Preset switcher */
.preset-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.2rem;
}
.preset-switch button {
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  font-weight: 620;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  transition: background var(--quick), color var(--quick);
}
.preset-switch button:hover { background: var(--paper); }
.preset-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper-2); }

/* Self-drawing elevation — drawn by default; the hidden state lives only
   inside a live view() timeline, so frozen renderers show the full drawing */
.selfdraw .sd { stroke-dasharray: 1; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .selfdraw .sd,
    .selfdraw .swag {
      animation: sdDraw 1ms linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
    .selfdraw .swag { animation-name: sdFade; }
    .selfdraw .sd-late, .selfdraw .swag { animation-range: entry 20% cover 58%; }
    .selfdraw .sd-last { animation-range: entry 35% cover 72%; }
  }
}
@keyframes sdDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sdFade { from { opacity: 0; } to { opacity: 1; } }
@media print {
  .selfdraw .sd { stroke-dashoffset: 0 !important; animation: none !important; }
  .selfdraw .swag { opacity: 1 !important; animation: none !important; }
}

/* ---------- Photocard (the one photo) ---------- */
.photocard {
  position: relative;
  transform: rotate(-1.6deg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 0.8rem 0.8rem 0.9rem;
  box-shadow: 5px 6px 0 var(--line-soft);
  max-width: 560px;
}
.photocard img { border: 1px solid var(--line); }
.photocard figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.7rem;
}
.photocard .tag {
  font-size: 0.62rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.photocard .note { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Bands (saturated sections) ---------- */
.band { color: var(--band-ink); }
.band--marigold { background: #E9A13B; --band-ink: #2B241A; --band-bg: #E9A13B; }
.band--oxblood { background: #7E3327; --band-ink: #F7F2E6; --band-bg: #7E3327; }
.band--laurel { background: #45584A; --band-ink: #F7F2E6; --band-bg: #45584A; }

.band .display-2, .band .display-1 { color: var(--band-ink); }
.band .lead, .band .prose, .band p { color: var(--band-ink); }
.band .small { color: var(--band-ink); opacity: 0.75; }
.band .rule-thick { border-color: var(--band-ink); }
.band ::selection { background: var(--band-ink); color: var(--band-bg); }

.band__huge {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 620;
  line-height: 0.98;
  max-width: 12em;
}

.bandlist { margin-top: 2rem; border-top: 2px solid var(--band-ink); max-width: 44rem; }
.bandlist__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--band-ink) 35%, transparent);
}
.bandlist__row .q {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 560;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.bandlist__row .a {
  font-family: var(--font-display);
  font-style: italic;
  white-space: nowrap;
}

/* ---------- Annotation (grid break) ---------- */
.annotation {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--wonk);
  font-size: 1rem;
  color: var(--marigold-deep);
  transform: rotate(-2deg);
  display: inline-block;
}
.annotation--margin {
  position: absolute;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  right: calc(-1 * clamp(0.5rem, 2vw, 1.5rem));
  top: 20%;
  font-size: 0.95rem;
}

/* ---------- Journal ---------- */
.journal { border-top: 3px solid var(--ink); }
.journal__stamp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 0.7rem 0 2rem;
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.entry { max-width: 42em; padding-bottom: clamp(2rem, 4vw, 3rem); }
.entry + .entry { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }
.entry__meta {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 0.9rem;
}
.entry__no {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--wonk);
  font-size: 1.05rem;
  color: var(--oxblood);
}
.entry__date {
  font-size: 0.7rem;
  font-weight: 620;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.entry__title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin-bottom: 0.9rem;
}
.entry__by { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-mute); }

/* ---------- Timeline ---------- */
.timeline { border-top: 3px solid var(--ink); }
.timeline__row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: 1rem 1.2rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.timeline__mark {
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  align-self: center;
}
.timeline__row--done .timeline__mark { background: var(--laurel); border-color: var(--laurel); }
.timeline__row--now .timeline__mark { background: var(--marigold); border-color: var(--ink); }
.timeline__stage {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 580;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
}
.timeline__stage .small { display: block; font-family: var(--font-body); margin-top: 0.1rem; }
.timeline__when {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-mute);
  white-space: nowrap;
}
.timeline__row--now .timeline__when { color: var(--marigold-deep); }

/* ---------- The five looks (no photos) ---------- */
.look {
  border-top: 3px solid var(--ink);
  padding: 1.4rem 0 2.4rem;
}
.look__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
  margin-bottom: 1rem;
}
.look__no {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--wonk);
  color: var(--ink-mute);
}
.look__name { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.look__mood {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--plan-text, var(--laurel));
  font-size: 1.05rem;
}
.look__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 760px) { .look__grid { grid-template-columns: 1fr; } }

.swatches { display: flex; height: 74px; border: 1px solid var(--line); }
.swatches span { flex: 1; transition: flex 0.3s ease; }
.swatches span:hover { flex: 2.2; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  padding: 0.32rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--paper-2);
}
.chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-block;
}

.look .drawing { max-width: 420px; }

/* ---------- Thick-rule list (values, blocks, addons) ---------- */
.rulelist { border-top: 3px solid var(--ink); }
.rulelist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: 0.6rem 2rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.rulelist__row--2 { grid-template-columns: minmax(0, 1fr) auto; }
.rulelist__title {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 580;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
}
.rulelist__detail { color: var(--ink-soft); font-size: 0.95rem; }
.rulelist__val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--marigold-deep);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 700px) {
  .rulelist__row { grid-template-columns: 1fr auto; }
  .rulelist__detail { grid-column: 1 / -1; }
}

/* ---------- Pricing columns ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.tier {
  border-top: 3px solid var(--ink);
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
}
.tier--featured { border-top-color: var(--oxblood); }
.tier__tag {
  font-size: 0.66rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 0.5rem;
}
.tier__name { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 0.35rem; }
.tier__for { font-size: 0.92rem; color: var(--ink-mute); margin-bottom: 1.2rem; }
.tier__price {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
}
.tier__price .from {
  font-size: 0.42em;
  font-style: italic;
  font-weight: 460;
  color: var(--ink-mute);
  margin-right: 0.3em;
}
.tier__meta { font-size: 0.8rem; color: var(--ink-mute); margin: 0.4rem 0 1.2rem; }
.rates { width: 100%; border-top: 2px solid var(--ink); margin-bottom: 1.2rem; }
.rates div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.rates dt { color: var(--ink-soft); }
.rates dd { font-weight: 620; }
.tier__list { flex: 1; margin-bottom: 1.4rem; }
.tier__list li {
  position: relative;
  padding: 0.34rem 0 0.34rem 1.2rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.55em;
  height: 2px;
  background: var(--marigold-deep);
}
.tier__list .lead-in { padding-left: 0; font-weight: 600; color: var(--ink); }
.tier__list .lead-in::before { display: none; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top: 3px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.2rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 580;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  transition: color var(--quick);
}
.faq__q:hover { color: var(--oxblood); }
.faq__icon { flex-shrink: 0; width: 13px; height: 13px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--marigold-deep);
  transition: transform 0.25s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0); }
.faq__a { overflow: hidden; height: 0; transition: height 0.3s ease; }
.faq__a-inner { padding: 0 0 1.4rem; max-width: 42em; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.3rem; }
.field__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.field__label .opt { text-transform: none; letter-spacing: 0.02em; color: var(--ink-mute); font-weight: 400; }

.input {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 340;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transition: box-shadow var(--quick);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: none; box-shadow: 3px 3px 0 var(--marigold); }
.input::placeholder { color: var(--ink-mute); }
textarea.input { resize: vertical; min-height: 120px; }
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232B241A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
input[type="date"].input { min-height: 3.2rem; text-align: left; }

.field--error .input { border-color: #A4442E; box-shadow: 3px 3px 0 rgba(164, 68, 46, 0.3); }
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.check input { width: 17px; height: 17px; accent-color: var(--laurel); }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Capture (founding families) ---------- */
.capture { display: flex; gap: 0.6rem; max-width: 520px; }
.capture .btn { flex-shrink: 0; white-space: nowrap; }
.band .capture .input {
  background: transparent;
  border-color: var(--band-ink);
  color: var(--band-ink);
}
.band .capture .input::placeholder { color: var(--band-ink); opacity: 0.6; }
.band .capture .input:focus { box-shadow: 3px 3px 0 color-mix(in srgb, var(--band-ink) 40%, transparent); }
@media (max-width: 520px) { .capture { flex-direction: column; } }

.capture-done { max-width: 470px; }
.capture-done h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.capture-done .share { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; }

/* ---------- Plan wizard (carried mechanics, v3 skin) ---------- */
.plan__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .plan__layout { grid-template-columns: 1fr; } }

.plan__steps {
  display: flex;
  counter-reset: planstep;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 1.9rem;
}
.plan__steps li {
  counter-increment: planstep;
  flex: 1;
  padding-bottom: 0.7rem;
  font-size: 0.68rem;
  font-weight: 620;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
}
.plan__steps li::before {
  content: counter(planstep, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--wonk);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}
.plan__steps li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: var(--marigold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.plan__steps li[data-active] { color: var(--ink); }
.plan__steps li[data-active]::after { transform: scaleX(1); }
.plan__steps li[data-done] { color: var(--laurel); }
.plan__steps li[data-done]::after { transform: scaleX(1); background: var(--laurel); }
@media (max-width: 620px) { .plan__steps li span { display: none; } }

.plan__step > legend {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-bottom: 1.3rem;
}

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.choice-grid--stack { grid-template-columns: 1fr; }
@media (max-width: 620px) { .choice-grid { grid-template-columns: 1fr; } }

.choice {
  position: relative;
  display: block;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  cursor: pointer;
  transition: background var(--quick), color var(--quick), box-shadow var(--quick);
}
.choice:hover { box-shadow: 3px 3px 0 var(--line); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__title { display: block; font-weight: 500; font-size: 0.97rem; }
.choice__sub { display: block; font-size: 0.8rem; color: var(--ink-mute); margin-top: 0.1rem; }
.choice:has(input:checked) { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--marigold); }
.choice:has(input:checked) .choice__sub { color: var(--paper); opacity: 0.7; }
.choice:has(input:focus-visible) { outline: 2.5px solid var(--marigold-deep); outline-offset: 2px; }

.plan__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.plan__nav [data-plan-next], .plan__nav [data-plan-submit] { margin-left: auto; }
.plan__error { display: none; font-size: 0.88rem; color: #A4442E; margin-top: 0.9rem; }
.plan__error--show { display: block; }

.plan__aside { position: sticky; top: 5.5rem; display: grid; gap: 1.2rem; }
@media (max-width: 940px) { .plan__aside { position: static; } }

.plan-summary { border: 1.5px solid var(--ink); background: var(--paper-2); padding: 1.5rem; box-shadow: 5px 5px 0 var(--line-soft); }
.plan-summary__title {
  font-size: 0.68rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.9rem;
}
.plan-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.plan-summary__row dt { color: var(--ink-mute); flex-shrink: 0; }
.plan-summary__row dd { text-align: right; font-weight: 500; }
.plan-summary__row dd:empty::before { content: '—'; color: var(--ink-mute); font-weight: 300; }
.plan-summary__estimate { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.plan-summary__estimate-label {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 640;
  color: var(--ink-mute);
  margin-bottom: 0.25rem;
}
.plan-summary__estimate-value {
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.1;
}
.plan-summary__estimate-value:empty::before { content: '—'; color: var(--ink-mute); }
.plan-summary__note { font-size: 0.78rem; color: var(--ink-mute); margin-top: 0.45rem; }

.aside-card { border-top: 3px solid var(--ink); padding-top: 1.1rem; }
.aside-card__title { font-size: 1.15rem; margin-bottom: 0.5rem; }
.aside-card p { font-size: 0.92rem; color: var(--ink-soft); }
.aside-card .phone {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: 1.45rem;
  margin-top: 0.5rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--marigold);
  text-underline-offset: 5px;
}
.aside-card .phone:hover { color: var(--oxblood); }

.plan-success { padding: 2.5rem 0; max-width: 34em; }
.plan-success h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.9rem; }
.plan-success p { color: var(--ink-soft); }

/* ---------- Footer (light utility colophon) ---------- */
.footer {
  border-top: 3px solid var(--ink);
  padding: 2.2rem 0 2.6rem;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 2.2rem;
}
.footer__row .wordmark { font-size: 1.3rem; margin-right: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; margin-left: auto; }
.footer__links a {
  font-size: 0.8rem;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.footer__links a:hover { color: var(--oxblood); }
.footer__colophon {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
}
.footer__colophon a { color: inherit; }

/* ---------- Hero greeting rotator ---------- */
.greeting {
  position: relative;
  height: 1.5em;
  font-family: var(--font-display), 'Noto Serif', serif;
  font-variation-settings: var(--wonk);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  color: var(--marigold-deep);
  overflow: hidden;
}
.greeting span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: greet 19.2s infinite;
}
.greeting span:nth-child(1) { animation-delay: 0s; }
.greeting span:nth-child(2) { animation-delay: 3.2s; }
.greeting span:nth-child(3) { animation-delay: 6.4s; }
.greeting span:nth-child(4) { animation-delay: 9.6s; }
.greeting span:nth-child(5) { animation-delay: 12.8s; }
.greeting span:nth-child(6) { animation-delay: 16s; }
@keyframes greet {
  0% { opacity: 0; transform: translateY(0.35em); }
  3.5% { opacity: 1; transform: translateY(0); }
  15% { opacity: 1; transform: translateY(0); }
  18% { opacity: 0; transform: translateY(-0.3em); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .greeting span { animation: none; }
  .greeting span:first-child { opacity: 1; }
}

/* ---------- Hero layout (index) ---------- */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 2px solid var(--ink);
}
.sticky-cta--hide { display: none !important; }
.sticky-cta .btn { width: 100%; text-align: center; }
@media (max-width: 720px) {
  .sticky-cta { display: block; }
  body.has-sticky { padding-bottom: 4.4rem; }
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.75rem; } .mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2.25rem; } .mb-4 { margin-bottom: 3rem; }
.relative { position: relative; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.section-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head .display-2 { margin-bottom: 0.9rem; }
.section-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

/* ---------- View transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

/* Mobile: drawing labels scale with the viewBox, so bump their unit sizes */
@media (max-width: 720px) {
  .d-lbl { font-size: 17px; }
  .d-note { font-size: 21px; }
  .d-dim { font-size: 15px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .selfdraw .sd { stroke-dashoffset: 0 !important; animation: none !important; }
}