/* ============================================================
   Dance Venture — design system
   Palette drawn from the archive: ballroom plum-black, stage
   brass, and the crimson of a Latin dress.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --ink:        #150A11;
  --ink-2:      #22101B;
  --ink-3:      #33192A;
  --ink-line:   #452237;

  --rose:       #D6395B;
  --rose-lift:  #E8637F;
  --rose-deep:  #A21F3E;

  --brass:      #D8A44B;
  --brass-soft: #EBC98A;

  --paper:      #FAF6F6;
  --paper-2:    #F1E9E9;
  --paper-3:    #E6DADC;

  --slate:      #4B3A42;
  --slate-2:    #7C6771;
  --slate-3:    #A2909A;

  /* ---- type ---- */
  /* Bodoni Moda is a Didone: hairline serifs, vertical stress, high stroke
     contrast — the letterform of a couture label and of a printed ballroom
     programme. It carries an optical-size axis, and that axis is the whole
     reason it's here: display sizes take a high opsz so the hairlines thin
     right out, small headings take a low one so they stay solid on the dark
     stage surfaces. Display rules therefore set --dopsz rather than leaving
     it flat.
     Jost is the geometric sans underneath — the Futura line, which is the
     classic foil for a Didone, and quiet enough to carry both long body copy
     and the tracked-out uppercase labels. A mono is kept only for code, where
     one is actually meant. */
  --display: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --dopsz: 28;
  --body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --meta:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-2xl:  clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);
  --fs-3xl:  clamp(2.15rem, 1.5rem + 2.9vw, 3.35rem);
  /* A Didone sets narrower than the wide sans this step was trimmed for, so
     the hero can take the full measure back and still sit inside the fold. */
  --fs-4xl:  clamp(2.6rem, 1.45rem + 4.8vw, 4.5rem);

  /* ---- space ---- */
  --s1: 0.5rem;  --s2: 0.75rem; --s3: 1rem;    --s4: 1.5rem;
  --s5: 2rem;    --s6: 3rem;    --s7: 4.5rem;  --s8: 6.5rem;
  --s9: 9rem;

  /* ---- radius ---- */
  --r-s: 4px; --r-m: 10px; --r-l: 18px; --r-xl: 28px; --r-full: 999px;

  /* ---- elevation (tinted, layered) ---- */
  --sh-1: 0 1px 2px rgba(33,10,22,.05), 0 4px 12px -5px rgba(33,10,22,.10);
  --sh-2: 0 2px 6px rgba(33,10,22,.06), 0 16px 34px -14px rgba(120,20,50,.20);
  --sh-3: 0 6px 16px rgba(33,10,22,.08), 0 34px 66px -22px rgba(120,20,50,.28);
  --sh-dark: 0 22px 64px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(216,164,75,.13);

  /* ---- motion ---- */
  --ease-spring: cubic-bezier(.22,1.02,.36,1);
  --ease-out:    cubic-bezier(.16,.84,.44,1);

  --wrap: 1240px;
  --wrap-prose: 44rem;
  --nav-h: 78px;
}

/* ============================================================
   Reset / base
   ============================================================ */

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

/* An author `display` beats the UA rule for [hidden], and several components
   here set one. Make the attribute win everywhere. */
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' var(--dopsz);
  /* A Didone descends further than the sans this was set for — 1.08 let the
     y of "gravity" sit into the line beneath it. */
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--rose);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

::selection { background: var(--rose); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--s3); z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s4); border-radius: var(--r-m);
  text-decoration: none;
}
.skip-link:focus { top: var(--s3); }

/* ============================================================
   Layout primitives
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.wrap-prose { max-width: var(--wrap-prose); }

.section { position: relative; padding-block: var(--s8); }
.section-sm { padding-block: var(--s7); }
.section-lg { padding-block: var(--s9); }
.section-flush-top { padding-top: 0; }

/* Dark "stage" surfaces */
.stage {
  background: var(--ink);
  color: rgba(250,246,246,.80);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:is(.stage, .hero, .art-hero, .foot, .feat, .svc) :is(h1, h2, h3, h4) { color: var(--paper); }

/* Radial stage-lighting wash, layered */
.stage::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(58% 42% at 18% 8%,  rgba(214,57,91,.24), transparent 68%),
    radial-gradient(46% 40% at 86% 24%, rgba(216,164,75,.16), transparent 70%),
    radial-gradient(70% 60% at 50% 108%, rgba(162,31,62,.22), transparent 72%);
}

/* Film grain */
.stage::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.tint { background: var(--paper-2); }

/* ============================================================
   Type helpers
   ============================================================ */

.eyebrow {
  font-family: var(--meta);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
}
:is(.stage, .hero, .art-hero, .foot) .eyebrow { color: var(--brass); }

