@font-face{font-family:'Canela';src:url(/assets/fonts/canela-regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IvyPresto';src:url(/assets/fonts/ivypresto-lightitalic.woff) format('woff');font-weight:300;font-style:italic;font-display:swap}
/* EB Garamond, SIL Open Font License 1.1 -- free to use on a commercial site,
   the licence text is kept next to the font at assets/fonts/ebgaramond-OFL.txt.
   One variable file covers 400-600, so the weight axis is free. */
@font-face{font-family:'EB Garamond';src:url(/assets/fonts/ebgaramond-regular.woff2) format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(/assets/fonts/ebgaramond-italic.woff2) format('woff2');
  font-weight:400 600;font-style:italic;font-display:swap}
/* The quote face from the Showit site: Ibarra Real Nova Italic (SIL OFL, assets/fonts/ibarra-real-nova-OFL.txt) */
@font-face{font-family:'Ibarra Real Nova';src:url(/assets/fonts/ibarra-real-nova-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Arca';src:url(/assets/fonts/arcamajora3-bold.woff) format('woff');font-weight:700;font-style:normal;font-display:swap}

:root{
  --tex:url("/assets/paper.png");
  --paper:#fdfbf8; --warm:#f8f4ee; --tint:#f1ece3; --tint-2:#e7e0d5;
  --ink:#231f20; --ink-2:#5e564c; --sage:#5d6b68; --ember:#a35d24; --ember-2:#8c4c1b;
  --line:rgba(35,31,32,.13); --line-soft:rgba(35,31,32,.07);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:'Canela','Iowan Old Style',Georgia,serif;
  --accent:'IvyPresto','Canela',Georgia,serif;
  --label:'Arca',-apple-system,'Helvetica Neue',sans-serif;
  /* The running text of the whole site. Named --sans from when it was one;
     it is Garamond now and the name is left alone rather than touched in
     ninety places. --label (Arca) is still the sans, for labels and nav. */
  --sans:'EB Garamond','Iowan Old Style',Georgia,serif;
  --quote:'Ibarra Real Nova','EB Garamond',Georgia,serif;
  --gut:clamp(20px,5vw,64px); --max:1440px;
}
*{box-sizing:border-box}
/* clip, not hidden: overflow-x:hidden on body makes it a scroll container
   and breaks position:sticky, which the pinned day strip depends on */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;color:var(--ink);font-family:var(--sans);
  font-size:19px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:.004em}
p{margin:0}
.em{font-family:var(--accent);font-style:italic;color:var(--ember)}
.lab{font-family:var(--label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
/* section label: small, grey, letterspaced */
.kick{font-family:var(--label);font-size:clamp(10px,1.15vw,12.5px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage);line-height:1.5}
/* one deliberate exception - the editing section leads with its label */
.kick.lead{font-size:clamp(18.2px,2.41vw,29.9px);letter-spacing:.085em;color:var(--ink);line-height:1.16}
.shell{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.band{background:var(--warm)}
.band-2{background:var(--tint)}

/* nav: full-width bar -> centred pill -> hamburger parked at the right */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;
  padding:0;pointer-events:none}
.nav.pill{padding-inline:clamp(12px,3vw,28px)}
.nav.mini{justify-content:flex-end;padding-inline:clamp(12px,3vw,28px)}
.navinner{pointer-events:auto;display:flex;align-items:center;gap:4px;overflow:hidden;
  width:100%;max-width:100vw;margin-top:0;
  padding:16px clamp(14px,4vw,52px);
  border-radius:0;background:rgba(255,255,255,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  border:1px solid transparent;
  box-shadow:0 0 0 rgba(35,31,32,0);
  transition:max-width .8s var(--ease),border-radius .8s var(--ease),margin-top .8s var(--ease),
    padding .8s var(--ease),box-shadow .6s var(--ease),background .5s var(--ease),
    border-color .6s var(--ease),backdrop-filter .5s var(--ease)}
/* over the hero the bar is transparent with white type; it only takes on
   a surface once it contracts into the pill */
.nav.bar .navlinks a{color:rgba(255,255,255,.88)}
.nav.bar .navlinks a:hover,.nav.bar .navlinks a:focus-visible{color:#fff;background:rgba(255,255,255,.16)}
.nav.bar .navlinks a.here{color:#fff;background:rgba(255,255,255,.18)}
.nav.bar .navlinks .go{background:rgba(255,255,255,.94);color:var(--ink)}
.nav.bar .navlinks .go:hover{background:#fff}
.nav.bar .mark{color:#fff;text-shadow:0 1px 16px rgba(30,20,12,.4)}
.nav.bar .mark .lk{opacity:0}
.nav.bar .mark .lw{opacity:1}
.mark .lk,.mark .lw{width:30px;height:30px;flex:none;transition:opacity .5s var(--ease)}
.nav.bar .mark .lw{filter:drop-shadow(0 1px 10px rgba(30,20,12,.5))}
.mark .lw{position:absolute;inset:0;opacity:0}
.mark .logos{position:relative;width:30px;height:30px;flex:none}
.nav.pill .navinner,.nav.mini .navinner{
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
/* 870, not 800. Eight links now that Blog is in the nav: logo 169 + links
   644 + padding 22 + gap, measured. .navinner is overflow:hidden, so a cap
   that is too small clips the right-hand end, and what disappears is
   Enquire. The same number bit once before, at seven links. */
.nav.pill .navinner{max-width:min(1040px,calc(100vw - 28px));margin-top:14px;border-radius:90px;
  padding:7px 8px 7px 14px;background:rgba(255,255,255,.88);border-color:var(--line);
  box-shadow:0 6px 26px rgba(35,31,32,.1)}
.nav.mini .navinner{max-width:52px;margin-top:14px;border-radius:90px;padding:0;
  justify-content:center;background:rgba(255,255,255,.92);border-color:var(--line);
  box-shadow:0 6px 26px rgba(35,31,32,.12)}
.navinner .mark{display:flex;align-items:center;gap:10px;padding-right:12px;white-space:nowrap;
  text-decoration:none;font-family:var(--display);font-size:16px;text-transform:lowercase;color:var(--ink);
  transition:opacity .35s var(--ease),max-width .6s var(--ease),color .5s var(--ease)}
.navlinks{display:flex;align-items:center;gap:4px;margin-left:auto;max-width:900px;overflow:hidden;
  transition:opacity .35s var(--ease),max-width .7s var(--ease)}
.nav.mini .navlinks,.nav.mini .mark{opacity:0;max-width:0;pointer-events:none;padding-right:0;margin:0;overflow:hidden}
/* the flex gap and the links' auto margin both shift the burger off centre */
.nav.mini .navinner{gap:0}
.navlinks a{position:relative;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:12px 13px;
  border-radius:90px;transition:color .4s var(--ease),background .4s var(--ease);white-space:nowrap}
/* The visible pill stays the size the design wants; the tap area is extended
   past it to meet the 44px minimum. Growing the pill itself to 44px would make
   the whole nav 58px tall and change how the header sits over the hero — a
   layout change to solve a touch problem. */
.navlinks a::after{content:'';position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%);pointer-events:auto}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--ink);background:rgba(35,31,32,.06)}
.navlinks a.here{color:var(--ink);background:rgba(35,31,32,.08)}
.navlinks .go{background:var(--ember);color:#fff}
.navlinks .go:hover,.navlinks .go.here{background:var(--ember-2);color:#fff}
@media(max-width:1060px){.navlinks a:not(.go){padding:9px 8px;letter-spacing:.08em}}
@media(max-width:620px){/* The wordmark only. .logos is a span too, so the bare selector took the
     logo with it and left nothing at all below 620px. */
  .navinner .mark span:not(.logos){display:none}}

.burger{all:unset;cursor:pointer;width:52px;height:52px;display:grid;place-items:center;flex:none;
  opacity:0;max-width:0;overflow:hidden;
  transition:opacity .35s var(--ease),max-width .5s var(--ease)}
.nav.mini .burger{opacity:1;max-width:52px}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;
  transition:background .2s var(--ease)}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:18px;height:1.5px;
  background:var(--ink);transition:transform .45s var(--ease)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.nav.open .burger i{background:transparent}
.nav.open .burger i::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger i::after{transform:translateY(-6px) rotate(-45deg)}

.navmenu{position:fixed;top:74px;right:clamp(12px,3vw,28px);z-index:59;min-width:214px;padding:9px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 42px rgba(35,31,32,.16);
  opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;transform-origin:top right;
  transition:opacity .35s var(--ease),transform .5s var(--ease)}
.navmenu.open{opacity:1;transform:none;pointer-events:auto}
.navmenu a{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;
  font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);transition:background .3s var(--ease),color .3s var(--ease)}
.navmenu a:hover,.navmenu a:focus-visible{background:rgba(35,31,32,.06);color:var(--ink)}
.navmenu a.here{color:var(--ink);background:rgba(35,31,32,.08)}
.navmenu a.go{background:var(--ember);color:#fff;margin-top:6px;text-align:center}
.navmenu a.go:hover{background:var(--ember-2)}

/* hero: full-bleed photograph, warm scrim, and a translucent inset panel
   that the headline deliberately overflows */
.hero-img{position:relative;height:100svh;min-height:520px;overflow:hidden;
  display:grid;place-items:center;isolation:isolate}
/* home only: the photograph is pinned and everything below rides up over it.
   .hero-hold reserves the runway, so the hero holds ~280px past the fold. */
.hero-hold{position:relative;z-index:0;height:calc(100svh + 280px)}
.hero-hold .hero-img{position:fixed;top:0;left:0;right:0;height:100svh}
/* every band needs its own ground now, or the pinned hero shows through */
.sec,.strip{background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;z-index:2}
.sec.band,.strip.band{background-color:var(--warm);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply}
.sec.band-2,.strip.band-2{background-color:var(--tint);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply}
footer{z-index:2}
/* ...but a section that is ALSO the .shell is capped at --max, so its own
   background stops short and the hero shows down both edges. Paint a
   full-bleed layer behind those instead of colouring the element itself. */
.sec.shell,.strip.shell{background:transparent}
.sec.shell::before,.strip.shell::before{content:'';position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);width:100vw;background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;z-index:-1}
.sec.shell.band::before{background-color:var(--warm)}
.sec.shell.band-2::before{background-color:var(--tint)}
/* the torn edge has to reach the same full width */
.sec.shell > .deckle,.strip.shell > .deckle{left:50%;right:auto;width:100vw}
.sec.shell > .deckle.top{transform:translate(-50%,-100%)}
.sec.shell > .deckle.bottom{transform:translateX(-50%)}
.hero-img.short{height:76svh;min-height:440px}
.hero-img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 34%;z-index:0;transform:scale(1.1);animation:kb 26s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero-img::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(38,27,18,.44) 0%,rgba(38,27,18,.26) 34%,
    rgba(38,27,18,.3) 66%,rgba(38,27,18,.5) 100%)}

/* Home page only: the hero is a black-and-white photograph, and the warm
   brown scrim every other hero wears turned it sepia. Neutral black here. */
.hero-hold .hero-img::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.22) 34%,
    rgba(0,0,0,.26) 66%,rgba(0,0,0,.48) 100%)}

/* torn-paper edge. It's a mask, not a filled shape, so the same tile works
   against any surface token - hero bottoms, band seams, the footer top. */
.deckle{position:absolute;left:0;right:0;height:9px;z-index:4;pointer-events:none;
  background-color:var(--paper);
  -webkit-mask-image:url("/assets/deckle.svg");mask-image:url("/assets/deckle.svg");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  /* must match the tile exactly - a stretched mask leaves a soft edge and
     whatever sits behind bleeds through it as a hairline */
  -webkit-mask-size:640px 9px;mask-size:640px 9px;
  -webkit-mask-position:left bottom;mask-position:left bottom}
.deckle.bottom{bottom:-2px}
/* the same shape, lifted so its solid base meets the section it belongs to
   and its torn edge bites up into whatever sits above */
.deckle.top{top:2px;transform:translateY(-100%)}
.deckle.warm{background-color:var(--warm)}
.deckle.tint{background-color:var(--tint)}
.sec,.strip,footer{position:relative}

.hero-copy{position:relative;z-index:2;text-align:center;padding:clamp(44px,7vh,84px) var(--gut);
  color:#fff;width:100%}

.hero-eyebrow{font-family:var(--label);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.82);opacity:0;animation:fadeUp .9s var(--ease) .25s forwards}
.hero-copy h1{font-size:clamp(18.2px,2.32vw,30.7px);line-height:1.36;letter-spacing:-.008em;
  margin:clamp(20px,3.4vh,34px) auto 0;max-width:22ch;font-weight:400;
  text-shadow:0 1px 30px rgba(30,20,12,.4)}
.hero-copy h1 i{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:.005em}

/* A wedding post's hero carries the couple's names and the venue, not the
   headline. The headline has to be written for search -- "Broadfield Court
   Wedding Photography | Emma & Alistair" -- and set over a photograph at that
   length it reads as a caption on someone else's advert. The searchable
   version is still the <title>, the og: tags and the schema; it is the first
   heading in the body too. This is only what the couple should see, so it is
   small and quiet: their names in the label face, the venue tucked directly
   under them rather than floating. */
.hero-copy .names{margin:0;font-family:var(--label);
  font-size:clamp(13px,1.5vw,20px);line-height:1.2;letter-spacing:.42em;
  text-indent:.42em;text-transform:uppercase;max-width:24ch;color:#fff;
  opacity:0;animation:fadeUp .9s var(--ease) .3s forwards}
/* The headline, in the body, where one <h1> per page belongs. */
/* Written in the maker: a centred paragraph, and a list. */
.post > .ctr{text-align:center}
.post > ul{grid-column:text;margin-top:clamp(18px,2.4vh,26px);padding-left:1.2em;
  font-size:19.6px;line-height:1.38;color:var(--ink-2)}
.post > ul li{margin-top:.35em}
.post > .ptitle{grid-column:text;margin-top:clamp(10px,1.4vh,16px);
  font-family:var(--display);font-size:clamp(21px,2.5vw,33px);line-height:1.18;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hero-copy .herotitle{font-family:var(--display);font-size:clamp(18.2px,2.32vw,30.7px);
  line-height:1.36;letter-spacing:-.008em;margin:clamp(20px,3.4vh,34px) auto 0;max-width:22ch;
  color:#fff;text-shadow:0 1px 30px rgba(30,20,12,.4)}
.phero .pherotitle{font-family:var(--display);font-size:clamp(22.1px,2.81vw,37.4px);
  line-height:1.2;letter-spacing:-.012em;margin:clamp(16px,2.4vh,26px) auto 0;max-width:20ch}
.hero-copy h1 .w{display:inline-block;opacity:0;transform:translateY(.36em);
  animation:wordIn 1.15s var(--ease) forwards;animation-delay:calc(.42s + var(--i)*.05s)}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero-sub{margin:clamp(18px,2.6vh,28px) auto 0;max-width:46ch;font-size:16.8px;
  color:rgba(255,255,255,.86);opacity:0;animation:fadeUp 1s var(--ease) 1.05s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-foot{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,44px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;animation:fadeUp 1s var(--ease) 1.5s forwards}
.hero-foot a{font-family:var(--label);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:9px 4px;transition:opacity .35s var(--ease)}
.hero-foot a:hover{opacity:.7}
.hero-foot .rule{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.85),transparent);
  animation:cueDrop 2.6s var(--ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(.15);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* The arrowhead, drawn only while the line is collapsing onto its bottom
   point, and gone again before it starts to grow.

   It hangs off .hero-foot rather than off .rule, because .rule is the thing
   being scaled — a stroke drawn inside it would be squashed to nothing along
   with it. .hero-foot's bottom edge and the rule's bottom point are the same
   place, so the arrow still meets the line exactly where it vanishes. */
.hero-foot::before,.hero-foot::after{
  content:'';position:absolute;bottom:0;left:50%;width:1px;height:10px;
  background:rgba(255,255,255,.85);pointer-events:none;
  transform-origin:bottom center;opacity:0;
  animation:cueArrow 2.6s var(--ease) infinite}
.hero-foot::before{--cue-a:-40deg}
.hero-foot::after{--cue-a:40deg}
@keyframes cueArrow{
  /* nothing until the line has passed full and begun to fall */
  0%,60%{opacity:0;transform:translateX(-50%) rotate(var(--cue-a)) scaleY(.3)}
  74%{opacity:1;transform:translateX(-50%) rotate(var(--cue-a)) scaleY(1)}
  86%{opacity:1;transform:translateX(-50%) rotate(var(--cue-a)) scaleY(1)}
  /* clear of the frame before the line begins again at 0% */
  96%,100%{opacity:0;transform:translateX(-50%) rotate(var(--cue-a)) scaleY(1)}}
@media(max-width:640px){
  .hero-copy h1{max-width:18ch}
}

/* reveal */
.r{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease) var(--d,0s),transform .95s var(--ease) var(--d,0s)}
.r.in{opacity:1;transform:none}
/* clip lives on an inner wrapper, never the observed element, or
   IntersectionObserver measures zero area and never fires */
.shot{margin:0}
.shot .clip{display:block;overflow:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease) var(--d,0s)}
.shot.in .clip{clip-path:inset(0 0 0 0)}
.shot .clip img{transform:scale(1.12);transition:transform 1.6s var(--ease) var(--d,0s)}
.shot.in .clip img{transform:scale(1)}
.cap{margin-top:9px;font-family:var(--label);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage)}

/* ---------- image furniture ----------
   Four small devices, all borrowed from how photographs are actually handled
   on paper - crop marks, frame numbers, a registration wash, film grain -
   rather than from generic web decoration. */
.feature{position:relative;margin:clamp(30px,5vh,58px) auto 0;max-width:min(100%,900px)}
.feature.narrow{max-width:min(100%,560px)}
.feature img{width:100%;display:block}
.feature .cap{text-align:left}
.fno{font-variant-numeric:tabular-nums;color:var(--ember);margin-right:10px;
  font-size:10.5px;letter-spacing:.1em}

/* printer's crop marks, on two corners only - four reads as a border */
.crop::before,.crop::after{content:'';position:absolute;width:18px;height:18px;
  border:1px solid rgba(94,86,76,.85);pointer-events:none;z-index:3}
.crop::before{top:-9px;left:-9px;border-right:0;border-bottom:0}
.crop::after{bottom:-9px;right:-9px;border-left:0;border-top:0}

/* an offset wash, like a registration block sitting under a print */
.wash::before{content:'';position:absolute;right:-15px;bottom:-15px;width:56%;height:54%;
  background:rgba(163,93,36,.11);z-index:-1}
.wash.sage::before{background:rgba(111,125,122,.14)}
.wash.left::before{right:auto;left:-15px}

/* a photograph set beside its text */
/* a full-bleed photograph dropped into the middle of a page, carrying one line */
.plate{position:relative;z-index:2;min-height:min(74svh,660px);display:grid;place-items:center;
  overflow:hidden;text-align:center;background:var(--ink)}
.plate > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(38,27,18,.4) 0%,rgba(38,27,18,.3) 45%,rgba(38,27,18,.52) 100%)}
/* The measure is set in px, not ch. `ch` resolves against THIS element's
   font — the body sans — while the heading inside it is up to 32.8px, so
   24ch gave a column about 190px wide and broke the heading to roughly one
   word a line. Affected the pricing plate too. */
.plate .plate-in{position:relative;z-index:2;color:#fff;max-width:min(620px,84vw);
  padding:clamp(46px,9vh,110px) var(--gut);text-shadow:0 1px 28px rgba(30,20,12,.55)}
.plate .kick{color:rgba(255,255,255,.82)}
.plate h2{font-size:clamp(20.3px,2.57vw,32.8px);line-height:1.26;letter-spacing:-.012em;
  margin-top:14px;color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);
  align-items:center;text-align:left;margin-top:clamp(30px,5vh,58px)}
.split > .txt > *{margin-inline:0;text-align:left;max-width:46ch}
.split .feature{margin-top:0}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:clamp(22px,4vh,36px)}
  .split.rev > .feature{order:-1}
}
@media(min-width:821px){.split.rev > .feature{order:-1}}
/* a warm lift rather than a grey drop-shadow - it should read as paper */
.lift{box-shadow:0 16px 38px rgba(94,86,76,.13)}
.wide{aspect-ratio:3/2;object-fit:cover;width:100%}
.tall{aspect-ratio:2/3;object-fit:cover;width:100%}

/* sections */
.sec{padding-block:clamp(64px,11vh,130px);text-align:center}
/* anything laid out in columns keeps its left edge - centring those reads as noise */
.grid3,.ratio,.tiers,.tier,.rows,.faq,.words,.stories,.ticks,.dscroll,.dcard,
.dhead,.day-head,.note-in,.track{text-align:left}
.sec-head{margin-inline:auto}
.lede{margin-inline:auto}
.btns{justify-content:center}
.meta{justify-content:center}
.bar-key{justify-content:center}
.tiers .btns,.faq .btns{justify-content:flex-start}
.sec-head{max-width:64ch}
/* stepped down ~25% now that the kicker above carries the weight */
.sec-head h2{font-size:clamp(15px,2.02vw,24.6px);line-height:1.34;margin-top:12px;color:var(--ink)}
.kick + .sec-head h2,.kick + h2{margin-top:10px}
/* the editing section runs centred, its list re-centred as a block */
.edit-block{text-align:center}
.edit-block + .ticks{margin-inline:auto;width:fit-content;text-align:left}
/* the paragraph pins centred and the fill IS the scroll; nothing below moves
   until the last word has landed */
.ghost-wrap{position:relative}
.ghost-pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding-block:clamp(20px,5vh,60px)}
.ghost-wrap + .ticks{margin-top:clamp(30px,6vh,64px)}
/* the closing line doesn't ghost-fill - it arrives once the explainer is done */
.rise{font-family:var(--display);font-size:clamp(23px,2.65vw,35.9px);line-height:1.24;
  letter-spacing:-.016em;margin-top:clamp(26px,4.4vh,52px);max-width:22ch;
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease) .15s,transform 1.1s var(--ease) .15s}
.rise.in{opacity:1;transform:none}
.lede{margin-top:20px;max-width:58ch;color:var(--ink-2);font-size:18.5px}
.lede + .lede{margin-top:15px}
.big{font-family:var(--display);font-size:clamp(17.8px,2.2vw,23.8px);line-height:1.44;
  color:var(--ink);max-width:34ch}

