/* ============================================================
   CHAAR BHAI, heritage dark
   Night ink, gold, Caslon, photographs in their own colour.
   ============================================================ */

/* Palette sampled from the logo itself: navy #292A3E, gold #CEC0A3, maple #B52932 */
:root{
  --ink:#12141C;
  --ink-2:#191C26;
  --ink-3:#232735;
  --paper:#EFEADF;
  --dim:rgba(239,234,223,.58);
  --faint:rgba(239,234,223,.28);
  --gold:#CEC0A3;
  --gold-2:#8E8268;
  --maple:#B52932;
  --line:rgba(239,234,223,.12);
  --gline:rgba(206,192,163,.34);
  --line-2:rgba(239,234,223,.22);
  --soft:rgba(239,234,223,.54);       /* smallest ivory that still reads (4.5:1 on ink, ink-2 and ink-3) */
  --gold-hi:#E6D9B8;
  --gold-wash:rgba(206,192,163,.1);
  --hdr:rgba(18,20,28,.86);
  --bar:rgba(18,20,28,.92);
  --bar-solid:rgba(18,20,28,.98);
  --ease:cubic-bezier(.16,1,.3,1);
  --quint:cubic-bezier(.22,1,.36,1);   /* ease-out quint: the ground's colour change, 800ms, fast start and a long soft settle */
  --ease-io:cubic-bezier(.74,0,.26,1);
  --pad:clamp(18px,4.6vw,76px);
  --tl-dist:clamp(12px,1.6vw,20px);
  --arch:2px;
  /* type. Libre Caslon Display speaks at size, Libre Caslon Text carries the
     smaller serif voice (names, prices, the letter), Schibsted Grotesk labels
     and explains. One scale, named by role. */
  --f-display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --f-serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --f-sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-display:clamp(44px,7.2vw,96px);
  --t-hero:clamp(40px,6.4vw,88px);
  --t-headline:clamp(32px,4.6vw,62px);
  --t-headline-s:clamp(30px,3.4vw,46px);
  --t-quote:clamp(23px,2.6vw,34px);
  --t-title:clamp(21px,2.1vw,28px);
  --t-price:clamp(28px,2.6vw,36px);
  --t-letter:clamp(20px,2.3vw,32px);
  --t-name:20px;
  --t-lead:clamp(16px,1.15vw,18px);
  --t-body:16px;
  --t-small:14px;
  --t-label:12px;   /* photographs are plain rectangles */
}
/* Light: the same family on paper. Navy ink for text, the gold darkened
   until it reads as type on cream, the maple unchanged. */
:root[data-theme="light"]{
  --ink:#F4F0E7;
  --ink-2:#ECE6D9;
  --ink-3:#E3DBCB;
  --paper:#1D1F2C;
  --dim:rgba(29,31,44,.74);
  --faint:rgba(29,31,44,.36);
  --soft:rgba(29,31,44,.68);
  --gold:#6E5C3B;
  --gold-2:#A8966E;
  --gold-hi:#57492D;
  --line:rgba(29,31,44,.13);
  --gline:rgba(110,92,59,.42);
  --line-2:rgba(29,31,44,.24);
  --gold-wash:rgba(110,92,59,.1);
  --hdr:rgba(244,240,231,.9);
  --bar:rgba(244,240,231,.94);
  --bar-solid:rgba(244,240,231,.98);
  color-scheme:light;
}
/* Contact stays night navy in either theme (app.js sets html.on-contact): the form is one colour, so the page ignores the theme switch */
/* One always-night token set, shared by Contact (either theme), the header, footer and loading screens */
:root[data-theme="light"].on-contact,header,footer,#pre,#wkpre{
  --ink:#12141C;--ink-2:#191C26;--paper:#EFEADF;--dim:rgba(239,234,223,.58);--faint:rgba(239,234,223,.28);
  --soft:rgba(239,234,223,.54);--gold:#CEC0A3;--gold-2:#8E8268;--gold-hi:#E6D9B8;--line:rgba(239,234,223,.12);
  --line-2:rgba(239,234,223,.22);--gline:rgba(206,192,163,.34)}
/* Contact stays night navy in either theme (app.js sets html.on-contact): the form is one colour, so the page ignores the theme switch */
:root[data-theme="light"].on-contact{
  --ink-3:#232735;--gold-wash:rgba(206,192,163,.1);--hdr:rgba(18,20,28,.86);--bar:rgba(18,20,28,.92);--bar-solid:rgba(18,20,28,.98);
  color-scheme:dark}
/* The frame of the site stays night-navy in either theme: the header, the
   footer and the loading screen, so the beige mark always sits on dark.
   The home photograph keeps its night palette too. */