.h-hero  { font-size: var(--fs-4xl); --dopsz: 96; letter-spacing: -0.02em; }
.h-1     { font-size: var(--fs-3xl); --dopsz: 80; }
.h-2     { font-size: var(--fs-2xl); --dopsz: 48; }
/* Small headings sit on dark surfaces as often as light ones, so they take a
   low optical size and a heavier weight to keep the hairlines from vanishing. */
.h-3     { font-size: var(--fs-xl); --dopsz: 16; font-weight: 700; letter-spacing: 0; }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--slate-2);
  max-width: 40ch;
}
:is(.stage, .hero, .art-hero, .foot) .lede { color: rgba(250,246,246,.72); }

.accent-italic {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 96;
  letter-spacing: 0;
  color: var(--rose);
}
:is(.stage, .hero, .art-hero, .foot) .accent-italic { color: var(--rose-lift); }

.meta {
  font-family: var(--meta);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--slate-2);
}
:is(.stage, .hero, .art-hero, .foot, .feat) .meta { color: rgba(235,201,138,.72); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  --btn-bg: var(--rose);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(120,20,50,.18), 0 12px 26px -12px rgba(214,57,91,.55);
  transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out),
              background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(120,20,50,.20), 0 20px 38px -14px rgba(214,57,91,.62);
}
.btn:active { transform: translateY(0) scale(.985); }

.btn .arw { transition: transform .32s var(--ease-spring); }
.btn:hover .arw { transform: translateX(4px); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: rgba(51,25,42,.22);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(51,25,42,.05);
  border-color: rgba(51,25,42,.4);
  box-shadow: none;
}
:is(.stage, .hero, .art-hero, .foot) .btn-ghost {
  --btn-fg: var(--paper);
  border-color: rgba(235,201,138,.34);
}
:is(.stage, .hero, .art-hero, .foot) .btn-ghost:hover {
  background: rgba(235,201,138,.10);
  border-color: rgba(235,201,138,.6);
}

.btn-sm { padding: 0.6rem 1.1rem; font-size: var(--fs-xs); }

/* Text link with a drawn underline */
.link-u {
  color: var(--rose-deep);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s var(--ease-spring), color .2s var(--ease-out);
}
.link-u:hover { background-size: 0% 1px; color: var(--rose); }
:is(.stage, .hero, .art-hero, .foot) .link-u { color: var(--brass-soft); }

/* ============================================================
   Nav
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
              height .4s var(--ease-out);
}
.nav::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(21,10,17,0);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.nav.is-stuck::before {
  background: rgba(21,10,17,.93);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(235,201,138,.16);
}
.nav.is-stuck { height: 66px; }

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--paper);
  flex: none;
}
.brand-mark {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: contain;
  /* the flag disc carries its own colour; lift it off the dark nav */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition: transform .45s var(--ease-spring);
}
.brand:hover .brand-mark { transform: scale(1.06) rotate(-3deg); }
.brand:active .brand-mark { transform: scale(.98); }
.foot .brand-mark { width: 42px; height: 42px; }
.brand-txt {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 14;
  font-size: 1.14rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-txt small {
  display: block;
  font-family: var(--meta);
  font-size: .58rem;
  letter-spacing: .13em;
  color: var(--brass);
  margin-top: 4px;
  font-weight: 400;
}


.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.5rem);
  list-style: none;
  margin: 0; padding: 0;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: .5rem .1rem;
  color: rgba(250,246,246,.82);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .22s var(--ease-out);
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 1.5px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .38s var(--ease-spring);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* dropdown */
.has-drop { position: relative; }
.drop-btn {
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.drop-btn svg { transition: transform .3s var(--ease-spring); }
.has-drop:hover .drop-btn svg,
.has-drop:focus-within .drop-btn svg { transform: rotate(180deg); }

.drop { list-style: none; margin: 0; padding: 0; }

/* The floating panel is desktop-only; on mobile the same list simply
   expands inside the drawer, so none of this must leak down. */
@media (min-width: 941px) {
  .drop {
    position: absolute;
    top: calc(100% + .5rem); left: 50%;
    transform: translate(-50%, 8px);
    min-width: 15rem;
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--r-l);
    box-shadow: var(--sh-dark);
    padding: var(--s2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s var(--ease-out), transform .32s var(--ease-spring), visibility .26s;
  }
  .has-drop:hover .drop,
  .has-drop:focus-within .drop {
    opacity: 1; visibility: visible;
    transform: translate(-50%, 0);
  }
}

.drop a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--r-m);
  color: rgba(250,246,246,.8);
  text-decoration: none;
  font-size: .85rem;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .28s var(--ease-spring);
}
.drop a:hover { background: rgba(214,57,91,.18); color: #fff; transform: translateX(3px); }

.nav-cta { flex: none; }

/* mobile */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(235,201,138,.28);
  border-radius: var(--r-m);
  background: rgba(250,246,246,.05);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--paper);
  margin: 0;
  transition: transform .34s var(--ease-spring), opacity .2s var(--ease-out);
}
/* bar height 1.5px + 5px gap puts the outer bars 6.5px from the middle */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--ink-line);
    padding: var(--s3) clamp(1.25rem, 4vw, 3rem) var(--s5);
    box-shadow: var(--sh-dark);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    transition: opacity .3s var(--ease-out), transform .38s var(--ease-spring), visibility .3s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-link { padding: .85rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(235,201,138,.10); width: 100%; }
  .nav-link::after { display: none; }
  .has-drop { width: 100%; }
  .drop { display: none; padding: 0 0 var(--s3) var(--s3); }
  .has-drop.is-open .drop { display: block; }
  .drop a { font-size: .98rem; padding: .6rem .4rem; }
  .drop-btn { width: 100%; justify-content: space-between; }
  .has-drop.is-open .drop-btn svg { transform: rotate(180deg); }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--s6));
  padding-bottom: var(--s7);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute; inset: 0; z-index: -3;
  overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 42%);
  filter: saturate(.72) contrast(1.06);
  animation: kenburns 26s var(--ease-out) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}

