/* ════════════════════════════════════════════════════════════════════
   Wedding Potion — site.css
   One stylesheet for all eleven pages. Design system: DESIGN.md (mockup D).
   Edit this file in src/assets/, then run build.py. Never edit dev/.
   ════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0f0e0d; --ink2:#15120f; --ink3:#221d18; --ink4:#3a332a;
  --paper:#fbf8f2; --paper2:#f2ece1;
  --cream:#eee7db; --cream2:#d9d1c4; --cream3:#b9a888;
  --gold:#9a7438; --gold2:#c9a66b; --gold3:#e2c595;
  --blue:#2c6bb3; --blue-d:#245d9c;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --script:'Allura',cursive;
  --nav:84px; --rail:26px;
  --gut:clamp(1.5rem,6vw,5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--ink);color:var(--cream2);font-family:var(--serif);
  font-size:20px;font-weight:300;line-height:1.68;-webkit-font-smoothing:antialiased;
  padding-left:var(--rail);overflow-x:clip}   /* clip, not hidden: hidden would break the pinned film strip */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;color:var(--cream)}
h1{font-size:clamp(2.7rem,6.4vw,4.8rem);font-weight:300;letter-spacing:-.005em}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:300}
h3{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:400;line-height:1.2}
p{max-width:46ch}
em{font-style:normal;color:var(--gold3)}
a{color:inherit;text-decoration:none}
img{display:block}
:focus-visible{outline:1px solid var(--gold2);outline-offset:4px}

.script{font-family:var(--script);font-size:clamp(1.9rem,3.3vw,2.6rem);
  letter-spacing:.13em;color:var(--gold2);line-height:1.2;display:block}
.lbl{font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold2)}
.btn{display:inline-block;font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding:1.05rem 2.3rem;position:relative;
  background:var(--blue);color:#fff;border:1px solid var(--blue-d);overflow:hidden;
  transition:transform .4s var(--ease)}
.btn span{position:relative;z-index:2}
.btn i{font-style:normal}
.btn::after{content:'';position:absolute;inset:0;background:var(--blue-d);
  transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(238,231,219,.32)}
.btn.ghost::after{background:rgba(238,231,219,.12)}
.paper .btn.ghost{color:var(--ink3);border-color:rgba(34,29,24,.35)}
.paper .btn.ghost::after{background:rgba(34,29,24,.08)}
.acts{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}

.paper{background:var(--paper);color:var(--ink3)}
.paper h1,.paper h2,.paper h3{color:var(--ink3)}
.paper em,.paper .lbl,.paper .script{color:var(--gold)}
.dark{background:var(--ink2)}

/* the arrow link used inside panels and cards */
.more{display:inline-block;margin-top:1.7rem;font-family:var(--sans);font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);
  position:relative;padding-bottom:.35rem}
.more::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(.35);transform-origin:0 50%;
  transition:transform .5s var(--ease)}
.more:hover::after{transform:scaleX(1)}
.paper .more{color:var(--gold)}

/* ═══ 0. the slate: holds the homepage until the photographs have decoded ═══ */
.pre{position:fixed;inset:0;z-index:300;background:var(--ink);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease)}
.pre.out{clip-path:inset(0 0 100% 0);pointer-events:none}
.seen .pre{display:none}               /* once per visit, not on every page view */
.pre img{height:76px;width:auto;animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pre-tc{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;
  color:var(--gold2);margin-top:1.4rem}
.pre-bar{width:min(220px,44vw);height:1px;background:rgba(201,166,107,.2);
  margin-top:1.1rem;position:relative;overflow:hidden}
.pre-bar i{position:absolute;inset:0;background:var(--gold2);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .3s linear}

/* ═══ 1. scroll progress — a strip of film advancing ═══ */
.prog{position:fixed;top:0;left:var(--rail);right:0;height:2px;z-index:90;
  background:linear-gradient(90deg,var(--gold),var(--gold3));transform-origin:0 50%;
  transform:scaleX(0);will-change:transform}

/* ═══ 2. grain — the whole page sits under a moving film emulsion ═══ */
#grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.028;mix-blend-mode:overlay}
@media(max-width:819px){#grain{display:none}}

/* ═══ 3. custom cursor, with a PLAY state over the films ═══ */
/* hidden by default: on a touch screen these are two stray divs */
.cur,.cur-r{display:none}
@media (pointer:fine){
  .cur{display:block}
  .cur-r{display:grid}
  body{cursor:none}
  a,button,summary{cursor:none}
  .cur{position:fixed;top:0;left:0;z-index:95;pointer-events:none;
    width:7px;height:7px;border-radius:50%;background:var(--gold2);
    transform:translate(-50%,-50%);will-change:transform}
  .cur-r{position:fixed;top:0;left:0;z-index:94;pointer-events:none;
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(201,166,107,.5);
    display:grid;place-items:center;transform:translate(-50%,-50%);
    transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),
               border-color .35s var(--ease);will-change:transform}
  .cur-r b{font-family:var(--sans);font-size:.5rem;letter-spacing:.2em;color:var(--ink);
    opacity:0;transition:opacity .25s ease}
  .cur-r.play{width:84px;height:84px;background:var(--gold2);border-color:var(--gold2)}
  .cur-r.play b{opacity:1}
  .cur-r.link{width:56px;height:56px;background:rgba(201,166,107,.14)}
  /* the lightbox and iframes get the real pointer back */
  .vlb-on,.vlb-on *{cursor:auto}
}

/* ═══ 4. film reel rail ═══ */
.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:60;background:#0a0908;
  border-right:1px solid rgba(201,166,107,.12);overflow:hidden}
