img{max-width:100%}

/* Layout: a white page with matted photographs. Ink type on paper, one photograph opening the page,
   an even grid for the work, dark "cinema" bands for the Feel Reel and Film Look, and one red
   used sparingly. Single committed look (no dark variant). */
:root{
  --paper:#f5f5f3; --ink:#0d0d0e; --graphite:#6c6c70; --hair:#d6d6d2; --mute:#c4c4c0;
  --base:#0b0b0c; --silver:#ebebe7; --smoke:#8d8d90; --seam:#2a2a2c; --grease:#d92b1f;
  --serif:"Old Standard TT","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Lato","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gut:clamp(16px,4.2vw,72px);
  --t-h1:clamp(44px,8.6vw,148px); --t-h2:clamp(34px,5.4vw,88px); --t-h3:clamp(24px,2.6vw,40px);
  --t-l:clamp(18px,1.55vw,24px); --t-b:clamp(15px,1.1vw,17px); --t-x:11px; --t-sect:clamp(36px,6.4vw,108px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-b);line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--grease);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3,p,figure,ul{margin:0;padding:0}
ul{list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.08}
em{font-style:italic}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.label{font-family:var(--mono);font-size:var(--t-x);letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);display:block}
.dark{background:var(--base);color:var(--silver)}
.dark .label{color:var(--smoke)}
/* section titles: the section's name, large, with an optional small index above it. The deck is the line beneath. */
.sect{font-size:var(--t-sect);line-height:.96;letter-spacing:-.028em}
.sect i{display:block;font-family:var(--mono);font-style:normal;font-size:clamp(11px,.9vw,13px);line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:clamp(12px,1.4vw,22px)}
.dark .sect i{color:var(--smoke)}
.deck{font-family:var(--serif);font-size:clamp(21px,2.5vw,38px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance;max-width:26ch}
.sub{font-size:clamp(28px,3.4vw,54px);line-height:1}
.deck.s{font-size:var(--t-l);line-height:1.3;letter-spacing:-.005em;max-width:34ch}
.tm{font-size:.5em;position:relative;top:-.6em;margin-left:.05em;letter-spacing:0}
.body{max-width:58ch;color:var(--graphite)}
.dark .body{color:#a9a9a6}
.body+.body{margin-top:1.1em}
.body a{color:inherit;text-underline-offset:.2em}
@media (orientation:landscape) and (max-height:340px){.book-head>.body{display:none}}
.link{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:.8em;align-items:center;padding:.9em 0;border-bottom:1px solid currentColor;transition:gap .35s cubic-bezier(.2,.8,.2,1)}
.link:hover{gap:1.5em}
.link i{font-style:normal}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:.8em;padding:1.15em 1.7em;background:var(--ink);color:var(--paper);border-radius:999px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.btn:hover{transform:translateY(-2px);background:#000}
.dark .btn{background:var(--silver);color:var(--base)}
section{position:relative}
.pad{padding-block:clamp(88px,13vw,200px)}
.head{display:grid;gap:clamp(18px,2vw,30px);margin-bottom:clamp(40px,5vw,84px)}

/* images develop like a print in the tray */
.js .dev{filter:brightness(1.9) contrast(.25) blur(8px);opacity:.55;transition:filter 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.js .dev.in{filter:none;opacity:1}
.js .dev.set{transition:none}

/* opening: the header's logo and line, large, settling into the header while the page fades in. The script sizes and places them. */
.intro{display:none}
.intro-on .intro{display:block;position:fixed;inset:0;z-index:100;background-color:var(--paper);color:var(--ink);pointer-events:none;animation:introBail 0s linear 8s forwards}
@keyframes introBail{to{visibility:hidden}}
.intro>*{position:absolute;left:0;top:0;max-width:none;margin:0;transform-origin:0 0;opacity:0;transition:opacity .5s ease;will-change:transform,opacity}
.intro.t1>img,.intro.t1>.pj{opacity:1}
.intro.t3{background-color:transparent;transition:background-color .9s ease .08s}
.intro.t3>*{transition:transform 1s cubic-bezier(.7,0,.2,1)}
.intro.out{opacity:0;transition:opacity .25s ease}
.intro-run .nav .brand{opacity:0}

/* nav */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60;mix-blend-mode:difference;color:#fff;display:flex;justify-content:space-between;align-items:flex-start;padding-top:clamp(16px,2vw,28px);pointer-events:none}
.nav a,.nav button{pointer-events:auto}
.nav{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nav.away{transform:translateY(-140%)}
.brand{display:grid;justify-items:center;text-decoration:none}
.brand img{width:clamp(120px,13vw,190px);filter:invert(1)}
/* under the logo: PHOTOJOURNALISTS in the live header's type (Lato Light capitals). The opening shares this rule. */
.brand .pj,.intro .pj{font-family:var(--sans);font-weight:300;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.brand .pj{font-size:clamp(9.5px,.8vw,11.5px);margin-top:5px}
@media (orientation:landscape) and (max-height:560px){.brand img{width:112px}.brand .pj{font-size:9px;margin-top:3px}}
.nav ul{display:flex;gap:clamp(18px,2.2vw,38px);align-items:center}
.nav li a,.menu-btn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;position:relative;padding:8px 0;color:#fff}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nav li a:hover::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none}
.menu{position:fixed;inset:0;z-index:55;background:var(--base);color:var(--silver);display:grid;align-content:center;gap:10px;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateY(-101%);transition:transform .7s cubic-bezier(.76,0,.24,1),visibility 0s .7s}
.menu.open{transform:none;visibility:visible;transition:transform .7s cubic-bezier(.76,0,.24,1)}
.menu a{font-family:var(--serif);font-size:clamp(34px,9vw,60px);line-height:1.15;text-decoration:none;letter-spacing:-.02em}
.nav li a.portal{border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 14px;transition:background .25s,color .25s}
.nav li a.portal::after{display:none}
.nav li a.portal:hover{background:#fff;color:#000}
.menu a.sub{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-top:22px}
@media (max-width:1100px){.nav ul{display:none}.menu-btn{display:block}}

/* hero: a wide matted photograph, headline beneath it on the page */
.hero{padding-top:clamp(92px,8.4vw,128px);padding-bottom:clamp(40px,5vw,84px)}
.hero-frame{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:20/9;overflow:hidden;background:var(--base)}
.hero-imgs{position:absolute;inset:-1.2% -6px;display:block;will-change:transform}
.hero-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1.6s ease,transform 9s linear}
.hero-imgs img.on{opacity:1;transform:scale(1)}
.hero-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding-block:12px clamp(20px,2.8vw,44px)}
.hero-nav{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--graphite);font-variant-numeric:tabular-nums}
.hero-nav i{display:block;width:56px;height:1px;background:var(--hair);position:relative}
.hero-nav i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.hero-nav button{font-size:15px;line-height:1;padding:8px;color:var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hero-nav button:first-child:hover{transform:translateX(-4px)}
.hero-nav button:last-child:hover{transform:translateX(4px)}
.hero-foot{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px clamp(32px,5vw,90px);align-items:end}
.hero-foot>*{min-width:0}
.hero h1{font-size:clamp(34px,4.4vw,78px);line-height:1;letter-spacing:-.03em}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 span b{display:block;font-weight:400;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.js .hero h1 span b{transform:translateY(110%)}
.js.ready .hero h1 span b{transform:none}
.hero h1 span:nth-child(2) b{transition-delay:.1s}
.hero-side{display:grid;gap:22px}
.hero-side p{font-family:var(--serif);font-size:var(--t-l);line-height:1.45;max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
@media (max-width:900px){.hero-foot{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.hero-frame{aspect-ratio:3/2}}

/* the three points, straight after the hero */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,72px);padding-top:clamp(44px,6vw,96px)}
.points a{display:grid;gap:12px;align-content:start;padding-top:16px;border-top:1px solid var(--ink);color:inherit;text-decoration:none}
.points .n{display:flex;justify-content:flex-end;font-family:var(--mono);font-size:var(--t-x);letter-spacing:.16em;color:var(--graphite)}
.points .n i{font-style:normal;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.points a:hover .n i{transform:translateY(4px)}
.points strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,36px);line-height:1.08;letter-spacing:-.02em}
.points p{font-size:var(--t-b);line-height:1.55;color:var(--graphite);max-width:34ch}
@media (max-width:820px){.points{grid-template-columns:minmax(0,1fr)}}
/* manifesto */
.manifesto .big{font-family:var(--serif);font-size:clamp(26px,4vw,64px);line-height:1.08;letter-spacing:-.02em;max-width:23ch;margin-top:clamp(26px,3.6vw,60px)}
.manifesto .big span{color:var(--mute);transition:color .5s}
.manifesto .big span.on{color:var(--ink)}
.manifesto .big span.red.on{color:var(--grease)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,72px);margin-top:clamp(48px,7vw,120px);max-width:1180px;margin-left:auto}
.cols>*{min-width:0}
.cols.why{max-width:none;margin-left:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cols.why>div{display:grid;gap:14px;align-content:start;padding-top:16px;border-top:1px solid var(--hair)}
.manifesto .shots{margin-top:clamp(48px,7vw,110px)}
/* the feel reel in three plain steps */
.steps{grid-column:1/-1;list-style:none;margin:clamp(8px,1.6vw,24px) 0 0;padding:22px 0 0;border-top:1px solid var(--seam);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(24px,4vw,72px)}
.steps li{display:grid;gap:10px;align-content:start}
.steps span{font-family:var(--serif);font-size:var(--t-l);line-height:1.3;max-width:27ch}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.reel.dark+.film.dark{border-top:1px solid var(--seam)}

/* work: an even, aligned grid of whole frames */
.work-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px clamp(32px,6vw,110px);align-items:end;margin-bottom:clamp(36px,5vw,80px)}
.work-head>*{min-width:0}
.work-head .label{grid-column:1/-1}
.work-head h2{font-size:clamp(34px,5vw,82px)}
@media (max-width:900px){.work-head{grid-template-columns:minmax(0,1fr)}}
/* section break: one photograph across the page. The band is tall enough to show the whole sign; the picture is a little taller than the band so it can drift. */
.brk{position:relative;margin:0;height:clamp(240px,44vw,72vh);overflow:hidden;background:#161616}
.brk img{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;object-fit:cover;object-position:78% 50%;will-change:transform}
.shots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.shot{grid-column:span 2;position:relative;display:block;width:100%;max-width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--hair);transition:opacity .5s}
.shot.half{grid-column:span 3}
.shot img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.8,.2,1),filter 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.shot:hover img{scale:1.03}
/* each tile is one wedding: a link to its post, a second picture that fades in over the first, and the names on hover (always on touch screens) */
a.shot{color:inherit;text-decoration:none}
.shot .nx{position:absolute;inset:0;opacity:0;transition:scale 1.2s cubic-bezier(.2,.8,.2,1)}
.shot .nx.on{opacity:1;transition:opacity .9s ease,scale 1.2s cubic-bezier(.2,.8,.2,1)}
.shot .cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 14px;padding:34px 13px 11px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));color:#fff;font-family:var(--mono);font-size:10px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .45s;pointer-events:none}
.shot .cap b{font-weight:500}.shot .cap i{font-style:normal;opacity:.8}
.shot:hover .cap,.shot:focus-visible .cap{opacity:1}
@media (hover:none){.shot .cap{opacity:1}}
/* the layout: four columns and four rows on wide screens, two columns and eight rows on phones. Two large tiles (a, h), two upright ones (b, g)
   and four small ones (c, d, e, f), each placed by its letter. To rearrange, move the letters in grid-template-areas. */
#shots{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-template-areas:"a a b c" "a a b d" "e g h h" "f g h h";aspect-ratio:3/2}
#shots .shot{aspect-ratio:auto;width:auto;max-width:none;height:auto;min-height:0}
#shots .shot img{position:absolute;inset:0}
#shots .t-a{grid-area:a}#shots .t-b{grid-area:b}#shots .t-c{grid-area:c}#shots .t-d{grid-area:d}#shots .t-e{grid-area:e}#shots .t-f{grid-area:f}#shots .t-g{grid-area:g}#shots .t-h{grid-area:h}
@media (max-width:700px){#shots{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));grid-template-areas:"a a" "a a" "b c" "b d" "e g" "f g" "h h" "h h";aspect-ratio:3/8}}
@media (hover:hover){.shots:hover .shot:not(:hover){opacity:.45}}
@media (max-width:700px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}.shot{grid-column:span 1}.shot.half{grid-column:1/-1}.shot .cap{font-size:8.5px;letter-spacing:.1em;padding:26px 9px 8px}.shot:not(.t-large) .cap i{display:none}}
.work-more{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(20px,2.6vw,40px)}
.egg{position:relative;display:flex;align-items:center;gap:clamp(4px,.8vw,12px);min-width:0;margin-left:-11px}
.egg-b{flex:none;width:36px;height:36px;display:grid;place-items:center;font-family:var(--serif);font-size:26px;line-height:1;padding-top:9px;color:var(--mute);transition:color .35s,transform .6s cubic-bezier(.2,.8,.2,1)}
.egg-t{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.25vw,19px);line-height:1.35;color:var(--graphite);max-width:100ch;text-wrap:balance;opacity:0;visibility:hidden;filter:blur(6px);transform:translateX(-6px);transition:opacity .5s,filter .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .7s}
.egg.on .egg-b,.egg-b:focus-visible{color:var(--grease);transform:rotate(60deg)}
.egg.on .egg-t,.egg-b:focus-visible+.egg-t{opacity:1;visibility:visible;filter:blur(0px);transform:none;transition-delay:0s}
@media (hover:hover){.egg:hover .egg-b{color:var(--grease);transform:rotate(60deg)}.egg:hover .egg-t{opacity:1;visibility:visible;filter:blur(0px);transform:none;transition-delay:0s}}
@media (max-width:820px){.egg-t{position:absolute;left:11px;top:100%;width:min(46ch,calc(100vw - 2*var(--gut) - 11px));margin-top:8px}}
@media (pointer:coarse){.egg-b{width:44px;height:44px}.egg{margin-left:-15px}}
@media (pointer:coarse) and (max-width:820px){.egg-t{left:15px;width:min(46ch,calc(100vw - 2*var(--gut) - 15px))}}