/* 95/4/1 */
.ratio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(22px,3.6vw,48px);margin-top:clamp(36px,5vh,64px)}
.ratio .it{padding-top:20px;border-top:1px solid var(--line)}
.ratio .pc{font-family:var(--display);font-size:clamp(32.2px,3.74vw,46.1px);line-height:.9;
  color:var(--ember);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ratio h3{font-size:20.2px;margin:13px 0 7px}
.ratio p{color:var(--ink-2);font-size:16.8px}
.ratio.mini{gap:clamp(18px,2.6vw,34px);margin-top:clamp(24px,3.4vh,38px)}
.ratio.mini .pc{font-size:clamp(30px,3.43vw,39px)}
.ratio.mini p{font-size:15.7px}
.ratio .rimg{margin-top:20px;position:relative}
.ratio .rimg::before,.ratio .rimg::after{content:'';position:absolute;width:14px;height:14px;
  border:1px solid rgba(94,86,76,.7);pointer-events:none;z-index:3}
.ratio .rimg::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.ratio .rimg::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.ratio .rimg img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ratio .rimg .cap{margin-top:8px}
.bar-viz{display:flex;height:6px;margin-top:clamp(28px,4vh,46px);overflow:hidden;
  border-radius:90px;background:var(--tint-2)}
.bar-viz span{display:block;height:100%;transform-origin:left;transform:scaleX(0);
  transition:transform 1.35s var(--ease) var(--d,0s)}
.bar-viz.in span{transform:scaleX(1)}
.bar-viz .b95{width:82%;background:var(--ember)}
.bar-viz .b4{width:11%;background:var(--ink-2)}
.bar-viz .b1{width:7%;background:var(--sage)}
/* These widths are 82/11/7, not 95/4/1, and that is on purpose. The figures
   are written in the key underneath, so the bar does not have to carry the
   number — it only has to show one part dominating the other two. A true 1%
   segment is a hairline no label can sit under, and the accurate version made
   the key unalignable. Trading the last few per cent buys columns wide enough
   to label, and the run still reads as overwhelmingly one thing. */
.bar-key{display:flex;margin-top:13px}
.bar-key .lab{min-width:0;padding-right:12px;overflow-wrap:anywhere}
.bar-key .lab:nth-child(1){flex:0 0 82%}
.bar-key .lab:nth-child(2){flex:0 0 11%}
.bar-key .lab:nth-child(3){flex:0 0 7%;padding-right:0}
/* the figure reads as a figure, not as part of the word after it */
.bar-key .lab b{font-weight:inherit;color:var(--ember)}
/* narrower containers cannot hold a label in 7%, so the two small columns
   widen further — the same trade, taken further */
@media(max-width:900px){
  .bar-viz .b95{width:70%} .bar-viz .b4{width:18%} .bar-viz .b1{width:12%}
  .bar-key .lab:nth-child(1){flex:0 0 70%}
  .bar-key .lab:nth-child(2){flex:0 0 18%}
  .bar-key .lab:nth-child(3){flex:0 0 12%}
}
@media(max-width:640px){
  .bar-key{flex-direction:column;gap:9px}
  .bar-key .lab{flex:none;padding-right:0}
}

/* horizontal day strip, advanced by vertical scroll */
.daywrap{position:relative;margin-top:clamp(30px,4.4vh,52px)}
.daypin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(10px,1.6vh,18px);padding-block:clamp(16px,3vh,40px)}
.dlegend{display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);flex-wrap:wrap;margin-top:10px}
.dbar{display:flex;height:5px;overflow:hidden;border-radius:90px;background:var(--tint-2)}
.dbar span{display:block;height:100%}
.dbar .b95{width:95%;background:var(--ember)}
.dbar .b4{width:4%;background:var(--ink-2)}
.dbar .b1{width:1%;background:var(--sage)}
.dviewport{overflow:hidden}
.dtrack{display:flex;gap:clamp(12px,1.6vw,20px);width:max-content;will-change:transform}
.dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.dctl{display:flex;gap:8px}
.dctl button{all:unset;cursor:pointer;width:38px;height:38px;border-radius:90px;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.dctl button:hover:not(:disabled),.dctl button:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
.dctl button:disabled{opacity:.3;cursor:default}
.dctl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.druler{position:relative;height:1px;background:var(--line);margin-top:16px}
.druler i{position:absolute;top:-1px;left:0;height:3px;background:var(--ember);
  width:16%;border-radius:90px;transform-origin:left center;
  /* transform, not left/width: this one updates continuously while the day
     strip is being scrolled, so it is the only layout-property transition here
     that would actually be felt. The nav's three are one-shot. */
  transition:transform .2s linear}
.dcard{flex:none;width:clamp(250px,30vw,348px)}
.dcard .dtime{font-family:var(--label);font-size:10.5px;letter-spacing:.14em;color:var(--ember);
  font-variant-numeric:tabular-nums}
.dcard h3{font-size:clamp(17.8px,1.94vw,21.1px);margin:5px 0 0;line-height:1.12}
.dcard .dtxt{margin-top:8px;color:var(--ink-2);font-size:15.7px;line-height:1.5}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.dgrid .a{grid-column:1 / -1}
.dgrid img{width:100%;object-fit:cover;background:var(--tint);display:block}
.dgrid .a img{height:min(25vh,232px)}
.dgrid .b img{height:min(14vh,132px)}
.dgrid .gifcell img{height:min(41vh,378px);object-position:50% 42%}
.dnote{margin-top:11px;font-family:var(--label);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage)}

/* below the pin threshold, fall back to an ordinary swipeable strip */
@media(max-width:900px){
  .daywrap{height:auto!important}
  .daypin{position:static;min-height:0;padding-block:0}
  .dviewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .dviewport::-webkit-scrollbar{display:none}
  .dtrack{transform:none!important}
  .dcard{scroll-snap-align:start}
  .dgrid .a img{height:190px}.dgrid .b img{height:110px}.dgrid .gifcell img{height:310px}
}

/* real weddings */
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(20px,3vw,36px);margin-top:clamp(36px,5vh,62px)}
.story{text-decoration:none;display:block;position:relative}
/* the story cards carry the same marks, so the device reads as a system */
.story.crop::before,.story.crop::after{width:14px;height:14px;border-color:rgba(94,86,76,.65)}
.story.crop::before{top:-7px;left:-7px}
.story.crop::after{bottom:auto;top:calc(100% * 0.8);right:-7px}
.story .clip{display:block;overflow:hidden}
.story img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.1s var(--ease)}
.story:hover img,.story:focus-visible img{transform:scale(1.045)}
.story h3{font-size:20.8px;margin-top:15px}
/* the blog section on the home page: the label a touch larger, the heading a
   touch smaller and standing further off the label */
.blogsec .kick{font-size:clamp(10.5px,1.21vw,13.1px)}
.blogsec .sec-head h2{font-size:clamp(14.3px,1.92vw,23.4px);margin-top:18px}
.story p{color:var(--ink-2);font-size:16.2px;margin-top:5px}
.story .go{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.story .go span{transition:transform .45s var(--ease)}
.story:hover .go span{transform:translateX(4px)}

/* marquee */
.strip{padding-block:clamp(58px,10vh,110px);overflow:hidden}
/* No filter at all now. The frame meter put the cost here — every section on
   the page peaks at 9ms, this strip peaked at 17ms, which on a 120Hz screen is
   a missed frame rather than a slow one. The pictures are simply black and
   white files, so there is no grayscale to compute on anything, ever. */
.track{display:flex;gap:12px;width:max-content}
.track figure{margin:0;width:clamp(170px,22vw,290px);flex:none}
/* 3:4, matching the carousel pages that now sit in this strip alongside the
   photographs. Was 2:3. */
.track img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* testimonials */
.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:clamp(20px,3.4vw,44px);margin-top:clamp(34px,5vh,60px)}
.quote{background:var(--paper);border:1px solid var(--line-soft);padding:clamp(22px,2.6vw,32px)}
.band .quote,.band-2 .quote{background:rgba(255,255,255,.72)}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(16px,1.75vw,18px);line-height:1.58}
.quote .who{margin-top:14px;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember)}

/* pricing */
.tiers{display:grid;gap:clamp(16px,2.2vw,26px);margin-top:clamp(36px,5vh,64px)}
.tier{display:grid;grid-template-columns:1fr 280px;gap:clamp(22px,3.6vw,54px);
  padding:clamp(24px,3.4vw,42px);border:1px solid var(--line);background:var(--paper)}
.tier.lead{border-color:rgba(163,93,36,.4);background:rgba(163,93,36,.045)}
/* The step up from the lead card. Ink rather than ember, so the two read as
   different offers rather than competing for the same emphasis — the lead
   card is what most people book, and this one should not shout over it. */
.tier.all-in{border-color:rgba(35,31,32,.28);background:rgba(35,31,32,.028)}
.tier.all-in .badge{background:var(--ink);color:var(--paper)}
@media(max-width:820px){.tier{grid-template-columns:1fr}}
.tier h3{font-size:clamp(19.1px,2.24vw,24.9px);margin:10px 0 0}
.tier .sub{margin-top:13px;color:var(--ink-2);font-size:17.4px;max-width:54ch}
.tier ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.tier li{position:relative;padding-left:19px;color:var(--ink-2);font-size:16.8px}
.tier li::before{content:'';position:absolute;left:0;top:.64em;width:9px;height:1px;background:var(--ember)}
.price{border-left:1px solid var(--line);padding-left:clamp(18px,2.6vw,32px)}
@media(max-width:820px){.price{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}}
.price .fig{font-family:var(--display);font-size:clamp(26.5px,2.96vw,34.3px);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:4px}
.price .note{margin-top:9px;color:var(--sage);font-size:15.1px}
.badge{display:inline-block;font-family:var(--label);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;border-radius:90px;background:var(--ember);color:#fff}
.rows{margin-top:clamp(30px,4vh,50px);border-top:1px solid var(--line)}
.row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.row .k{font-size:17.4px}
.row .v{font-family:var(--label);font-size:11.5px;letter-spacing:.1em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* faq */
.faq{margin-top:clamp(34px,5vh,60px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-size:clamp(16.9px,2.05vw,20.5px);transition:color .35s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ember)}
.faq summary::after,.faq summary::before{content:'';position:absolute;right:8px;top:50%;
  width:11px;height:1px;background:var(--ink-2);transition:transform .45s var(--ease)}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(0)}
.faq .a{padding:0 0 22px;color:var(--ink-2);font-size:17.4px;max-width:64ch}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:clamp(22px,3.4vw,46px);margin-top:clamp(34px,5vh,60px)}
.card{padding-top:19px;border-top:1px solid var(--line)}
.card .bar{width:28px;height:3px;background:var(--ember);margin-bottom:14px}
.card h3{font-size:20.7px;margin-bottom:7px}
.card p{color:var(--ink-2);font-size:16.8px}
.card .kk{font-family:var(--label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);display:block;margin-bottom:7px}
/* ---- ghost paragraph: fills word by word as you scroll past it ---- */
.ghost{font-family:var(--display);font-size:clamp(20px,2.32vw,29px);line-height:1.44;
  max-width:30ch;margin:clamp(22px,3.6vh,40px) auto 0;text-align:center;letter-spacing:.004em}
.ghost .gw{display:inline-block;opacity:.14;color:var(--ink)}
.ghost .brk{display:block;height:.7em}
/* the accent word is set in the italic display face, a letter per span */
.gacc{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:.01em}
.gl{display:inline-block;color:var(--c,var(--ink))}
/* once the line is full, a slow wave of colour walks through the accent word */
.done .gl{animation:hueWalk 11s linear infinite;
  animation-delay:calc(var(--i) * -1.15s)}
@keyframes hueWalk{
  0%{color:#a35d24} 17%{color:#c2703a} 34%{color:#b8455a}
  50%{color:#7d5aa6} 67%{color:#3f7d86} 84%{color:#6f7d7a} 100%{color:#a35d24}}

/* hand-drawn marker sweep, reusing the organic language of the torn edges */
.hl{position:relative;display:inline-block;z-index:0}
.hl::before{content:'';position:absolute;left:-.14em;right:-.14em;bottom:.04em;height:.5em;
  z-index:-1;background:rgba(163,93,36,.22);
  border-radius:.3em .45em .28em .38em / .55em .38em .5em .42em;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1s var(--ease) .4s}
.r.in .hl::before{transform:scaleX(1)}
/* inside the ghost the sweep waits for its own word to finish filling */
.ghost .hl::before{transition:transform .85s var(--ease)}
.ghost .gw.lit .hl::before{transform:scaleX(1)}

.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;max-width:60ch}
.ticks li{position:relative;padding-left:25px;color:var(--ink-2);font-size:17.4px}
.ticks li::before{content:'';position:absolute;left:0;top:.58em;width:12px;height:1px;background:var(--ember)}

/* brochure: swap-per-enquiry tokens and delete-me markers */
.ph{background:rgba(163,93,36,.13);border-bottom:1px dashed rgba(163,93,36,.55);
  padding:.05em .3em;border-radius:2px;font-style:normal;white-space:nowrap}
.hero-copy .ph{background:rgba(255,255,255,.18);border-bottom-color:rgba(255,255,255,.6)}
.cut{font-family:var(--label);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin-top:clamp(20px,3vh,30px);
  padding-left:24px;position:relative}
.cut::before{content:'';position:absolute;left:0;top:.42em;width:15px;height:1px;
  background:var(--ember)}
.slot{margin-top:clamp(20px,3vh,32px);border:1px dashed rgba(35,31,32,.22);
  background:rgba(35,31,32,.025);border-radius:3px;aspect-ratio:16/9;max-width:760px;
  display:grid;place-items:center;text-align:center;padding:20px}

.note-in{border:1px dashed rgba(163,93,36,.45);padding:clamp(18px,2.6vw,30px);
  background:rgba(163,93,36,.04);margin-top:clamp(34px,5vh,58px)}
.note-in .lab{color:var(--ember)}
.note-in p{margin-top:9px;color:var(--ink-2);font-size:16.8px;max-width:64ch}

/* cta */
.cta-sec h2{font-size:clamp(22.1px,3.12vw,39px);line-height:1.14;max-width:18ch;letter-spacing:-.022em;margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,4vh,42px);
  padding:15px 28px;border-radius:90px;background:var(--ember);color:#fff;text-decoration:none;
  font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .5s var(--ease),background .35s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);background:var(--ember-2)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(35,31,32,.05);border-color:var(--ink-2)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.meta{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:30px}
.meta span{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}

footer{border-top:1px solid var(--line);background-color:var(--warm);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply}
footer .in{max-width:var(--max);margin:0 auto;padding:40px var(--gut) 50px;display:flex;
  justify-content:space-between;gap:22px 30px;flex-wrap:wrap;align-items:center}
footer .brand{display:flex;align-items:center;gap:15px}
footer .brand img{width:58px;height:58px;flex:none}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a{font-family:var(--label);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);text-decoration:none;transition:color .35s var(--ease)}
footer nav a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}

/* ---- PREVIEW-ONLY page switcher ----
   Scaffolding so every page (including the unlisted brochure) is reachable
   without relying on the URL hash, which an embedding iframe swallows.
   Delete this block and its markup before the site goes anywhere real. */
.pv{position:fixed;left:14px;bottom:14px;z-index:70;font-family:var(--label)}
.pv-t{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:90px;background:rgba(35,31,32,.82);color:#fff;
  font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(35,31,32,.22);opacity:.5;
  transition:opacity .35s var(--ease)}
.pv:hover .pv-t,.pv.open .pv-t,.pv-t:focus-visible{opacity:1}
.pv-t i{width:5px;height:5px;border-radius:90px;background:var(--ember-2);display:block}
.pv-m{position:absolute;left:0;bottom:calc(100% + 8px);min-width:190px;padding:7px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 12px 34px rgba(35,31,32,.2);
  opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;transform-origin:bottom left;
  transition:opacity .3s var(--ease),transform .4s var(--ease)}
.pv.open .pv-m{opacity:1;transform:none;pointer-events:auto}
.pv-m a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink-2);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease)}
.pv-m a:hover,.pv-m a.here{background:rgba(35,31,32,.06);color:var(--ink)}
.pv-m a em{font-style:normal;font-size:8px;letter-spacing:.1em;color:var(--ember);opacity:.85}
@media print{.pv{display:none}}

.view{display:none}
.view.on{display:block}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .r{opacity:1!important;transform:none!important}
  .shot .clip{clip-path:none!important}.shot .clip img{transform:none!important}
  .bar-viz span{transform:scaleX(1)!important}
  .hero-copy h1 .w,.hero-eyebrow,.hero-sub,.hero-foot{opacity:1!important;transform:none!important}
  .hero-foot::before,.hero-foot::after{animation:none;opacity:1;
    transform:translateX(-50%) rotate(var(--cue-a))}
  .track{width:auto;overflow-x:auto;transform:none!important}
  .daywrap{height:auto!important}
  .daypin{position:static;min-height:0}
  .dviewport{overflow-x:auto}
  .dtrack{transform:none!important}
}

/* ---------- wide displays ----------
   A 1440px column on a 27" leaves the horizontal strip looking clipped rather
   than continuing, and the page looking marooned. Three answers, all of which
   do nothing on a laptop. */

/* the day strip breaks the column and runs to the screen edges, so the cards
   visibly carry on instead of stopping at an invisible boundary */
.dviewport{margin-inline:calc(50% - 50vw);padding-inline:var(--gut)}
@media(max-width:900px){.dviewport{margin-inline:calc(50% - 50vw)}}

/* the column grows a little once there is genuinely room for it */
@media(min-width:1800px){:root{--max:1620px}}
@media(min-width:2200px){:root{--max:1780px}}

/* soft tinted rails outside the column, so the centring reads as deliberate
   rather than as content that ran out. Off entirely below 1700px. */
body::before{content:'';display:none}
@media(min-width:1700px){
  body::before{display:block;position:fixed;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(94,86,76,.075) 0%,
      rgba(94,86,76,.032) 4.5%,
      rgba(94,86,76,0)    11%,
      rgba(94,86,76,0)    89%,
      rgba(94,86,76,.032) 95.5%,
      rgba(94,86,76,.075) 100%)}
}

/* ---------- edge words ----------
   Locked to the VIEWPORT edge, not the content column. calc(50% - 50vw)
   resolves to the screen edge whether the containing block is a full-width
   section or the centred column, so these behave the same on both. They bleed
   outward so the viewport crops them, and the crop loosens as the screen grows.
   Offset vertically against each other rather than both centred. */
.edge{position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--display);text-transform:uppercase;white-space:nowrap;
  writing-mode:vertical-rl;
  font-size:clamp(45.8px,4.61vw,89.3px);line-height:.78;letter-spacing:.015em;
  color:rgba(94,86,76,.085);display:none}
.edge.l{left:calc(50% - 50vw);bottom:clamp(16px,3vh,54px);top:auto;
  translate:-48% 0;rotate:180deg}
.edge.r{right:calc(50% - 50vw);top:clamp(16px,3vh,54px);bottom:auto;
  translate:48% 0}
/* translate/rotate as separate properties always apply in the same order, so
   both sides bleed by the same amount - composing them in one transform did not */
@media(min-width:1700px){.edge.l{translate:-30% 0}.edge.r{translate:30% 0}}
@media(min-width:2100px){.edge.l{translate:-20% 0}.edge.r{translate:20% 0}}
/* below this the gutters cannot hold them without crowding the text */
@media(min-width:1300px){.edge{display:block}}

/* ================= MARGIN BLOCKS =================
   The one device that survived selection: bookends rather than ornament.
   Width scales with the viewport so they hold their weight on a big screen
   instead of thinning out, and heights are a share of the section so they
   stretch with it. aria-hidden - purely decorative, gone below 1300px. */
.blk{position:absolute;z-index:0;display:none;pointer-events:none}
.blk.l{left:calc(50% - 50vw);top:0;height:62%;
  width:clamp(34px,4.2vw,110px);background:var(--tint-2);opacity:.5}
.blk.r{right:calc(50% - 50vw);bottom:0;height:38%;
  width:clamp(24px,3vw,78px);background:var(--ember);opacity:.12}
@media(min-width:1800px){
  .blk.l{width:clamp(70px,6vw,150px)}
  .blk.r{width:clamp(50px,4.2vw,104px)}
}
@media(min-width:2300px){
  .blk.l{width:min(9vw,196px)}
  .blk.r{width:min(6vw,136px)}
}
@media(min-width:1300px){.blk{display:block}}

/* ================= ABOUT: ambient video =================
   Landscape ambience, not a talking head - so it loops silently with no
   controls. Poster carries the frame until it can play. */
.vid{position:relative;margin:clamp(30px,5vh,58px) auto 0;max-width:min(100%,980px)}
.vid video{width:100%;display:block;background:var(--tint)}
.vid .cap{text-align:left}

/* ================= ABOUT: the table =================
   A full-width letterbox onto one long table of photographs, seen from above.
   The blur is inverted against the earlier version: the middle is soft so the
   caption can sit on it and be read, while the edges stay sharp so you can
   watch the photographs travel past. Cream ground, not dark - this is a window
   cut into the page rather than a room. */
.tblsec{position:relative;z-index:2;background-color:var(--warm);
  background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply}
.tbl-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(6px,1.4vh,18px)}
/* full window width, whatever the column is doing */
/* the same small grey label the rest of the page uses to open a section */
.tbl-kick{margin-bottom:clamp(12px,2vh,22px)}
.tbl-stage{position:relative;overflow:hidden;contain:paint;width:100vw;
  height:min(64svh,545px);background:#100d0a}
.tbl{position:absolute;top:0;left:0;width:5600px;height:2400px;
  transform-origin:0 0;will-change:transform}
.tbl img{position:absolute;display:block;object-fit:cover;
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
/* inverted: soft in the middle, sharp at the edges */
/* Motion blur: stage-sized rather than canvas-sized. JS sets backdrop-filter
   to none while parked so there is no compositing pass at rest. */
.tbl-motion{position:absolute;inset:0;z-index:2;pointer-events:none;backdrop-filter:none}
.tbl-fog{position:absolute;inset:0;z-index:3;pointer-events:none;
  backdrop-filter:blur(11px) saturate(.94);-webkit-backdrop-filter:blur(11px) saturate(.94);
  -webkit-mask-image:radial-gradient(ellipse 38% 78% at 50% 50%,#000 30%,transparent 76%);
  mask-image:radial-gradient(ellipse 38% 78% at 50% 50%,#000 30%,transparent 76%)}
.tbl-vig{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,6,4,.34),transparent 14%,transparent 86%,rgba(8,6,4,.34))}
.tbl-grain{position:absolute;inset:0;z-index:5;pointer-events:none;
  background-image:url("/assets/filmgrain.png");background-size:200px 200px;
  opacity:.1;mix-blend-mode:overlay}
.tbl-words{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  padding:0 var(--gut);pointer-events:none}
/* smaller, and on its own panel so it is always legible over moving pictures */
.tbl-words p{position:absolute;max-width:40ch;text-align:center;margin:0;
  font-family:var(--display);font-size:clamp(13.5px,1.35vw,19.5px);line-height:1.5;
  letter-spacing:-.004em;color:#f8f4ed;
  background:rgba(16,12,9,.62);
  padding:clamp(13px,1.5vw,22px) clamp(17px,2.2vw,32px)}
/* one timed fade per beat, out slightly quicker than in */
.tbl-words p{opacity:0;transition:opacity 1s var(--ease)}
.tbl-words p.on{opacity:1}
.tbl-words p:not(.on){transition-duration:.62s}
.tbl-words em{font-family:var(--accent);font-style:italic;font-weight:300;color:#f3c288;
  padding:0 .14em;margin:0 -.14em;
  text-shadow:0 0 15px rgba(243,198,148,.46),0 0 38px rgba(243,198,148,.2);
  background:radial-gradient(58% 118% at 50% 54%,rgba(246,210,163,.19),rgba(246,210,163,0) 72%)}
@media(max-width:820px){
  .tbl-stage{height:min(55svh,390px)}
  .tbl-words p{font-size:clamp(13px,3.4vw,16px);max-width:30ch}
}

@media(prefers-reduced-motion:reduce){
  .tbl-pin{position:static;height:auto;padding-block:clamp(30px,6vh,60px)}
  .tbl-stage{width:auto;height:auto;background:none}
  .tbl{position:static;width:auto;height:auto;transform:none!important;filter:none!important;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;
    padding:0 var(--gut)}
  .tbl img{position:static;width:100%;height:auto;rotate:none!important;box-shadow:none}
  .tbl-motion,.tbl-fog,.tbl-vig,.tbl-grain{display:none}
  .tbl-words{position:static;display:block;padding:clamp(22px,4vh,40px) var(--gut) 0}
  .tbl-words p{position:static;color:var(--ink);background:none;padding:0;
    margin:0 auto 18px;max-width:52ch}
  .tbl-words p{opacity:1!important;transition:none}
  .tbl-words em{color:var(--ember)}
}

/* ================= ABOUT: values =================  */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:clamp(14px,2vw,28px);margin-top:clamp(34px,5vh,60px);text-align:left}
.values div{display:flex;align-items:baseline;gap:10px;padding-top:13px;
  border-top:1px solid var(--line)}
.values .n{font-family:var(--label);font-size:9px;letter-spacing:.16em;color:var(--ember);
  font-variant-numeric:tabular-nums}
.values .v{font-family:var(--display);font-size:clamp(16.4px,1.77vw,20.5px)}

/* ================= a page that opens without a hero =================
   Needs its own top padding to clear the fixed nav, and the nav has to start
   as a pill rather than transparent-over-photograph. */
.page-top{padding-top:clamp(112px,16vh,184px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(9px,1.5vw,20px);
  margin-top:clamp(30px,5vh,58px)}
.trio figure{margin:0;position:relative}
.trio img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05)}
@media(max-width:700px){.trio{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* ==================== education / shop ==================== */

/* the bar over a pale hero */
.nav.bar.ink .navlinks a{color:rgba(35,31,32,.7)}
.nav.bar.ink .navlinks a:hover,.nav.bar.ink .navlinks a:focus-visible{
  color:var(--ink);background:rgba(35,31,32,.07)}
.nav.bar.ink .navlinks a.here{color:var(--ink);background:rgba(35,31,32,.08)}
.nav.bar.ink .navlinks .go{background:var(--ink);color:var(--paper)}
.nav.bar.ink .navlinks .go:hover{background:#000}
.nav.bar.ink .mark{color:var(--ink);text-shadow:none}
.nav.bar.ink .mark .lk{opacity:1}
.nav.bar.ink .mark .lw{opacity:0}

/* A hero over a pale photograph: the dark scrim would do nothing here, so the
   gradient and the type both invert. The knolled camera fills the middle of
   the frame, so the title sits in the empty space at the top rather than on
   top of the subject. */
.hero-img.pale::after{background:linear-gradient(180deg,rgba(253,251,248,.8) 0%,
  rgba(253,251,248,.26) 32%,rgba(253,251,248,.2) 66%,rgba(253,251,248,.58) 100%)}
.hero-img.pale > img{object-position:50% 50%}
.hero-img.pale .hero-copy{color:var(--ink);align-self:start;
  padding-top:clamp(96px,15vh,168px)}
.hero-img.pale .hero-eyebrow{color:var(--sage)}
.hero-img.pale .hero-copy h1{text-shadow:none}

/* Product pages lead with type, not a photograph - there is no product
   photography for most of these yet, and the same stock hero on all six would
   read as filler. */
.phero{position:relative;z-index:2;text-align:center;background-color:var(--tint);
  background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;
  padding:clamp(112px,17vh,188px) var(--gut) clamp(52px,8vh,92px)}
.phero .hero-eyebrow{color:var(--sage);animation:none;opacity:1}
.phero .hero-eyebrow a{text-decoration:none;transition:color .3s var(--ease)}
.phero .hero-eyebrow a:hover{color:var(--ember)}
.phero h1{font-size:clamp(22.1px,2.81vw,37.4px);line-height:1.2;letter-spacing:-.012em;
  margin:clamp(16px,2.4vh,26px) auto 0;max-width:20ch}
.hero-sub{margin:clamp(13px,1.8vh,20px) auto 0;max-width:44ch;color:var(--ink-2);
  font-family:var(--accent);font-style:italic;font-size:clamp(15.4px,1.77vw,19.5px)}

.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,38px);
  margin-top:clamp(28px,4.4vh,50px)}
@media(max-width:1000px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prods{grid-template-columns:1fr}}
.prod{display:block;text-decoration:none;color:inherit}
.prod .pcov{transition:transform .75s var(--ease),box-shadow .75s var(--ease)}
.prod:hover .pcov{transform:translateY(-4px);box-shadow:0 16px 40px rgba(35,31,32,.13)}
.pr-b{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:clamp(14px,1.8vh,19px)}
.pr-n{font-family:var(--display);font-size:clamp(15.4px,1.4vw,17.7px);line-height:1.3}
.pr-t{flex:none;font-family:var(--label);font-size:11px;letter-spacing:.1em;color:var(--ember)}
.pr-t.soon{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--sage)}
.pr-o{display:block;margin-top:7px;color:var(--ink-2);font-size:16.8px;line-height:1.56}

/* The cover: a real render where one exists, otherwise the product's own name
   set as the object. Six tints so the grid doesn't read as one repeated card. */
.pcov{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line-soft);background:#eae7e2}
.pcov .clip{display:block;position:absolute;inset:0}
.pcov .clip img{width:100%;height:100%;object-fit:cover}
.pc-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:clamp(20px,2.6vw,34px);gap:11px}
.pc-r{width:26px;height:1px;background:var(--ember);opacity:.55}
.pc-n{font-family:var(--display);font-size:clamp(16.4px,1.72vw,21.4px);line-height:1.26;
  letter-spacing:-.01em;max-width:16ch}