header,footer,#pre,#wkpre{--hdr:rgba(18,20,28,.94);color:var(--paper)}
footer{background:var(--ink)}
/* light mode: the footer is paper with dark type and the dark mark (Contact keeps it night navy) */
:root[data-theme="light"]:not(.on-contact) footer{--ink:#F4F0E7;--paper:#1D1F2C;--dim:rgba(29,31,44,.74);--faint:rgba(29,31,44,.36);--soft:rgba(29,31,44,.68);--gold:#6E5C3B;--gold-2:#A8966E;--gold-hi:#57492D;--line:rgba(29,31,44,.13);--line-2:rgba(29,31,44,.22);--gline:rgba(110,92,59,.42)}
:root[data-theme="light"]:not(.on-contact) footer .fm img{content:url(img/logo-dark.png)}
html.on-contact #themesw{display:none}   /* Contact ignores the theme switch, so the switch is not offered there */
.vhero{--paper:#EFEADF;--dim:rgba(239,234,223,.78);--soft:rgba(239,234,223,.66);--gold:#CEC0A3;--gold-hi:#E6D9B8;--ink:#12141C;color:var(--paper)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:none;-webkit-font-smoothing:antialiased;color-scheme:dark;scrollbar-color:var(--gline) var(--ink)}
body{background:var(--ink);color:var(--paper);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:1.65;font-weight:400;
  overflow-x:hidden}
body.locked{overflow:hidden}
body.locked footer{visibility:hidden}   /* SEO: the footer is held back until the page and loader are ready, so it never jumps (layout shift) when the page fills in */
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:1px solid var(--gold-hi);outline-offset:3px}
#main [tabindex="-1"]:focus{outline:none}
h1,h2,h3,blockquote{text-wrap:balance}
p{text-wrap:pretty}
.skip{position:fixed;left:var(--pad);top:14px;z-index:10001;padding:10px 18px;border-radius:var(--arch);
  background:var(--gold);color:var(--ink);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none;outline-offset:2px}

.gara{font-family:var(--f-serif);font-weight:400}
.mono{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ============ PRELOADER ============ */
#pre{position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;transition:opacity .4s var(--ease),visibility .4s}
#pre.gone{opacity:0;visibility:hidden}
html.seen #pre,html.cb-pen-boot #pre{display:none}
html.cb-pen-boot body{background:#12141C}
html.cb-pen-exit body{transition:background-color .6s var(--ease)}   /* light mode: the dark intro room fades to cream instead of flipping */   /* dark-mode ink until the hero is up, whatever theme is chosen */
/* Home intro (v40.6). The pen draws in a fixed place above the headline. While it draws, the site comes up around it,
   one piece after another from the top (cb-pen-hold is lifted shortly after the drawing starts and each piece has its
   own delay). Nothing pops: every piece fades and rises. The video stays hidden until the drawing is done. */
html.cb-pen-boot #hdr{transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.cb-pen-boot .vhero-in>*,html.cb-pen-boot .vhero-foot{transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
html.cb-pen-boot #hdr{transition-delay:0s}
html.cb-pen-boot .vhero-in h1{transition-delay:.15s}
html.cb-pen-boot .vhero-in p{transition-delay:.25s}
html.cb-pen-boot .vhero-in .acts{transition-delay:.35s}
html.cb-pen-boot .vhero-foot{transition-delay:.45s}
html.cb-pen-boot .vhero-in h1{transition-property:opacity,transform,filter;transition-duration:.8s,1.1s,.8s;transition-timing-function:var(--ease)}   /* the headline also comes out of a 6px blur */
html.cb-pen-hold #hdr{opacity:0;transform:translateY(-10px);pointer-events:none}
html.cb-pen-hold .vhero-in>*,html.cb-pen-hold .vhero-foot{opacity:0;transform:translateY(18px);pointer-events:none}
html.cb-pen-hold .vhero-in h1{filter:blur(6px)}
/* a tap, scroll attempt or key press skips ahead: everything arrives at once, quickly */
html.cb-pen-skip #hdr,html.cb-pen-skip .vhero-in>*,html.cb-pen-skip .vhero-foot{transition-delay:0s!important;transition-duration:.3s!important}
/* the finished mark waits for the video with a slow, gentle pulse */
.vhero .cb-hero-placeholder.cb-pulse .cb-art,.vhero .cb-hero-placeholder.cb-pulse>img{animation:cb-pulse 2.4s ease-in-out infinite}
@keyframes cb-pulse{0%,100%{opacity:1}50%{opacity:.55}}   /* opacity only: nothing for the flight to measure against */
@media(prefers-reduced-motion:reduce){
  .vhero .cb-hero-placeholder.cb-pulse .cb-art,.vhero .cb-hero-placeholder.cb-pulse>img{animation:none}
  html.cb-pen-boot #hdr,html.cb-pen-boot .vhero-in>*,html.cb-pen-boot .vhero-foot{transition:none;transform:none;filter:none}
}
#pre .wrap,#wkpre .wrap{display:grid;justify-items:center;gap:30px;padding:20px}
/* the logo builds upward as the site loads */
.logo-build{position:relative;width:clamp(210px,30vw,430px);line-height:0}
.logo-build img{display:block;width:100%;height:auto}
.logo-build .ghost{opacity:.12}
.logo-build .fill{position:absolute;left:0;top:0;clip-path:inset(100% 0 0 0)}
#pre .track,#wkpre .track{width:min(210px,54vw);height:1px;background:var(--line);position:relative;overflow:hidden}
#pre .track i,#wkpre .track i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}

/* Work and Contact loading: the pen mark, readiness bar and rotating copy. */
#wkpre{position:fixed;inset:0;z-index:10000;background:var(--ink);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
#wkpre.on{opacity:1;visibility:visible;transition-duration:.15s}
#wkpre .wk-msg{max-width:30ch;min-height:3.2em;margin-top:-6px;text-align:center;color:var(--dim);
  font-size:var(--t-small);line-height:1.6;transition:opacity .25s ease}
#wkpre .wk-msg.out{opacity:0}
@media (prefers-reduced-motion:reduce){#wkpre .wk-msg{transition:none}}

/* ============ HEADER ============ */
header{position:fixed;top:0;left:0;right:0;z-index:900;padding:20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .28s var(--ease),opacity .2s}
header.hide{transform:translateY(-104%)}
/* The solid bar lives on ::before. backdrop-filter (like transform) turns an
   element into the containing block for fixed children, so if it sat on the
   header itself the full-screen mobile menu would be squashed into the bar. */
header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--hdr);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .3s}
header.solid::before{opacity:1}
/* on paper the bar is always there, so the navy mark never sits on a photograph */
:root[data-theme="light"] header:not(.over-hero)::before,:root[data-theme="light"] header.solid:not(.over-hero)::before{opacity:1}
/* Over the hero, contrast belongs to one fading scrim, never to glowing labels.
   It is part of the header, so hiding the header also removes the scrim. */
header.over-hero::before,header.over-hero.solid::before,:root[data-theme="light"] header.over-hero::before{
  opacity:1;bottom:-56px;box-shadow:none;
  background:linear-gradient(to bottom,rgba(18,20,28,.84) 0%,rgba(18,20,28,.76) 52%,rgba(18,20,28,.38) 78%,transparent 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none}
header.over-hero.hide::before{opacity:0}
header.over-hero nav.links a,header.over-hero .theme-sw{text-shadow:none}
header.over-hero{--paper:#EFEADF;--dim:rgba(239,234,223,.85);--gold:#EFEADF;--gold-hi:#E6D9B8;--line-2:rgba(239,234,223,.55);color:var(--paper)}
/* light mode: the nav is a pale bar with dark type and the dark mark, everywhere except over the Home hero, Contact (night navy in either theme),
   and the open mobile menu. Work's photo stage tints the bar further down. */
:root[data-theme="light"]:not(.on-contact) body:not(.locked) header:not(.over-hero){--ink:#F4F0E7;--paper:#1D1F2C;--dim:rgba(29,31,44,.74);--faint:rgba(29,31,44,.36);--soft:rgba(29,31,44,.68);--gold:#6E5C3B;--gold-2:#A8966E;--gold-hi:#57492D;--line:rgba(29,31,44,.13);--line-2:rgba(29,31,44,.22);--gline:rgba(110,92,59,.42);color:var(--paper)}
:root[data-theme="light"]:not(.on-contact) body:not(.locked) header:not(.over-hero)::before{background:var(--header-ground,var(--tint-l,rgba(244,240,231,.96)));-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"]:not(.on-contact) body:not(.locked) header:not(.over-hero) .brand img{content:url(img/logo-dark.png)}
.brand{display:block;line-height:0;position:relative;z-index:951}   /* stays above the open mobile menu */
.brand img{height:clamp(30px,4.4vw,42px);width:auto;display:block;
  transition:opacity .4s var(--ease)}
.brand:hover img{opacity:.78}
nav.links{display:flex;gap:26px;align-items:center;margin-left:auto}
nav.links a{position:relative;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 0}
nav.links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform .3s var(--ease)}
nav.links a.on::after{transform:scaleX(1)}
nav.links a.on{color:var(--gold)}
.book{border:1px solid var(--gold);color:var(--gold);border-radius:var(--arch);
  padding:9px 22px !important;overflow:hidden;position:relative}
.book::after{display:none}
.theme-sw{position:relative;z-index:951;width:34px;height:34px;margin-left:22px;display:grid;place-items:center;
  color:var(--dim);border:1px solid var(--line-2);border-radius:var(--arch);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.theme-sw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;
  transition:opacity .25s var(--ease),transform .35s var(--ease)}
.theme-sw .i-sun{opacity:0;transform:rotate(-40deg) scale(.7)}
:root[data-theme="light"] .theme-sw .i-sun{opacity:1;transform:none}
:root[data-theme="light"] .theme-sw .i-moon{opacity:0;transform:rotate(40deg) scale(.7)}
.theme-sw::before{content:'';position:absolute;inset:-5px}   /* 44px tap target */
@media (hover:hover){
  [data-tooltip]{position:relative}
  [data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:1200;left:50%;top:calc(100% + 9px);transform:translate(-50%,-3px);opacity:0;pointer-events:none;white-space:nowrap;padding:6px 9px;background:var(--ink,#12141C);color:var(--paper,#F2EBDE);font:400 12px/1 var(--f-serif,Georgia,serif);letter-spacing:.02em;transition:opacity .16s var(--ease),transform .16s var(--ease)}
  [data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
}
.paper-menu-icon{display:none}
.burger{display:none;width:26px;height:12px;position:relative;z-index:950}
.burger::before{content:'';position:absolute;inset:-16px -9px}   /* 44px tap target around the 26x12 mark */
.burger i{position:absolute;left:0;width:100%;height:1px;background:var(--paper);transition:transform .3s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{bottom:0}
.burger.x i:first-child{transform:translateY(5.5px) rotate(45deg)}
.burger.x i:last-child{transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:940px){
  nav.links{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:14px;
    clip-path:inset(0 0 100% 0);transition:clip-path .25s var(--ease)}
  nav.links.open{clip-path:inset(0 0 0 0);transition:clip-path .4s cubic-bezier(.32,.72,0,1)}
  nav.links a{font-family:var(--f-display);font-size:var(--t-headline);font-weight:400;letter-spacing:-.015em;line-height:1.06;text-transform:none}
  nav.links a.book{font-family:var(--f-sans);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
  .burger{display:block;margin-left:22px}
  header{justify-content:flex-start}
  .brand{margin-right:auto}
}

/* page transition. The old page fades out fast (150ms, no movement) and the
   new page carries the motion, sliding in from the side it sits on in the nav
   bar. JS toggles the leave-l,leave-r and enter-l,enter-r classes and
   waits for opacity's transitionend.
   #main has NO transform and no will-change at rest: any transform other than
   none makes #main the containing block for position:fixed children. The
   chapter rail is moved out to <body> for the same reason, since #main does
   carry a transform for the 320ms it slides in. */
#main{opacity:1;transition:opacity .32s var(--ease),transform .32s var(--ease)}
#main.leave-l,#main.leave-r{opacity:0;transition:opacity .15s ease-out,transform .15s ease-out}
#main.enter-l{opacity:0;transform:translateX(calc(-1 * var(--tl-dist)));transition:none}
#main.enter-r{opacity:0;transform:translateX(var(--tl-dist));transition:none}
#main.enter-f{opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){
  #main{transition:opacity .2s linear !important;transform:none !important}
  #main.enter-l,#main.enter-r{transform:none}
}

/* reveal. The transition and the stagger delay only exist while an element
   is revealing. JS adds .done once it has finished, so an element's own hover
   transitions (.irow, .rev, .stat) are never overridden or delayed by these. */
.rv-l{overflow:hidden;display:block}
.rv-l>span{display:block;transform:translateY(108%)}
.rv-l.show>span{transform:none;transition:transform .7s var(--ease)}
.show:not(.done)[data-d="1"],.rv-l.show[data-d="1"]>span{transition-delay:.06s}
.show:not(.done)[data-d="2"],.rv-l.show[data-d="2"]>span{transition-delay:.12s}
.show:not(.done)[data-d="3"],.rv-l.show[data-d="3"]>span{transition-delay:.18s}
.show:not(.done)[data-d="4"],.rv-l.show[data-d="4"]>span{transition-delay:.24s}
.show:not(.done)[data-d="5"],.rv-l.show[data-d="5"]>span{transition-delay:.3s}

section{padding:clamp(74px,10vw,158px) var(--pad)}
h1.d1{font-family:var(--f-display);font-weight:400;font-size:var(--t-display);
  line-height:1;letter-spacing:-.02em}
h2.d2{font-family:var(--f-display);font-weight:400;font-size:var(--t-headline);
  line-height:1.06;letter-spacing:-.015em}
/* pulled quotes and statements: the serif's italic carries a person's voice */
.quote{font-family:var(--f-serif);font-style:italic;font-size:var(--t-quote);line-height:1.34;letter-spacing:-.01em;color:var(--paper)}
.quote.statement{font-style:normal}
p.lead{font-size:var(--t-lead);line-height:1.7;color:var(--dim);max-width:60ch;font-weight:400}

/* arch frame */
.arch{border-radius:var(--arch);overflow:hidden;background:var(--ink-2);position:relative}
.arch::after{content:'';position:absolute;inset:0;border-radius:var(--arch);
  border:1px solid var(--gline);pointer-events:none}

/* interior page header */
.hero{min-height:100svh;padding-top:clamp(112px,15vh,180px);padding-bottom:30px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative}
.hero-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:flex-end;
  margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--gold)}

/* home: one full bleed film */
.vhero{position:relative;height:100svh;min-height:600px;overflow:hidden;padding:0;display:grid}
.vhero-media{position:absolute;inset:0;z-index:0;background:var(--ink)}
.vhero-media{container-type:size}
.vhero-media img{width:100%;height:100%;object-fit:cover}
/* the 16:9 player is sized to cover the hero like object-fit:cover, and
   fades in once it has had time to start, hiding YouTube's loading frame */
.vhero-yt{position:absolute;top:50%;left:50%;border:0;pointer-events:none;
  width:max(100cqw,calc(100cqh*16/9));height:max(100cqh,calc(100cqw*9/16));
  transform:translate(-50%,-50%) scale(1.16);   /* pushes YouTube's title bar and logo past the edges */
  opacity:0;transition:opacity 1.2s var(--ease)}
.vhero-yt.on{opacity:1}
.vhero-player .vhero-yt{transition:opacity 1s var(--ease) .3s}   /* the video comes in slowly, just after the logo starts to move */
.vhero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,20,28,.88) 0,rgba(18,20,28,.5) 28%,transparent 58%)}
.vhero-in{position:relative;z-index:2;align-self:end;width:100%;
  padding:0 var(--pad) clamp(38px,7vh,86px)}
.vhero h1{font-family:var(--f-display);font-weight:400;
  font-size:var(--t-hero);line-height:1.06;letter-spacing:-.02em;max-width:15ch}
.vhero h1 .rv-l{padding-bottom:.16em;margin-bottom:-.16em}
.vhero p{color:var(--dim);max-width:46ch;margin-top:22px;font-size:var(--t-lead);
  line-height:1.7}
.vhero .acts{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}
.vhero .quiet{color:var(--soft)}
@media(max-width:620px){.vhero .quiet{display:none}}   /* repeats the button beside it */
.vhero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--pad) 16px;display:flex;justify-content:space-between;gap:16px;
  color:var(--soft);pointer-events:none}
@media(max-width:700px){.vhero-foot span:nth-child(2){display:none}}


/* index rows */
.ilist{border-top:1px solid var(--line)}
.irow{display:grid;grid-template-columns:46px 62px 1fr auto auto;gap:20px;align-items:center;
  padding:clamp(16px,2.1vw,26px) 0;border-bottom:1px solid var(--line);
  width:100%;text-align:left;font:inherit}
button.irow>*{transition:transform .3s var(--ease)}
.irow .n{color:var(--gold);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.irow .thumb{width:62px;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2);
  border-radius:var(--arch)}
.irow .thumb img{transition:transform .4s var(--ease)}
.irow .t{font-family:var(--f-serif);font-size:var(--t-title);line-height:1.2;letter-spacing:-.01em;
  transition:color .3s,transform .3s var(--ease)}
.irow .c,.irow .y{color:var(--dim);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
/* home: no tradition column */
.irow.short{grid-template-columns:62px 1fr auto}
/* about: number, title, description; not a link */
.irow.plain{grid-template-columns:1fr 1.5fr;cursor:default;align-items:baseline}
.irow.plain .d{color:var(--dim);font-size:var(--t-body);line-height:1.65}
@media(max-width:760px){.irow{grid-template-columns:36px 50px 1fr;gap:14px}.irow.short{grid-template-columns:50px 1fr auto;gap:14px}
  .irow .c,.irow .y{display:none}.irow .thumb{width:50px}
  .irow.plain{grid-template-columns:1fr;row-gap:8px}}

/* sequences: a couple's strip of frames, used by the Work stage */
.seq-count{color:var(--gold);font-variant-numeric:tabular-nums;font-size:var(--t-label);font-weight:500;letter-spacing:.14em}
.seq-strip{display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding-bottom:2px}
.seq-strip::-webkit-scrollbar{display:none}
/* snapping is off while a hand is on the strip and while it glides to rest,
   so it can't fight the drag; JS lands exactly on a frame before turning it back on */
.seq-strip.drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.frame{--w:clamp(196px,23vw,310px);flex:0 0 min(88vw,calc(var(--w)*4/3*var(--ar,.75)));scroll-snap-align:start}
.frame .fr-img{aspect-ratio:var(--ar,3/4);overflow:hidden;background:var(--ink-2);position:relative;
  border-radius:var(--arch)}
.fr-cap{display:flex;gap:11px;padding-top:13px;color:var(--dim);font-size:var(--t-small);line-height:1.6}
.fr-no{color:var(--gold);font-variant-numeric:tabular-nums;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  padding-top:3px;flex:0 0 auto}
.seq-bar{height:1px;background:var(--line);margin-top:24px;position:relative;overflow:hidden}
.seq-bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.frame .fr-img{cursor:zoom-in}
.frame .fr-img:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* Photos can't be dragged out or long-pressed to save (the script also blocks right-click) */
img{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Larger view of a strip's photo. Always night navy, like the header. */
#lb{--ink:#12141C;--paper:#EFEADF;--dim:rgba(239,234,223,.7);--gold:#CEC0A3;--line:rgba(239,234,223,.18);
  position:fixed;inset:0;z-index:2000;background:#0B0C12;color:var(--paper);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  opacity:0;transition:opacity .28s var(--ease)}
#lb[hidden]{display:none}
#lb.on{opacity:1}
html.lb-open{overflow:hidden}
.lb-fig{margin:0;height:100vh;height:100dvh;padding:64px 0 22px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-width:0;touch-action:pan-y}
.lb-fig img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);
  object-fit:contain;transform:scale(.985);transition:opacity .22s ease,transform .45s var(--ease)}
#lb.on .lb-fig img{transform:none}
.lb-fig img.swap{opacity:0}
.lb-fig figcaption{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:18px;width:min(640px,100%);
  color:var(--dim);font-size:var(--t-small);line-height:1.6}
.lb-no{color:var(--gold);font-variant-numeric:tabular-nums;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;padding-top:3px}
.lb-cap{color:var(--paper);flex:1 1 0;min-width:0}
.lb-t{flex-basis:100%;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
.lb-prev,.lb-next,.lb-x{width:48px;height:48px;display:grid;place-items:center;color:var(--paper);
  border:1px solid var(--line);border-radius:var(--arch);transition:border-color .2s,color .2s,opacity .2s}
.lb-prev,.lb-next{margin:0 clamp(8px,2.4vw,32px)}
.lb-x{position:absolute;top:14px;right:14px}
.lb-prev svg,.lb-next svg,.lb-x svg{width:16px;height:16px}
.lb-prev:disabled,.lb-next:disabled{opacity:.2;pointer-events:none}
.lb-prev:focus-visible,.lb-next:focus-visible,.lb-x:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
@media (hover:hover){.lb-prev:hover,.lb-next:hover,.lb-x:hover{border-color:var(--gold);color:var(--gold)}}
@media (max-width:700px){
  #lb{grid-template-columns:minmax(0,1fr)}
  .lb-fig{padding:64px 14px 84px}
  .lb-fig img{max-height:calc(100dvh - 230px)}
  .lb-prev,.lb-next{position:absolute;bottom:18px;margin:0}
  .lb-prev{left:14px}.lb-next{right:14px}
}
@media (prefers-reduced-motion:reduce){.lb-fig img,#lb.on .lb-fig img{transform:none}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split figure{aspect-ratio:4/5}

/* band */
.band{background:var(--ink-2);position:relative;overflow:hidden}
.band-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,80px);align-items:center}
@media(max-width:860px){.band-in{grid-template-columns:1fr}}



/* packages */

/* tally: the archive's size as one figure and the sentence that explains it */
.tally{padding:0;position:relative;--paper:#EFEADF;--gold:#CEC0A3;--ink-2:#191C26;color:var(--paper)}   /* the wall is night in either theme */
.tally-pin{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mosaic{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(5,1fr);gap:2px}
.mo-t{overflow:hidden;background:var(--ink)}
.mo-t img{width:100%;height:100%;object-fit:cover;display:block}
.mo-t.mo-mid img{object-position:center}
.tally-live .mo-t.mo-mid img{object-fit:contain;transform:scale(var(--mo-photo-scale,1))}
@media(max-width:900px){
  .mosaic{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(7,1fr);height:calc(100vw * 14 / 15);top:50%;bottom:auto;margin-top:calc(-100vw * 7 / 15)}
}
/* with motion the section is tall and the wall sticks while tallyScene() (app.js) zooms it out and dims it under the caption */
.tally-live{height:calc(100svh + 160svh)}
.tally-live .tally-pin{position:sticky;top:0;height:100svh}
.tally-live .mosaic{transform:scale(9)}
.tally-live .mo-t{opacity:var(--mo-neighbours,0)}
.tally-live .mo-t.mo-mid{opacity:var(--mo-mid,1)}
.tally-live .tally-cap{opacity:0}
@media(max-width:900px){
  .tally-live{height:calc(100svh + 110svh)}
  .tally-live .mosaic{transform:scale(4.6)}
}
.tally:not(.tally-live) .mo-t{opacity:.2}
.tally:not(.tally-live) .mo-t.mo-mid{opacity:.35}
.tally-cap{position:relative;z-index:2;width:min(100% - 2*var(--pad),900px);margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,26px)}
.tally-cap::before{content:'';width:48px;height:1px;background:var(--gold);margin-bottom:clamp(4px,1vw,12px)}
.tally-big{font-family:var(--f-display);font-size:clamp(68px,15vw,230px);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:lining-nums;text-shadow:0 2px 40px rgba(18,20,28,.55)}
.tally-big span{color:var(--gold)}
.tally-copy{color:var(--paper);font-size:var(--t-lead);line-height:1.5;max-width:30ch;text-wrap:balance;text-shadow:0 1px 18px rgba(18,20,28,.7)}
.tally-more{color:var(--gold);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
/* light mode: the wall washes out to paper, the figure is dark ink, and the pool behind it is a faint pale */
:root[data-theme="light"] .tally{--paper:#1D1F2C;--gold:#6E5C3B;--ink-2:#F4F0E7;background:#F4F0E7}
:root[data-theme="light"] .tally-big span{color:var(--paper)}
:root[data-theme="light"] .tally-big,:root[data-theme="light"] .tally-copy{text-shadow:0 1px 24px rgba(244,240,231,.8)}
:root[data-theme="light"] .tally-pin::after{background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(244,240,231,.5),rgba(244,240,231,0) 100%)}
/* a soft pool of night behind the figure so it reads over the wall */
.tally-pin::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--cap-o,1);background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(18,20,28,.62),rgba(18,20,28,0) 100%)}