/* the three-minute introduction */
.meet{position:relative;display:block;margin-top:clamp(56px,8vw,130px);aspect-ratio:2.4/1;max-width:100%;overflow:hidden;background:var(--base);color:var(--paper);text-decoration:none}
.meet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.6s cubic-bezier(.2,.8,.2,1),filter 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.meet:hover img{scale:1.03}
.meet::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 60%)}
.meet-txt{position:absolute;z-index:2;left:clamp(18px,3.4vw,56px);right:clamp(110px,14vw,220px);bottom:clamp(18px,3vw,48px);display:grid;gap:12px}
.meet-txt .label{color:rgba(245,245,243,.75)}
.meet-txt strong{font-family:var(--serif);font-weight:400;font-size:clamp(24px,4.2vw,72px);line-height:1;letter-spacing:-.025em;max-width:15ch}
.meet .play{position:absolute;z-index:2;right:clamp(18px,3.4vw,56px);bottom:clamp(18px,3vw,48px)}
.meet:hover .play{transform:scale(1.1);background:rgba(0,0,0,.45)}
@media (max-width:700px){.meet{aspect-ratio:4/3}}

/* feel reel */
.reel-grid{display:grid;gap:clamp(40px,5vw,80px)}
.reel-copy{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,3vw,44px) clamp(32px,6vw,110px);align-items:start}
.reel-copy>*{min-width:0}
.reel-copy .sect,.reel-copy>.deck{grid-column:1/-1}
.reel-screen{width:100%;max-width:min(760px,calc((100vh - 60px)*1.7778));max-width:min(760px,calc((100svh - 60px)*1.7778))}
.reel-text{align-self:center}
.reel-screen .play{width:clamp(52px,5vw,68px);backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.3)}
@media (max-width:900px){.reel-copy{grid-template-columns:minmax(0,1fr)}}
.screen-wrap{perspective:1400px}
.screen{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:#000;transform-style:preserve-3d;will-change:transform;display:block;text-decoration:none;color:#fff}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03)}
/* moving film grain over the stills. To take it out: delete this rule and set GRAIN to false in the feel reel script. */
.screen .grain{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.2;mix-blend-mode:overlay;pointer-events:none}
.screen img.on{opacity:1;transform:scale(1);transition:transform 2.6s linear}
.screen::before,.screen::after{content:"";position:absolute;left:0;right:0;height:calc(var(--bar,1)*50%);background:#000;z-index:2}
.screen::before{top:0}.screen::after{bottom:0}
.screen-ui{position:absolute;inset:0;z-index:3;display:grid;place-items:center}
.play{width:clamp(64px,8vw,104px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.8);display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(0,0,0,.2);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}
.screen:hover .play{transform:scale(1.1);background:rgba(0,0,0,.45)}
.play::before{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.tc{position:absolute;z-index:3;left:14px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.tc.r{left:auto;right:14px}
.reel-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:18px;justify-content:space-between;align-items:baseline}
.reel-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.reel-meta div{display:flex;flex-wrap:wrap;gap:6px 22px}
.reel-meta a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-underline-offset:5px}

/* colour */
.split{position:relative;aspect-ratio:3/2;max-width:100%;overflow:hidden;touch-action:pan-y;background:var(--hair);--x:50%}
.split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.split .co{clip-path:inset(0 0 0 var(--x))}
.split .bar{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:#fff;mix-blend-mode:difference}
.split .tag{position:absolute;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#fff;mix-blend-mode:difference;text-transform:uppercase}
.split .tag.l{left:16px}.split .tag.r{right:16px}
.split input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.colour-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,90px);align-items:end}
@media (max-width:900px){.colour-grid{grid-template-columns:minmax(0,1fr)}}
.colour-side{display:grid;gap:22px}
.swap{display:flex;gap:10px;margin-top:6px}
.swap button{width:84px;aspect-ratio:3/2;overflow:hidden;opacity:.45;transition:opacity .3s;outline-offset:2px}
.swap button[aria-pressed="true"]{opacity:1;outline:1px solid var(--ink)}
.swap img{width:100%;height:100%;object-fit:cover}

/* film look */
.film-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(26px,3.4vw,56px) clamp(32px,5vw,96px);align-items:start}
.film-grid>.sect{grid-column:1/-1}
@media (max-width:900px){.film-grid{grid-template-columns:minmax(0,1fr)}}
.film-copy{display:grid;gap:22px;position:sticky;top:120px}
@media (max-width:900px){.film-copy{position:static}}
.spec{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:18px;border-top:1px solid var(--seam)}
.test{position:relative;overflow:hidden;cursor:none}
.test img{width:100%}
.test .side{position:absolute;top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 10px;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s}
.test .side.l{left:14px}.test .side.r{right:14px}
.test.shown .side{opacity:1;transform:none}
.loupe{position:absolute;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(0,0,0,.6);background-repeat:no-repeat;pointer-events:none;opacity:0;transition:opacity .25s}
.test:hover .loupe{opacity:1}
@media (hover:none){.loupe{display:none}.test{cursor:auto}}
.quiz{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;margin-top:18px}
.quiz p{font-family:var(--serif);font-size:var(--t-l);line-height:1.3;max-width:34ch}
.tool{margin-bottom:clamp(40px,6vw,96px);display:grid;gap:14px}
.tool img{width:100%;height:auto}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}