/* colour treatment + legibility gradient */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,10,17,.62) 0%, rgba(21,10,17,.26) 32%, rgba(21,10,17,.88) 82%, var(--ink) 100%);
}
.hero-tone {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(140deg, #5B1330 0%, #2B0F1F 55%, #1B0A14 100%);
  mix-blend-mode: multiply;
  opacity: .50;
}

.hero-inner { position: relative; width: 100%; }

.hero h1 { max-width: 17ch; }

.hero-sub {
  margin-top: var(--s4);
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: rgba(250,246,246,.80);
  line-height: 1.66;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid rgba(235,201,138,.20);
}
.hero-fact strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 2.45rem);
  font-weight: 700;
  font-variation-settings: 'opsz' 20;
  color: var(--brass-soft);
  letter-spacing: 0;
  line-height: 1;
}
.hero-fact-tight strong {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  letter-spacing: .04em;
  padding-top: .3em;
}
.hero-fact span {
  display: block;
  font-family: var(--meta);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250,246,246,.52);
  margin-top: .55rem;
}

/* word-by-word rise
   The mask is a clip-path rather than overflow:hidden. overflow:hidden moves an
   inline-block's baseline to its bottom margin edge, which forced a
   vertical-align:bottom here — and bottom-aligning boxes only keeps the text on
   one baseline while every word has identical metrics. The roman and italic cuts
   of the display face do not, so the italic run dropped a few pixels below the
   words beside it. clip-path masks without touching baseline alignment, so the
   words stay on the baseline they were laid out on. */
.rise > span {
  display: inline-block;
  vertical-align: baseline;
  clip-path: inset(-0.35em -0.12em 0 -0.06em);
  padding-bottom: .06em;
}
.rise > span > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  animation: riseUp .95s var(--ease-spring) forwards;
  animation-delay: calc(var(--i, 0) * 62ms + 180ms);
}
@keyframes riseUp { to { transform: translateY(0); } }

/* ============================================================
   Photo focal points
   Nearly every photograph on this site is a tall competition shot
   dropped into a landscape frame, so `cover` throws away half the
   source height — and a centred crop takes it off the top, where the
   faces are. Each photo declares the height of its subject's head as a
   percentage of the source, keyed on the file so the value follows the
   image into every frame, card and rail it appears in, including the
   ones the blog renders at runtime. Anything not listed falls back to
   the 32% default set on the components above.
   ============================================================ */

img[src$="kiwi-classic.jpg"]          { --focus: 50% 20%; }
img[src$="ballroom-1995.jpg"]         { --focus: 50% 22%; }
img[src$="nk-assen.jpg"]              { --focus: 50% 25%; }
img[src$="munchen.jpg"]               { --focus: 50% 26%; }
img[src$="exhibition-silhouette.jpg"] { --focus: 50% 28%; }
img[src$="latin-blackpool-97.jpg"]    { --focus: 50% 33%; }
img[src$="hero-blackpool.jpg"]        { --focus: 50% 36%; }
img[src$="blackpool-rp.jpg"]          { --focus: 50% 36%; }
img[src$="fitness-gym.jpg"]           { --focus: 50% 42%; }
img[src$="portrait-pr.jpg"]            { --focus: 50% 38%; }
img[src$="kiwi-hills.jpg"]             { --focus: 50% 42%; }
img[src$="muscle-memory-diagram.jpg"] { --focus: 50% 30%; }
img[src$="latin-red-1991.jpg"]        { --focus: 50% 24%; }
img[src$="slagharen-seque.jpg"]       { --focus: 50% 38%; }

/* Artwork and floor shots have no face to protect, so they stay centred. */
img[src$="light-trails.jpg"],
img[src$="archive-0009.jpg"],
img[src$="archive-0013.jpg"],
img[src$="queenstown.jpg"],
img[src$="garden.jpg"]                { --focus: 50% 50%; }

/* The ribbon reads as light spill behind the headline, not as artwork */
.hero .ribbon { opacity: .42; }