.pc-s{font-family:var(--accent);font-style:italic;color:var(--ink-2);
  font-size:clamp(13px,1.25vw,15px);max-width:22ch}
.pcov.ta{background:#e6e1d7}.pcov.tc{background:#e4e3df}
.pcov.td{background:#eae4da}.pcov.te{background:#e2e2dd}.pcov.tf{background:#ece5db}

.pshow{align-self:start}
.pshow .pcov{aspect-ratio:4/3}
.incl{list-style:none;margin:clamp(16px,2.2vh,24px) 0 0;padding:0}
.incl li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line-soft);
  font-size:16px;line-height:1.5;color:var(--ink-2)}
.incl li::before{content:'';position:absolute;left:2px;top:1.02em;width:7px;height:7px;
  border-left:1.4px solid var(--ember);border-bottom:1.4px solid var(--ember);
  transform:rotate(-45deg)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(24px,3.6vh,40px)}
.steps > div{padding-top:15px;border-top:1px solid var(--line)}
.steps .n{display:block;font-family:var(--label);font-size:10px;letter-spacing:.2em;
  color:var(--ember)}
.steps .v{display:block;margin-top:9px;font-family:var(--display);
  font-size:clamp(15.4px,1.49vw,17.7px);line-height:1.36}

.tones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(24px,3.6vh,40px)}
@media(max-width:760px){.tones{grid-template-columns:1fr}}
.tone{background:var(--paper);border:1px solid var(--line-soft);
  padding:clamp(22px,2.6vw,32px)}
.tone .lab{margin:0 0 14px;color:var(--ember)}
.tone blockquote{margin:0;font-family:var(--display);font-size:clamp(15px,1.6vw,17px);
  line-height:1.6;color:var(--ink-2)}

.buy{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,38px);
  flex-wrap:wrap;margin-top:clamp(10px,1.6vh,18px)}
.buy-p{font-family:var(--display);font-size:clamp(26.5px,3.12vw,39px);line-height:1}
.buy-p span{display:block;margin-top:9px;font-family:var(--label);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.buy-p.soon{font-size:clamp(20px,2.32vw,28.2px);color:var(--ink-2)}
.fine{max-width:64ch;margin:clamp(22px,3vh,34px) auto 0;font-size:14.6px;line-height:1.62;
  color:var(--sage)}
.ul{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(163,93,36,.45);transition:text-decoration-color .3s var(--ease)}
.ul:hover{text-decoration-color:var(--ember)}

/* ==================== blog post ==================== */

/* The breakout grid. Body sits in an 850px column; any child can opt out to
   `alignwide` or `alignfull`. Those two class names are exactly what the
   WordPress block editor puts on a block when you press its wide/full
   alignment buttons - so the same CSS serves a post written in the editor, and
   breakouts stop being a developer job. */
.post{
  --text:850px; --wide:1240px;
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start]  minmax(0,calc((var(--wide) - var(--text)) / 2))
    [text-start]  min(var(--text),100% - var(--gut) * 2) [text-end]
                  minmax(0,calc((var(--wide) - var(--text)) / 2)) [wide-end]
    minmax(var(--gut),1fr) [full-end];
  padding-block:clamp(46px,8vh,96px) clamp(30px,5vh,60px);
}
.post > *{grid-column:text;margin-block:0}
.post > .alignwide{grid-column:wide}
.post > .alignfull{grid-column:full}

/* Tight leading, close to the old blog's.

   Measured on the live ProPhoto post rather than guessed at: Garamond 15px on
   18px, a ratio of 1.2, with 29px between paragraphs. The gap between
   paragraphs here was already about right -- it was the leading that was airy,
   1.78 against his 1.2, which is what made the same words look twice as far
   apart. 1.38 rather than 1.2 flat because this sets 19.6px against his 15px,
   and at that size 1.2 puts a descender into the ascender below it. */
.post > p{margin-top:clamp(18px,2.4vh,26px);font-size:17.7px;line-height:1.42;color:var(--ink-2)}
.post > ul{font-size:17.7px}
/* the first paragraph stands as far below the carousel as the carousel stands below the top of the white */
.post > .carousel + p{margin-top:calc(clamp(28px,4.6vh,60px) + clamp(26px,4vh,46px))}
.post > h2{margin-top:clamp(30px,4.6vh,54px);font-size:clamp(16.4px,1.78vw,22px);line-height:1.3}
.post > h3{margin-top:clamp(34px,5vh,58px);font-size:clamp(16.4px,1.77vw,21.4px)}
/* the supplier heading: the label face, tracked wide */
.post > h2.sups-h{font-family:var(--label);font-size:18px;letter-spacing:.4em;text-transform:uppercase;line-height:1.2}
.pmeta{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);text-align:center}
.post > .pmeta{margin-top:0}
/* The date in the running face, italic, so the line is a label and a date
   rather than two labels. */
.pmeta .d{font-family:var(--sans);font-style:italic;text-transform:none;letter-spacing:.01em}

.pquote{margin:clamp(30px,4.4vh,52px) 0 0;padding:clamp(22px,3vw,38px) clamp(22px,4vw,56px);
  background:var(--warm);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  text-align:center}
.pquote p{margin:0;font-family:var(--display);font-size:clamp(16.4px,1.86vw,21.4px);line-height:1.55}
.pquote cite{display:block;margin-top:16px;font-family:var(--label);font-style:normal;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}

.sups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:5px clamp(14px,2vw,26px);margin:clamp(14px,2vh,20px) 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
/* one rule under the heading, then a labelled column: the names line up */
.sups div{display:grid;grid-template-columns:82px 1fr;align-items:baseline;gap:10px;padding:0;border:0}
.sups dt{font-family:var(--label);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage)}
.sups dd{margin:0;min-width:0;font-family:var(--display);font-size:14.5px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The gap between one photograph and the next. It is a variable because the
   diptychs have to use the same figure for the gutter inside them -- a pair
   stitched with a different gap than the stack around it reads as a mistake
   even when nobody can say what is wrong. */
:root{--figgap:clamp(20px,3vh,34px)}
/* Matted, like a print on a mount. The white sits inside the 850 rather than
   round the outside of it, so the column measure does not move and the paper
   texture shows in the gaps between one photograph and the next -- which is
   what makes them read as separate prints instead of one long strip.

   The mat is on the figure, not a border on the image, because the section
   heading has to be able to sit across it. */
.post .pfig{margin:var(--figgap) 0 0;background:#fff;padding:var(--mat);
  box-shadow:0 1px 2px rgba(35,31,32,.07),0 6px 18px rgba(35,31,32,.05)}
:root{--mat:10px}
.post .pfig img{width:100%;height:auto;display:block}
/* the first print after the credits stands off them, not on them */
.post > .sups + .pfig{margin-top:clamp(40px,6vh,72px)}

/* Words over the photograph they belong to.

   Che's objection to words in the middle of a gallery is that they interrupt
   the run of pictures, and he is right that they do. This keeps the heading --
   a real <h2>, read by a search engine exactly as any other would be -- and
   stops it taking a line of its own. It fades on hover so the photograph
   underneath is never permanently covered, and the wash is what makes white
   type survive whatever is behind it.

   The heading and the words under it are placed separately, because they want
   different things. A heading set hard into the corner reads as printed on the
   mount, which is the effect; a paragraph set hard into the corner is just
   difficult to read. So the heading goes flush and the paragraph is tabbed
   down and in from it -- or given a corner of its own, if the photograph wants
   the two apart.

   Nine positions each, decomposed into an x half and a y half, so eighteen
   placements cost twelve rules rather than eighty-one. */
.post .pfig.marked{position:relative;
  --ax:flex-start;--jy:flex-start;--ta:left;--gx:0%;--gy:0%;--dir:column;
  --tax:flex-start;--tjy:flex-start;--tta:left;--tgx:0%;--tgy:0%;
  --tab:clamp(18px,2.4vw,34px);--inset:clamp(20px,3vw,42px)}

/* where the heading sits */
.post .pfig[data-pos^="t"]{--jy:flex-start;--gy:0%;--dir:column}
.post .pfig[data-pos^="m"]{--jy:center;--gy:50%;--dir:column}
/* column-reverse keeps the heading against the bottom edge with the paragraph
   above it. flex-end in a reversed column means the top, so this wants
   flex-start. */
.post .pfig[data-pos^="b"]{--jy:flex-start;--gy:100%;--dir:column-reverse}
.post .pfig[data-pos$="l"]{--ax:flex-start;--ta:left;--gx:0%}
.post .pfig[data-pos$="c"]{--ax:center;--ta:center;--gx:50%}
.post .pfig[data-pos$="r"]{--ax:flex-end;--ta:right;--gx:100%}
/* and where the paragraph sits, when it is given a place of its own */
.post .pfig[data-tpos^="t"]{--tjy:flex-start;--tgy:0%}
.post .pfig[data-tpos^="m"]{--tjy:center;--tgy:50%}
.post .pfig[data-tpos^="b"]{--tjy:flex-end;--tgy:100%}
.post .pfig[data-tpos$="l"]{--tax:flex-start;--tta:left;--tgx:0%}
.post .pfig[data-tpos$="c"]{--tax:center;--tta:center;--tgx:50%}
.post .pfig[data-tpos$="r"]{--tax:flex-end;--tta:right;--tgx:100%}

/* The wash is anchored where the words are, so it darkens the corner they sit
   in and lets the rest of the picture alone. One gradient serves all nine, and
   a second one follows the paragraph when it has gone off on its own. */
.post .pfig.marked::after{content:'';position:absolute;inset:var(--mat);pointer-events:none;
  opacity:1;transition:opacity var(--markback) var(--ease);
  background:radial-gradient(125% 115% at var(--gx) var(--gy),
    rgba(20,17,16,.60),rgba(20,17,16,.20) 44%,rgba(20,17,16,0) 74%)}
/* more words need more ground under them */
.post .pfig.marked.long::after{
  background:radial-gradient(155% 145% at var(--gx) var(--gy),
    rgba(20,17,16,.62),rgba(20,17,16,.32) 50%,rgba(20,17,16,.07) 86%)}
.post .pfig.marked[data-tpos]::before{content:'';position:absolute;inset:var(--mat);
  pointer-events:none;opacity:1;transition:opacity var(--markback) var(--ease);
  background:radial-gradient(140% 130% at var(--tgx) var(--tgy),
    rgba(20,17,16,.5),rgba(20,17,16,.2) 48%,rgba(20,17,16,0) 80%)}

/* Inset to the photograph, not to the figure: the capitals stop exactly on
   the edge of the print, hard against the mount. Crossing into the mount reads
   as the letters being cut off, because type and mount are the same white. */
.pmark{position:absolute;inset:var(--mat);z-index:2;margin:0;padding:0;display:flex;
  clip-path:inset(calc(-1 * var(--over-y,0px)) calc(-1 * var(--over,0px)));
  flex-direction:var(--dir);gap:clamp(10px,1.4vw,18px);
  align-items:var(--ax);justify-content:var(--jy);text-align:var(--ta);
  pointer-events:none;opacity:1;transition:opacity var(--markback) var(--ease)}
/* words with no heading are not a heading, so they keep a readable margin */
.pmark:not(:has(h2)){padding:var(--inset)}
/* the paragraph given a corner of its own -- never flush, always readable */
.pnote{position:absolute;inset:var(--mat);z-index:2;margin:0;padding:var(--inset);display:flex;
  clip-path:inset(0);
  flex-direction:column;align-items:var(--tax);justify-content:var(--tjy);text-align:var(--tta);
  pointer-events:none;opacity:1;transition:opacity var(--markback) var(--ease)}

.pmark h2{margin:0;font-size:clamp(21px,3.8vw,46px);line-height:1}
.pmark h2 span{display:block;font-family:var(--label);font-weight:400;color:#fff;
  font-size:1em;line-height:1;letter-spacing:.13em;
  text-transform:uppercase}
/* The words that belong with it, over the same photograph. Garamond, because
   this is running text and it should read like the rest of the post; measured
   short, because a line the width of a photograph is a line nobody finishes. */
.pmark p,.pnote p{margin:0;max-width:38ch;font-size:clamp(11px,1.05vw,13.3px);line-height:1.18;
  color:rgba(255,255,255,.96);text-shadow:0 1px 18px rgba(20,17,16,.5)}
/* tabbed in from the heading, on whichever side the heading is set against */
.post .pfig[data-pos$="l"] .pmark p{margin-left:var(--tab)}
.post .pfig[data-pos$="r"] .pmark p{margin-right:var(--tab)}

/* Trimming the heading to the edge it is against, measured off the rendered
   page rather than guessed: Arca leaves 0.022em above a capital and 0.166em
   below the baseline at line-height 1. Letter-spacing also puts a gap after
   the last character, so type set flush right needs it taken back off and type
   set centred needs it put half back to look centred. */
.post .pfig[data-pos^="t"] .pmark h2{margin-top:calc(-1 * var(--tt) - var(--over-y))}
.post .pfig[data-pos^="b"] .pmark h2{margin-bottom:calc(-1 * var(--tb) - var(--over-y))}
.post .pfig[data-pos$="l"] .pmark h2 span{text-indent:0;
  margin-left:calc(-1 * var(--over) - var(--lsb,0em))}
/* the box is exactly the width of the line, so an indent shifts the whole
   line rather than half of it: half the trailing letter-space, plus half
   the difference between the two bearings, centres the ink not the box */
.post .pfig[data-pos$="c"] .pmark h2 span{
  text-indent:calc(.065em + (var(--rsb,0em) - var(--lsb,0em)) / 2)}
.post .pfig[data-pos$="r"] .pmark h2 span{text-indent:0;
  margin-right:calc(-.13em - var(--over) - var(--rsb,0em))}
/* The renderer's measured trims, read through a level of indirection so the
   block below can switch them off without fighting an inline style. */
.pmark h2{--tt:var(--trim-t,.022em);--tb:var(--trim-b,.166em)}

/* NOT text-box: trim-both cap alphabetic, tempting as it is. Arca's declared
   cap-height metric is wrong -- the browser trims the box to 17.3px when the
   capitals are actually 36.3px tall at that size -- so the letters end up
   painting far above their own box and the heading flies off the top of the
   photograph. The trimming is only ever as good as the metrics in the font,
   and these ones lie. The measured values below are the ones that hold. */
/* Overlap onto the mount, on whichever edges the words are against. The
   sides sit on the measured bearings and want a pixel; the cap line reads
   a shade low against a hard horizontal edge and wants two. */
/* Two speeds, not one. The transition declared on the hover rule governs the
   change INTO the hovered state -- the fade away -- and the one on the base
   rule governs the change back. Four seconds to clear the photograph, because
   that is a deliberate reveal and it should feel unhurried, and four again to
   put them back so the two halves match. They are separate variables rather
   than one because the pair wanting to differ is the more usual case, and it
   costs nothing to leave the room for it. */
.post .pfig.marked{--over:1px;--over-y:2px;--markaway:4s;--markback:4s}

.post .pfig.marked:hover::after,.post .pfig.marked:hover::before,
.post .pfig.marked:hover .pmark,.post .pfig.marked:hover .pnote{
  opacity:0;transition:opacity var(--markaway) var(--ease)}

/* On the white body a pull quote goes back onto the paper ground -- it is an
   aside, not part of the run of reading. The white gradient is a layer ON TOP
   of the texture rather than a mask, so the words stay at full strength while
   the ground underneath them fades away at both edges. */
.wht .post .pquote{
  background-color:var(--paper);
  background-image:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 15%,
    rgba(255,255,255,0) 85%,#fff 100%),var(--tex);
  background-size:auto,200px 200px;
  background-blend-mode:normal,multiply;
  padding-block:clamp(26px,4vh,52px);padding-inline:clamp(20px,4vw,64px)}

/* ---- a piece of music in the run of a post -------------------------------
   Cream, because it is not a photograph and should not pretend to be one: it
   sits in the column like a caption card. The browser's own audio widget is
   deliberately not used -- every browser draws a different one and none of
   them belong here. */
.paudio{margin:var(--figgap) 0 0;display:flex;align-items:center;
  gap:clamp(12px,1.6vw,20px);padding:clamp(12px,1.6vw,18px) clamp(14px,1.8vw,22px);
  background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;
  background-blend-mode:multiply;border:1px solid var(--line,rgba(35,31,32,.13))}
.paudio audio{display:none}
/* the pill */
.pa-play{flex:0 0 auto;width:clamp(40px,4.4vw,52px);height:clamp(40px,4.4vw,52px);
  padding:0;border:1px solid rgba(35,31,32,.18);border-radius:999px;background:#fff;
  cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.pa-play:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pa-play:active{transform:scale(.95)}
/* one shape that is a triangle, and becomes two bars when it is playing */
.pa-ico{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent currentColor;margin-left:3px}
.paudio.on .pa-ico{width:12px;height:14px;margin-left:0;border:0;
  background:linear-gradient(to right,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.pa-mid{flex:1 1 auto;min-width:0}
.pa-name{margin:0 0 8px;font-family:var(--label);font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.pa-by{opacity:.55}
/* the bar is the control, so it has to look like something you can hit */
.pa-bar{position:relative;height:8px;border-radius:999px;cursor:pointer;
  background:rgba(35,31,32,.14);overflow:hidden}
.pa-bar:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pa-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;
  background:var(--ink);pointer-events:none}
.pa-time{margin:0;flex:0 0 auto;font-family:var(--label);font-size:clamp(10px,1vw,12px);
  letter-spacing:.1em;color:var(--ink);opacity:.7;font-variant-numeric:tabular-nums;
  display:flex;gap:6px}
@media (max-width:560px){
  .paudio{flex-wrap:wrap}
  .pa-time{order:3;margin-left:auto}
}
@media (prefers-reduced-motion:reduce){ .pa-play{transition:none} }

/* On the white body the card needs an edge, since cream on white is a quieter
   change than cream on cream. */
.wht .post .paudio{border-color:rgba(35,31,32,.16)}

/* The web design credit. It is a joke, and it is meant to be found rather than
   read, so it sits quietly under the footer at the size of small print. */
footer .credit{margin:clamp(18px,3vh,32px) 0 0;text-align:center;
  font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
footer .credit a{color:var(--ink);opacity:.34;text-decoration:none;
  transition:opacity .3s var(--ease)}
footer .credit a:hover,footer .credit a:focus-visible{opacity:.72}

/* The way in. A small serif pi in the corner of the home page, which is the
   whole joke from The Net -- you only find it if you are looking. It is a real
   link, so it is reachable by keyboard too. */
.pi-egg{position:fixed;right:14px;bottom:12px;z-index:40;
  font-family:'Iowan Old Style',Georgia,'Times New Roman',serif;font-size:17px;
  line-height:1;color:var(--ink);opacity:.16;text-decoration:none;
  padding:6px;transition:opacity .45s var(--ease)}
.pi-egg:hover,.pi-egg:focus-visible{opacity:.85}
@media (max-width:700px){ .pi-egg{right:8px;bottom:8px;font-size:15px} }

/* ---- style variant: cream masthead, white body ---------------------------
   A test of standing the reading part of the post on white and leaving the
   hero and the headline on the site's own paper ground. The prints lose their
   mounts here, and that is the point rather than an oversight: a white mount
   on a white page is not a mount, it is nothing, and the shadow that made it
   read as a print on paper only reads as dirt on white. */
.wht header{padding:clamp(24px,4.6vh,58px) var(--gut) clamp(34px,5.4vh,64px);text-align:center}
.wht .hero16{position:relative;margin:0 auto clamp(30px,4.8vh,56px);
  width:min(1000px,100%);aspect-ratio:16/10;overflow:hidden}
.wht .hero16 img{width:100%;height:100%;object-fit:cover;display:block}
/* the couple's names, if this post carries them, still belong on the picture */
.wht .hero16 .names{position:absolute;inset:0;margin:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-family:var(--label);
  font-size:clamp(19px,2.7vw,35px);letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;text-shadow:0 2px 26px rgba(20,17,16,.5)}
.wht header .pmeta{margin:0 0 clamp(14px,2vh,22px)}
/* In this variant the headline sits in the masthead, so `.post > .ptitle`
   never reaches it and nothing was setting its size -- it was running on the
   browser's default 2em, which came out at 38px. 28px is the 74% of that Che
   asked for, expressed so it still scales down. Set tight, and given the width
   to fall in one or two lines rather than the four a 22ch measure forced. */
.wht header .ptitle{margin:0 auto;font-family:var(--display);
  font-size:clamp(18px,1.67vw,24px);line-height:1.04;letter-spacing:-.01em;
  max-width:min(1180px,100%);text-wrap:balance}

/* The body stands on white, edge to edge, so the change of ground is the thing
   that separates the reading from the masthead. */
.wht .post{background:#fff;--mat:0px;--over:0px;--over-y:0px;
  padding-block:clamp(28px,4.6vh,60px)}
/* no mount means no shadow: the shadow existed to lift a print off the paper */
.wht .post .pfig,.wht .post .pset img,.wht .post .pband{box-shadow:none}

/* A panoramic band -- one long print that breaks out of the text column.

   Several photographs can share it, but they share ONE mount rather than
   taking one each. That is deliberate: a gap between them would show the
   figure's own white through the wash as a grey stripe, and butted together
   they read as a single sweep rather than a row of pictures, which is what a
   panorama is. Being short and wide, the band carries type far larger than a
   portrait frame ever could -- which is the point of putting a heading here. */
/* --pano is what the renderer writes inline; --pshape is what the row is
   actually sized by, so a media query can override the chosen shape.
   Overriding --pano directly cannot work: an inline style beats every
   selector in the stylesheet. */
.post .pband{--pano:32/9;--pshape:var(--pano);--bandgap:var(--figgap);
  --cellw:calc((100% - (var(--n,1) - 1) * var(--bandgap)) / var(--n,1));
  --cellmask:repeating-linear-gradient(to right,
    #000 0 var(--cellw),transparent var(--cellw) calc(var(--cellw) + var(--bandgap)))}
/* The gaps are mount, not photograph, so the wash must not darken them.
   Masking the wash to the cells is cheaper than giving every cell its own
   gradient, and keeps the wash continuous across the whole band. */
.post .pband.marked::after,.post .pband.marked::before{
  -webkit-mask-image:var(--cellmask);mask-image:var(--cellmask)}
.post .pband .prow{display:grid;grid-template-columns:repeat(var(--n,1),1fr);
  gap:var(--bandgap);aspect-ratio:var(--pshape)}
.post .pband .prow img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--pos,50% 50%)}
/* The heading as a tab stuck to the corner of the band.

   Inverted from the first sketch: paper ground, ink type -- so it reads as a
   piece of the page laid on top of the print rather than a black sticker. It
   carries the paper texture for the same reason. Placed by the same nine-box
   control as every other overlay, and it costs the photographs no width at
   all, which was the whole problem with the slot. */
.post .pband.tabbed{position:relative}
.post .pband .ptab{position:absolute;z-index:3;margin:0;--tx:0;--ty:0;
  transform:translate(var(--tx),var(--ty));
  background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;
  background-blend-mode:multiply;color:var(--ink);
  padding:clamp(9px,1.3vw,15px) clamp(14px,2vw,26px);
  box-shadow:0 1px 2px rgba(35,31,32,.14),0 8px 20px rgba(35,31,32,.12)}
.post .pband .ptab span{display:block;font-family:var(--label);font-weight:400;
  font-size:clamp(13px,1.7vw,23px);letter-spacing:.16em;text-transform:uppercase;
  line-height:1;white-space:nowrap}
.post .pfig[data-pos^="t"] .ptab{top:var(--mat)}
.post .pfig[data-pos^="m"] .ptab{top:50%;--ty:-50%}
.post .pfig[data-pos^="b"] .ptab{bottom:var(--mat)}
.post .pfig[data-pos$="l"] .ptab{left:var(--mat)}
.post .pfig[data-pos$="c"] .ptab{left:50%;--tx:-50%}
.post .pfig[data-pos$="r"] .ptab{right:var(--mat)}
@media (max-width:700px){
  .post .pband .ptab span{font-size:12px;letter-spacing:.13em}
  .post .pband .ptab{padding:7px 11px}
}

/* A spine: a section heading stood on its end between the photographs.

   It uses the band's height, which is the axis with room to spare, so the
   column collapses to the width of one line of type and the photographs keep
   almost all of the band. A band may carry several at different points.

   The ground is white rather than the paper texture because a spine sits
   INSIDE the print's mount, between two photographs, not on the page. */
.post .pband .spine{height:100%;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:clamp(6px,1vh,14px) clamp(2px,.4vw,6px)}
.post .pband .spine h2{margin:0}
.post .pband .spine h2 span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--label);font-weight:400;color:var(--ink);
  font-size:clamp(13px,1.9vw,28px);letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;white-space:nowrap;line-height:1}
@media (max-width:700px){
  .post .pband .spine h2 span{font-size:12px;letter-spacing:.14em;text-indent:.14em}
  .post .pband .spine{padding:6px 2px}
}

@media (max-width:700px){
  /* 32:9 across a phone is a letterbox slit, so the band gets deeper. It stays
     ONE row: wrapping to a second row breaks the aspect-ratio the row is sized
     by and squashes every photograph in it. */
  .post .pband{--pshape:16/9}
}

/* the grid of photographs gets the same mount */
.post .pset img{background:#fff;padding:var(--mat);box-sizing:border-box;
  box-shadow:0 1px 2px rgba(35,31,32,.07),0 6px 18px rgba(35,31,32,.05)}

@media (hover:none){
  /* Nothing to hover with, so the words never clear. The anchored wash already
     leaves most of the frame alone -- lighten it a little further rather than
     dragging the words back to the top and overriding the chosen position. */
  .post .pfig.marked::after{background:radial-gradient(125% 115% at var(--gx) var(--gy),
    rgba(20,17,16,.46),rgba(20,17,16,.12) 42%,rgba(20,17,16,0) 70%)}
}
@media (prefers-reduced-motion:reduce){
  .post .pfig.marked::after,.post .pfig.marked::before,.pmark,.pnote{transition:none}
}

/* A group of photographs in the body column -- what used to mean stitching a
   diptych in Photoshop.

   Called .pset, not .pgrid: .pgrid was already taken, by the three-across
   picture grid on /a-wedding-day/. Mine was declared first so the older rule
   won, and the block came out three narrow columns with an 11px gutter, which
   is exactly what that other rule says. Two classes, one name, and the page
   quietly obeys the wrong one.

   The gap is the same variable as the space between stacked pictures, so a
   pair sits inside the rhythm of the page instead of setting up a second one.
   Cells crop with object-fit, so the square version of a portrait is a
   decision that can be changed later rather than a new file. */
.pset{margin:var(--figgap) 0 0;display:grid;gap:var(--figgap);
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.pset img{width:100%;height:auto;aspect-ratio:var(--cell,1);
  object-fit:cover;object-position:var(--pos,50% 50%)}
@media (max-width:640px){
  /* three or four across stops being photographs and starts being stamps */
  .pset{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pfig img{width:100%;height:auto}
.pfig.pano img{aspect-ratio:21/9;object-fit:cover}
.pfig .cap{margin-top:11px;text-align:center}
.post > .alignfull.pfig{margin-top:clamp(30px,4.6vh,56px)}
.post > .alignfull.pfig .cap{padding-inline:var(--gut)}

/* Carousel: native scroll-snap does the work, so it drags on a trackpad and
   flicks on a phone without a library. The buttons page it by one viewport. */
.carousel{position:relative;margin-top:clamp(26px,4vh,46px)}
.car-track{display:flex;gap:clamp(8px,1vw,14px);list-style:none;margin:0;padding:0 var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-track li{flex:0 0 auto;scroll-snap-align:center}
.car-track img{height:clamp(320px,56vh,620px);width:auto;max-width:none;object-fit:cover}
.car-b{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:37px;height:37px;display:grid;place-items:center;border-radius:90px;
  background:rgba(253,251,248,.9);color:var(--ink);font-size:14px;
  box-shadow:0 4px 18px rgba(35,31,32,.16);opacity:0;
  transition:opacity .4s var(--ease),background .3s var(--ease)}
.carousel:hover .car-b,.car-b:focus-visible{opacity:1}
.car-b:hover{background:#fff}
.car-b[disabled]{opacity:0!important;pointer-events:none}
.car-b.prev{left:clamp(10px,1.6vw,22px)}
.car-b.next{right:clamp(10px,1.6vw,22px)}
.car-hint{margin:13px 0 0;text-align:center;color:var(--sage)}
@media(hover:none){.car-b{display:none}}

.pend{margin-top:clamp(44px,7vh,88px);padding-top:clamp(28px,4vh,46px);
  border-top:1px solid var(--line);text-align:center}
.pend h3{margin-top:12px;font-size:clamp(17.8px,1.94vw,23.8px)}
.pend .btns{margin-top:clamp(20px,2.8vh,30px)}

/* ==================== blog index ==================== */

.btabs{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(6px,1vw,14px);
  padding-top:clamp(30px,5vh,54px)}
.btab{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  padding:10px clamp(14px,1.6vw,22px);border-radius:90px;border:1px solid transparent;
  font-family:var(--label);font-size:clamp(9.5px,1.05vw,11px);letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-2);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btab:hover{background:rgba(35,31,32,.05);color:var(--ink)}
.btab em{font-style:normal;font-size:9px;letter-spacing:.08em;color:var(--sage)}
.btab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btab.on em{color:rgba(255,255,255,.6)}

.blog{padding-block:clamp(28px,4.6vh,52px) clamp(50px,8vh,100px)}
.bcat{display:none}
.bcat.on{display:block}
.bnote{max-width:56ch;margin:0 auto clamp(24px,3.4vh,38px);text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--sage);
  padding:13px 20px;border:1px dashed var(--line);border-radius:3px}

/* the lead post: one big picture, the rest of the category beneath it */
.bfeat{display:grid;grid-template-columns:1.28fr 1fr;align-items:center;
  gap:clamp(22px,3.4vw,52px);text-decoration:none;color:inherit;
  padding-bottom:clamp(30px,4.6vh,52px);margin-bottom:clamp(30px,4.6vh,52px);
  border-bottom:1px solid var(--line)}
@media(max-width:820px){.bfeat{grid-template-columns:1fr;gap:clamp(16px,3vh,24px)}}
.bfeat .bimg{aspect-ratio:4/3}
.bfeat .bt{font-size:clamp(20.3px,2.26vw,31.2px);line-height:1.16}
.bfeat .bx{font-size:clamp(15.5px,1.5vw,18px);max-width:46ch}

/* ---- the blog page, as Che marked it up ---------------------------------
   The eyebrow does the announcing and the headline says what is actually in
   here, so the sizes swap round: THE BLOG large, and the sentence under it
   smaller than a page title would normally be. The sentence used to sit below
   the title as well as in it, which is why the sub-line is gone. */
#v-blog .phero h1{font-size:clamp(19.6px,2.08vw,27.5px);max-width:26ch}
#v-blog .hero-eyebrow{font-size:clamp(15px,1.9vw,25.2px);letter-spacing:.22em;
  color:var(--ink)}

/* The pills. Down about a third from the site default, then back up 15%. */
#v-blog .btab{padding:8px clamp(12px,1.32vw,17px);
  font-size:clamp(8.6px,.85vw,8.9px);letter-spacing:.16em;gap:7px}
#v-blog .btab em{font-size:8px}

/* The featured pair: a panel, so the two of them read as one section rather
   than as two cards that happen to be next to each other. */
/* As wide as the grid under it, and standing off it by the same distance the
   grid's own rows stand off each other -- clamp(26px,3.4vw,52px) is .bgrid's
   gap, and using the literal value twice would be two numbers to keep in step. */
.bfeat-wrap{margin:0 0 clamp(26px,3.4vw,52px);
  padding:clamp(22px,3vw,34px) clamp(20px,2.6vw,32px) clamp(26px,3.4vw,38px);
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.38)}
.bfeat-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px)}
@media(max-width:900px){.bfeat-pair{grid-template-columns:1fr}}

/* Names over a photograph.

   Che used to burn these into the file in Photoshop -- "CAT + ZAC" in wide
   Arca caps over a dark wash. As text they stay sharp at any size, they are
   searchable, and they can be corrected after the fact. The wash is the part
   that makes them readable: a photograph is not a background until something
   sits between it and the words. */
.bimg .clip{position:relative}
.named .bimg .clip::after{content:'';position:absolute;inset:0;
  background:rgba(20,17,16,.2);pointer-events:none}
.bname{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35em;
  padding:0 8%;text-align:center;color:#fff;pointer-events:none}
.bname b{font-family:var(--label);font-weight:400;
  font-size:clamp(11px,1.28vw,17px);letter-spacing:.42em;text-transform:uppercase;
  text-indent:.42em;line-height:1.2}
.bname i{font-family:var(--accent);font-style:italic;font-weight:300;
  font-size:clamp(11px,1.1vw,14.5px);letter-spacing:.02em;opacity:.92}

/* The post's own hero gets the same wash, for the same reason. */
.hero-img.short::before{content:'';position:absolute;inset:0;z-index:1;
  background:rgba(20,17,16,.2);pointer-events:none}

/* The label on the panel, in the same terracotta as Enquire. */
.bfeat-head{display:inline-block;margin:0 0 clamp(20px,3vh,30px);
  padding:7px 15px 6px;border-radius:90px;background:var(--ember);color:#fff;
  font-family:var(--label);font-size:clamp(8.5px,.92vw,10px);letter-spacing:.2em;
  text-transform:uppercase}

/* Inside a featured card the photograph and the words are two columns, and the
   words are spread so the first line sits on the top of the photograph and the
   last on its bottom edge. */
#v-blog .bfeat{grid-template-columns:1.25fr 1fr;align-items:stretch;
  gap:clamp(14px,1.6vw,22px);padding-bottom:0;margin-bottom:0;border-bottom:0;
  max-width:none}
/* The photograph sets the height of the card and the words stretch to match
   it, not the other way round.
   Not `aspect-ratio` with `height:100%` together, which is what this said
   first: given a definite height, aspect-ratio computes the WIDTH from it, so
   the image ignored its grid track, came out 420px inside a 249px column and
   lay across the words. One or the other decides the size, never both. */
#v-blog .bfeat .bimg{aspect-ratio:3/2;width:100%;height:auto}
#v-blog .bfeat .btxt{display:flex;flex-direction:column;justify-content:space-between;
  height:100%}
#v-blog .bfeat .bt{font-size:clamp(17px,1.75vw,24.1px);margin-top:0}
#v-blog .bfeat .bx{font-size:clamp(14.5px,1.4vw,17px);line-height:1.38;margin-top:0}
#v-blog .bfeat .go,#v-blog .bcard .go{font-family:var(--label);
  font-size:clamp(8.5px,.94vw,10.5px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);display:inline-flex;align-items:center;gap:8px}