/* home voices: one review set large, three more beside it */
.voices{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:start}
@media(max-width:860px){.voices{grid-template-columns:1fr}}
.v-lead blockquote p{font-family:var(--f-display);font-size:clamp(36px,5.4vw,76px);line-height:1.08;letter-spacing:-.018em;
  color:var(--paper);max-width:17ch}
.v-lead .hang{display:inline-block;margin-left:-.42em;width:.42em;color:var(--gold)}
@media(max-width:620px){.v-lead .hang{margin-left:0;width:auto}}
.v-lead figcaption{margin-top:clamp(22px,2.6vw,34px);padding-top:16px;border-top:1px solid var(--gline);max-width:28ch;
  color:var(--gold);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.v-more{display:grid;gap:0;padding-top:.6em}
.v-more figure{padding:20px 0;border-top:1px solid var(--line)}
.v-more figure:first-child{border-top:0;padding-top:0}
.v-more p{font-family:var(--f-serif);font-style:italic;font-size:var(--t-lead);line-height:1.55;color:var(--paper)}
.v-more figcaption{margin-top:8px;color:var(--soft);font-size:var(--t-small)}
.v-more .btn{justify-self:start;margin-top:22px}

/* ratings: small cards in each platform's own dress (white card, the
   platform's type and colours, its real mark), so they read as the genuine
   badges they point to. Dark or light with the site, like the platforms' own modes. */
.proof{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.6vw,44px);
  /* dark: the platforms' own dark-mode colours */
  --pb-bg:#202124;--pb-line:rgba(255,255,255,.08);--pb-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.28);
  --pb-text:#E8EAED;--pb-sub:#9AA0A6;--pb-g-num:#F29900;--pb-star-off:#5F6368;--pb-g-link:#8AB4F8;
  --pb-m-num:#4599FF;--pb-m-sub:#B0B3B8;--pb-m-link:#4599FF}
:root[data-theme="light"] .proof{
  --pb-bg:#fff;--pb-line:rgba(0,0,0,.06);--pb-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.12);
  --pb-text:#202124;--pb-sub:#5F6368;--pb-g-num:#E7711B;--pb-star-off:#DADCE0;--pb-g-link:#1A73E8;
  --pb-m-num:#0866FF;--pb-m-sub:#65676B;--pb-m-link:#0866FF}
.pb{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 20px 14px 16px;background:var(--pb-bg);border:1px solid var(--pb-line);border-radius:10px;
  box-shadow:var(--pb-shadow);
  font-family:Roboto,'Helvetica Neue',Arial,system-ui,sans-serif;color:var(--pb-text);letter-spacing:0;
  transition:box-shadow .2s ease,transform .2s ease}
.pb-logo{width:34px;height:34px;flex:none}
.pb-meta{width:40px;height:40px}
.pb-body{display:grid;gap:2px;line-height:1.25}
.pb-name{font-size:13px;font-weight:500;color:var(--pb-text)}
.pb-score{display:flex;align-items:center;gap:7px}
.pb-score b{font-size:20px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pb-g .pb-score b{color:var(--pb-g-num)}
.pb-m .pb-score b{color:var(--pb-m-num)}
.pb-rec{font-size:13px;color:var(--pb-m-sub)}
.pb-sub{font-size:12px;color:var(--pb-sub)}
.pb-m{font-family:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif}
.pb-m .pb-sub{color:var(--pb-m-sub)}
.stars{position:relative;display:inline-flex;gap:1px;color:var(--pb-star-off);line-height:0}
.stars svg{width:16px;height:16px;fill:currentColor;flex:none}
.stars-fill{position:absolute;inset:0 auto 0 0;display:inline-flex;gap:1px;overflow:hidden;color:#FBBC04}
.pb:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.proof-s{margin-top:28px}
@media (hover:hover) and (pointer:fine){
  .pb:hover{transform:translateY(-1px);border-color:var(--pb-sub)}
  .pb-g:hover .pb-sub{color:var(--pb-g-link);text-decoration:underline}
  .pb-m:hover .pb-sub{color:var(--pb-m-link);text-decoration:underline}
}
@media(max-width:520px){.proof{display:grid}.pb{width:100%}}

/* reviews */
.rgrid{columns:3;column-gap:clamp(28px,4vw,64px)}
@media(max-width:980px){.rgrid{columns:2}}@media(max-width:640px){.rgrid{columns:1}}
.rev{break-inside:avoid;padding:clamp(22px,2.4vw,30px) 0 clamp(30px,3.4vw,44px);border-top:1px solid var(--line)}
.rev p{color:var(--paper);font-size:var(--t-body);line-height:1.65}
.rev .who{margin-top:14px;color:var(--gold);font-size:var(--t-small);line-height:1.5}
/* each review card: its rating as posted (Google stars, or Facebook's "recommends"),
   the platform's mark, the best sentence or two in Caslon, and the reviewer's name.
   The whole card opens the full review where it was posted: the name's link is stretched over it. */
.rgrid{--pb-star-off:var(--faint)}
.rev{position:relative;transition:border-color .2s ease}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.rev-rec{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.rev-top .pb-logo{width:20px;height:20px}
.rev-top .pb-meta{width:24px;height:24px}
.rev .rev-x{font-family:var(--f-serif);font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--paper)}
.rev-x q{quotes:"“" "”"}
.rev .who{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rev-open{color:var(--gold);font-size:var(--t-small);text-decoration:none}
.rev-open::after{content:"";position:absolute;inset:0}
@media (hover:hover) and (pointer:fine){
  .rev:hover{border-top-color:var(--gold)}
  .rev:hover .rev-open{color:var(--gold-hi)}
}
.rev-open:focus-visible{outline:none}
.rev-open:focus-visible::after{outline:2px solid var(--gold-hi);outline-offset:4px}


/* ============ LETTER CONTACT ============ */
.letter-h{font-family:var(--f-display);font-weight:400;
  font-size:var(--t-headline);line-height:1.06;letter-spacing:-.015em;margin-bottom:18px}
/* enquiry form: labels above boxed fields, the vocabulary Studio Ninja's
   builder can reproduce (font, size, field style, button, colours) */
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.fq{display:grid;gap:8px;align-content:start}
.fq.wide{grid-column:1/-1}
.fq-head{grid-column:1/-1;font-family:var(--f-serif);font-weight:400;font-size:var(--t-title);line-height:1.2;letter-spacing:-.01em;
  color:var(--paper);padding-top:18px;border-top:1px solid var(--line);margin-top:14px}
.fq-head:first-child{margin-top:0;padding-top:0;border-top:0}
.fq-hint{font-size:13px;line-height:1.5;color:var(--soft)}
.fq input[type=date]{min-height:50px;cursor:pointer}
.fq input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75}
.fq input[type=date].empty::-webkit-datetime-edit{color:var(--soft)}
.fq label{font-size:var(--t-small);line-height:1.4;color:var(--paper);font-weight:500}
.fq .req{margin-left:6px;color:var(--soft);font-weight:400;font-size:12px}
.fq input,.fq textarea,.fq select{width:100%;font:inherit;font-size:var(--t-body);line-height:1.5;color:var(--paper);
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--arch);padding:12px 14px;
  caret-color:var(--gold);outline:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.fq textarea{resize:vertical;min-height:0}
.fq input::placeholder,.fq textarea::placeholder{color:var(--soft)}
.fq input:hover,.fq textarea:hover,.fq select:hover{border-color:var(--gold-2)}
.fq input:focus,.fq textarea:focus,.fq select:focus{border-color:var(--gold);background:var(--ink)}
.fq input:focus-visible,.fq textarea:focus-visible,.fq select:focus-visible{outline:1px solid var(--gold);outline-offset:1px}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.sel::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-5px;pointer-events:none;
  border:solid var(--gold);border-width:0 1px 1px 0;transform:rotate(45deg)}
.fq.bad input{border-color:var(--maple)}
.fq-msg{font-size:var(--t-small);line-height:1.5;color:var(--paper);position:relative;padding-left:14px}
.fq-msg::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--maple)}
.enq.sent input,.enq.sent textarea,.enq.sent select{background:transparent;border-color:var(--line)}
@media(max-width:620px){.enq-grid{grid-template-columns:1fr}}
/* the send row and the thank-you share one grid cell, so swapping them
   never changes the height of the page */
.letter-end{display:grid;margin-top:clamp(34px,4.6vw,60px);
  padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
.letter-send,.letter-ok{grid-area:1/1}
.letter-send{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  transition:opacity .15s ease-out,visibility 0s .15s}
.letter-send.gone{opacity:0;visibility:hidden}
.letter-note{font-family:var(--f-sans);color:var(--soft);font-size:var(--t-small);line-height:1.6;letter-spacing:0;max-width:44ch}
.letter-ok{align-self:center;color:var(--gold);font-family:var(--f-serif);font-style:italic;
  font-size:var(--t-title);line-height:1.2;letter-spacing:-.01em;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s,visibility 0s .1s}
.letter-ok.on{opacity:1;visibility:visible;transform:none}
/* while sending, the gold fill stays on */
.btn.busy i{clip-path:inset(0 0 0 0)}
/* a failed send: one maple spark, the words stay ivory */
.letter-err{display:none;position:relative;margin-top:18px;padding-left:18px;max-width:62ch;
  font-family:var(--f-sans);font-size:var(--t-small);line-height:1.6;letter-spacing:0;color:var(--paper)}
.letter-err.on{display:block}
.letter-err::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--maple)}
.letter-err a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.btn:disabled{cursor:default}