/* ============================================================
   Signature: the light ribbon
   A dancer's trailing line, drawn as you scroll.
   ============================================================ */

.ribbon {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Held back so the line passes behind body copy without competing with it,
     and softened by a hair so it reads as spill rather than as a drawn edge. */
  opacity: .58;
  filter: blur(.6px);
}
.ribbon svg { width: 100%; height: 100%; }
.ribbon path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: var(--len, 2400);
  transition: stroke-dashoffset 2.6s var(--ease-out);
}
.ribbon.is-drawn path { stroke-dashoffset: 0; }
.ribbon path:nth-child(2) { transition-duration: 3.1s; transition-delay: .16s; }
.ribbon path:nth-child(3) { transition-duration: 3.5s; transition-delay: .32s; }

.ribbon-float { animation: ribbonFloat 18s ease-in-out infinite alternate; }
@keyframes ribbonFloat {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(-1.4%, 1.8%, 0) rotate(-1.1deg); }
}

/* The artboard is 1440x520 and the SVG is stretched to fill its box, so how
   much the sweep distorts is just the box's aspect against the artboard's.
   A full-height section on a phone is around nine times taller than wide
   relative to the artboard, which is what turns the curve into vertical
   hairpins. Capping the height against the viewport width instead holds that
   ratio at roughly the desktop figure all the way down, so the line keeps the
   shape it was drawn with — it simply crosses the section once and leaves. */
@media (max-width: 1020px) {
  .ribbon {
    inset: 0 0 auto;
    height: min(100%, 48vw);
    opacity: .34;
    filter: blur(.9px);
  }
  .ribbon-float { animation-name: ribbonFloatSm; }
}
@keyframes ribbonFloatSm {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-2.2%, 3%, 0); }
}

/* ============================================================
   Marquee band
   ============================================================ */

.marquee {
  --dur: 46s;
  position: relative;
  overflow: hidden;
  padding-block: var(--s4);
  background: var(--ink-2);
  border-block: 1px solid var(--ink-line);
  user-select: none;
}
.marquee + .marquee { border-top: 0; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide var(--dur) linear infinite;
}
.marquee-rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s5);
  padding-inline: var(--s5);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(250,246,246,.62);
  white-space: nowrap;
}
.marquee-item i {
  font-style: italic;
  color: var(--rose-lift);
}
.marquee-item::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  opacity: .65;
  flex: none;
}
.marquee-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ink-2), transparent 12%, transparent 88%, var(--ink-2));
}

/* ============================================================
   Reveal on scroll
   ============================================================ */

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-spring);
  transition-delay: var(--d, 0ms);
}
.rv.in { opacity: 1; transform: none; }

.rv-l { transform: translateX(-32px); }
.rv-r { transform: translateX(32px); }
.rv-s { transform: scale(.955); }

/* Single-column layouts have nowhere to come in from sideways, and the
   pre-reveal offset would push the page wider than the viewport. */
@media (max-width: 900px) {
  .rv-l, .rv-r { transform: translateY(26px); }
}

/* ============================================================
   Cards / grids
   ============================================================ */

.grid { display: grid; gap: var(--s4); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .g-4 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split-wide { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: 1fr; } }

/* framed photo with colour treatment */
.frame {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--sh-2);
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 32%);
  transition: transform 1s var(--ease-spring);
}
.frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,10,17,.60), rgba(21,10,17,0) 55%);
  pointer-events: none;
}
.frame-tone::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, #7E1D3C, #2B0F1F);
  mix-blend-mode: multiply;
  opacity: .30;
  pointer-events: none;
}
.frame-tall { aspect-ratio: 3 / 4; }
.frame-wide { aspect-ratio: 16 / 10; }
.frame-sq   { aspect-ratio: 1 / 1; }

.frame-cap {
  position: absolute;
  left: var(--s4); bottom: var(--s4);
  z-index: 2;
  font-family: var(--meta);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: rgba(250,246,246,.86);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* Service card */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--ink-2);
  text-decoration: none;
  color: var(--paper);
  min-height: 27rem;
  isolation: isolate;
  box-shadow: var(--sh-2);
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out);
}
.svc:hover { transform: translateY(-7px); box-shadow: var(--sh-3); }
.svc img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 32%);
  transition: transform 1.1s var(--ease-spring);
}
.svc:hover img { transform: scale(1.07); }
.svc::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(15,6,12,.94) 4%, rgba(15,6,12,.55) 42%, rgba(15,6,12,.18) 100%);
}
.svc-body {
  margin-top: auto;
  padding: var(--s5) var(--s4) var(--s4);
}
.svc-n {
  font-family: var(--meta);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--brass);
  text-transform: uppercase;
}
.svc h3 { margin: var(--s2) 0 var(--s2); font-size: 1.55rem; }
.svc p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: rgba(250,246,246,.74);
  margin: 0;
}
.svc-go {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rose-lift);
}
.svc-go .arw { transition: transform .34s var(--ease-spring); }
.svc:hover .svc-go .arw { transform: translateX(5px); }

