@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

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

  :root {
    /* Dark Inkwell — default */
    --paper:        #0e0a14;       /* near-black, faint aubergine warmth (not #000) */
    --paper-2:      #15101a;
    --ink:          #f4ede0;       /* warm bone — the new "ink" */
    --ink-2:        #d4c9b8;
    --muted:        #8a8276;
    --accent:       #ff3d8a;
    --accent-2:     #ff7ab0;
    --photo-surface:#08060c;       /* photo plate always darkest */
    --noise-blend:  screen;
    --noise-opacity:.22;

    /* Type */
    --display: 'Archivo Black', 'Druk Wide', 'Helvetica Neue', Arial, sans-serif;
    --body:    'Archivo', 'Söhne', 'Helvetica Neue', Arial, sans-serif;

    /* Rhythm */
    --gutter: clamp(20px, 4vw, 56px);
    --section-pad: clamp(80px, 12vh, 160px);
    --nav-h: 56px;
  }

  /* Theme variants (surface + ink pair) */
  [data-theme="inkwell"] {
    --paper: #0e0a14; --paper-2: #15101a;
    --ink:   #f4ede0; --ink-2:   #d4c9b8;
    --muted: #8a8276;
    --photo-surface: #08060c;
    --noise-blend: screen; --noise-opacity: .22;
  }
  [data-theme="ivory"] {
    --paper: #f4ede0; --paper-2: #ebe2cf;
    --ink:   #3d1a3d; --ink-2:   #5a2e5a;
    --muted: #8a7888;
    --photo-surface: #3d1a3d;
    --noise-blend: multiply; --noise-opacity: .55;
  }
  [data-theme="bone-moss"] {
    --paper: #efe9df; --paper-2: #e2dccc;
    --ink:   #1a1a1a; --ink-2:   #3a3a36;
    --muted: #7a786f;
    --photo-surface: #1a1a1a;
    --noise-blend: multiply; --noise-opacity: .45;
  }

  /* Accent variants */
  [data-accent="pink"]   { --accent: #ff3d8a; --accent-2: #ff7ab0; }
  [data-accent="orange"] { --accent: #ff5a1f; --accent-2: #ff8a5a; }
  [data-accent="mint"]   { --accent: #1fbf8a; --accent-2: #5ad6a8; }

  /* Density */
  [data-density="tight"]     { --section-pad: clamp(48px, 7vh, 96px); }
  [data-density="editorial"] { --section-pad: clamp(120px, 18vh, 220px); }

  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  /* Sticky-nav anchor offset — sections don’t hide under the bar on smooth-scroll */
  #tour, #sf, #press, #book {
    scroll-margin-top: calc(var(--nav-h) + 16px);
  }
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: var(--noise-blend);
  }
  ::selection { background: var(--accent); color: var(--paper); }
  a { color: inherit; text-decoration: none; }

  /* ─────────────── Topnav ─────────────── */
  .topnav {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    height: var(--nav-h);
    display: flex; align-items: center;
  }
  .topnav-inner {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--gutter);
    gap: 16px;
  }
  .nav-mark {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--ink);
  }
  .nav-mark .slash { color: var(--accent); padding: 0 4px; }
  .nav-links { display: flex; gap: clamp(8px, 2vw, 24px); align-items: center; }
  .nav-links a {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 14px 4px;
    border-top: 2px solid transparent;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); border-top-color: var(--accent); }
  .nav-cta {
    color: var(--accent) !important;
    border-top: none !important;
  }
  .nav-cta:hover { color: var(--accent-2) !important; }
  @media (max-width: 820px) {
    .nav-links a:not(.nav-cta) { display: none; }
    .nav-mark { font-size: 12px; }
  }

  /* ─────────────── Hero ─────────────── */
  .hero {
    position: relative;
    z-index: 2;
    padding: clamp(40px, 6vh, 80px) 0 var(--section-pad);
    overflow: hidden;
  }
  .hero-inner {
    padding: 0 var(--gutter);
    display: grid;
    /* minmax(0, 1fr): lets the bleed-off title overflow visibly without dragging
       the rail/countdown track wider than the gutter-padded inner width. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 6vw, 72px);
  }

  /* Bleed-left title */
  .hero-title-wrap {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    position: relative;
  }
  .hero-title {
    font-family: var(--display);
    color: var(--ink);
    line-height: .82;
    letter-spacing: -.02em;
    text-transform: uppercase;
    /* Cap top of clamp so the title never out-bleeds the viewport at tablet widths */
    font-size: clamp(72px, 18vw, 200px);
    font-weight: 400;
    padding-left: calc(var(--gutter) - clamp(8px, 1.5vw, 18px));
  }
  .hero-title .line { display: block; position: relative; text-shadow: 3px 4px 0 var(--accent); white-space: nowrap; }
  .hero-title .line.therapy {
    color: var(--accent);
    padding-left: clamp(28px, 6vw, 90px);
    text-shadow: -3px -4px 0 var(--ink);
  }
  .hero-title .line.tour {
    padding-left: clamp(60px, 12vw, 200px);
  }

  /* Caption rail */
  .hero-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: end;
    max-width: 100%;
  }
  @media (max-width: 720px) {
    .hero-rail { grid-template-columns: 1fr; gap: 32px; }
  }
  .caption-rule {
    padding-top: 10px;
    border-top: 1.5px solid var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .caption-rule .accent { color: var(--accent); }
  .caption-rule .stack { display: block; margin-top: 8px; font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); line-height: 1.5; text-transform: none; }

  .countdown-headline {
    font-family: var(--display);
    font-size: clamp(40px, 7vw, 72px);
    line-height: .9;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 16px;
    border-top: 1.5px solid var(--ink);
    white-space: nowrap;
    overflow: hidden;
  }
  .countdown-headline .num { color: var(--accent); }
  .countdown-headline.done { color: var(--accent); }

  /* ─────────────── Photo ─────────────── */
  .photo {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter);
    margin-bottom: var(--section-pad);
  }
  .photo .photo-reg {
    margin: 0 0 0 0;
  }
  .photo-frame {
    aspect-ratio: 16 / 11;
    background: var(--photo-surface);
    position: relative;
    overflow: hidden;
    transform: rotate(-.4deg);
    display: grid;
    place-items: center;
    /* Riso registration: solid bone hairline offset below-right, no shadow primitive */
    outline: 1.5px solid var(--ink);
    outline-offset: 0;
  }
  /* Pink registration plate sitting under the photo — not a shadow, a sibling */
  .photo-reg {
    position: relative;
    display: block;
  }
  .photo-reg::after {
    content: "";
    position: absolute;
    inset: 8px -8px -10px 8px;
    background: var(--accent);
    z-index: -1;
    transform: rotate(-.4deg);
  }
  /* Halftone via radial-gradient */
  .photo-frame::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(var(--accent) 22%, transparent 24%),
      radial-gradient(var(--accent) 22%, transparent 24%);
    background-size: 10px 10px, 10px 10px;
    background-position: 0 0, 5px 5px;
    /* Vignette mask so dots cluster in upper-left like a real halftone exposure */
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%);
            mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%);
    opacity: .9;
  }
  .photo-placeholder {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--paper);
    padding: 24px;
  }
  .photo-placeholder .label {
    font-family: var(--body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: .8;
    margin-bottom: 14px;
  }
  .photo-placeholder .glyph {
    font-family: var(--display);
    font-size: clamp(48px, 9vw, 120px);
    line-height: .9;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: -.02em;
  }
  .photo-placeholder .hint {
    font-family: var(--body);
    font-style: italic;
    font-size: 13px;
    color: var(--paper);
    opacity: .55;
    margin-top: 14px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Photo treatments */
  [data-photo="monotone"] .photo-reg::after { display: none; }
  [data-photo="monotone"] .photo-frame::before {
    background-image:
      repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 4px);
    background-size: auto;
    background-position: 0 0;
    opacity: .22;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 100%);
  }
  [data-photo="monotone"] .photo-placeholder .glyph { color: var(--ink); opacity: .92; }

  [data-photo="type"] .photo-frame { background: var(--paper); transform: rotate(.2deg); outline-color: var(--ink); }
  [data-photo="type"] .photo-frame::before { display: none; }
  [data-photo="type"] .photo-reg::after { background: var(--accent); }
  [data-photo="type"] .photo-placeholder .label { color: var(--ink); opacity: .65; }
  [data-photo="type"] .photo-placeholder .glyph { color: var(--ink); font-size: clamp(64px, 14vw, 180px); }
  [data-photo="type"] .photo-placeholder .glyph .slash { color: var(--accent); }
  [data-photo="type"] .photo-placeholder .hint { color: var(--ink-2); opacity: .8; }

  .photo-caption {
    padding-top: 10px;
    margin-top: 18px;
    border-top: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .photo-caption .right { color: var(--accent); }

  /* ─────────────── Prose sections ─────────────── */
  .prose {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter) var(--section-pad);
  }
  .prose-grid {
    display: grid;
    grid-template-columns: minmax(160px, 22%) 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
  }
  @media (max-width: 860px) {
    .prose-grid { grid-template-columns: 1fr; gap: 12px; }
    .prose-grid .section-numeral { font-size: clamp(64px, 18vw, 120px); }
  }
  .section-numeral {
    font-family: var(--display);
    font-size: clamp(80px, 14vw, 200px);
    line-height: .85;
    color: var(--ink);
    letter-spacing: -.04em;
    position: relative;
    user-select: none;
    text-shadow: 2px 3px 0 var(--accent);
  }
  .prose-body { max-width: 640px; }
  .prose-eyebrow {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
    padding-top: clamp(16px, 4vw, 32px);
    border-top: 1.5px solid var(--ink);
  }
  .prose-title {
    font-family: var(--display);
    font-size: clamp(36px, 5.6vw, 64px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .prose-body p {
    font-family: var(--body);
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .prose-body p strong { color: var(--accent); font-weight: 700; }

  .caption-rails {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 36px;
  }
  @media (max-width: 520px) {
    .caption-rails { grid-template-columns: 1fr; gap: 22px; }
  }
  .crail {
    padding-top: 10px;
    border-top: 1.5px solid var(--ink);
  }
  .crail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .crail-value {
    font-family: var(--body);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
  }
  .crail-note {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 400;
  }

  /* ─────────────── Press — scroll-snap spreads ─────────────── */
  .press {
    position: relative;
    z-index: 2;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper);
  }
  .press-head {
    padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(20px, 4vh, 40px);
    display: grid;
    grid-template-columns: minmax(160px, 22%) 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
  }
  @media (max-width: 860px) {
    .press-head { grid-template-columns: 1fr; gap: 12px; }
    .press-head .section-numeral { font-size: clamp(64px, 18vw, 120px); }
  }
  .press-snap {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    overscroll-behavior: contain;
    height: 100vh;       /* fallback for browsers w/o dvh */
    height: 100dvh;
    border-top: 1.5px solid var(--ink);
    -webkit-overflow-scrolling: touch;
  }
  .press-snap::-webkit-scrollbar { width: 0; }
  .snap-page {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;       /* fallback */
    height: 100dvh;
    padding: clamp(32px, 6vh, 80px) var(--gutter) clamp(40px, 7vh, 80px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(16px, 3vh, 24px);
    border-bottom: 1px solid var(--ink);
    position: relative;
  }
  .snap-page:last-child { border-bottom: 0; }
  .snap-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--ink);
  }
  .snap-meta .right { color: var(--accent); }
  .snap-quote {
    align-self: center;
    font-family: var(--display);
    font-size: clamp(40px, 8vw, 96px);
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--ink);
    max-width: 1100px;
    transition: opacity .5s ease, transform .5s ease;
    opacity: .25;
    transform: translateY(20px);
  }
  .snap-page.in-view .snap-quote { opacity: 1; transform: translateY(0); }
  .snap-quote .accent { color: var(--accent); }
  .snap-attr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding-top: 10px;
    border-top: 1.5px solid var(--ink);
    font-family: var(--body);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    font-size: 12px;
  }
  .snap-attr .role { color: var(--accent); }
  .snap-hint {
    position: absolute;
    right: var(--gutter);
    bottom: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-2);
    opacity: .6;
  }
  .snap-page:last-child .snap-hint { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .snap-quote { transition: none; opacity: 1; transform: none; }
    .press-snap { scroll-snap-type: none; }
  }

  /* ─────────────── Book ─────────────── */
  .book {
    position: relative;
    z-index: 2;
    padding: var(--section-pad) var(--gutter);
  }
  .book-grid {
    display: grid;
    grid-template-columns: minmax(160px, 22%) 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
  }
  @media (max-width: 860px) {
    .book-grid { grid-template-columns: 1fr; gap: 12px; }
    .book-grid .section-numeral { font-size: clamp(64px, 18vw, 120px); }
  }
  .book-form { max-width: 720px; }
  .book-intro {
    font-family: var(--body);
    font-size: clamp(17px, 1.5vw, 20px);
    color: var(--ink);
    margin-bottom: 40px;
    max-width: 560px;
    line-height: 1.5;
  }
  .book-intro strong { color: var(--accent); font-weight: 700; }
  .field {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1.5px solid var(--ink);
  }
  .field:last-of-type { border-bottom: 1.5px solid var(--ink); }
  @media (max-width: 560px) {
    .field { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  }
  .field label {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .field label .req { color: var(--accent); margin-left: 4px; }
  .field input, .field select, .field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--ink);
    border-radius: 0;
    padding: 8px 0;
    font-family: var(--body);
    font-size: 18px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s;
  }
  .field input::placeholder, .field textarea::placeholder {
    color: var(--muted);
    font-style: italic;
  }
  .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent); }
  .field textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
  .field select {
    appearance: none; -webkit-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 14px) 16px, calc(100% - 8px) 16px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 32px;
  }

  .book-foot {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
  }
  @media (max-width: 560px) { .book-foot { grid-template-columns: 1fr; } }
  .book-foot .fineprint {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 380px;
  }
  .book-foot .fineprint strong { color: var(--ink); font-weight: 700; }

  .submit {
    background: transparent;
    border: 0;
    color: var(--accent);
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    text-transform: lowercase;
    cursor: pointer;
    letter-spacing: -.01em;
    padding: 8px 0;
    border-bottom: 2.5px solid var(--accent);
    transition: padding-right .2s, color .15s;
  }
  .submit .arrow { display: inline-block; transition: transform .2s; }
  .submit:hover { padding-right: 12px; color: var(--accent-2); border-bottom-color: var(--accent-2); }
  .submit:hover .arrow { transform: translateX(6px); }

  /* ─────────────── Colophon ─────────────── */
  .colophon {
    position: relative;
    z-index: 2;
    border-top: 1.5px solid var(--ink);
    padding: clamp(40px, 6vh, 80px) var(--gutter) clamp(24px, 4vh, 40px);
  }
  .colo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-bottom: 36px;
  }
  @media (max-width: 920px) {
    .colo-grid { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
  }
  @media (max-width: 480px) {
    .colo-grid { grid-template-columns: 1fr; gap: 22px; }
  }
  .colo-cell h4 {
    font-family: var(--body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--ink);
  }
  .colo-cell p, .colo-cell a {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
  }
  .colo-cell a { border-bottom: 1px solid transparent; transition: border-color .12s, color .12s; }
  .colo-cell a:hover { color: var(--accent); border-bottom-color: var(--accent); }

  .colo-foot {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding-top: 18px;
    border-top: 1.5px solid var(--ink);
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .colo-foot .right { color: var(--accent); }
  @media (max-width: 520px) {
    .colo-foot { grid-template-columns: 1fr; }
    .colo-foot .right { text-align: left; }
  }

  /* ─────────────── Mobile CTA ─────────────── */
  .mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--ink);
    color: var(--accent);
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-decoration: none;
    transform: translateY(110%);
    transition: transform .25s ease;
    border-top: 2px solid var(--accent);
    min-height: 56px;
  }
  .mobile-cta.visible { transform: translateY(0); }
  .mobile-cta .label { color: var(--paper); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: .2em; }
  .mobile-cta .verb { font-family: var(--display); font-size: 22px; font-weight: 400; text-transform: lowercase; letter-spacing: -.01em; }
  @media (min-width: 821px) { .mobile-cta { display: none; } }

  /* ─────────────── Tweaks panel ─────────────── */

  /* ─────────────── Cover (Title Page) ─────────────── */
  .cover {
    position: relative;
    z-index: 2;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding: clamp(24px, 6vh, 64px) 0 clamp(24px, 4vh, 48px);
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: clamp(24px, 5vh, 56px);
  }
  .cover-inner { padding: 0 var(--gutter); align-self: center; }

  /* Override .hero-title sizing for the cover — each line is fit-to-width by JS,
     each line independently. Keep the existing .line text-shadow + bleed-left rules. */
  .cover .hero-title { font-size: 1px; line-height: .82; }

  .cover-meta {
    padding: 0 var(--gutter);
    border-top: 1.5px solid var(--ink);
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .cover-meta .sep { color: var(--ink-2); opacity: .35; }
  .cover-meta .accent { color: var(--accent); }

  .cover-scroll {
    padding: 0 var(--gutter);
    font-family: var(--body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    width: max-content;
  }
  .cover-scroll .arrow {
    display: inline-block;
    animation: cover-arrow 2.4s ease-in-out infinite;
  }
  @keyframes cover-arrow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cover-scroll .arrow { animation: none; }
  }

  /* ─────────────── Section scroll-margin ─────────────── */
  section[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }

  /* ─────────────── Hero overline (brand mark) ─────────────── */
  .hero-overline {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: clamp(28px, 6vh, 56px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
  }
  .hero-overline .brand { color: var(--ink); }
  .hero-overline .accent { color: var(--accent); }
  .hero-overline .dim   { opacity: .35; }

  /* ─────────────── Tour Strip ─────────────── */
  .tour-strip {
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter) var(--section-pad);
  }
  .strip-head {
    padding: clamp(16px, 4vw, 32px) 0 24px;
    border-top: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
  }
  @media (max-width: 560px) {
    .strip-head { grid-template-columns: 1fr; gap: 6px; }
  }
  .strip-eyebrow {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .strip-title {
    font-family: var(--display);
    font-size: clamp(28px, 4.4vw, 48px);
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
  }
  .strip-meta-tail {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .strip-meta-tail .accent { color: var(--accent); }

  .strip-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
  }
  @media (max-width: 560px) { .strip-list { grid-template-columns: 1fr; } }

  .strip-card { list-style: none; }
  .strip-card a {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    padding: 22px 22px 24px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    position: relative;
    transition: background .12s, border-color .12s;
  }
  .strip-card a:hover { border-color: var(--accent); background: rgba(244,237,224,.04); }
  .strip-card .strip-status {
    position: absolute;
    top: 12px; right: 16px;
    font-family: var(--body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 3px 8px;
    border: 1px solid var(--rule);
  }
  .strip-card .strip-num {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--accent);
  }
  .strip-card .strip-city {
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.015em;
    color: var(--ink);
  }
  .strip-card .strip-dates {
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
  }
  .strip-card .strip-conf {
    font-family: var(--body);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }

  /* Strip states */
  .strip-card.is-next a {
    border-left: 4px solid var(--accent);
    background: rgba(255, 61, 138, .06);
  }
  .strip-card.is-next .strip-status {
    color: var(--accent);
    border-color: var(--accent);
  }
  .strip-card.is-in-progress a {
    border-color: var(--accent);
    background: rgba(255, 61, 138, .08);
  }
  .strip-card.is-in-progress .strip-status {
    color: var(--accent);
    border-color: var(--accent);
  }
  .strip-card.is-past a { opacity: .42; }
  .strip-card.is-past .strip-city,
  .strip-card.is-past .strip-dates { text-decoration: line-through; }
  .strip-card.is-past .strip-status { color: var(--muted); }

  /* ─────────────── Which-stop radio ─────────────── */
  .stops-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
  }
  .stops-radio label {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px;
    border: 1.5px solid var(--ink);
    cursor: pointer;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--ink-2);
    transition: color .12s, background .12s, border-color .12s;
    position: relative;
  }
  .stops-radio label input { position: absolute; opacity: 0; pointer-events: none; }
  .stops-radio label:hover { color: var(--ink); }
  .stops-radio label .pill-num {
    font-family: var(--display);
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0;
  }
  .stops-radio label.is-checked {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
  }
  .stops-radio label.is-checked .pill-num { color: var(--paper); opacity: .8; }
  .stops-radio label.is-past {
    opacity: .35;
    text-decoration: line-through;
    cursor: not-allowed;
  }