.rail i{position:absolute;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:2px;
  background:#241f19;box-shadow:inset 0 0 0 1px rgba(201,166,107,.18)}
.rail-track{position:absolute;inset:0;animation:reel 2.4s linear infinite}
@keyframes reel{from{transform:translateY(-22px)}to{transform:translateY(0)}}

/* ═══ 5. nav ═══ */
nav{position:fixed;top:0;left:var(--rail);right:0;height:var(--nav);z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 clamp(1.2rem,4vw,3rem);
  background:rgba(15,14,13,0);border-bottom:1px solid rgba(201,166,107,0);
  transition:background .5s var(--ease),border-color .5s var(--ease),height .5s var(--ease)}
nav.stuck{background:rgba(15,14,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(201,166,107,.12);height:68px}
.wordmark{height:42px;width:auto;transition:height .5s var(--ease)}
nav.stuck .wordmark{height:34px}
.navlinks{display:flex;gap:2rem;list-style:none;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream2)}
.navlinks>li{position:relative}
.navlinks a{position:relative;display:inline-block;padding:.5rem 0}
.navlinks>li>a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--gold2);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease)}
.navlinks>li>a:hover::after,.navlinks>li>a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
.navlinks a[aria-current]{color:var(--cream)}
/* dropdowns: a paper card that wipes down from the link */
.dd{position:absolute;top:100%;left:-1.2rem;min-width:220px;padding:.7rem 0;
  background:rgba(21,18,15,.97);border:1px solid rgba(201,166,107,.16);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .45s var(--ease),visibility 0s .45s}
.has-dd:hover .dd,.has-dd:focus-within .dd{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .45s var(--ease),visibility 0s}
.dd a{display:block;padding:.6rem 1.2rem;font-size:.64rem;color:var(--cream2);
  transition:color .3s var(--ease),padding .3s var(--ease)}
.dd a:hover,.dd a[aria-current]{color:var(--gold2);padding-left:1.5rem}
.nav-r{display:flex;align-items:center;gap:1.4rem}
.social{display:flex;gap:1rem;color:var(--cream3)}
.social a{display:block;transition:color .3s var(--ease)}
.social a:hover{color:var(--gold2)}
.social svg{width:17px;height:17px;display:block}
nav .btn{padding:.75rem 1.5rem;font-size:.68rem;white-space:nowrap}
.burger{display:none;width:40px;height:40px;background:none;border:0;position:relative;color:var(--cream)}
.burger i{position:absolute;left:9px;right:9px;height:1px;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:26px}
.menu-on .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-on .burger i:nth-child(2){opacity:0}
.menu-on .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1280px){nav .social{display:none}}
@media(max-width:1100px){.navlinks{display:none}.burger{display:block}}

/* the mobile menu: a full-screen slate that wipes down */
.menu{position:fixed;inset:0;left:var(--rail);z-index:65;background:var(--ink);
  padding:calc(var(--nav) + 2rem) var(--gut) 2.5rem;overflow-y:auto;
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s var(--ease),visibility 0s .6s}
.menu-on .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease),visibility 0s}
.menu-on{overflow:hidden}
.menu ul{list-style:none}
.menu>ul>li{border-bottom:1px solid rgba(201,166,107,.12)}
.menu>ul>li>a{display:block;font-size:2rem;color:var(--cream);padding:.55rem 0;line-height:1.3}
.menu>ul>li>a[aria-current]{color:var(--gold3)}
.menu ul ul{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;padding:0 0 .9rem}
.menu ul ul a{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream3)}
.menu .btn{margin-top:2rem;align-self:flex-start}
.menu .social{display:flex;margin-top:1.6rem}
@media(min-width:1101px){.menu{display:none}}

/* ═══ 6. heroes ═══ */
.hero{position:relative;height:100vh;overflow:hidden;display:flex;
  align-items:center;justify-content:center;text-align:center}
.hero .plate{position:absolute;inset:0;opacity:0;transition:opacity 2.2s ease}
.hero .plate.on{opacity:1}
.hero .plate img,.hero video.plate{width:100%;height:100%;object-fit:cover}
.hero .plate img{filter:saturate(.88) brightness(.78)}
.hero .plate img{transform:scale(1.06);animation:push 16s linear infinite alternate}
@keyframes push{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.hero video.plate{position:absolute;inset:0}
.hero::after{content:'';position:absolute;inset:0;z-index:1;background:
  radial-gradient(ellipse at 50% 45%,rgba(15,14,13,.08),rgba(15,14,13,.72) 78%),
  linear-gradient(to top,var(--ink) 1%,rgba(15,14,13,.5) 30%,rgba(15,14,13,.18) 62%,rgba(15,14,13,.46) 100%)}
.hero.vidready::after{background:none}
.hero .inner{position:relative;z-index:3;padding:0 1.5rem;max-width:960px;will-change:transform,opacity}
.hero .sub{margin:1.9rem auto 0;color:var(--cream);font-size:1.12rem;max-width:50ch}
.hero .acts{margin-top:2.6rem;justify-content:center}
/* interior pages: the same hero, held a little shorter and a little darker
   so a page of reading doesn't open on a full screen of picture */
.hero.page{height:auto;min-height:100vh;min-height:100svh;padding:calc(var(--nav) + 3rem) 0 8.5rem}
.hero.page .plate img{filter:saturate(.88) brightness(.8)}
.hero.page::after{background:linear-gradient(to top,rgba(15,14,13,.52) 0%,rgba(15,14,13,.12) 32%,rgba(15,14,13,.04) 58%,rgba(15,14,13,.3) 100%)}
.hero.page.vidready::after{background:none}
.hero.page h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.cue{position:absolute;left:50%;bottom:2.2rem;z-index:3;transform:translateX(-50%);
  font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cream3);display:flex;flex-direction:column;align-items:center;gap:.7rem}