/* Plain surface card */
.card {
  background: #fff;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-l);
  padding: var(--s5);
  box-shadow: var(--sh-1);
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

/* Offset photo pair — gives the column an off-beat rhythm */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  align-items: start;
}
.duo > :nth-child(2) { margin-top: clamp(1.5rem, 5vw, 4rem); }
@media (max-width: 520px) {
  .duo { grid-template-columns: 1fr; }
  .duo > :nth-child(2) { margin-top: 0; }
}

/* ============================================================
   Timeline
   ============================================================ */

.timeline { position: relative; padding-left: var(--s6); }
.timeline::before {
  content: '';
  position: absolute; left: 9px; top: .6rem; bottom: .6rem;
  width: 1.5px;
  background: linear-gradient(var(--rose), var(--brass), transparent);
}
.tl-item { position: relative; padding-bottom: var(--s5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute; left: calc(-1 * var(--s6) + 4px); top: .5rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rose);
  box-shadow: 0 0 0 4px rgba(214,57,91,.14);
}
:is(.stage, .hero, .art-hero, .foot) .tl-item::before { background: var(--ink); }
.tl-year {
  font-family: var(--meta);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  color: var(--rose-deep);
  display: block;
  margin-bottom: .3rem;
}
:is(.stage, .hero, .art-hero, .foot) .tl-year { color: var(--brass); }
.tl-item h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.tl-item p { font-size: var(--fs-sm); line-height: 1.7; }

/* ============================================================
   Blog
   ============================================================ */

/* Writers — the blog is organised by who wrote it as much as by topic */
.writers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s3);
}
.writer {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-align: left;
  padding: var(--s3);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-l);
  background: #fff;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform .42s var(--ease-spring), box-shadow .42s var(--ease-out),
              border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.writer:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgba(214,57,91,.35); }
.writer[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
}
.writer[aria-pressed="true"] b { color: var(--paper); }
.writer[aria-pressed="true"] .writer-txt > span { color: rgba(250,246,246,.62); }
.writer[aria-pressed="true"] .writer-n { color: var(--brass); }

.writer-txt { min-width: 0; display: grid; gap: 1px; }
.writer-txt b { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.writer-txt > span { font-size: .78rem; color: var(--slate-2); line-height: 1.4; }
.writer-n {
  font-family: var(--meta);
  font-size: .68rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose-deep) !important;
  margin-top: .25rem;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--paper-3);
}

.search { position: relative; display: block; flex: 0 1 17rem; color: var(--slate-3); }
.search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
/* scoped so it outranks the .input padding shorthand defined further down */
.search .search-input { padding-left: 2.7rem; border-radius: var(--r-full); }

.result-count { display: block; margin: var(--s4) 0 var(--s5); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.filter-bar .filters { flex: 1 1 26rem; }
.chip {
  padding: .5rem 1.05rem;
  border-radius: var(--r-full);
  border: 1px solid var(--paper-3);
  background: #fff;
  color: var(--slate-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s var(--ease-spring), background-color .22s var(--ease-out),
              color .22s var(--ease-out), border-color .22s var(--ease-out);
}
.chip:hover { transform: translateY(-2px); border-color: var(--rose); color: var(--rose-deep); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Featured post */
.feat {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--sh-3);
  text-decoration: none;
  color: var(--paper);
  isolation: isolate;
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out);
}
.feat:hover { transform: translateY(-5px); }
.feat-media { position: relative; overflow: hidden; min-height: 25rem; }
.feat-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 32%);
  transition: transform 1.1s var(--ease-spring);
}
.feat:hover .feat-media img { transform: scale(1.05); }
.feat-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(126,29,60,.35), rgba(43,15,31,.15));
  mix-blend-mode: multiply;
}
.feat-body {
  padding: clamp(1.75rem, 3.4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feat-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); margin-block: var(--s3); }
.feat-body p { color: rgba(250,246,246,.72); font-size: var(--fs-sm); line-height: 1.72; }
@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; }
  .feat-media { min-height: 16rem; }
}

