/* Paper theme (experimental). Loaded only with ?theme=paper, see index.html.
   Everything is scoped to html[data-theme="paper"], so dark and light are untouched.
   Cream, dark brown and aubergine sections with our own paper grain; links instead of buttons; no motion beyond a fade. */

@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/eb-garamond.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/eb-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Pinyon Script';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/pinyon-script.woff2) format('woff2')}

:root[data-theme="paper"]{
  --cream:#F2EBDE;--brown:#2A1D0F;--merlot:#2B2530;--paper-accent:#2B2530;--tan:#D2B6A1;
  --f-display:'Cormorant Garamond','Cochin',Georgia,serif;
  --f-serif:'EB Garamond','Sirenne',Georgia,serif;
  --f-sans:'EB Garamond','Sirenne',Georgia,serif;
  --f-script:'Pinyon Script','Snell Roundhand',cursive;
  /* our own paper grain: tiny inline SVG noise in warm brown, alpha only, so it sits on any section colour */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.8 .55' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .11  0 0 0 0 .06  0 0 0 .4 -.14'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --t-display:clamp(34px,6vw,84px);
  --t-hero:clamp(34px,6vw,84px);
  --t-headline:clamp(28px,4vw,56px);
  --t-headline-s:clamp(26px,3.2vw,44px);
  --t-body:16px;--t-small:14px;--t-label:13px;--t-lead:clamp(16px,1.35vw,19px);
  --arch:0;
  --tint-cream:1;
  color-scheme:light;
  /* default set = cream */
  --ink:#F2EBDE;--ink-2:#EBE2D1;--ink-3:#E2D7C2;--paper:#2A1D0F;
  --dim:rgba(42,29,15,.8);--soft:rgba(42,29,15,.72);--faint:rgba(42,29,15,.32);
  --gold:#2A1D0F;--gold-2:#2A1D0F;--gold-hi:#2A1D0F;--gold-wash:rgba(42,29,15,.08);
  --line:rgba(42,29,15,.14);--line-2:rgba(42,29,15,.26);--gline:rgba(42,29,15,.4);
  --hdr:#F2EBDE;--bar:#F2EBDE;--bar-solid:#F2EBDE;--maple:#2A1D0F;
}
html[data-theme="paper"],html[data-theme="paper"] body{background:var(--cream);color:var(--brown);scrollbar-color:var(--paper-accent) var(--cream)}
html[data-theme="paper"] body{font-family:var(--f-serif);font-size:16px;line-height:1.55;letter-spacing:.025em}