.cue i{width:1px;height:46px;background:linear-gradient(var(--gold2),transparent);
  animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:0 0}
  45%{transform:scaleY(1);transform-origin:0 0}
  46%{transform:scaleY(1);transform-origin:0 100%}
  100%{transform:scaleY(0);transform-origin:0 100%}}
@media(max-height:640px){.cue{display:none}}

/* the super names the wedding on screen: ten cuts, ten venues */
.super{position:absolute;left:clamp(1.2rem,4vw,3rem);bottom:2.4rem;z-index:3;
  display:flex;align-items:baseline;gap:.75rem;font-family:var(--sans);
  opacity:0;transition:opacity .5s var(--ease)}
.super.on{opacity:1}
.super .sup-n{font-size:.56rem;letter-spacing:.24em;color:var(--gold2)}
.super .sup-t{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.super .sup-t,.super .sup-n{display:inline-block;animation:supIn .45s var(--ease) both}
@keyframes supIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:819px){.super{display:none}}

/* ═══ 7. type arrives a line at a time, from behind its own edge ═══ */
/* only once JS is running, so a failed script never hides a headline */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>i{display:block;font-style:inherit}
.js .ln>i{transform:translateY(105%);transition:transform 1s var(--ease)}
.js .on .ln>i,.js .in .ln>i{transform:translateY(0)}
.ln:nth-child(2)>i{transition-delay:.09s}
.ln:nth-child(3)>i{transition-delay:.18s}

/* ═══ 8. reveals: photographs wipe open, they don't fade in ═══ */
.js .r{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .r.in{opacity:1;transform:none}
.r.d1{transition-delay:.1s}.r.d2{transition-delay:.2s}.r.d3{transition-delay:.3s}
/* the clip lives on an inner mask, never on the observed element: a clipped
   element reports an intersectionRatio of 0 and would never trigger itself. */
.msk{position:absolute;inset:0;display:block}
.js .msk{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease)}
.js .wipe.in .msk{clip-path:inset(0 0 0 0)}

/* ═══ 9. photographs ═══ */
.ph{position:relative;overflow:hidden;background:var(--ink4)}
/* the photo is 118% of its frame and starts 9% above it, so a drift of up to
   ±7% (see site.js) never opens a gap at either edge */
.ph img,.rph img{position:relative;top:-9%;width:100%;height:118%;object-fit:cover;object-position:50% 22%;will-change:transform}
.ph.top img,.rph.top img{object-position:50% 0}
.ph.flat img{top:0;height:100%}
.rph{position:relative;overflow:hidden}

.ticker{overflow:hidden;border-top:1px solid rgba(201,166,107,.12);
  border-bottom:1px solid rgba(201,166,107,.12);background:var(--ink2);padding:.95rem 0}
.tk{display:flex;gap:3.2rem;width:max-content;font-family:var(--sans);font-size:.64rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cream3);
  animation:tick 46s linear infinite}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tk span::after{content:'\00a0\00a0\00b7';color:var(--gold2)}

/* ═══ 10. sections ═══ */
.sec{padding:clamp(4.5rem,9vw,8rem) var(--gut)}
.wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:780px;margin:0 auto;text-align:center}
.narrow p{max-width:none}
/* section heading block: label, headline, standfirst */
.head{max-width:1180px;margin:0 auto clamp(2.5rem,5vw,3.8rem)}
.head h2{margin-top:.7rem}
.head p{margin-top:1.2rem;font-size:1.08rem}
.head.c{text-align:center}.head.c p{margin-left:auto;margin-right:auto}
.head:last-child{margin-bottom:0}

/* ═══ 11. chapters: a photograph and a panel, edge to edge ═══ */
.chapter{display:grid;grid-template-columns:1.12fr 1fr;min-height:86vh}
.chapter.flip{grid-template-columns:1fr 1.12fr}
.chapter.short{min-height:72vh}
.chapter .ph{height:100%;min-height:460px}
.panel{background:var(--paper);color:var(--ink3);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(2.5rem,6vw,5.5rem)}
.panel.dark{background:var(--ink2);color:var(--cream2)}
.panel h2{font-size:clamp(1.8rem,3.3vw,2.7rem);margin:.9rem 0 1.1rem;color:var(--ink3)}
.panel.dark h2{color:var(--cream)}
.panel .lbl{color:var(--gold)}
.panel.dark .lbl{color:var(--gold2)}
.panel em{color:var(--gold)}
.panel.dark em{color:var(--gold3)}
.panel p{font-size:1.05rem;line-height:1.75}
.panel p+p{margin-top:1rem}
.panel .more{color:var(--gold);align-self:flex-start}
.panel.dark .more{color:var(--gold2)}
@media(max-width:900px){.chapter,.chapter.flip{grid-template-columns:1fr;min-height:0}
  .chapter.flip .ph{order:-1}
  .chapter .ph{min-height:0;aspect-ratio:4/3}}

/* a list with a hairline tick, for "what's included" style bullets */
.ticks{list-style:none;margin-top:1.2rem;font-size:.98rem}
.ticks li{position:relative;padding-left:1.4rem;line-height:1.6;margin:.35rem 0}
.ticks li::before{content:'';position:absolute;left:0;top:.8em;width:.7rem;height:1px;background:var(--gold2)}
.paper .ticks li::before,.panel:not(.dark) .ticks li::before{background:var(--gold)}

/* a numeral rides along the homepage chapters and counts them off */
.chapters{position:relative}
.chnum{position:sticky;top:0;height:0;z-index:5;pointer-events:none;
  display:flex;justify-content:flex-end;opacity:0;transition:opacity .6s var(--ease)}