/* Post card */
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-1);
  transition: transform .48s var(--ease-spring), box-shadow .48s var(--ease-out),
              border-color .3s var(--ease-out);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
  border-color: rgba(214,57,91,.34);
}
.pc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.pc-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 32%); transition: transform 1s var(--ease-spring); }
.post-card:hover .pc-media img { transform: scale(1.06); }
.pc-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,10,17,.42), transparent 58%);
}
.pc-cat {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 2;
  padding: .3rem .7rem;
  border-radius: var(--r-full);
  background: rgba(21,10,17,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--brass-soft);
  font-family: var(--meta);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pc-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.pc-body h3 {
  font-size: 1.3rem;
  line-height: 1.2;
  transition: color .24s var(--ease-out);
}
.post-card:hover .pc-body h3 { color: var(--rose-deep); }
.pc-ex {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  line-height: 1.68;
  color: var(--slate-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-foot {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--paper-2);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--paper-3), 0 0 0 3px #fff;
}
.avatar-lg { width: 54px; height: 54px; }
.avatar-mono {
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  color: var(--brass-soft);
  background: linear-gradient(150deg, var(--rose-deep), var(--ink-2));
  font-size: .82rem;
  letter-spacing: .02em;
}
.avatar-lg.avatar-mono { font-size: 1.2rem; }

.pc-who { min-width: 0; }
.pc-who b { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pc-who span { font-family: var(--meta); font-size: .68rem; color: var(--slate-3); letter-spacing: .04em; }

.empty {
  grid-column: 1 / -1;
  padding: var(--s8) var(--s4);
  text-align: center;
  border: 1.5px dashed var(--paper-3);
  border-radius: var(--r-l);
  color: var(--slate-2);
}

/* ============================================================
   Article
   ============================================================ */

.readbar {
  position: fixed; top: 0; left: 0; z-index: 110;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--rose), var(--brass));
}

.art-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--s7));
  padding-bottom: var(--s7);
  background: var(--ink);
  color: rgba(250,246,246,.8);
  overflow: hidden;
  isolation: isolate;
}
.art-hero-media { position: absolute; inset: 0; z-index: -2; }
.art-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 32%); opacity: .40; filter: saturate(.7); }
.art-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,10,17,.86), rgba(21,10,17,.72) 40%, var(--ink));
}
.art-hero h1 { font-size: var(--fs-3xl); max-width: 20ch; }

.byline {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid rgba(235,201,138,.20);
}
.byline b { display: block; font-family: var(--body); color: var(--paper); font-size: .95rem; font-weight: 600; }
.byline span { font-family: var(--meta); font-size: var(--fs-xs); color: rgba(235,201,138,.72); }

.prose { font-size: 1.115rem; line-height: 1.78; color: var(--slate); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.9rem; margin-top: 2.1em; line-height: 1.18; }
.prose h3 { font-size: 1.35rem; margin-top: 1.7em; }
.prose a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--rose); }
.prose img { border-radius: var(--r-m); box-shadow: var(--sh-2); margin-block: 1.8em; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .45em; }
.prose blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.6rem;
  border-left: 2px solid var(--rose);
  font-family: var(--display);
  font-size: 1.42rem;
  font-style: italic;
  line-height: 1.42;
  color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; height: 1px; background: var(--paper-3); margin-block: 2.4em; }
/* Figures carried over from their old WordPress posts: the image sits on its own
   with the caption tucked under it, and a 16:9 embed stays responsive. */
.prose figure { margin: 2em 0; }
.prose figure img { display: block; width: 100%; height: auto; margin-block: 0; }
.prose figure figcaption { margin-top: .7rem; line-height: 1.5; }
.prose figure.embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-2); background: var(--ink-2); }
.prose figure.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A flat graphic rather than a photograph: no frame or shadow, and never
   cropped — it carries text that has to stay readable. */
.prose figure.banner { margin: 0 0 2em; }
.prose figure.banner img { box-shadow: none; border-radius: 0; background: none; }

/* A tall diagram: held to a readable column width and centred, so the
   labels stay legible instead of being blown up to full measure. */
.prose figure.diagram { margin: 0 auto 2.2em; max-width: 26rem; }
.prose figure.diagram img { width: 100%; height: auto; margin-block: 0; }
.prose figure.diagram figcaption { text-align: center; margin-top: .8rem; }

.prose figcaption, .prose small { font-family: var(--meta); font-size: .78rem; color: var(--slate-3); }
.prose strong { font-weight: 700; color: var(--ink); }

.author-card {
  display: flex;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-l);
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
}
.author-card .avatar-lg { width: 68px; height: 68px; }
.author-card h3 { margin-bottom: .3rem; }
.author-card p { font-size: var(--fs-sm); line-height: 1.7; color: var(--slate-2); }
@media (max-width: 540px) { .author-card { flex-direction: column; } }