/* ---- section colours: cream / dark brown / aubergine, each carrying grain ---- */
html[data-theme="paper"] main section,html[data-theme="paper"] footer{background-color:var(--ink);background-image:var(--grain);background-size:400px;color:var(--paper);border:0}
html[data-theme="paper"] .tone-brown,
html[data-theme="paper"] .plan,
html[data-theme="paper"] .pr-pkgs{
  --ink:#2A1D0F;--ink-2:#34261A;--ink-3:#3E2F21;--paper:#F2EBDE;--dim:#D2B6A1;--soft:#D2B6A1;--faint:rgba(210,182,161,.4);
  --gold:#F2EBDE;--gold-2:#D2B6A1;--gold-hi:#F2EBDE;--line:rgba(210,182,161,.22);--line-2:rgba(210,182,161,.4);--gline:rgba(242,235,222,.5)}
html[data-theme="paper"] .band:not(.voices),
html[data-theme="paper"] .pr>section:last-of-type,
html[data-theme="paper"] footer{
  --ink:var(--paper-accent);--ink-2:#362F3C;--ink-3:#403947;--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--soft:rgba(242,235,222,.86);--faint:rgba(242,235,222,.4);
  --gold:#F2EBDE;--gold-2:#F2EBDE;--gold-hi:#F2EBDE;--line:rgba(242,235,222,.24);--line-2:rgba(242,235,222,.4);--gline:rgba(242,235,222,.5)}
html[data-theme="paper"] .cta{--ink:#2A1D0F;--ink-2:#34261A;--ink-3:#3E2F21;--paper:#F2EBDE;--dim:#D2B6A1;--soft:#D2B6A1;--faint:rgba(210,182,161,.4);
  --gold:#F2EBDE;--gold-2:#D2B6A1;--gold-hi:#F2EBDE;--line:rgba(210,182,161,.22);--line-2:rgba(210,182,161,.4);--gline:rgba(242,235,222,.5)}
html[data-theme="paper"] .cta{text-align:center}
html[data-theme="paper"] .cta .lead{margin-inline:auto}
html[data-theme="paper"] section[aria-labelledby="builder-heading"]{padding-top:clamp(52px,7vw,100px)!important}
/* Prices customization is cream in light mode; its controls share the local palette. */
html[data-theme="paper"].on-services:not(.paper-dark) section[aria-labelledby="builder-heading"]{
  --ink:#F2EBDE;--ink-2:#EBE2D1;--ink-3:#E2D7C2;--paper:#2A1D0F;
  --dim:rgba(42,29,15,.8);--soft:rgba(42,29,15,.72);--faint:rgba(42,29,15,.32);
  --gold:#2A1D0F;--gold-2:#2A1D0F;--gold-hi:#2A1D0F;--gold-wash:rgba(42,29,15,.08);
  --line:rgba(42,29,15,.14);--line-2:rgba(42,29,15,.26);--gline:rgba(42,29,15,.4);
  background-color:var(--ink);color:var(--paper)
}

/* Contact carries the same opaque aubergine paper as its header and footer. */
html[data-theme="paper"].on-contact{
  --ink:var(--paper-accent);--ink-2:#362F3C;--ink-3:#403947;--paper:#F2EBDE;
  --dim:rgba(242,235,222,.9);--soft:rgba(242,235,222,.86);--faint:rgba(242,235,222,.4);
  --gold:#F2EBDE;--gold-2:#F2EBDE;--gold-hi:#F2EBDE;
  --line:rgba(242,235,222,.24);--line-2:rgba(242,235,222,.4);--gline:rgba(242,235,222,.5);
  background-color:var(--paper-accent);color-scheme:dark}
html[data-theme="paper"].on-contact body,
html[data-theme="paper"].on-contact .cg{background-color:var(--paper-accent);background-image:var(--grain);background-size:400px;color:var(--paper)}
html[data-theme="paper"].on-contact .sn-est{background:transparent;border:0;border-top:1px solid var(--line);padding:20px 0}
html[data-theme="paper"].on-contact .sn-copy{border:0;border-bottom:1px solid currentColor;padding:8px 0;min-height:44px;font-weight:400;letter-spacing:.08em}
html[data-theme="paper"].on-contact .sn-copy:active{transform:none;font-style:italic}

/* ---- type ---- */
html[data-theme="paper"] h1,html[data-theme="paper"] h2,html[data-theme="paper"] h1.d1,html[data-theme="paper"] h2.d2,
html[data-theme="paper"] .pkg-intro h2,html[data-theme="paper"] .vhero h1{
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1;text-wrap:balance;color:var(--paper)}
html[data-theme="paper"] h3,html[data-theme="paper"] .compare-grid .col-head h3{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:.02em}
html[data-theme="paper"] .lead,html[data-theme="paper"] p{font-family:var(--f-serif);font-weight:400;letter-spacing:.025em;color:var(--dim)}
html[data-theme="paper"] .lead{font-size:var(--t-lead);line-height:1.55}
html[data-theme="paper"] .mono{font-family:var(--f-serif);font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
html[data-theme="paper"] .pkg-price{font-family:var(--f-serif);font-style:italic;letter-spacing:.02em}
html[data-theme="paper"] .pkg-price sup{font-size:13px;letter-spacing:.2em;font-style:normal}

/* ---- header: a cream bar. Contact far left, the real logo in the middle, a hamburger far right (every screen size) ----
   On Home it first sits under the hero; once you scroll it pops up to the top edge. */
html[data-theme="paper"]{--paper-nav-h:76px}
@media(max-width:700px){html[data-theme="paper"]{--paper-nav-h:64px}}
html[data-theme="paper"] header,html[data-theme="paper"] header.over-hero,html[data-theme="paper"] body:not(.locked) header:not(.over-hero){
  --paper:#F2EBDE;--dim:#F2EBDE;--gold:#F2EBDE;--gold-hi:#F2EBDE;--line:rgba(242,235,222,.24);--line-2:rgba(242,235,222,.4);--ink:var(--paper-accent);color:#F2EBDE;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--paper-nav-h);padding:0 var(--pad);flex-wrap:nowrap}
html[data-theme="paper"] header::before,html[data-theme="paper"] header.solid::before,
html[data-theme="paper"] header.over-hero::before,html[data-theme="paper"] header.over-hero.solid::before{
  opacity:1;bottom:0;background-color:var(--paper-accent);background-image:var(--grain);background-size:400px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="paper"] header.over-hero.hide::before{opacity:1}
html[data-theme="paper"] .brand{grid-column:2;justify-self:center;margin:0;line-height:0}
html[data-theme="paper"] .brand img{display:block;height:clamp(30px,3.4vw,40px);content:url(img/logo.png)}
html[data-theme="paper"].paper-light-nav #hdr,
html[data-theme="paper"].paper-light-nav body:not(.locked) #hdr:not(.over-hero){
  --paper:#2A1D0F;--dim:#2A1D0F;--gold:#2A1D0F;--gold-hi:#2A1D0F;--line:rgba(42,29,15,.14);--line-2:rgba(42,29,15,.26);
  --ink:var(--cream);color:#2A1D0F;background:var(--cream)}
html[data-theme="paper"].paper-light-nav #hdr::before{background-color:var(--cream)}
html[data-theme="paper"].paper-light-nav #hdr .brand img{content:url(img/logo-dark.png)}
html[data-theme="paper"].paper-light-nav #hdr .paper-contact,
html[data-theme="paper"].paper-light-nav #hdr .burger{color:#2A1D0F}
html[data-theme="paper"].paper-light-nav #hdr :focus-visible{outline-color:#2A1D0F}
html[data-theme="paper"].paper-light-nav #hdr:has(nav.links.open) .paper-contact,
html[data-theme="paper"].paper-light-nav #hdr:has(nav.links.open) .burger{color:var(--drawer-ink)}
html[data-theme="paper"].paper-light-nav #hdr:has(nav.links.open) :focus-visible{outline-color:var(--drawer-ink)}
html[data-theme="paper"] .fm img{content:url(img/logo.png)}
html[data-theme="paper"] .paper-contact{display:inline-grid!important;grid-column:1;justify-self:start;position:relative;z-index:951;
  font-family:var(--f-serif);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#F2EBDE;padding:12px 0 3px;min-height:44px;align-content:center;border-bottom:1px solid transparent}
html[data-theme="paper"] .paper-contact:hover,html[data-theme="paper"] .paper-contact:focus-visible,html[data-theme="paper"] .paper-contact:active{font-style:italic;border-bottom-color:currentColor}
html[data-theme="paper"] .theme-sw{display:none}
html[data-theme="paper"] .burger{display:inline-grid;align-content:center;justify-items:end;grid-column:3;justify-self:end;margin:0;z-index:951;width:auto;height:auto;min-width:44px;min-height:44px;padding:0;
  font-family:var(--f-serif);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#F2EBDE}
html[data-theme="paper"] .burger i{display:none}
html[data-theme="paper"] .burger::before{content:'Navigation +';grid-area:1/1;font-style:italic;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
html[data-theme="paper"] .burger.x::before{content:'Close \00d7'}
html[data-theme="paper"] .burger::after{content:'Navigation +';grid-area:1/1;padding:2px 0;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 50%,transparent)}
html[data-theme="paper"] .burger.x::after{content:'Close \00d7';border-bottom-color:currentColor}
html[data-theme="paper"] .burger:hover,html[data-theme="paper"] .burger:focus-visible,html[data-theme="paper"] .burger:active{font-style:italic}
html[data-theme="paper"] .burger:hover::after,html[data-theme="paper"] .burger:focus-visible::after,html[data-theme="paper"] .burger:active::after{border-bottom-color:currentColor}
html[data-theme="paper"] .hdr-sub{grid-column:1/-1}
/* phones: the label is too long, so the bar shows a two-line hamburger (turns into a cross when open) */
@media(max-width:700px){
  html[data-theme="paper"] .burger{display:block;position:relative;width:44px;height:44px;min-width:44px;padding:0;justify-self:end}
  html[data-theme="paper"] .burger::before,html[data-theme="paper"] .burger::after,html[data-theme="paper"] .burger.x::before,html[data-theme="paper"] .burger.x::after{content:none;display:none}
  html[data-theme="paper"] .burger i{display:block;position:absolute;left:11px;right:11px;width:auto;height:1px;background:#F2EBDE;transition:transform .3s var(--ease)}
  html[data-theme="paper"] .burger i:first-child{top:18px}
  html[data-theme="paper"] .burger i:last-child{top:25px;bottom:auto}
  html[data-theme="paper"] .burger.x i:first-child{transform:translateY(3.5px) rotate(45deg)}
  html[data-theme="paper"] .burger.x i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}
/* Home: the bar is a sibling right after the film (app.js moves it there), and sticks to the top once it gets there. Plain CSS sticky, no script. */
html[data-theme="paper"] .vhero{display:contents}
html[data-theme="paper"].on-home #page{background-color:var(--paper-accent);background-image:var(--grain);background-size:400px}
html[data-theme="paper"].on-home,html[data-theme="paper"].on-home body{background:var(--paper-accent)}   /* no cream strip at the top or on overscroll */
html[data-theme="paper"].on-home header{position:sticky;top:0}
/* The drawer keeps its brown/cream palette in both modes, independent
   of the page and top bar. Photo left, huge links right. */
html[data-theme="paper"]{
  --drawer-ground:#2A1D0F;--drawer-ink:#F2EBDE;--drawer-state:#E4D3BF;--drawer-pressed:#D2B6A1;--drawer-detail:#D2B6A1
}
html[data-theme="paper"] nav.links{position:fixed;inset:0;margin:0;background-color:var(--drawer-ground);background-image:var(--grain);background-size:400px;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,5vw,90px);padding:calc(var(--paper-nav-h) + 16px) var(--pad) 40px;
  opacity:0;visibility:hidden;clip-path:none;transition:opacity .9s cubic-bezier(.19,1,.22,1),visibility 0s linear .9s;counter-reset:nl}
html[data-theme="paper"] nav.links.open{opacity:1;visibility:visible;transition:opacity .9s cubic-bezier(.19,1,.22,1),visibility 0s}
html[data-theme="paper"] .nav-ph{grid-column:1;grid-row:1/8;position:relative;aspect-ratio:4/5;max-height:70svh;justify-self:end;width:min(100%,460px);overflow:hidden;isolation:isolate}
/* One stationary frame above every cross-fading photo, including its top edge. */
html[data-theme="paper"] .nav-ph::after{content:'';position:absolute;inset:0;z-index:1;box-sizing:border-box;border:1px solid var(--drawer-detail);pointer-events:none}
html[data-theme="paper"] .nav-ph span{position:absolute;inset:1px;z-index:0;opacity:0;transition:opacity .35s ease}
html[data-theme="paper"] .nav-ph span.on{opacity:1}
html[data-theme="paper"] .nav-ph img{width:100%;height:100%;object-fit:cover;display:block}
html[data-theme="paper"] nav.links a{grid-column:2;position:relative;justify-self:start;font-family:var(--f-display);font-weight:500;font-size:clamp(36px,4.6vw,65px);letter-spacing:.04em;line-height:1.15;text-transform:uppercase;color:var(--drawer-ink);
  display:inline-flex;flex-direction:column;padding:2px 0 4px 2.6em;min-height:44px;counter-increment:nl;
  background:linear-gradient(currentColor,currentColor) 2.6em 100%/0 1px no-repeat;transition:background-size .5s ease,opacity .2s ease,color .2s ease}
html[data-theme="paper"] nav.links a::before{content:attr(data-t);font-style:italic;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
html[data-theme="paper"] nav.links a::after{display:block;position:absolute;left:0;top:.5em;width:auto;height:auto;background:none;transform:none;
  content:counter(nl,decimal-leading-zero) ' /';font-family:var(--f-script);font-size:.45em;letter-spacing:.04em;color:var(--drawer-detail);text-transform:none}
@media (hover:hover){html[data-theme="paper"] nav.links:has(a:hover) a:not(:hover){opacity:.45}}
@media(max-width:700px){
  html[data-theme="paper"] nav.links{grid-template-columns:1fr;align-content:center;gap:4px;padding-top:calc(var(--paper-nav-h) + 8px);opacity:0;transition:opacity .5s cubic-bezier(.19,1,.22,1),visibility 0s linear .5s}
  html[data-theme="paper"] nav.links.open{transition:opacity .5s cubic-bezier(.19,1,.22,1),visibility 0s}
  html[data-theme="paper"] .nav-ph{display:none}
  html[data-theme="paper"] nav.links a{grid-column:1;font-size:36px}
}
/* with the overlay open the bar keeps only its Close label, in cream */
html[data-theme="paper"] header:has(nav.links.open) .paper-contact,html[data-theme="paper"] header:has(nav.links.open) .brand{opacity:0;pointer-events:none}
html[data-theme="paper"] header:has(nav.links.open) .burger{color:var(--drawer-ink)}
html[data-theme="paper"] header:has(nav.links.open)::before{opacity:0}
@media (prefers-reduced-motion:reduce){
  html[data-theme="paper"] nav.links,html[data-theme="paper"] nav.links.open{transition:none}
}
/* once the bar reaches the top it stays there: no hiding on scroll */
html[data-theme="paper"] header.hide{transform:none}

/* ---- Work: keep the printed ground continuous through the photo stage ---- */
html[data-theme="paper"].on-work,
html[data-theme="paper"].on-work body{background-color:var(--cream);background-image:var(--grain);background-size:400px}
html[data-theme="paper"].on-work #main,
html[data-theme="paper"].on-work #page,
html[data-theme="paper"].on-work #wk-photos,
html[data-theme="paper"].on-work .pro{background-color:var(--cream);background-image:var(--grain);background-size:400px}
html[data-theme="paper"].on-work .ps-ground,
html[data-theme="paper"].on-work .ps-bar{background-color:var(--cream);background-image:var(--grain);background-size:400px}
html[data-theme="paper"].on-work .ps-ground{transition:none}

/* Work keeps its chapter switch at the far left, the dark mark centered and the menu icon at the far right. */
html[data-theme="paper"].on-work #hdr,
html[data-theme="paper"].on-work body:not(.locked) #hdr:not(.over-hero){
  --paper:#2A1D0F;--dim:rgba(42,29,15,.8);--soft:rgba(42,29,15,.72);--faint:rgba(42,29,15,.32);
  --gold:#2A1D0F;--gold-hi:#2A1D0F;--line:rgba(42,29,15,.14);--line-2:rgba(42,29,15,.26);--ink:var(--cream);
  position:fixed;display:flex;align-items:center;justify-content:flex-start;gap:10px;
  min-height:76px;height:76px;padding:0 var(--pad);flex-wrap:nowrap;color:#2A1D0F;background:var(--cream)}
html[data-theme="paper"].on-work #hdr::before,
html[data-theme="paper"].on-work #hdr.over-hero::before{
  opacity:1;bottom:0;background-color:var(--cream);background-image:var(--grain);background-size:400px;
  box-shadow:0 1px 0 rgba(42,29,15,.14);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="paper"].on-work #hdr.over-hero.hide::before{opacity:1}
html[data-theme="paper"].on-work #hdr .paper-contact{order:0;display:inline-flex!important;align-items:center;flex:0 0 auto;
  min-height:44px;padding:0;border:0;color:#2A1D0F;font-size:13px;letter-spacing:.12em}
html[data-theme="paper"].on-work #hdr .hdr-sub{order:1;display:block;flex:0 0 auto;width:auto;margin:0;grid-column:auto}
html[data-theme="paper"].on-work #hdr .wk-tog a{min-height:44px;padding:0 2px;color:#665344;font-size:15px;letter-spacing:0}
html[data-theme="paper"].on-work #hdr .wk-tog a[aria-current]{color:#2A1D0F;font-style:italic}
html[data-theme="paper"].on-work #hdr .wk-tog .sep{height:14px;margin-inline:8px;background:rgba(42,29,15,.3)}
html[data-theme="paper"].on-work #hdr .wk-tog .ul{background:#2A1D0F}
html[data-theme="paper"].on-work #hdr .brand{position:absolute;left:50%;top:50%;z-index:1;margin:0;transform:translate(-50%,-50%);line-height:0}
html[data-theme="paper"].on-work #hdr .brand img{display:block;height:32px;content:url(img/logo-dark.png)}
html[data-theme="paper"].on-work #hdr .burger{order:2;display:flex;align-items:center;justify-content:center;flex:0 0 44px;
  width:44px;height:44px;min-width:44px;min-height:44px;margin-left:auto;padding:0;color:#2A1D0F}
html[data-theme="paper"].on-work #hdr .burger::after{display:none;content:none}
html[data-theme="paper"].on-work #hdr .burger i{background:#2A1D0F}
html[data-theme="paper"].on-work #hdr .theme-sw{display:none}
html[data-theme="paper"].on-work #hdr nav.links{z-index:950}
html[data-theme="paper"].on-work #hdr :focus-visible{outline-color:#2A1D0F}
html[data-theme="paper"].on-work body:not(.locked) #hdr.solid:not(.over-hero){min-height:56px;height:56px}
html[data-theme="paper"].on-work #hdr.solid .brand img{height:27px}
html[data-theme="paper"].on-work #hdr:has(nav.links.open) .burger{color:var(--drawer-ink)}
html[data-theme="paper"].on-work #hdr:has(nav.links.open) .burger i{background:var(--drawer-ink)}
html[data-theme="paper"].on-work #hdr:has(nav.links.open)::before{opacity:0}
html[data-theme="paper"].on-work #hdr:has(nav.links.open) :focus-visible{outline-color:var(--drawer-ink)}
@media(max-width:700px){
  /* Work gets a breathing room row on phones: the brand and actions stay in
     the first row, while Photographs | Films gets a readable second row. */
  html[data-theme="paper"].on-work{--paper-nav-h:92px}
  html[data-theme="paper"].on-work #hdr,
  html[data-theme="paper"].on-work body:not(.locked) #hdr:not(.over-hero){height:92px;min-height:92px;display:flex;gap:4px;padding:0 var(--pad);align-items:flex-start}
  html[data-theme="paper"].on-work #hdr .paper-contact{position:absolute;left:var(--pad);top:8px;min-height:44px;font-size:13px;letter-spacing:.04em}
  html[data-theme="paper"].on-work #hdr .hdr-sub{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;justify-content:center}
  html[data-theme="paper"].on-work #hdr .wk-tog a{min-height:40px;padding:0 3px;font-size:14px;letter-spacing:0}
  html[data-theme="paper"].on-work #hdr .wk-tog .sep{height:12px;margin-inline:3px}
  html[data-theme="paper"].on-work #hdr .wk-tog .ul{bottom:6px}
  html[data-theme="paper"].on-work #hdr .brand img,
  html[data-theme="paper"].on-work #hdr.solid .brand img{height:clamp(24px,7vw,30px)}
  html[data-theme="paper"].on-work #hdr .brand{top:8px;transform:translateX(-50%)}
  html[data-theme="paper"].on-work #hdr .burger{position:absolute;right:var(--pad);top:8px;margin:0}
}
@media(max-width:350px){
  html[data-theme="paper"].on-work #hdr,
  html[data-theme="paper"].on-work body:not(.locked) #hdr:not(.over-hero){gap:2px;padding-inline:16px}
  html[data-theme="paper"].on-work #hdr .paper-contact,
  html[data-theme="paper"].on-work #hdr .wk-tog a{font-size:9.5px}
}
@media(max-width:700px){
  /* Keep Work's first row identical to the other Paper headers. The view
     switch owns a separate second row and never participates in condensing. */
  html[data-theme="paper"].on-work{--paper-nav-h:96px}
  html[data-theme="paper"].on-work #hdr,
  html[data-theme="paper"].on-work body:not(.locked) #hdr:not(.over-hero){
    height:96px!important;min-height:96px!important;display:grid!important;
    grid-template-columns:1fr auto 1fr;grid-template-rows:56px 40px;
    align-items:center;gap:0;padding:0 var(--pad);flex-wrap:nowrap
  }
  html[data-theme="paper"].on-work #hdr .paper-contact{position:static;grid-column:1;grid-row:1;justify-self:start;min-height:44px;font-size:14px;letter-spacing:.2em}
  html[data-theme="paper"].on-work #hdr .brand{position:static;grid-column:2;grid-row:1;transform:none;justify-self:center}
  html[data-theme="paper"].on-work #hdr .brand img,
  html[data-theme="paper"].on-work #hdr.solid .brand img{height:30px}
  html[data-theme="paper"].on-work #hdr .theme-sw{display:grid;position:absolute;right:calc(var(--pad) + 50px);top:6px;width:34px;height:34px;margin:0}
  html[data-theme="paper"].on-work #hdr .burger{position:absolute;right:var(--pad);top:6px;grid-column:3;grid-row:1;margin:0}
  html[data-theme="paper"].on-work #hdr .hdr-sub{position:static;grid-column:1/-1;grid-row:2;width:auto;height:40px;display:flex;align-items:center;justify-content:center}
  html[data-theme="paper"].on-work #hdr .wk-tog a{min-height:40px;padding:0 3px;font-size:14px;letter-spacing:0}
}
html[data-theme="paper"] #hdr nav.links a.book{
  display:inline-flex!important;grid-column:2;font-family:var(--f-display);font-size:clamp(36px,4.6vw,65px);font-weight:500;letter-spacing:.04em;line-height:1.15;
  color:var(--drawer-ink);text-transform:uppercase;padding:2px 0 4px 2.6em!important;min-height:44px;background:linear-gradient(currentColor,currentColor) 2.6em 100%/0 1px no-repeat;border:0;transition:background-size .5s ease,opacity .2s ease,color .2s ease}
/* Contact uses the menu label, rather than the button's hidden italic twin. */
html[data-theme="paper"] #hdr nav.links a.book span{opacity:1}
html[data-theme="paper"] #hdr nav.links a.book i{display:none}
/* One drawer state for every route and link, including Contact. */
html[data-theme="paper"] #hdr nav.links a[data-nav]:is(.on,:hover,:focus-visible,:active){
  font-style:italic;color:var(--drawer-state);background-size:calc(100% - 2.6em) 1px;outline-color:var(--drawer-detail)}
html[data-theme="paper"] #hdr nav.links a[data-nav]:active{color:var(--drawer-pressed)}
@media(max-width:700px){html[data-theme="paper"] #hdr nav.links a.book{grid-column:1}}

/* ---- buttons are links: caps, tracked, italic + underline on hover / focus / press ---- */
html[data-theme="paper"] .btn,html[data-theme="paper"] .book,html[data-theme="paper"] nav.links a.book{
  display:inline-grid;border:0;border-radius:0;padding:12px 0 3px !important;background:none;overflow:visible;
  font-family:var(--f-serif);font-size:14px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid transparent;transition:none;min-height:44px;align-content:end}
html[data-theme="paper"] .btn span,html[data-theme="paper"] .book span{grid-area:1/1}
/* the existing wipe layer becomes the hidden italic twin */
html[data-theme="paper"] .btn i,html[data-theme="paper"] .book i{position:static;grid-area:1/1;background:none;color:inherit;clip-path:none;font-style:italic;visibility:hidden;height:0;overflow:hidden;transition:none}
html[data-theme="paper"] .btn:hover,html[data-theme="paper"] .btn:focus-visible,html[data-theme="paper"] .btn:active,
html[data-theme="paper"] .book:hover,html[data-theme="paper"] .book:focus-visible,html[data-theme="paper"] .book:active{font-style:italic;border-bottom-color:currentColor;transform:none}
html[data-theme="paper"] .btn:active,html[data-theme="paper"] .book:active{transform:none}
/* Prices toggles read as links too */
html[data-theme="paper"] .pr .filter-toggle,html[data-theme="paper"] .pr .currency-toggle{border:0;gap:26px}
html[data-theme="paper"] .pr .filter-toggle button,html[data-theme="paper"] .pr .currency-toggle button{
  padding:10px 0 3px;min-height:44px;font-family:var(--f-serif);font-size:14px;letter-spacing:.2em;font-weight:400;color:var(--gold);background:none;border-bottom:1px solid transparent}
html[data-theme="paper"] .pr .filter-toggle button:hover,html[data-theme="paper"] .pr .currency-toggle button:hover,
html[data-theme="paper"] .pr .filter-toggle button:focus-visible,html[data-theme="paper"] .pr .currency-toggle button:focus-visible,
html[data-theme="paper"] .pr .filter-toggle button.is-active,html[data-theme="paper"] .pr .currency-toggle button.is-active{
  background:none;color:var(--gold);font-style:italic;border-bottom-color:currentColor}

/* the hero declares its own dark tokens in style.css; put it back on cream */
html[data-theme="paper"] .vhero{--ink:var(--paper-accent);--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--soft:rgba(242,235,222,.82);--gold:#F2EBDE;--gold-hi:#F2EBDE;color:#F2EBDE}
html[data-theme="paper"].cb-pen-boot body,html[data-theme="paper"].cb-pen-boot{background:var(--paper-accent)}   /* the intro room is aubergine; the dark frame holds the pen */
/* ---- Home: the film (and, first, the drawn logo) fills the screen above the bar, in a thin frame ---- */
html[data-theme="paper"] .vhero-media{position:relative;inset:auto;width:auto;max-width:none;height:calc(100svh - var(--paper-nav-h) - 18px);margin:18px var(--pad) 0;aspect-ratio:auto;border:1px solid #D2B6A1;background-color:var(--paper-accent);background-image:var(--grain);background-size:400px}
html[data-theme="paper"] .vhero .cb-video-cover{background:none}
html[data-theme="paper"] .vhero-media::after{display:none}
html[data-theme="paper"] .vhero .cb-hero-placeholder{inset:0}
html[data-theme="paper"] .vhero-in{position:static;padding:0 var(--pad);text-align:center;max-width:820px;margin:clamp(40px,5vw,72px) auto 0;color:#F2EBDE;background:none}
html[data-theme="paper"] .vhero h1{font-size:clamp(26px,3.6vw,48px);max-width:none;letter-spacing:.02em;line-height:1.1}
html[data-theme="paper"] .vhero p{margin:20px auto 0;color:var(--dim);font-style:italic;font-size:clamp(17px,1.7vw,22px);max-width:44ch}
html[data-theme="paper"] .vhero .acts{justify-content:center;margin-top:24px}
html[data-theme="paper"] .vhero .quiet{display:none}
html[data-theme="paper"] .vhero-foot{position:static;display:flex;justify-content:center;gap:clamp(18px,4vw,56px);padding:26px var(--pad) clamp(40px,5vw,72px);border:0;color:var(--soft)}
/* the scroll cue: one word and a slow hairline, inside the bottom of the frame; gone once you scroll */
html[data-theme="paper"] .scroll-cue{display:flex!important;flex-direction:column;align-items:center;gap:10px;position:absolute;left:50%;transform:translateX(-50%);
  top:calc(100svh - var(--paper-nav-h) - 84px);z-index:3;pointer-events:none;color:#F2EBDE;transition:opacity .4s ease}
html[data-theme="paper"] .scroll-cue span{font-family:var(--f-serif);font-size:12px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
html[data-theme="paper"] .scroll-cue i{display:block;width:1px;height:38px;background:rgba(242,235,222,.35);position:relative;overflow:hidden}
html[data-theme="paper"] .scroll-cue i::after{content:'';position:absolute;left:0;top:0;width:1px;height:14px;background:#F2EBDE;animation:paper-cue 2.2s ease-in-out infinite}
@keyframes paper-cue{from{transform:translateY(-14px)}to{transform:translateY(38px)}}
html[data-theme="paper"].paper-scrolled .scroll-cue,html[data-theme="paper"].cb-pen-hold .scroll-cue{opacity:0}
@media (prefers-reduced-motion:reduce){html[data-theme="paper"] .scroll-cue i::after{animation:none;transform:translateY(12px)}}

/* ---- Home: the rest ---- */
html[data-theme="paper"] .plan h2.d2,html[data-theme="paper"] .band h2.d2{color:var(--paper)}
html[data-theme="paper"] .day-pin,html[data-theme="paper"] .day{background:none}
html[data-theme="paper"] .arch,html[data-theme="paper"] .day-ph,html[data-theme="paper"] figure.arch{border:1px solid var(--brown);border-radius:0}
/* Keep the archive wall in the paper theme's dark brown family; the dark veil
   lets the photographs remain present while keeping the figure readable through the zoom. */
html[data-theme="paper"] .tally{--ink:#2A1D0F;--ink-2:#34261A;--paper:#F2EBDE;--gold:#F2EBDE;--dim:rgba(242,235,222,.8);background-color:var(--brown)}
html[data-theme="paper"] .tally-big span,html[data-theme="paper"] .tally-copy,html[data-theme="paper"] .tally-more{color:var(--cream);text-shadow:0 1px 18px rgba(42,29,15,.8)}
html[data-theme="paper"] .tally-pin::after{background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(42,29,15,.86),rgba(42,29,15,.62) 70%,rgba(42,29,15,.5) 100%)}
html[data-theme="paper"] .tally-live .mo-t.mo-mid img{object-fit:cover;object-position:60% 50%}
html[data-theme="paper"] .voices blockquote p,html[data-theme="paper"] .v-more blockquote p{font-family:var(--f-serif);font-style:italic;color:var(--brown);letter-spacing:.02em}
html[data-theme="paper"] .voices figcaption{font-family:var(--f-serif);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-style:normal}
html[data-theme="paper"] .paper-proof{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
html[data-theme="paper"] .paper-proof a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 0;color:var(--paper);text-decoration:none;line-height:1.4}
html[data-theme="paper"] .paper-proof a+a{border-left:1px solid var(--line);padding-left:18px;margin-left:18px}
html[data-theme="paper"] .paper-proof a span{font-family:var(--f-serif);font-size:17px;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--gline);text-underline-offset:4px}
html[data-theme="paper"] .paper-proof a:focus-visible span,html[data-theme="paper"] .paper-proof a:active span{font-style:italic;text-decoration-color:currentColor}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .paper-proof a:hover span{font-style:italic;text-decoration-color:currentColor}}
html[data-theme="paper"] .paper-proof small{font-size:12px;color:var(--dim);text-align:right}
html[data-theme="paper"] .paper-proof a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
@media(max-width:620px){html[data-theme="paper"] .paper-proof{grid-template-columns:1fr}html[data-theme="paper"] .paper-proof a+a{border-left:0;border-top:1px solid var(--line);padding-left:0;margin-left:0}}

/* ---- Prices ---- */
html[data-theme="paper"] .pr .pr-bar,html[data-theme="paper"] .pr .filter-bar-label{color:var(--soft)}
html[data-theme="paper"] .pr .note-box{background:none;border:1px solid var(--line-2);border-radius:0}
html[data-theme="paper"] .pr-pkgs{padding-top:clamp(36px,5vw,64px)}
html[data-theme="paper"] .pr-pkgs{counter-reset:pkg}
html[data-theme="paper"] .pkg-section{counter-increment:pkg;border-color:var(--line);position:relative}
html[data-theme="paper"] .pkg-intro::before{content:'0' counter(pkg) '.';display:block;font-family:var(--f-script);font-size:clamp(34px,4vw,52px);line-height:1.2;color:rgba(233,224,207,.2);margin-bottom:4px}
html[data-theme="paper"] .pr-tier{color:var(--paper);letter-spacing:.2em}
html[data-theme="paper"] .pr-tier::before{display:none}
html[data-theme="paper"] .feature-rows li{border:0;padding:3px 0;color:var(--dim);font-size:15.5px;line-height:1.55}
html[data-theme="paper"] .feature-rows li::before{content:'+';flex:0 0 auto;height:auto;margin:0;background:none;color:var(--paper)}
html[data-theme="paper"] .feature-rows li.coverage-line{color:var(--paper)}
html[data-theme="paper"] .compare-grid,html[data-theme="paper"] .compare-grid>div{border-color:var(--line)}
html[data-theme="paper"] .compare-grid .col-head{background:none}
html[data-theme="paper"] .compare-grid .col-head h3,html[data-theme="paper"] .compare-grid .col-head .col-price{color:var(--paper)}
html[data-theme="paper"] .compare-grid .row-label{font-family:var(--f-serif);letter-spacing:.14em}
/* form-ish bits on Prices: quiet outlines, brown text, no rounding */
html[data-theme="paper"] .pill-inner,html[data-theme="paper"] input,html[data-theme="paper"] select,html[data-theme="paper"] textarea{border-radius:0;font-family:var(--f-serif)}

/* ---- footer ---- */
html[data-theme="paper"] .founder-portrait{background-image:var(--grain);background-size:400px}
html[data-theme="paper"] footer{border-top:0}
html[data-theme="paper"] footer .fc a,html[data-theme="paper"] footer p,html[data-theme="paper"] footer h2{font-family:var(--f-serif);color:var(--paper)}
html[data-theme="paper"] footer .credit-logo{filter:none;opacity:.7}

/* ---- subtle warm tone on photos, Paper only. CSS filter, originals untouched. Set --paper-photo:none to switch it off ---- */
html[data-theme="paper"]{--paper-photo:sepia(.1) saturate(.94) contrast(.96) brightness(1.02)}
html[data-theme="paper"] main picture img,html[data-theme="paper"] main figure img,html[data-theme="paper"] .mosaic img{filter:var(--paper-photo)}


/* ---- footer: no navigation here (it lives in the bar and the overlay). Logo, tagline, Elsewhere, copyright, credit ---- */
html[data-theme="paper"] .ftop{grid-template-columns:1.3fr 1fr}
html[data-theme="paper"] .ftop>.fc:nth-child(2){display:none}
html[data-theme="paper"] footer .fc a{display:block;width:fit-content;min-height:44px;padding:10px 0 0}

/* ---- links look like links at rest; every tap target is at least 44px; visible focus ---- */
html[data-theme="paper"] .btn,html[data-theme="paper"] .paper-contact,html[data-theme="paper"] .pr .filter-toggle button,html[data-theme="paper"] .pr .currency-toggle button{
  border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 50%,transparent)}
html[data-theme="paper"] .btn:hover,html[data-theme="paper"] .btn:focus-visible,html[data-theme="paper"] .btn:active,
html[data-theme="paper"] .paper-contact:hover,html[data-theme="paper"] .paper-contact:focus-visible,
html[data-theme="paper"] .pr .filter-toggle button.is-active,html[data-theme="paper"] .pr .currency-toggle button.is-active{border-bottom-color:currentColor}
html[data-theme="paper"] :focus-visible{outline:2px solid #2A1D0F;outline-offset:3px}
html[data-theme="paper"] header :focus-visible,html[data-theme="paper"] .vhero :focus-visible{outline-color:#F2EBDE}
html[data-theme="paper"] .plan :focus-visible,html[data-theme="paper"] .pr-pkgs :focus-visible,html[data-theme="paper"] .cta :focus-visible,
html[data-theme="paper"] footer :focus-visible,html[data-theme="paper"] .band:not(.voices) :focus-visible{outline-color:#F2EBDE}
html[data-theme="paper"] .pr .filter-toggle,html[data-theme="paper"] .pr .currency-toggle{flex-wrap:wrap;gap:0 22px;max-width:100%}
html[data-theme="paper"] .pr .pr-bar,html[data-theme="paper"] .pr .filter-bar{max-width:100%}

/* ---- Home: Recent work as seven full-screen cards, one per chapter (Paper's own markup, see paperCards() in app.js) ---- */
html[data-theme="paper"] .pcards{padding:0;background-color:#2A1D0F}
html[data-theme="paper"] .pcards-stick{position:relative}
html[data-theme="paper"] .pcards-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
html[data-theme="paper"] .pcards-track::-webkit-scrollbar{display:none}
html[data-theme="paper"] .pcard{position:relative;flex:0 0 86vw;scroll-snap-align:center;scroll-snap-stop:always;min-height:min(86svh,680px);display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:22px 20px 28px;
  background-color:var(--ink);background-image:var(--grain);background-size:400px;color:var(--paper)}
html[data-theme="paper"] .pc-1{--ink:#F2EBDE;--paper:#2A1D0F;--dim:rgba(42,29,15,.85);--line:rgba(42,29,15,.3)}
html[data-theme="paper"] .pc-2{--ink:#484542;--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--line:rgba(242,235,222,.4)}
html[data-theme="paper"] .pc-3{--ink:#78612F;--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--line:rgba(242,235,222,.4)}
html[data-theme="paper"] .pc-4{--ink:#4A2530;--paper:#F2EBDE;--dim:#D2B6A1;--line:rgba(210,182,161,.4)}
html[data-theme="paper"] .pc-5{--ink:#4A4F34;--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--line:rgba(242,235,222,.4)}
html[data-theme="paper"] .pc-6{--ink:#F2EBDE;--paper:#2A1D0F;--dim:rgba(42,29,15,.85);--line:rgba(42,29,15,.3)}
html[data-theme="paper"] .pc-7{--ink:#4A2530;--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--line:rgba(242,235,222,.4)}
html[data-theme="paper"] .pcard{--gold:var(--paper)}
html[data-theme="paper"] .pcard :focus-visible{outline-color:var(--paper)}
html[data-theme="paper"] .pc-ph{order:-1;margin:0;border:1px solid currentColor;aspect-ratio:4/5;overflow:hidden;max-height:52svh}
html[data-theme="paper"] .pc-ph img{width:100%;height:100%;object-fit:cover;display:block}
html[data-theme="paper"] .pc-ph img{filter:blur(0);transform:translate3d(0,0,0);transition:filter .18s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
html[data-theme="paper"] .pcards.pc-moving-down .pc-ph img{filter:blur(2px);transform:translate3d(-4px,0,0) scale(1.01)}
html[data-theme="paper"] .pcards.pc-moving-up .pc-ph img{filter:blur(2px);transform:translate3d(4px,0,0) scale(1.01)}
@media(prefers-reduced-motion:reduce){html[data-theme="paper"] .pcards.pc-moving-down .pc-ph img,html[data-theme="paper"] .pcards.pc-moving-up .pc-ph img{filter:none;transform:none}}
html[data-theme="paper"] .pc-tx h2{font-size:clamp(30px,8vw,44px);color:var(--paper)}
html[data-theme="paper"] .pc-tx p{margin:14px 0 6px;color:var(--dim);font-style:italic;font-size:17px;max-width:34ch}
html[data-theme="paper"] .pc-tag{display:block;margin-top:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
html[data-theme="paper"] .pc-no{display:block;font-family:var(--f-script);font-size:42px;line-height:1.1;color:var(--paper);opacity:.75;margin-bottom:4px}
html[data-theme="paper"] .pc-tx .btn{color:var(--paper)}
html[data-theme="paper"] .pc-chapter-nav{position:absolute;z-index:3;top:8px;right:var(--pad)}
html[data-theme="paper"] .pc-dots{list-style:none;display:flex;gap:4px;padding:0;margin:0;color:inherit;font-family:var(--f-serif);font-size:13px;letter-spacing:.14em}
html[data-theme="paper"] .pc-dots a{display:grid;place-items:center;min-width:44px;min-height:44px;color:inherit;text-decoration:none;opacity:.68}
html[data-theme="paper"] .pc-dots a[aria-current="step"]{font-style:italic;opacity:1;text-decoration:underline;text-underline-offset:6px}
html[data-theme="paper"] .pc-dots a:focus-visible{outline:2px solid currentColor;outline-offset:1px}
/* On phones the photograph needs room to breathe before the chapter copy. A
   wide crop keeps faces and gestures legible while leaving the snap gesture
   and the paper card rhythm intact. */
@media (max-width:700px){
  html[data-theme="paper"] .pcard{flex-basis:calc(100vw - 32px);min-height:calc(100svh - 32px);padding:18px 16px 24px;gap:18px}
  html[data-theme="paper"] .pc-ph{width:100%;height:clamp(190px,38svh,320px);flex:0 0 auto;aspect-ratio:auto;max-height:none}
  html[data-theme="paper"] .pc-ph img{object-position:50% 42%}
  html[data-theme="paper"] .pc-tx p{font-size:16px;line-height:1.35}
}
/* Pointer devices without reduced motion: one pinned viewport per chapter; the next scroll leaves Farewell immediately. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html[data-theme="paper"] .pcards{height:calc(var(--pc-n,7)*100svh)}
  html[data-theme="paper"] .pcards-stick{position:sticky;top:0;height:100svh;overflow:hidden}
  html[data-theme="paper"] .pcards-track{width:calc(var(--pc-n,7)*100vw);height:100%;overflow:visible;scroll-snap-type:none}
  html[data-theme="paper"] .pcard{flex:0 0 100vw;height:100svh;min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(30px,6vw,110px);padding:calc(var(--paper-nav-h) + 20px) var(--pad) 60px}
  html[data-theme="paper"] .pc-ph{order:0;aspect-ratio:auto;height:min(68svh,calc(100svh - 220px));max-height:none;justify-self:end;width:min(100%,640px);grid-column:1}
  html[data-theme="paper"] .pc-tx{grid-column:2}
  html[data-theme="paper"] .pcard:nth-child(even) .pc-ph{grid-column:2;justify-self:start}
  html[data-theme="paper"] .pcard:nth-child(even) .pc-tx{grid-column:1;grid-row:1;justify-self:end;text-align:right}
  html[data-theme="paper"] .pcard:nth-child(even) .pc-tx p{margin-left:auto}
  html[data-theme="paper"] .pc-tx h2{font-size:clamp(40px,5.4vw,84px)}
  html[data-theme="paper"] .pc-chapter-nav{top:calc(var(--paper-nav-h) + 8px)}
  html[data-theme="paper"] .pc-dots{gap:8px}
}


/* ---- "We stay out of the way": one flat aubergine screen, big words over four photos dimmed to 27% ---- */
html[data-theme="paper"] .band:not(.voices){position:relative;overflow:hidden;min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding-top:calc(var(--paper-nav-h) + 24px);padding-bottom:90px}
html[data-theme="paper"] .band:not(.voices) .band-in{display:block;max-width:900px;position:relative;z-index:1}
html[data-theme="paper"] .band:not(.voices) figure{display:none}
html[data-theme="paper"] .band:not(.voices) h2.d2{font-size:clamp(40px,8vw,120px);line-height:.98}
html[data-theme="paper"] .band:not(.voices) .lead{margin:clamp(22px,3vw,40px) auto 0;max-width:46ch;font-size:clamp(16px,1.35vw,19px)}

/* ---- inquire screen: flat brown, big centred words over four softly dimmed photos ---- */
html[data-theme="paper"] .cta{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;overflow:hidden;padding:calc(var(--paper-nav-h) + 24px) var(--pad) 90px}
html[data-theme="paper"] .cta h2{font-size:clamp(40px,8vw,120px);line-height:.98;position:relative;z-index:1}
html[data-theme="paper"] .cta .lead{margin-left:auto;margin-right:auto;max-width:46ch;font-size:clamp(16px,1.35vw,19px)}
html[data-theme="paper"] .cta .lead,html[data-theme="paper"] .cta .btn{position:relative;z-index:1}
html[data-theme="paper"] .cta .btn{font-size:16px}
html[data-theme="paper"] .cta-ph span{position:absolute;width:clamp(90px,15vw,210px);aspect-ratio:4/5;opacity:.27;border:1px solid #F2EBDE;overflow:hidden}
html[data-theme="paper"] .cta-ph img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:hover) and (pointer:fine){
  html[data-theme="paper"] :is(.cta,.band:not(.voices)) .cta-ph span{transform:scale(1);transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
  html[data-theme="paper"] :is(.cta,.band:not(.voices)) .cta-ph span:hover{opacity:1;transform:scale(1.06)}
}
@media(prefers-reduced-motion:reduce){html[data-theme="paper"] :is(.cta,.band:not(.voices)) .cta-ph span{transform:none!important}}
html[data-theme="paper"] .cta-ph span:nth-child(1){left:6%;top:16%}
html[data-theme="paper"] .cta-ph span:nth-child(2){right:7%;top:12%}
html[data-theme="paper"] .cta-ph span:nth-child(3){left:12%;bottom:12%}
html[data-theme="paper"] .cta-ph span:nth-child(4){right:11%;bottom:14%}
@media(max-width:700px){html[data-theme="paper"] .cta-ph span{width:26vw}html[data-theme="paper"] .cta-ph span:nth-child(1){left:-4%;top:9%}html[data-theme="paper"] .cta-ph span:nth-child(2){right:-4%;top:6%}html[data-theme="paper"] .cta-ph span:nth-child(3){left:2%;bottom:8%}html[data-theme="paper"] .cta-ph span:nth-child(4){right:2%;bottom:6%}}

/* ---- loader: the pen logo on aubergine, drawn by the film's real buffer progress; numerals, a hairline rule and one italic line ---- */
html[data-theme="paper"] .paper-loader{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4svh,40px);
  background-color:var(--paper-accent);background-image:var(--grain);background-size:400px;color:#F2EBDE;padding:0 var(--pad);transition:opacity .7s cubic-bezier(.19,1,.22,1)}
html[data-theme="paper"] .paper-loader.is-leaving{opacity:0;pointer-events:none}
html[data-theme="paper"] .pl-art{position:relative;width:min(560px,74vw);aspect-ratio:2048/981}
html[data-theme="paper"] .pl-art>img{width:100%;height:100%;object-fit:contain;display:block}
html[data-theme="paper"] .pl-art .cb-loader{--cb-background:transparent;position:absolute;inset:0;animation:none}
html[data-theme="paper"] .pl-art .cb-loader .cb-art{position:absolute;inset:0;width:100%;aspect-ratio:auto}
html[data-theme="paper"] .pl-meta{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(260px,64vw);text-align:center}
html[data-theme="paper"] .pl-num{font-family:var(--f-display);font-weight:500;font-size:28px;line-height:1;letter-spacing:.08em;font-variant-numeric:tabular-nums lining-nums;min-width:4ch}
html[data-theme="paper"] .pl-num small{font-size:.62em;margin-left:.15em;letter-spacing:0}
html[data-theme="paper"] .pl-rule{display:block;width:100%;height:1px;background:rgba(242,235,222,.22);overflow:hidden}
html[data-theme="paper"] .pl-rule i{display:block;height:100%;background:#F2EBDE;transform:scaleX(0);transform-origin:left}
html[data-theme="paper"] .pl-msg{margin:0;min-height:1.6em;font-style:italic;font-size:17px;letter-spacing:.02em;color:rgba(242,235,222,.8);transition:opacity .3s ease}
html[data-theme="paper"] .pl-msg.out{opacity:0}
/* the reveal: frame, bar, then the copy and cue come up with a soft fade and a 14px rise (1s each, staggered 0.25s) */
html[data-theme="paper"].cb-pen-boot .vhero-media{transition:opacity 1s var(--ease),transform 1s var(--ease)}
html[data-theme="paper"].cb-pen-hold .vhero-media{opacity:0;transform:translateY(14px)}
html[data-theme="paper"].cb-pen-boot #hdr{transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:.25s}
html[data-theme="paper"].cb-pen-hold #hdr{transform:translateY(14px)}
html[data-theme="paper"].cb-pen-boot .vhero-in>*,html[data-theme="paper"].cb-pen-boot .vhero-foot{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:.5s}
html[data-theme="paper"].cb-pen-hold .vhero-in>*,html[data-theme="paper"].cb-pen-hold .vhero-foot{transform:translateY(14px);filter:none}
@media (prefers-reduced-motion:reduce){html[data-theme="paper"].cb-pen-boot .vhero-media,html[data-theme="paper"].cb-pen-boot #hdr,html[data-theme="paper"].cb-pen-boot .vhero-in>*,html[data-theme="paper"].cb-pen-boot .vhero-foot{transition:none;transform:none}}

/* ---- Home testimonial: the big quote is written in as you scroll, in script; the rest fades in ---- */
html[data-theme="paper"] .wi-w{--p:1;display:inline-block;padding:.12em .2em;margin:-.12em -.2em;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p)*108% - 8%),transparent calc(var(--p)*108%));mask-image:linear-gradient(90deg,#000 calc(var(--p)*108% - 8%),transparent calc(var(--p)*108%))}
html[data-theme="paper"] .v-lead .hang{display:none}
@media (prefers-reduced-motion:reduce){html[data-theme="paper"] .wi-w{-webkit-mask-image:none;mask-image:none}}

/* ---- "We plan the boring parts": heading smaller, the paragraphs in the display serif and wider ---- */
html[data-theme="paper"] .plan h2.d2{font-size:clamp(32px,4.2vw,56px);line-height:1.05}
html[data-theme="paper"] .plan p.lead{font-size:clamp(21px,2.3vw,32px);line-height:1.5;letter-spacing:.01em;max-width:36ch}
html[data-theme="paper"] .plan p.lead+p.lead{opacity:.78}
/* Home copy fades as each text group enters; photo chapter cards keep their own motion. */
html[data-theme="paper"].on-home .vhero h1 .rv-l{opacity:1}
html[data-theme="paper"].on-home .vhero h1 .rv-l>span{transform:none;transition:none}
html[data-theme="paper"].on-home #page .paper-text-fade{transition:opacity 280ms var(--ease);transition-delay:var(--paper-text-delay,0ms)!important}
html[data-theme="paper"].on-home .paper-text-pending{opacity:0!important}
@media(prefers-reduced-motion:reduce){html[data-theme="paper"].on-home .paper-text-pending{opacity:1!important}}
@media(min-width:861px){html[data-theme="paper"] .plan .band-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,100px)}}

/* ---- About: keep the brothers' statement present while its three thoughts cross the scroll ---- */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  html[data-theme="paper"] .ab-head .ab-l{color:var(--paper);opacity:.42;transition:none}
  html[data-theme="paper"] .ab-paras p.lead{opacity:0;transform:none;transition:none}
}

/* ---- About: a quiet, static map that lets the travel copy lead ---- */
html[data-theme="paper"] .cmap{opacity:.64;pointer-events:none}
html[data-theme="paper"] .cmap-grid{display:none}
html[data-theme="paper"] .cmap-oth{opacity:.42}
html[data-theme="paper"] .cmap-ca{stroke:var(--paper);stroke-width:1.05;opacity:.82}
html[data-theme="paper"] .cmap-g{mask:url(#cm-l)}
@media(max-width:900px){html[data-theme="paper"] .gta{gap:28px}html[data-theme="paper"] .cmap{max-width:420px}}

/* ---- chapter rail ---- */
html[data-theme="paper"] #page>section{position:relative}
html[data-theme="paper"] .rail{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;display:flex;align-items:center;gap:14px;font-family:var(--f-serif);font-style:italic;font-size:13px;letter-spacing:.14em;color:var(--soft);pointer-events:none}
html[data-theme="paper"] .rail i{flex:1;height:1px;background:currentColor;opacity:.5;max-width:220px}
html[data-theme="paper"] .vhero .rail{display:none}

/* ---- calm: no bounce, nothing slides, no hover lift ---- */
.paper-menu-icon{display:none}
html[data-theme="paper"] #burger{display:flex;align-items:center;justify-content:flex-end;gap:12px}
html[data-theme="paper"] #burger i,html[data-theme="paper"] #burger::before{display:none}
html[data-theme="paper"] #burger::after,html[data-theme="paper"] #burger.x::after{display:none;content:none}
html[data-theme="paper"] .paper-menu-icon{display:block;width:24px;height:24px;flex:none;overflow:visible}
html[data-theme="paper"] .menu-bars,html[data-theme="paper"] .menu-close{transition:opacity 180ms cubic-bezier(.23,1,.32,1)}
html[data-theme="paper"] .menu-bars path{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
html[data-theme="paper"] .menu-close{opacity:0}
html[data-theme="paper"] #burger.x .menu-bars{opacity:0}
html[data-theme="paper"] #burger.x .menu-close{opacity:1}
html[data-theme="paper"] .bar-middle{transform-origin:20px 12px}
@media(hover:hover) and (pointer:fine){
  html[data-theme="paper"] #burger:not(.x):hover .bar-middle{transform:scaleX(1.333333)}
  html[data-theme="paper"] #burger:not(.x):hover .bar-top{transform:translateY(-1px)}
  html[data-theme="paper"] #burger:not(.x):hover .bar-bottom{transform:translateY(1px)}
}
html[data-theme="paper"] #burger:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html[data-theme="paper"] #navlinks.open a:focus-visible{outline:none;font-style:italic;background-size:calc(100% - 2.6em) 2px}
@media(max-width:700px){html[data-theme="paper"] #burger{justify-content:center}html[data-theme="paper"] #burger::after{display:none}}

/* ---- Paper motion step 1: press and hover. Colour, opacity and underline only; hover on a real pointer, the same change on :active for phones ---- */
/* H1 footer links: the underline draws in from the left, retracts to the right; pressed = 2px, .8 */
html[data-theme="paper"] footer .fc a{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size 160ms var(--ease),opacity 120ms var(--ease),color .3s var(--ease)}
html[data-theme="paper"] footer .fc a:active{background-position:0 100%;background-size:100% 2px;opacity:.8}
html[data-theme="paper"] .paper-proof a span{transition:text-decoration-color 220ms var(--ease),text-decoration-thickness 120ms var(--ease)}
html[data-theme="paper"] .paper-proof a:active span{text-decoration-thickness:2px;opacity:.8}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] footer .fc a:hover{background-position:0 100%;background-size:100% 1px;transition-duration:220ms,120ms,.3s}}
/* H2 menu: shared drawer states above own color, italic and underline. */
html[data-theme="paper"] nav.links a:active{color:var(--drawer-pressed);opacity:.8;transition-duration:.5s,120ms,120ms}
/* H3 the frame count warms with the photograph (the 1.02 scale stays mouse-only) */
html[data-theme="paper"] .seq-count{transition:color 200ms var(--ease)}
html[data-theme="paper"] .ps-body:has(.fr-img:active) .seq-count{color:var(--gold)}
/* H4 Prices cards: border darkens, a 3% warm wash; the selected card settles its wash in */
html[data-theme="paper"] .pill-inner{transition:border-color 180ms var(--ease),background-color 180ms var(--ease)}
html[data-theme="paper"] .pill input:checked+.pill-inner{transition-duration:280ms}
html[data-theme="paper"] .pill:active .pill-inner{transform:none;border-color:color-mix(in srgb,var(--paper) 45%,transparent);background-color:color-mix(in srgb,var(--gold) 3%,var(--ink-2));transition-duration:120ms}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .pill:hover .pill-inner{border-color:color-mix(in srgb,var(--paper) 45%,transparent);background-color:color-mix(in srgb,var(--gold) 3%,var(--ink-2))}
  html[data-theme="paper"] .pill input:checked+.pill-inner,html[data-theme="paper"] .pill:hover input:checked+.pill-inner{border-color:var(--gold);background-color:var(--gold-wash)}}
/* H5 buttons: the roman and italic twins cross-fade instead of flipping */
html[data-theme="paper"] .btn span,html[data-theme="paper"] .book span,html[data-theme="paper"] .btn i,html[data-theme="paper"] .book i{transition:opacity 140ms var(--ease)}
html[data-theme="paper"] .btn i,html[data-theme="paper"] .book i{height:auto;overflow:visible;visibility:visible;opacity:0}
html[data-theme="paper"] .btn:focus-visible,html[data-theme="paper"] .btn:active,html[data-theme="paper"] .book:focus-visible,html[data-theme="paper"] .book:active{font-style:normal}
html[data-theme="paper"] .btn:focus-visible span,html[data-theme="paper"] .btn:active span,html[data-theme="paper"] .book:focus-visible span,html[data-theme="paper"] .book:active span{opacity:0}
html[data-theme="paper"] .btn:focus-visible i,html[data-theme="paper"] .btn:active i,html[data-theme="paper"] .book:focus-visible i,html[data-theme="paper"] .book:active i{opacity:1}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .btn:hover,html[data-theme="paper"] .book:hover{font-style:normal}
  html[data-theme="paper"] .btn:hover span,html[data-theme="paper"] .book:hover span{opacity:0}
  html[data-theme="paper"] .btn:hover i,html[data-theme="paper"] .book:hover i{opacity:1}}
/* H6 fields: the underline thickens 1px to 2px (a shadow, so nothing shifts) and the label lifts 2px on focus */
html[data-theme="paper"] .fq input,html[data-theme="paper"] .fq textarea,html[data-theme="paper"] .fq select{transition:border-color 200ms var(--ease),background-color 200ms var(--ease),box-shadow 200ms var(--ease)}
html[data-theme="paper"] .fq input:focus,html[data-theme="paper"] .fq textarea:focus,html[data-theme="paper"] .fq select:focus{box-shadow:0 1px 0 0 var(--gold)}
html[data-theme="paper"] .fq label{display:inline-block;transition:transform 200ms var(--ease)}
html[data-theme="paper"] .fq:focus-within label{transform:translateY(-2px)}
/* H7 header controls: the chapter switch fades .68 to 1 (the theme switch is hidden in Paper; the burger has its own hover) */
html[data-theme="paper"] .pc-dots a{transition:opacity 160ms var(--ease)}
html[data-theme="paper"] .pc-dots a:active{opacity:1;transition-duration:120ms}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .pc-dots a:hover{opacity:1}}
/* H8 review attribution warms from muted to ink while its card is hovered or pressed */
html[data-theme="paper"] .voices figcaption{color:color-mix(in srgb,var(--brown) 70%,transparent);transition:color 240ms var(--ease)}
html[data-theme="paper"] .voices figure:active figcaption{color:var(--brown)}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .voices figure:hover figcaption{color:var(--brown)}}
@media (prefers-reduced-motion:reduce){html[data-theme="paper"] *{transition:none!important;animation:none!important}}

/* Optional Paper dark mode is available on Work, About, Prices and Reviews.
   Home and Contact keep their authored appearance. */
html[data-theme="paper"].paper-dark main,
html[data-theme="paper"].paper-dark main section,
html[data-theme="paper"].paper-dark footer,
html[data-theme="paper"].paper-dark .pcard,
html[data-theme="paper"].paper-dark .ps,
html[data-theme="paper"].paper-dark .ps-contained,
html[data-theme="paper"].paper-dark .vf,
html[data-theme="paper"].paper-dark .vf-pro{
  --ink:#2B2530;--ink-2:#362F3C;--ink-3:#403947;--paper:#F2EBDE;
  --dim:rgba(242,235,222,.9);--soft:rgba(242,235,222,.86);--faint:rgba(242,235,222,.4);
  --gold:#F2EBDE;--gold-2:#D2B6A1;--gold-hi:#F2EBDE;--line:rgba(242,235,222,.24);--line-2:rgba(242,235,222,.4);--gline:rgba(242,235,222,.5);
  background-color:#2B2530;background-image:var(--grain);color:#F2EBDE
}
/* Reviews and Prices keep their authored brown closing sections in either mode. */
html[data-theme="paper"].on-reviews.paper-dark .cta,
html[data-theme="paper"].on-services.paper-dark .cta{
  --ink:#2A1D0F;--ink-2:#34261A;--ink-3:#3E2F21;--paper:#F2EBDE;
  --dim:#D2B6A1;--soft:#D2B6A1;--faint:rgba(210,182,161,.4);
  --gold:#F2EBDE;--gold-2:#2A1D0F;--gold-hi:#F2EBDE;
  --line:rgba(210,182,161,.22);--line-2:rgba(210,182,161,.4);--gline:rgba(242,235,222,.5);
  background-color:var(--ink);color:var(--paper)
}
/* Prices’ package band keeps the same brown, cream and tan palette as light mode. */
html[data-theme="paper"].on-services.paper-dark .pr-pkgs{
  --ink:#2A1D0F;--ink-2:#34261A;--ink-3:#3E2F21;--paper:#F2EBDE;
  --dim:#D2B6A1;--soft:#D2B6A1;--faint:rgba(210,182,161,.4);
  --gold:#F2EBDE;--gold-2:#D2B6A1;--gold-hi:#F2EBDE;
  --line:rgba(210,182,161,.22);--line-2:rgba(210,182,161,.4);--gline:rgba(242,235,222,.5);
  background-color:var(--ink);color:var(--paper)
}
html[data-theme="paper"].paper-dark #hdr,
html[data-theme="paper"].paper-dark body:not(.locked) #hdr:not(.over-hero),
html[data-theme="paper"].paper-dark #hdr::before{background-color:#2B2530;color:#F2EBDE}
html[data-theme="paper"].paper-dark #hdr::before{background-image:var(--grain)}
html[data-theme="paper"].paper-dark #hdr .brand img{content:url(img/logo.png)}
html[data-theme="paper"].paper-dark #hdr .paper-contact,
html[data-theme="paper"].paper-dark #hdr .burger,
html[data-theme="paper"].paper-dark #hdr .theme-sw{color:#F2EBDE}
html[data-theme="paper"].paper-dark #hdr .burger i{background:#F2EBDE}
html[data-theme="paper"].paper-dark #hdr .wk-tog a{color:rgba(242,235,222,.78)}
html[data-theme="paper"].paper-dark #hdr .wk-tog a[aria-current]{color:#F2EBDE;font-style:italic;background:transparent}
html[data-theme="paper"].paper-dark #hdr .wk-tog .ul{color:#F2EBDE;background:#F2EBDE}
html[data-theme="paper"].paper-dark .pro{background-color:#2B2530!important;background-image:var(--grain)!important;color:#F2EBDE}
/* Work prologues use the Ceremony green in light mode and dark brown in Paper dark mode. */
html[data-theme="paper"].on-work .pro{--ink:#4A4F34;--paper:#F2EBDE;--dim:rgba(242,235,222,.9);--soft:rgba(242,235,222,.86);background:#4A4F34!important;background-image:var(--grain)!important;color:#F2EBDE}
html[data-theme="paper"].on-work.paper-dark .pro{--ink:#2A1D0F;--paper:#F2EBDE;--dim:#D2B6A1;--soft:#D2B6A1;background:#2A1D0F!important;background-image:var(--grain)!important;color:#F2EBDE}
html[data-theme="paper"].paper-dark .theme-sw{border-color:rgba(242,235,222,.4)}
html[data-theme="paper"]:not(.on-home):not(.on-contact) #hdr .theme-sw{display:grid}
html[data-theme="paper"] #hdr:has(nav.links.open) .theme-sw{visibility:hidden;pointer-events:none}
html[data-theme="paper"]:not(.on-work):not(.on-home):not(.on-contact) #hdr .theme-sw{position:absolute;right:calc(var(--pad) + 52px);top:50%;transform:translateY(-50%);margin:0}
html[data-theme="paper"]:not(.on-work):not(.on-home):not(.on-contact) #hdr .burger{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%)}
html[data-theme="paper"].paper-dark .ps-ground,
html[data-theme="paper"].paper-dark .ps-bar,
html[data-theme="paper"].paper-dark .ps-groundwrap,
html[data-theme="paper"].paper-dark .ps-contained,
html[data-theme="paper"].paper-dark body.ps-viewing{background-color:#2B2530!important;background-image:var(--grain)}
html[data-theme="paper"].paper-dark .ps-bar{background:#2B2530!important;background-image:var(--grain)!important}
html[data-theme="paper"].on-work #hdr .theme-sw{order:2;margin-left:auto}
html[data-theme="paper"].on-work #hdr .burger{order:3;margin-left:0}
html[data-theme="paper"].paper-dark .paper-light-nav #hdr{color:#F2EBDE}
@media(max-width:700px){html[data-theme="paper"].on-work #hdr .theme-sw{width:34px;height:34px;margin-left:auto}html[data-theme="paper"].on-work #hdr .burger{margin-left:0}}

/* About keeps its quiet reading ground, with authored Paper colours for the
   founder, our on-the-day approach, and the closing invitation in both modes.
   These route-scoped tokens override the dark-mode single-ground fallback. */
html[data-theme="paper"].on-about .work-founder,
html[data-theme="paper"].on-about .band:not(.hire),
html[data-theme="paper"].on-about .cta{
  --ink:var(--about-ground);--paper:#F2EBDE;
  --dim:rgba(242,235,222,.9);--soft:rgba(242,235,222,.86);--faint:rgba(242,235,222,.4);
  --gold:#F2EBDE;--gold-2:#D2B6A1;--gold-hi:#F2EBDE;
  --line:rgba(242,235,222,.24);--line-2:rgba(242,235,222,.4);--gline:rgba(242,235,222,.5);
  background-color:var(--about-ground);color:var(--paper)
}
html[data-theme="paper"].on-about .work-founder{--about-ground:#4A4F34;--ink-2:#565C40;--ink-3:#63694D}
html[data-theme="paper"].on-about .band:not(.hire){--about-ground:#4A2530;--ink-2:#58313C;--ink-3:#653E49}
html[data-theme="paper"].on-about .cta{--about-ground:#2A1D0F;--ink-2:#34261A;--ink-3:#3E2F21;--dim:#D2B6A1;--soft:#D2B6A1}
html[data-theme="paper"].on-about .work-founder :focus-visible{outline-color:var(--paper)}

html[data-theme="paper"] #hdr:has(nav.links.open) #burger{color:var(--drawer-ink)}
html[data-theme="paper"] #hdr:has(nav.links.open) #burger i{background:var(--drawer-ink)}

/* Small spoken labels, matching the unmute prompt. */
@media(hover:hover){
  html[data-theme="paper"] #burger[data-tooltip]::after,
  html[data-theme="paper"] .paper-contact[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:1200;left:50%;top:calc(100% + 9px);width:max-content;height:auto;padding:0;border:0;background:none;color:currentColor;font:400 12px/16px var(--f-serif);letter-spacing:.02em;text-transform:none;visibility:hidden;opacity:0;transform:translate(-50%,-3px);transition:opacity .16s var(--ease),transform .16s var(--ease);pointer-events:none}
  html[data-theme="paper"] #burger[data-tooltip]:hover::after,
  html[data-theme="paper"] #burger[data-tooltip]:focus-visible::after,
  html[data-theme="paper"] .paper-contact[data-tooltip]:hover::after,
  html[data-theme="paper"] .paper-contact[data-tooltip]:focus-visible::after{visibility:visible;opacity:1;transform:translate(-50%,0)}
}

/* ---- Work layout pass (Paper only): sizing and white space, from design/work-layout-critique.md ---- */
/* 1. the chapter opener is a short intro, so the first couple's photographs are on screen on arrival */
html[data-theme="paper"] .ps-open{min-height:0;justify-content:flex-start;padding-top:clamp(28px,3.5svh,40px);padding-bottom:12px}
html[data-theme="paper"] .ps-odesc{font-size:28px;max-width:46ch}
@media(max-width:700px){
  html[data-theme="paper"] .ps-open{padding-top:40px;padding-bottom:12px}
  html[data-theme="paper"] .ps-odesc{font-size:18px;max-width:none}
  /* 2. a landscape photo sits in the middle of the band, so the blank above and below reads as matting */
  html[data-theme="paper"] .ps .seq-strip{align-items:center}
  /* 3. the next photograph peeks about 32px, enough to say "swipe" */
  html[data-theme="paper"] .ps .frame{width:min(calc(var(--fh) * var(--ar,.75)),calc(100vw - 2 * var(--pad) - 34px))}
}
/* 4. the menu shares the header's left edge */
html[data-theme="paper"] .pro-in{max-width:none;margin:0}
/* 5. and sits in the middle of its block */
@media(min-width:900px){
  html[data-theme="paper"] .pro{display:flex;flex-direction:column;justify-content:center}
  /* 6. a larger couple stage on desktop; the next couple still peeks */
  html[data-theme="paper"] .ps{--ps-sh:calc((var(--ps-h0) - var(--psb)) * .9)}
}
/* 7. the theme switch keeps its small mark and gets a 44px touch area */
html[data-theme="paper"] .theme-sw::after{content:'';position:absolute;inset:-5px}

/* ---- Legal pages (#/privacy, #/terms, #/refunds), footer Legal column, analytics notice, enquiry consent line ---- */
html[data-theme="paper"] footer .paper-legal{display:block!important}
html[data-theme="paper"] .ftop{grid-template-columns:1.3fr 1fr 1fr}
@media(max-width:820px){html[data-theme="paper"] .ftop{grid-template-columns:1fr}}
html[data-theme="paper"] footer .fc a[data-consent-open]{cursor:pointer}

html[data-theme="paper"] .legal-hero{min-height:0!important;padding-bottom:clamp(20px,3vw,40px)}
html[data-theme="paper"] .legal-hero .d1{font-size:var(--t-headline)}
html[data-theme="paper"] .legal{padding-top:0;padding-bottom:clamp(60px,8vw,120px)}
html[data-theme="paper"] .legal .prose{max-width:760px;margin-inline:auto;padding-inline:var(--pad,20px)}
html[data-theme="paper"] .legal .prose h2{font-family:var(--f-display);font-weight:500;text-transform:none;letter-spacing:.02em;font-size:clamp(22px,2.4vw,30px);line-height:1.2;margin:2.2em 0 .6em;scroll-margin-top:calc(var(--hh,88px) + 16px)}
html[data-theme="paper"] .legal .prose p,html[data-theme="paper"] .legal .prose li{font-size:17px;line-height:1.65;color:var(--paper)}
html[data-theme="paper"] .legal .prose ul,html[data-theme="paper"] .legal .prose ol{margin:.6em 0 1em;padding-left:1.25em}
html[data-theme="paper"] .legal .prose li{margin:.45em 0;scroll-margin-top:calc(var(--hh,88px) + 16px)}
html[data-theme="paper"] .legal .prose a,html[data-theme="paper"] .legal .linkish{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html[data-theme="paper"] .legal .linkish{background:none;border:0;padding:0;font:inherit;cursor:pointer}
html[data-theme="paper"] .legal code{font-family:inherit;font-style:italic}
html[data-theme="paper"] .legal .ph{background:#E9C46A;color:#2A1D0F;padding:0 .25em}
html[data-theme="paper"] .legal .tbl{overflow-x:auto;margin:1em 0}
html[data-theme="paper"] .legal table{border-collapse:collapse;width:100%;font-size:15px}
@media(max-width:640px){html[data-theme="paper"] .legal table{min-width:540px}}
html[data-theme="paper"] .legal th,html[data-theme="paper"] .legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line-2);line-height:1.45;color:var(--paper)}
html[data-theme="paper"] .legal th{font-family:var(--f-serif);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}

html[data-theme="paper"] .trust{max-width:760px;margin:0 auto clamp(12px,2vw,24px);padding:24px var(--pad,20px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
html[data-theme="paper"] .trust h2{margin:0 0 16px;line-height:1.5}
html[data-theme="paper"] .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
html[data-theme="paper"] .chips a{display:block;min-height:44px;padding:9px 14px;border:1px solid var(--line-2);font-size:15px;line-height:1.35;color:var(--paper);text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
html[data-theme="paper"] .chips a b{display:block;font-weight:400;font-style:italic}
html[data-theme="paper"] .chips a:active{background:var(--gold-wash);border-color:var(--gline)}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .chips a:hover{background:var(--gold-wash);border-color:var(--gline)}}
html[data-theme="paper"] .trust .note{font-size:15px;margin:16px 0 0;color:var(--soft)}
html[data-theme="paper"] .promises{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
html[data-theme="paper"] .promises li{position:relative;padding-left:1.6em;font-size:17px;line-height:1.5;color:var(--paper)}
html[data-theme="paper"] .promises li::before{content:"";position:absolute;left:.1em;top:.5em;width:.55em;height:.3em;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}

html[data-theme="paper"] .sn-consent{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--dim)}
html[data-theme="paper"] .sn-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}

html[data-theme="paper"] .consent{position:fixed;z-index:60;top:calc(var(--hh,84px) + 12px);left:max(12px,env(safe-area-inset-left));right:auto;bottom:auto;width:min(300px,calc(100vw - 24px));
  background:var(--paper-accent);background-image:var(--grain);background-size:400px;color:#F2EBDE;padding:12px 14px;border:1px solid rgba(242,235,222,.3);box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
html[data-theme="paper"] .consent.on{opacity:1;transform:none}
html[data-theme="paper"] .consent p{margin:0 0 10px;font-size:13px;line-height:1.45;color:#F2EBDE}
html[data-theme="paper"] .consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
html[data-theme="paper"] .consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-theme="paper"] .consent-btns button{min-height:44px;padding:10px 12px;font:inherit;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#F2EBDE;background:transparent;border:1px solid rgba(242,235,222,.6);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
html[data-theme="paper"] .consent-btns button:active{background:#F2EBDE;color:var(--paper-accent)}
@media(hover:hover) and (pointer:fine){html[data-theme="paper"] .consent-btns button:hover{background:#F2EBDE;color:var(--paper-accent)}}
html[data-theme="paper"] .consent :focus-visible{outline:2px solid #F2EBDE;outline-offset:3px}
@media(prefers-reduced-motion:reduce){html[data-theme="paper"] .consent{transition:none;transform:none}}

/* FAQ, bottom of Prices (Paper only) */
/* Full-width paper ground, with the original 820px reading column inside. */
html[data-theme="paper"] .faq{max-width:none;margin:0;padding:clamp(56px,9vw,120px) max(var(--pad),calc((100% - 820px)/2 + var(--pad)))}
html[data-theme="paper"] .faq h2{font-size:clamp(30px,4.4vw,56px);line-height:1.05;margin:0 0 clamp(24px,4vw,44px)}
html[data-theme="paper"] .faq details{border-top:1px solid var(--line)}
html[data-theme="paper"] .faq details:last-child{border-bottom:1px solid var(--line)}
html[data-theme="paper"] .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:14px 0;font-size:clamp(17px,1.5vw,20px);line-height:1.35;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html[data-theme="paper"] .faq summary::-webkit-details-marker{display:none}
html[data-theme="paper"] .faq summary::after{content:'';flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .2s cubic-bezier(.2,0,0,1)}
html[data-theme="paper"] .faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
html[data-theme="paper"] .faq summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
html[data-theme="paper"] .faq details p{margin:0 0 20px;max-width:62ch;color:var(--dim);font-size:clamp(16px,1.3vw,18px);line-height:1.6}
html[data-theme="paper"] .faq details p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){html[data-theme="paper"] .faq summary::after{transition:none}}

/* ---- footer layout B: desktop Legal column; mobile socials 2x2 and quiet Legal line; copyright and credit ---- */
html[data-theme="paper"] .fbot-booking{display:none!important}
@media(max-width:820px){
  html[data-theme="paper"] footer .ftop>.fc:nth-child(3){display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  html[data-theme="paper"] footer .ftop>.fc:nth-child(3) h2{grid-column:1/-1}
}
html[data-theme="paper"] footer .paper-legal{display:block!important}
html[data-theme="paper"] footer .paper-legal a{font-size:var(--t-small);color:var(--dim)}
@media(max-width:820px){
  html[data-theme="paper"] footer .paper-legal{display:flex!important;flex-wrap:wrap;gap:0 18px}
  html[data-theme="paper"] footer .paper-legal h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html[data-theme="paper"] footer .paper-legal a{padding-top:0;display:flex;align-items:center}
  html[data-theme="paper"] .ftop{gap:28px;padding-bottom:36px}
  html[data-theme="paper"] .fbot{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end}
  html[data-theme="paper"] .fbot .credit-link{margin-left:auto;align-self:flex-end}
  html[data-theme="paper"] .fbot-copyright{text-align:left}
  html[data-theme="paper"] .fbot .credit-logo{height:15px;max-width:none}
}
html[data-theme="paper"] .fbot-copyright{display:flex!important;flex-direction:row!important;gap:.35em;flex-wrap:nowrap;white-space:nowrap}
html[data-theme="paper"] .fbot{justify-content:space-between}