/* Bawburgh Golf Club, website proposal by Albatross.
   Set in the club's brand system (brand.albatross.digital/stives): the same tokens, type, top bar, hero story,
   act openers and motion edition as the brand book, so the proposal reads as the first thing built in the brand.
   The page is complete without JavaScript: html.motion (set in the head only with GSAP and no reduced-motion
   preference) is the single switch for everything scroll-linked. */

:root{
  /* ---- CLUB TOKENS: the only block that changes per club. Every value measured, never guessed. ---- */
  --primary:#485F42;        --primary-rgb:72,95,66;       /* deep sage: the measured club green darkened to carry white text */
  --secondary:#607E58;      --secondary-rgb:96,126,88;    /* links on light grounds: the club green darkened to 4.54:1 */
  --secondary-dark:#C5D4C0; --secondary-dark-rgb:197,212,192; /* links on dark grounds: club green mixed 58% to white, 4.53:1 on Deep Sage */
  --accent:#7C7668;         --accent-rgb:124,118,104;     /* rules and hovers: the club stone darkened to 4.52:1 */
  --accent-light:#D2CFC6;   --accent-light-rgb:210,207,198; /* eyebrows on dark grounds: club stone mixed 54% to white, 4.51:1 on Deep Sage */
  --accent-pale:#C9C5BB;    --accent-pale-rgb:201,197,187;  /* the one pale ground: club stone mixed 45% to white */
  --accent-deep:#5E5949;                                  /* Proposed-tag text on light grounds */
  --stone:#F4F3F0;                                        /* alternate light ground */
  --grey:#4B4B4B;                                         /* body text */
  --ink:#1B1B1B;            --ink-rgb:27,27,27;           /* the club's measured ink, 17.22:1 on white */
  --rule:#E4E2DD;                                         /* borders and dividers */
  --white:#FFFFFF;
  --crest-a:#1B1B1B;                                      /* the marks are single-colour; measured from the artwork */
  --crest-b:#74986A;
  --crest-c:#9D9684;
  --fail:#8A2F2F;                                         /* the FAIL colour; a red, independent of the marks */

  --bg:var(--white);
  --bg-alt:var(--stone);
  --surface:var(--white);
  --surface-alt:var(--stone);
  --fg:var(--grey);
  --fg-strong:var(--ink);
  --fg-faint:#6F6F6F;
  --heading:var(--primary);
  --line:var(--rule);
  --link:var(--secondary);

  --serif-d:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --serif-t:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4vw,40px);
  --top-h:64px;
  --measure:66ch;
  --radius:16px;
  --phys:0 24px 48px -24px rgba(72,95,66,.35);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (max-width:900px){body{font-size:16px}}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
b,strong{font-weight:600;color:var(--fg-strong)}
p{margin:0 0 1rem;max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-left:1.15rem;margin:0 0 1rem}
li{margin-bottom:.45rem}
h1,h2,h3{text-wrap:balance;margin:0}
[id]{scroll-margin-top:calc(var(--top-h) + 16px)}
.wrap{max-width:1260px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:1100px}
.small{font-size:.875rem;color:var(--fg-faint)}
.standfirst{font-weight:300;font-size:clamp(1.125rem,1.4vw,1.25rem);line-height:1.55;max-width:60ch}
.thesis{font-family:var(--serif-t);font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.3;max-width:26ch;color:var(--heading);margin:0 0 2.5rem}
.h2{font-family:var(--serif-t);font-weight:700;font-size:clamp(1.625rem,2.4vw,2.125rem);line-height:1.2;color:var(--heading);margin:0 0 1.25rem;max-width:30ch}
.h3{font-family:var(--serif-t);font-weight:700;font-size:1.375rem;line-height:1.3;color:var(--heading);margin:2.75rem 0 .9rem}
.big{font-family:var(--serif-d);font-weight:400;font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.05;color:var(--heading);max-width:16ch;margin:0 0 .75rem}
.big em,.h2 em,.hero__title em{font-style:italic;color:var(--accent)}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--fg-strong);margin:0 0 1rem;max-width:none;line-height:1.5;display:block}
.eyebrow--gold{color:var(--accent-light)}
.shead{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.75rem}
.shead .eyebrow{margin:0;flex:0 1 auto;min-width:0}
.shead__leader{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.35em);min-width:2rem}
.sec--navy .shead__leader{border-color:rgba(255,255,255,.3)}
@media (max-width:640px){.shead{flex-wrap:wrap}.shead__leader{display:none}}
.tag{display:inline-block;font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;padding:.2rem .5rem;border-radius:999px;vertical-align:.12em;white-space:nowrap;margin-left:.35rem;line-height:1.3;background:rgba(var(--accent-rgb),.14);color:var(--accent-deep)}
.sec--navy .tag,.tai .tag{background:rgba(255,255,255,.14);color:#fff}
ul.tick{list-style:none;margin:1.25rem 0 0;padding:0;max-width:var(--measure)}
ul.tick li{position:relative;padding-left:1.5rem;margin:0 0 .8rem}
ul.tick li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--accent);border-radius:2px}
.sec--navy ul.tick li::before{background:var(--accent-pale)}