/* Studio Ninja enquiry form, embedded. Its iframeResizer script sets the
   height to fit the form, so the frame never scrolls on its own. */
.sn-wrap{max-width:760px;width:100%}
/* The form loads once, in #snhost, as soon as the site has settled, and stays
   loaded: moving an iframe reloads it, so the holder never moves in the
   document. On Contact it's laid over .sn-slot, which keeps its space. */
#main{position:relative}
#snhost{position:absolute;left:0;top:0;width:min(760px,100%)}
#snhost.parked{height:0;overflow:hidden;visibility:hidden;pointer-events:none}
/* color-scheme matches the form's own page: when an iframe's scheme differs
   from the site's (dark), browsers paint a white backdrop behind it */
#snhost iframe{display:block;width:1px;min-width:100%;height:1363px;border:0;background:transparent;color-scheme:light;
  opacity:0;transition:opacity .4s var(--ease)}
#snhost.ready iframe{opacity:1}
.sn-slot{position:relative;height:1363px}
.sn-wait{padding-top:8px;color:var(--soft);font-size:var(--t-small);line-height:1.6}
.sn-ready .sn-wait{display:none}
/* the Prices estimate can't be passed into the embed, so it sits above it
   with a button that copies it for the message box */
.sn-est{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(22px,3vw,34px);
  padding:20px 22px;border:1px solid var(--line-2);border-radius:var(--arch);background:var(--ink-2)}
.sn-est p{color:var(--paper);font-size:var(--t-body);line-height:1.6}
.sn-est .k{color:var(--gold);font-size:var(--t-small);line-height:1.4;font-weight:500}
.sn-copy{font:inherit;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--gold);background:none;border:1px solid var(--gold);border-radius:var(--arch);padding:10px 18px;cursor:pointer;
  transition:transform .16s ease-out}
/* press feedback, the same as .btn; the package cards are wide, so they give less */
.sn-copy:active,.pr .filter-toggle button:active,.pr .currency-toggle button:active{transform:scale(.97)}
.pill:active .pill-inner{transform:scale(.99)}
.sn-copy:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.sn-fallback{margin-top:18px;color:var(--soft);font-size:var(--t-small);line-height:1.6;max-width:62ch}
.sn-fallback a,.quickline a{padding-block:14px}   /* taller tap area; inline padding leaves the line alone */
.sn-fallback a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* contact side */
.dl{list-style:none}
.dl li{padding:18px 0;border-bottom:1px solid var(--line)}
.dl .k{color:var(--gold);margin-bottom:6px}
.dl .v{font-family:var(--f-serif);font-size:var(--t-name);line-height:1.3}
.dl a:hover{color:var(--gold)}
/* contact: what to expect on the left, the form on the right */
.cg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,110px);align-items:start;
  padding:clamp(130px,18vh,190px) var(--pad) clamp(64px,9vh,110px)}
.cg-side{position:sticky;top:120px}
.cg-side .lead{max-width:34ch}
.quickline{list-style:none;display:grid;gap:10px;margin-top:clamp(26px,3.4vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.quickline li{color:var(--dim);font-size:var(--t-small);line-height:1.6}
.quickline a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--gline);text-underline-offset:3px}
.quickline a:hover{color:var(--gold)}
.quickline b{color:var(--gold);font-weight:500;margin-right:6px}
.enq{max-width:760px}
@media(max-width:900px){.cg{grid-template-columns:1fr;padding-top:clamp(120px,16vh,160px)}.cg-side{position:static}}

/* about: hiring */
.hire-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:end}
.hire-mail{display:grid;gap:26px;justify-items:start}
.hire-addr{font-family:var(--f-display);font-size:clamp(30px,4.4vw,64px);line-height:1.05;letter-spacing:-.015em;color:var(--gold);
  overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;
  text-decoration-color:var(--gline);transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
.hire-addr:hover{color:var(--gold-hi);text-decoration-color:currentColor}
@media(max-width:860px){.hire-in{grid-template-columns:1fr;align-items:start}}

.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--gold);color:var(--gold);
  border-radius:var(--arch);padding:15px 28px;position:relative;overflow:hidden;
  letter-spacing:.14em;font-size:var(--t-label);font-weight:500;text-transform:uppercase;font-family:var(--f-sans)}
/* hover fill: a gold layer carrying an ink copy of the label (JS copies the
   text into data-l), wiped in with clip-path. The label underneath never
   changes colour, so dark text never sits on the dark background mid-hover. */
.btn,.book{transition:transform .16s ease-out}
.btn:active,.book:active{transform:scale(.97)}
.btn span,.book span{position:relative;z-index:1}
.btn i,.book i{position:absolute;inset:0;z-index:2;background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-style:normal;pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--ease)}
.btn i::after,.book i::after{content:attr(data-l)}

/* closing */
.cta{border-top:1px solid var(--line);
  padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(80px,10vw,150px)}
.cta h2{font-family:var(--f-display);font-weight:400;
  font-size:var(--t-display);line-height:1;letter-spacing:-.02em}

/* footer */
footer{padding:clamp(48px,6vw,84px) var(--pad) 26px;border-top:1px solid var(--line)}
.ftop{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:52px}
@media(max-width:820px){.ftop{grid-template-columns:1fr}}
.fm{line-height:0}
.fm img{width:clamp(210px,26vw,320px);height:auto;display:block}
.fc h2{color:var(--gold);margin-bottom:18px;font-weight:500}
.fc a{display:block;padding:5px 0;color:var(--dim);font-size:var(--t-small);line-height:1.6;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;
  border-top:1px solid var(--line);color:var(--gold)}
.fbot-copy{display:contents}
.credit-link{display:contents;color:inherit}
.booking-mobile{display:none}
.fbot .credit-logo{height:15px;width:auto;display:block;opacity:.9}
@media(max-width:820px){
  .fbot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px;align-items:start}
  .fbot>span:nth-child(2){text-align:right}
  .fbot .credit-logo{grid-column:1/-1;justify-self:end;height:11px;max-width:120px;object-fit:contain}
}
@media(max-width:700px){
  .fbot{font-size:var(--t-small);line-height:1.35}
  .fbot-copy{display:flex;flex-direction:column;gap:2px}
  .fbot-copy>span{font-family:var(--f-serif);font-size:var(--t-small);font-weight:400;letter-spacing:.025em;text-transform:none;line-height:1.6;color:var(--dim)}
  .fbot>span.fbot-booking{grid-column:1/-1;grid-row:1;text-align:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .fbot-booking .booking-desktop{display:none!important}
  .fbot-booking .booking-mobile{display:block!important}
  .fbot-copyright{grid-column:1;grid-row:2;text-align:left}
  .fbot .credit-link{grid-column:2;grid-row:2;justify-self:end;align-self:end;display:block}
  .fbot .credit-logo{grid-row:auto}
}

/* Work: founder portrait and a short introduction. */
.work-founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:clamp(32px,7vw,100px)}
.founder-portrait{margin:0;aspect-ratio:4/5;width:100%;max-width:420px;justify-self:center;border:1px solid var(--line-2);background:var(--ink-2);display:grid;place-items:center;color:var(--soft)}
.founder-portrait{position:relative;overflow:hidden}.founder-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.founder-copy{max-width:38ch}
.founder-copy h2{margin:14px 0 24px}
@media(max-width:700px){.work-founder{grid-template-columns:1fr;gap:30px}.founder-portrait{max-width:300px}.founder-copy{max-width:100%}}

/* ============ PRICES ============
   Ported from Packages Page v2 onto the site's own tokens. Everything is
   scoped under .pr so none of it leaks into the other pages. */
.pr .is-hidden{display:none !important}

/* location + service switches */
.pr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--gold)}
.pr .filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.pr .filter-bar-label{color:var(--soft)}
.pr .filter-toggle,.pr .currency-toggle{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-2);
  border-radius:var(--arch);padding:3px;gap:2px}