#v-blog .bfeat .go{margin-top:0}
@media(max-width:900px){
  #v-blog .bfeat{grid-template-columns:1fr}
  #v-blog .bfeat .btxt{gap:10px}
  #v-blog .bfeat .bimg{height:auto}
}

.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.4vw,52px)}
@media(max-width:720px){.bgrid{grid-template-columns:1fr}}
.bcard{display:block;text-decoration:none;color:inherit}
.bcard .bimg{aspect-ratio:3/2}

.bimg{display:block;position:relative;overflow:hidden;background:var(--tint)}
.bimg .clip{display:block;position:absolute;inset:0}
.bimg img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--ease)}
.bfeat:hover .bimg img,.bcard:hover .bimg img{transform:scale(1.035)}
.btxt{display:block;margin-top:clamp(14px,1.9vh,20px)}
.bfeat .btxt{margin-top:0}
.bmeta{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage)}
.bt{display:block;margin-top:clamp(9px,1.3vh,14px);font-family:var(--display);
  font-size:clamp(16.9px,1.67vw,21.1px);line-height:1.28;letter-spacing:-.008em}
.bx{display:block;margin-top:clamp(8px,1.2vh,12px);color:var(--ink-2);
  font-size:15.5px;line-height:1.62;max-width:52ch}
.bcard .go,.bfeat .go{margin-top:clamp(12px,1.7vh,17px)}

/* ==================== portfolio ==================== */

.pratio{padding-block:clamp(40px,7vh,84px)}
.ratio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,56px);
  text-align:center}
@media(max-width:760px){.ratio{grid-template-columns:1fr;gap:clamp(24px,4vh,34px)}}
.ratio > div{padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--line)}
.rn{display:block;font-family:var(--display);font-size:clamp(33.9px,4.32vw,60.5px);line-height:.94;
  letter-spacing:-.03em}
.rn i{font-family:var(--accent);font-style:italic;font-size:.42em;color:var(--ember);
  vertical-align:.72em;margin-left:.06em}
.rl{display:block;margin-top:clamp(10px,1.5vh,15px);font-family:var(--label);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.rx{display:block;margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.56;
  max-width:26ch;margin-inline:auto}

/* chapter rail: a contents list for a page that is deliberately long */
.prail{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 0;
  padding:0 var(--gut) clamp(30px,5vh,56px)}
.prail a{display:flex;align-items:center;gap:7px;padding:6px 11px;text-decoration:none;
  font-family:var(--label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);transition:color .3s var(--ease)}
.prail a:hover{color:var(--ember)}
.prail a span{width:4px;height:4px;border-radius:90px;background:currentColor;opacity:.5}
.prail a em{font-style:normal}
@media(max-width:620px){.prail a em{display:none}.prail a{padding:6px}}

.pch{position:relative;z-index:2;background-color:var(--paper);background-image:var(--tex);
  background-size:200px 200px;background-blend-mode:multiply;
  padding-block:clamp(34px,5.5vh,66px)}
.pch:nth-of-type(even){background-color:var(--warm)}
.ph{max-width:var(--max);margin:0 auto clamp(22px,3.4vh,38px);padding-inline:var(--gut);
  text-align:center}
.ph-n{display:block;font-family:var(--label);font-size:10px;letter-spacing:.26em;
  color:var(--ember)}
.ph h2{margin-top:clamp(9px,1.4vh,14px);font-size:clamp(23px,3.28vw,45.2px);line-height:1.04;
  letter-spacing:-.02em}
.ph-l{margin-top:clamp(8px,1.2vh,12px);font-family:var(--accent);font-style:italic;
  font-size:clamp(15.4px,1.77vw,21.4px);color:var(--ink-2)}
.ph-b{margin-top:clamp(11px,1.6vh,16px);font-family:var(--label);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}

/* The filmstrip drifts sideways as the page scrolls past it. No pinning, so
   eleven chapters don't cost eleven screens of hijacked scroll. */
.pstrip{overflow:hidden}
.pstrip-in{display:flex;gap:clamp(8px,1vw,16px);width:max-content;will-change:transform}
.pstrip figure{margin:0;flex:0 0 auto}
.pstrip img{height:clamp(280px,46vh,520px);width:auto;max-width:none;object-fit:cover}

/* the 4% - the only pictures on the page allowed to take the whole window */
.pshowpiece{margin:0;position:relative}
.pshowpiece .clip{display:block;overflow:hidden}
.pshowpiece img{width:100%;height:clamp(420px,84vh,880px);object-fit:cover}

/* the 1% - deliberately one frame, deliberately not full width */
.pone{margin:0 auto;max-width:min(780px,100% - var(--gut) * 2)}
.pone .clip{display:block;overflow:hidden}
.pone img{width:100%;height:auto}
.pone .cap{margin-top:12px;text-align:center}

.ppair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,16px);
  padding-inline:clamp(0px,1vw,16px)}
@media(max-width:700px){.ppair{grid-template-columns:1fr}}
.ppair figure{margin:0}
.ppair .clip{display:block;overflow:hidden}
.ppair img{width:100%;height:clamp(300px,54vh,620px);object-fit:cover}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px);
  max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pgrid figure{margin:0}
.pgrid .clip{display:block;overflow:hidden}
.pgrid img{width:100%;height:clamp(190px,26vh,330px);object-fit:cover}

/* ==================== portfolio (simple) ==================== */

.phero.tight{padding-bottom:clamp(34px,5.5vh,62px)}

.folio{position:relative;z-index:2;background-color:var(--paper);background-image:var(--tex);
  background-size:200px 200px;background-blend-mode:multiply;
  padding-block:clamp(30px,5vh,60px)}
/* big means big: generous frames with real air around them */
.fbig{margin:0 auto clamp(30px,5.5vh,72px);max-width:min(1180px,100% - var(--gut) * 2)}
.fbig .clip{display:block;overflow:hidden}
.fbig img{width:100%;height:auto}
.fduo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px);
  max-width:min(1180px,100% - var(--gut) * 2);margin:0 auto clamp(30px,5.5vh,72px);
  align-items:start}
@media(max-width:700px){.fduo{grid-template-columns:1fr}}
.fduo figure{margin:0}
.fduo .clip{display:block;overflow:hidden}
.fduo img{width:100%;height:auto}

/* a word holding the space between pictures, doing the job a paragraph would */
.fword{text-align:center;padding:clamp(26px,6vh,80px) var(--gut) clamp(34px,7vh,92px)}
.fw{font-family:var(--display);font-size:clamp(39px,7.2vw,106.6px);line-height:.9;
  letter-spacing:-.045em}
.fs{margin-top:clamp(14px,2.2vh,24px);font-family:var(--accent);font-style:italic;
  font-size:clamp(14.5px,1.67vw,19.5px);color:var(--ink-2);max-width:34ch;margin-inline:auto}

.taste{padding-block:clamp(44px,7.5vh,96px)}
.tlist{display:grid;gap:clamp(16px,2.4vh,26px);margin-top:clamp(24px,3.6vh,40px);
  max-width:880px;margin-inline:auto}
.tlist > div{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(14px,2vw,26px);
  align-items:baseline;padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--line)}
.tn{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;color:var(--ember)}
.tt{font-family:var(--display);font-size:clamp(16.9px,1.94vw,24.6px);line-height:1.24}
.tx{grid-column:2;margin-top:8px;color:var(--ink-2);font-size:15.5px;line-height:1.6;
  max-width:52ch}
@media(max-width:600px){.tlist > div{grid-template-columns:1fr}.tx{grid-column:1}}

/* the mono passage sets its own darker ground so the greys have something to sit on */
.mono{background-color:var(--tint-2);background-image:var(--tex);background-size:200px 200px;
  background-blend-mode:multiply;padding-block:clamp(44px,7.5vh,96px)}
.bwgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(24px,3.6vh,42px)}
@media(max-width:900px){.bwgrid{grid-template-columns:repeat(2,1fr)}}
.bwgrid figure{margin:0}
.bwgrid .clip{display:block;overflow:hidden}
.bwgrid img{width:100%;height:clamp(240px,34vh,420px);object-fit:cover;
  filter:grayscale(1) contrast(1.06)}

/* Home 95/4/1 block, reshaped in the editor: left-aligned throughout, the card
   top-rules removed, and small gaps between the three bars. Scoped to this one
   instance with .philo — .ratio and .bar-viz are shared with the Experience and
   whole-day pages, which keep the centred original. */
.philo .ratio .it{text-align:center;border-top:none;padding-top:0}
.philo .bar-key .lab{text-align:left}
.philo .bar-viz{gap:5px}
/* The spec sheet draws all three segments in one ink at 82% — width carries
   the ratio, so colour does not have to. Replaces the ember/ink/sage set. */
.philo .bar-viz span{border-radius:90px;background:var(--ink);opacity:.82}
/* Second editor pass: the columns became image-first — a centred photograph,
   then the per-cent, then the label, all smaller. No crop marks, no captions,
   no descriptions (those came out of the markup). */
.philo .ratio .rimg{margin-top:0}
.philo .ratio .rimg .clip{display:block}
.philo .ratio .rimg::before,.philo .ratio .rimg::after{display:none}
.philo .ratio .pc{font-size:clamp(20.3px,2.36vw,29px);margin-top:14px}
.philo .ratio h3{font-size:clamp(16px,1.9vw,22.1px);margin:7px 0 0}
/* Third pass. Columns 30% closer; the bar (and its key, so labels stay under
   their segments) inset to line up with the outer edges of the photographs —
   images are 65% of a column and centred, so the inset is 17.5% of one column
   width each side. The 'I work quietly…' sentence now sits under the whole
   block rather than above it. */
/* The photographs keep the size they had — 20.5% of the container, which is
   what 65% of a column came to — and the columns simply close up until there
   is 20px between them. The group is centred, and the bar is exactly as wide
   as the three photographs plus their two gaps. */
.philo .ratio{grid-template-columns:repeat(3,20.5%);gap:20px;justify-content:center}
.philo .ratio .rimg{width:100%}
.philo .bar-viz,.philo .bar-key{width:calc(61.5% + 40px);margin-inline:auto}
@media(max-width:760px){
  .philo .ratio{grid-template-columns:1fr}
  .philo .bar-viz,.philo .bar-key{width:100%}
}

/* The credit lines above the introduction. Arca, as asked, but not uppercase:
   ninety characters of tracked-out capitals reads as a shout, and this is a
   quiet line. */