.tagrow { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  font-family: var(--meta);
  font-size: var(--fs-xs);
  padding: .35rem .75rem;
  border-radius: var(--r-full);
  background: var(--paper-2);
  color: var(--slate-2);
  text-decoration: none;
  transition: background-color .22s var(--ease-out), color .22s var(--ease-out);
}
.tag:hover { background: var(--rose); color: #fff; }

/* ============================================================
   Inner-page hero
   ============================================================ */

.page-hero { padding-bottom: var(--s8); }
.page-hero .lede { max-width: 52ch; font-size: var(--fs-lg); }
.page-hero h1 { max-width: 22ch; }

.chip-link {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.05rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(235,201,138,.32);
  color: rgba(250,246,246,.86);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform .3s var(--ease-spring), background-color .22s var(--ease-out),
              border-color .22s var(--ease-out);
}
.chip-link:hover {
  transform: translateY(-2px);
  background: rgba(214,57,91,.18);
  border-color: var(--rose);
}
.svc-jump { gap: var(--s2); }

/* ============================================================
   Offer list — what's included under a service
   ============================================================ */

.offer { display: grid; gap: var(--s4); }
.offer-item {
  padding-left: var(--s4);
  border-left: 2px solid var(--rose);
}
:is(.stage, .foot) .offer-item { border-left-color: var(--brass); }
.offer-item h3 { margin-bottom: .35rem; }
.offer-item p { font-size: var(--fs-sm); line-height: 1.68; margin: 0; }

/* ============================================================
   Photo rail — the archive, moving past
   ============================================================ */

/* The rail is a real scroll container: drag, wheel, trackpad and arrow keys
   all work. The idle drift is driven from JS (scrollLeft) rather than a CSS
   transform, so it composes with native scrolling instead of fighting it. */
.photo-rail-wrap { position: relative; }
.photo-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* fade the cut edges so it reads as continuing past the viewport */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}
.photo-rail::-webkit-scrollbar { display: none; }
.photo-rail:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
.photo-rail.is-dragging { cursor: grabbing; }
.photo-rail.is-dragging .rail-item { pointer-events: none; }

.photo-rail-track {
  display: flex;
  width: max-content;
  gap: var(--s3);
  padding-inline: var(--s3);
}

.rail-item {
  position: relative;
  flex: none;
  width: 17rem;
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--ink-2);
  filter: saturate(.85);
  transition: transform .5s var(--ease-spring), filter .4s var(--ease-out);
}
.rail-item:hover, .rail-item:focus-within { transform: translateY(-6px) scale(1.015); filter: saturate(1); }

.rail-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  color: inherit;
}
.rail-zoom:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; border-radius: var(--r-m); }
.rail-item img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 32%); }
.rail-item figcaption {
  position: absolute; left: .8rem; bottom: .7rem;
  font-family: var(--meta);
  font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(250,246,246,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
  pointer-events: none;
}
.rail-hint {
  font-family: var(--meta);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-3);
  margin: var(--s4) auto 0;
}
@media (max-width: 600px) { .rail-item { width: 12rem; } }

/* ============================================================
   Contact details
   ============================================================ */

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.contact-list .meta { display: block; margin-bottom: .15rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: var(--fs-sm); }
.ticks li { position: relative; padding-left: 1.6rem; line-height: 1.6; }
.ticks li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px rgba(214,57,91,.14);
}

.form-note {
  margin-top: var(--s3);
  padding: .8rem 1rem;
  border-radius: var(--r-m);
  font-size: var(--fs-sm);
}
.form-note.is-error { background: rgba(214,57,91,.10); color: var(--rose-deep); }
.form-note.is-ok    { background: rgba(216,164,75,.16); color: #6B4A0E; }

/* ============================================================
   Forms
   ============================================================ */

.field { display: block; margin-bottom: var(--s4); }
.field > span, .lbl {
  display: block;
  font-family: var(--meta);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-2);
  margin-bottom: .5rem;
}
.input, .select, .textarea {
  width: 100%;
  padding: .82rem 1rem;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-m);
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(214,57,91,.14);
}
.textarea { min-height: 9rem; resize: vertical; line-height: 1.65; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237C6771' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.hint { font-size: var(--fs-xs); color: var(--slate-3); margin-top: .4rem; }

/* ============================================================
   Footer
   ============================================================ */

.foot { background: var(--ink); color: rgba(250,246,246,.62); padding-block: var(--s8) var(--s5); position: relative; overflow: hidden; isolation: isolate; }
.foot h4 {
  font-family: var(--meta);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--s3);
}
.foot a { color: rgba(250,246,246,.72); text-decoration: none; transition: color .2s var(--ease-out), transform .28s var(--ease-spring); display: inline-block; }
.foot a:hover { color: #fff; transform: translateX(3px); }
/* .foot a's display beats .brand's, which broke the lockup onto two lines. */
.foot .brand { display: flex; }
.foot .brand:hover { transform: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--fs-sm); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s6) var(--s5); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-bar {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid rgba(235,201,138,.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
  align-items: center;
  font-family: var(--meta);
  font-size: var(--fs-xs);
  color: rgba(250,246,246,.42);
}

/* ============================================================
   Utilities
   ============================================================ */

.stack   { display: grid; gap: var(--s3); }
.stack-4 { display: grid; gap: var(--s4); }
.row     { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); }
.mb-5 { margin-bottom: var(--s5); } .mb-6 { margin-bottom: var(--s6); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; }
.mx-auto { margin-inline: auto; }
.rel { position: relative; }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  margin-bottom: var(--s6);
  flex-wrap: wrap;
}
.head-row > :first-child { flex: 1 1 30rem; }
.head-row .lede { flex: 0 1 24rem; font-size: var(--fs-base); }