.chnum.on{opacity:1}
.chnum .box{position:relative;top:calc(50vh - 46px);margin-right:clamp(1rem,3vw,2.4rem);
  text-align:right;mix-blend-mode:difference}
.chnum .big{font-family:var(--serif);font-size:clamp(3.4rem,7vw,5.6rem);line-height:1;
  color:#8e8375;display:block}
.chnum .of{font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:#6e6358;display:block;margin-top:.4rem}
@media(max-width:900px){.chnum{display:none}}

/* ═══ 12. films ═══ */
/* the signature move: on the homepage the films scroll sideways as you scroll down */
.strip{position:relative;height:340vh;background:var(--ink)}
.strip-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.strip-head{padding:0 var(--gut);margin-bottom:2.2rem;display:flex;
  justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.strip-head .more{margin-top:0}
.strip-track{display:flex;gap:clamp(1rem,2vw,1.8rem);padding:0 var(--gut);
  width:max-content;will-change:transform}
.film{position:relative;display:block;width:min(44vw,560px);aspect-ratio:16/10;overflow:hidden;
  background:var(--ink4);flex:none}
.film img,.film video{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease),opacity .55s var(--ease)}
.film:hover img{transform:scale(1.05)}
.film video{position:absolute;inset:0;opacity:0;z-index:1}
.film.playing video{opacity:1}
.film.playing img{transform:scale(1.05)}
.film .meta{position:absolute;inset:auto 0 0 0;z-index:2;padding:4rem 1.4rem 1.3rem;
  background:linear-gradient(to top,rgba(15,14,13,.9),transparent)}
.film .place{font-family:var(--sans);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold2);display:block;margin-bottom:.35rem}
.film .ttl{font-size:1.2rem;color:var(--paper);line-height:1.25;display:block}
.strip-count{padding:0 var(--gut);margin-top:1.8rem;font-family:var(--sans);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream3);
  display:flex;align-items:center;gap:1rem}
.bar{flex:1;max-width:260px;height:1px;background:rgba(201,166,107,.22);position:relative}
.bar i{position:absolute;inset:0;background:var(--gold2);transform-origin:0 50%;
  transform:scaleX(0);will-change:transform}
@media(max-width:820px){
  .strip{height:auto}
  .strip-pin{position:static;height:auto;padding:4rem 0}
  .strip-track{transform:none !important;flex-wrap:wrap;width:auto}
  .film{width:100%}
  .strip-count{display:none}
}

/* ── photography wall + gallery pages: reuse the pinned-sideways mechanic ── */
.pstrip{position:relative;background:var(--ink)}
/* the films page: a two-up reel of cards, each with its story underneath */
.reel{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,5vw,4.5rem) clamp(1.5rem,3vw,2.6rem)}
.reel .film{width:100%}
.reel .lead{grid-column:1/-1}
.reel .lead .film{aspect-ratio:21/9}
.reel .story{margin-top:1.3rem}
.reel .story h3{margin:.3rem 0 .6rem}
.reel .story p{font-size:1.02rem;max-width:58ch}
.reel .kind{display:inline-block;margin-top:.9rem;font-family:var(--sans);font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream3);
  border:1px solid rgba(201,166,107,.25);padding:.35rem .7rem}
.film .play{position:absolute;top:50%;left:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;border:1px solid rgba(238,231,219,.5);display:grid;place-items:center;
  color:var(--cream);font-size:.8rem;transition:transform .5s var(--ease),background .5s var(--ease)}
.film:hover .play{transform:scale(1.1);background:rgba(201,166,107,.3)}
.film.nofilm{cursor:default}
.film.nofilm .play{display:none}
@media(max-width:820px){.reel{grid-template-columns:1fr}.reel .lead .film{aspect-ratio:16/10}}
@media (pointer:fine){.film .play{display:none}}
.todo{max-width:1180px;margin:0 auto 3rem;padding:1rem 1.3rem;border:1px dashed rgba(201,166,107,.45);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--cream3);line-height:1.6}
.todo b{color:var(--gold2);font-weight:500}
.todo code{font-size:.9em;color:var(--cream)}

/* ═══ 13. quotes ═══ */
.quote{text-align:center;padding:clamp(4rem,8vw,7rem) var(--gut)}
.quote .q{font-family:var(--script);font-size:3.4rem;color:var(--gold2);line-height:.5;
  display:block;margin-bottom:1.8rem}
.quote blockquote{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.45;max-width:26ch;margin:0 auto;color:var(--cream)}
.quote cite{display:block;margin-top:1.6rem;font-family:var(--sans);font-style:normal;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream3)}

/* ═══ 14. steps — the homepage five, in a row ═══ */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:3rem}
.flow-step{padding:1.6rem 1.4rem;border-left:1px solid rgba(154,116,56,.22)}
.flow-step:first-child{border-left:0;padding-left:0}
.flow-step .n{font-family:var(--serif);font-size:2.6rem;color:var(--gold);opacity:.7;line-height:1}
.flow-step h3{font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;margin:.9rem 0 .6rem}
.flow-step p{font-size:.95rem;line-height:1.6;color:var(--ink4)}
@media(max-width:620px){.flow-step{border-left:0;padding-left:0;border-top:1px solid rgba(154,116,56,.22)}
  .flow-step:first-child{border-top:0}}

/* the process page six: a numbered ledger, one row per step */
.steps{max-width:1180px;margin:0 auto;border-top:1px solid rgba(154,116,56,.25)}
.step{display:grid;grid-template-columns:5rem minmax(0,1fr) minmax(0,1.5fr);gap:1.2rem 2.4rem;
  padding:clamp(2rem,4vw,2.8rem) 0;border-bottom:1px solid rgba(154,116,56,.25)}