/* book */
.book{height:300vh}
.book-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding-block:clamp(84px,10vh,120px) clamp(28px,5vh,56px);overflow:hidden}
.book-head,.rule{position:relative;z-index:1}
#bookGL{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.gl-on #bookGL{opacity:1}
.gl-wait .vol{opacity:0}
.gl-on .vol{display:none}
.book-head{display:flex;flex-wrap:wrap;gap:16px 48px;justify-content:space-between;align-items:flex-end}
.book-ttl{display:grid;gap:clamp(8px,1vw,14px)}
.book-head .deck{max-width:none;font-size:clamp(20px,2.1vw,30px)}
@media (min-width:900px) and (max-height:780px){.book-pin{padding-block:76px 22px}.book-head .sect{font-size:clamp(30px,4.2vw,58px)}.book-head .deck{font-size:clamp(18px,1.8vw,24px)}.specs{margin-top:8px}}
.stage{display:grid;place-items:center;perspective:2400px;min-height:0}
.vol{--w:min(36vw,60vh,560px);--m:calc(var(--w)*.07);--b:calc(var(--w)*.045);--t:calc(var(--w)*.04);position:relative;width:calc(var(--w)*2);height:calc(var(--w)*.6875);transform-style:preserve-3d;will-change:transform}
.vol-shadow{position:absolute;left:50%;top:6%;width:50%;height:100%;background:rgba(0,0,0,.28);filter:blur(28px);transform:translateZ(-30px);transform-origin:left center}
.leaf,.vol-base{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff center/cover no-repeat;overflow:hidden}
.face.bk{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 14%)}
.face.bk::after{background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,0) 14%)}
.linen{background:#2c2c2e;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);display:grid;place-items:center}
/* the album: black linen, names set small, thick flush-mount block */
.blinen{background:#1b1b1d;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);display:grid;place-items:center}
.vol .nm{font-family:var(--sans);font-style:normal;font-weight:400;font-size:calc(var(--w)*.026);letter-spacing:.18em;color:rgba(255,255,255,.86);text-shadow:none;white-space:nowrap}
.edge{position:absolute;display:block;background:repeating-linear-gradient(180deg,#f7f6f2 0 2px,#cfcec8 2px 3px)}
.edge.f{left:0;top:100%;width:100%;height:var(--b);transform-origin:top;transform:rotateX(-90deg)}
.edge.r{left:100%;top:0;width:var(--b);height:100%;transform-origin:left;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#e6e5e0 0 2px,#c2c1bb 2px 3px)}
.vol-left{position:absolute;left:0;top:0;width:50%;height:100%;transform-style:preserve-3d}
.vol-left .edge{opacity:0}
/* its presentation box: charcoal linen clamshell, lid hinged along the back */
.case{position:absolute;left:calc(50% - var(--m));top:calc(var(--m)*-1);width:calc(var(--w) + var(--m)*2);height:calc(var(--w)*.6875 + var(--m)*2);transform-style:preserve-3d;will-change:transform}
.case i{position:absolute;display:block;opacity:var(--co,1)}
.case .linen{background-color:#38383b}
.case .l-out{display:grid;place-items:center}
.tray,.lid{position:absolute;inset:0;transform-style:preserve-3d}
.tray{--d:calc(var(--b) + 10px);--z:8px}
.lid{--d:var(--t);--z:var(--t);transform-origin:50% 0;transform:translateZ(8px) rotateX(var(--lid,0deg))}
.c-floor{inset:0;background:#0e0e0f;transform:translateZ(calc(var(--b)*-1 - 1px))}
.c-rim{inset:0;transform:translateZ(8px);--i:calc(var(--m) - 9px);--o:calc(100% - var(--m) + 9px);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--i) var(--i),var(--i) var(--o),var(--o) var(--o),var(--o) var(--i),var(--i) var(--i))}
.c-wall.f{left:0;top:100%;width:100%;height:var(--d);transform-origin:top;transform:translateZ(var(--z)) rotateX(-90deg);filter:brightness(.72)}
.c-wall.l{left:0;top:0;width:var(--d);height:100%;transform-origin:left;transform:translateZ(var(--z)) rotateY(90deg);filter:brightness(.55)}
.c-wall.r{left:100%;top:0;width:var(--d);height:100%;transform-origin:left;transform:translateZ(var(--z)) rotateY(90deg);filter:brightness(.55)}
.l-out{inset:0;transform:translateZ(var(--t));backface-visibility:hidden;-webkit-backface-visibility:hidden}
.l-in{inset:0;transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.l-in::after{content:"";position:absolute;inset:var(--m);background:rgba(0,0,0,.34);box-shadow:inset 0 3px 14px rgba(0,0,0,.65)}
.linen span{font-family:var(--serif);font-size:calc(var(--w)*.034);letter-spacing:.3em;color:rgba(255,255,255,.62);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.cover{inset:-6px -6px -6px -2px;border-radius:0 3px 3px 0}
.cover.bk{inset:-6px -2px -6px -6px;border-radius:3px 0 0 3px}
.endp{background:#1b1b1d;display:grid;place-items:end start;padding:7%}
.endp span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#77777a}
.half-l{background-size:200% 100%;background-position:left center}
.half-r{background-size:200% 100%;background-position:right center}
.rule{justify-self:center;display:grid;gap:8px;justify-items:center;width:100%}
.rule i{display:block;height:9px;border:1px solid var(--ink);border-top:0;width:var(--rw,200px);max-width:100%}
.rule b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.specs{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:center;margin-top:14px}
.specs li{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
@media (max-width:700px){.vol{--w:min(44vw,40vh)}}

/* approach */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(48px,7vw,130px)}
.duo>div{display:grid;gap:22px;align-content:start;min-width:0}
.duo figure{aspect-ratio:3/2;overflow:hidden;margin-bottom:12px}
.duo figure img{width:100%;height:100%;object-fit:cover}

/* kind words */
.words-grid{display:grid;gap:clamp(26px,3.2vw,52px)}
.tabs{display:flex;flex-wrap:wrap;gap:4px clamp(22px,3.2vw,52px);padding-bottom:clamp(12px,1.4vw,20px);border-bottom:1px solid var(--hair)}
.tabs button{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,30px);line-height:1.5;color:var(--mute);transition:color .3s;text-align:left}
.tabs button[aria-selected="true"]{color:var(--ink)}
/* the quotes are a dark band: the couple's photograph fills its right side from top to bottom, out of focus, dimmed and grainy,
   and fades in a straight line toward the left. The words start on plain black and their line ends run over the fading picture. */
#kind-words{position:relative;overflow:hidden;padding-block:clamp(64px,7.5vw,120px);--ink:var(--silver);--hair:rgba(235,235,231,.2);--mute:rgba(235,235,231,.45)}
#kind-words::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;opacity:.09}
#kind-words .head,#kind-words .tabs{position:relative;z-index:1}
#kind-words .head{margin-bottom:clamp(26px,3.4vw,56px)}
.voice{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,34px);align-content:start;padding-top:clamp(8px,1.4vw,22px);min-height:clamp(290px,30.2vw,450px)}
.voice-pic{position:absolute;z-index:0;top:0;bottom:0;right:0;width:70%;overflow:hidden;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.04) 10%,rgba(0,0,0,.13) 22%,rgba(0,0,0,.3) 36%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.8) 66%,#000 82%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.04) 10%,rgba(0,0,0,.13) 22%,rgba(0,0,0,.3) 36%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.8) 66%,#000 82%)}
.voice-pic img{display:block;width:100%;height:100%;object-fit:cover;scale:1.05;filter:blur(4px) saturate(.9) brightness(.8)}
.voice-pic::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.7 .7 .7 0 -.55  .7 .7 .7 0 -.55  .7 .7 .7 0 -.55  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;mix-blend-mode:overlay;opacity:.6}
.quote{position:relative;z-index:1;margin:0;max-width:min(64%,24em);font-family:var(--serif);font-style:italic;font-size:clamp(23px,2.9vw,44px);line-height:1.24;letter-spacing:-.012em;text-indent:-.44em;padding-left:.44em;text-wrap:pretty}
.by{position:relative;z-index:1;display:grid;gap:7px;align-content:start;padding-left:calc(.44*clamp(23px,2.9vw,44px))}
.by strong{font-family:var(--serif);font-weight:400;font-size:var(--t-l);line-height:1.2}
.by strong:empty{display:none}
.voice-pic img,.quote,.by{transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.voice.out .voice-pic img,.voice.out .by{opacity:0}
.voice.out .quote{opacity:0;transform:translateY(14px)}
@media (max-width:700px){.voice{min-height:0;padding-top:4px}.voice-pic{width:100%;opacity:.4}.quote{max-width:none}}

/* journal */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:.8em 1.2em;border:1px solid var(--hair);border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;width:100%;text-align:left;text-decoration:none;padding:clamp(16px,2vw,28px) 0;border-bottom:1px solid var(--hair);transition:padding .5s cubic-bezier(.2,.8,.2,1),color .3s}
.row strong{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4.4vw,70px);line-height:1;letter-spacing:-.025em;min-width:0}
.row span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);text-align:right}
.rows:hover .row{color:var(--mute)}
.rows:hover .row:hover{color:var(--ink);padding-left:clamp(8px,2vw,34px)}
.rows-more{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;margin-top:clamp(20px,2.6vw,40px)}
.peek{position:fixed;left:0;top:0;z-index:40;width:min(30vw,380px);aspect-ratio:3/2;pointer-events:none;overflow:hidden;opacity:0;clip-path:inset(50% 0 50% 0);transition:opacity .3s,clip-path .5s cubic-bezier(.2,.8,.2,1)}
.peek.on{opacity:1;clip-path:inset(0)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (hover:none){.peek{display:none}}
@media (max-width:700px){.row{grid-template-columns:minmax(0,1fr);gap:6px}.row span{text-align:left}}

/* story overlay */
.story{position:fixed;inset:0;z-index:80;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;transform:translateY(101%);transition:transform .8s cubic-bezier(.76,0,.24,1),visibility 0s .8s;visibility:hidden}
.story.open{transform:none;visibility:visible;transition:transform .8s cubic-bezier(.76,0,.24,1),visibility 0s}
.story-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding-block:18px;background:rgba(245,245,243,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.story-in{padding-block:clamp(28px,5vw,72px) 120px;display:grid;gap:clamp(28px,4vw,64px)}
.story h2{font-size:clamp(44px,9vw,150px)}
.story .body{font-family:var(--serif);font-size:var(--t-l);line-height:1.45;color:var(--ink);max-width:46ch}
.gal{columns:3 280px;column-gap:14px}
.gal img{width:100%;margin-bottom:14px;break-inside:avoid}
.story-acts{display:flex;gap:clamp(16px,3vw,34px);align-items:center}
.x{text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 0}

/* prices */
.build{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:start}
@media (max-width:900px){.build{grid-template-columns:minmax(0,1fr)}}
.group{padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--ink)}
.group>.label{margin-bottom:22px}
.hours{display:flex;align-items:baseline;gap:14px;font-family:var(--serif)}
.hours output{font-size:clamp(72px,11vw,170px);line-height:.85;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hours span{font-size:var(--t-l);font-style:italic;color:var(--graphite)}
.range{width:100%;margin:26px 0 8px;-webkit-appearance:none;appearance:none;background:none;height:34px;cursor:ew-resize}
.range::-webkit-slider-runnable-track{height:1px;background:var(--ink)}
.range::-moz-range-track{height:1px;background:var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--ink);margin-top:-15px;border:8px solid var(--paper);box-shadow:0 0 0 1px var(--ink)}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:8px solid var(--paper);box-shadow:0 0 0 1px var(--ink)}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--graphite);padding:0 10px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--hair);cursor:pointer;transition:opacity .3s}
.opt:last-child{border-bottom:0}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .box{width:22px;height:22px;border:1px solid var(--ink);display:grid;place-items:center;transition:background .2s}
.opt .box.rd{border-radius:50%}
.opt .box::after{content:"";width:10px;height:10px;background:var(--paper);transform:scale(0);transition:transform .3s cubic-bezier(.2,.8,.2,1);border-radius:inherit}
.opt input:checked+.box{background:var(--ink)}
.opt input:checked+.box::after{transform:scale(1)}
.opt input:focus-visible+.box{outline:2px solid var(--grease);outline-offset:3px}
.opt .t{min-width:0}
.opt .t b{font-weight:400;font-family:var(--serif);font-size:var(--t-l);line-height:1.25;display:block}
.opt .t small{font-size:13px;color:var(--graphite);display:block;line-height:1.45;margin-top:3px}
.opt .pr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.opt.off{opacity:.38;cursor:not-allowed}
.slip{position:sticky;top:110px;background:#fff;padding:clamp(22px,2.6vw,38px);display:grid;gap:18px;box-shadow:0 30px 80px -40px rgba(0,0,0,.35)}
@media (max-width:900px){.slip{position:relative;top:0}}
.slip::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px;background:radial-gradient(circle at 7px 0,transparent 5px,#fff 5.5px) -7px 0/14px 7px repeat-x}
.lines{display:grid;gap:9px}
.lines div{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.lines div span:last-child{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sum{border-top:1px dashed var(--mute);padding-top:16px;display:grid;gap:6px}
.sum .was{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--graphite)}
.sum .was s{font-variant-numeric:tabular-nums}
.sum .promo{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grease)}
.sum .now{font-family:var(--serif);font-size:clamp(52px,6.4vw,96px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fine{font-size:12px;color:var(--graphite);line-height:1.5}

/* contact */
.chat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,120px)}
@media (max-width:900px){.chat{grid-template-columns:minmax(0,1fr)}}
.chat h2{font-size:clamp(56px,10vw,170px);line-height:.86}
.chat-side{display:grid;gap:26px;align-content:start}
.tel{font-family:var(--serif);font-size:clamp(26px,3vw,44px);letter-spacing:-.01em;user-select:all}
.soc{display:flex;flex-wrap:wrap;gap:8px 24px}
.soc a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-underline-offset:5px}
form{display:grid;gap:4px}
.f{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--seam);transition:border-color .3s}
.f:focus-within{border-color:var(--silver)}
.f label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.f input,.f textarea{font:inherit;font-family:var(--serif);font-size:var(--t-l);color:var(--silver);background:none;border:0;padding:4px 0;width:100%;resize:vertical;outline:none;color-scheme:dark}
.f textarea{min-height:8.5em;line-height:1.35}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 28px}
.send{margin-top:26px;display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center}
.sent{font-size:14px;color:#a9a9a6;max-width:44ch}
.form-note{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);line-height:1.7}
.sprout{background:var(--paper);color:var(--ink);padding:clamp(20px,3vw,44px);border-radius:3px;min-height:320px;align-self:start}
.sprout iframe{width:100%;border:0}
.sprout .label{color:var(--graphite)}
.sprout .body{color:var(--graphite)}
.est{display:grid;gap:12px;justify-items:start;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--hair)}
.est pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap}