/* ---------- pill ---------- */
.pill{flex:none;display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--heading);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.8rem 1.3rem;line-height:1;background:var(--surface);white-space:nowrap;transition:transform .6s ease-out,border-color .2s,color .2s,background .2s}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill--solid{background:var(--primary);border-color:var(--primary);color:#fff}
.pill--solid:hover{background:var(--secondary);border-color:var(--secondary);color:#fff}
.pill.is-near{transition:transform .12s ease-out,border-color .2s,color .2s}
.sec--navy .pill,.crestobj .pill,.sources .pill{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.sec--navy .pill:hover,.crestobj .pill:hover,.sources .pill:hover{border-color:var(--accent-pale);color:var(--accent-pale)}
.pills{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ---------- top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--top-h);background:var(--bg);border-bottom:1px solid var(--line);color:var(--fg-strong);transition:background .3s,border-color .3s,color .3s}
.top__in{max-width:1260px;margin-inline:auto;padding-inline:var(--pad);height:100%;display:flex;align-items:center;gap:1.5rem}
.top__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;margin-right:auto;min-width:0}
.top__name{font-size:.8125rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.top__by{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.6;white-space:nowrap}
.top__acts{display:flex;gap:1.5rem}
.top__acts a{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:inherit;text-decoration:none;opacity:.75;padding:.25rem 0;border-bottom:1px solid transparent}
.top__acts a:hover,.top__acts a.is-active{opacity:1;border-bottom-color:currentColor}
.top--clear{background:transparent;border-color:transparent;color:#fff}
.sheet{display:none}
@media (max-width:900px){
  :root{--top-h:56px}
  .top__name,.top__by,.top__acts{display:none}
  .sheet{display:block;margin-left:auto}
  .sheet summary{list-style:none;cursor:pointer;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:.5rem .9rem;border:1px solid currentColor;border-radius:999px;position:relative;z-index:60}
  .sheet summary::-webkit-details-marker{display:none}
  .sheet__close{display:none}
  .sheet[open] .sheet__open{display:none}
  .sheet[open] .sheet__close{display:inline}
  .sheet[open] summary{color:#fff}
  .sheet__panel{position:fixed;inset:0;z-index:55;background:var(--primary);color:#fff;padding:calc(var(--top-h) + 24px) var(--pad) 40px;overflow-y:auto}
  .sheet__h{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-light);margin:1.5rem 0 .5rem;font-weight:600}
  .sheet__h:first-child{margin-top:0}
  .sheet__panel ul{list-style:none;margin:0;padding:0}
  .sheet__panel li{margin:0}
  .sheet__panel a{display:block;color:#fff;text-decoration:none;font-family:var(--serif-t);font-size:1.375rem;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
}

/* ---------- roundel: the crest sits on a Warm Stone plate ---------- */
.roundel{display:inline-block;border-radius:50%;background:var(--stone);flex:none}
.roundel img{width:100%;height:auto}
.roundel--top{width:40px;height:40px;padding:3px}
@media (max-width:900px){.roundel--top{width:32px;height:32px;padding:2px}}
.roundel--hero{width:520px;height:520px;padding:40px;position:relative;z-index:2}

/* ---- CLUB DEVIATION FROM THE TEMPLATE, Bawburgh ----
   The template's plate is a circle because St Ives has a circular crest. Bawburgh has no crest: all
   four of its marks are horizontal lockups, and a horizontal mark inside a circle renders as an
   unreadable sliver. The plate is therefore a rounded rectangle here, sized to the mark's 3.18:1
   aspect. Nothing else about the design changes. This needs a decision: either the template gains a
   horizontal-mark variant for every club, or it stays circular and crest-only clubs are the only
   ones it serves. ---- */
.roundel{border-radius:12px;display:flex;align-items:center;justify-content:center}
.roundel img{width:100%;height:auto;display:block}
.roundel--top{width:150px;height:auto;padding:5px 9px}
@media (max-width:900px){.roundel--top{width:118px;padding:4px 7px}}
.roundel--hero{width:520px;height:auto;padding:44px 40px;border-radius:22px}
.roundel--120{width:150px;height:auto;padding:14px}
.roundel--88{width:120px;height:auto;padding:11px}
.roundel--56{width:86px;height:auto;padding:8px}
.roundel--48{width:74px;height:auto;padding:7px}
@media (max-width:900px){
  .crestobj .roundel--hero{padding:26px 22px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--primary);color:#fff}
.hero__stage{position:relative;height:100vh;min-height:560px;overflow:hidden}
.hero__panel{display:flex;align-items:center;min-height:50vh;padding:clamp(3rem,8vh,6rem) clamp(20px,4.4vw,64px)}
.hero__panel--navy{background:var(--primary);color:#fff}
.hero__panel--stone{background:var(--stone);color:var(--primary)}
.hero__thesis{font-family:var(--serif-d);font-weight:400;font-size:clamp(2.75rem,8vw,8rem);line-height:.98;letter-spacing:-.01em;margin:0;max-width:11ch;color:inherit}
.hero__thesis em{font-style:italic;color:var(--accent-pale)}
.hero__panel--stone .hero__thesis em{color:var(--accent)}
.plx{position:absolute;left:0;right:0;top:-6%;height:112%;overflow:hidden;will-change:transform}
.plx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media video{z-index:1}
.hero__img{object-position:50% 60%;animation:settle 1.6s ease-out both}
@keyframes settle{from{transform:scale(1.04)}to{transform:scale(1)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--primary-rgb),.35) 0,rgba(var(--primary-rgb),0) 180px),linear-gradient(to bottom,rgba(var(--primary-rgb),0) 8vh,rgba(var(--primary-rgb),.78) 42vh,rgba(var(--primary-rgb),.95) 100%)}
.hero__text{position:absolute;left:clamp(20px,4.4vw,64px);bottom:clamp(40px,5vw,72px);right:var(--pad);text-shadow:0 1px 2px rgba(var(--primary-rgb),.95),0 1px 8px rgba(var(--primary-rgb),.9),0 2px 28px rgba(var(--primary-rgb),.75)}
.hero .eyebrow--gold{color:#fff}
.hero__title{font-family:var(--serif-d);font-weight:400;font-size:clamp(3.5rem,10vw,9.5rem);line-height:.95;letter-spacing:-.01em;color:#fff;margin:0 0 1.5rem}
.hero__title em{color:#DEDBD3}
.hero__meta{margin:0 0 2rem}
.hero__meta .mask__in{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px)}
.hero__meta-i{display:flex;flex-direction:column;gap:.15rem}
.hero__meta small{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.94)}
.hero__meta span{font-family:var(--serif-t);font-weight:700;font-size:1.0625rem;color:#fff}
.hero__cue{display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.94);text-decoration:none}
.hero__cue:hover{color:#fff}
.hero__arrow{display:inline-block;margin-left:.5rem;animation:bob 1.6s ease-in-out infinite}
.hero__cue.is-off .hero__arrow{animation-play-state:paused}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mask--w{display:inline-block;vertical-align:top}
.mask__in{display:block}
.hero__panel-in{width:100%}
@media (prefers-reduced-motion:reduce){.hero__img{animation:none}.hero__arrow{animation:none}}
@media (max-width:900px){
  .hero__stage{height:100svh}
  .hero__img{object-position:70% 50%}
  .hero__text{bottom:48px;left:var(--pad)}
  .hero__title{font-size:3.75rem}
  .hero__meta{gap:16px 28px;margin-bottom:1.5rem}
  .hero__meta span{font-size:.9375rem}
  .hero__shade{background:linear-gradient(to bottom,rgba(var(--primary-rgb),.35) 0,rgba(var(--primary-rgb),0) 140px),linear-gradient(to bottom,rgba(var(--primary-rgb),0) 6vh,rgba(var(--primary-rgb),.78) 38vh,rgba(var(--primary-rgb),.96) 100%)}
}

/* ---------- sections and grounds ---------- */
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec--tight{padding-top:clamp(2rem,4vw,3.5rem)}
.sec--white{background:var(--bg)}
.sec--stone{background:var(--bg-alt)}
.sec--navy{background:var(--primary);color:#fff}
.sec--navy p,.sec--navy li{color:rgba(255,255,255,.86)}
.sec--navy b,.sec--navy strong{color:#fff}
.sec--navy .eyebrow{color:var(--accent-light)}
.sec--navy .h2,.sec--navy .h3,.sec--navy .thesis,.sec--navy .big{color:#fff}
.sec--navy a{color:var(--secondary-dark)}
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* ---------- acts and openers ---------- */
.act{position:relative}
.opener{background:var(--bg)}
.band{position:relative;height:45vh;min-height:240px;overflow:hidden;background:var(--primary)}
.band img{object-position:50% 60%}
.act__title{font-family:var(--serif-d);font-weight:400;font-size:clamp(3.5rem,9vw,8rem);line-height:.95;color:var(--heading);padding:clamp(2.5rem,5vw,4rem) 0 clamp(1rem,2vw,1.5rem)}
.act__title span{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:1.25rem}
@media (max-width:900px){.band{height:34vh}}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- the story: thesis left, three photographs right ---------- */
.story__lead .thesis{margin:0 0 1.5rem}
.parade{display:none}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:2.5rem;max-width:none}
@media (max-width:720px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem 1.6rem;position:relative}
.card h3{font-family:var(--serif-t);font-weight:700;font-size:1.25rem;line-height:1.25;color:var(--heading);margin:0 0 .6rem}
.card p{font-size:.9375rem;max-width:none;margin:0}
.card p+p{margin-top:.7rem}
.card__tag{display:block;margin-top:1rem;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.card__n{font-family:var(--serif-d);font-size:1.75rem;color:var(--accent);line-height:1;margin-bottom:.7rem}
.card--img{padding:0;overflow:hidden}
.card--img>img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card--img>div{padding:1.25rem 1.4rem 1.4rem}
.imgtag{position:absolute;top:12px;left:12px;padding:.3rem .6rem;background:rgba(var(--primary-rgb),.88);color:#fff;font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}

/* ---------- the numbers ---------- */
.numbers{list-style:none;margin:0 0 2.5rem;padding:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--accent);border:1px solid var(--accent)}
.numbers li{margin:0;background:var(--primary);padding:clamp(1.25rem,2.5vw,2.25rem) clamp(1rem,2vw,1.75rem);min-width:0}
.numbers__n{display:block;font-family:var(--serif-d);font-size:clamp(3.5rem,7.4vw,7.5rem);line-height:1;color:var(--accent-pale);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.numbers__c{display:block;margin-top:.75rem;font-size:.9375rem;color:#fff;line-height:1.4}
@media (max-width:900px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}.numbers__n{font-size:3.5rem}}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:560px}
th{text-align:left;font-weight:600;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-faint);padding:.8rem 1.1rem;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-alt)}
td{padding:.9rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:0}
td.lbl{font-family:var(--serif-t);font-weight:700;color:var(--heading);white-space:nowrap}
td.yes{color:var(--pass);font-weight:600}
td.no{color:var(--fail);font-weight:600}
.sec--navy .tw{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.sec--navy th{background:rgba(255,255,255,.06);color:var(--accent-light);border-color:rgba(255,255,255,.16)}
.sec--navy td{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.12)}
.sec--navy td.lbl,.sec--navy td strong{color:#fff}
/* on a phone the two argument tables stack: label, today, then what Complete does */
@media (max-width:640px){
  .tw--stack table{min-width:0}
  .tw--stack thead{display:none}
  .tw--stack tr{display:block;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  .tw--stack tr:last-child{border-bottom:0}
  .tw--stack td{display:block;padding:0;border:0}
  .tw--stack td.lbl{white-space:normal;margin-bottom:.15rem;font-size:1.0625rem}
  .tw--stack td:nth-child(3){margin-top:.3rem;font-size:.9rem;color:var(--fg)}
  .tw--stack td:nth-child(3)::before{content:var(--l3,"");font-weight:600;color:var(--heading)}
}
.pill-tag{display:inline-block;margin-left:.4rem;padding:.15rem .55rem;background:rgba(var(--accent-rgb),.14);color:var(--accent-deep);font-size:.625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;vertical-align:middle;white-space:nowrap}
.sec--navy .pill-tag{background:rgba(var(--accent-light-rgb),.18);color:var(--accent-light)}

/* ---------- notes ---------- */
.note{border-left:3px solid var(--accent);background:var(--surface);padding:1.1rem 1.35rem;margin:1.5rem 0 0;max-width:var(--measure);border-radius:0 var(--radius) var(--radius) 0;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.9375rem}
.note p{margin:0}
.note code{overflow-wrap:anywhere}
.sec--navy .note{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);border-left-color:var(--accent-pale)}
.sec--navy .note strong{color:#fff}

/* ---------- photo bands ---------- */
.photo{position:relative;overflow:hidden;height:clamp(360px,64vh,680px);background:var(--primary)}
.photo--short{height:clamp(280px,44vh,460px)}
.photo__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--primary-rgb),.92) 0%,rgba(var(--primary-rgb),.5) 40%,rgba(var(--primary-rgb),.05) 100%)}
.photo__cap{position:absolute;left:0;right:0;bottom:clamp(28px,4vw,56px)}
.photo__cap p{font-family:var(--serif-d);font-size:clamp(1.75rem,3.8vw,3.25rem);line-height:1.08;color:#fff;max-width:22ch;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(var(--primary-rgb),.6);margin:0}
.photo__cap em{font-style:italic;color:var(--accent-pale)}
.photo__cap--sm p{font-size:clamp(1.375rem,2.8vw,2.25rem)}

/* ---------- the gallery: the word holds while the image behind it changes ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:1.75rem 0;max-width:none}
.gallery figure{margin:0;min-width:0;position:relative}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.gallery figcaption{padding:.65rem .1rem 0;font-size:.8125rem;color:var(--fg);line-height:1.45}
.gallery__word{display:none}
@media (max-width:640px){.gallery{grid-template-columns:1fr}}

/* ---------- before / after ---------- */
.ba{margin:0}
.ba__stage{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);background:var(--primary);box-shadow:var(--phys);user-select:none;touch-action:pan-y}
.ba__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--x,50%))}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(var(--primary-rgb),.25)}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 6px 18px -6px rgba(var(--primary-rgb),.6);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230D306F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6l-5 6 5 6M16 6l5 6-5 6'/></svg>");background-repeat:no-repeat;background-position:center}
.ba__label{position:absolute;top:14px;padding:.35rem .7rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(var(--primary-rgb),.85);color:#fff;border-radius:999px;pointer-events:none}
.ba__label--l{left:14px}.ba__label--r{right:14px}
.ba input[type=range]{width:100%;margin:.9rem 0 0;accent-color:var(--primary)}
.ba__cap{font-size:.875rem;color:var(--fg-faint);margin:.5rem 0 0;max-width:none}

/* ---------- badges ---------- */
.badges{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}
.badge{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:.875rem;color:var(--fg-strong)}
.badge img{height:40px;width:auto}

/* ---------- manifesto: Pale Gold, used once, for the three buried credentials ---------- */
.manifesto{background:var(--accent-pale);color:var(--primary);padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem)}
.manifesto .eyebrow{color:var(--primary)}
.manifesto__note{font-size:.9375rem;line-height:1.5;color:var(--primary);max-width:44ch;margin:0 0 2.5rem}
.manifesto__lines p{font-family:var(--serif-d);font-size:clamp(2.25rem,5.2vw,4.75rem);line-height:1.05;color:var(--primary);margin:0;max-width:none;letter-spacing:-.005em}
.manifesto__lines p small{display:block;font-family:var(--sans);font-size:.9375rem;letter-spacing:0;line-height:1.5;color:var(--primary);opacity:.8;margin:.35rem 0 1.4rem;max-width:60ch}
@media (max-width:900px){.manifesto__lines p{font-size:2.25rem}}

/* ---------- the crest as an object ---------- */
.crestobj{position:relative;min-height:100vh;background:var(--primary);color:#fff;overflow:hidden;display:grid;grid-template-columns:1fr;padding:calc(var(--top-h) + 24px) 0 0}
.crestobj__stage{position:absolute;inset:0;perspective:1200px}
.crestobj__light{position:absolute;left:58%;top:50%;width:1100px;height:1100px;transform:translate(calc(-50% + var(--lx,0px)),calc(-50% + var(--ly,0px)));border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-pale-rgb),.35) 0%,rgba(var(--accent-pale-rgb),0) 60%);transition:opacity .9s ease-out,transform .6s ease-out}
.crestobj__shadow{position:absolute;left:58%;top:calc(50% + 300px);width:320px;height:40px;transform:translate(-50%,0) scaleX(var(--s,1));border-radius:50%;background:rgba(var(--ink-rgb),.4);filter:blur(24px)}
.crestobj__scale{position:absolute;left:58%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%) scale(var(--s,1));z-index:2}
.crestobj .roundel--hero{display:block;transform:translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s ease-out}
.js .crestobj .roundel--hero{--lift:24px}
.js .crestobj .crestobj__light{opacity:.4}
.js .crestobj.in .roundel--hero{--lift:0px}
.js .crestobj.in .crestobj__light{opacity:1}
.crestobj.is-live .roundel--hero{transition:transform .6s ease-out}
.crestobj.is-tilting .roundel--hero,.crestobj.is-tilting .crestobj__light{transition:transform .12s ease-out,opacity .9s ease-out}
.crestobj__text{position:absolute;left:clamp(20px,4.4vw,64px);bottom:clamp(40px,5vw,64px);max-width:46ch;z-index:3}
.crestobj__text .eyebrow{color:var(--accent-light)}
.crestobj__text .big{color:#fff;max-width:15ch}
.crestobj__text .big em{color:var(--accent-pale)}
.crestobj__text p{color:rgba(255,255,255,.88)}
.crestobj__text b{color:#fff}
@media (max-width:1100px){
  .crestobj{min-height:0;display:block;padding:calc(var(--top-h) + 40px) var(--pad) 48px}
  .crestobj__stage{position:relative;height:340px;margin:0 auto 32px}
  .crestobj__light{left:50%;width:700px;height:700px}
  .crestobj__shadow{left:50%;top:auto;bottom:-10px;width:220px}
  .crestobj__scale{left:50%;width:280px;height:280px}
  .crestobj .roundel--hero{width:280px;height:280px;padding:22px}
  .crestobj__text{position:static;max-width:60ch;font-size:.9375rem}
}

/* ---------- the ten front doors ---------- */
.zoom{padding:0 0 clamp(4rem,8vw,7rem)}
.zoom__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:0}
@media (max-width:1000px){.zoom__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.zoom__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zoom__cell{min-width:0}
.tile{position:relative;border-radius:12px;overflow:hidden;background:var(--primary);aspect-ratio:4/5;box-shadow:var(--phys)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out}
.tile:hover img{transform:scale(1.04)}
.tile__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--primary-rgb),.92) 0%,rgba(var(--primary-rgb),.35) 45%,rgba(var(--primary-rgb),0) 75%)}
.tile__t{position:absolute;left:0;right:0;bottom:0;padding:.9rem;color:#fff}
.tile__t b{display:block;font-family:var(--serif-t);font-weight:700;font-size:1.0625rem;color:#fff;line-height:1.2;margin-bottom:.2rem}
.tile__t span{font-size:.75rem;line-height:1.35;color:rgba(255,255,255,.82);display:block}
.tile__tag{position:absolute;top:10px;left:10px;padding:.25rem .55rem;background:var(--accent-pale);color:var(--primary);font-size:.5625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}

/* ---------- the film ---------- */
.film{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--phys);cursor:pointer;margin-top:1.75rem}
.film img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease-out,opacity .3s}
.film:hover img{transform:scale(1.02)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film.is-playing img,.film.is-playing .film__play,.film.is-playing .film__len{opacity:0;pointer-events:none}
.film__play{position:absolute;left:50%;top:50%;width:88px;height:88px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:#fff;box-shadow:0 12px 32px -8px rgba(var(--primary-rgb),.7);cursor:pointer;transition:transform .2s ease-out,background .2s}
.film__play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--accent-pale)}
.film__play span{position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent var(--primary)}
.film__len{position:absolute;right:14px;bottom:14px;padding:.3rem .6rem;background:rgba(var(--primary-rgb),.85);color:#fff;font-family:var(--mono);font-size:.75rem;border-radius:6px}

/* ---------- the concierge ---------- */
.chat{background:var(--primary);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--phys);display:flex;flex-direction:column;gap:.7rem}
.chat__h{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--accent-light);margin:0 0 .3rem;max-width:none}
.msg{max-width:88%;padding:.7rem .95rem;border-radius:14px;font-size:.9rem;line-height:1.45;margin:0}
.msg--in{align-self:flex-start;background:rgba(255,255,255,.1);color:#fff;border-bottom-left-radius:4px}
.msg--out{align-self:flex-end;background:#fff;color:var(--ink);border-bottom-right-radius:4px}
.msg--lead{align-self:stretch;max-width:none;background:rgba(var(--accent-light-rgb),.16);color:var(--accent-pale);font-size:.8125rem;text-align:center;border-radius:8px}

/* ---------- steps ---------- */
.steps{margin-top:2rem;border-top:1px solid var(--line);max-width:none}
.step{display:grid;grid-template-columns:64px 1fr;gap:1.25rem;padding:1.35rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.step__n{font-family:var(--serif-d);font-size:2.25rem;color:var(--accent);line-height:1}
.step__t{font-family:var(--serif-t);font-weight:700;font-size:1.1875rem;color:var(--heading);margin:0 0 .3rem}
.step p{font-size:.9375rem;max-width:none;margin:0}

/* ---------- the marquee ---------- */
.tai{position:relative;background:var(--primary);color:#fff;overflow:hidden;padding:clamp(4rem,7vw,6rem) 0 clamp(3rem,5vw,4.5rem)}
.tai__eyebrow{margin:0 0 clamp(2rem,4vw,3.5rem);padding-inline:var(--pad);color:var(--accent-light)}
.tai__marquee{overflow:hidden;width:100%}
.tai__track{display:flex;align-items:center;width:max-content;will-change:transform;animation:tai-run var(--dur,80s) linear infinite}
.tai__track.is-off{animation-play-state:paused}
.tai__item{font-family:var(--serif-d);font-size:clamp(3.5rem,8.35vw,7.5rem);line-height:1;color:var(--accent-pale);letter-spacing:-.01em;white-space:nowrap;padding:0 .3em}
.tai__item.is-missing{color:rgba(255,255,255,.4);text-decoration:line-through;text-decoration-color:var(--accent-pale);text-decoration-thickness:.05em}
.tai__dup{display:contents}
.tai__sep{flex:none;width:12px;height:12px;background:var(--accent-pale)}
.tai__caption{margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding-inline:var(--pad);font-size:.8125rem;color:rgba(255,255,255,.7);max-width:none;text-align:right}
@keyframes tai-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:900px){.tai__caption{text-align:left}}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:2.5rem;max-width:none}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem 1.6rem 1.5rem;box-shadow:var(--phys);display:flex;flex-direction:column;gap:.9rem}
.tier--rec{border:2px solid var(--accent)}
.tier__badge{position:absolute;top:-12px;left:1.4rem;background:var(--accent);color:#fff;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.35rem .8rem;border-radius:999px}
.tier__name{font-family:var(--serif-t);font-weight:700;font-size:1.375rem;color:var(--heading)}
.tier__price{font-family:var(--serif-d);font-size:2.75rem;line-height:1;color:var(--heading)}
.tier__price small{font-family:var(--sans);font-size:.8125rem;color:var(--fg-faint);font-weight:400;display:block;margin-top:.35rem}
.tier__for{font-size:.9375rem;color:var(--fg);max-width:none;min-height:3.2em;margin:0}
.tier ul{list-style:none;margin:.25rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line);font-size:.9rem;max-width:none}
.tier li{display:grid;grid-template-columns:1fr auto;gap:.75rem;padding:.4rem 0;border-bottom:1px dashed var(--line);margin:0}
.tier li:last-child{border-bottom:none}
.tier li b{font-weight:600;color:var(--heading);text-align:right}

/* ---------- struck filler titles ---------- */
.struck{list-style:none;margin:.75rem 0 0;padding:0;max-width:none;line-height:2.1}
.struck li{display:inline;font-family:var(--serif-t);font-size:.9375rem;color:var(--fg-strong);padding:.2rem .5rem;margin-right:.4rem;border:1px solid var(--line);border-radius:6px;background-color:var(--surface);background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 2px;background-position:0 58%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .4s ease-out;transition-delay:var(--d,0ms)}
.js .struck.in li{background-size:100% 2px}

/* ---------- close ---------- */
.sources{background:var(--primary);color:#fff;padding:clamp(4rem,8vw,7rem) 0 0;overflow:hidden;position:relative}
.sources .eyebrow{color:var(--accent-light)}
.close__mark{font-family:var(--serif-d);font-size:clamp(2.5rem,6vw,5.5rem);line-height:1;color:#fff;letter-spacing:-.01em;margin:0 0 2.5rem;max-width:14ch;text-wrap:balance}
.close__mark em{font-style:italic;color:var(--accent-pale)}
.close__card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem 1.75rem;max-width:560px}
.close__name{font-family:var(--serif-t);font-weight:700;font-size:1.375rem;color:#fff}
.close__role{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);font-weight:600;margin:.2rem 0 .9rem}
.close__links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.9375rem}
.close__links a{color:rgba(255,255,255,.88);text-decoration:none;border-bottom:1px solid rgba(217,183,100,.5)}
.close__foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.875rem;color:rgba(255,255,255,.6)}
.close__foot p{margin:0;max-width:none;color:inherit}
.sources .sources__name{font-family:var(--serif-d);font-size:clamp(3rem,9vw,9rem);line-height:1;white-space:nowrap;color:#fff;margin:3rem 0 0;max-width:none;padding:0 var(--pad) clamp(48px,5vw,72px);letter-spacing:-.01em}
@media (max-width:900px){.sources .sources__name{font-size:15vw;white-space:normal;text-wrap:balance;line-height:1.02;padding-bottom:48px}}

/* ---------- motion edition: html.motion is set only with JavaScript, GSAP and no reduced-motion preference ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
html.motion main{overflow-x:clip}
html.motion .hero{height:300vh;height:300svh;min-height:1680px;overflow:visible}
html.motion .hero__stage{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;min-height:560px;z-index:2;background:var(--primary)}
html.motion .hero__sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;z-index:1}
html.motion .hero__panel{position:absolute;inset:0;min-height:0}
html.motion .hero__panel--stone{transform:translateX(100%);will-change:transform;padding:0;overflow:hidden}
html.motion .hero__thesis{font-size:clamp(2.75rem,10.5vw,10.5rem);line-height:.95;max-width:none}
html.motion .hero__panel--stone .hero__panel-in{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(3rem,8vh,6rem) clamp(20px,4.4vw,64px);transform:translateX(-100%);will-change:transform}
html.motion .hero__img{animation:none}
html.motion .top--clear.top--ink{color:var(--primary)}
html.motion:not(.hero-in) .hero__media{transform:scale(.36);opacity:.4;border-radius:40px;will-change:transform,opacity}
html.motion:not(.hero-in) .hero__shade{opacity:0}
html.motion:not(.hero-in) .mask__in{transform:translateY(110%)}
html.motion:not(.hero-in) .top__in{opacity:0}
html.motion:not(.hero-landed) .roundel--top{opacity:0}
.stinger{display:none}
html.motion:not(.hero-landed) .stinger{--r:176px;--m:152px;position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--primary);pointer-events:none}
.stinger__dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent-pale);transform:scale(0)}
.stinger__group{position:absolute;width:var(--r);height:var(--r);display:grid;place-items:center;transform-origin:center;will-change:transform}
.stinger__ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-pale);opacity:0;transform:scale(.6)}
.stinger__mark{width:var(--m);height:var(--m);padding:calc(var(--m) * .077);opacity:0;transform:scale(.8)}
@media (max-width:900px){html.motion:not(.hero-landed) .stinger{--r:128px;--m:110px}}
/* ---- CLUB DEVIATION FROM THE TEMPLATE, Bawburgh, part 2: the stinger ----
   The template opens a gold point into a CIRCLE because St Ives's crest is one. Bawburgh's logos are all
   horizontal, so the ring is the plate's own rounded rectangle instead. The chrome carries the Bawburgh
   Golf Club logo, 770 x 211. The plate's aspect is derived, not guessed: 211/770 on the artwork, plus this
   block's own padding, gives height = width x .30775,
   so the group is width / 2.913. The radii are set as a fraction of the width (.08 = the top bar's 12px
   on its 150px plate), so the shape the stinger lands on is the shape the bar already draws. hero.js is
   unchanged: its travel maths is width-based, and ring and plate share one aspect. ---- */
html.motion:not(.hero-landed) .stinger{--r:316px;--m:272px}
/* the point carries the plate's aspect too, so hero.js's uniform scale(--r/8) opens it into exactly the
   ring's box. A circular bloom behind a rectangular ring reads as two different shapes. */
.stinger__dot{width:8px;height:calc(8px * .30775);border-radius:.64px}
.stinger__group{height:calc(var(--r) * .30775)}
.stinger__ring{border-radius:calc(var(--r) * .08)}
.stinger__mark{width:var(--m);height:auto;padding:calc(var(--m) * .0333) calc(var(--m) * .06);border-radius:calc(var(--m) * .08)}
@media (max-width:900px){html.motion:not(.hero-landed) .stinger{--r:220px;--m:190px}}

/* ---- CLUB DEVIATION, Bawburgh, part 3: the draft line under the hero title. James asked for the draft status
   to be unmissable, so it sits in the hero itself, as a masked line that rises with the others. ---- */
.hero__note{font-family:var(--sans);font-weight:400;font-size:clamp(.9375rem,1.1vw,1.0625rem);letter-spacing:.01em;color:#fff;margin:0 0 1.25rem;max-width:44ch}
.hero__note .mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero__note .mask__in{display:inline-block}

/* the scroll-scaled mark: the template's wrapper is a 520px square around a square crest. Here it wraps
   a lockup, so it takes the lockup's own height and the mark fills its width. */
.crestobj__scale{height:auto}
.crestobj__scale .roundel--hero{position:static;width:100%}
/* the contact shadow sits 40px under the plate. The template's +300px is half of a 520px SQUARE crest plus
   that clearance; this plate is 520 x 178, so half of it is 89px and the shadow lands at +130. Left at +300
   it floats 200px below the mark with nothing between. */
.crestobj__shadow{top:calc(50% + 130px)}
@media (max-width:900px){
  .crestobj__scale{left:50%;width:300px}
  .crestobj__shadow{top:calc(50% + 72px);bottom:auto}
}
html.motion .opener{position:relative;height:100vh;overflow:hidden;background:var(--bg)}
html.motion .opener .band{position:absolute;inset:0;height:auto;min-height:0}
html.motion .opener__panel{position:absolute;inset:0;display:flex;align-items:center;background:var(--primary);transform:translateY(100%);will-change:transform}
html.motion .opener__panel .wrap{width:100%}
html.motion .opener__panel .act__title{color:#fff;padding:0}
html.motion .opener__panel .act__title span{color:var(--accent-light)}
html.motion .opener--stone .opener__panel{background:var(--stone)}
html.motion .opener--stone .opener__panel .act__title{color:var(--primary)}
html.motion .opener--stone .opener__panel .act__title span{color:var(--accent)}
html.motion .story__stage{height:100vh;padding-top:calc(var(--top-h) + 16px);display:flex;align-items:center;overflow:hidden}
html.motion .story__cols{width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 60px;align-items:center}
html.motion .story__lead .thesis{margin:0 0 1.25rem}
html.motion .parade{display:block;position:relative;height:min(68vh,640px);overflow:hidden}
html.motion .parade figure{position:absolute;inset:0;margin:0;border-radius:var(--radius);overflow:hidden;will-change:transform,clip-path}
html.motion .parade img{width:100%;height:100%;object-fit:cover}
html.motion #numbers{min-height:100vh;display:flex;align-items:center}
html.motion #numbers .wrap{width:100%}
html.motion .crestobj .roundel--hero{--lift:0px}
html.motion .crestobj__light{transition:transform .6s ease-out}
html.motion .crestobj,html.motion .manifesto{overflow-x:clip}
html.motion .zoom{height:100vh;padding:calc(var(--top-h) + 16px) 0 24px;overflow:hidden}
html.motion .zoom__stage{position:relative;height:100%}
html.motion .zoom__grid{height:100%;margin:0;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
html.motion .zoom__cell{position:relative;min-width:0;min-height:0;will-change:transform}
html.motion .zoom__cell--lead{z-index:2}
html.motion .zoom .tile{height:100%;aspect-ratio:auto}
html.motion .tai{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
html.motion .tai__track{animation:none;will-change:transform}
html.motion .tai__dup{display:none}
html.motion .gallery-wrap{height:100vh;padding-top:calc(var(--top-h) + 16px);padding-bottom:24px;display:flex;flex-direction:column}
html.motion .gallery-wrap .wrap{width:100%}
html.motion .gallery-wrap .gallery__head{flex:none}
html.motion .gallery{display:block;position:relative;flex:1;min-height:0;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--primary)}
html.motion .gallery figure{position:absolute;inset:0;will-change:clip-path}
html.motion .gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--primary-rgb),.74) 0,rgba(var(--primary-rgb),0) 55%)}
html.motion .gallery img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}
html.motion .gallery__word{display:block;position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(72px,10vh,110px);z-index:2;font-family:var(--serif-d);font-size:clamp(3rem,8vw,8rem);line-height:.95;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(var(--primary-rgb),.6);will-change:opacity;margin:0}
html.motion .gallery figcaption{position:absolute;left:clamp(20px,4vw,48px);right:clamp(20px,4vw,48px);bottom:clamp(20px,3vh,32px);z-index:2;padding:0;color:#fff;max-width:60ch;will-change:opacity;font-size:.9375rem}
html.motion .manifesto__lines p{will-change:transform}
html.motion .sources__name{will-change:transform}
html.motion .pair>*,html.motion .drop>*,html.motion .rows tbody tr,html.motion .rows .step{will-change:transform,opacity,clip-path}
@media (max-width:900px){
  html.motion .opener,html.motion .story__stage,html.motion .zoom,html.motion .gallery-wrap{height:100svh}
  html.motion .story__cols{grid-template-columns:1fr;align-content:center;gap:1.25rem}
  html.motion .parade{height:40svh}
  html.motion .zoom__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:10px}
  html.motion .zoom .tile__t span{display:none}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .crestobj .roundel--hero{--lift:0px;--rx:0deg;--ry:0deg}
  .js .crestobj .crestobj__light{opacity:1;--lx:0px;--ly:0px}
  .plx{transform:none!important}
  .pill{transform:none!important}
  .js .struck li{background-size:100% 2px}
  .tai__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;row-gap:.7em;padding-inline:var(--pad)}
  .tai__item{font-size:clamp(1.5rem,4vw,3rem);line-height:1.2}
  .tai__dup{display:none}
}