.pr .filter-toggle button,.pr .currency-toggle button{color:var(--dim);font-family:var(--f-sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border-radius:1px;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,transform .16s ease-out}
.pr .filter-toggle button.is-active,.pr .currency-toggle button.is-active{background:var(--gold);color:var(--ink)}
.pr .filter-toggle button:focus-visible,.pr .currency-toggle button:focus-visible{outline:1px solid var(--gold-hi);outline-offset:2px}
.pr .note-box{border:1px solid var(--line);border-radius:var(--arch);padding:14px 16px;margin-top:12px;background:var(--ink-2)}
.pr .note-box+.note-box{margin-top:10px}
/* shown from display:none, so it eases in from @starting-style; hiding stays instant */
.pr .note-box{transition:opacity .22s var(--ease),transform .22s var(--ease)}
@starting-style{.pr .note-box{opacity:0;transform:translateY(-4px)}}
.pr .note-box p{font-size:var(--t-small);line-height:1.6;color:var(--dim)}
.pr .note-box p+p{margin-top:8px}
.pr .note-box strong{color:var(--paper);font-weight:500}
#international-note{max-width:62ch;margin-top:18px}

/* one package at a time */
.pr-pkgs{padding-top:clamp(20px,3vw,40px)}
.pkg-section{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:24px clamp(28px,6vw,96px);
  padding:clamp(44px,6vw,88px) 0;border-bottom:1px solid var(--line)}
.pkg-section:first-child{border-top:1px solid var(--line)}
@media(max-width:820px){.pkg-section{grid-template-columns:1fr}}
.pr-tier{display:flex;align-items:center;gap:12px;color:var(--gold);margin-bottom:22px}
.pkg-intro h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-headline-s);
  line-height:1.04;letter-spacing:-.015em}
.pkg-price{font-family:var(--f-serif);font-weight:400;font-size:var(--t-price);line-height:1.1;margin-top:18px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.pkg-price sup{font-family:var(--f-sans);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;color:var(--gold);margin-left:8px;
  vertical-align:middle;position:relative;top:-.2em}
.pkg-intro .lead{margin-top:18px;max-width:44ch}
.pkg-cta{margin-top:30px}
.feature-rows{list-style:none;align-self:start}
.feature-rows li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;color:var(--dim);font-size:var(--t-body);line-height:1.65}
.feature-rows li:first-child{padding-top:0}
.feature-rows li::before{content:'';flex:0 0 10px;height:1px;margin-top:.8em;background:var(--gold-2)}

/* compare */
.compare-wrap{overflow-x:auto;margin-top:clamp(30px,4vw,48px);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.compare-grid{min-width:760px;display:grid;grid-template-columns:1.15fr repeat(4,1fr);border-top:1px solid var(--line-2)}
.compare-grid>div{position:relative;padding:15px 14px;border-bottom:1px solid var(--line);font-size:var(--t-small);line-height:1.6;color:var(--dim);display:flex;align-items:center}
/* Phones: all four packages side by side, nothing off screen. Each row's
   label moves onto its own line above the four values, the four columns
   share the width, and the package names stay pinned while you scroll. */
@media(max-width:820px){
  .compare-wrap{overflow:visible}
  .compare-grid{min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
  .compare-grid>div:first-child{display:none}
  .compare-grid>div{padding:10px 6px 12px;font-size:13px;line-height:1.35;justify-content:center;text-align:center;border-bottom:0}
  .compare-grid>div:not(.row-label):not(.col-head){border-bottom:1px solid var(--line)}
  .compare-grid>div:not(.row-label):not(.col-head)+div:not(.row-label):not(.col-head){border-left:1px solid var(--line)}
  .compare-grid .row-label{grid-column:1/-1;justify-content:flex-start;text-align:left;padding:18px 0 2px;color:var(--gold);font-size:10.5px}
  .compare-grid .col-head{position:sticky;top:0;z-index:2;background:var(--ink);align-items:center;text-align:center;gap:2px;
    padding:14px 2px 12px;border-bottom:1px solid var(--line-2)}
  .pr .compare-grid .col-head h3{font-size:15px;line-height:1.15}
  .pr .compare-grid .col-head .col-price{font-family:var(--f-sans);font-size:12px;line-height:1.4;color:var(--dim);margin-top:3px}
  .compare-grid .yes svg{width:15px;height:15px}
}
.compare-grid .row-label{color:var(--soft);font-size:var(--t-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.45}
.compare-grid .col-head{flex-direction:column;align-items:flex-start;gap:6px;padding-top:22px;padding-bottom:20px}
.compare-grid .col-head h3{font-family:var(--f-serif);font-weight:400;font-size:var(--t-name);line-height:1.3;color:var(--paper)}
.compare-grid .col-head .col-price{font-family:var(--f-serif);font-size:var(--t-name);line-height:1.3;color:var(--paper);font-variant-numeric:tabular-nums lining-nums}
.compare-grid .yes{color:var(--gold)}
.compare-grid .yes svg{width:16px;height:16px}
.compare-grid .no{color:var(--soft)}

/* builder */
#builder-heading{scroll-margin-top:110px}
.builder-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:start;margin-top:clamp(26px,3vw,40px)}
@media(max-width:900px){.builder-grid{grid-template-columns:1fr}}
.option-block{margin-bottom:36px}
.option-label{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500}
.option-sub{font-size:var(--t-small);line-height:1.6;color:var(--soft);margin-top:-8px;margin-bottom:14px}
.package-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill-inner{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line-2);border-radius:var(--arch);
  padding:13px 15px;background:var(--ink-2);transition:border-color .15s ease,background-color .15s ease,transform .16s ease-out}
.pill input:checked+.pill-inner{border-color:var(--gold);background:var(--gold-wash)}
.pill input:focus-visible+.pill-inner{outline:1px solid var(--gold-hi);outline-offset:2px}
.pill-name{font-family:var(--f-serif);font-size:var(--t-name);line-height:1.3;color:var(--paper)}
.pill-price{font-size:var(--t-small);line-height:1.6;color:var(--dim);font-variant-numeric:tabular-nums}
.addon-list{list-style:none;border:1px solid var(--line);border-radius:var(--arch);overflow:hidden;background:var(--ink-2)}
.addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
.stepper-row{padding:13px 16px}
.addon-row+.addon-row{border-top:1px solid var(--line)}
.addon-row.is-included{background:var(--ink-3)}
.addon-check{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0;flex:1;align-self:stretch;padding:13px 0}   /* whole row height is tappable */
.addon-check input{position:absolute;opacity:0;width:1px;height:1px}
.checkbox-box{flex:none;width:17px;height:17px;border:1px solid var(--line-2);border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease,border-color .15s ease}
.addon-check input:checked~.checkbox-box{background:var(--gold);border-color:var(--gold)}
.addon-check input:checked~.checkbox-box::after{content:'';width:4px;height:8px;border:solid var(--ink);
  border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(45deg)}
.addon-check input:disabled~.checkbox-box{opacity:.45}
.addon-check input:disabled{cursor:default}
.addon-check input:focus-visible~.checkbox-box{outline:1px solid var(--gold-hi);outline-offset:2px}
.addon-name{font-size:var(--t-body);color:var(--paper);line-height:1.35}
.addon-sub{display:block;font-size:var(--t-small);color:var(--soft);line-height:1.5}
.addon-label-group{display:flex;flex-direction:column;gap:2px;min-width:0}
.addon-price{font-size:var(--t-small);line-height:1.6;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.addon-price.is-included-badge{font-size:var(--t-label);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);
  background:var(--gold-wash);padding:4px 8px;border-radius:1px}
.stepper{display:flex;align-items:center;gap:12px;flex:none}
.stepper button{width:36px;height:36px;border-radius:var(--arch);border:1px solid var(--line-2);color:var(--paper);font-size:var(--t-body);line-height:1;
  display:grid;place-items:center;transition:border-color .15s ease,color .15s ease,transform .16s ease-out}
.stepper button:active{transform:scale(.92)}
.stepper button:focus-visible{outline:1px solid var(--gold-hi);outline-offset:2px}
.stepper span{min-width:1.2em;text-align:center;font-variant-numeric:tabular-nums;color:var(--paper)}
.builder-summary{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--arch);padding:26px 24px}
@media(min-width:901px){.builder-summary{position:sticky;top:100px}}
.builder-summary h3{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500}
.summary-lines{list-style:none;display:flex;flex-direction:column;gap:9px}
.summary-line{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-small);line-height:1.5;color:var(--dim)}
.summary-line span:first-child{max-width:68%}
.summary-line span:last-child{font-variant-numeric:tabular-nums;text-align:right}
/* a line the last tick added settles in; the rest stay put */
.summary-line.new{animation:sl-in .18s var(--ease)}
@keyframes sl-in{from{opacity:0;transform:translateY(-3px)}}
/* the currency switch keeps the numbers, so the prices dip and settle to show it took */
.pr .swap{animation:pv-swap .24s var(--ease)}
@keyframes pv-swap{from{opacity:.35;transform:translateY(3px)}}
.summary-line--base span:first-child{color:var(--paper)}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.summary-total span:first-child{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.summary-total span:last-child{font-family:var(--f-serif);font-size:var(--t-price);line-height:1.1;letter-spacing:-.01em;color:var(--paper);font-variant-numeric:tabular-nums lining-nums}
.summary-note{font-size:var(--t-small);color:var(--soft);line-height:1.6;margin-top:16px}
.builder-summary .btn{width:100%;justify-content:center;margin-top:24px}
.reset-btn{margin-top:12px;width:100%;padding:11px;border-radius:var(--arch);border:1px solid var(--line-2);color:var(--dim);
  font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:border-color .15s ease,color .15s ease}
.reset-btn:focus-visible{outline:1px solid var(--gold-hi);outline-offset:2px}
@media(max-width:520px){
  /* toggles span the width so the labels keep the site's tracking without wrapping */
  .pr .filter-toggle,.pr .currency-toggle{display:flex;flex-wrap:nowrap;width:100%;justify-content:space-between}
  .pr .filter-toggle button,.pr .currency-toggle button{flex:1 1 auto;padding:8px 6px}
  .summary-line span:first-child{max-width:60%}
}
/* the estimate carried into the contact letter */

/* ============ HOVER ============
   Only for devices with a real pointer, so a tap on a phone never leaves a row
   shifted, a photo zoomed or a button filled. Hover-in can take its time;
   the base rules above set a quicker hover-out. */
@media (hover:hover) and (pointer:fine){
  nav.links a:hover::after{transform:scaleX(1)}
  .btn:hover i,.book:hover i{clip-path:inset(0 0 0 0)}
  button.irow:hover .t{color:var(--gold)}
  .fc a:hover{color:var(--gold)}
  .theme-sw:hover{color:var(--gold);border-color:var(--gold)}
  .pr .filter-toggle button:not(.is-active):hover,.pr .currency-toggle button:not(.is-active):hover{color:var(--gold-hi)}
  .stepper button:hover,.reset-btn:hover{border-color:var(--gold);color:var(--gold)}
  .pill:hover .pill-inner{border-color:var(--gline)}
}
/* hover movement, dropped entirely for reduced motion */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  button.irow:hover>:nth-child(-n+3){transform:translateX(22px)}
  button.irow:hover .thumb img{transform:scale(1.06)}
}

/* ============ WORK: PROLOGUE + PHOTOGRAPHS STAGE (photo-stage.js) ============
   Work opens on a prologue (a person talking, then the contents, which is also the way in). Its bottom is cut short on
   purpose so the stage's category line and first couple peek in: that is the cue to scroll once. The page snaps
   (no snapping above the stage, mandatory while the stage fills the screen) so one gesture settles the stage flush under the header.
   The stage snaps one chapter opener or couple at a time like the Films feed; a slide is 84% of the stage, so the next
   one peeks in below it. Photographs stay bare: no stroke, frame or shadow. Depth comes from space. */