.introlab{font-family:var(--label);font-size:clamp(10.5px,1.05vw,12px);line-height:1.75;
  letter-spacing:.05em;color:var(--ink-2);max-width:60ch;margin-inline:auto}

/* ---- Kind words, over a photograph -------------------------------------- */
/* The quotes used to sit in solid paper cards. Over a photograph that reads as
   a white box dropped on top of it, so the cards lose their fill and the whole
   band goes dark instead: a translucent ink wash over the confetti, light type
   on top. The wash has to be strong — confetti is mostly white, so the bright
   parts of the frame are the worst case for contrast, not the dark ones. */
.wordsbg{position:relative;overflow:hidden}
.wordsbg > .wordsbg-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;z-index:0}
.wordsbg > .wordsbg-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(24,18,12,.74) 0%,rgba(24,18,12,.66) 40%,
    rgba(24,18,12,.68) 70%,rgba(24,18,12,.78) 100%)}
.wordsbg > *:not(.wordsbg-img):not(.wordsbg-scrim){position:relative;z-index:2}

.wordsbg .kick{color:rgba(247,243,236,.86)}
.wordsbg h2{color:#f7f3ec}
.wordsbg .quote{background:transparent;border:0;padding:0}
.wordsbg .quote blockquote{color:#f7f3ec;text-shadow:0 1px 20px rgba(20,14,8,.5)}
.wordsbg .quote .who{color:rgba(247,243,236,.86)}

/* ---- the 95 / 4 / 1 band ------------------------------------------------ */
/* Three frames that cross-fade, a word that changes with them, and a picture
   that drifts slower than the page. The text block swaps sides between frames
   so it never lands on a face — which is what the site this came from does. */
.pxb{position:relative;z-index:2;background:var(--paper);
  padding-bottom:clamp(30px,4.6vh,58px)}
.pxb-frame{position:relative;overflow:hidden;height:clamp(416px,60svh,624px)}
/* Twice the frame's height, so the parallax has room to sit the picture well
   back: about half page speed, which is where the Showit pages live. Was 150%,
   which gave 0.8 and could not be felt. */
.pxb-med{position:absolute;left:0;right:0;top:-50%;height:200%;will-change:transform}
/* These three are stacked and cross-fade in place. The browser never judges
   them near the viewport, so loading="lazy" never fired and the band showed
   empty — the markup carries no lazy attribute for that reason. */
/* Each picture is zoomed in a quarter around its focus point (--focus, set
   on the image: where the faces are), so the subjects are bigger and the
   drift uncovers more. A fixed zoom, not a scroll-driven one. */
.pxb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);transform-origin:var(--focus,50% 30%);
  object-position:50% 45%;opacity:0;transition:opacity 1.5s var(--ease)}
.pxb-img.on{opacity:1}
.pxb-scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(26,19,12,.34) 0%,rgba(26,19,12,.1) 30%,rgba(26,19,12,.14) 64%,rgba(26,19,12,.4) 100%)}

/* logo and dots ride together at the top left */
.pxb-side{position:absolute;z-index:4;left:clamp(16px,2.4vw,38px);top:clamp(16px,2.6vh,30px);
  display:flex;flex-direction:row;align-items:center;gap:16px}
.pxb-logo{width:24px;height:24px;opacity:.9}
.pxb-dots{display:flex;flex-direction:row;gap:10px}
.pxb-dots button{all:unset;cursor:pointer;width:7px;height:7px;border-radius:90px;
  background:rgba(247,243,236,.45);transition:background .45s var(--ease),transform .45s var(--ease)}
.pxb-dots button:hover{background:rgba(247,243,236,.8)}
.pxb-dots button.on{background:#f7f3ec;transform:scale(1.3)}
.pxb-dots button:focus-visible{outline:2px solid #f7f3ec;outline-offset:3px}

/* ALL / THE with the ratio beside it, and the changing word beneath */
.pxb-in{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  display:grid;grid-template-columns:auto auto;column-gap:5px;
  align-items:start;color:#f7f3ec;
  transition:left .9s var(--ease),right .9s var(--ease)}
.pxb-in.at-right{right:clamp(26px,7vw,120px);left:auto}
.pxb-in.at-left{left:clamp(26px,7vw,120px);right:auto}

.pxb-say{grid-column:1;grid-row:1;margin:0;display:flex;flex-direction:column;
  font-family:var(--label);font-weight:400;text-transform:uppercase;
  font-size:clamp(18px,2.33vw,31.5px);letter-spacing:.26em;line-height:1.16;
  /* tracking adds a trailing space after the final letter; without this the
     visible gap is the column-gap plus a quarter of an em */
  margin-right:-.26em;
  text-shadow:0 2px 26px rgba(20,14,8,.45)}

.pxb-stat{grid-column:2;grid-row:1;margin:0;padding:0;list-style:none;
  font-family:var(--display);font-size:clamp(9px,0.96vw,12.8px);
  /* three lines set to the height of the two capital lines beside them */
  line-height:1.9;text-shadow:0 1px 18px rgba(20,14,8,.5)}
.pxb-stat li{opacity:.62;white-space:nowrap}
.pxb-stat li.lead{opacity:1}
.pxb-stat b{font-weight:400}

/* under the ratio, its left edge on the ratio's left edge, 5px below */
.pxb-word{grid-column:2;grid-row:2;justify-self:start;
  font-family:var(--accent);font-style:italic;
  font-size:clamp(25.5px,3.3vw,45px);line-height:1.06;
  /* the accent italic sits low in its line box — about a quarter of an em
     of empty space above the letters — so the gap you see is not the gap
     you set. Pulled up in em so it holds as the type scales. */
  margin-top:-.3em;
  text-shadow:0 2px 26px rgba(20,14,8,.45)}

/* the small tally, sitting low and centred over the picture */
/* Sits on the bottom edge of the picture. Wider and shorter than it was, the
   figures centred in it, and no blur — that was a backdrop-filter, and Che
   could see it. Plain white at a fifth, and the gradient runs the full height
   from nothing so there is no visible edge along the top. */
.pxb-tick{position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:0;margin:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(26px,3.4vw,54px);
  width:min(560px,64vw);padding:9px 24px 10px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.09) 62%, rgba(255,255,255,.2) 100%);
  font-family:var(--display);font-size:clamp(14px,1.35vw,19px);color:#fff;
  text-shadow:0 1px 14px rgba(20,14,8,.4);
  transition:opacity .25s linear}

.pxb-btn{display:block;width:max-content;margin:clamp(18px,2.6vh,30px) auto 0;
  padding:15px clamp(24px,3vw,44px);background:var(--tint);color:var(--ink);
  text-decoration:none;font-family:var(--label);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;transition:background .35s var(--ease)}
.pxb-btn:hover,.pxb-btn:focus-visible{background:var(--tint-2)}

@media(max-width:820px){
  .pxb-frame{height:clamp(336px,48svh,448px)}
  .pxb-in.at-right,.pxb-in.at-left{left:50%;right:auto;transform:translate(-50%,-50%)}
  .pxb-in{justify-items:center}
  .pxb-word{justify-self:center}
}
/* Phones: the drift runs on the compositor, tied straight to the scroll,
   so it cannot lag behind a thumb flick the way a script can. The frame
   names its own view timeline; the picture box follows it. Older browsers
   fall through to the script version. */
@media(max-width:820px){
  @supports (animation-timeline: view()){
    .pxb-frame{view-timeline-name:--pxb;view-timeline-axis:block}
    .pxb-med{animation:pxbDrift linear both;animation-timeline:--pxb;animation-range:entry 0% exit 100%}
  }
}
@keyframes pxbDrift{from{transform:translateY(-8.75%)}to{transform:translateY(8.75%)}}
@media (prefers-reduced-motion:reduce){
  .pxb-img{transition:opacity .01s}
  .pxb-med{transform:none!important;animation:none!important}
  .pxb-say em{transition:none}
}

/* req 7: the credit lines in capitals, sized so each half holds one line */
.introlab.caps{text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(8px,0.83vw,10px);line-height:2.1;max-width:none}

/* req 8: the wordmark 20% larger, with the logo tucked closer to it */
.navinner .mark{gap:6px;font-size:19.2px}
.mark .lk,.mark .lw,.mark .logos{width:36px;height:36px}

/* Diagnostic switches, driven only by the frame meter (?perf). They cost
   nothing when unused — no page ever carries these classes on its own. */
html.fx-no-texture .sec,
html.fx-no-texture .strip,
html.fx-no-texture body,
html.fx-no-texture .sec.shell::before,
html.fx-no-texture .strip.shell::before{background-image:none!important;
  background-blend-mode:normal!important}



/* ── The wall ─────────────────────────────────────────────────────────────
   Twenty-eight carousel pages on an even grid: same size, same gaps, no
   tilt. Scattering them read as a pile of prints; ordering them reads as a
   complete picture of a year, which is the point being made.

   Sixteen slots — 15 pictures and one line of type — is deliberate. Sixteen
   divides exactly by 2, 4 and 8 only, so those are the column counts on
   offer; 3, 5 and 6 all leave a ragged last row. Four columns holds from a
   phone-and-a-half upward and simply gets bigger on a wide screen, which is
   the point — this section is the pictures.

   Every page is 3:4, so the cells are too and nothing crops. */
.wall{padding-block:clamp(44px,6.5vh,92px)}
/* Optional white ground. The carousel pages are white, so on paper each one
   reads as a card with its own edge; on white the edges dissolve and the
   photographs float in shared space. Same full-bleed technique the site's
   other bands use. */
.wall.on-white::before{background-color:#fff;background-image:none;
  background-blend-mode:normal}
.wall-grid{--wc:4;display:grid;grid-template-columns:repeat(var(--wc),1fr);
  gap:clamp(9px,1.25vw,20px)}
/* height:auto matters for the <video>. Its height attribute maps to a CSS
   presentational hint, so without this it keeps its intrinsic 1000px and
   aspect-ratio never applies — one cell then forced a 1000px-tall grid row
   and tore the wall apart. Images default to auto, which is why they were
   fine and the clip was not. */
.wall-grid img,.wall-grid .wall-clip{width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;display:block;background:#fff}

/* The sentence takes a single cell, left of centre on the second row, so it
   reads as one of the pictures rather than as a caption over them.
   Explicitly placed items are positioned before auto-flow runs, so the
   pictures fill in around it without any of them being placed by hand. */
.wall-say{grid-column:2;grid-row:2;
  margin:0;align-self:center;padding-inline:clamp(6px,1vw,16px);
  font-family:var(--display);font-size:clamp(15px,1.42vw,22px);line-height:1.26;
  letter-spacing:.004em;color:var(--ink);text-align:center}

/* The line arrives rather than appears: three seconds, and from further down
   than the site's usual 26px, so the movement is legible over that long.

   It deliberately does NOT use the shared .r class. That observer fires at 6%
   visibility with a -10% bottom margin, which is right for a section heading
   but wrong here: this element sits in the wall's second row, so it would
   trigger while still at the bottom edge and finish before it was comfortably
   on screen — the animation happened, but off in the corner of your eye.
   site.js gives it its own observer, which starts it once its top is 85% of
   the way down the viewport.

   The two properties get different easing on purpose. The site's --ease is
   near-expo, so almost all of it happens in the first third; that suits the
   rise, which should settle, but it would make a three-second fade look like
   a half-second one. The opacity gets a gentler curve so the fade is actually
   perceptible across the whole three seconds. */
.wall-say{opacity:0;transform:translateY(44px);
  transition:opacity 3s cubic-bezier(.33,0,.2,1),
             transform 3s var(--ease)}
.wall-say.in{opacity:1;transform:none}
/* On a big monitor the line is lost among pictures that have grown with the
   screen; the clamp above has long since hit its 22px ceiling. Laptop and
   phone sizes stay as they are. */
@media(min-width:2200px){.wall-say{font-size:28.6px}}

/* Not covered by the site's .r reduced-motion rule any more, so it needs its
   own — otherwise a visitor with reduced motion gets a permanently blank cell
   if the script fails to run. */
@media (prefers-reduced-motion:reduce){
  .wall-say{opacity:1!important;transform:none!important}
}

/* Wider than a laptop the wall opens out and runs closer to the edges — more
   of the year visible at once, which is the whole argument. Six columns, not
   seven: thirty slots divide by six. */
/* Wider than a laptop the wall runs closer to the edges. The column count
   stays at four, so the pictures get bigger rather than more numerous. */
@media (min-width:1800px){
  .wall{max-width:none;padding-inline:clamp(28px,3vw,64px)}
}
@media (max-width:900px){
  .wall-grid{--wc:2}
  /* Two columns leaves no room to hold a line off-centre, so the type stops
     being placed and simply takes its turn in the flow. */
  .wall-say{grid-column:auto;grid-row:auto}
}

/* Under reduced motion the clip stays in place and holds its poster frame —
   hiding it would leave a hole in the wall. site.js does the pausing; CSS
   cannot stop an autoplaying video. */

/* Dots between the three claims, so they read as a list rather than three
   loose phrases the flex gap happens to have separated. The separator lives
   on the second and third spans, not between them as its own element, so a
   wrap never leaves a dot stranded at the end of a line. */
.meta span + span::before{content:'\00B7';margin-inline-end:24px;opacity:.5}

/* Footer contact. The label stays in the uppercase .lab voice; the address
   and the number do not — an email set in capitals reads as shouting and is
   harder to copy down correctly. */
footer .brand .contact{line-height:1.85}
footer .brand .contact a{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:15px;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
footer .brand .contact a:hover,footer .brand .contact a:focus-visible{
  color:var(--ember);border-bottom-color:var(--ember)}

/* Eight links plus the enquiry pill stop fitting somewhere around 900px, and
   .navlinks clips rather than wraps — so the first thing to disappear was
   Enquire, the one link that has a job to do. Below this the burger and
   .navmenu take over. Both already existed; they were only being used for
   the scrolled-down mini state, so this is the same machinery earlier.
   (Was 820 with seven links; Blog moved it. Home makes nine, which still fit above 900 with the tighter spacing.) */
@media (max-width:900px){
  .navlinks{opacity:0;max-width:0;pointer-events:none;padding-right:0;margin:0;
    overflow:hidden}
  /* .navlinks carried the margin-left:auto that pushed the right-hand end of
     the bar over. With it collapsed the burger has to take that job on, or it
     ends up sitting against the logo. (.nav.mini never needed this — it
     shrinks .navinner to 52px, so there is nothing to push.) */
  .burger{opacity:1;max-width:52px;margin-left:auto}
}

/* The burger only ever showed in the scrolled-down mini state, which sits on
   paper, so it never needed a colour for the transparent bar over a dark
   hero — its lines are var(--ink) and would have been invisible there. Now
   that a narrow screen shows it at the top of the page, it does. */
.nav.bar .burger i,
.nav.bar .burger i::before,
.nav.bar .burger i::after{background:#fff}
.nav.bar.ink .burger i,
.nav.bar.ink .burger i::before,
.nav.bar.ink .burger i::after{background:var(--ink)}

/* ── Enquiry form (rendered by the CRM's embed script) ───────────────────
   embed.js builds real elements in this page rather than an iframe, so the
   form is ours to style. Its own base sheet is single-class and deliberately
   low specificity, so everything here simply wins.

   No height floor any more, and no !important: without an iframe there is
   nothing to measure and nothing to collapse. */
.crm-form{margin-top:clamp(26px,4vh,44px);max-width:560px;margin-inline:auto;text-align:left}

.checrm-field{margin:0 0 clamp(16px,2.4vh,22px)}

.checrm-label{font-family:var(--label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);margin-bottom:8px}

.crm-form input:not([type=checkbox]):not([type=radio]),
.crm-form select,
.crm-form textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.crm-form textarea{min-height:132px;resize:vertical;line-height:1.55}

.crm-form input:focus,.crm-form select:focus,.crm-form textarea:focus{
  outline:none;border-color:var(--ember);background:#fff}
.crm-form input::placeholder,.crm-form textarea::placeholder{color:rgba(35,31,32,.34)}

.checrm-help{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);opacity:1}
.checrm-error{font-family:var(--label);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-2)}

/* The submit button is the site's .btn, restated — the markup comes from the
   CRM so it cannot carry that class. */
.checrm-submit{display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(20px,3vh,32px);padding:15px 28px;border:0;border-radius:90px;
  background:var(--ember);color:#fff;cursor:pointer;
  font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .45s var(--ease),background .3s var(--ease)}
.checrm-submit:hover{transform:translateY(-3px);background:var(--ember-2)}
.checrm-submit:disabled{opacity:.55;cursor:default;transform:none}

.checrm-success{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);
  line-height:1.3;color:var(--ink);padding:clamp(20px,3vh,30px) 0}

/* Google's autocomplete list is appended to <body>, outside this form, so it
   is styled from the top level rather than under .crm-form. */
.pac-container{font-family:var(--sans);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 34px rgba(35,31,32,.12);margin-top:4px}
.pac-item{padding:8px 12px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line-soft)}
.pac-item:first-child{border-top:0}
.pac-item-query{color:var(--ink)}

.crm-alt{margin-top:clamp(16px,2.4vh,24px);font-family:var(--label);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);
  text-align:center}
.crm-alt a{color:var(--ember);text-decoration:none;border-bottom:1px solid var(--line)}
.crm-alt a:hover,.crm-alt a:focus-visible{border-bottom-color:var(--ember)}

/* ── /hello/ ─────────────────────────────────────────────────────────────
   The page a couple lands on straight after enquiring. Everything here reuses
   the site's own components — .lede, .kick, .ticks, .meta — so only the two
   things with no existing equivalent are defined: the picture strip and the
   sign-off. It has to read as one screen and a bit, so the spacing is tighter
   than a normal section's. */
.hello .ticks{margin-top:clamp(22px,3vh,30px);max-width:560px;margin-inline:auto;text-align:left}
.hello .ticks li{font-size:15px}

/* Four cards rather than a dotted line of prices. A price someone is weighing
   up wants room around it; a run-on strip reads as small print. */
.pricecards{margin-top:clamp(18px,2.4vh,26px);display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.pcard{padding:clamp(18px,2.4vw,26px) clamp(14px,1.8vw,20px);
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.42)}
/* No figures here. They have just enquired -- the page's job is to say what
   exists, and the number belongs in the reply, where it comes with the answer
   to whether the date is even free. */
.pc-name{margin:0;font-family:var(--display);font-size:clamp(17px,1.75vw,21px);
  line-height:1.25;letter-spacing:-.004em;color:var(--ink)}
.pc-note{margin:8px 0 0;font-family:var(--sans);font-size:13px;line-height:1.45;
  color:var(--ink-2)}

/* The only genuine unknown they have is when they will hear back, so it is
   answered plainly rather than left to be worried about. */
.nextsteps{margin:clamp(16px,2.2vh,22px) auto 0;padding:0;list-style:none;
  display:grid;gap:10px;counter-reset:s;
  /* The section centres its children, so without a measure and a left
     alignment the numbers ended up stranded at the far edge with the text
     floating in the middle. */
  max-width:460px;text-align:left}
.nextsteps li{counter-increment:s;position:relative;padding-left:34px;
  font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.nextsteps li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:21px;height:21px;border-radius:50%;background:var(--ember);color:#fff;
  font-family:var(--label);font-size:9px;display:grid;place-items:center}
.nextsteps b{font-weight:400;color:var(--ink);font-family:var(--label);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-right:8px}

@media (max-width:820px){
  .pricecards{grid-template-columns:repeat(2,1fr)}
}

/* A face, and it goes at the top. They have just written to a stranger and are
   now waiting, so the page opens with the person who will be replying and the
   promise that he will -- not with a headline standing on its own. The old
   six-image strip that used to close the page is gone; it was six more
   photographs after forty-five seconds of photographs. */
.hellohero .hh-me{display:block;width:clamp(104px,10.5vw,146px);aspect-ratio:3/4;
  object-fit:cover;margin:0 auto clamp(18px,2.6vh,28px);border-radius:3px;
  box-shadow:0 12px 34px rgba(35,31,32,.16)}
.hellohero h1{font-size:clamp(30px,4.2vw,56px);line-height:1.14;max-width:15ch}
.hellohero .hh-line{margin:clamp(15px,2.1vh,23px) auto 0;max-width:36ch;
  font-family:var(--display);font-size:clamp(16px,1.8vw,21.5px);
  line-height:1.5;color:var(--ink-2)}
.hellohero .hh-line em{font-family:var(--accent);font-style:italic;color:var(--ember)}

/* The closing note and the two ways to reach me, which is what the bottom of
   this page is actually for. */
.hello-end{margin:clamp(34px,5vh,58px) auto 0;max-width:56ch;text-align:center}
.hello-end p{margin:12px 0 0;font-family:var(--sans);font-size:15px;
  line-height:1.65;color:var(--ink-2)}