/* Photo column sits with the top of the copy, not floating in its middle */
.split-top { align-items: start; }

/* …and travels with it, rather than stranding itself beside a long list */
@media (min-width: 901px) {
  .split-sticky > :last-child {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .rise > span > i { transform: none; }
  .ribbon path { stroke-dashoffset: 0; }
  .marquee-track { animation: none; }
  .hero-media img { animation: none; transform: scale(1.04); }
}

/* Book cover — shown whole, not cropped into a frame */
.book-cover img {
  width: 100%;
  border-radius: var(--r-m);
  box-shadow: var(--sh-3);
}
@media (min-width: 901px) {
  .book-split .book-cover { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* Fragment of the book — the preface, shown as pages.
   These are documents, not photographs, so nothing is cropped: the scan's own
   ratio drives the card and the frame just lifts it off the page. */
.pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-card { margin: 0; }
.page-card img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: var(--r-s);
  box-shadow: var(--sh-2);
  transition: transform .5s var(--ease-spring), box-shadow .4s var(--ease-out);
}
.page-card .rail-zoom:hover img,
.page-card .rail-zoom:focus-visible img {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
}
.page-card .rail-zoom:active img { transform: translateY(-2px); }
.page-card figcaption {
  margin-top: var(--s3);
  font-family: var(--meta);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--slate-3);
}
/* Three narrow portraits still read as a run of pages on a tablet; below that
   they stack and each one gets enough width to be worth looking at. */
@media (max-width: 640px) {
  .pages { grid-template-columns: 1fr; gap: var(--s6); max-width: 24rem; margin-inline: auto; }
}

/* ============================================================
   Lightbox — the archive rail, enlarged
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(10, 5, 9, .94);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease-out), visibility .32s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s2);
  font-family: var(--meta);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: rgba(250, 246, 246, .6);
}

.lb-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0 var(--s4);
  touch-action: none;
  min-height: 0;
}
/* The image needs a containing block with a definite height for its
   percentage max-height to resolve — a 1fr grid track alone does not give it
   one, so tall photos were rendering full-size and getting cropped. */
.lb-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-s);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform .38s var(--ease-spring), opacity .25s var(--ease-out);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
  will-change: transform;
}
.lightbox.is-zoomed .lb-img { cursor: grab; }
.lightbox.is-zoomed.is-panning .lb-img { cursor: grabbing; transition: opacity .25s var(--ease-out); }
.lightbox.is-swapping .lb-img { opacity: 0; }

.lb-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s2) var(--s4) var(--s5);
}
.lb-cap {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--paper);
  text-align: center;
}

.lb-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(235, 201, 138, .28);
  border-radius: var(--r-full);
  background: rgba(34, 16, 27, .7);
  color: var(--paper);
  cursor: pointer;
  transition: transform .3s var(--ease-spring), background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.lb-btn:hover { background: var(--rose); border-color: var(--rose); transform: scale(1.08); }
.lb-btn:active { transform: scale(.94); }
.lb-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.lb-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lb-nav:hover { transform: translateY(-50%) scale(1.08); }
.lb-nav:active { transform: translateY(-50%) scale(.94); }
.lb-prev { left: var(--s3); }
.lb-next { right: var(--s3); }
.lightbox.is-zoomed .lb-nav { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .lb-cap { font-size: 1rem; }
  .lb-stage { padding: 0 var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-img, .lb-btn { transition-duration: .01ms; }
}

/* ============================================================
   Hero video — play control and modal
   ============================================================ */

.btn-play {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .35rem 1.1rem .35rem .35rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: none;
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), border-color .28s var(--ease-out), background-color .28s var(--ease-out);
}
.btn-play:hover { border-color: rgba(235, 201, 138, .32); background: rgba(34, 16, 27, .5); }
.btn-play:active { transform: scale(.97); }
.btn-play:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.btn-play-ring {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-full);
  background: rgba(250, 246, 246, .1);
  border: 1px solid rgba(235, 201, 138, .38);
  box-shadow: 0 0 0 0 rgba(214, 57, 91, .45);
  transition: transform .4s var(--ease-spring), background-color .28s var(--ease-out), box-shadow .5s var(--ease-out);
}
.btn-play:hover .btn-play-ring {
  background: var(--rose);
  border-color: var(--rose);
  transform: scale(1.06);
  box-shadow: 0 0 0 10px rgba(214, 57, 91, 0);
}
.btn-play-ring svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }

.videobox {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: rgba(10, 5, 9, .95);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility .3s;
}
.videobox.is-open { opacity: 1; visibility: visible; }

.vb-frame {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #000;
  box-shadow: var(--sh-dark);
  transform: scale(.97);
  transition: transform .38s var(--ease-spring);
}
.videobox.is-open .vb-frame { transform: scale(1); }
.vb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.vb-close {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .videobox, .vb-frame, .btn-play, .btn-play-ring { transition-duration: .01ms; }
}