/* La Vita Nova · galerie system · two families only.
   Cormorant does every heading and price. Hanken Grotesk does body text AND every
   label, button, nav item and caption, set in caps at wide tracking. There is no
   third display face doing a caption's job. Tinos is the wordmark only.

   Type is on a locked ladder. Every size and every tracking value in this file
   comes from the tokens below, and nothing new gets added to either list.
   If a thing needs a size that is not here, it is the wrong size. */

:root{
  --paper:#F0EEE7; --paper2:#E7E4DA; --deep:#E4DFCE; --ink:#1e1d18; --ink2:#5a5750; --muted:#615e50;
  --line:#D6D2C6; --hair:#E1DDD2; --accent:#1e1d18; --pad:54px;
  --sans:'Hanken Grotesk',system-ui,sans-serif; --mono:'Hanken Grotesk',system-ui,sans-serif;
  --disp:'Cormorant','Hanken Grotesk',serif;
  --logo:'Tinos','Times New Roman',Times,serif;

  /* TYPE SCALE — locked. Nothing outside this ladder. */
  --t-label:11px;     /* mono uppercase labels, tags, badges, captions */
  --t-meta:12.5px;    /* mono meta and fine print */
  --t-small:14px;     /* secondary body, list descriptions */
  --t-body:16px;      /* body copy */
  --t-lead:18px;      /* intros, prose, leads */
  --t-title:21px;     /* card titles */
  --t-title-lg:25px;  /* larger card titles and feature prices */
  --t-num:30px;       /* stat figures and tier prices */
  --t-num-lg:46px;    /* headline prices and decorative marks */
  --t-d1:clamp(42px,5.6vw,86px);   /* page and hero titles */
  --t-d2:clamp(34px,4.4vw,60px);   /* lead section headings */
  --t-d3:clamp(27px,3.4vw,46px);   /* section headings, index rows */
  --t-d4:clamp(22px,2.6vw,31px);   /* small display, event titles */
  --t-d1-m:clamp(42px,10vw,60px);  /* phone: page and hero titles */
  --t-d3-m:clamp(27px,8.6vw,42px); /* phone: index rows */
  --t-nav:clamp(30px,9vw,44px);    /* the menu overlay */
  /* TRACKING — five values, no more. */
  --ls-label:0.14em;  /* uppercase mono labels */
  --ls-wide:0.1em;    /* uppercase meta in tight rows */
  --ls-caps:0.02em;   /* uppercase display headings */
  --ls-flat:0;        /* everything set in sentence case */
  --ls-tight:-.018em; /* large display, to close the gaps up */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px}
/* clip, not hidden: a full bleed band can measure a hair wider than the page
   once a scrollbar is counted, and clip swallows that without turning the
   page into a scroll container or breaking anything sticky */
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1300px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.hair{height:1px;background:var(--line)}