html.on-work{scroll-snap-type:none}   /* the menu above the stage scrolls natively, no snapping */
html.snap-y,html.snap-g{scroll-snap-type:y mandatory}
.gs-stop{position:absolute;left:0;width:1px;height:1px;opacity:0;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}   /* hard one-slide snapping only while the stage fills the screen (set in photo-stage.js) */
html.on-work header::before{opacity:1;transition:opacity .3s,background-color .8s var(--quint)}   /* a solid bar on Work: the prologue never ghosts through the header */
/* over the stage (dark mode, Photographs) the bar takes the same tint as the ground, so the nav is part of the room */
:root:not([data-theme="light"]) body.vf-in:not(.vf-on) header::before{background:var(--tint,var(--hdr));-webkit-backdrop-filter:none;backdrop-filter:none}
/* light mode over the stage: the bar turns pale with the ground, so its type, mark and lines turn dark (never while the mobile menu is open: that stays night navy) */
:root[data-theme="light"] body.vf-in:not(.vf-on):not(.locked) header{--paper:#1D1F2C;--dim:rgba(29,31,44,.74);--faint:rgba(29,31,44,.36);--soft:rgba(29,31,44,.68);--gold:#6E5C3B;--gold-2:#A8966E;--gold-hi:#57492D;--line:rgba(29,31,44,.13);--line-2:rgba(29,31,44,.22);--gline:rgba(110,92,59,.42);color:var(--paper)}
:root[data-theme="light"] body.vf-in:not(.vf-on):not(.locked) header::before{background:var(--tint-l,var(--ink));-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] body.vf-in:not(.vf-on):not(.locked) header .brand img{content:url(img/logo-dark.png)}
.pro{box-sizing:border-box;min-height:calc(100svh - 104px);scroll-snap-align:start;
  padding:calc(var(--hh,84px) + clamp(24px,5svh,56px)) var(--pad) clamp(14px,2.4svh,28px)}
.pro-in{max-width:1180px;margin:0 auto;transition:opacity .3s var(--ease)}
.pro.tucked .pro-in{opacity:0}
.pro-h{margin:0;font-family:var(--f-display);font-weight:400;font-size:var(--t-headline);line-height:1.06;letter-spacing:-.015em}
.pro-p{margin:16px 0 0;max-width:52ch;color:var(--dim);font-size:var(--t-lead);line-height:1.6}
.pro-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.pro-list li{border-bottom:1px solid var(--line)}
.pro-row{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;width:100%;min-height:56px;padding:9px 0;text-align:left;
  color:var(--paper);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pro-n{grid-column:1;font-family:var(--f-serif);font-size:var(--t-name);line-height:1.25;transition:color .15s var(--ease),transform .12s ease-out;transform-origin:left center}
.pro-a{grid-column:1;color:var(--dim);font-size:var(--t-small);line-height:1.45}
.pro-c{grid-column:2;grid-row:1/3;color:var(--dim);font-size:var(--t-small);font-variant-numeric:tabular-nums;white-space:nowrap}
.pro-row:active .pro-n{transform:scale(.97)}
.pro-row:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
@media (hover:hover){.pro-row:hover .pro-n{color:var(--gold)}}
@media (min-width:900px){
  .pro-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,120px);grid-template-rows:auto auto 1fr;align-items:start}
  .pro-h,.pro-p{grid-column:1}
  .pro-list{grid-column:2;grid-row:1/4;margin-top:6px}
}

.ps{--psb:48px;--ps-h0:calc(100svh - var(--hh,84px));--ps-sh:calc((var(--ps-h0) - var(--psb)) * .84);--ps-chrome:196px;
  --fh:max(150px,calc(var(--ps-sh) - var(--ps-chrome)));
  position:relative;color:var(--paper)}
/* the category line sticks under the header; it has the ground's colour because slides scroll beneath it */
.ps-bar{position:sticky;top:var(--hh,84px);height:var(--psb);display:flex;align-items:center;z-index:3;
  background:var(--tint,var(--ink));transition:background-color .8s var(--quint)}
.ps-bar .cl{flex:1;min-width:0}
.ps-feed{position:relative;z-index:1}
/* Only distant, requested chapter journeys use this viewport-sized veil.
   The category rail and header stay sharp; the tall feed is never filtered. */
.ps-jump-veil{position:fixed;inset:calc(var(--hh,84px) + var(--psb)) 0 0;z-index:2;pointer-events:none;opacity:0;
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:opacity .12s cubic-bezier(.22,1,.36,1),backdrop-filter .12s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .12s cubic-bezier(.22,1,.36,1)}
.ps-jump-veil.is-moving{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ps-slide{box-sizing:border-box;height:var(--ps-sh);padding-top:clamp(16px,2.6svh,26px);display:flex;flex-direction:column;
  scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--hh,84px) + var(--psb))}
.ps-end{height:calc((var(--ps-h0) - var(--psb)) * .16)}
/* Local Photos preview: Films' internal scrolling path, with the existing
   photo dimensions. Entering the stage contains scrolling until navigation leaves. */
.ps-internal .ps-feed{height:calc(var(--ps-h0) - var(--psb));overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none}
.ps-internal .ps-feed::-webkit-scrollbar{display:none}
.ps-internal .ps-slide{scroll-margin-top:0}
.ps-internal .ps-groundwrap{position:absolute;inset:0;height:auto;margin-bottom:0}
html.ps-viewing{--ps-surface:var(--tint,var(--ink));overflow:hidden;overscroll-behavior:none}
:root[data-theme="light"].ps-viewing{--ps-surface:var(--tint-l,var(--ink))}
/* Keep the overflow clip at the viewport edges, including in Safari.
   The page position is saved in JS and restored when Photos releases it. */
body.ps-viewing{position:fixed;inset:0;height:100dvh;overflow:hidden}
/* Safari fills the area around its floating toolbar from the outer surface.
   Paint that surface with the same ground as the photographs, not page navy. */
html.ps-viewing,body.ps-viewing,.ps-contained{background:var(--ps-surface,var(--ink));transition:background-color .8s var(--quint)}
body.ps-viewing footer{display:none}
.ps-contained{position:fixed;inset:0;height:100dvh;z-index:900;animation:none}
.ps-contained .ps-feed{position:absolute;inset:0;box-sizing:border-box;height:100%;padding-top:0;scroll-padding-top:calc(var(--hh,84px) + var(--psb));overscroll-behavior-y:contain}
/* Safari samples the actual sticky header background for its top color.
   Keep this base opaque and in step with the photograph ground. */
.ps-contained header{position:sticky;top:0;background:var(--ps-surface,var(--ink));transition:transform .28s var(--ease),opacity .2s,background-color .8s var(--quint)}
body.locked .ps-contained header{background:var(--ink)}
.ps-contained .ps-bar{position:sticky;left:0;right:0}
.ps-contained .ps-end{height:max(0px,calc(100dvh - var(--hh,84px) - var(--psb) - var(--ps-sh)))}
.ps-head,.ps-foot{flex:0 0 auto;padding-inline:var(--pad)}
/* the one uppercase label style: the category line and a couple's tags. Nothing else on the stage is uppercase. */
.ps-tags{margin:6px 0 0;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--dim)}
.ps-name{margin:0;font-family:var(--f-display);font-weight:400;font-size:var(--t-headline-s);line-height:1.1;letter-spacing:-.01em}
.ps-body{flex:1 1 auto;min-height:0;margin-top:12px;display:flex;flex-direction:column}
.ps .seq-strip{flex:0 0 auto;padding:8px var(--pad);scroll-padding-inline:var(--pad);overflow-y:hidden;overscroll-behavior-x:contain;gap:20px}
.ps .frame{flex:0 0 auto;width:min(calc(var(--fh) * var(--ar,.75)),calc(100vw - 2 * var(--pad) - 4px))}
.ps .frame{position:relative}   /* the hidden caption is absolutely placed: its box must be inside the strip so the strip clips it */
.ps .frame .fr-img{width:100%}
/* The tinted ground (dark mode only): --tint is the current story's ground. Gold, type and the logo never change. */
:root[data-theme="light"] .ps-ground,:root[data-theme="light"] .ps-bar{background:var(--tint-l,var(--ink))}   /* light mode: the same hues, as pale shades */
/* the ground: ONE screen-sized layer (never the 60,000px-tall stage), so a colour change repaints one screen. Nothing moves on it. */
.ps-groundwrap{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;pointer-events:none;z-index:0}
.ps-ground{position:absolute;inset:0;background:var(--tint,var(--ink));transition:background-color .8s var(--quint)}
/* chapter opener: the human voice, seven times a visit, never truncated */
.ps-open{height:auto;min-height:calc(var(--ps-sh) * .7143);justify-content:center;padding-inline:var(--pad)}
.ps-open-in{max-width:46rem}
.ps-oname{margin:0;font-family:var(--f-display);font-weight:400;font-size:var(--t-headline);line-height:1.06;letter-spacing:-.015em}
.ps-oalt{margin:12px 0 0;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--dim)}
.ps-odesc{margin:18px 0 0;font-family:var(--f-serif);font-size:var(--t-quote);line-height:1.34;letter-spacing:-.01em;color:var(--paper);max-width:34ch}
/* under the strip: the current frame's caption as a sentence, the count at the right */
.ps-foot{display:flex;align-items:baseline;gap:16px;padding-top:14px}
.ps-cap-t{flex:1;min-width:0;margin:0;min-height:2.9em;font-family:var(--f-serif);font-size:var(--t-small);line-height:1.45;color:var(--paper)}
.ps .seq-count{flex:0 0 auto;font-family:var(--f-serif);font-size:var(--t-small);font-weight:400;letter-spacing:0;color:var(--soft);transition:color .3s var(--ease)}
.ps-arrows{display:none}
.ps .seq-bar{margin:6px var(--pad) 0}
@media (hover:hover){
  .ps-arrows{display:flex;gap:4px;margin:-12px -12px -12px 0}
  .ps-arrows button{width:44px;height:44px;display:grid;place-items:center;color:var(--dim);touch-action:manipulation;
    transition:color .15s var(--ease),opacity .15s var(--ease),transform .12s ease-out}
  .ps-arrows button:active{transform:scale(.97)}
  .ps-arrows button svg{width:15px;height:15px}
  .ps-arrows button:disabled{opacity:.22;pointer-events:none}
  .ps-arrows button:hover{color:var(--gold)}
  /* looking is the product: a photograph answers the mouse (iPhone has no hover, it keeps tap feedback) */
  .ps .frame .fr-img img{transition:transform .7s var(--ease)}
  .ps .frame .fr-img:hover img{transform:scale(1.02)}
  .ps-body:has(.fr-img:hover) .seq-count{color:var(--gold)}
}
/* the story turn, the one authored moment: the name and tags rise and fade in once, the first frame clears from slightly dimmed */
@keyframes psIn{from{opacity:0;transform:translateY(8px)}}
@keyframes psFade{from{opacity:0}}
@keyframes psClear{from{opacity:.82}}
.ps-slide.is-active:not(.is-jump) .ps-id{animation:psIn .24s var(--ease) both}
.ps-slide.is-active:not(.is-jump) .frame:first-child .fr-img{animation:psClear .3s var(--ease) both}
.ps-open.is-active:not(.is-jump) .ps-oname{animation:psIn .24s var(--ease) both}
.ps-open.is-active:not(.is-jump) .ps-oalt,.ps-open.is-active:not(.is-jump) .ps-odesc{animation:psFade .24s var(--ease) .06s both}
@media (prefers-reduced-motion:reduce){
  .ps-jump-veil{display:none}
  @keyframes psIn{from{opacity:0}}
  .ul[data-on]{transition:none}
  .wk-tog a:active,.cl-b:active,.ps-arrows button:active,.pro-row:active .pro-n{transform:none}
  .ps .frame .fr-img:hover img{transform:none}
  .ps-ground,.ps-bar,html.ps-viewing,body.ps-viewing,.ps-contained,.ps-contained header,html.on-work header::before{transition:none}   /* the colour still changes, without the 800ms ease */
}
/* a phone on its side: no peek, the whole stage is the slide, and the small print goes */
@media (orientation:landscape) and (max-height:540px){
  .ps{--psb:42px;--ps-sh:calc(var(--ps-h0) - var(--psb));--ps-chrome:150px}
  .ps-end,.ps-tags,.ps-oalt{display:none}
  .ps-open{min-height:var(--ps-sh)}
  .cl-b{min-height:40px}
}