.hello-end .kick{margin:0}
.hello-end .hello-ways{justify-content:center;margin-top:clamp(22px,3vh,30px)!important}
.hello-ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px!important}
.hello-ways a{font-family:var(--label);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:10px 18px;border:1px solid var(--line);border-radius:90px;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.hello-ways a:hover,.hello-ways a:focus-visible{border-color:var(--ember);color:var(--ember)}

/* Sits with the prices, where scarcity actually means something. */
.hello-few{margin:12px 0 0;font-family:var(--accent);font-style:italic;
  font-size:clamp(15px,1.6vw,18px);line-height:1.5;color:var(--ink-2)}

/* A line of type laid across the top edge of the film -- half on the page,
   half on the frame -- so the film reads as part of the page rather than a
   panel dropped onto it. It clears the moment the film rolls and only comes
   back at the end, because pausing mid-film would drop it onto a photograph.
   .vid is already position:relative, so nothing here changes the box. */
.vid.film{margin-top:clamp(44px,6.5vh,78px)}
.vid.film .filmlabel{position:absolute;z-index:3;left:0;right:0;top:0;margin:0;
  transform:translateY(-50%);text-align:center;pointer-events:none;
  font-family:var(--label);font-size:clamp(12px,1.52vw,19px);line-height:1.1;
  text-transform:uppercase;letter-spacing:.15em;color:#a49b90;
  /* Paper-coloured halo. Invisible against the poster, which is paper anyway,
     and the only thing keeping the words legible when the film is paused on a
     dark photograph. */
  text-shadow:0 0 16px rgba(253,251,248,.92),0 0 5px rgba(253,251,248,.95);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.vid.film .filmlabel span{position:relative;display:inline-block}
.vid.film.playing .filmlabel{opacity:0;transform:translateY(-50%) translateY(-10px)}

/* A pencil arrow leaving the end of the words and curling down at the play
   button. It hangs off the end of the text on position:absolute so it adds no
   height -- the line has to stay exactly half on the page and half on the
   frame, and anything in normal flow here would re-centre it. */
.filmarrow{position:absolute;left:100%;top:.05em;
  width:clamp(96px,15.3vw,150px);height:auto;overflow:visible;
  margin-left:clamp(2px,.5vw,7px);color:var(--ink-2);
  filter:drop-shadow(0 0 7px rgba(253,251,248,.9))}
/* The widescreen film puts the play mark a little below and left of the words;
   the portrait one puts it a long way straight down. Same gesture, but a badly
   stretched copy of one drawing reads as a stretched drawing, so there are two. */
.filmarrow.v{display:none}
.vid.film.is-vertical .filmarrow.h{display:none}
.vid.film.is-vertical .filmarrow.v{display:block}
.filmarrow{color:#948b80}

/* Drawn, held, then rubbed out and drawn again. pathLength="100" means the
   dash maths is in percentages of the line rather than in units nobody can
   check by eye. */
.fa-wipe{stroke-dasharray:100;stroke-dashoffset:100}
.fa-head{opacity:0}
.vid.film.drawn .fa-wipe{animation:faWipe 7s var(--ease) infinite}
.vid.film.drawn .fa-head{animation:faHead 7s var(--ease) infinite}
.vid.film.drawn .fa-ink {animation:faInk  7s linear infinite}
/* 7s: about 1.8s to draw, three and a half seconds holding, then it fades and
   goes again. Slow enough to watch, long enough between passes that it is not
   flickering at someone trying to read the page. */
@keyframes faWipe{0%{stroke-dashoffset:100}26%,100%{stroke-dashoffset:0}}
@keyframes faHead{0%,24%{opacity:0}31%,84%{opacity:1}93%,100%{opacity:0}}
@keyframes faInk {0%{opacity:0}4%,84%{opacity:1}93%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .vid.film .filmlabel{transition:none}
  .fa-wipe{stroke-dashoffset:0}
  .fa-head{opacity:1}
  .vid.film.drawn .fa-wipe,.vid.film.drawn .fa-head,.vid.film.drawn .fa-ink{animation:none}
}

/* The drawing arrives above the play mark and points straight down at it,
   which is the right gesture on both cuts -- only the scale changes, because
   the portrait film is narrower. */
/* Narrower than it looks like it should be: the drawing runs a long way to the
   right of where it is anchored, and at 20vw its widest point sat a pixel off
   the frame edge on a 375-wide phone. */
.vid.film.is-vertical .filmarrow{width:clamp(54px,17vw,68px)}

/* ── Mobile-only adjustments ──────────────────────────────────────────────
   Changes asked for while working at a narrow width, kept together so they
   are findable rather than scattered through the file. The breakpoint matches
   the editor's own threshold, so anything it tags MOBILE ONLY belongs here.
   Nothing in this block affects the desktop layout. */
@media (max-width:900px){

  /* The intro line bottoms out at its clamp minimum on a phone, where 8px is
     under the size this typeface stays legible at. */
  .introlab.caps{font-size:9.2px}

  /* Four of the wall's pages come out on a narrow screen. Fourteen stills
     becomes ten, which with the clip and the line is twelve cells — exactly
     six rows of two, so the grid stays complete rather than leaving a ragged
     last row. Targeted by filename: the nth-of-type positions these were
     picked by shift every time a picture is added or removed. */
  .wall-grid img[src*="/w14-"],
  .wall-grid img[src*="/w17-"],
  .wall-grid img[src*="/w26-"],
  .wall-grid img[src*="/w32-"]{display:none}

  /* Reframed for the narrow crop. A 2:3 window takes a different slice of a
     landscape frame than a wide one does, so the desktop framing puts the
     subject off the edge here.

     !important is doing real work rather than papering over specificity: the
     desktop values are inline styles, written by the editor when the picture
     was placed, and an inline style outranks any stylesheet rule. This is the
     one thing that can beat it. */
  .pxb-img[src*="ben-liv-573"]{object-position:57% 28%!important}
  .pxb-img[src*="brinsop-court-wedding-photography-1"]{object-position:40% 22%!important}
  .pxb-img[src*="golden-hour-wedding-photos-1"]{object-position:48% 18%!important}

  /* No inline style on this one, so no !important needed. */
  .stories img[src*="w_nj"]{object-position:83.3% 50%}

  /* The strip's heading sat too far from the top edge of its band. Only the
     top is halved — padding-block would have taken the bottom with it. */
  .strip{padding-top:clamp(29px,5vh,55px)}

  /* .lede is a flat 16.5px sitewide with no clamp, so unlike the headings it
     never came down on a phone. All 56 of them now do.

     No !important: exactly one lede carries an inline font-size (12.9px, on
     the home page) and it is already smaller than this, so leaving the inline
     rule to win is the right outcome rather than an oversight. */
  .lede{font-size:13.5px}
}


/* ================= THE HELLO FILM =================
   Two different edits rather than one cropped: 16:9 on a desktop, a shorter
   9:16 on a phone. The height attribute on <video> is only a presentational
   hint, so aspect-ratio needs height:auto beside it or the element keeps the
   attribute's proportions and letterboxes itself.

   Native controls are off. Before anyone presses play there is one thing on
   screen -- a play button. Once it is running the bar appears on hover and on
   keyboard focus, and goes away again when the pointer leaves. */
/* The ground the film itself renders on, not black. A <video> sized by
   aspect-ratio rarely lands on a whole pixel, and whatever is behind it shows
   as a hairline down one edge -- against #231f20 that reads as a black line,
   against the film's own paper it is invisible. */
.filmwrap{position:relative;line-height:0;background:#f5f5f0;overflow:hidden}
.vid.film video{aspect-ratio:16/9;height:auto;width:100%;display:block;background:#f5f5f0}
.vid.film.is-vertical{max-width:min(100%,430px)}
.vid.film.is-vertical video{aspect-ratio:9/16}

.filmbtn{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;
  background:none;cursor:pointer}
/* No scrim. Dimming the frame to advertise a button makes the film look like a
   panel laid over the page instead of part of it, and the first frame is the
   one thing worth seeing before anyone presses anything. */
.filmbtn svg{width:clamp(52px,5.4vw,74px);height:auto;fill:#fff;
  /* Two shadows, not one. The soft wide shadow gives depth over a photograph;
     the tight dark one draws an edge, without which a white triangle vanishes
     on the paper card the film opens on. */
  filter:drop-shadow(0 0 1.5px rgba(35,31,32,.6))
         drop-shadow(0 3px 14px rgba(20,16,14,.55));transition:transform .25s ease}
.filmbtn:hover svg{transform:scale(1.07)}
.filmwrap.playing .filmbtn,.filmwrap.done .filmbtn{display:none}
.filmwrap.done .filmbtn{display:grid}

.filmbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;
  padding:26px 18px 14px;opacity:0;pointer-events:none;transition:opacity .2s ease;
  background:linear-gradient(0deg,rgba(20,16,14,.62),rgba(20,16,14,0))}
.filmwrap.playing:hover .filmbar,
.filmwrap.playing:focus-within .filmbar{opacity:1;pointer-events:auto}
.filmbar button{background:none;border:0;padding:4px;cursor:pointer;color:#fdfbf8;line-height:0}
.filmbar svg{width:19px;height:19px;fill:currentColor}
.filmbar .track{flex:1;height:3px;background:rgba(253,251,248,.32);cursor:pointer;position:relative}
.filmbar .track i{position:absolute;inset:0 auto 0 0;background:#fdfbf8;width:0}
.filmbar time{color:#fdfbf8;font:400 11px/1 var(--sans,system-ui);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
@media (prefers-reduced-motion:reduce){
  .filmbtn,.filmbtn span,.filmbar{transition:none}
}

/* ---------- couples portal ----------
   /couples/<slug>/, served by couples/portal.php from edit/couples/<slug>.json.
   Unlisted, and behind an email. The timeline is a horizontal track of dots
   on a line; the track scrolls, the panel underneath shows the chosen stage,
   and the small arrows step through it. */
.cpl .phero .cpl-count{margin:clamp(14px,2vh,22px) auto 0;font-family:var(--label);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.cpl .phero .cpl-count b{font-weight:inherit;color:var(--ember)}

/* the gate */
.cpl-gate{max-width:420px;margin:0 auto;text-align:left}
.cpl-gate .kick{display:block;margin-bottom:8px}
.cpl-gate input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:4px;
  background:rgba(255,255,255,.6);font-family:var(--sans);font-size:18px;color:var(--ink)}
.cpl-gate input:focus{outline:2px solid var(--ember);outline-offset:2px;border-color:transparent}
.cpl-gate .btn{margin-top:18px}
.cpl-err{margin-top:12px;color:var(--ember-2);font-size:16px}
.cpl-small{margin-top:22px;font-size:14.5px;color:var(--ink-2)}
.cpl-small a{color:inherit}

/* the five */
.cpl-steps{list-style:none;margin:clamp(30px,4.4vh,52px) auto 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.2vw,30px);text-align:left}
@media(max-width:980px){.cpl-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cpl-steps{grid-template-columns:1fr 1fr;gap:18px 14px}}
.cpl-steps li{position:relative;padding-top:16px;border-top:1px solid var(--line)}
.cpl-steps .n{display:block;font-family:var(--label);font-size:10px;letter-spacing:.26em;
  color:var(--ember);margin-bottom:8px}
.cpl-steps h3{font-size:clamp(17.8px,1.7vw,21px);line-height:1.15}
.cpl-steps p{margin-top:7px;color:var(--ink-2);font-size:15.4px;line-height:1.5}
.cpl-steps li.done .n::after{content:'\2713';margin-left:8px;color:var(--sage)}
.cpl-steps li.done h3{color:var(--ink-2)}

/* the timeline */
.tl{margin-top:clamp(28px,4.4vh,50px);text-align:left}
.tl-bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.tl-pos{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);font-variant-numeric:tabular-nums}
.tl-pos .tl-n{color:var(--ember)}
.tl-scroll{margin-top:14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:6px 0 4px;outline:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.tl-scroll::-webkit-scrollbar{display:none}
.tl-scroll:focus-visible .tl-pt.on .tl-dot{outline:2px solid var(--ink);outline-offset:4px}
.tl-track{position:relative;list-style:none;margin:0;padding:0 calc(50% - 90px);
  display:flex;width:max-content;min-width:100%}
/* the line: through the dots, edge to edge of the track */
.tl-track::before{content:'';position:absolute;left:0;right:0;top:33px;
  height:1px;background:var(--ink);opacity:.35}
.tl-pt{flex:none;width:clamp(150px,17vw,200px);position:relative}
.tl-pt button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  width:100%;text-align:center;-webkit-tap-highlight-color:transparent}
.tl-when{display:block;height:16px;line-height:16px;font-family:var(--label);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease)}
.tl-dot{display:block;width:14px;height:14px;margin:10px 0;border-radius:90px;
  border:1.5px solid var(--ink);background:var(--warm);position:relative;z-index:1;
  transition:transform .4s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.tl-pt.big .tl-dot{width:18px;height:18px;margin:8px 0}
.tl-pt.past .tl-dot{background:var(--ink)}
.tl-pt.next .tl-dot,.tl-pt.today .tl-dot{border-color:var(--ember);background:var(--ember);
  box-shadow:0 0 0 4px rgba(163,93,36,.18)}
.tl-pt.today .tl-dot{animation:tlpulse 2.4s var(--ease) infinite}
@keyframes tlpulse{0%,100%{box-shadow:0 0 0 4px rgba(163,93,36,.18)}50%{box-shadow:0 0 0 9px rgba(163,93,36,.06)}}
.tl-lab{display:block;font-family:var(--display);font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.2;
  color:var(--ink-2);padding:0 8px;transition:color .3s var(--ease)}
.tl-pt.past .tl-lab{color:var(--sage)}
.tl-pt button:hover .tl-lab,.tl-pt button:hover .tl-when{color:var(--ember)}
.tl-pt.on .tl-lab{color:var(--ink)}
.tl-pt.on .tl-when{color:var(--ember)}
.tl-pt.on .tl-dot{transform:scale(1.35)}
.tl-pt.on.past .tl-dot{background:var(--ember);border-color:var(--ember)}
.tl-ruler{margin-top:10px;max-width:280px;margin-inline:auto}
@media(prefers-reduced-motion:reduce){.tl-pt.today .tl-dot{animation:none}.tl-dot{transition:none}}

/* the panel under the track */
.tl-panel{position:relative;margin:clamp(26px,4vh,40px) auto 0;max-width:62ch}
.tl.js .tl-item{display:none}
.tl.js .tl-item.on{display:block;animation:tlin .6s var(--ease)}
.tl-item + .tl-item{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.tl.js .tl-item + .tl-item{margin:0;padding:0;border:0}
@keyframes tlin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tl-meta{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;
  font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
.tl-who{padding:4px 9px;border:1px solid currentColor;border-radius:90px}
.tl-who.who-you{color:var(--ember)}
.tl-who.who-me{color:var(--sage)}
.tl-who.who-both{color:var(--ink-2)}
.tl-state{color:var(--sage)}
.tl-state.now{color:var(--ember)}
.tl-item h3{margin-top:14px;font-size:clamp(20px,2.2vw,27px);line-height:1.2}
.tl-item p{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.62}
.tl-item p a{color:var(--ink)}
.tl-links{display:flex;gap:8px 22px;flex-wrap:wrap}
.tl-links a{font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.tl-links a:hover{color:var(--ember)}
.tl-links a .ar{transition:transform .45s var(--ease)}
.tl-links a:hover .ar{transform:translateX(4px)}

/* paperwork + good to know */
.cpl-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);text-align:left}
@media(max-width:820px){.cpl-cols{grid-template-columns:1fr;gap:48px}}
.cpl-col h2{margin-top:12px;font-size:clamp(20px,2.2vw,27px);line-height:1.2}
.cpl-col .lede{margin-left:0;font-size:17px}
.cpl-links{list-style:none;margin:22px 0 0;padding:0}
.cpl-links li{padding:14px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.cpl-links li:last-child{border-bottom:1px solid var(--line)}
.cpl-links li>a,.cpl-soon{font-family:var(--display);font-size:18.5px;color:var(--ink);text-decoration:none;
  display:inline-flex;gap:8px;align-items:center}
.cpl-links li>a:hover{color:var(--ember)}
.cpl-links li>a .ar{transition:transform .45s var(--ease)}
.cpl-links li>a:hover .ar{transform:translateX(4px)}
.cpl-links li>span:last-child{font-size:14.5px;color:var(--sage)}
.cpl-links.soon .cpl-soon{color:var(--ink-2)}
.cpl-note{margin-top:22px;padding:18px 20px;background:var(--warm);border-left:2px solid var(--ember)}
.cpl-note p{color:var(--ink-2);font-size:16.5px}
.cpl-note p+p{margin-top:10px}

/* worth a read */
.cpl-grid{margin-top:clamp(28px,4.4vh,50px);text-align:left}
a.cpl-card{text-decoration:none;color:inherit;display:block}
a.cpl-card:hover h3{color:var(--ember)}
a.cpl-card h3{transition:color .3s var(--ease)}

/* gallery */
.cpl-gal .cpl-small{margin-top:clamp(34px,5vh,60px);font-size:13px;color:var(--sage)}

/* photography & film: the embedded films and the link from pricing */
.films{display:grid;gap:clamp(28px,4.5vh,56px);margin-top:clamp(34px,5vh,60px);max-width:1040px;margin-inline:auto;text-align:left}
.films .fx{margin:0}
.film-frame{position:relative;width:100%;padding-top:42.529%;background:var(--ink);overflow:hidden}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.films .fx .cap a{color:inherit;text-decoration:none}
.films .fx .cap a:hover{color:var(--ember)}
.film-cta .btns{justify-content:flex-start}
.film-cta .film-still{display:block}
/* film page: a looping mix of clips over the hero still; the still stays
   underneath as the poster and for reduced motion */
.hero-img > .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-img > .hero-film.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-img > .hero-film{display:none}}

/* ==================== about, take two (/about-2/) ====================
   A rebuild of the Showit about page in this site's own faces, kept beside
   the live about page so the parts Che likes can be lifted across. Scoped
   under .ab2 so none of it leaks. */
.ab2 .ab2-hero{padding-bottom:clamp(30px,4vh,48px)}
.ab2-trio{margin-top:0;max-width:85%;margin-inline:auto}
.ab2-trio .clip{clip-path:none}
.ab2-trio .clip img{transform:none}
.ab2-trio img{filter:grayscale(1) contrast(1.04)}
.ab2-mid{position:relative}
.ab2-mid .clip::after{content:'';position:absolute;inset:0;background:rgba(20,17,16,.18)}
.ab2-mid .clip{position:relative;display:block}
.ab2-word{position:absolute;left:0;right:0;top:11%;margin:0;text-align:center;color:#fff;
  font-family:var(--label);font-weight:400;font-size:clamp(14.4px,1.97vw,25.7px);letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;text-shadow:0 2px 24px rgba(20,17,16,.45);z-index:2}
.ab2-caps{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin:clamp(16px,2.4vh,26px) auto 0;max-width:85%;text-align:left}
.ab2-caps .lab{font-size:10px}
.ab2-caps .lab{max-width:30ch;line-height:1.9}
.ab2-caps .ab2-capr{text-align:right;color:var(--ink-2)}
.ab2-hand{font-family:var(--accent);font-style:italic;font-size:clamp(16px,1.5vw,21px);line-height:1.35;color:var(--ink-2);max-width:30ch;text-align:right;margin:0}
/* narrow: two portraits, not three, and the two captions share one line */
@media(max-width:700px){.ab2-trio figure:first-child{display:none}.ab2-trio{max-width:420px}
  .ab2-caps{flex-direction:row;max-width:420px;gap:16px}.ab2-caps .lab{max-width:46%;font-size:9px;line-height:1.7}.ab2-caps .ab2-capr{text-align:right}}
.ab2-intro{padding-top:calc(clamp(40px,7vh,90px) - 10px);padding-bottom:calc(clamp(64px,11vh,130px) + 10px)}
.ab2-state{font-size:clamp(10.5px,1.1vw,12.5px);letter-spacing:.22em;line-height:1.8;color:var(--ink);max-width:60ch;margin-inline:auto}
.ab2-intro .lede{margin-top:clamp(18px,2.6vh,28px);max-width:62ch;line-height:1.3;font-size:17.6px}

/* values: the list stands on the paper, the film runs behind the top of it */
.ab2-values{position:relative;padding:clamp(120px,14vw,210px) 0 clamp(56px,9vh,110px);overflow:hidden;background:var(--paper);--film:clamp(380px,44vw,840px);--vtop:clamp(120px,14vw,210px)}
.ab2-vid{position:absolute;left:var(--gut);right:var(--gut);top:0;height:var(--film);z-index:0}
.ab2-vid video{width:100%;height:100%;object-fit:cover;display:block}
.ab2-vgrid{position:relative;z-index:1;display:grid;grid-template-columns:calc(50% - clamp(120px,13.2vw,190px)) 1fr;gap:clamp(30px,5vw,80px);align-items:start;text-align:left}
.ab2-vlist .lab{color:var(--ink);padding-left:clamp(24px,4vw,56px)}
.ab2-values .ab2-vlist .lab{color:var(--ink)}
.ab2-vlist ol{list-style:none;margin:0;padding:0}
.ab2-vlist{margin-top:clamp(90px,8.5vw,160px)}
.ab2-vlist > .lab{margin-bottom:18px}
.ab2-vlist li{display:flex;align-items:center;gap:12px;height:clamp(40px,3.5vw,52px);padding:0 0 0 clamp(24px,4vw,56px);color:var(--ink);line-height:1}
.ab2-vlist li:nth-child(even){padding-left:clamp(44px,7vw,96px)}
.ab2-vlist li .n{font-family:var(--label);font-size:8.5px;letter-spacing:.14em;color:var(--sage);transform:translateY(-.9em);display:inline-block}
.ab2-vlist li.up{font-family:var(--label);font-size:clamp(18px,2.16vw,28.9px);letter-spacing:.1em;text-transform:uppercase}
/* the italics sit low against the caps: lifted a third of their size (10px at full size), which scales with the type on a phone */
.ab2-vlist li.it{font-family:var(--accent);font-style:italic;font-size:clamp(20px,2.3vw,30.7px);letter-spacing:.005em;transform:translateY(-.33em)}
/* the first few sit over the film, so they go white until the list clears it */
/* which values sit over the film depends on the screen, so the page script
   marks them (.over) after layout rather than guessing with nth-child */
.ab2-vlist li.over{color:#fff;text-shadow:0 1px 16px rgba(20,17,16,.5)}
.ab2-vlist li.over .n{color:rgba(255,255,255,.8)}
.ab2-values .ab2-vlist > .lab{color:#fff}
/* the paragraph starts where the film ends, on the paper */
.ab2-vtext{padding-top:calc(var(--film) - var(--vtop) + 28px)}
.ab2-vtext p:not(.lab){margin-top:14px;font-size:16.8px;line-height:1.5;color:var(--ink-2);max-width:51ch}
.ab2-vtext .lab{color:var(--ink)}
.ab2-btn{display:inline-block;margin-top:clamp(24px,3.6vh,40px);padding:12px 26px;border:1px solid var(--ink);border-radius:2px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  transition:background .35s var(--ease),color .35s var(--ease)}
.ab2-btn:hover,.ab2-btn:focus-visible{background:var(--ink);color:var(--paper)}
.ab2-vlist .ab2-btn{margin-left:clamp(24px,4vw,56px)}
/* narrow: the film is a band above the list rather than behind it, so
   nothing has to be white and nothing can vanish against the paper */
@media(max-width:820px){.ab2-vgrid{grid-template-columns:1fr;padding-top:calc(var(--film) - var(--vtop) + 20px)}.ab2-values{--film:clamp(220px,52vw,360px);--vtop:40px;padding-top:40px}.ab2-vtext{padding-top:0}
  .ab2-vlist li.over{color:var(--ink);text-shadow:none}.ab2-vlist li.over .n{color:var(--sage)}.ab2-values .ab2-vlist > .lab{color:var(--ink)}}

/* meet */
.ab2-meet{text-align:left}
/* the words and the film sit as a centred pair; the gap is the whole distance between them */
.ab2-mgrid{display:grid;grid-template-columns:minmax(0,48ch) minmax(0,476px);justify-content:center;gap:clamp(60px,14vw,206px);align-items:stretch}
/* MEET hangs in the margin; Che and every paragraph line up to its right */
/* the label and the button are pushed to the foot of the column, so the button finishes level with the film beside it */
.ab2-mtext{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr auto;column-gap:14px;align-items:baseline}
.ab2-mtext .ab2-fit{align-self:end}
.ab2-mtext > .btns{grid-column:1/-1;justify-content:flex-start;margin:22px 0 0}
.ab2-mtext > .btns .ab2-btn{margin-top:0}
.ab2-mtext .ab2-meet-h{display:contents}
.ab2-mtext .ab2-meet-h .lab{grid-column:1;align-self:baseline}
.ab2-mtext .ab2-meet-h .nm{grid-column:2}
.ab2-mtext > p:not(.ab2-meet-h){grid-column:2}
.ab2-meet-h{margin:0}
.ab2-meet-h .lab{font-size:13.4px}
.ab2-meet-h .nm{font-family:var(--accent);font-style:italic;font-weight:300;font-size:clamp(30px,3.4vw,46px);letter-spacing:.02em;color:var(--ink)}
.ab2-mtext p:not(.lab):not(.ab2-meet-h){margin-top:16px;font-size:16.8px;line-height:1.5;color:var(--ink-2);max-width:46ch}
.ab2-fit{margin-top:clamp(28px,4vh,44px)!important;line-height:1.9;color:var(--sage);max-width:40ch;font-size:10.5px}
.ab2-mfilm{margin:0;position:relative;width:min(100%,476px);justify-self:center}
.ab2-mfilm video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--tint)}
.ab2-mfilm .ab2-say{display:block;max-width:none;width:100%;margin-top:10px;font-family:var(--label);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-style:normal;line-height:1.7;text-align:left}
.ab2-meet .btns{justify-content:center;margin-top:clamp(40px,6vh,70px)}
.ab2-meet .btns .ab2-btn{margin-top:0}
@media(max-width:820px){.ab2-mgrid{grid-template-columns:1fr;gap:30px}.ab2-mfilm{max-width:none}}

/* kind words: the photograph edge to edge, the quote on a card in its middle */
.ab2-kind{position:relative;min-height:min(92svh,820px);display:grid;place-items:center;overflow:hidden;padding:clamp(40px,8vh,90px) var(--gut)}
.ab2-kind > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1)}
.ab2-kind::before{content:'';position:absolute;inset:0;background:var(--paper);z-index:0}
.ab2-kind::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.15);z-index:1}
.ab2-kind > img{z-index:1}
.ab2-card{position:relative;z-index:2;margin:0;max-width:520px;padding:clamp(26px,3.6vw,46px) clamp(24px,3.4vw,44px);
  background:url('/uploads/2026/08/brinsop-court-wedding-photography-1-2000.jpg') 50% 20%/cover;color:#fff;text-align:center;
  box-shadow:0 10px 40px rgba(35,31,32,.22);filter:grayscale(1)}
.ab2-card::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.22);z-index:0}
.ab2-card > *{position:relative;z-index:1}
.ab2-card .lab{color:rgba(255,255,255,.9)}
.ab2-card .stars{margin:14px 0 0;color:#fff;font-size:13px;letter-spacing:.3em;text-indent:.3em}
.ab2-card .q{margin-top:16px;font-family:var(--quote);font-style:italic;font-size:clamp(16.5px,1.5vw,21px);line-height:1.3;letter-spacing:-.005em;color:#fff}
.ab2-card cite{display:block;margin-top:12px;font-family:var(--label);font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff}

/* dive into the blogs: three pictures, the words in the middle of them */
.ab2-dgrid{display:grid;grid-template-columns:1.05fr .9fr 1fr;grid-template-rows:auto auto;gap:clamp(18px,3vw,44px) clamp(18px,3vw,40px);align-items:start;text-align:left}
.ab2-d{display:block;text-decoration:none;color:inherit}
.ab2-d img{width:100%;height:auto;display:block}
.ab2-d .lab{display:block;margin-top:10px;font-size:8.5px}
.ab2-d.a{grid-column:1;grid-row:1/3;align-self:center}
.ab2-d.a img{aspect-ratio:3/4;object-fit:cover}
.ab2-d.b{grid-column:3;grid-row:1}
.ab2-d.c{grid-column:3;grid-row:2;max-width:78%}
/* three lines that step in from the left: ivy, canela, ivy */
.ab2-dh{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;margin:0;font-family:var(--display);font-size:clamp(22px,2.6vw,34px);letter-spacing:.015em;line-height:1.12;text-align:left;color:var(--sage)}
.ab2-dh span{display:block}
.ab2-dh span.iv{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0;font-size:.94em;line-height:1.05}
.ab2-dh span.ar{font-family:var(--label);font-size:.72em;letter-spacing:.22em;text-transform:uppercase;line-height:1.3}
.ab2-dh .l2{padding-left:1.4em;margin-top:.3em}
.ab2-dh .l3{padding-left:6.35em;margin-top:.72em}
@media(max-width:820px){.ab2-dgrid{grid-template-columns:1fr 1fr}.ab2-d.a{grid-column:1;grid-row:1}.ab2-dh{grid-column:2;grid-row:1}.ab2-d.b{grid-column:1;grid-row:2}.ab2-d.c{grid-column:2;grid-row:2;max-width:none}}
/* The composition Che made with the placement tool, as proportions of the
   page so it holds from a laptop to a big screen. Below 1100px the pictures
   go back to the plain grid and the words sit in their own column. */
.ab2-dh span.ar{font-size:1.02em}
/* four lines, nearly flush: dive / into / some / weddings, Arca and Ivy turn about */
.ab2-dh{color:var(--ink)}
.ab2-dh span{color:var(--ink);text-shadow:none;margin-top:.1em}
.ab2-dh .l2,.ab2-dh .l4{padding-left:.4em}
.ab2-dh .l3{padding-left:0}
.ab2-dh span.iv{font-size:1.25em;line-height:1}
@media(min-width:1100px){
  .ab2-dgrid{position:relative;--u:calc(100vw / 1440)}
  .ab2-d.a{transform:translateX(calc(150 * var(--u)))}
  .ab2-d.b{transform:translateX(calc(-96 * var(--u)))}
  .ab2-d.c{transform:translate(calc(-187 * var(--u)),calc(62 * var(--u)))}
  .ab2-dgrid .ab2-dh{transform:translate(calc(20 * var(--u)),calc(-107 * var(--u)));position:relative;z-index:2}
  .ab2-dh .l1{transform:translate(calc(-40 * var(--u)),calc(-26 * var(--u)))}
  .ab2-dh .l2{transform:translate(calc(70 * var(--u)),calc(-53 * var(--u)))}
  .ab2-dh .l3{transform:translate(calc(19 * var(--u)),calc(-58 * var(--u)))}
  .ab2-dh .l4{transform:translate(calc(70 * var(--u)),calc(-60 * var(--u)))}

  .ab2-dive{padding-bottom:calc(clamp(64px,11vh,130px) + 60px)}
}

/* the three lines arrive one after another with a short fade */
.ab2-dh span{opacity:0;transition:opacity 1.75s cubic-bezier(.25,.1,.25,1)}
.ab2-dh.in span{opacity:1}
/* a cascade: each word takes 1.75s and the next begins half a second after it */
.ab2-dh.in .l1{transition-delay:.1s}.ab2-dh.in .l2{transition-delay:.6s}.ab2-dh.in .l3{transition-delay:1.1s}.ab2-dh.in .l4{transition-delay:1.6s}

/* the instagram strip: a slow, endless walk to the left. Two identical rows
   in one track; the track slides one row's width and snaps back, which is
   invisible because the second row is standing where the first one was. */
.ab2-ig{position:relative;padding:0 0 clamp(50px,8vh,90px);overflow:hidden;text-align:center}
.ab2-igtrack{display:flex;width:max-content;animation:ab2walk 165s linear infinite}
.ab2-igrow{display:flex;gap:8px;padding-right:8px}
.ab2-igrow img{width:clamp(180px,16vw,260px);height:clamp(180px,16vw,260px);object-fit:cover;display:block;flex:none}
@keyframes ab2walk{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ab2-igtrack{animation:none}}
/* the line and the button sit in a paper circle that rises half way up into the strip */
/* the pill floats in the middle of the strip. No z-index on purpose: a
   stacking context here would isolate the pill's blend from the strip */
/* no transform either: a transform makes a layer of its own and the
   blend would see only that layer, not the photographs */
.ab2-igcta{position:absolute;left:0;right:0;top:0;height:clamp(180px,16vw,260px);display:grid;place-items:center;pointer-events:none}
.ab2-igcta .btns{pointer-events:auto;margin:0}
.ab2-igcta::before{display:none}
.ab2-igline{margin:0;font-size:9.5px;line-height:1.5;color:var(--ink)}
.ab2-ig .btns{justify-content:center}
/* a paper pill with the strip showing through the letters: the pill is the
   paper colour and texture, the text black, and the whole thing blended
   with 'lighten', so wherever the text is black the photographs behind win */
.ab2-ig .btn.ab2-igbtn{margin-top:0;font-size:12.2px;padding:14px 26px;gap:10px;letter-spacing:.18em;
  background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;
  color:#000;mix-blend-mode:lighten;box-shadow:none;isolation:auto}
.ab2-ig .btns{isolation:auto}
.ab2-ig .btn.ab2-igbtn:hover,.ab2-ig .btn.ab2-igbtn:focus-visible{background-color:#fff;transform:none}

/* ==================== the experience (/experience/) ====================
   The Showit wedding-experience page rebuilt in this site's faces. Scoped
   under .xp. */
.xp-script{font-family:var(--accent);font-style:italic;font-weight:300;font-size:clamp(17px,1.5vw,22px);color:var(--ink);margin:0}
.xp-script.sm{font-size:15px}
.xp-script.lg{font-size:clamp(20px,2vw,28px);text-align:center}
.xp-btn{display:inline-block;padding:12px 26px;border:1px solid var(--ink);border-radius:2px;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:background .35s var(--ease),color .35s var(--ease)}
.xp-btn:hover,.xp-btn:focus-visible{background:var(--ink);color:var(--paper)}
.xp-btn.light{border-color:rgba(255,255,255,.8);color:#fff}
.xp-btn.light:hover,.xp-btn.light:focus-visible{background:#fff;color:var(--ink)}
.xp-side{position:absolute;right:clamp(8px,1.2vw,20px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;white-space:nowrap;font-size:14px;color:var(--ink-2);z-index:2}
@media(max-width:820px){.xp-side{display:none}}

/* hero: the photograph inset from the edges, the words in its lower half */
.xp-hero{padding-top:clamp(84px,12vh,120px)}
.xp-herobox{position:relative;margin:0 var(--gut);height:min(86svh,900px);min-height:480px;overflow:hidden}
.xp-herobox img{position:absolute;left:0;right:0;top:-15%;width:100%;height:130%;object-fit:cover;object-position:50% 45%;will-change:transform}
.xp-herobox::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,19,12,.1),rgba(26,19,12,.42))}
/* the title in the middle of the picture, the sentence small beneath it */
.xp-herocopy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;text-align:center;padding:0 var(--gut)}
.xp-herocopy .xp-title{margin:0;color:#fff;font-family:var(--label);font-weight:700;font-size:clamp(16px,1.9vw,27.5px);letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;text-shadow:0 2px 24px rgba(20,17,16,.4)}
.xp-herocopy .xp-sub{margin:18px auto 0;max-width:46ch;color:#fff;font-family:var(--label);font-weight:700;font-size:clamp(10px,.93vw,13.4px);line-height:1.6;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 24px rgba(20,17,16,.4)}
.xp-herocopy .xp-sub em{font-family:var(--accent);font-style:italic;font-weight:300;font-size:1.3em;letter-spacing:0;text-transform:none}
.xp-index{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-top:clamp(28px,4vh,44px);padding-bottom:clamp(40px,7vh,80px);text-align:left}
.xp-idx ol{list-style:none;margin:10px 0 0;padding:0}
.xp-idx li{border-bottom:1px solid var(--line);padding:9px 0}
.xp-idx a{display:flex;align-items:baseline;gap:14px;text-decoration:none;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.xp-idx a:hover{color:var(--ember)}
.xp-idx .n{font-size:7.5px;color:var(--sage)}
.xp-state{max-width:40ch;text-align:right;line-height:1.9;color:var(--ink);font-size:10.5px;margin-top:clamp(16px,2.7vw,39px)}
@media(max-width:700px){.xp-index{flex-direction:column}.xp-state{text-align:left}}

/* the room: a full-bleed photograph with a dark card in the middle */
.xp-room{position:relative;min-height:min(100svh,900px);display:grid;align-items:center;justify-items:start;padding:clamp(60px,10vh,120px) var(--gut);overflow:hidden}
.xp-room > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-room::before{content:'';position:absolute;inset:0;background:rgba(20,17,16,.22)}
.xp-card{position:relative;z-index:1;max-width:560px;padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px);background:rgba(20,17,16,.6);color:#fff;text-align:left}
.xp-card .xp-script{color:#fff}
.xp-card h2{margin:8px 0 0;font-family:var(--label);font-weight:700;font-size:11.7px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase}
.xp-card .xp-script{margin-top:26px}
.xp-card .lab{color:rgba(255,255,255,.85);font-size:17.1px;letter-spacing:.2em}
.xp-card .lab:first-child{font-size:17.1px}
.xp-card p:not(.lab):not(.xp-script){margin:10px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.92)}

/* 95 / 4 / 1: three pairs that step across the page */
.xp-approach{text-align:left}
.xp-zig{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px);margin-top:clamp(36px,6vh,70px);align-items:start}
.xp-z p:not(.lab):not(.xp-pct){margin-top:12px;font-size:16.2px;line-height:1.5;color:var(--ink-2)}
/* the number big in Arca, the word in Canela beside it */
.xp-pct{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
/* The number is a window: a colourful photograph shows only through the
   figures, and drifts slowly on a wandering diagonal. background-clip:text
   does the cutting; the drift is the picture's position easing between
   corners and back. */
.xp-pct b{font-family:var(--label);font-weight:700;font-size:clamp(56px,7.3vw,105px);line-height:.9;letter-spacing:-.01em;color:transparent;
  background-image:var(--pct-img);background-size:220% auto;background-position:0% 0%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;animation:pctDrift 46s ease-in-out infinite alternate;padding-right:.04em}
.xp-z.t95 .xp-pct b{--pct-img:url('/uploads/2026/10/ben-liv-573-1200.jpg')}
.xp-z.t4 .xp-pct b{--pct-img:url('/uploads/2026/10/same-sex-wedding-photography-2-1200.jpg');animation-delay:-15s}
.xp-z.t1 .xp-pct b{--pct-img:url('/uploads/2026/10/cotswold-wedding-photographer6-1-1200.jpg');animation-delay:-30s}
@keyframes pctDrift{0%{background-position:0% 0%}30%{background-position:100% 55%}55%{background-position:35% 100%}80%{background-position:90% 10%}100%{background-position:10% 70%}}
@media(prefers-reduced-motion:reduce){.xp-pct b{animation:none;background-position:50% 50%}}
.xp-pct span{font-family:var(--display);font-size:clamp(20px,1.8vw,26px);letter-spacing:-.015em;color:var(--ink)}
.xp-z.t95{grid-column:5/9;grid-row:1;padding-top:clamp(20px,4vh,60px)}
.xp-z.i95{grid-column:2/5;grid-row:1;margin:0}
.xp-z.i95 img{aspect-ratio:3/4;object-fit:cover}
.xp-z.i4{grid-column:9/12;grid-row:2;margin:0}
.xp-z.i4 img{aspect-ratio:7/8;object-fit:cover}
.xp-z.t4{grid-column:5/9;grid-row:2;padding-top:clamp(20px,4vh,60px);text-align:right}
.xp-z.i1{grid-column:1/5;grid-row:3;margin:0}
.xp-z.i1 img{aspect-ratio:1/1;object-fit:cover}
.xp-z.t1{grid-column:5/9;grid-row:3;padding-top:clamp(20px,4vh,60px)}
.xp-z img{width:100%;height:auto;display:block}
.xp-more{text-align:right;margin-top:clamp(28px,4vh,44px)}
.xp-more a{color:inherit;text-decoration:none}
.xp-more a:hover{color:var(--ember)}
@media(max-width:820px){.xp-zig{grid-template-columns:1fr;gap:18px}.xp-z{grid-column:auto!important;grid-row:auto!important;padding-top:0!important;text-align:left!important}.xp-z.i95,.xp-z.i4,.xp-z.i1{margin-top:22px}}

/* what to expect: half photograph, half words */
.xp-expect{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;position:relative}
.xp-expimg{position:relative;overflow:hidden}
.xp-expimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-expimg::after{content:'';position:absolute;inset:0;background:rgba(20,17,16,.3)}
.xp-expword{position:absolute;left:39%;top:calc(clamp(70px,12vh,106px) + 19px);z-index:3;text-align:left;color:var(--ink)}
.xp-expword .lab{margin:0;position:relative;z-index:1}
.xp-expword h2{margin-top:-9px!important;margin-left:clamp(20px,3.2vw,48px)}
.xp-expword .lab{color:var(--ink)}
.xp-expword h2{margin:10px 0 0;font-family:var(--label);font-weight:700;font-size:clamp(22px,3vw,43px);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;max-width:9ch}
.xp-expword h2 em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0;text-transform:none;font-size:1.2em}
.xp-exptext{padding:clamp(48px,8vh,110px) clamp(28px,6vw,96px) clamp(48px,8vh,110px) calc(clamp(28px,6vw,96px) + clamp(40px,7.3vw,110px));text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.xp-exptext h2{margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.3vw,31.7px);line-height:1.15;letter-spacing:-.015em;max-width:18ch}
.xp-exptext > .lab:first-child{margin-top:0}
.xp-exptext .lab{margin-top:8px}
.xp-exptext p:not(.lab){margin-top:clamp(14px,2vh,22px);font-size:16.2px;line-height:1.55;color:var(--ink-2);max-width:48ch}
.xp-exptext .xp-btn{margin-top:clamp(14px,2vh,21px)}
@media(max-width:820px){.xp-expect{grid-template-columns:1fr}.xp-expimg{min-height:420px}.xp-expword{position:static;padding:clamp(28px,6vh,48px) var(--gut) 0;text-shadow:none}}

/* kind words */
.xp-kind{text-align:center}
.xp-kindh{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.05;letter-spacing:-.015em}
.xp-kindh em{display:block;font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0;font-size:1.05em}
.xp-kindrow{display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,120px);margin-top:clamp(28px,4vh,44px)}
.xp-kindimg{margin:0;width:min(100%,340px)}
.xp-kindimg img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.xp-arrow{font-family:var(--label);font-size:14px;color:var(--ink-2)}
.xp-kindq{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,80px);margin-top:clamp(28px,4vh,44px);text-align:left;align-items:start}
.xp-pull{margin:0;font-family:var(--accent);font-style:italic;font-weight:300;font-size:clamp(24px,2.6vw,36px);line-height:1.2;color:var(--ink)}
.xp-said p:not(.lab){margin-top:10px;font-size:16.2px;line-height:1.5;color:var(--ink-2);max-width:44ch}
.xp-said .xp-script{text-align:right;margin-top:14px}
@media(max-width:700px){.xp-kindq{grid-template-columns:1fr}.xp-arrow{display:none}}

/* the look */
.xp-look{text-align:left}
.xp-lookgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:start;position:relative}
.xp-looktext h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,3.1vw,43px);line-height:1.1;letter-spacing:-.015em;max-width:16ch}
.xp-looktext h2 em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
.xp-looktext .lab{margin-top:18px}
.xp-looktext p:not(.lab){margin-top:clamp(20px,3vh,32px);font-size:16.2px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.xp-plus{list-style:none;margin:14px 0 0;padding:0}
.xp-plus li{position:relative;padding-left:22px;font-size:16.2px;line-height:1.5;color:var(--ink-2)}
.xp-plus li::before{content:'+';position:absolute;left:0;top:0;color:var(--ember)}
.xp-link{margin-top:clamp(22px,3.4vh,36px)!important}
.xp-link a{color:var(--ink);text-decoration:none}
.xp-link a:hover{color:var(--ember)}
.xp-lookmain{margin:0;align-self:start}
.xp-lookmain img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.xp-looksmall{margin:clamp(28px,4vh,44px) 0 0;width:min(60%,300px);grid-column:1}
.xp-looksmall img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(max-width:820px){.xp-lookgrid{grid-template-columns:1fr}}

/* faq */
.xp-faq h2{margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.8vw,39px);letter-spacing:-.015em}
.xp-qa{margin:clamp(30px,5vh,60px) auto 0;max-width:60ch;padding:0}
.xp-qa div{margin-top:clamp(22px,3.4vh,36px)}
.xp-qa dt{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.xp-qa dd{margin:10px 0 0;font-size:16.2px;line-height:1.5;color:var(--ink-2)}

/* the close */
.xp-cta{position:relative;margin:0 var(--gut) clamp(40px,7vh,80px);min-height:min(80svh,720px);display:grid;place-items:center;overflow:hidden;text-align:center}
.xp-cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.xp-cta::before{content:'';position:absolute;inset:0;background:rgba(20,17,16,.38)}
.xp-ctacopy{position:relative;z-index:1;color:#fff;padding:0 var(--gut)}
.xp-ctacopy .lab{color:rgba(255,255,255,.85)}
.xp-ctacopy h2{margin:10px 0 24px;font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,60px);line-height:1.05;letter-spacing:-.015em}
.xp-ctacopy h2 em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
.xp-cta .xp-side{color:#fff}

/* ==================== portfolio, take two (/portfolio-2/) ==================== */
.pf2-top{padding-bottom:0}
.pf2-top .vid.film{max-width:min(100%,1180px)}
.pf2-gal{padding:clamp(40px,7vh,80px) 0 0}
.pf2-gal .carousel{margin-top:0}
.pf2-gal .car-track img{height:clamp(360px,70vh,760px)}
.pf2-cols .grid3{text-align:left}
.pf2-cols .card p:not(.lab){margin-top:10px;font-size:16.2px;line-height:1.5;color:var(--ink-2)}
.pf2-cols .card h3{margin-top:8px}
.pf2-link{margin-top:16px!important}
.pf2-link a{color:var(--ink);text-decoration:none}
.pf2-link a:hover{color:var(--ember)}

/* the whatsapp mock: iOS WhatsApp, drawn to match a real screenshot */
.wa{zoom:.8;width:min(390px,100%);margin:0 auto;background:#f6f4ef;border-radius:30px;overflow:hidden;box-shadow:0 24px 60px rgba(35,31,32,.16),0 6px 18px rgba(35,31,32,.08);font-family:-apple-system,'SF Pro Text','Helvetica Neue',Arial,sans-serif;text-align:left;font-size:15px;color:#111}
.wa.compact{border-radius:18px;box-shadow:0 22px 50px rgba(35,31,32,.22)}
.wa-status{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 2px;font-size:15px;font-weight:600;color:#000;background:#f6f4ef}
.wa-status span{display:flex;gap:6px;align-items:center}
.wa-status i{display:inline-block;font-style:normal}
.wa-status .sig{width:17px;height:11px;background:linear-gradient(90deg,#000 0 3px,transparent 3px 4.5px,#000 4.5px 7.5px,transparent 7.5px 9px,#bbb 9px 12px,transparent 12px 13.5px,#bbb 13.5px 16.5px);clip-path:polygon(0 65%,26% 65%,26% 45%,53% 45%,53% 25%,79% 25%,79% 0,100% 0,100% 100%,0 100%)}
.wa-status .wifi{width:15px;height:11px;background:radial-gradient(circle at 50% 100%,#000 0 2px,transparent 2.6px 4.4px,#000 5px 6.4px,transparent 7px 8.8px,#000 9.4px 10.8px,transparent 11.4px);clip-path:polygon(0 0,100% 0,50% 100%)}
.wa-status .bat{width:27px;height:13px;border-radius:4px;background:#000;color:#fff;font-size:9px;font-weight:700;text-align:center;line-height:13px;letter-spacing:-.02em}
.wa-top{display:flex;gap:8px;align-items:center;padding:8px 10px 10px;background:#f6f4ef}
.wa-pill{display:inline-flex;align-items:center;justify-content:center;gap:16px;height:36px;padding:0 12px;border-radius:99px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wa-back{width:40px;padding:0}.wa-back svg{width:16px;height:16px}
.wa-calls svg{width:22px;height:18px}
.wa-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.wa-av img{width:100%;height:100%;object-fit:cover}
.wa-top>div{flex:1;min-width:0}
.wa-top b{display:block;font-size:15px;font-weight:600;line-height:1.15}
.wa-top i{font-style:normal;font-size:12px;color:#7a7a7a}
.wa-body{padding:12px 8px 10px;background:#e8e2d9 url(/assets/img/whatsapp-bg.png) center/390px auto;min-height:540px;max-height:540px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:7px}
.wa-body::-webkit-scrollbar{display:none}
.wa-m{max-width:78%;padding:7px 10px 6px 11px;border-radius:18px;line-height:1.3;position:relative;animation:wain .4s var(--ease) both;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:10px}
@keyframes wain{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wa .wa-m p{margin:0;color:#111;font-size:15px;flex:1 1 auto}
.wa .wa-m span{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:#8a8a8a;margin-left:auto;padding-top:5px;white-space:nowrap}
.wa .wa-m span svg{width:16px;height:10px;display:block;margin-left:1px}
.wa-m.me{align-self:flex-end;background:#dff8c8}
.wa-m.them{align-self:flex-start;background:#fff}
/* the flick: a small curved wedge hanging off the bottom outer corner, as iOS draws it */
/* the tail grows out of the rounded corner: the box reaches well under the curve so there is no notch */
.wa-m.me::after,.wa-m.them::after{content:'';position:absolute;bottom:0;width:20px;height:14px;background-repeat:no-repeat;background-size:20px 14px;z-index:-1}
.wa-m{isolation:isolate}
.wa-m.them::after{left:-7px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M20 0v14H0c7-1 12-6 20-14z' fill='%23fff'/%3E%3C/svg%3E")}
.wa-m.me::after{right:-7px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 0v14h20C13 13 8 8 0 0z' fill='%23dff8c8'/%3E%3C/svg%3E")}
.wa-typing{background:#fff;border-radius:18px;padding:11px 13px;display:flex;gap:4px;align-self:flex-start;animation:wain .3s var(--ease) both}
.wa-typing.me{background:#dff8c8;align-self:flex-end}
.wa-typing span{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:wadot 1.2s infinite}
.wa-typing span:nth-child(2){animation-delay:.2s}.wa-typing span:nth-child(3){animation-delay:.4s}
@keyframes wadot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.wa-in{display:flex;align-items:center;gap:10px;padding:8px 12px 20px;background:#f6f4ef}
.wa-in>span{display:inline-flex;align-items:center;justify-content:center;flex:none}
.wa-in .wa-plus svg{width:22px;height:22px}
.wa-in .wa-cam svg{width:26px;height:22px}
.wa-in .wa-mic{width:36px;height:36px;border-radius:50%;background:#111}
.wa-in .wa-mic svg{width:18px;height:18px}
.wa-in>div{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d6d3cc;border-radius:22px;padding:8px 12px;min-height:38px}
.wa-in>div svg{width:20px;height:20px;flex:none}
.wa .wa-in em{flex:1}
@media(prefers-reduced-motion:reduce){.wa-m,.wa-typing{animation:none}}

/* the experience: how I treat my couples -- words left, the phone right */
.xp-couples{text-align:left}
.xp-cgrid{display:grid;grid-template-columns:minmax(0,50ch) minmax(0,420px);gap:clamp(26px,5.1vw,85px);align-items:center;justify-content:center}
.xp-ctext > .lab:first-child{font-size:11.6px}
.xp-ctext h2{margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.15vw,29.2px);line-height:1.2;letter-spacing:-.015em;max-width:18ch}
.xp-ctext h2 em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
.xp-ctext p:not(.lab){margin-top:clamp(16px,2.6vh,26px);font-size:16.2px;line-height:1.55;color:var(--ink-2);max-width:48ch}
.xp-cphone{padding:10px 0}
@media(max-width:820px){.xp-cgrid{grid-template-columns:1fr}}

/* ==================== footer, take two (.foot2) ====================
   The Showit footer: two columns of links, the mark with the social links
   and the coordinates in the middle, a nudge towards the real weddings on
   the right. The photograph strip sits beneath it. */
footer.foot2 .f2{max-width:var(--max);margin:0 auto;padding:clamp(48px,8vh,96px) var(--gut) clamp(40px,6vh,70px);
  display:grid;grid-template-columns:1fr 1fr 1.6fr 2.25fr;gap:clamp(20px,3vw,48px);align-items:start;text-align:left}
footer.foot2 .f2 ul{list-style:none;margin:0;padding:0}
footer.foot2 .f2 li{margin:0 0 15px}
footer.foot2 .f2 li a{font-family:var(--label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none}
footer.foot2 .f2 li a:hover{color:var(--ember)}
footer.foot2 .f2-mid{text-align:center;padding-top:6px}
footer.foot2 .f2-mid img{width:60px;height:60px;margin:0 auto}
footer.foot2 .f2-social{display:flex;justify-content:center;gap:clamp(18px,3vw,44px);margin:34px 0 0}
footer.foot2 .f2-social a{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none}
footer.foot2 .f2-social a:hover{color:var(--ember)}
footer.foot2 .f2-geo{margin:34px 0 0;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;color:var(--ink-2)}
footer.foot2 .f2-right{text-align:right}
footer.foot2 .f2-script{margin:0;font-family:var(--accent);font-style:italic;font-weight:300;font-size:clamp(16px,1.42vw,20.9px);color:var(--ink)}
footer.foot2 .f2-right h2{margin:8px 0 0;font-family:var(--label);font-weight:700;font-size:clamp(15px,1.55vw,22px);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
footer.foot2 .f2-right p:not(.f2-script){margin:16px 0 0;font-size:16.2px;line-height:1.55;color:var(--ink-2);max-width:30ch;margin-left:auto}
footer.foot2 .f2-arrow{display:inline-block;margin-top:24px;font-family:var(--label);font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:0}
footer.foot2 .f2-arrow:hover{color:var(--ember)}
footer.foot2 .f2-contact{margin:22px 0 0;font-family:var(--sans);font-size:15px;line-height:1.85;color:var(--ink-2)}
footer.foot2 .f2-contact a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
footer.foot2 .f2-contact a:hover{color:var(--ember);border-bottom-color:var(--ember)}
footer.foot2 .ab2-ig{padding-top:0}
footer.foot2 .credit{padding-bottom:20px}
@media(max-width:820px){footer.foot2 .f2{grid-template-columns:1fr 1fr}footer.foot2 .f2-mid,footer.foot2 .f2-right{grid-column:1/-1;text-align:left}footer.foot2 .f2-social{justify-content:flex-start}footer.foot2 .f2-right p:not(.f2-script){margin-left:0}}

/* ==================== the experience, take two (/experience-2/) ==================
   Five acts down the page. Everything sits on the same twelve-column grid the
   placement tool draws (the shell's content box, 24px gutters), so a snap to a
   column line is a snap to a real edge. */
.x2-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;text-align:left}
.x2-act{padding-block:clamp(72px,12vh,150px);scroll-margin-top:60px}
.x2-band{background-color:var(--warm);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply}
.x2-ch{grid-column:1/13;margin:0}
.x2-h{grid-column:1/9;margin:14px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.018em;color:var(--ink)}
.x2-h em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
.x2-lede{grid-column:1/8;margin:clamp(18px,2.6vh,28px) 0 0;font-size:17.4px;line-height:1.55;color:var(--ink-2)}
@media(max-width:820px){.x2-h,.x2-lede{grid-column:1/13}}

/* the opening */
.x2-open{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;align-items:end;justify-items:center;text-align:center;padding-bottom:clamp(90px,16vh,160px)}
.x2-open > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.06);animation:kb 26s var(--ease) forwards}
.x2-open::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,19,12,.38),rgba(26,19,12,.18) 45%,rgba(26,19,12,.42))}
.x2-opencopy{position:relative;z-index:1;color:#fff;padding:0 var(--gut)}
.x2-title{margin:0;font-family:var(--label);font-weight:700;font-size:clamp(16px,1.9vw,27.5px);letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;text-shadow:0 2px 24px rgba(20,17,16,.4)}
.x2-sub{margin:16px auto 0;max-width:30ch;font-family:var(--accent);font-style:italic;font-weight:300;font-size:clamp(18px,1.9vw,27px);line-height:1.3;text-shadow:0 2px 24px rgba(20,17,16,.4)}
.x2-cue{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px);z-index:1;margin:0;text-align:center;color:rgba(255,255,255,.8)}
.x2-cue::after{content:'';display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(rgba(255,255,255,.85),transparent)}

/* contents */
.x2-contents{padding-block:clamp(28px,4vh,44px);border-bottom:1px solid var(--line)}
.x2-contents ol{list-style:none;margin:0;padding:0}
.x2-contents li{grid-column:span 2}
.x2-contents li:first-child{grid-column:2/4}
.x2-contents a{display:flex;gap:10px;align-items:baseline;text-decoration:none;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.x2-contents a b{font-size:8px;color:var(--sage);font-weight:700}
.x2-contents a:hover{color:var(--ember)}
@media(max-width:820px){.x2-contents li,.x2-contents li:first-child{grid-column:span 6;margin:6px 0}}

/* the chapter rail */
.x2-rail{position:fixed;right:clamp(10px,1.4vw,22px);top:50%;transform:translateY(-50%);z-index:50;display:grid;gap:14px}
.x2-rail a{display:flex;align-items:center;gap:10px;flex-direction:row-reverse;text-decoration:none;color:var(--ink)}
.x2-rail i{width:7px;height:7px;border-radius:50%;background:rgba(35,31,32,.25);transition:background .3s var(--ease),transform .3s var(--ease)}
.x2-rail span{font-family:var(--label);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap}
.x2-rail a.on i{background:var(--ember);transform:scale(1.4)}
.x2-rail a:hover span,.x2-rail a.on span{opacity:1;transform:none}
@media(max-width:1100px){.x2-rail{display:none}}

/* act 1: the three numbers, then three pictures stepping across */
.x2-pcts{margin-top:clamp(40px,7vh,80px);row-gap:clamp(28px,4vh,44px)}
.x2-pct{grid-column:span 4}
.x2-pct .xp-pct{align-items:baseline}
.x2-pct p:not(.xp-pct){margin:12px 0 0;font-size:15.6px;line-height:1.5;color:var(--ink-2);max-width:34ch}
.x2-pct.t95 .xp-pct b{--pct-img:url('/uploads/2026/10/ben-liv-1374-1400.jpg')}
.x2-pct.t4 .xp-pct b{--pct-img:url('/uploads/2026/10/same-sex-wedding-photography-2-1200.jpg');animation-delay:-15s}
.x2-pct.t1 .xp-pct b{--pct-img:url('/uploads/2026/10/cotswold-wedding-photographer6-1-1200.jpg');animation-delay:-30s}
@media(max-width:820px){.x2-pct{grid-column:1/13}}
.x2-seq{margin-top:clamp(56px,9vh,110px);row-gap:clamp(36px,6vh,72px)}
.x2-f{margin:0}
.x2-f img{width:100%;height:auto;display:block}
.x2-f figcaption{margin-top:12px;font-size:9px;line-height:1.7;color:var(--sage);max-width:40ch}
.x2-seq .a{grid-column:1/8}
.x2-seq .b{grid-column:6/13;margin-top:clamp(-40px,-4vw,-80px)}
.x2-seq .c{grid-column:3/10}
.x2-seq .b figcaption{text-align:right;margin-left:auto}
@media(max-width:820px){.x2-seq .a,.x2-seq .b,.x2-seq .c{grid-column:1/13;margin-top:0}.x2-seq .b figcaption{text-align:left;margin-left:0}}

/* act 2: words that stay while the day scrolls past */
.x2-daygrid{row-gap:0}
.x2-sticky{grid-column:1/6;position:sticky;top:clamp(90px,14vh,140px);align-self:start}
.x2-sticky .x2-h,.x2-sticky .x2-lede{grid-column:auto}
.x2-moments{grid-column:7/13;list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,7vh,90px)}
.x2-moments figure{margin:0}
.x2-moments img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.x2-moments .lab{margin-top:14px;color:var(--ember)}
.x2-moments p:not(.lab){margin:8px 0 0;font-size:15.6px;line-height:1.5;color:var(--ink-2);max-width:40ch}
@media(max-width:820px){.x2-sticky{grid-column:1/13;position:static}.x2-moments{grid-column:1/13;margin-top:40px}}

/* act 3: two pictures, colour and black and white */
.x2-plus{grid-column:1/7;margin-top:clamp(18px,2.6vh,28px)}
.x2-pair{margin-top:clamp(48px,8vh,96px);row-gap:36px}
.x2-pair .l{grid-column:1/7}
.x2-pair .rr{grid-column:7/13;margin-top:clamp(40px,6vw,96px)}
.x2-pair .rr img{filter:grayscale(1);aspect-ratio:3/2;object-fit:cover;object-position:50% 20%}
@media(max-width:820px){.x2-pair .l,.x2-pair .rr{grid-column:1/13;margin-top:0}}

/* act 4: four plain facts, the phone, and a quote */
.x2-facts{margin-top:clamp(40px,6vh,72px);row-gap:clamp(24px,4vh,40px)}
.x2-fact{grid-column:span 3;padding-top:14px;border-top:1px solid var(--line)}
.x2-fact p:not(.lab){margin:10px 0 0;font-size:15.2px;line-height:1.5;color:var(--ink-2)}
@media(max-width:820px){.x2-fact{grid-column:span 6}}
.x2-chat{margin-top:clamp(56px,9vh,110px);align-items:center;row-gap:40px}
.x2-chatwords{grid-column:1/7}
.x2-quote{margin:18px 0 0;padding:0}
.x2-quote p{margin:0;font-family:var(--quote);font-style:italic;font-size:clamp(18px,1.7vw,24px);line-height:1.4;color:var(--ink);max-width:30ch}
.x2-quote cite{display:block;margin-top:14px;font-family:var(--label);font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.x2-phone{grid-column:8/13}
@media(max-width:820px){.x2-chatwords,.x2-phone{grid-column:1/13}}

/* act 5: three steps */
.x2-steps{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0;row-gap:28px}
.x2-steps li{grid-column:span 4;padding-top:14px;border-top:1px solid var(--line)}
.x2-steps b{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);font-weight:700}
.x2-steps span{display:block;margin-top:10px;font-size:15.6px;line-height:1.5;color:var(--ink-2);max-width:34ch}
@media(max-width:820px){.x2-steps li{grid-column:1/13}}

/* the close */
.x2-close{position:relative;min-height:min(84svh,760px);display:grid;place-items:center;overflow:hidden;text-align:center;margin:0 var(--gut) clamp(40px,7vh,80px)}
.x2-close > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.x2-close::before{content:'';position:absolute;inset:0;background:rgba(20,17,16,.42)}
.x2-closecopy{position:relative;z-index:1;color:#fff;padding:0 var(--gut)}
.x2-closecopy .lab{color:rgba(255,255,255,.85)}
.x2-closecopy h2{margin:10px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,60px);line-height:1.05;letter-spacing:-.015em}
.x2-closecopy h2 em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
.x2-closecopy .btns{justify-content:center}
.x2-plink{margin-top:20px}
.x2-plink a{color:rgba(255,255,255,.85);text-decoration:none}
.x2-plink a:hover{color:#fff}

/* ==================== experience, take three: the original with chapters and quiet motion ==================== */
.x3 .wipe img{clip-path:inset(0 100% 0 0);transform:scale(1.08);transition:clip-path 1.3s var(--ease),transform 1.6s var(--ease)}
.x3 .wipe.seen img{clip-path:inset(0 0 0 0);transform:none}
.x3 .x3words .x3w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.x3 .x3words.seen .x3w{opacity:1;transform:none}
.x3 .xp-hero{position:relative}

/* ==================== experience, take four: the hyper version ==================== */
.x4-open{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;align-items:end;justify-items:start;padding:0 var(--gut) clamp(60px,10vh,120px)}
.x4-openimg{position:absolute;inset:0}
.x4-openimg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.x4-openimg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,19,12,.2),rgba(26,19,12,.55))}
.x4-opencopy{position:relative;z-index:1;color:#fff;max-width:var(--max);margin:0 auto;width:100%}
.x4-title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(44px,9vw,132px);line-height:.95;letter-spacing:-.03em}
.x4-sub{margin:18px 0 0;font-family:var(--accent);font-style:italic;font-weight:300;font-size:clamp(18px,2vw,28px)}
.x4-split .x4w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.x4-split .x4w > span{display:inline-block;transform:translateY(110%)}
.x4-marquee{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:var(--paper)}
.x4-mtrack{display:flex;gap:48px;width:max-content;animation:x4m 60s linear infinite;white-space:nowrap}
.x4-mtrack span{font-family:var(--label);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.x4-mtrack em{font-family:var(--accent);font-style:italic;font-weight:300;font-size:22px;color:var(--ink-2)}
@keyframes x4m{to{transform:translateX(-50%)}}
/* each card sticks at the top and the next slides up over it: no script needed for the stack */
.x4-stack{position:relative}
.x4-card{position:sticky;top:0;min-height:100svh;display:grid;align-items:center;overflow:hidden;background-color:var(--paper);background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;box-shadow:0 -30px 80px rgba(20,17,16,.18)}
.x4-card.x4-band{background-color:var(--warm)}
.x4-in{position:relative;z-index:1;width:100%;padding-block:clamp(70px,12vh,140px);text-align:left}
.x4-ch{margin:0}
.x4-h{margin:14px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,58px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);max-width:16ch}
.x4-h em{font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:0}
.x4-lede{margin:clamp(20px,3vh,32px) 0 0;max-width:52ch;font-size:17.4px;line-height:1.55;color:var(--ink-2)}
.x4-bg{position:absolute;inset:0;margin:0;z-index:0;opacity:.22}
.x4-bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.x4-nums{display:flex;gap:clamp(24px,5vw,80px);flex-wrap:wrap;margin-top:clamp(28px,5vh,56px)}
.x4-num b{font-family:var(--label);font-weight:700;font-size:clamp(56px,8vw,120px);line-height:.9;letter-spacing:-.02em;color:var(--ember);font-variant-numeric:tabular-nums}
.x4-num i{font-family:var(--label);font-style:normal;font-weight:700;font-size:clamp(22px,3vw,44px);color:var(--ember);margin-left:4px}
.x4-num span{display:block;margin-top:8px;font-family:var(--display);font-size:clamp(17px,1.5vw,22px);color:var(--ink)}
/* the day, sideways */
.x4-horiz{display:block;min-height:0;position:relative}
.x4-fallback .x4-htrack{overflow-x:auto;scroll-snap-type:x mandatory}
.x4-fallback .x4-slide{scroll-snap-align:start}
.x4-hpin{height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;align-content:start}
.x4-hhead{padding-top:clamp(60px,10vh,110px);padding-bottom:clamp(20px,3vh,36px)}
.x4-htrack{display:flex;gap:clamp(24px,4vw,64px);padding:0 var(--gut);will-change:transform;align-items:start}
.x4-slide{flex:none;width:min(60vw,760px)}
.x4-slide figure{margin:0}
.x4-slide img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.x4-slide .lab{margin-top:14px;color:var(--ember)}
.x4-slide p:not(.lab){margin:8px 0 0;font-size:16.2px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.x4-slide.x4-last{width:min(70vw,720px);align-self:center;padding-top:10vh}
.x4-end{margin:0;font-family:var(--display);font-size:clamp(24px,2.8vw,40px);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.x4-end em{font-family:var(--accent);font-style:italic;font-weight:300}
/* the edit: a slider between colour and black and white */
.x4-edit{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,96px);align-items:center}
.x4-edit .xp-plus{margin-top:clamp(18px,2.6vh,28px)}
.x4-colour{position:relative;margin:0;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none}
.x4-colour img{width:100%;height:auto;display:block}
.x4-colour .x4-mono{position:absolute;inset:0;filter:grayscale(1);clip-path:inset(0 0 0 50%)}
.x4-colour .x4-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.x4-colour .x4-handle::after{content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 4px 14px rgba(20,17,16,.3)}
.x4-colour figcaption{position:absolute;left:14px;bottom:12px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media(max-width:820px){.x4-edit{grid-template-columns:1fr}}
/* the professional bit */
.x4-pro{display:grid;grid-template-columns:1.1fr minmax(0,420px);gap:clamp(30px,6vw,96px);align-items:center;justify-content:space-between}
.x4-facts{list-style:none;margin:clamp(24px,4vh,40px) 0 0;padding:0;display:grid;gap:16px;max-width:52ch}
.x4-facts li{padding-top:12px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}
.x4-facts b{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
@media(max-width:820px){.x4-pro{grid-template-columns:1fr}}
/* afterwards */
.x4-steps{list-style:none;margin:clamp(28px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:900px}
.x4-steps li{padding-top:12px;border-top:1px solid var(--line)}
.x4-steps b{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.x4-steps span{display:block;margin-top:8px;font-size:15.6px;line-height:1.5;color:var(--ink-2)}
.x4-after .btns{justify-content:flex-start}
@media(max-width:820px){.x4-steps{grid-template-columns:1fr}}

/* ==================== experience, take five: white, with beige hints and colour ==================== */
.x5{background:#fff}
.x5 .x2-act:not(.x2-band){background:#fff}
.x5 .x2-band{background-color:#f5f1ea}
.x5 .x2-contents{background:#fff}
.x5 .x5-tint{background-color:#faf7f2!important;background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply}
.x5 .x2-act{position:relative;overflow:hidden}
.x5-glow{position:absolute;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55;border-radius:50%}
.x5-glow.a{width:46vw;height:46vw;max-width:620px;max-height:620px;right:-10vw;top:-8vw;background:radial-gradient(circle at 40% 40%,rgba(163,93,36,.55),rgba(163,93,36,0) 70%)}
.x5-glow.b{width:40vw;height:40vw;max-width:560px;max-height:560px;left:-12vw;bottom:-10vw;background:radial-gradient(circle at 50% 50%,rgba(93,107,104,.5),rgba(93,107,104,0) 70%)}
.x5-glow.c{width:36vw;height:36vw;max-width:520px;max-height:520px;right:-8vw;bottom:-12vw;background:radial-gradient(circle at 50% 50%,rgba(212,151,96,.55),rgba(212,151,96,0) 70%)}
.x5 .x2-g{position:relative;z-index:1}
.x5 .x2-fact,.x5 .x2-steps li,.x5 .x2-pct{background:transparent}
.x5 .x2-f img{box-shadow:0 10px 40px rgba(35,31,32,.08)}

/* ---- Experience, take six: the exclusive one. Ed Peers' framework (a pale
   ground, tiny tracked type, a hundred and fifty words, the pictures doing
   the talking) with Che's livelier frames. Grid is the placement grid:
   twelve columns, 24px gutters. ---- */
.x6{background-color:#efede9;background-image:var(--tex);background-size:200px 200px;background-blend-mode:multiply;color:var(--ink)}
.x6-lab{font-family:var(--label);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.x6-line{font-family:var(--sans);font-size:14px;letter-spacing:.05em;line-height:1.8;color:var(--ink-2);margin:0;max-width:34ch}
.x6-h{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.45vw,21px);letter-spacing:.015em;line-height:1.4;margin:0 0 10px;max-width:26ch}
.x6-copy.c{text-align:center}.x6-copy.c .x6-line,.x6-copy.c .x6-h{margin-left:auto;margin-right:auto}

.x6-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center}
.x6-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:grayscale(1) contrast(1.04);transform:scale(1.12);animation:x6Zoom 16s cubic-bezier(.2,.6,.2,1) both}
@keyframes x6Zoom{to{transform:scale(1)}}
.x6-hero::after{content:"";position:absolute;inset:0;background:rgba(239,237,233,.08)}
.x6-card{position:relative;z-index:1;background:rgba(239,237,233,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:34px 48px 30px;text-align:center;opacity:0;animation:x6Card 1.6s var(--ease) .5s both}
@keyframes x6Card{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.x6-name{font-family:var(--label);font-weight:700;font-size:11.5px;letter-spacing:.46em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.x6-tag{font-family:var(--accent);font-style:italic;font-size:16px;letter-spacing:.03em;margin:0;color:var(--ink-2)}
.x6-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--label);font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:#fff;opacity:.7;margin:0;z-index:1}

.x6-three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;max-width:1040px;margin:0 auto;padding:clamp(70px,10vh,120px) var(--gut) clamp(50px,7vh,90px)}
.x6-three .x6-line{margin:0 auto;font-size:13px}

.x6-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;max-width:var(--max);margin:0 auto;padding:clamp(60px,9vh,110px) var(--gut)}
.x6-fig{margin:0;position:relative;overflow:hidden}
.x6-fig img{display:block;width:100%;height:auto;transform:scale(1.07);transition:transform 1.8s var(--ease)}
.r.x6-fig{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.r.x6-fig.in{clip-path:inset(0)}.r.x6-fig.in img{transform:none}
.x6-fig.a{grid-column:1/8}
.x6-copy.a{grid-column:9/13;align-self:end;padding-bottom:4px}
#after .x6-fig.a{grid-column:6/13;order:2}#after .x6-copy.a{grid-column:1/5;order:1}

.x6-bleed{padding:clamp(60px,9vh,110px) 0 0}
.x6-bleedbox{position:relative;height:clamp(420px,82svh,820px);overflow:hidden}
.x6-bleedbox img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:50% 35%}
.x6-bleed .x6-copy{padding:clamp(50px,7vh,80px) var(--gut) 0}

.x6-pair .p1{grid-column:2/6}
.x6-pair .p2{grid-column:7/12;margin-top:clamp(60px,12vh,160px)}
.x6-pair .x6-copy{grid-column:1/13;padding-top:20px}

.x6-pro .x6-copy{grid-column:3/11;padding-bottom:20px}
.x6-pro .q1{grid-column:5/13}
.x6-pro .q2{grid-column:1/5;margin-top:-18%}

.x6-based{text-align:center;padding:clamp(70px,10vh,120px) var(--gut) 0}
.x6-based .x6-line{margin:0 auto;font-size:15px}
.x6-micro{list-style:none;margin:34px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;font-family:var(--label);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2)}

.x6-close .z{grid-column:3/11}
.x6-close .x6-copy{grid-column:1/13;padding-top:10px}
.x6-link{font-family:var(--label);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.x6-link:hover{color:var(--ember);border-color:var(--ember)}

@media(max-width:900px){
  .x6-g{grid-template-columns:1fr;column-gap:0;row-gap:28px;padding:56px var(--gut)}
  .x6-fig.a,.x6-copy.a,#after .x6-fig.a,#after .x6-copy.a,.x6-pair .p1,.x6-pair .p2,.x6-pair .x6-copy,.x6-pro .x6-copy,.x6-pro .q1,.x6-pro .q2,.x6-close .z,.x6-close .x6-copy{grid-column:1/-1;margin-top:0;order:0;transform:none!important}
  #after .x6-copy.a{order:1}
  .x6-copy.a{text-align:center}.x6-copy.a .x6-line,.x6-copy.a .x6-h{margin-left:auto;margin-right:auto}
  .x6-pair .p1,.x6-pair .p2{max-width:78%;margin-left:auto;margin-right:auto}.x6-pair .p2{margin-left:auto}
  .x6-pro .q2{max-width:70%}
  .x6-three{grid-template-columns:1fr;gap:34px;padding-top:60px}
  .x6-bleedbox{height:62svh;min-height:360px}
  .x6-card{padding:26px 30px 24px;margin:0 var(--gut)}
  .x6-rail{display:none}
}
@media(prefers-reduced-motion:reduce){.x6-heroimg,.x6-card{animation:none;opacity:1;transform:none}.r.x6-fig{clip-path:none}.x6-fig img{transform:none}}