/* media plate · neutral B&W editorial feel */
.plate{position:relative;overflow:hidden;display:block;background:
  radial-gradient(120% 90% at 25% 12%, rgba(250,248,242,.7), transparent 55%),
  linear-gradient(158deg,#EBE5D7 0%,#DED7C6 60%,#D0C8B5 100%)}
.plate.dk{background:radial-gradient(120% 90% at 70% 15%, rgba(120,114,98,.32), transparent 55%),linear-gradient(158deg,#33302a 0%,#201e18 100%)}
.plate::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/filter%3E%3C/svg%3E")}
.plate .fig{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.plate.dk .fig{color:#a49c88}
.plate .cap{position:absolute;bottom:12px;left:12px;z-index:3;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
.plate.dk .cap{color:#cfc9ba}
.plate .play{position:absolute;inset:0;margin:auto;width:0;height:0;border-left:18px solid rgba(255,255,255,.9);border-top:11px solid transparent;border-bottom:11px solid transparent;z-index:3}
/* real photo fills the plate; noise + placeholder label drop away */
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.plate>picture{position:absolute;inset:0;z-index:1;display:block}
.plate>picture>img{width:100%;height:100%;object-fit:cover;display:block}
.plate:has(img)::after{opacity:0}
.plate:has(img) .fig{display:none}
.plate .ihouse{position:absolute;left:12px;top:12px;z-index:4;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 10px;border-radius:2px}
.plate:has(img) .cap{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);z-index:3}
.plate:has(img) .play{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
/* film · video runs the full width the way the homepage hero does, so it reads
   as a film and not as one more photo in the run of contained plates */
.film{background:var(--ink);position:relative;display:block;padding:0}
.film-in{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.film-in>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.snd{position:absolute;right:var(--pad);bottom:18px;z-index:3;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#fff;background:rgba(20,19,15,.4);border:1px solid rgba(255,255,255,.34);border-radius:2px;padding:7px 12px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease}
.snd:hover{background:rgba(20,19,15,.78);border-color:rgba(255,255,255,.6)}
.snd:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}
@media(max-width:700px){.snd{right:14px;bottom:14px;font-size:var(--t-label);padding:6px 10px}}
/* monogram mark · used where there is no photo yet (team tiles) */
.plate .mono-mark{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font-family:var(--logo);font-weight:400;font-size:var(--t-num);letter-spacing:var(--ls-caps);color:var(--ink2)}
.plate.dk .mono-mark{color:#b7b0a0}

/* header */
header{padding-top:26px}
.bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px}
.wm{font-family:var(--sans);font-weight:500;font-size:var(--t-body);letter-spacing:var(--ls-label);text-transform:uppercase}
/* real logo mark */
.bar .wm img{height:16px;width:auto;display:block}
.fwm img{height:22px;width:auto;display:block;margin-bottom:16px}
.navmenu .nm-top .wm img{height:15px;width:auto;display:block}
@media(max-width:860px){.bar .wm img{height:20px}}
nav.links{display:flex;gap:26px;align-items:center}
nav.links a{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase}
nav.links a:not(.hbook){color:var(--ink2)}
nav.links a:not(.hbook):hover,nav.links a:not(.hbook).on{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.metarow{display:flex;justify-content:space-between;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:9px 0}
.metarow span{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
/* the hamburger is built from these links, so an entry can live here for the
   mobile menu without crowding a top bar that is already full at five */
nav.links a.mob{display:none}
.burger{display:none;font-family:var(--mono);font-weight:400;font-size:var(--t-label);text-transform:uppercase;background:none;border:0;cursor:pointer;color:var(--ink)}

/* buttons · one filled primary, and the second choice is a quiet label rather than a second box */
/* Buttons carry the whole checkout, so they get their own size rather than
   the 11px label token: 12.5px with tighter tracking is legible at a glance
   without shouting, and 48px of height clears the touch target on a phone. */
/* Buttons carry the whole checkout, so they get their own size rather than
   the 11px label token: 12.5px with tighter tracking is legible at a glance
   without shouting, and 48px of height clears the touch target on a phone. */
.btn{position:relative;font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:16px 30px;min-height:48px;border:1px solid var(--ink);
  display:inline-flex;gap:10px;align-items:center;justify-content:center;
  transition:.18s;background:none;color:var(--ink);cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
/* the filled button had almost no hover, which reads as a dead control. It now
   lightens off pure ink so the state change is visible without a colour shift */
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{background:#332f28;border-color:#332f28}
.link{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;display:inline-flex;gap:8px}
.link:hover{color:var(--muted);border-color:var(--muted)}

/* a row of actions under a block · they sit on one baseline with real air
   between them, and stack on a phone rather than crowding each other */
.acts-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:30px}
@media(max-width:820px){.acts-row{flex-direction:column;align-items:flex-start;gap:22px}}

/* hero (home) */
.hero{padding:82px 0 64px}
.hero .kick{margin-bottom:34px;display:block}
.hero h1{font-family:var(--sans);font-weight:300;font-size:var(--t-d1);line-height:1.02;letter-spacing:var(--ls-tight);text-transform:uppercase;max-width:16ch}
.hero h1 b{font-weight:300}
.hero-b{display:flex;justify-content:space-between;align-items:flex-end;margin-top:42px;gap:40px}
.hero .lede{font-size:var(--t-lead);color:var(--ink2);max-width:44ch;line-height:1.55}
.hero .cue{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.heroimg{aspect-ratio:2/1;margin-bottom:8px}
.herostatus{text-align:right}

/* page header (interior) */
/* interior page header · Option B split masthead */
.phead{padding:72px 0 0}
.ph-top{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:end;border-bottom:1px solid var(--ink);padding-bottom:26px}
.phead .kick{display:block;margin-bottom:18px}
.phead h1{font-weight:400;line-height:1;text-transform:uppercase}
.phead h1 b{font-weight:400;font-style:normal;color:inherit}
.phead .intro{grid-column:2;font-size:var(--t-lead);color:var(--ink2);max-width:40ch;margin:0 0 6px 0;line-height:1.55}
/* interior page hero image · taller, more presence (esp. mobile) */
.phead-photo{aspect-ratio:4/3;display:block;margin-top:40px}
@media(max-width:700px){.phead-photo{aspect-ratio:4/5;margin-top:26px}}
/* article / story hero images · taller on phone so photos aren't over-cropped */
.jhero-p{aspect-ratio:4/3;display:block;margin-bottom:8px}
.jhero-l{aspect-ratio:16/9;display:block;margin-bottom:8px}
@media(max-width:700px){.jhero-p{aspect-ratio:4/5}.jhero-l{aspect-ratio:3/2}}

/* section head · the change of background is the divider, so the head stays quiet */
.shead{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:baseline;margin-bottom:8px}
.shead h2{font-family:var(--sans);font-weight:500;font-size:var(--t-small);letter-spacing:var(--ls-label);text-transform:uppercase}
.shead .r{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);text-align:right}
@media(max-width:640px){
  .shead{grid-template-columns:1fr;gap:14px}
  .shead .r{grid-column:1 / -1;text-align:left;margin-top:4px}
}
/* a hairline under the head, only where the section below is a list, a grid or a form
   and genuinely wants a top edge · never as the default */
.shead--rule{padding-bottom:16px;border-bottom:1px solid var(--line)}
.band .shead--rule{margin-bottom:32px}
.band--deep .shead--rule{border-bottom-color:#CEC8B4}
.band--paper2 .shead--rule{border-bottom-color:#D2CDBE}
.band--ink .shead--rule{border-bottom-color:#3b372e}

/* one section a page can open loud · everything else stays quiet around it */
.shead--lead{display:block}
.shead--lead h2{font-family:var(--disp);font-weight:500;font-size:var(--t-d2);line-height:1.02;letter-spacing:var(--ls-tight);text-transform:none}
.shead--lead .r{display:block;text-align:left;margin-top:16px}
section{padding:70px 0}

/* the index (ecosystem spine) */
.index a{display:grid;grid-template-columns:1fr clamp(190px,21vw,270px) 160px;gap:30px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .25s}
.index a:hover{padding-left:14px}
.index .no{font-family:var(--mono);font-weight:400;font-size:var(--t-meta);color:var(--muted)}
.index .t{font-family:var(--sans);font-weight:500;font-size:var(--t-d3);line-height:1;letter-spacing:var(--ls-tight);text-transform:uppercase}
.index .d{font-family:var(--sans);font-weight:400;font-size:var(--t-small);line-height:1.45;color:var(--ink2);text-align:right}
.index .go{font-family:var(--mono);font-weight:400;font-size:var(--t-meta);color:var(--muted);text-align:right;transition:transform .25s,color .25s}
.index a:hover .go{transform:translateX(6px);color:var(--ink)}
.index a:hover .t{color:#000}

/* EVENTS list · clean & easy */
.ev-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ev-filters button{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);background:none;color:var(--ink2);cursor:pointer;transition:.15s}
.ev-filters button:hover{border-color:var(--ink);color:var(--ink)}
.ev-filters button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ev-month{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);padding:26px 0 6px;border-bottom:1px solid var(--ink)}
.ev-row{display:grid;grid-template-columns:96px 92px minmax(0,1fr) 150px minmax(156px,max-content);gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .2s;color:inherit;text-decoration:none}
.ev-row:hover{padding-left:12px}
.ev-thumb{aspect-ratio:4/3;overflow:hidden;background:#e7e3d7;border:1px solid var(--line)}
.ev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ev-row:hover .ev-thumb img{transform:scale(1.05)}
.ev-main .t,.ev-main .m{display:block}
.ev-date{font-family:var(--mono);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);line-height:1.5}
.ev-date b{display:block;font-family:var(--sans);font-weight:600;font-size:var(--t-title-lg);letter-spacing:var(--ls-tight);margin-top:2px}
.ev-main .t{font-family:var(--sans);font-weight:500;font-size:var(--t-d4);line-height:1.12;letter-spacing:var(--ls-flat)}
.ev-main .m{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-top:8px}
.ev-tag{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);padding:5px 9px;justify-self:start;white-space:nowrap}
.ev-book{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;text-align:right;white-space:nowrap;display:inline-flex;gap:8px;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--ink);padding-bottom:3px;justify-self:end}
.ev-book:hover{color:var(--muted);border-color:var(--muted)}

/* a row with somewhere to book as well as somewhere to read. The row is a div,
   not a link, so the two destinations can sit inside it; .ev-hit restores the
   whole-row click for the details page underneath */
.ev-row--two{position:relative}
.ev-hit{position:absolute;inset:0;z-index:1;border:0}
.ev-acts{position:relative;z-index:2;justify-self:end;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ev-go{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--ink);color:var(--paper);padding:9px 13px;white-space:nowrap;transition:background .2s,transform .2s}
.ev-go:hover{background:var(--ink2);transform:translateX(3px)}
.ev-see{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ev-row--two:hover .ev-see{color:var(--ink)}

/* the same idea on a card: the card reads, the button books */
.ev-card--two{position:relative}
.ev-card--two .ev-hit{z-index:4}
.ev-card--two .m .d,.ev-card--two .m .soldflag{z-index:3}
.cbook{position:relative;z-index:5;margin-top:14px;display:block;text-align:center;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--ink);color:var(--paper);padding:12px 14px;transition:background .2s}
.cbook:hover{background:var(--ink2)}

/* feature blocks */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Where the text column is taller than the square plate, centring leaves the
   image floating with the section rule above it. Top-align those instead. */
.feat.feat--top{align-items:start}
.feat + .feat{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.feat .plate{aspect-ratio:1/1}
.feat .lbl{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.feat h3{font-family:var(--sans);font-weight:500;font-size:var(--t-d3);line-height:1.06;letter-spacing:var(--ls-tight);text-transform:uppercase;margin-bottom:12px}
.feat .meta{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.feat p{font-size:var(--t-body);color:var(--ink2);max-width:42ch;margin-bottom:22px}

/* two-col / prose */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.prose p{font-size:var(--t-lead);color:var(--ink2);margin-bottom:18px;line-height:1.6}
.prose p.big{font-family:var(--sans);font-weight:300;font-size:var(--t-d3);color:var(--ink);text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:1.1;margin-bottom:20px}
/* readable checklist (was mono-uppercase, hard to scan) */
.stack-lbl{list-style:none;padding:0;margin:0}
.stack-lbl li{font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.5;color:var(--ink2);padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--hair)}
.stack-lbl li:last-child{border-bottom:0}
.stack-lbl li::before{content:"";position:absolute;left:2px;top:20px;width:8px;height:1px;background:var(--ink)}
/* plain sentence-case variant when not a list */
.note{font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.6;color:var(--ink2);max-width:52ch}

/* specs */
.specs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.specs div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px}
.specs .k{font-family:var(--sans);font-weight:500;font-size:var(--t-num);line-height:1;letter-spacing:var(--ls-tight)}
.specs .l{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-top:8px}
.specline{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:34px;padding-top:22px;border-top:1px solid var(--ink);font-family:var(--mono);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
.specline span:not(:last-child)::after{content:"·";margin:0 16px;color:var(--muted)}
/* the five rooms */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rooms .room{background:var(--paper);padding:26px 24px 24px;text-decoration:none;color:inherit;display:block}
.rooms .rn{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.rooms .room h3{font-family:var(--sans);font-weight:500;font-size:var(--t-lead);text-transform:uppercase;letter-spacing:var(--ls-caps);margin:10px 0 8px}
.rooms .room p{font-size:var(--t-small);color:var(--ink2);line-height:1.5;margin:0}
.rooms .rd{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);color:var(--muted);margin-top:16px}
.rooms .room--all{background:var(--ink);color:var(--paper)}
.rooms .room--all .rn{color:#a49c88}.rooms .room--all h3{color:#fff}.rooms .room--all p{color:#cfc9ba}
.rooms .room--all .rd{color:#e7e2d5}
.rooms a.room{transition:transform .3s ease}
.rooms a.room:hover{transform:translateY(-3px)}
/* pricing tiers */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier{border:1px solid var(--line);background:var(--paper);padding:24px 22px;display:flex;flex-direction:column}
.tier .tl{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
.tier .tp{font-family:var(--disp);font-weight:600;font-size:var(--t-num);margin:12px 0 10px;line-height:1;letter-spacing:var(--ls-tight)}
.tier .tp span{font-family:var(--mono);font-size:var(--t-meta);font-weight:400;color:var(--muted);letter-spacing:var(--ls-label)}
.tier p{font-size:var(--t-small);color:var(--ink2);line-height:1.5;margin:0}
.tier--enq{background:var(--ink)}
.tier--enq .tl{color:#cfc9ba}.tier--enq .tp{color:#fff}.tier--enq p{color:#cfc9ba}
.tiers--three{grid-template-columns:repeat(3,1fr)}
/* Each tier books itself, so there is no working out which one you clicked. */
.tier .tgo{margin-top:auto;padding-top:16px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);border-bottom:0}
.tier .tgo span{border-bottom:1px solid var(--ink);padding-bottom:2px;transition:opacity .18s}
.tier .tgo:hover span{opacity:.55}
/* Session tiers · the price leads, then what you get one line at a time with a
   hairline between each, then the button that books that exact session. Read
   down a card and you have the whole answer without a run on sentence. */
.tiers--sessions{gap:0}
.tiers--sessions .tier{padding:28px 26px 26px;border-left-width:0}
.tiers--sessions .tier:first-child{border-left-width:1px}
.tiers--sessions .tier .tp{font-size:var(--t-num-lg);font-weight:500;margin:16px 0 20px}
.tiers--sessions .tier ul{list-style:none;margin:0 0 24px;padding:0}
.tiers--sessions .tier li{font-size:var(--t-small);color:var(--ink2);line-height:1.5;padding:11px 0;border-top:1px solid var(--hair)}
/* the first item used to lose its rule, which left the description and the
   first inclusion running together while every other item was separated */
.tiers--sessions .tier li:first-child{border-top:1px solid var(--hair);padding-top:11px}
.tiers--sessions .td{margin-bottom:16px}
.tiers--sessions .tier .btn{margin-top:auto;align-self:flex-start}
@media(max-width:1040px){.tiers,.tiers--three{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.rooms{grid-template-columns:1fr 1fr}.tiers{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rooms,.tiers{grid-template-columns:1fr}}
@media(max-width:1040px){
  .tiers--sessions .tier{border-left-width:1px;border-top-width:0}
  .tiers--sessions .tier:nth-child(-n+2){border-top-width:1px}
  .tiers--sessions .tier:nth-child(2n){border-left-width:0}
}
/* Stacked, the joined panel stops working: one card's Book button ends up a
   few pixels from the next card's price, and the Most booked flag lands on the
   seam between them. Below the two up breakpoint they separate into their own
   cards again, each fully bordered, with real air in between. */
@media(max-width:1040px){
  .tiers--sessions{gap:16px}
  .tiers--sessions .tier,
  .tiers--sessions .tier:first-child,
  .tiers--sessions .tier:nth-child(-n+2),
  .tiers--sessions .tier:nth-child(2n){border-width:1px}
}
@media(max-width:520px){
  .tiers--sessions{gap:22px}
  .tiers--sessions .tier{padding:30px 24px 28px}
  /* the flag needs the gap above it to sit in, so it clears the card before */
  .tier--pick .pick{top:-13px;left:20px}
}
@media(max-width:520px){
  .tiers--sessions .tier{border-width:1px}
}

/* gallery grid */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery .plate{aspect-ratio:4/5}
/* the wide plate stretches to the row instead of holding 16/9, so its bottom
   edge lines up with the portrait beside it */
.gallery .plate.wide{grid-column:span 2;aspect-ratio:auto;align-self:stretch;margin-top:0}
/* three-photo gallery · a wide lead over a pair, landscape crops kept kind */
.shootwall{column-count:3;column-gap:14px;margin:8px 0 0}
.shootwall a{display:block;break-inside:avoid;margin:0 0 14px;overflow:hidden;border:1px solid var(--line)}
.shootwall a img{width:100%;display:block;transition:transform .5s ease}
.shootwall a:hover img{transform:scale(1.04)}
@media(max-width:700px){.shootwall{column-count:2;column-gap:12px}.shootwall a{margin-bottom:12px}}
/* Folio · hung like a wall. One large frame in the centre with four half scale
   frames flanking it, then a closing row of three. Every frame holds the 4:5
   the photographs were delivered in, so none of the work is cropped away. */
.folio,.folio-r2{display:grid;gap:2px}
.folio{grid-template-columns:1fr 2fr 1fr;margin-top:8px}
.folio-r2{grid-template-columns:repeat(3,1fr);margin-top:2px}
.folio .stack{display:grid;gap:2px;min-height:0}
.folio a,.folio-r2 a{display:block;overflow:hidden;min-height:0;background:var(--line)}
.folio .stack a,.folio-r2 a{aspect-ratio:4/5}
/* The hero takes its height from the stacks beside it so the three columns
   line up exactly, top and bottom. Its image is taken out of flow so it adds
   no height of its own and the row can only be as tall as the stacks. */
.folio .hero{position:relative;height:100%}
.folio .hero img{position:absolute;inset:0}
.folio img,.folio-r2 img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block;transition:transform .8s ease}
.folio a:hover img,.folio-r2 a:hover img{transform:scale(1.03)}
@media(max-width:700px){
  /* On a phone the wall unstacks into a single column, so every frame is read
     at full width the way it was shot. The big frame still leads. */
  .folio,.folio-r2{grid-template-columns:1fr;gap:6px}
  .folio{margin-top:6px}
  .folio-r2{margin-top:6px}
  .folio .hero{order:-1;aspect-ratio:4/5;height:auto}
  .folio .stack{display:contents}
  .folio .stack a,.folio-r2 a{aspect-ratio:4/5}
}
/* Piano Room feature · portrait crop centred on the pianist */
#piano .plate{aspect-ratio:5/4}
#piano .plate img{object-position:center 45%}
/* The space hero · lift the frame so the harp & branding sit higher */
.phead-photo.space-hero img{object-position:center 54%}

/* steps · enclosed cards with a numbered badge */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps > div{counter-increment:step;position:relative;border:1px solid var(--ink);background:rgba(255,255,255,.34);padding:30px 30px 34px;transition:transform .22s,box-shadow .22s}
.steps > div:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,29,24,.10)}
.steps > div::before{content:counter(step,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);color:var(--ink);margin-bottom:22px}
.steps .s{font-family:var(--sans);font-weight:500;font-size:var(--t-title-lg);text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:1;margin:0 0 6px}
.steps .n{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.steps p{font-size:var(--t-body);color:var(--ink2);line-height:1.55}
/* on dark bands */
.band--ink .steps > div{border-color:rgba(240,238,231,.5);background:rgba(255,255,255,.05)}
.band--ink .steps > div::before{border-color:var(--paper);color:var(--paper)}
.band--ink .steps .s{color:var(--paper)}
.band--ink .steps p{color:#c9c3b4}

/* two ways · open columns (not boxed) */
/* option cards · contained + clickable so they don't compete with the page header */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.duo .duo-card{border:1px solid var(--line);background:rgba(255,255,255,.32);padding:30px 30px 26px;display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
.duo .duo-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,29,24,.10);border-color:var(--ink)}
.band--deep .duo .duo-card{background:rgba(255,255,255,.22)}
.duo .k{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.duo h3{font-family:var(--sans);font-weight:500;font-size:var(--t-d4);text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:1.03;margin-bottom:12px}
.duo p{font-size:var(--t-body);color:var(--ink2);line-height:1.55;max-width:40ch;margin-bottom:20px}
.duo .go{margin-top:auto;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.duo .go span{transition:transform .25s}
.duo .duo-card:hover .go span{transform:translateX(5px)}

/* booking / embed */
.book-panel{border:1px solid var(--ink);padding:34px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.book-panel h3{font-family:var(--sans);font-weight:500;font-size:var(--t-title-lg);text-transform:uppercase;letter-spacing:var(--ls-tight);margin-bottom:8px}
.book-panel p{font-size:var(--t-small);color:var(--ink2);max-width:44ch}
.embed-slot{border:1px dashed var(--line);background:var(--paper2);aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;margin-top:16px}
.embed-slot .big{font-family:var(--sans);font-weight:500;font-size:var(--t-title);text-transform:uppercase;letter-spacing:var(--ls-tight)}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;background:var(--paper);border:1px solid var(--line);padding:13px 14px;font-family:var(--sans);font-size:var(--t-body);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{width:fit-content}

/* footer · dark close */
footer{background:var(--ink);color:var(--paper);padding:76px 0 40px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.fgrid .fwm{font-family:var(--sans);font-weight:500;font-size:var(--t-small);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--paper)}
.fgrid p{color:#c3bda9;max-width:30ch;font-size:var(--t-small);margin-top:14px}
.fcol h5{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#8f886f;margin-bottom:14px}
.fcol a{display:block;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#d6d0bf;margin-bottom:10px}
.fcol a:hover{color:#fff}
.subwrap{display:flex;border:1px solid #4a4739;margin-top:12px;max-width:300px}
.subwrap input{flex:1;background:transparent;border:0;padding:11px 12px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--paper)}
.subwrap input::placeholder{color:#8f886f}
.subwrap button{background:var(--paper);border:0;color:var(--ink);padding:0 14px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer}
.fbase{display:flex;justify-content:space-between;margin-top:52px;padding-top:24px;border-top:1px solid #35322a;flex-wrap:wrap;gap:10px}
.fbase span{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#8f886f}

/* ---- surfaces / sectioning (wayfinding) ---- */
.band{padding:96px 0}
.band.tight{padding:66px 0}
.band--deep{background:var(--deep)}
.band--paper2{background:var(--paper2)}
.band--ink{background:var(--ink);color:var(--paper)}
.band + .band{border-top:0}
/* dark-band overrides */
.band--ink .shead h2{color:var(--paper)}
.band--ink .shead .r,.band--ink .mono,.band--ink .meta,.band--ink .lbl{color:#a49c88}
.band--ink h3,.band--ink .feat h3,.band--ink .voice p{color:var(--paper)}
.band--ink .feat p,.band--ink p,.band--ink .prose p{color:#c9c3b4}
/* .cta p sets its own dark ink later in the sheet, which reads as almost
   invisible once the band goes dark. this puts it back on the light ramp */
.band--ink .cta p{color:#c9c3b4}
.band--ink .tagline{color:#cfc9ba;border-color:rgba(240,238,231,.28)}
.band--ink .link{color:var(--paper);border-color:var(--paper)}
.band--ink .voice .by{color:#a49c88}
.band--ink .fig{color:#a49c88}
/* section headers a touch bigger + more air (clarity) */
.band .shead{margin-bottom:44px}
.band .shead h2{font-size:var(--t-body);letter-spacing:var(--ls-label)}
.band .shead--lead{margin-bottom:38px}
.band .shead--lead h2{font-size:var(--t-d2);letter-spacing:var(--ls-tight)}
/* sticky, clearer header nav */
header{position:sticky;top:0;z-index:100;background:rgba(240,238,231,.92);backdrop-filter:blur(9px);padding-top:18px}
nav.links a:not(.hbook).on{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* Book is the only thing in the bar that reads as a button, so wherever you are
   on the site the way to pay is the loudest thing on the screen. */
nav.links a.hbook,.hbook{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:8px 16px;margin-left:12px;white-space:nowrap;text-decoration:none}
nav.links a.hbook:hover,.hbook:hover{background:transparent;color:var(--ink);text-decoration:none}

/* status pill */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:#6e7d55;display:inline-block}

/* dark-band buttons + inputs */
.band--ink .btn{border-color:var(--paper);color:var(--paper)}
.band--ink .btn:hover{background:var(--paper);color:var(--ink)}
.band--ink .btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.band--ink .btn.solid:hover{background:#fff}
.band--ink .status{color:#cfc9ba}
.band--ink .stack-lbl li{color:#c9c3b4;border-color:#35322a}
.band--ink .stack-lbl li::before{background:var(--paper)}
.band--ink .note{color:#c9c3b4}
/* deep-band header keyline reads darker */
.band--deep .metarow{border-top-color:var(--ink)}

/* clean CTA row (banded) */
.cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.cta h3{font-family:var(--sans);font-weight:400;font-size:var(--t-d3);text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:1.04}
.cta p{color:var(--ink2);max-width:48ch;margin-top:12px;font-size:var(--t-body)}

/* front-door hero · framed, composed, action-clear */
.frontdoor{display:grid;grid-template-columns:1.02fr .98fr;border:1px solid var(--ink);margin-top:28px;background:var(--paper)}
.frontdoor .fd-left{padding:56px 54px 46px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--ink)}
.frontdoor .eyebrow{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.frontdoor h1{font-family:var(--sans);font-weight:300;font-size:var(--t-d2);line-height:1.02;letter-spacing:var(--ls-tight);text-transform:uppercase;margin:30px 0 0}
.frontdoor h1 em{font-style:normal;display:block;color:var(--ink2)}
.frontdoor .sub{font-size:var(--t-body);color:var(--ink2);line-height:1.55;max-width:40ch;margin-top:22px}
.frontdoor .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.frontdoor .live{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2);flex-wrap:wrap}
.frontdoor .live .now{color:var(--muted)}
/* arch artwork panel (designed, not a placeholder box) */
.archart{position:relative;overflow:hidden;min-height:420px;background:radial-gradient(130% 100% at 70% 8%, rgba(250,248,242,.6), transparent 55%),linear-gradient(160deg,#ECE7DB 0%,#E2DDCC 60%,#D8D1BF 100%)}
.archart.dk{background:radial-gradient(130% 90% at 60% 12%, rgba(120,114,98,.28), transparent 55%),linear-gradient(160deg,#2b2924 0%,#201e18 100%)}
.archart svg{position:absolute;inset:0;width:100%;height:100%}
.archart .cap{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2);z-index:3}
.archart.dk .cap{color:#cfc9ba}
@media(max-width:860px){
  .frontdoor{grid-template-columns:1fr}
  .frontdoor .fd-left{border-right:0;border-bottom:1px solid var(--ink);padding:34px 24px 30px}
  .archart{min-height:320px}
}

/* full-bleed image break */
.break{aspect-ratio:12/5;margin:0}

/* now showing (reuse .feat) */
.tagline{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);padding:5px 9px;display:inline-block;margin-bottom:16px}

/* voices / testimonials */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--ink);padding-top:44px;margin-top:8px}
.voice{position:relative;margin:0;padding-top:38px}
.voice::before{content:'“';position:absolute;top:2px;left:-2px;font-family:var(--disp);font-weight:600;font-size:var(--t-num-lg);line-height:1;color:var(--ink);opacity:.26}
.voice blockquote{margin:0;font-family:var(--disp);font-weight:600;font-size:var(--t-title);line-height:1.36;letter-spacing:var(--ls-flat);color:var(--ink)}
.voice figcaption{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
/* Now-showing feature · landscape on desktop, longer on phone */
.plate.now-show{aspect-ratio:1/1}

/* journal cards */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.jcard .plate{aspect-ratio:4/3;margin-bottom:16px}
.jcard .k{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.jcard h3{font-family:var(--sans);font-weight:500;font-size:var(--t-title);line-height:1.14;letter-spacing:var(--ls-tight)}
.jcard:hover h3{text-decoration:underline;text-underline-offset:3px}

/* article (journal detail) */
.article{max-width:720px;margin:0 auto}
.article .k{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:block}
.article h1{font-family:var(--disp);font-weight:600;font-size:var(--t-d1);line-height:1.0;letter-spacing:var(--ls-caps);text-transform:uppercase;margin-bottom:22px}
.article .lead{font-size:var(--t-title);color:var(--ink2);line-height:1.5;margin-bottom:14px}
.article p{font-size:var(--t-lead);color:#3a382f;line-height:1.7;margin-bottom:20px}
.article h2{font-family:var(--sans);font-weight:500;font-size:var(--t-title-lg);text-transform:uppercase;letter-spacing:var(--ls-tight);margin:34px 0 12px}
.article .byline{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:20px}

/* mobile menu overlay */
.navmenu{position:fixed;inset:0;background:var(--paper);z-index:200;display:none;flex-direction:column;padding:26px var(--pad)}
.navmenu.open{display:flex}
.navmenu .nm-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px}
.navmenu .nm-top .wm{font-family:var(--sans);font-weight:500;font-size:var(--t-body);letter-spacing:var(--ls-label);text-transform:uppercase}
.navmenu .x{font-family:var(--mono);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;background:none;border:0;color:var(--ink)}
.navmenu a{font-family:var(--sans);font-weight:300;font-size:var(--t-nav);text-transform:uppercase;letter-spacing:var(--ls-tight);padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.navmenu a span{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--muted)}
.navmenu .nm-foot{margin-top:auto;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);line-height:2}

/* reveal + sticky mobile */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.mbook,.mbook-tray{display:none}


@media(max-width:860px){
  :root{--pad:22px}
  html,body{overflow-x:clip;max-width:100%}
  nav.links{display:none}.burger{display:block}
  /* clearance so the sticky Book bar never covers footer/content */
  body{padding-bottom:88px}
  /* bigger, tappable header · drop the meta strip (it overflowed) */
  header{padding-top:22px}
  .bar{padding-bottom:18px}
  body:not(.home) header .bar{border-bottom:1px solid var(--line)}
  .metarow{display:none}
  .burger{font-size:var(--t-meta);letter-spacing:var(--ls-wide);padding:8px 0 8px 12px;min-height:44px;display:flex;align-items:center}
  /* more air between sections on phone */
  section{padding:76px 0}
  .band{padding:76px 0}.band.tight{padding:56px 0}
  .hero{padding:56px 0 44px}
  .phead{padding:52px 0 0}
  .ph-top{grid-template-columns:1fr;gap:18px;padding-bottom:22px}
  .phead .intro{grid-column:1;max-width:none}
  .hero-b{flex-direction:column;align-items:flex-start;gap:18px}
  .herostatus{text-align:left}
  /* Step inside on a phone · built like the menu overlay. Big title on its own
     line, an arrow on the right, nothing else competing for the width. */
  .index a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:23px 0}
  .index a:hover{padding-left:0}
  .index .no,.index .d{display:none}
  .index a .t{font-size:var(--t-d3-m);line-height:1.06;letter-spacing:var(--ls-tight)}
  .index .go{flex:none;font-size:0;color:var(--ink2)}
  .index .go::after{content:"→";font-family:var(--mono);font-weight:400;font-size:var(--t-lead);line-height:1}
  .ev-row{grid-template-columns:92px 1fr;column-gap:14px;row-gap:4px;align-items:center;padding:16px 0}
  .ev-thumb{grid-row:1/3;aspect-ratio:4/3;align-self:start;margin-top:4px}
  .ev-tag{display:none}
  .ev-date{grid-column:2;grid-row:1;font-size:var(--t-label);line-height:1.3;color:var(--muted)}
  .ev-date b{display:inline-block;font-size:var(--t-lead);margin:0 6px;color:var(--ink)}
  .ev-main{grid-column:2;grid-row:2}
  .ev-main .t{font-size:var(--t-body);line-height:1.18}
  .ev-main .m{margin-top:5px}
  .ev-book{grid-column:1/-1;justify-self:start;text-align:left;margin-top:12px}
  .ev-acts{grid-column:1/-1;justify-self:stretch;align-items:stretch;text-align:center;margin-top:12px;gap:10px}
  .ev-go{padding:12px 14px}
  .ev-see{text-align:center}
  .feat{grid-template-columns:1fr;gap:24px}
  .feat .plate{order:-1}
  .two{grid-template-columns:1fr;gap:28px}
  .specs{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:14px}.steps > div{padding:26px 24px 28px}
  .duo{grid-template-columns:1fr;gap:34px}
  /* bigger images · one column galleries, full width */
  .gallery{grid-template-columns:1fr;gap:16px}
  .gallery .plate{aspect-ratio:4/5}
  .gallery .plate.wide{grid-column:auto;aspect-ratio:4/3}
  .gallery .plate.wide.nearsq{aspect-ratio:1/1}
  .feat .plate,.two .plate{aspect-ratio:5/4}
  .plate.now-show{aspect-ratio:4/5}
  .form{grid-template-columns:1fr}
  .book-panel{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr;gap:18px}
  .voices{grid-template-columns:1fr;gap:28px}
  .journal{grid-template-columns:1fr;gap:30px}
  .jcard .plate{aspect-ratio:4/3}
  .break{aspect-ratio:4/3}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .mbook-tray{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper);border-top:1px solid var(--line);
    padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(30,29,24,.10)}
  .mbook{flex:1;display:flex;justify-content:center;align-items:center;
    background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;padding:15px}
}

/* ---- display type · Cormorant (high-contrast serif, weight 600 for presence) ---- */
.wm,.fgrid .fwm,
.hero h1,.phead h1,.frontdoor h1,
.index .t,.feat h3,.ev-main .t,.specs .k,
.book-panel h3,.steps .s,.prose p.big,.jcard h3,
.article h1,.article h2,.cta h3,.embed-slot .big,
.voice p,.navmenu a,.intro-hero h1{font-family:var(--disp);font-weight:600}
.wm,.fgrid .fwm{font-weight:600}
/* Marcellus is a titling Roman · slightly wider, so ease the top clamps vs Cormorant */
.intro-hero h1{font-size:var(--t-d1);letter-spacing:var(--ls-flat);line-height:1.06}
.phead h1{font-size:var(--t-d1);letter-spacing:var(--ls-caps);line-height:1.0}
.hero h1{font-size:var(--t-d1);letter-spacing:var(--ls-flat)}
.index .t{font-size:var(--t-d3)}
.article h1{font-size:var(--t-d1);letter-spacing:var(--ls-caps)}
.feat h3{font-size:var(--t-d3)}
.ev-main .t{font-size:var(--t-d4)}
.voice p{font-size:var(--t-title);line-height:1.42}
.cta h3{font-size:var(--t-d3)}
/* wordmark: elegant tracked caps */
.wm{letter-spacing:var(--ls-label)}

/* intro statement (the words, moved off the video) */
.intro-hero{padding:92px 0 84px;text-align:center}
.intro-hero .eyebrow{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);display:block;margin-bottom:26px}
.intro-hero h1{font-weight:600;font-size:var(--t-d1);line-height:1.02;letter-spacing:var(--ls-tight);max-width:20ch;margin:0 auto}
.intro-hero h1 em{font-style:normal;color:inherit}
.intro-hero .sub{font-size:var(--t-lead);color:var(--ink2);line-height:1.55;max-width:52ch;margin:26px auto 0}
.intro-hero .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.intro-hero .live{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2);flex-wrap:wrap;justify-content:center}
.intro-hero .live .now{color:var(--muted)}
@media(max-width:860px){.intro-hero{padding:60px 0 54px}.intro-hero .acts{justify-content:flex-start}.intro-hero .live{justify-content:flex-start}}

/* ================= MOTION (scroll & hover only · no intro) ================= */
@media (prefers-reduced-motion: no-preference){
  /* scroll reveal + stagger */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .stagger.in > *{opacity:1;transform:none}
}
/* subtle header lift once scrolled */
header{transition:box-shadow .3s ease,background .3s ease}
header.scrolled{box-shadow:0 1px 0 var(--line),0 6px 20px rgba(30,29,24,.05)}
/* richer hovers */
.jcard .plate,.archart{will-change:transform}
.jcard{transition:transform .3s ease}
.jcard:hover{transform:translateY(-4px)}
.ev-book,.link{position:relative}
.btn,.btn.solid{transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover{transform:translateY(-1px)}
.acts .btn:active{transform:translateY(0)}
/* animated status dot */
.status::before{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.status::before{animation:none}}

/* ================= FULL-SCREEN VIDEO HERO ================= */
.vhero{position:relative;overflow:hidden;background:var(--ink);height:100vh;min-height:600px}
.vhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;background:linear-gradient(to top,rgba(20,19,15,.72),rgba(20,19,15,0));pointer-events:none}
.vhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vhero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,19,15,.34) 0%,rgba(20,19,15,.10) 28%,rgba(20,19,15,.22) 55%,rgba(20,19,15,.74) 100%)}
.vhero .wrap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:34px}
/* the base of the video: the two actions sit on the left, the studio status
   on the right, on one baseline and with no rule between them */
.vhero-foot{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-top:26px}
.vhero .eyebrow{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(240,238,231,.8);display:block;margin-bottom:22px}
.vhero h1{font-family:var(--disp);font-weight:500;font-size:var(--t-d1);line-height:1.04;letter-spacing:var(--ls-flat);color:var(--paper);max-width:22ch}
.vhero h1 em{font-style:normal;display:block;color:rgba(240,238,231,.82)}
.vhero .sub{font-size:var(--t-lead);line-height:1.55;color:rgba(240,238,231,.86);max-width:46ch;margin-top:22px}
.vhero .acts{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:30px}
/* Hero actions. The filled button was ink on a dark film, so it read as a
   black hole rather than the main thing to do. Cream fill puts it forward;
   the secondary sits back on a hairline over a little blur so it belongs to
   the image rather than sitting on top of it. Arrows are pseudo elements now,
   which is what lets them move. */
.vhero .acts{gap:14px}
/* The pair was cramped, and the glassy translucent fill made both buttons look
   like the same half-pressed thing against the video. What they wanted was air:
   forty of padding either side, wider tracking, smaller type, and a genuinely
   thin edge on the secondary rather than a blurred panel. One filled, one not,
   with enough room around the words to look chosen. */
.vhero .btn{border-color:rgba(240,238,231,.55);color:var(--paper);background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:19px 40px;font-size:12px;letter-spacing:.18em;gap:14px}
.vhero .btn::after{content:"\2192";display:inline-block;margin-left:9px;
  transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.vhero .btn:hover::after{transform:translateX(5px)}
.vhero .btn:not(.solid):hover{background:rgba(240,238,231,.14);border-color:var(--paper);color:var(--paper)}
.vhero .btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper);backdrop-filter:none}
.vhero .btn.solid:hover{background:#fff;border-color:#fff;color:var(--ink)}
.vhero .live{display:flex;align-items:center;gap:14px;margin-top:0;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(240,238,231,.72);flex-wrap:wrap}
.vhero .status{color:rgba(240,238,231,.92)}
.vhero .status::before{background:#8faa6a}
.vhero-cue{position:absolute;right:var(--pad);bottom:24px;z-index:2;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(240,238,231,.7);display:flex;gap:9px;align-items:center}
.vhero-cue::after{content:"↓";animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.vhero-cue::after{animation:none}}

/* homepage: header sits transparent OVER the video, then solid past it */
body.home header{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border:0}
body.home header .metarow{border-top-color:rgba(240,238,231,.28);border-bottom-color:rgba(240,238,231,.14)}
body.home header .wm,body.home header nav.links a:not(.hbook),body.home header .metarow span,body.home header .burger{color:var(--paper)}
body.home header:not(.solid) .bar .wm img{filter:brightness(0) invert(1)}
body.home header nav.links a:not(.hbook):hover,body.home header nav.links a:not(.hbook).on{color:#fff}
body.home header nav.links a.hbook,body.home header .hbook{background:transparent;border-color:rgba(255,255,255,.6);color:var(--paper)}
body.home header nav.links a.hbook:hover,body.home header .hbook:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
body.home header.solid{background:rgba(240,238,231,.94);backdrop-filter:blur(9px);box-shadow:0 1px 0 var(--line),0 6px 20px rgba(30,29,24,.05)}
body.home header.solid .metarow{border-top-color:var(--ink);border-bottom-color:var(--line)}
body.home header.solid .wm,body.home header.solid nav.links a:not(.hbook),body.home header.solid .metarow span,body.home header.solid .burger{color:var(--ink2)}
body.home header.solid .wm,body.home header.solid nav.links a:not(.hbook).on,body.home header.solid nav.links a:not(.hbook):hover{color:var(--ink)}
body.home header.solid nav.links a.hbook,body.home header.solid .hbook{background:var(--ink);border-color:var(--ink);color:var(--paper)}
body.home header.solid nav.links a.hbook:hover,body.home header.solid .hbook:hover{background:transparent;color:var(--ink)}
@media(max-width:700px){
  .vhero{height:88svh;min-height:520px}
  .vhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .vhero .wrap{padding-bottom:34px}
  .vhero::after{height:52%}
  /* the pair stays on one line and squares off the full column, so it reads
     as a designed footer to the video rather than two stacked boxes */
  .vhero-foot{flex-direction:column;align-items:stretch;gap:20px;padding-top:22px}
  .vhero .acts{width:100%;gap:10px;flex-wrap:nowrap;margin-top:0}
  .vhero .acts .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    padding:16px 10px;font-size:var(--t-label);letter-spacing:var(--ls-wide);gap:7px;white-space:nowrap}
  .vhero .live{justify-content:flex-start;margin-top:0}
}

/* ================= WHAT'S ON · brought to life ================= */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2);border:1px solid var(--line);border-radius:100px;padding:6px 12px;white-space:nowrap}
.chip--hot{border-color:#a15a38;color:#a15a38}
.chip--hot::before{content:"";width:6px;height:6px;border-radius:50%;background:#a15a38;animation:pulse 2.6s ease-in-out infinite}

/* featured next event */
.wo-feature{display:grid;grid-template-columns:1.08fr 1fr;gap:46px;align-items:center;margin-bottom:46px}
.wo-feature .fe-media{position:relative;aspect-ratio:5/4;display:block;overflow:hidden}
.wo-feature .fe-media .fe-when{position:absolute;left:16px;top:16px;z-index:3;display:flex;gap:8px;flex-wrap:wrap}
/* the featured artwork can be any colour, so the chips carry their own paper */
.wo-feature .fe-media .fe-when .chip{background:var(--paper);border-color:transparent;color:var(--ink)}
.wo-feature .fe-media .fe-when .chip--hot{color:#a15a38}
.wo-feature .fe-tag{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.wo-feature .fe-date{font-family:var(--mono);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.wo-feature h3{font-family:var(--disp);font-weight:600;font-size:var(--t-d2);line-height:1.0;letter-spacing:var(--ls-flat);margin-bottom:16px}
.wo-feature .fe-desc{font-size:var(--t-body);color:var(--ink2);line-height:1.6;max-width:44ch;margin-bottom:24px}
.wo-feature .fe-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wo-feature .fe-price{font-family:var(--disp);font-weight:600;font-size:var(--t-title-lg)}
.wo-feature .fe-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wo-feature .paynote{margin-top:14px}

/* coming-up · horizontal browse strip */
.wo-strip-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.wo-strip-head .l{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.wo-strip-head .r{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.ev-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.ev-card{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s;cursor:pointer}
.ev-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(30,29,24,.12)}
.ev-card .m{position:relative;aspect-ratio:5/4;overflow:hidden}
.ev-card .m .plate{position:absolute;inset:0;transition:transform .5s ease}
.ev-card:hover .m .plate{transform:scale(1.05)}
.ev-card .m .d{position:absolute;left:12px;top:12px;z-index:3;background:var(--paper);padding:7px 10px;text-align:center;font-family:var(--mono);font-weight:400;line-height:1.1}
.ev-card .m .d b{display:block;font-family:var(--disp);font-weight:600;font-size:var(--t-title-lg);letter-spacing:var(--ls-flat)}
.ev-card .m .d span{font-size:var(--t-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink2)}
.ev-card .cbody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ev-card .ctag{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.ev-card h4{font-family:var(--disp);font-weight:600;font-size:var(--t-title-lg);line-height:1.04;letter-spacing:var(--ls-flat)}
.ev-card .cfoot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.ev-card .cfoot .go{color:var(--muted);transition:transform .25s}
.ev-card:hover .cfoot .go{transform:translateX(4px);color:var(--ink)}
@media(max-width:860px){
  .wo-feature{grid-template-columns:1fr;gap:24px}
  .ev-scroll{grid-template-columns:1fr 1fr;gap:12px}
}

/* ================= POLISH PASS ================= */
/* refined scroll cue: label + a drawing hairline */
.vhero-cue{flex-direction:column;gap:10px;right:auto;left:50%;transform:translateX(-50%);align-items:center}
.vhero-cue::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(240,238,231,.75),rgba(240,238,231,0));animation:cueLine 2.1s ease-in-out infinite}
@keyframes cueLine{0%{transform:scaleY(.25);transform-origin:top;opacity:.5}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.25);transform-origin:top;opacity:.5}}
@media(prefers-reduced-motion:reduce){.vhero-cue::after{animation:none}}

/* intro statement: a small centred rule as an editorial mark, a touch more air */
.intro-hero{position:relative}
.intro-hero::before{content:"";display:block;width:38px;height:1px;background:var(--ink);margin:0 auto 30px;opacity:.55}
.intro-hero .sub{margin-top:24px}
.intro-hero .acts .btn{padding:15px 26px}

/* voices: make the quotes feel intentional, not thin */
.voices{align-items:start}
.voice{position:relative;padding-top:8px}
.voice::before{content:"\201C";font-family:var(--disp);font-weight:600;font-size:var(--t-num-lg);line-height:.7;color:var(--muted);opacity:.5;position:absolute;top:-6px;left:-4px}
.voice p{position:relative;font-size:var(--t-title);line-height:1.42}
.voice .by{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);display:inline-block}

/* featured event media: a hair of inner framing + smoother hover */
.wo-feature .fe-media{border:1px solid var(--line)}
.wo-feature .fe-media .plate,.wo-feature .fe-media{transition:transform .5s ease}
.wo-feature .fe-media:hover{transform:translateY(-2px)}
.wo-feature .fe-price{position:relative;top:1px}

/* section headings a touch more generous once inside bands */
.band .shead{margin-bottom:46px}
.band .shead--lead{margin-bottom:38px}

/* links: quiet underline grow on hover */
.link{transition:color .2s ease,border-color .2s ease}

/* ================= TEAM ================= */
/* A wall, not a list. The portraits run the full width of the screen and butt
   straight up against one another the way work is hung, with the name set on
   the picture itself rather than filed underneath it.

   The panel is a fixed 400px tall rather than a ratio, so the portraits keep
   the proportion they were framed at instead of being squeezed into a narrow
   slot. Cover is driven by the height at this size, which means the whole of
   each master is on screen and the crowns line up on the page exactly as they
   do in the files. The band caps at 1600px so a fifth of the screen never
   exceeds 320px, which is inside what every file can supply. */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  width:min(100vw,1600px);margin-left:calc(50% - min(50vw,800px));margin-top:46px}
.member{min-width:0}
.member .plate{height:400px;aspect-ratio:auto;margin:0}
.member .plate>img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.member:hover .plate>img{transform:scale(1.04)}

/* the label. The scrim is a gradient rather than a bar so it darkens only the
   few centimetres the type needs and leaves the face alone. */
/* three stops, not two: these backdrops are pale, so the scrim has to be
   genuinely dark where the type sits and still reach nothing at the top */
.member .wall{display:block;position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:86px 22px 22px;pointer-events:none;
  background:linear-gradient(to top,rgba(16,15,12,.84) 0%,rgba(16,15,12,.60) 36%,rgba(16,15,12,.20) 68%,rgba(16,15,12,0) 100%)}
.member .wall h4{font-family:var(--disp);font-weight:600;font-size:var(--t-d4);line-height:1.02;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.42)}
/* the label is anchored to the bottom of the picture, so a role that runs to
   two lines would push its name up out of line with the rest of the row.
   Holding two lines keeps every name on one baseline across the wall. */
.member .wall .role{font-family:var(--mono);font-weight:400;font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1.45;
  color:rgba(255,255,255,.82);margin-top:9px;min-height:32px;
  text-shadow:0 1px 7px rgba(0,0,0,.42)}

/* the bios sit under the wall. Inset from each other, but the outer two pull
   back to the page margin so the block still lines up with everything above
   while the pictures themselves stay edge to edge. */
.member p{font-size:var(--t-small);color:var(--ink2);line-height:1.6;padding:22px 22px 0}
.member:first-child p{padding-left:var(--pad)}
.member:last-child p{padding-right:var(--pad)}

/* three across, not two: at this width two panels would each be half the
   screen, wider than the files can fill. Three keeps them inside it. */
@media(max-width:1180px){
  .team{grid-template-columns:repeat(3,1fr);width:100vw;margin-left:calc(50% - 50vw)}
  .member .plate{height:400px}
  .member p{padding:20px 20px 34px}
  .member:first-child p{padding-left:20px}
  .member:last-child p{padding-right:20px}
}
/* and one up on a phone, which is the biggest any of these portraits ever gets */
@media(max-width:620px){
  .team{grid-template-columns:1fr;margin-top:34px;width:100vw;margin-left:calc(50% - 50vw)}
  /* a phone is the one place the panel goes back to a ratio: 390px across at
     3x is past these files whatever the height, so it may as well be big */
  .member .plate{height:auto;aspect-ratio:4/5}
  .member p{padding:20px var(--pad) 40px}
  .member:first-child p{padding-left:var(--pad)}
  .member:last-child p{padding-right:var(--pad)}
  .member+.member{margin-top:8px}
}

/* ===== hire · what used to be eight accordions, said plainly and once ===== */
.gtk{max-width:68ch;margin-top:32px}
.gtk p{border-top:1px solid rgba(28,26,23,.16);padding:15px 0;margin:0;
  font-size:var(--t-body);line-height:1.6;color:var(--ink2)}
.gtk p:last-child{border-bottom:1px solid rgba(28,26,23,.16)}

/* ===== about · the three ways in. Plain rules, not boxes, so the page keeps
   one visual language instead of borrowing a bordered card from elsewhere. ===== */
/* host note · one block instead of three columns, so it reads like someone talking to you */
.hostnote{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;margin-top:34px}
.hostnote .hn-lead{font-family:var(--disp);font-weight:400;font-size:var(--t-d2);line-height:1.14;letter-spacing:var(--ls-tight);color:var(--ink);margin:0;max-width:16ch}
.hostnote .hn-body p{font-size:var(--t-lead);line-height:1.72;color:var(--ink2);margin:0 0 18px;max-width:52ch}
.hostnote .hn-body .link{margin-top:6px}
@media(max-width:860px){.hostnote{grid-template-columns:1fr;gap:26px;margin-top:26px}
  .hostnote .hn-lead{max-width:none}}

.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0 42px;margin-top:40px}
.ways > div{border-top:1px solid rgba(28,26,23,.16);padding-top:18px}
.ways .k{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ways h4{font-family:var(--disp);font-weight:400;font-size:var(--t-d3);
  line-height:1.05;margin:0 0 8px}
.ways p{font-size:var(--t-body);line-height:1.6;color:var(--ink2);margin:0;max-width:34ch}
@media(max-width:820px){.ways{grid-template-columns:1fr;margin-top:30px}
  .ways > div{padding:18px 0}.ways p{max-width:none}}

/* ===== page headers · bold display serif, echoing the menu titles ===== */
.phead h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:var(--ls-caps);font-size:var(--t-d1);line-height:1.0}
.phead h1 b{font-weight:400;font-style:normal;color:inherit}
.metarow span{font-family:var(--logo);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
.intro-hero .eyebrow{font-family:var(--logo);font-weight:400;font-size:var(--t-meta);letter-spacing:var(--ls-label)}
body.home header .metarow span{letter-spacing:var(--ls-label)}
@media(max-width:860px){
  .phead h1,.article h1{letter-spacing:var(--ls-caps);font-size:var(--t-d1-m)}
  .ev-row{align-items:start}
}


.grazing-up img{object-position:center 82%}

/* ---------- availability calendar ---------- */
.av{border:1px solid var(--line);background:var(--paper);padding:22px 22px 18px;max-width:780px}
.av-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:14px}
.av-month{font-size:var(--t-meta);letter-spacing:var(--ls-label);color:var(--ink)}
.av-nav{font-family:var(--mono);font-weight:400;font-size:var(--t-meta);line-height:1;background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;padding:7px 12px;transition:.18s}
.av-nav:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.av-nav:disabled{opacity:.3;cursor:default}
.av-wkd{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.av-wkd span{text-align:center;font-size:var(--t-label);letter-spacing:var(--ls-wide)}
.av-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.av-cell{min-height:66px;border:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--paper)}
.av-cell b{font-family:var(--disp);font-weight:600;font-size:var(--t-lead);line-height:1;letter-spacing:var(--ls-tight)}
.av-cell i{font-family:var(--mono);font-weight:400;font-style:normal;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.2}
.av-pad{border-color:transparent;background:none}
.av-open{background:var(--paper)}
.av-open b{color:var(--ink)}
.av-open i{display:none}
.av-part{background:var(--deep);border-color:var(--line)}
.av-part b{color:var(--ink)}
.av-booked{background:var(--ink);border-color:var(--ink)}
.av-booked b{color:var(--paper)}
.av-booked i{color:#a8a396}
.av-past{background:none;border-color:transparent}
.av-past b{color:#c4c0b4}
.av-past i{display:none}
.av-key{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;border-top:1px solid var(--line);padding-top:13px}
.av-key span{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-label);letter-spacing:var(--ls-wide)}
.av-hours{font-size:var(--t-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin:11px 0 0;line-height:1.7}
/* studio walkthrough note, booking page */
.wt{margin-top:26px;border-top:1px solid var(--line);padding-top:17px}
.wt .wt-k{font-size:var(--t-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.wt p+p{margin:0;font-size:var(--t-body)}
.av-sw{width:12px;height:12px;display:inline-block;border:1px solid var(--line)}
.av-sw.av-booked{background:var(--ink)}
@media(max-width:520px){
  .av{padding:16px 14px 14px}
  .av-cell{min-height:44px}
  .av-cell i{display:none}
  .av-cell b{font-size:var(--t-body)}
  .av-grid,.av-wkd{gap:3px}
}

/* clickable dates */
.av-pick{font:inherit;color:inherit;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none;transition:border-color .16s,background .16s,box-shadow .16s}
.av-pick:hover{border-color:var(--ink)}
.av-open.av-pick:hover{background:var(--deep)}
.av-part.av-pick:hover{background:var(--paper2)}
.av-pick:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.av-cell.av-on{box-shadow:inset 0 0 0 2px var(--ink);border-color:var(--ink)}
.form input.flash,.form textarea.flash{background:var(--deep);border-color:var(--ink)}
.form input,.form textarea{transition:background .45s,border-color .45s}

/* the calendar now says which hours are free, so those labels have to be readable */
.av-part i{color:var(--ink2);font-size:var(--t-label);letter-spacing:var(--ls-caps);padding:0 2px}
.av-cell.av-on i{color:var(--ink)}
@media(max-width:520px){
  .av-cell{min-height:52px}
  .av-part i{display:block;font-size:var(--t-label);letter-spacing:var(--ls-flat);padding:0 1px}
}

/* A cell holds a number and a mark. The explanation belongs underneath, where
   there is room for a whole sentence, on a phone as much as anywhere else. */
.av-cell .av-mk{display:block;width:4px;height:4px;padding:0;margin:0;border-radius:50%;background:var(--ink);opacity:.5;font-size:0;letter-spacing:var(--ls-flat)}
.av-booked .av-mk{background:var(--paper)}
.av-sw.av-part{display:inline-flex;align-items:center;justify-content:center;background:var(--deep)}
.av-sw .av-mk{width:3px;height:3px;opacity:.65}
.av-key span{white-space:nowrap}

.av-panel{border-top:1px solid var(--ink);margin-top:18px;padding-top:16px}
.av-panel[hidden]{display:none}
.av-when{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.av-say{font-family:var(--sans);font-size:var(--t-body);line-height:1.55;color:var(--ink2);margin:7px 0 15px;max-width:54ch}
@media(max-width:520px){
  .av-cell{min-height:46px}
  .av-say{font-size:var(--t-small)}
  .av-key{gap:12px}
}

/* ---------- sold out / not yet on sale ---------- */
.btn.is-out{border-color:var(--line);color:var(--muted);background:none;cursor:default;pointer-events:none}
.btn.is-out:hover{transform:none;background:none;color:var(--muted)}
.ev-card.is-out{cursor:pointer}
.ev-card.is-out .m .plate img{filter:grayscale(1);opacity:.62}
.ev-card.is-out .cfoot span:first-child,.ev-card.is-out .go{color:var(--muted)}
.ev-card .m .soldflag{position:absolute;right:12px;top:12px;z-index:3;background:var(--paper);color:var(--ink2);font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;padding:6px 9px;border:1px solid var(--line)}
.ev-row.is-out .ev-thumb img{filter:grayscale(1);opacity:.62}
.ev-row.is-out .ev-main .t{color:var(--ink2)}
.ev-book.is-out{color:var(--muted);border-color:var(--line)}
.ev-book.is-out:hover{color:var(--muted);border-color:var(--line)}
.soldnote{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-top:10px;display:block}
.soldnote a{border-bottom:1px solid var(--line)}

/* ---------- one button per Sunday, on a workshop page ---------- */
/* The parent picks the date here rather than inside Square, so the button they
   press is already the session they want. */
.bookdates{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.bookdates .btn{margin:0}
/* a full Sunday keeps its details page, so it stays clickable */
.bookdates .btn.is-out{pointer-events:auto;cursor:pointer}

/* ---------- service picker, booking page ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-c{text-align:left;background:var(--paper);border:1px solid var(--line);padding:22px 20px 20px;cursor:pointer;font-family:var(--sans);color:var(--ink);display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.svc-c:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,29,24,.08)}
.svc-c[aria-pressed="true"]{border-color:var(--ink);background:var(--deep);box-shadow:inset 0 0 0 1px var(--ink)}
.svc-l{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink2)}
.svc-p{font-family:var(--disp);font-weight:600;font-size:var(--t-title-lg);margin:11px 0 9px;line-height:1;letter-spacing:var(--ls-tight)}
.svc-p span{font-family:var(--mono);font-size:var(--t-meta);font-weight:400;color:var(--muted);letter-spacing:var(--ls-label)}
.svc-b{font-size:var(--t-small);color:var(--ink2);line-height:1.5;margin:0 0 14px}
.svc-m{margin-top:auto;border-top:1px solid var(--line);padding-top:11px;display:grid;gap:5px}
.svc-m span{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);line-height:1.5}
.svc-tick{display:none;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);margin-top:10px}
.svc-c[aria-pressed="true"] .svc-tick{display:block}
/* A card that links straight into the calendar. It always shows its own call to
   action, because on this page every card is a way to pay, not a thing to tick. */
.svc--two{grid-template-columns:repeat(2,1fr)}
.svc-c--go .svc-tick{display:block;border-top:1px solid var(--line);margin-top:14px;padding-top:12px;color:var(--ink)}
.svc-c--go:hover{border-color:var(--ink)}
.svc-c--go:hover .svc-tick{text-decoration:underline;text-underline-offset:3px}
.svc-status{font-size:var(--t-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink);margin:16px 0 0;line-height:1.6;display:none}
.svc-status.on{display:block}
.svc-foot{font-size:var(--t-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin:16px 0 0;line-height:1.7}
@media(max-width:1040px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc{grid-template-columns:1fr}}

/* Booking page · one screen. The calendar and the details sit side by side so
   picking a date and filling the form is a single move, not two stops. */
.bk{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:38px;border-top:1px solid var(--ink);padding-top:32px}
.bk-k{display:block;margin-bottom:16px}
.bk .av{max-width:none}
.form--one{grid-template-columns:1fr;gap:16px}
.form--one .btn{width:fit-content}
.bk-fine{font-size:var(--t-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin:2px 0 0;line-height:1.7}
@media(max-width:900px){
  .bk{grid-template-columns:1fr;gap:34px;margin-top:30px;padding-top:26px}
}

/* Space hire rate ladder · the price list is the answer people came for, so it
   reads top to bottom as a list, not as five cards to compare. The booking
   button and the payment rule sit beside it and stay in view the whole way
   down, so there is never a moment where you know the price but not the way in. */
.band--ink .addon{border-color:rgba(240,238,231,.3)}
.band--ink .addon p{color:#c9c3b4}
.cta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta-stack .mono{color:var(--muted);line-height:1.8;margin:0}
.addon{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:space-between;margin-top:42px;padding:24px 26px;border:1px solid var(--line)}
.addon p{font-size:var(--t-small);color:var(--ink2);max-width:64ch;margin-top:9px;line-height:1.55}
@media(max-width:600px){.addon{padding:20px}}

/* Questions people actually ask before they book. Closed by default so the page
   stays short, and every answer is one the terms already commit us to. */
.faq{margin-top:6px;max-width:820px}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:var(--disp);font-weight:600;font-size:var(--t-title);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mk{position:absolute;right:4px;top:26px;width:15px;height:15px}
.faq summary .mk:before,.faq summary .mk:after{content:"";position:absolute;background:var(--ink);transition:transform .2s,opacity .2s}
.faq summary .mk:before{left:0;top:6.5px;width:15px;height:2px}
.faq summary .mk:after{left:6.5px;top:0;width:2px;height:15px}
.faq details[open] summary .mk:after{transform:rotate(90deg);opacity:0}
.faq details>p{margin:0 0 22px;opacity:.85;max-width:64ch;font-size:var(--t-body);line-height:1.6}

/* ─── kids workshop page · split hero, facts strip, benefit cards, trust row ─── */
.wo-hero{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;padding:60px 0 54px}
.wo-hero .k{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:block}
.wo-hero h1{font-family:var(--disp);font-weight:600;font-size:var(--t-d1);line-height:.98;letter-spacing:var(--ls-caps);text-transform:uppercase;margin-bottom:22px}
.wo-hero .lead{font-size:var(--t-lead);color:var(--ink2);line-height:1.55;margin-bottom:26px;max-width:52ch}
.wo-hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.wo-hero .trustline{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
.wo-hero .plate{aspect-ratio:4/5}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.facts .f{padding:24px 20px 26px;border-left:1px solid var(--hair)}
.facts .f:first-child{border-left:0;padding-left:0}
.facts .n{display:block;font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink)}
.facts .l{display:block;font-size:var(--t-small);color:var(--ink2);line-height:1.45;margin-top:7px}

.makegrid{display:grid;grid-template-columns:1fr .84fr;gap:60px;align-items:center}
.makegrid .plate{aspect-ratio:4/5}

.bens{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 34px}
.ben{border-top:1px solid var(--ink);padding-top:18px}
.ben h3{font-family:var(--sans);font-weight:500;font-size:var(--t-lead);text-transform:uppercase;letter-spacing:var(--ls-tight);margin-bottom:9px}
.ben p{font-size:var(--t-body);color:var(--ink2);line-height:1.55}

.trust-row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:820px}
.tr{border:1px solid var(--line);background:rgba(255,255,255,.34);padding:28px 26px 30px}
.tr .big{display:block;font-family:var(--disp);font-weight:600;font-size:var(--t-num-lg);line-height:1;letter-spacing:var(--ls-caps);margin-bottom:16px}
.tr h3{font-family:var(--sans);font-weight:500;font-size:var(--t-body);text-transform:uppercase;letter-spacing:var(--ls-tight);margin-bottom:8px}
.tr p{font-size:var(--t-small);color:var(--ink2);line-height:1.55}

.bookgrid{display:grid;grid-template-columns:.88fr 1.12fr;gap:60px;align-items:stretch}
.bookgrid .plate{min-height:100%}
.bookcard{border:1px solid var(--ink);background:rgba(255,255,255,.4);padding:36px 36px 34px}
.bookcard .price{font-family:var(--disp);font-weight:600;font-size:var(--t-num-lg);line-height:1;margin-bottom:6px}
.bookcard .per{font-family:var(--mono);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.bookcard ul{list-style:none;padding:0;margin:0 0 26px}
.bookcard li{font-size:var(--t-body);color:var(--ink2);padding:11px 0 11px 24px;position:relative;border-bottom:1px solid var(--hair)}
.bookcard li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:1px;background:var(--ink)}
.bookcard .fine{font-size:var(--t-meta);color:var(--muted);line-height:1.55;margin-top:16px}

/* the reassurance line that sits directly under any booking button. Quiet by
   design: it is there to be believed, not to be read out loud */
.paynote{font-size:var(--t-meta);color:var(--muted);line-height:1.5;margin:12px 0 0}
.paynote+.fine{margin-top:10px}

/* illustration plates · the artwork carries its own paper ground and grain,
   so it needs no overlay, no crop marks and no caption */
.plate.illus{background:#EFEBE1}
.plate.wide{aspect-ratio:3/2;margin-top:34px}

@media(max-width:860px){
  /* the page is long, so give it a tighter vertical rhythm than the site default */
  .p-workshop section{padding:46px 0}
  .p-workshop .band{padding:50px 0}
  .p-workshop .shead{margin-bottom:22px}
  .p-workshop .prose{margin-bottom:26px!important}
  .p-workshop .steps{gap:12px}
  .p-workshop .steps > div{padding:22px 20px 24px}
  .p-workshop .steps > div::before{margin-bottom:16px}
  .p-workshop .steps .s{font-size:var(--t-title)}

  .wo-hero{grid-template-columns:1fr;gap:24px;padding:22px 0 30px}
  .wo-hero .k{font-size:var(--t-label);letter-spacing:var(--ls-wide);margin-bottom:13px;line-height:1.5}
  .wo-hero h1{font-size:var(--t-d1-m);margin-bottom:16px}
  .wo-hero .lead{font-size:var(--t-body);line-height:1.6;margin-bottom:22px}
  /* full-width, thumb-sized buttons · two taps, no hunting */
  .wo-hero .btns{gap:10px;margin-bottom:20px}
  .wo-hero .btns .btn{flex:1 1 100%;justify-content:center;min-height:52px;font-size:var(--t-label)}
  .wo-hero .trustline{font-size:var(--t-label);line-height:1.8;padding-top:15px}
  /* illustrations are 4:5 · show them whole rather than cropping to a letterbox */
  .wo-hero .plate,.makegrid .plate{aspect-ratio:4/5}
  /* the decorative plates can be squarer than the photographs · they lose nothing */
  .makegrid .plate.illus{aspect-ratio:1/1}

  .facts{grid-template-columns:1fr 1fr}
  .facts .f{padding:16px 14px 18px;border-left:1px solid var(--hair);border-top:1px solid var(--hair)}
  .facts .f:first-child{padding-left:14px}
  .facts .f:nth-child(odd){border-left:0;padding-left:0}
  .facts .f:nth-child(-n+2){border-top:0}
  .facts .n{font-size:var(--t-label)}
  .facts .l{font-size:var(--t-meta);margin-top:5px}

  .makegrid,.bookgrid{grid-template-columns:1fr;gap:26px}
  .plate.wide{margin-top:26px}

  .bens{grid-template-columns:1fr;gap:20px}
  .ben{padding-top:15px}
  /* two tiles side by side on a phone leaves a column three words wide · stack them */
  .trust-row{grid-template-columns:1fr;gap:12px}
  .tr{padding:20px 18px 22px}
  .tr .big{font-size:var(--t-num);margin-bottom:10px}

  /* on a phone the price and the button come first · the picture can wait */
  .bookgrid .bookcard{order:-1}
  .bookgrid .plate{min-height:0;aspect-ratio:2/1}
  .bookcard{padding:26px 22px 28px}
  .bookcard .price{font-size:var(--t-num-lg)}
  .bookcard ul{margin-bottom:22px}
  .bookcard .btn{display:flex;justify-content:center;min-height:52px;font-size:var(--t-label)}

  .p-workshop .voice{padding-top:0}
  .p-workshop .voice blockquote{font-size:var(--t-title);line-height:1.4}
  .p-workshop .faq summary{font-size:var(--t-lead);padding:17px 40px 17px 0}
  .p-workshop .faq summary .mk{top:22px}
  .p-workshop .prose p.big{margin-bottom:14px}
}


/* ===== keyboard focus · one consistent ring everywhere ===== */
a:focus-visible,button:focus-visible,summary:focus-visible,
.btn:focus-visible,.link:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.vhero a:focus-visible,footer a:focus-visible,.band--ink a:focus-visible,
body.home header:not(.solid) a:focus-visible,body.home header:not(.solid) button:focus-visible{
  outline-color:var(--paper)}
.form input:focus,.form textarea:focus{border-color:var(--ink)}

/* ===== phone · stop iOS zooming the page when a field is focused ===== */
@media(max-width:860px){
  .form input,.form textarea,.form select,input,textarea,select{font-size:var(--t-body)}
  .ev-filters button{min-height:40px}
}


/* ===== mobile menu · the primary action was unstyled ===== */
.navmenu{overflow-y:auto}

/* ===== homepage · the video carries the two calls to action and nothing else.
   The page still needs one h1 for search, so it is read but not seen. ===== */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vhero .acts{margin-top:0}

/* ===== hire · the single line of what a rate includes ===== */
.incl{font-size:var(--t-body);line-height:1.6;color:var(--ink2);max-width:38ch;margin:0}

/* ===== no italics anywhere on the site ===== */
em,i,cite,address,blockquote,.quote{font-style:normal}
.tip em{font-weight:500;display:block;margin-bottom:6px}

/* ===== Portfolio sessions · the folio hang =====================================
   The page sells photography, so the photographs are hung rather than tiled.
   Two components do the work. .hang is the opening line: three frames of
   unequal width sharing one height, the way a magazine opens a folio. .sheet
   is the body of work: one frame given real size with the rest read small
   and even around it, so the eye is told where to land first. Every frame is
   clickable and opens full size in the lightbox below. */

.hang{display:grid;grid-template-columns:1.6fr 1fr 1.25fr;gap:2px;margin:0}
.hang a{display:block;position:relative;height:clamp(320px,42vw,560px);overflow:hidden;background:var(--line)}
.hang img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.hang a:hover img{transform:scale(1.03)}
@media(max-width:760px){
  .hang{grid-template-columns:1fr 1fr}
  .hang a{height:clamp(220px,58vw,340px)}
  .hang a:first-child{grid-column:1/-1;height:clamp(300px,86vw,460px)}
}
/* On a phone the pair is barely 190px wide, and a landscape band that narrow
   cuts a standing figure at the waist and a head crop at the jaw. One column
   of portraits keeps every face in frame, which is the whole point of them. */
@media(max-width:620px){
  .hang{grid-template-columns:1fr;gap:2px}
  .hang a,.hang a:first-child{grid-column:1/-1;height:auto;aspect-ratio:4/5}
}

/* The sheet · a four column wall where the lead frame holds two columns and
   two rows. The lead borrows the proven trick from .folio: it is a block of
   full height whose image is taken out of flow, so the row can only be as
   tall as the small frames beside it and every edge lines up. */
.sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:8px}
/* direct children only, so the button inside the closing tile is never treated
   as a frame */
.sheet > a,.sheet > .tile{display:block;position:relative;overflow:hidden;background:var(--line);aspect-ratio:4/5}
.sheet > a img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block;transition:transform .8s ease}
.sheet > a:hover img{transform:scale(1.03)}
.sheet > .lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.sheet > .lead img{position:absolute;inset:0}
/* the closing cell is the ask, so the wall ends on an invitation and not a
   weak crop */
.sheet > .tile{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;
  justify-content:space-between;padding:22px 20px;aspect-ratio:4/5}
.sheet .tile .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--paper);opacity:.72}
.sheet .tile p{font-family:var(--disp);font-size:var(--t-title-lg);line-height:1.2;color:var(--paper);margin:14px 0 0}
.sheet .tile .btn{margin-top:18px;align-self:flex-start;background:var(--paper);color:var(--ink);border-color:var(--paper);white-space:nowrap}
@media(min-width:1100px){.sheet .tile p{font-size:var(--t-d4)}}
@media(max-width:860px){
  /* two across on a phone. The lead and the last frame each take the full
     width so the wall never ends on an orphan half cell. */
  .sheet{grid-template-columns:repeat(2,1fr)}
  .sheet > .lead{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5;height:auto}
  .sheet > a:last-of-type{grid-column:1/-1}
  .sheet > .tile{grid-column:1/-1;aspect-ratio:auto}
}

/* Lightbox · every frame on the page opens full size on a dark ground, with
   the caption set in the same label type used everywhere else. */
.lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);background:var(--ink);background:color-mix(in srgb,var(--ink) 94%,transparent)}
.lb.open{display:flex}
.lb-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.lb-fig img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;display:block;margin:0 auto;
  border:1px solid var(--muted)}
.lb-cap{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--paper2);opacity:.8;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.lb button{font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--paper);background:none;border:1px solid var(--muted);padding:10px 14px;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.lb button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lb .lb-x{position:absolute;top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.lb .lb-p,.lb .lb-n{position:absolute;top:50%;transform:translateY(-50%)}
.lb .lb-p{left:clamp(10px,2vw,22px)}
.lb .lb-n{right:clamp(10px,2vw,22px)}
body.lb-on{overflow:hidden}
@media(max-width:700px){
  .lb-fig img{max-height:calc(100vh - 210px)}
  .lb .lb-p,.lb .lb-n{top:auto;bottom:clamp(14px,4vw,26px);transform:none}
}
@media(prefers-reduced-motion:reduce){
  .hang img,.sheet img{transition:none}
}

/* ===== Who a program is for · the banner on Our programs ====================
   A parent should not have to read two sections to find out whether their
   child fits, so the answer is said once across the top of the page: who
   these are for on the left, both age ranges on the right, and one quiet
   line underneath that leaves room for what we add later. */
.whofor{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.whofor .k{display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--paper2);opacity:.66;margin-bottom:14px}
.whofor .w-say p{font-family:var(--disp);font-size:var(--t-d3);line-height:1.04;letter-spacing:var(--ls-tight);
  color:var(--paper);max-width:18ch;margin:0}
.whofor .w-ages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto auto;gap:0}
.whofor .w-ages li{padding:0 0 0 26px;margin-left:26px;border-left:1px solid var(--muted)}
.whofor .w-ages li:first-child{padding-left:0;margin-left:0;border-left:0}
.whofor .w-ages .t{display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--paper2);opacity:.7}
.whofor .w-ages .a{display:block;font-family:var(--disp);font-size:var(--t-title-lg);line-height:1.1;
  color:var(--paper);margin-top:8px;white-space:nowrap}
.w-tail{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--muted);font-size:var(--t-small);
  line-height:1.6;color:var(--paper2);opacity:.82;max-width:74ch}
.w-tail a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){
  .whofor{grid-template-columns:1fr;gap:26px;align-items:start}
  .whofor .w-say p{max-width:none}
  .whofor .w-ages{grid-template-columns:1fr 1fr;gap:0}
  /* the two labels wrap to different depths, so let the cells stretch and
     push both ages onto one line at the bottom */
  .whofor .w-ages li{padding-left:18px;margin-left:18px;display:flex;flex-direction:column;justify-content:space-between}
  .whofor .w-ages .a{font-size:var(--t-title)}
  .w-tail{margin-top:26px}
}


/* ─── photo sessions · the folio wall ───────────────────────────────────────
   Sixteen even cells, four across, nothing else in the grid. The order is
   solved, not arranged, so there is no cascade to protect and no heading
   sitting in a cell pretending to be a picture. */
.gx{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
/* Markup order belongs to the phone, so the desktop grid places every frame
   itself rather than inheriting an order that was compromised between the two.
   Solved for tone, crop scale and which model, across and down. */
@media(min-width:1041px){
  .gx-f:nth-child(1){grid-area:1/1}
  .gx-f:nth-child(11){grid-area:1/2}
  .gx-f:nth-child(12){grid-area:1/3}
  .gx-f:nth-child(14){grid-area:1/4}
  .gx-f:nth-child(6){grid-area:2/1}
  .gx-f:nth-child(8){grid-area:2/2}
  .gx-f:nth-child(7){grid-area:2/3}
  .gx-f:nth-child(13){grid-area:2/4}
  .gx-f:nth-child(4){grid-area:3/1}
  .gx-f:nth-child(3){grid-area:3/2}
  .gx-f:nth-child(5){grid-area:3/3}
  .gx-f:nth-child(10){grid-area:3/4}
  .gx-f:nth-child(2){grid-area:4/1}
  .gx-f:nth-child(9){grid-area:4/2}
  .gx-f:nth-child(16){grid-area:4/3}
  .gx-f:nth-child(15){grid-area:4/4}
}
.gx-f{display:block;position:relative;overflow:hidden;background:var(--hair);aspect-ratio:2/3}
.gx-f img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.gx-f:hover img{transform:scale(1.035)}
/* Two layouts only, four across or two, because sixteen divides evenly into
   both and not into three. A three column step would have been the one width
   nobody solved for, with the markup order landing wherever it fell. */
@media(max-width:1040px){.gx{grid-template-columns:repeat(2,1fr);gap:3px}}
@media(max-width:700px){.gx{gap:2px}}

/* one wide frame further down, which is the only landscape moment on a page
   otherwise built entirely from portrait columns */
.hl{display:block;position:relative;overflow:hidden;background:var(--hair);margin:56px 0 0}
.hl img{width:100%;height:100%;aspect-ratio:1.207/1;object-fit:cover;object-position:50% 50%;
  display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.hl:hover img{transform:scale(1.025)}
/* the file is already cropped to the frame it wants, so the phone keeps
   the same proportion rather than cropping it a second time */
@media(max-width:700px){.hl{margin-top:34px}}

/* the one dark line on the page, so the promise lands before the prices */
.pstrip{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.pstrip .big{font-family:var(--disp);font-weight:600;font-size:var(--t-d4);line-height:1.15;max-width:26ch}
.pstrip .meta{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;opacity:.72}

/* session cards: the description earns its place above the list */
.tiers--sessions .td{font-size:var(--t-small);color:var(--ink2);line-height:1.55;margin:14px 0 4px}
.tier--pick{position:relative}
.tier--pick .pick{position:absolute;top:-11px;left:22px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px}
.helpline{margin-top:30px;font-size:var(--t-small);color:var(--ink2);line-height:1.6;max-width:70ch}
.helpline a{text-decoration:underline;text-underline-offset:3px}
.two--bring h3{font-family:var(--disp);font-weight:600;font-size:var(--t-d4);line-height:1.1;margin-bottom:18px}
.two--bring p{font-size:var(--t-small);color:var(--ink2);line-height:1.65;margin-bottom:14px;max-width:52ch}


/* ─── homepage · portfolio sessions announcement ────────────────────────────
   Message left, work right, three even cells at one proportion. */
.annc{display:grid;grid-template-columns:.86fr 1.6fr;gap:44px;align-items:center}
.annc-say h2{font-family:var(--disp);font-weight:600;font-size:var(--t-d3);line-height:1.0;
  letter-spacing:var(--ls-caps);text-transform:uppercase;margin:14px 0 18px}
.annc-say p{font-size:var(--t-body);color:var(--ink2);line-height:1.6;max-width:44ch;margin-bottom:20px}
.annc-meta{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);
  padding-top:15px;margin-bottom:22px}
.annc-work{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.annc-work a{display:block;position:relative;overflow:hidden;background:var(--hair);aspect-ratio:2/3}
.annc-work img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.annc-work a:hover img{transform:scale(1.03)}
@media(max-width:980px){.annc{grid-template-columns:1fr;gap:30px}}

/* On a phone this has to stop someone, and three frames at 126px wide does
   not. The pictures move above the words and the lead takes the full width at
   4:5, big enough to actually read as a portrait, with the other two beneath
   it. The button goes full width because it is the only thing to do here. */
@media(max-width:700px){
  /* The work used to be pulled above the words on a phone. Every other band on
   the page leads with its heading, so this one was the odd one out: you met
   three photographs with no idea what they were for. Order removed, so the
   kicker, the heading and the price come first here like everywhere else. */
  .annc-work{grid-template-columns:1fr 1fr;gap:2px}
  /* On a phone the row becomes one big frame over two small ones, and the big
     one is a 4:5 window onto a 2:3 file, so it crops top and bottom. The
     seated frame lost her head to that. The fur is a close up and survives the
     crop, and it is the stronger opening picture anyway, so it takes the wide
     slot here while the markup order stays as the desktop triptych needs it. */
  .annc-work a:first-child{grid-column:auto;aspect-ratio:2/3}
  .annc-work a:nth-child(2){order:-1;grid-column:1/-1;aspect-ratio:4/5}
  .annc-work a:nth-child(2) img{object-position:50% 12%}
  .annc-say h2{font-size:var(--t-d2);margin:12px 0 14px}
  .annc-say p{margin-bottom:18px}
  .annc-say .btn{width:100%}
}

/* Inside a Sunday · the grid at the foot of every workshop page
   These are social frames with handwritten captions burned into the picture, so
   they cannot be cropped without losing words. Every cell is therefore the
   files' own 3:4 and nothing is cut. Six, not seven, so the last row is full
   and no frame is left standing on its own. */
.sgal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sgal .plate{aspect-ratio:3/4;margin:0}
.sgal .plate img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.sgal{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:520px){.sgal{grid-template-columns:1fr}}

/* ── The artist wall ────────────────────────────────────────────────────────
   One card per artist in the series. The point of showing all twelve is that a
   parent sees a programme rather than a one-off, and a child gets to pick, so
   the artists still to come stay on the wall instead of waiting offstage. They
   are blocks of paint with a name, which reads as intent rather than as
   artwork that has not been drawn yet. */
.aw{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aw-card{display:block;text-decoration:none;color:inherit}
.aw-art{aspect-ratio:4/3;overflow:hidden;display:block;background:var(--hair);position:relative}
.aw-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .85s cubic-bezier(.2,.7,.2,1)}
a.aw-card:hover .aw-art img{transform:scale(1.03)}
.aw-nm{font-family:var(--disp);font-size:20px;letter-spacing:.01em;margin:12px 0 2px;display:block}
.aw-mk{font-size:13.5px;color:var(--ink2);line-height:1.45;display:block}
.aw-st{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:9px;display:block;color:var(--ink)}
/* dated artists keep their colour; the rest step back without disappearing */
.aw-card.is-soon .aw-art img{filter:grayscale(1);opacity:.4}
.aw-card.is-soon .aw-st,.aw-card.is-blank .aw-st{color:var(--muted)}
.aw-card.is-blank{cursor:default}
.aw-blank{position:absolute;left:14px;bottom:12px;font-family:var(--disp);font-size:19px;
  color:rgba(255,255,255,.92);line-height:1}
@media(max-width:1040px){.aw{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.aw{grid-template-columns:repeat(2,1fr);gap:10px}
  .aw-nm{font-size:17px}.aw-mk{font-size:12.5px}.aw-st{font-size:10px;letter-spacing:.12em}}

/* Workshop pages · the make plate is square, not portrait. A 4:5 frame beside
   four lines of copy left the text stranded at the top of a very tall column on
   a desktop. Square holds the artwork perfectly well and gives the section back
   about a third of its height. */
.p-workshop .makegrid .plate{aspect-ratio:1/1}
@media(max-width:820px){.p-workshop .makegrid .plate{aspect-ratio:4/5}}

/* The four reassurances, as one row rather than a band of their own. Two facts
   a parent reads in three seconds did not need 420px and a heading. On a phone
   the row cannot stay a row, so it becomes a short stacked list with the same
   hairlines: still under a hundred pixels, and each line stays readable. */
.assure{list-style:none;margin:26px 0 0;padding:14px 0;display:flex;flex-wrap:wrap;gap:9px 32px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.assure li{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1.4}
.assure li b{color:var(--ink);font-weight:400}
@media(max-width:820px){
  .assure{gap:0;padding:0}
  .assure li{flex:0 0 100%;padding:11px 0;border-bottom:1px solid var(--line)}
  .assure li:last-child{border-bottom:0}
}

/* The wall sits on the lightest paper, not on ink. Ink separated it from the
   gallery above but ran straight into the dark footer below, so the page ended
   in one long dark block. Paper against the gallery's paper2 above and the
   footer beneath gives it an edge on both sides. */

/* the way back to the programme site, on the same rule as the reassurances */
.assure-more{font-size:var(--t-small);color:var(--muted);line-height:1.6;margin:14px 0 0;max-width:62ch}
.assure-more b{color:var(--ink2);font-weight:400}
.assure-more a{color:var(--ink);border-bottom:1px solid var(--muted);padding-bottom:1px}

/* The reassurance row ends this section, and a full band gap after a single
   line of small caps left 166px of nothing before the price. The row is a
   footnote to what is above it, not a section of its own, so it closes up. */
.p-workshop section:has(> .assure){padding-bottom:26px}
.p-workshop #book{padding-top:54px}