/* ============ REDUCED MOTION ============
   Fewer, gentler animations rather than none: fades stay, movement goes. */
@media (prefers-reduced-motion:reduce){
    header.hide{transform:none;opacity:0;pointer-events:none}
  .rv-l{opacity:0}
  .rv-l>span{transform:none}
  .rv-l.show{opacity:1;transition:opacity .4s ease}
  .btn:active,.book:active,.seq-ctrl button:active,.sn-copy:active,
  .pr .filter-toggle button:active,.pr .currency-toggle button:active,.pill:active .pill-inner{transform:none}
  @starting-style{.pr .note-box{transform:none}}
  @keyframes sl-in{from{opacity:0}}
  @keyframes pv-swap{from{opacity:.35}}
  .letter-ok{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:940px){
  nav.links{clip-path:none;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  nav.links.open{clip-path:none;opacity:1;visibility:visible;transition:opacity .2s,visibility .2s}
}

/* Touch screens: no frosted glass. A blur over a page of photos costs a phone a lot of graphics memory
   and redraws on every scroll frame; a near-solid bar looks almost the same. */
@media (hover:none){
  header::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,20,28,.97)}   /* the header is navy in both themes */
}
/* Work strips that are far from the screen: not scrollable (so no scroll layer), no pictures. See photoWindow(). */
.seq-strip.cold{overflow:hidden}

/* The Photos | Films switch lives in the header on Work (a second row under the logo), so it hides and comes back
   with the header. flex-wrap puts it on its own line. Hidden while the mobile menu is open. */
header{flex-wrap:wrap}
.hdr-sub{flex:0 0 100%;margin-top:12px;position:relative;z-index:1}
.hdr-sub[hidden],body.locked .hdr-sub{display:none}

/* ============ WORK: PHOTOS | FILMS ============
   The toggle sits under the Work heading and description. Below it the page shows
   either the photo chapters (#wk-photos) or the video feed (#wk-videos). The feed is
   one block, as tall as the screen under the header. */
.wk-tog-row{margin-top:clamp(22px,3vw,34px)}
#wk-photos[hidden],#wk-videos[hidden]{display:none}
/* ---- the Photographs | Films switch (rides in the header) and the category line (top of both stages) ----
   No boxes, no fills: serif words, a hairline between, and one gold underline that slides to the current item
   (transform only). The current item is gold. See VF.moveUL in video-feed.js. */
.wk-tog{position:relative;display:inline-flex;align-items:center}
.wk-tog a{display:inline-flex;align-items:center;min-height:36px;padding:0 2px;font-family:var(--f-serif);font-size:19px;line-height:1;
  color:var(--soft);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .15s var(--ease),transform .12s ease-out}
.wk-tog a[aria-current]{color:var(--gold)}
.wk-tog .sep{width:1px;height:16px;margin:0 16px;background:var(--line-2)}
.wk-tog .ul{bottom:5px}
.ul{position:absolute;left:0;bottom:10px;width:1px;height:1px;background:var(--gold);transform-origin:0 50%;
  transform:translateX(var(--x,0px)) scaleX(var(--w,0));pointer-events:none}