.step .n{font-size:3.2rem;line-height:.9;color:var(--gold);opacity:.75}
.step h3{margin-bottom:.5rem}
.step .when{font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.step .desc p{max-width:58ch;font-size:1.05rem}
@media(max-width:860px){.step{grid-template-columns:3.6rem 1fr}.step .desc{grid-column:2}}

/* ═══ 15. cards: formats, grades, guides ═══ */
.cards{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:clamp(2.4rem,4vw,3.4rem) clamp(1.5rem,3vw,2.6rem)}
.card{display:block;border-top:1px solid rgba(201,166,107,.3);padding-top:1.5rem}
.paper .card{border-top-color:rgba(154,116,56,.35)}
.card .n{font-size:2.4rem;line-height:1;color:var(--gold2);opacity:.75;display:block;margin-bottom:.9rem}
.paper .card .n{color:var(--gold)}
.card .lbl{display:block;margin-bottom:.7rem;letter-spacing:.2em}
.card h3{margin-bottom:.8rem}
.card p{font-size:1rem;line-height:1.7}
.card .more{margin-top:1.1rem}
a.card h3{transition:color .4s var(--ease)}
a.card:hover h3{color:var(--gold)}
/* "who it's for" — one italic line under a description */
.for{margin-top:.7rem;font-style:italic;font-size:1.02rem;color:var(--gold3)}
.paper .for,.panel:not(.dark) .for{color:var(--gold)}
.panel .for+.more{margin-top:1.1rem}
.wrap>.for{text-align:left}
.cards.four{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}

/* ═══ 16. about: the numbers, and the two people ═══ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink2);
  border-bottom:1px solid rgba(201,166,107,.12)}
.stat{padding:2.2rem 1.4rem;text-align:center;border-left:1px solid rgba(201,166,107,.12)}
.stat:first-child{border-left:0}
.stat b{display:block;font-weight:300;font-size:clamp(1.8rem,3vw,2.5rem);color:var(--cream);line-height:1.1}
.stat span{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.58rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream3)}
@media(max-width:720px){.stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(201,166,107,.12)}}
.duo{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
.duo h3{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:300}
.duo .lbl{display:block;margin:.7rem 0 1rem}
.duo p{font-size:1.05rem}
.duo-person{display:flex;gap:1.3rem;align-items:flex-start;text-align:left}
.duo-photo{flex:0 0 92px;width:92px;height:92px;border-radius:50%;overflow:hidden;background:var(--ink4)}
.duo-photo img{width:100%;height:100%;object-fit:cover;display:block}
.duo-text{flex:1;min-width:0}
.duo-note{max-width:1180px;margin:2rem auto 0;font-size:.92rem;color:var(--cream3);line-height:1.7}
@media(max-width:620px){.duo-person{gap:1rem}.duo-photo{width:68px;height:68px;flex-basis:68px}}
@media(max-width:760px){.duo{grid-template-columns:1fr}}

/* ═══ 17. photography: a composed wall, never overlapping ═══ */
.wall{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(.7rem,1.4vw,1.2rem)}
.wall .ph{grid-column:span 4;aspect-ratio:4/5}
.wall .w7{grid-column:span 7;aspect-ratio:7/6}
.wall .w5{grid-column:span 5;aspect-ratio:auto}
.wall .w12{grid-column:span 12;aspect-ratio:21/9}
@media(max-width:760px){.wall{grid-template-columns:1fr 1fr}
  .wall .ph,.wall .w7,.wall .w5{grid-column:span 1;aspect-ratio:4/5}
  .wall .w7,.wall .w12{grid-column:span 2;aspect-ratio:4/3}}

/* ═══ 18. FAQ ═══ */
.faq{max-width:900px;margin:0 auto;border-top:1px solid rgba(201,166,107,.18)}
.faq details{border-bottom:1px solid rgba(201,166,107,.18)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;font-size:1.3rem;color:var(--cream);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--sans);font-weight:300;color:var(--gold2);
  transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.6rem;font-size:1.05rem;max-width:64ch}

/* ═══ 19. apps: a tool and a mock of its screen ═══ */
.app{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.app+.app{margin-top:clamp(4.5rem,8vw,7rem)}
.app.flip{direction:rtl}.app.flip>*{direction:ltr}   /* flip the columns, not the order */
.app h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:.8rem 0 1rem}
.app .acts{margin-top:2rem}
.app .soon{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream3)}
.paper .app .soon{color:var(--gold)}
.screen{background:var(--ink2);border:1px solid rgba(201,166,107,.18);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.screen .bar3{display:flex;gap:.4rem;padding:.8rem 1rem;border-bottom:1px solid rgba(201,166,107,.12)}
.screen .bar3 i{width:8px;height:8px;border-radius:50%;background:var(--ink4)}
.screen .rows{padding:1rem 1.3rem 1.3rem}
.screen .row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid rgba(201,166,107,.08);font-size:.98rem}
.screen .row span{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--cream3);white-space:nowrap}
.screen .row.hi b{color:var(--gold3)}
.screen .row.hi{background:linear-gradient(90deg,rgba(201,166,107,.12),transparent);margin:0 -1.3rem;padding:.7rem 1.3rem}
.screen .row b{font-weight:400;color:var(--cream)}
.screen .sun{margin-top:1rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--gold2)}
@media(max-width:860px){.app,.app.flip{grid-template-columns:1fr;direction:ltr}}

/* a single wide photograph inside a text section */
.ph.band{max-width:900px;margin:clamp(3rem,6vw,4.5rem) auto 0;aspect-ratio:3/2}