footer{padding-block:clamp(48px,7vw,110px) calc(clamp(56px,6vw,80px) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--seam)}
footer .mega{width:100%;filter:invert(1);opacity:.94}
.foot a{color:inherit;text-underline-offset:4px}
.foot{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;margin-top:clamp(26px,4vw,60px);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}

/* phones turned sideways: short and wide. Photograph and headline share the first screen, the book sits beside its words, nothing stands taller than the screen. */
@media (orientation:landscape) and (max-height:560px){
.menu{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 40px;padding-top:88px;padding-bottom:22px}
.menu a{font-size:clamp(26px,5vw,36px)}
.menu a.sub{grid-column:1/-1;margin-top:14px}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(20px,3.4vw,40px);padding-top:72px;padding-bottom:26px}
.hero-frame{grid-column:1;grid-row:1;aspect-ratio:auto;height:calc(100vh - 118px);height:calc(100svh - 118px);min-height:180px}
.hero-bar{grid-column:1;grid-row:2;padding-block:8px 0;justify-content:flex-end}
.hero-bar .label{display:none}
.hero-cta{gap:10px 16px}
.hero-foot{grid-column:2;grid-row:1/3;align-self:center;grid-template-columns:minmax(0,1fr);gap:16px}
.hero h1{font-size:clamp(26px,4.1vw,40px)}
.hero-side{gap:16px}
.hero-side p{font-size:16px}
.split{width:min(100%,calc((100vh - 36px)*1.5));margin-inline:auto}
.tool img{width:auto;max-width:100%;max-height:calc(100vh - 44px);justify-self:center}
.book-pin{grid-template-columns:minmax(0,32%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(16px,3vw,36px);padding-block:64px 12px}
.book-head{grid-column:1;grid-row:1/3;display:grid;align-content:center;gap:12px}
.book-head .sect{font-size:clamp(24px,3.6vw,34px)}
.book-head .deck{font-size:15px;line-height:1.25}
.book-head .body{font-size:13px;line-height:1.55}
.book-head .bk-opt{display:none}
.stage{grid-column:2;grid-row:1}
.rule{grid-column:2;grid-row:2}
.specs{margin-top:6px;gap:3px 16px}
.specs li{font-size:9px}
.vol{--w:min(24vw,46vh)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- pages other than the home page ---------- */
.nav li a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.as-h2{font-size:var(--t-h2)}
.chat h1{font-size:clamp(56px,10vw,170px);line-height:.86}
.work-head h1{font-size:clamp(34px,5vw,82px)}
#about .work-head{align-items:start}
.story-more{margin-top:1.4em}
.arows{padding-top:clamp(56px,8vw,130px)}
.arow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px clamp(32px,6vw,110px);padding-block:clamp(48px,6.5vw,104px);border-top:1px solid var(--hair);align-items:start}
.arow>*{min-width:0}
.arow .ah{display:grid;gap:clamp(12px,1.4vw,20px);position:sticky;top:110px}
.arow h2{font-size:clamp(30px,3.8vw,60px);line-height:1}
.arow .at .body{max-width:62ch}
.arow .at figure,.arow .at .say,.arow .at .more{margin-top:clamp(22px,2.6vw,38px)}
.arow figure{display:grid;gap:10px}
.arow figure img{width:100%;height:auto;display:block}
.arow figure.win img{filter:drop-shadow(0 18px 36px rgba(0,0,0,.16))}
/* the two screenshots develop like every other picture and end with their shadow. Start and end name the same filters in the same order, which is what lets a browser blend them (see build/patch_develop.py); "set" is the plain end state */
.js .arow figure.win .dev{filter:brightness(1.9) contrast(.25) blur(8px) drop-shadow(0 18px 36px rgba(0,0,0,0))}
.js .arow figure.win .dev.in{filter:brightness(1) contrast(1) blur(0px) drop-shadow(0 18px 36px rgba(0,0,0,.16))}
.js .arow figure.win .dev.set{filter:drop-shadow(0 18px 36px rgba(0,0,0,.16))}
.arow .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.arow .say{font-family:var(--serif);font-size:var(--t-l);line-height:1.35;color:var(--ink);max-width:40ch}
.about-end{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;padding-block:clamp(44px,6vw,96px) clamp(72px,10vw,150px);border-top:1px solid var(--hair)}
@media (max-width:900px){.arow{grid-template-columns:minmax(0,1fr)}.arow .ah{position:static}}

/* ---------- about: the longer read ---------- */
.say{font-family:var(--serif);font-size:var(--t-l);line-height:1.35;color:var(--ink);max-width:40ch}
.dark .say{color:var(--silver)}
.at .say+.body{margin-top:1.1em}
.ghero{padding-bottom:clamp(56px,8vw,130px)}
.ghero h1.sect{font-size:var(--t-h1);line-height:.9}
.ghero-top{display:grid;gap:clamp(18px,2vw,30px)}
.ghero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px clamp(32px,6vw,110px);align-items:start;margin-top:clamp(36px,5vw,80px)}
.ghero-in>*{min-width:0}
.ghero .meet{margin-top:clamp(40px,5.5vw,90px)}
.gidx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px clamp(24px,3vw,56px);margin-top:clamp(56px,8vw,130px);scroll-margin-top:96px}
.gidx>div{display:grid;align-content:start;padding-top:16px;border-top:1px solid var(--ink)}
.gidx strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,36px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px}
.gidx a{display:block;padding:.66em 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--graphite);transition:color .3s,padding .45s cubic-bezier(.2,.8,.2,1)}
.gidx a:hover{color:var(--ink);padding-left:8px}
.chap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:end;padding-block:clamp(72px,10vw,160px) clamp(36px,5vw,80px)}
.arows{padding-top:0;padding-bottom:clamp(8px,2vw,30px)}
.arows.dark{padding-bottom:clamp(40px,6vw,100px)}
.dark .arow{border-top-color:var(--seam)}
.arow h3{font-size:clamp(30px,3.8vw,60px);line-height:1}
.arow .at>.label{margin-top:clamp(30px,3.4vw,52px)}
.arow .at .facts,.arow .at .plist,.arow .at .stats,.arow .at .thirds,.arow .at .vrows,.arow .at .note{margin-top:clamp(22px,2.6vw,38px)}
.arow .at>.label+*{margin-top:14px}
.arow .at>:first-child{margin-top:0}
.arow.has-wide{display:block}
.arow .ar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px clamp(32px,6vw,110px);align-items:start}
.arow .ar>*{min-width:0}
.arow .wide{margin-top:clamp(34px,4.4vw,68px)}
.facts,.plist,.vrows{border-top:1px solid var(--ink);max-width:62ch}
.facts li{padding:.78em 0;border-bottom:1px solid var(--hair);font-family:var(--serif);font-size:var(--t-l);line-height:1.3}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:.78em 0;border-bottom:1px solid var(--hair);font-family:var(--serif);font-size:var(--t-l);line-height:1.3}
.plist b{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.08em}
.note{font-size:13px;line-height:1.6;color:var(--graphite);max-width:58ch;padding-left:16px;border-left:2px solid var(--grease)}
.vrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:.9em 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;transition:padding .5s cubic-bezier(.2,.8,.2,1)}
.vrow:hover{padding-left:10px}
.vrow .pl{width:38px;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}
.vrow .pl::before{content:"";border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.vrow strong{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,32px);line-height:1.08;letter-spacing:-.02em;min-width:0}
.vrow span.t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);text-align:right}
.vrow.th{grid-template-columns:clamp(124px,15vw,196px) minmax(0,1fr) auto;gap:8px clamp(16px,2vw,28px);padding:.75em 0}
.vrow .thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.vrow .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vrow.th:hover .thumb img{transform:scale(1.05)}
.vrow .thumb .pl{position:absolute;inset:0;margin:auto;width:34px;color:#fff;background:rgba(0,0,0,.32)}
.dark .facts,.dark .plist,.dark .vrows{border-top-color:var(--silver)}
.dark .facts li,.dark .vrow{border-bottom-color:var(--seam)}
.dark .vrow span.t{color:var(--smoke)}
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px clamp(14px,1.6vw,26px)}
.gcards>.label{grid-column:1/-1}
.gcard{display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit;min-width:0}
.gcard figure{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--silver)}
.arow .gcard img{width:100%;height:100%;object-fit:cover;transition:scale 1.6s cubic-bezier(.2,.8,.2,1),filter 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.gcard:hover img{scale:1.03}
.gcard figure.ph{display:grid;place-items:center;background:none;border:1px solid var(--hair);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.gcard strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,36px);line-height:1.05;letter-spacing:-.02em}
.gcard span.t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.7vw,10px)}
.mosaic figure{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--base)}
.mosaic figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.arow .mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mosaic .cap{grid-column:1/-1;margin-top:6px}
.arow figure.shot-s{max-width:520px}
/* the 3D book on the About page: its own short text gives way to the fuller text below it, and its small line ("Optional") carries the topic number */
#aboutView .book-head>.body,[data-page="about"] .book-head>.body{display:none}
#aboutView .book-ttl .sect i::before,[data-page="about"] .book-ttl .sect i::before{content:"08 · "}
#wedding-books{padding-top:clamp(28px,4vw,64px)}
/* part three opens by saying there are no preset packages; the package builder closes it */
.own{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px clamp(32px,6vw,110px);align-items:start;padding-bottom:clamp(36px,5vw,80px)}
.own>*{min-width:0}
.own .say{text-wrap:balance}
.own .more{margin-top:clamp(18px,2.2vw,30px)}
@media (max-width:900px){.own{grid-template-columns:minmax(0,1fr)}}
.held{display:grid;place-items:center;min-height:clamp(120px,14vw,200px);padding:24px;border:1px solid var(--hair);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);text-align:center;max-width:62ch}
.arow .at .held{margin-top:clamp(22px,2.6vw,38px)}
.arow .at>.held:first-child{margin-top:0}
.arow .meet.map{margin-top:clamp(34px,4.4vw,68px);aspect-ratio:21/9}
.meet.map img{object-position:50% 58%}
.meet.map .go{position:absolute;z-index:2;right:clamp(18px,3.4vw,56px);bottom:clamp(18px,3vw,48px);font-family:var(--mono);font-size:clamp(20px,2.4vw,34px);line-height:1}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,56px);border-top:1px solid var(--ink)}
.stats li{display:grid;gap:12px;align-content:start;padding:clamp(18px,2.2vw,32px) 0;border-bottom:1px solid var(--hair)}
.stats b{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,72px);line-height:.9;letter-spacing:-.03em;white-space:nowrap}
.stats b small{font-size:.36em;letter-spacing:0;margin-left:.25em}
.stats span{color:var(--graphite);max-width:30ch}
.thirds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.4vw,44px)}
.thirds li{display:grid;gap:14px;align-content:start}
.thirds b{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.2vw,86px);line-height:.9;letter-spacing:-.03em}
.thirds i{display:block;height:3px;background:var(--hair);position:relative}
.thirds i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--f);background:var(--ink)}
.thirds span{color:var(--graphite);max-width:22ch}
@media (max-width:1000px){.gidx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ghero-in,.arow .ar{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .gcards{grid-template-columns:minmax(0,1fr)}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic figure:first-child{grid-row:auto;aspect-ratio:4/3}
  .arow .meet.map{aspect-ratio:4/3}
  .vrow{grid-template-columns:auto minmax(0,1fr)}
  .vrow span.t{grid-column:2;text-align:left}
  .vrow.th{grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:center}
  .vrow.th .thumb{grid-row:1/span 2}
  .vrow.th strong{align-self:end}
  .vrow.th span.t{align-self:start}
  .thirds{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:560px){.gidx{grid-template-columns:minmax(0,1fr);gap:34px}.stats{grid-template-columns:minmax(0,1fr)}}