.ul[data-on]{transition:transform .2s var(--ease)}
.cl{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.cl::-webkit-scrollbar{display:none}
.cl-in{position:relative;display:flex;gap:30px;width:max-content;min-width:100%;padding:0 var(--pad)}
.cl-b{position:relative;flex:0 0 auto;min-height:44px;padding:0;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;color:var(--soft);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .15s var(--ease),transform .12s ease-out}
.cl-b+.cl-b::before{content:'\00b7';position:absolute;left:-18px;top:50%;transform:translateY(-50%);color:var(--soft)}
.cl-b.on{color:var(--gold)}
.wk-tog a:active,.cl-b:active{transform:scale(.97)}
@media (hover:hover){.wk-tog a:not([aria-current]):hover,.cl-b:not(.on):hover{color:var(--paper)}}
.wk-tog a:focus-visible,.cl-b:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
@keyframes wkIn{from{opacity:0}}
#wk-photos,#wk-videos{overflow-anchor:none}
.wk-in{animation:wkIn .24s cubic-bezier(.22,1,.36,1) both}   /* opacity-only handoff; the page frame stays still */
@keyframes wkSwitchRight{from{opacity:0;transform:translate3d(22px,0,0)}to{opacity:1;transform:none}}
@keyframes wkSwitchLeft{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}}
body.wk-switch-right #wk-videos .wk-in{animation:wkSwitchRight .32s cubic-bezier(.22,1,.36,1) both}
body.wk-switch-left #wk-photos .wk-in{animation:wkSwitchLeft .32s cubic-bezier(.22,1,.36,1) both}
body.wk-switch-right,body.wk-switch-left{background:var(--ink);}
body.wk-switch-right #wk-videos,body.wk-switch-left #wk-photos{background:var(--ink);min-height:100svh}
@media(prefers-reduced-motion:reduce){body.wk-switch-right #wk-videos .wk-in,body.wk-switch-left #wk-photos .wk-in{animation:none}}

.vf{--vfb:56px;--vf-cap:128px;--vf-h0:calc(100svh - var(--hh,84px));--vf-h:calc(var(--vf-h0) - var(--vfb));
  position:relative;height:var(--vf-h0);background:var(--ink);color:var(--paper);border-top:1px solid var(--line);
  scroll-snap-align:start;scroll-margin-top:var(--hh,84px)}
/* Films navigation uses the page theme instead of a retained Photos tint. */
body.vf-on{--header-ground:var(--ink)}
body.vf-on:not(.locked) header{background:var(--header-ground)}
body.vf-on footer{display:none}   /* Films ends at the last film: scrolling never pulls the footer into view */
.vf-bar{position:absolute;top:0;left:0;right:0;height:var(--vfb);display:flex;align-items:center;gap:14px;
  padding:0;border-bottom:1px solid var(--line);background:var(--ink);z-index:2}
.vf-bar .cl{flex:1;min-width:0}
.vf-feed{position:absolute;left:0;right:0;top:var(--vfb);bottom:0;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scrollbar-width:none}   /* no overscroll-behavior: at the first or last film a swipe carries on to the page, so you can always scroll back up to the menu */
.vf-feed::-webkit-scrollbar{display:none}
.vf-slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.vf-wrap{width:min(100%,calc((var(--vf-h) - var(--vf-cap)) * 16 / 9))}
.vf-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vf-thumb{position:absolute;inset:0}
.vf-mount{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.vf-frame.is-ready .vf-mount{opacity:1}
.vf-mount iframe{display:block;width:100%;height:100%;border:0}
.vf-play,.vf-tick{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;
  border-radius:50%;background:rgba(18,20,28,.6);color:#fff;border:1px solid rgba(255,255,255,.4);pointer-events:none;z-index:1}
.vf-play svg,.vf-tick svg{width:28px;height:28px}
.vf-frame.is-playing .vf-play,.vf-frame.is-error .vf-play{display:none}
.vf-tick{z-index:3;animation:vfTick .65s var(--ease) both}
@keyframes vfTick{0%{opacity:0;transform:scale(.8)}25%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.15)}}
.vf-hit{position:absolute;inset:0;z-index:2;background:transparent;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.vf-hit:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-4px}
.vf-err{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:6px;text-align:center;padding:16px;
  background:rgba(18,20,28,.82);color:#fff;font-size:var(--t-small)}
.vf-err[hidden]{display:none}
.vf-err a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.vf-sound{position:absolute;z-index:4;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;
  border:1px solid var(--gline);border-radius:99px;background:rgba(18,20,28,.82);color:var(--gold-hi);
  font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;touch-action:manipulation}
@media (hover:hover){.vf-sound{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.vf-sound[hidden]{display:none}
.vf-sound svg{width:18px;height:18px}
.vf-sound{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;font-size:0}
.vf-unmute-prompt{position:absolute;z-index:4;top:64px;right:12px;padding:7px 10px;color:#fff;background:rgba(18,20,28,.78);font-family:var(--f-serif);font-size:14px;line-height:1;pointer-events:none;animation:vfPromptIn .28s cubic-bezier(.22,1,.36,1) both}
.vf-unmute-prompt[hidden]{display:none}
@keyframes vfPromptIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.vf-flash{position:absolute;z-index:3;left:18px;top:14px;pointer-events:none;color:#fff;
  font-family:var(--f-display);font-size:var(--t-headline-s);line-height:1.06;letter-spacing:-.015em;
  text-shadow:0 2px 24px rgba(0,0,0,.7);animation:vfFlash 1.5s ease both}
@keyframes vfFlash{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
.vf-ctl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;padding:20px 8px 4px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;transition:opacity .2s}
@media (hover:hover){
  .vf-ctl{opacity:0}
  .vf-frame:hover .vf-ctl,.vf-frame:focus-within .vf-ctl,.vf-frame:not(.is-playing) .vf-ctl{opacity:1}
}
.vf-mute{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;touch-action:manipulation}
.vf-frame>.vf-mute{position:absolute;z-index:5;top:12px;right:12px;border:1px solid var(--gline);border-radius:50%;background:rgba(18,20,28,.78);color:#fff}
.vf-mute svg{width:22px;height:22px}
.vf-seek{position:relative;flex:1;height:44px;touch-action:manipulation}
.vf-seek::before{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:rgba(255,255,255,.3)}
.vf-seek i{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:var(--p,0%);background:var(--gold-hi)}
.vf-yt{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}
.vf-ctl :focus-visible,.vf-sound:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px}
.vf-cap{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 24px;padding:14px 16px 0}
.vf-name{font-family:var(--f-serif);font-weight:400;font-size:var(--t-title);line-height:1.2;letter-spacing:-.01em}
.vf-meta{margin-top:6px;color:var(--soft)}
.vf-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.vf-film{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--gold);border-radius:var(--arch);
  color:var(--gold);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;touch-action:manipulation;
  transition:background .2s var(--ease)}
@media (hover:hover){.vf-film:hover{background:var(--gold-wash)}}
.vf-ytc{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}
@media (hover:hover){.vf-ytc:hover{color:var(--paper)}}
.vf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Phones on their side (and any short, wide window): one header row, a slim chip bar, and the film beside its
   caption instead of above it, so the film gets the whole height. */
@media (orientation:landscape) and (max-height:540px){
  header{padding-top:8px;padding-bottom:8px}
  .brand img{height:28px}
  .brand{margin-right:0}
  .hdr-sub{flex:0 0 auto;order:1;margin:0 auto 0 18px}
  .theme-sw,.burger{order:2}
  .vf{--vfb:46px}
  .vf-slide{padding:8px var(--pad)}
  .vf-wrap{width:100%;height:100%;display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
  .vf-frame{flex:0 0 auto;width:min(66%,calc((var(--vf-h) - 16px) * 16 / 9))}
  .vf-cap{flex:1;min-width:0;flex-direction:column;flex-wrap:nowrap;gap:10px;padding:0}
  .vf-name{font-size:clamp(18px,2.6vw,24px)}
  .vf-act{flex-direction:column;align-items:flex-start;gap:4px}
  .vf-film,.vf-ytc{min-height:38px}
  .vf-film{padding:0 14px}
  .vf-yt{display:none}
}
.vf-fs{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;touch-action:manipulation}
.vf-fs svg{width:20px;height:20px}
/* full screen: the real one (desktop, Android, iPad) and the iPhone stand-in (.is-full) */
.vf-frame:fullscreen{aspect-ratio:auto;width:100%;height:100%}
.vf-frame:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%}
.vf-frame.is-full{position:fixed;inset:0;z-index:3000;width:auto;aspect-ratio:auto}
.vf-frame.is-full .vf-thumb{object-fit:contain}
body.vf-full{overflow:hidden}
body.vf-full header{visibility:hidden}
@media (max-width:620px){.vf-cap{padding:12px var(--pad) 0}.vf-yt{display:none}}
@media (prefers-reduced-motion:reduce){.vf-mount{transition:none}.vf-tick{animation-duration:.01s}}

    .cb-loader{
      --cb-background:#12141C;
      --cb-logo-width:760px;
      position:absolute;inset:0;z-index:20;
      display:grid;place-items:center;
      background:var(--cb-background);
      opacity:1;transition:opacity .35s ease;
      overflow:hidden;
    }
    .cb-loader[hidden]{display:none}
    .cb-loader.is-leaving{opacity:0;pointer-events:none}
    .cb-loader .cb-art{
      position:relative;width:min(var(--cb-logo-width),78vw,130vh);
      width:min(var(--cb-logo-width),78vw,130svh);
      aspect-ratio:2048/981;opacity:1;
    }
    .cb-loader .cb-ink,
    .cb-loader .cb-original,
    .cb-loader .cb-effects{position:absolute;inset:0;width:100%;height:100%;display:block}
    .cb-loader .cb-ink{opacity:0}
    .cb-loader .cb-original{opacity:1;object-fit:contain}
    .cb-loader .cb-effects{overflow:visible;pointer-events:none;opacity:0}
    .cb-loader.is-animated .cb-original{opacity:0}
    .cb-loader.is-animated .cb-ink,
    .cb-loader.is-animated .cb-effects{opacity:1}
    .cb-loader.is-complete .cb-original{opacity:1}
    .cb-loader.is-complete .cb-ink,
    .cb-loader.is-complete .cb-effects{opacity:0}
    @media(max-width:600px){
      .cb-loader .cb-art{width:min(88vw,130svh)}
    }
    @media(prefers-reduced-motion:reduce){
      .cb-loader{transition:none}
    }

/* The pen mark is reserved for the first Home visit. */
.cb-loader{pointer-events:none;z-index:1}
.cb-loader .cb-art{width:min(var(--cb-logo-width),78vw,95vh);width:min(var(--cb-logo-width),78vw,95svh)}
#pre .wrap,#wkpre .wrap{position:relative;z-index:2}

/* The available space follows the actual headline and body height. */
.vhero-media{background:#12141C}
.vhero .cb-hero-placeholder{position:absolute;inset:88px 0 calc(var(--cb-hero-copy,440px) + 24px);display:grid;place-items:center;container-type:size;transition:opacity .35s ease}
.vhero .cb-hero-placeholder>img,.vhero .cb-loader .cb-art{width:min(840px,76vw,calc(100cqh * 2.087));height:auto;object-fit:contain}
.vhero .cb-loader{--cb-background:transparent;--cb-logo-width:840px}
.vhero .cb-hero-placeholder.is-leaving{opacity:0;pointer-events:none}
.vhero .cb-loader{animation:cb-pen-in .3s var(--ease) backwards}   /* the pen fades in once everything is ready, it never pops */
@keyframes cb-pen-in{from{opacity:0}}
@media(max-width:600px){
  .vhero .cb-loader .cb-art,.vhero .cb-hero-placeholder>img{width:min(86vw,calc(100cqh * 2.087))}
}
@media(prefers-reduced-motion:reduce){.vhero .cb-hero-placeholder{transition:none}}

/* The global img display rule must not reveal the static fallback during drawing. */
.vhero .cb-hero-placeholder>img[hidden]{display:none}

/* The iframe stays rendered (opacity 0, as in the version Safari autoplayed) and fades in once it plays. */
.vhero-player{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vhero .cb-hero-placeholder{z-index:2}
.vhero-player iframe{position:absolute;top:50%;left:50%;border:0;pointer-events:none;background:transparent;
  opacity:0;   /* YouTube's page is black until it plays: hidden from the moment the iframe exists, not only once onReady adds .vhero-yt */
  width:max(100cqw,calc(100cqh*16/9));height:max(100cqh,calc(100cqw*9/16));
  transform:translate(-50%,-50%) scale(1.16)}
.cb-logo-flight{position:fixed;z-index:10002;object-fit:contain;pointer-events:none;transform-origin:top left;will-change:transform}
header.cb-logo-landing{transition:none;transform:none;opacity:1;pointer-events:auto}
header .brand img.cb-brand-in-flight{visibility:hidden}

/* The hero follows the selected theme, including the waiting mark and copy. */
.vhero .vhero-media{background:var(--ink)}
/* Preserve every original logo colour; contrast comes from a small shadow. */
.cb-logo-flight img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
:root[data-theme="light"]:not(.on-contact) footer .credit-logo{filter:brightness(0);opacity:.6}   /* the white credit mark turns dark on the paper footer */
/* Native hero: one fully buffered film, no iframe or restart timer. */
.vhero-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-sound,.hero-play{position:absolute;z-index:4;right:var(--pad);top:calc(var(--hh,88px) + 24px);min-height:44px;padding:10px 16px;border:1px solid var(--paper);border-radius:2px;background:var(--ink);color:var(--paper);cursor:pointer;font-size:12px;letter-spacing:.08em}
.hero-sound,.hero-play{display:grid;place-items:center;width:44px;height:44px;padding:10px}
.hero-sound svg,.hero-play svg{display:block;width:22px;height:22px}
.hero-play{top:calc(var(--hh,88px) + 78px)}
.hero-sound[hidden],.hero-play[hidden]{display:none}
.hero-sound:focus-visible,.hero-play:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.cb-hero-placeholder.is-waiting>img{animation:hero-wait 1.5s ease-in-out infinite}
@keyframes hero-wait{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.cb-hero-placeholder.is-waiting>img{animation:none}}

.cb-video-cover{position:absolute;inset:0;z-index:1;background:var(--ink);pointer-events:none}

/* The approved hero is a fixed dark room, independent of the page theme. */
.vhero{color-scheme:dark;--line:rgba(239,234,223,.14);--line-2:rgba(239,234,223,.28);--gline:rgba(206,192,163,.42);--gold-wash:rgba(206,192,163,.08)}
.hero-sound{background:transparent;border:0}
.hero-unmute-prompt{position:absolute;z-index:4;right:calc(var(--pad) + 54px);top:calc(var(--hh,88px) + 38px);font-size:12px;line-height:16px;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}
.hero-unmute-prompt[hidden]{display:none}
/* Work retains its existing theme and story-tint navigation rules above. */
.plan{min-height:80svh;display:flex;align-items:center}
.plan .band-in{width:100%}
.plan p.lead{font-family:var(--f-serif);font-size:clamp(22px,2.05vw,31px);line-height:1.38;letter-spacing:-.005em;color:var(--paper);max-width:30ch}
.plan-word{color:color-mix(in srgb,var(--paper) 30%,transparent);transition:color 180ms linear}
.plan-word.read{color:var(--paper)}
.day{position:relative;overflow:clip}
.day-pin{padding-top:calc(var(--hh,88px) + 20px);padding-bottom:30px}
.day-sky{position:relative;height:1px;background:var(--line-2);margin:0 0 40px}
.day-hours{display:flex;justify-content:space-between;list-style:none;position:absolute;left:0;right:0;top:-20px}
.day-hours li{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.day-hours li.on{color:var(--gold)}
.day-sun{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold);transform:translateX(-50%)}
.day-track{display:flex;gap:clamp(24px,3vw,48px)}
.day-panel{flex:0 0 min(78vw,1100px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:center}
.day-ph{aspect-ratio:4/5;max-height:52svh;margin:0 auto;overflow:hidden}
.day-tx .mono:first-child{color:var(--gold)}
.day-tx h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-headline-s);line-height:1.1;letter-spacing:-.015em;margin:10px 0 8px}
.day-tx p.mono{color:var(--dim);margin-bottom:14px}
.day-tx p.lead{margin-bottom:22px}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.day-pin{position:sticky;top:0}}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .plan{min-height:0}
  .day-track{display:block}
  .day-panel{display:block;margin-bottom:clamp(40px,8vw,70px)}
  .day-ph{max-height:none;margin-bottom:20px}
  .day-sky{position:sticky;top:var(--hh,88px);z-index:5;height:auto;background:var(--day-ground,var(--ink));padding:14px 0 12px;border-bottom:1px solid var(--line-2)}
  .day-hours{position:static}.day-hours li:not(.on){display:none}.day-sun{top:auto;bottom:-5px}
}
@media(prefers-reduced-motion:reduce){.plan-word{transition:none}}
/* About: the statement and the story scroll together; each line lights as its paragraph passes mid-screen (paintHomeScenes). Colour only. */
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.ab-head{max-width:16em}
.ab-l{transition:color 180ms linear}
.ab-paras p.lead{max-width:48ch}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .ab-l{display:block;color:color-mix(in srgb,var(--paper) 30%,transparent)}
  .ab-l.lit{color:var(--paper)}
}
/* About: three guided steps. A 300svh track with a pinned 100svh stage; paragraphs swap in place (JS sets .on and .lit). */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .ab-story{position:relative;height:300vh;height:300svh;padding-block:0}
  .ab-grid{position:sticky;top:0;height:100vh;height:100svh;align-items:center;padding-top:var(--hh,88px)}
  .ab-head{position:static}
  .ab-paras{display:grid}
  .ab-paras p.lead{grid-area:1/1;min-height:0;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
  .ab-paras p.lead.on{opacity:1;transform:none;pointer-events:auto}
}
@media(max-width:900px){.ab-grid{grid-template-columns:1fr}.ab-paras p.lead+p.lead{margin-top:20px}}

/* Chapter indicators are local navigation, including on a phone. */
.day-hours a{display:flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;touch-action:manipulation}
.day-hours{top:-32px}
.day-hours a:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.day-hours a:hover{color:var(--gold)}}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .day-sky{padding:0;border-bottom:1px solid var(--line-2)}
  .day-hours{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .day-hours li:not(.on){display:block}
  .day-hours li{flex:0 0 auto}
  .day-hours a{min-height:44px;white-space:nowrap}
  .day-hours::-webkit-scrollbar{display:none}
}

/* Home Recent work on phones: each chapter is a snap stop under the sticky strip */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .day-panel,.day-end{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--gs-top,140px)}
}
/* About: Canada outline map beside the Toronto text (inline SVG, canada-map.js). Strokes stay very thin; the grey layers fade out with distance. */
.gta{display:grid;grid-template-columns:1fr minmax(300px,520px);gap:clamp(24px,5vw,80px);align-items:center}
.cmap{display:block;width:100%;height:auto;color:var(--paper);overflow:visible}
.cmap-g{mask:url(#cm-d)}
:root[data-theme="light"] .cmap-g{mask:url(#cm-l)}
.cmap-grid,.cmap-oth,.cmap-ca{fill:none;stroke-linejoin:round}
.cmap-grid{stroke:currentColor;stroke-width:.4;opacity:.16}
.cmap-oth{stroke:currentColor;stroke-width:.8;opacity:.85}
.cmap-ca{stroke:#D52B1E;stroke-width:1.6}
@media(hover:hover) and (pointer:fine){
  .cmap-oth,.cmap-grid{transition:opacity .25s var(--ease)}
  .cmap-ca{transition:stroke-width .25s var(--ease),stroke .25s var(--ease),filter .25s var(--ease)}
  .cmap:hover .cmap-ca{stroke:#E6382A;stroke-width:2.2;filter:drop-shadow(0 0 3px rgba(213,43,30,.45))}
  .cmap:hover .cmap-oth{opacity:.92}
  .cmap:hover .cmap-grid{opacity:.2}
}
@media(prefers-reduced-motion:reduce){.cmap-oth,.cmap-grid,.cmap-ca{transition:none}}
@media(max-width:900px){.gta{grid-template-columns:1fr}.cmap{max-width:480px;margin:8px auto 0}}

/* Work photo strips, Paper only, desktop mouse and trackpad: no CSS snapping, so it cannot pull the strip against the hand.
   The wheel stays native and JS settles once onto a frame (cbGlide, app.js). Phones keep native snapping. */
@media (hover:hover) and (pointer:fine){
  html[data-theme="paper"] .seq-strip{scroll-snap-type:none}
}