/* the live Timeline Builder: the whole Apps page is the app, edge to edge
   under the nav. Our cursor, grain and progress bar would sit on top of it
   (and the cursor can't follow the mouse into an iframe), so they're off here. */
.app-page .cur,.app-page .cur-r,.app-page #grain,.app-page .prog{display:none !important}
.app-page,.app-page a,.app-page button{cursor:auto !important}
.app-page a,.app-page button{cursor:pointer !important}
.app-page nav{background:rgba(15,14,13,.96);border-bottom-color:rgba(201,166,107,.12)}
.fullapp{padding-top:var(--nav);background:var(--ink)}
.fullapp iframe{display:block;width:100%;height:calc(100vh - var(--nav));height:calc(100dvh - var(--nav));border:0;background:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the two signature looks, side by side */
.looks{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.6rem)}
.looks h3{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:300}
@media(max-width:620px){.looks{grid-template-columns:1fr}}
.looks .look-img{aspect-ratio:4/5;overflow:hidden;margin-bottom:1.3rem;background:var(--ink4);border-radius:2px}
.looks .look-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ═══ 20. contact ═══ */
/* the Studio Ninja form draws white text on a transparent background, so it
   always sits on the dark ground — never on paper */
.inquire{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.inquire .form{background:var(--ink3);border:1px solid rgba(201,166,107,.28)}
.inquire .form .lbl{display:block;padding:1.1rem 1.4rem;border-bottom:1px solid rgba(201,166,107,.2);color:var(--gold2)}
.inquire iframe{width:100%;min-height:1150px;border:0;display:block;background:transparent;color-scheme:dark}
.direct h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:1.4rem;color:var(--cream)}
.direct dl{border-top:1px solid rgba(201,166,107,.2)}
.direct dl>div{padding:1rem 0;border-bottom:1px solid rgba(201,166,107,.2)}
.direct dt{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2)}
.direct dd{font-size:1.15rem;margin-top:.2rem;color:var(--cream)}
.direct dd a{border-bottom:1px solid rgba(201,166,107,.45)}
.direct dd a:hover{color:var(--gold3)}
.direct small{display:block;font-size:.92rem;color:var(--cream3)}
.direct .note{margin-top:1.6rem;font-size:1rem;color:var(--cream3)}
@media(max-width:900px){.inquire{grid-template-columns:1fr}.direct{order:-1}}

/* ═══ 21. reviews ═══ */
.reviews{max-width:1180px;margin:0 auto;columns:3 300px;column-gap:clamp(1.5rem,3vw,2.6rem)}
.review{break-inside:avoid;padding:1.8rem 0 2.2rem;border-top:1px solid rgba(154,116,56,.3)}
.review h3{font-size:1.4rem;line-height:1.3;margin-bottom:.9rem}
.review h3::before{content:'\201C';font-family:var(--script);color:var(--gold);font-size:2.4rem;
  line-height:0;vertical-align:-.45em;margin-right:.15em}
.review p{font-size:.98rem;line-height:1.7;color:#4a4036}
.review .by{display:flex;align-items:center;gap:.85rem;margin-top:1.2rem;font-family:var(--sans);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink4);line-height:1.5}
.review .by b{display:block;font-weight:500;color:var(--gold)}
/* reviewer photo: a small round portrait, one per review, never layered over anything */
.av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px rgba(154,116,56,.35)}
.quote cite .av{display:block;margin:0 auto .9rem;width:56px;height:56px;box-shadow:0 0 0 1px rgba(201,166,107,.45)}

/* ═══ 22. the gold closing band ═══ */
.reserve{background:var(--gold2);color:var(--ink3);
  padding:clamp(3.5rem,7vw,6rem) var(--gut)}
.rwrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.4rem);align-items:center}
.reserve.solo .rwrap{grid-template-columns:1fr;max-width:820px}
.rph{aspect-ratio:3/4;overflow:hidden;background:var(--ink4);
  box-shadow:0 18px 38px rgba(60,40,15,.28)}