@media print{
  .top,.hero__cue,.stinger{display:none}
  .hero__stage{height:auto;min-height:0}
  .hero__text{position:static;color:var(--primary)}
  .js .rv{opacity:1;transform:none}
  .tai__track{animation:none;width:100%;flex-wrap:wrap}
  .tai__dup{display:none}
}

/* the four logos, side by side, wherever the page says "four logos" */
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:1.25rem 0 0}
.logos__i{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.logos__plate{background:var(--stone);display:grid;place-items:center;height:150px;padding:1.25rem;box-sizing:border-box}
.logos__plate img{max-width:100%;max-height:110px;width:auto;height:auto;object-fit:contain}
.logos figcaption{padding:.8rem .9rem;font-size:.8125rem;line-height:1.45;color:var(--fg)}
.logos figcaption b{display:block;font-family:var(--serif-t);font-weight:700;color:var(--heading);font-size:.95rem;margin-bottom:.15rem}
@media (max-width:760px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}.logos__plate{height:120px}.logos__plate img{max-height:80px}}

/* a stacked table on a dark ground: the row label was set in the heading colour, invisible on sage */
@media (max-width:640px){
  .sec--navy .tw--stack td:nth-child(3){color:#fff}
  .sec--navy .tw--stack td:nth-child(3)::before{color:var(--accent-pale);margin-right:.35em}
  .sec--navy .tw--stack td:nth-child(2){color:rgba(255,255,255,.8)}
}