.rtxt{text-align:center}
.ricon{height:70px;width:auto;margin:0 auto 1.1rem;
  transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.js .r .ricon{transform:translateY(14px) scale(.82);opacity:0}
.js .r.in .ricon{transform:none;opacity:1}
.rscript{font-family:var(--script);font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:.06em;
  color:var(--ink3);line-height:1;display:block}
.reserve h2{color:var(--ink3);font-size:clamp(2.1rem,4.4vw,3.5rem);margin:.55rem 0 1rem}
.reserve h2 em{font-style:italic;color:#6d5020}
.reserve p{font-size:1.08rem;max-width:44ch;margin:0 auto;color:#3b2f18}
.reserve .acts{justify-content:center;margin-top:1.9rem}
.reserve .btn{background:var(--ink3);border-color:var(--ink3);color:#f3ead7}
.reserve .btn::after{background:#000}
.reserve .btn.ghost{background:transparent;color:var(--ink3);border-color:rgba(34,29,24,.45)}
.reserve .btn.ghost::after{background:rgba(34,29,24,.1)}
.rmeta{display:flex;justify-content:center;gap:clamp(1.5rem,3vw,2.8rem);flex-wrap:wrap;
  margin-top:2.2rem;font-family:var(--sans);font-size:.8rem;color:var(--ink3)}
.rmeta b{display:block;font-weight:500;font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;opacity:.62;margin-bottom:.3rem}
@media(max-width:860px){.rwrap{grid-template-columns:1fr}.rph{aspect-ratio:4/3}}

/* ═══ 23. footer ═══ */
footer{border-top:1px solid rgba(201,166,107,.12);padding:clamp(3.5rem,6vw,5rem) var(--gut) 2rem}
.ft{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.5rem}
.flogo{height:26px;width:auto;opacity:.85}
.ft-tag{margin-top:1.2rem;font-size:1rem;color:var(--cream3);max-width:32ch}
.ft .social{display:flex;margin-top:1.4rem}
.ft h4{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:1rem}
.ft ul{list-style:none}
.ft li a{display:inline-block;padding:.22rem 0;font-size:1.02rem;color:var(--cream2);transition:color .3s var(--ease)}
.ft li a:hover{color:var(--gold3)}
.fb{max-width:1180px;margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(201,166,107,.1);
  display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream3)}
.fb a{color:var(--gold2)}
@media(max-width:860px){.ft{grid-template-columns:1fr 1fr}.ft>div:first-child{grid-column:1/-1}}

/* ═══ 24. Vimeo lightbox ═══ */
.vlb{position:fixed;inset:0;z-index:400;background:rgba(10,9,8,.96);display:flex;
  align-items:center;justify-content:center;padding:2rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.vlb.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
.vlb-in{position:relative;width:min(90vw,1200px);aspect-ratio:16/9;background:#000}
.vlb-in iframe{width:100%;height:100%;border:0;display:block}
.vlb-x{position:absolute;top:-3rem;right:0;background:none;border:0;padding:.5rem;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream3)}
.vlb-x:hover{color:var(--gold3)}

@media(max-width:620px){
  body{font-size:18px}
  /* the wordmark and the CTA were fighting for a 390px bar */
  nav{padding:0 .9rem;gap:.6rem}
  .wordmark,nav.stuck .wordmark{height:26px}
  nav .btn{padding:.6rem .85rem;font-size:.55rem;letter-spacing:.12em;white-space:nowrap}
  nav .btn .xl{display:none}   /* "Reserve" on a phone, so the menu button still fits */
  .burger{margin-right:-8px}
  .nav-r{gap:.4rem}
  .hero .acts .btn{padding:.9rem 1.4rem}
  .rmeta{gap:1.1rem;font-size:.74rem}
  .ft{grid-template-columns:1fr}
}

@media(max-width:380px){.wordmark,nav.stuck .wordmark{height:22px}}

/* ═══ 25. navigation reads as a cut, not a reload ═══ */
@view-transition{navigation:auto}
@keyframes vtIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vtOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
::view-transition-old(root){animation:vtOut .5s var(--ease) both}
::view-transition-new(root){animation:vtIn .55s var(--ease) both}

/* ═══ 26. anyone who asks for less motion gets a still, finished page ═══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pre{display:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .r,.wipe,.js .r{opacity:1 !important;transform:none !important}
  .js .msk,.msk{clip-path:none !important}
  .ln>i,.js .ln>i{transform:none !important}
  .hero .plate{opacity:0}.hero .plate.on{opacity:1}
  .ph img,.rph img{top:0 !important;height:100% !important;transform:none !important}
  #grain{display:none}
  .strip{height:auto}.strip-pin{position:static;height:auto;padding:4rem 0}
  .strip-track{transform:none !important;flex-wrap:wrap;width:auto}
  .film{width:100%}
  .chnum{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── Photography — gallery index grid ────────────────────────────────── */
.gwall{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.8rem)}
.gcard{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink4)}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gcard:hover img{transform:scale(1.06)}
.gcard .meta{position:absolute;inset:auto 0 0 0;padding:4rem 1.4rem 1.3rem;background:linear-gradient(180deg,transparent,rgba(20,16,12,.85))}
.gcard .place{font-family:var(--sans);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);display:block;margin-bottom:.3rem}
.gcard .ttl{font-size:1.2rem;color:var(--paper);line-height:1.25;display:block}
@media(max-width:760px){.gwall{grid-template-columns:1fr}}

/* ── Photography — individual gallery page ───────────────────────────── */
.gback{display:inline-block;margin:0 auto clamp(2rem,4vw,3rem);max-width:1180px;font-family:var(--sans);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.gback{display:block}
.gintro{max-width:760px;margin:0 auto clamp(2.5rem,5vw,3.8rem);text-align:center}
.gintro .place{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.gintro p{margin-top:1.2rem;font-size:1.08rem}
.gintro p.vendors{font-size:.92rem;color:var(--ink3);opacity:.85}
.gintro p.note{font-size:.88rem;font-style:italic;opacity:.75}
.gseq{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem)}
.gseq .row{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.6rem)}
.gseq .row.pair{grid-template-columns:1fr 1fr}
.gseq .row figure{position:relative;overflow:hidden;background:var(--ink4);margin:0}
.gseq .row.pair figure{aspect-ratio:4/5}
.gseq figure img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){
  .gseq .row.pair{grid-template-columns:1fr}
  .gseq .row.pair figure{aspect-ratio:4/3}
}

/* About — founders photo collage, same structure as mediapotion.net/about's
   Story section (one tall lead photo + two stacked beside it + a wide strip
   below), recolored to Wedding Potion's palette. The only photos we have of
   Nick & Brittany together are low-res, so they run small and together
   rather than one blown up large. */
.bts-wrap{height:100%;min-height:460px;display:flex;flex-direction:column;gap:6px}
.bts-grid{flex:1;display:grid;grid-template-columns:38% 1fr;grid-template-rows:1fr 1fr;gap:6px;background:var(--ink4)}
.bts-main{grid-column:1;grid-row:1/3;position:relative;overflow:hidden}
.bts-b{position:relative;overflow:hidden}
.bts-grid img{width:100%;height:100%;object-fit:cover;display:block}
.bts-extra{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--ink4)}
.bts-extra img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.bts-wrap{min-height:0}
  .bts-grid{grid-template-columns:1fr 1fr;aspect-ratio:4/3}
  .bts-extra{aspect-ratio:16/9}}

/* ── The Story: two-column origin layout, ported from Media Potion ──── */
/* about — "The Story": matches Media Potion's about page (photos left, story right) */
.story{padding:clamp(4.5rem,9vw,7.5rem) var(--gut);background:var(--ink)}
.story-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.story-photos{column-count:2;column-gap:6px}
.story-photos img{width:100%;height:auto;display:block;margin-bottom:6px;break-inside:avoid;border-radius:1px}
@media(max-width:480px){.story-photos{column-count:1}}
.story-lbl{display:flex;align-items:center;gap:.9rem;font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream3);margin-bottom:.9rem}
.story-lbl::before{content:'';width:28px;height:1px;background:var(--cream3);opacity:.6}
.story-text h2{font-family:var(--sans);font-weight:500;font-size:clamp(1.45rem,2.1vw,1.8rem);line-height:1.3;
  color:var(--cream);margin:0 0 .6rem;letter-spacing:0}
.story-text h2 em{display:block;font-style:italic;color:var(--gold3)}
.story-text p{font-family:var(--sans);font-size:.9rem;font-weight:400;line-height:1.75;color:var(--cream2);margin:0 0 .2rem}
.story-text p a{color:var(--gold3)}
.story-pull{font-family:var(--serif);font-style:italic;font-size:1.15rem;font-weight:400;color:var(--cream2);
  line-height:1.6;border-left:1px solid rgba(201,166,107,.3);padding:.2rem 0 .2rem 1.3rem;margin:1.8rem 0}
.story-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(238,231,219,.16);margin-top:1.8rem}
.story-stats>div{padding:1.6rem .8rem;text-align:center}
.story-stats>div+div{border-left:1px solid rgba(238,231,219,.16)}
.story-stats .n{display:block;font-family:var(--serif);font-weight:300;font-size:2.3rem;line-height:1;color:var(--cream)}
.story-stats .l{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream3)}
@media(max-width:900px){.story-inner{grid-template-columns:1fr;gap:2.5rem}}


/* Guides — long-form article content: plain lists and a numbered-tip variant
   of .steps for pages that are really just a numbered list (10 tips, 5 tips,
   10 questions, 10 venues). */
.sec.paper .prose ul{margin:1.1rem 0 1.3rem;padding-left:1.3rem}
.sec.paper .prose li{margin:.5rem 0;line-height:1.75;font-size:1.05rem}
.sec.paper .prose p+h3{margin-top:2.2rem}
.sec.paper .prose h3{font-size:1.3rem;color:var(--ink3)}
.gback-row{max-width:1180px;margin:0 auto clamp(1.5rem,3vw,2.2rem)}

.cards .card{padding-top:0;border-top:none}
.cards .card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:1.2rem}

.mp-logo{max-width:360px;width:60%;height:auto;margin:.3em auto .1em;display:block}
@media(max-width:600px){.mp-logo{width:80%;max-width:300px}}

/* --- next-guide card (bottom of guide articles) --- */
.next-guide{padding:clamp(2.5rem,6vw,4.5rem) var(--gut);background:var(--ink2)}
.ng-card{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:1.8rem;
  background:var(--ink);border:1px solid rgba(201,166,107,.16);padding:1.4rem;
  text-decoration:none;transition:border-color .3s}
.ng-card:hover{border-color:rgba(201,166,107,.45)}
.ng-card:hover .ng-img img{transform:scale(1.05)}
.ng-img{flex:0 0 150px;aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.ng-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.ng-text{min-width:0}
.ng-text .lbl{display:block;margin-bottom:.5rem}
.ng-text h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.35;
  margin:0 0 .6rem;color:var(--cream)}
.ng-text .more{margin-top:0}
@media(max-width:600px){
  .ng-card{flex-direction:column;align-items:flex-start}
  .ng-img{width:100%;flex:none;aspect-ratio:16/9}
}

/* photography pinned strip — kept last so it beats .gwall/.gseq grid rules */
@media(min-width:821px){
  .pstrip .strip-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
    justify-content:center;overflow:hidden}
  .pstrip .pstrip-track{display:flex;flex-direction:row;max-width:none;margin:0;gap:clamp(1rem,2vw,1.8rem);padding:0 var(--gut);
    width:max-content;will-change:transform}
  .pstrip .gcard{flex:0 0 auto;height:72vh;min-height:420px;width:auto;aspect-ratio:4/5}
  .pstrip .row{display:flex;flex:0 0 auto;height:72vh;min-height:420px;gap:clamp(1rem,2vw,1.6rem)}
  .pstrip .row figure{height:100%;width:auto;flex:0 0 auto;margin:0}
  .pstrip .row.pair figure{height:100%;width:auto;aspect-ratio:4/5}
  .pstrip .row figure img{height:100%;width:100%;object-fit:cover;display:block}
}

/* process page: a quiet pair of detail photos under the steps */
.detail-pair{max-width:1180px;margin:clamp(2.5rem,5vw,4rem) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.4rem)}
.detail-pair figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--ink4)}
.detail-pair img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.detail-pair{grid-template-columns:1fr}}

/* mobile: a soft scrim behind the nav on interior heroes, so a bright sky
   at the top of a photo never reads as a grey bar behind the logo */
@media(max-width:820px){
  .hero.page::before{content:'';position:absolute;left:0;right:0;top:0;height:170px;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,rgba(15,14,13,.82) 0%,rgba(15,14,13,.45) 55%,rgba(15,14,13,0) 100%)}
  .hero.page{padding-top:calc(var(--nav) + 2.2rem)}
}