/* Michele Fortmann Photography · "Darkroom poster" · WebCrave 2026 — see DESIGN.md */
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Mr Dafoe";src:url(../fonts/mr-dafoe-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --paper:#EFECE6; --paper-2:#E4DFD7; --print:#FAF8F4; --ink:#141212; --ink-2:#221E1D; --mute:#5A524E;
  --red:#B3121B; --red-d:#C8151F; --red-deep:#7A0C12; --red-lite:#EA5A62;
  --hair:rgba(20,18,18,.14); --hair-d:rgba(250,248,244,.16);
  --script:"Mr Dafoe","Brush Script MT",cursive;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Courier Prime","Courier New",ui-monospace,monospace;
  --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
  --e-out:cubic-bezier(.22,.8,.2,1); --e-pan:cubic-bezier(.7,0,.2,1);
  --hdr:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.narrow{max-width:820px}
.center{display:flex;justify-content:center;margin-top:56px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{opacity:.7}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--ink);color:var(--print);padding:12px 18px;font:700 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
body::after{content:"";position:fixed;inset:0;z-index:210;pointer-events:none;opacity:.12;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type */
.lbl{font:400 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.lbl-red{color:var(--red);font-weight:700}
.script{font-family:var(--script);color:var(--red);font-weight:400;line-height:.85;display:block;letter-spacing:0;white-space:nowrap}
.h1{font-family:var(--serif);font-size:clamp(44px,7vw,100px);line-height:1}
.h2{font-family:var(--serif);font-size:clamp(32px,4.4vw,58px);line-height:1.05}
.big{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.3}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transition:transform .9s var(--e-out)}
html.js:not(.rm) .rv .w>span{transform:translateY(105%)}
html.js:not(.rm) .rv.in .w>span{transform:none}
html.js:not(.rm) .fu{opacity:0;transform:translateY(18px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
html.js:not(.rm) .fu.in{opacity:1;transform:none}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 24px;background:var(--red);color:var(--print);text-decoration:none;
  font:700 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;overflow:hidden;isolation:isolate;border:1px solid var(--red)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--e-out)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arr{width:24px;height:12px;flex:none;transition:transform .45s var(--e-out)}
.btn:hover .arr{transform:translateX(5px)}
.btn-sm{min-height:44px;padding:0 18px;font-size:12px}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line::before{background:var(--ink)}
.btn-line:hover,.btn-line:focus-visible{color:var(--print)}
.btn-print{background:var(--print);color:var(--ink);border-color:var(--print)}
.btn-print::before{background:var(--red)}
.btn-print:hover,.btn-print:focus-visible{color:var(--print)}
.btn-ghost{background:transparent;color:var(--print);border-color:rgba(250,248,244,.6)}
.btn-ghost::before{background:var(--print)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ink)}
.cta-row,.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* loader + curtain */
#loader{display:grid;place-items:center;transition:transform .9s var(--e-pan)}
#loader .sig{width:min(620px,78vw);color:var(--print);transition:clip-path 1.5s cubic-bezier(.45,.05,.3,1)}
#loader .lg{width:100%;height:auto;display:block}
#loader .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
html.first #loader.go .sig{clip-path:inset(0 0 0 0)}
html.first #loader.go .bar{transform:scaleX(1)}
#loader.up{transform:translateY(-100%)}
#curtain{display:grid;place-items:center;transform:translateY(100%);transition:transform .6s var(--e-pan)}
#curtain.cover{visibility:visible;transform:none}
#curtain.lift{visibility:visible;transform:translateY(-100%)}
#curtain .cw{font-family:var(--script);color:var(--print);font-size:clamp(90px,15vw,220px);line-height:1;opacity:0;transition:opacity .3s}
#curtain.cover .cw:not(:empty){opacity:1;transition-delay:.25s}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top,0px);color:var(--print);transition:background-color .35s,color .35s,border-color .35s;border-bottom:1px solid transparent}
.hdr.solid,.hdr.mm-open{background:var(--paper);color:var(--ink);border-bottom-color:var(--hair)}
.hdr.mm-open{background:var(--ink);color:var(--print);border-bottom-color:var(--hair-d)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;gap:28px;padding-left:var(--gl);padding-right:var(--gr);max-width:1480px;margin:0 auto}
.brand{display:block;flex:none;padding:10px 0}
.brand .logo{width:clamp(150px,13vw,190px);height:auto;display:block}
.nav{margin-left:auto}
.nav>ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav li{position:relative;display:flex;align-items:center}
.nav>ul>li>a{position:relative;display:block;padding:12px 10px;text-decoration:none;font:400 12.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav .brush{position:absolute;left:8px;right:8px;bottom:4px;height:7px;width:calc(100% - 16px);color:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.nav a:hover .brush,.nav a:focus-visible .brush,.nav a[aria-current] .brush{transform:none}
.dd-btn{width:28px;height:44px;display:grid;place-items:center;margin-left:-8px}
.dd-btn svg{width:10px;height:6px;transition:transform .35s var(--e-out)}
.has-dd.open .dd-btn svg{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:-12px;width:330px;list-style:none;margin:8px 0 0;padding:10px;background:var(--paper);color:var(--ink);border:1px solid var(--hair);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--e-out),visibility 0s .4s}
.has-dd.open .dd{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--e-out)}
.dd li{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .4s var(--e-out)}
.has-dd.open .dd li{opacity:1;transform:none}
.has-dd.open .dd li:nth-child(2){transition-delay:.05s}.has-dd.open .dd li:nth-child(3){transition-delay:.1s}.has-dd.open .dd li:nth-child(4){transition-delay:.15s}
.dd a{display:flex;align-items:center;gap:14px;padding:8px;text-decoration:none}
.dd a:hover,.dd a:focus-visible,.dd a[aria-current]{background:var(--paper-2)}
.dd-ph{position:relative;width:64px;height:48px;flex:none;overflow:hidden;background:var(--paper-2)}
.dd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dd-ph .grey{transition:opacity .6s}
.dd a:hover .grey,.dd a:focus-visible .grey{opacity:0}
.dd-t{display:flex;flex-direction:column;line-height:1.25}
.dd-t b{font:400 19px var(--serif)}
.dd-t i{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--mute)}
.hdr-act{display:flex;align-items:center;gap:10px}
.hdr-call{width:44px;height:44px;display:grid;place-items:center}
.hdr-call svg{width:20px;height:20px}
.hdr .hdr-book{border-color:var(--red)}
.burger{display:none;align-items:center;gap:12px;height:44px;padding:0 0 0 10px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bl{position:relative;width:30px;height:14px;display:block}
.bl i{position:absolute;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--e-out),width .3s,top .3s .1s}
.bl i:first-child{top:2px;width:30px}.bl i:last-child{top:11px;width:18px}
.burger[aria-expanded=true] .bl i{top:6.5px;width:26px;transition:top .25s,width .25s,transform .45s .2s var(--e-out)}
.burger[aria-expanded=true] .bl i:first-child{transform:rotate(45deg)}
.burger[aria-expanded=true] .bl i:last-child{transform:rotate(-45deg)}
.callpop[hidden]{display:none}
.callpop{position:absolute;right:var(--gr);top:calc(100% + 6px);width:340px;padding:22px;background:var(--paper);color:var(--ink);border:1px solid var(--hair);display:grid;gap:12px}
.cp-num{font:400 30px var(--serif)}
.cp-row{display:flex;flex-wrap:wrap;gap:8px}
.cp-x{position:absolute;right:6px;top:6px;width:44px;height:44px;font-size:24px}

/* mobile menu */
.mm{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--print);transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--e-pan),visibility 0s .7s;overscroll-behavior:contain;overflow-y:auto}
.mm.open{transform:none;visibility:visible;transition:transform .7s var(--e-pan)}
.mm-in{min-height:100%;padding:calc(var(--hdr) + 28px + env(safe-area-inset-top,0px)) var(--gr) calc(28px + env(safe-area-inset-bottom,0px)) var(--gl);display:flex;flex-direction:column;gap:30px}
.mm-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mm-links a{display:inline-block;padding:4px 0;text-decoration:none;font:italic 400 clamp(38px,9vw,64px)/1.1 var(--serif);
  opacity:0;transform:translateY(30px) rotate(calc((var(--i) - 2.5) * 1.2deg));transition:opacity .5s,transform .7s var(--e-out),color .3s}
.mm.open .mm-links a{opacity:1;transform:rotate(calc((var(--i) - 2.5) * .6deg));transition-delay:calc(.25s + var(--i) * .06s)}
.mm-links a[aria-current]{color:var(--red-d)}
.mm-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mm-chips .lbl{width:100%;color:var(--red-lite)}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--hair-d);text-decoration:none;font:400 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.mm-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 26px;font:400 13px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mm-foot a{min-height:44px;display:inline-flex;align-items:center}
html.mm-lock{overflow:hidden}

@media (max-width:1080px){
  .nav,.hdr-call{display:none}
  .hdr-act{margin-left:auto}
  .burger{display:inline-flex}
}
@media (max-width:560px){ .hdr-book{display:none} .bw{display:none} .burger{padding:0 0 0 0;width:44px;justify-content:flex-end} }
@media (min-width:1081px){ .mm{display:none} }

/* frames */
.ph-photo img,.sl img,.cv-ph img,.next-ph img{width:100%;height:100%;object-fit:cover}
.grey{transition:opacity .9s ease}

/* HERO darkroom */
.hero{position:relative;height:100svh;min-height:600px;max-height:1100px;background:var(--ink);color:var(--print);overflow:hidden}
.hero-frames{position:absolute;inset:-6% 0 0;will-change:transform}
.sl{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.sl.on{opacity:1;z-index:1}
.sl img{position:absolute;inset:0}
.sl .sl-c{transform:scale(1.08);transition:transform 7.5s cubic-bezier(.2,.6,.3,1)}
.sl.on .sl-c{transform:scale(1)}
.sl .sl-g{opacity:1;transition:opacity 2.6s cubic-bezier(.5,0,.3,1) .5s}
.sl.dev .sl-g{opacity:0}
.hero-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(14,12,12,.66),rgba(14,12,12,.18) 55%,rgba(14,12,12,.05)),linear-gradient(0deg,rgba(14,12,12,.55),rgba(14,12,12,0) 45%)}
.hero-copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(48px,9vh,96px);max-width:1480px}
.hero-lines{position:relative;height:clamp(130px,16vw,240px);margin-bottom:26px}
.hl{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:14px}
.hl .script{font-size:clamp(78px,11.5vw,184px);color:var(--print);margin-left:-.06em;transform:translateY(30px);opacity:0;transition:opacity .9s,transform 1.2s var(--e-out)}
.hl .lbl{opacity:0;transform:translateY(10px);transition:opacity .8s .25s,transform .9s .25s var(--e-out)}
.hl.on .script,.hl.on .lbl{opacity:1;transform:none}
.hl .script::first-letter{color:var(--red-d)}
.filmstrip{position:absolute;z-index:3;right:var(--gr);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;padding:14px 10px;background:rgba(14,12,12,.72);border-left:6px dotted rgba(250,248,244,.35);border-right:6px dotted rgba(250,248,244,.35)}
.fs{position:relative;width:118px;aspect-ratio:3/2;display:block;outline-offset:2px}
.fs-ph{position:absolute;inset:0;overflow:hidden;filter:grayscale(1);opacity:.55;transition:opacity .5s,filter .5s}
.fs-ph img{width:100%;height:100%;object-fit:cover}
.fs.on .fs-ph,.fs:hover .fs-ph{opacity:1;filter:none}
.fs-bar{position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left}
.fs.on .fs-bar{animation:fsb 7s linear forwards}
.hero.paused .fs.on .fs-bar{animation-play-state:paused}
@keyframes fsb{to{transform:scaleX(1)}}
.hero-edge{position:absolute;z-index:3;left:var(--gl);top:calc(var(--hdr) + 22px);opacity:.75}
@media (max-width:820px){
  .filmstrip{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row;justify-content:center;padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gl);border:0;border-top:5px dotted rgba(250,248,244,.3)}
  .fs{width:min(21vw,96px)}
  .hero-copy{padding-bottom:130px}
  .hero-lines{height:150px}
}

/* intro */
.intro{padding-block:clamp(90px,12vw,170px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:center}
.print{margin:0;background:var(--print);padding:12px 12px 46px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 40px -26px rgba(20,18,18,.35);position:relative}
.print img{width:100%}
.intro-ph{transform:rotate(-2deg)}
.tape-l::before,.tape-r::before{content:"";position:absolute;width:120px;height:30px;background:rgba(228,223,215,.85);top:-14px;z-index:2}
.tape-l::before{left:-24px;transform:rotate(-14deg)}
.tape-r::before{right:-24px;transform:rotate(12deg)}
.intro-copy{position:relative;min-width:0}
.intro-script{font-size:clamp(90px,12vw,190px);position:absolute;top:-.75em;left:-.2em;opacity:.95;pointer-events:none;z-index:-1}
.intro-copy .h2{margin-bottom:22px;position:relative}
.intro-copy p{max-width:60ch}
.intro-copy .btn{margin-top:14px}

/* bands */
.band{position:relative;background:var(--red);color:var(--print);padding-block:clamp(90px,11vw,150px);overflow:hidden}
.band-ink{background:var(--ink)}
.band-ghost{position:absolute;right:-2%;top:6%;font-size:clamp(150px,24vw,360px);color:var(--red-deep);pointer-events:none}
.band-ink .band-ghost{color:#2a2322}
.band .wrap{position:relative}
.band-h{font:400 clamp(38px,6.4vw,92px)/1.02 var(--serif);text-transform:uppercase;letter-spacing:.01em;max-width:15ch;margin-bottom:28px}
.band-ink .band-h{text-transform:none;font-style:italic;max-width:20ch}

/* covers */
.work{padding-block:clamp(90px,12vw,170px)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(50px,7vw,90px);max-width:780px}
.sec-head .script{font-size:clamp(70px,9vw,140px);margin-bottom:-.3em}
.covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,90px) clamp(24px,4vw,60px)}
.covers .cover:nth-child(even){margin-top:clamp(0px,12vw,170px)}
.cover{position:relative;display:block;text-decoration:none;color:var(--ink)}
.cv-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.cv-ph img{position:absolute;inset:0;transition:transform 1.3s var(--e-out),opacity .9s}
.cover:hover .cv-ph img,.cover:focus-visible .cv-ph img{transform:scale(1.035)}
.cover:hover .cv-grey,.cover:focus-visible .cv-grey,.cover.bloom .cv-grey{opacity:0}
.cv-sig{position:absolute;left:-.12em;bottom:92px;font:400 clamp(70px,8vw,128px)/.8 var(--script);color:var(--red);pointer-events:none;transition:transform .9s var(--e-out)}
.cover:hover .cv-sig{transform:translateX(16px)}
.cv-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding-top:18px;border-top:1px solid var(--ink);margin-top:18px}
.cv-name{font:400 clamp(28px,3vw,40px)/1 var(--serif);text-transform:uppercase;letter-spacing:.02em}
.cv-tag{grid-column:1;font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cv-go{grid-row:1/3;grid-column:2;display:flex;white-space:nowrap;align-items:center;gap:10px;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.cv-go .arr{width:24px;height:12px;transition:transform .45s var(--e-out)}
.cover:hover .cv-go .arr{transform:translateX(5px)}

/* reel */
.reel-sec{background:var(--ink);color:var(--print);padding-block:clamp(80px,10vw,130px) clamp(70px,8vw,110px);overflow:hidden}
.reel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:40px}
.reel-head .script{font-size:clamp(64px,8vw,130px)}
.reel-head .lbl{opacity:.7}
.reel{position:relative;padding:22px 0;background:#0b0a0a;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.reel.drag{cursor:grabbing}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 9px 5px,var(--ink) 3.2px,transparent 3.8px) 0 0/22px 10px;opacity:.9}
.reel::before{top:6px}.reel::after{bottom:6px}
.reel-track{display:flex;gap:10px;list-style:none;margin:0;padding:0;width:max-content;will-change:transform}
.rf{flex:none;height:clamp(220px,28vw,360px)}
.rf-b{display:block;height:100%}
.rf img{height:100%;width:auto;max-width:none;pointer-events:none;filter:grayscale(1) contrast(1.05);transition:filter .7s}
.rf-b:hover img,.rf-b:focus-visible img{filter:none}

/* quote */
.quote-sec{padding-block:clamp(90px,12vw,170px)}
.quote-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:center}
.q-ph{margin:0}
blockquote{margin:0}
blockquote p{font:italic 400 clamp(40px,5.6vw,84px)/1.04 var(--serif);margin-bottom:26px}
blockquote cite{font-style:normal;color:var(--red);font-weight:700}

/* packages teaser */
.pk-teaser{background:var(--ink);color:var(--print);padding-block:clamp(90px,11vw,150px)}
.pk-t-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:start}
.pk-teaser .lbl-red{color:var(--red-lite)}
.pk-teaser .h2{margin:14px 0 20px}
.pk-teaser p{max-width:44ch;opacity:.85;margin-bottom:28px}
.pk-t-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-d)}
.pk-t-list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hair-d);transition:padding .4s var(--e-out)}
.pk-t-list li:hover{padding-left:12px}
.gem-n{font:400 clamp(24px,2.4vw,32px) var(--serif)}
.gem-h{font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.gem-p{font:400 24px var(--serif);text-align:right;font-variant-numeric:tabular-nums}
.gem-p small{display:block;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.65}

/* instagram */
.ig{padding-block:56px;border-top:1px solid var(--hair)}
.ig-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.ig-h{display:inline-flex;align-items:center;gap:16px;font:400 clamp(26px,4vw,52px)/1.1 var(--serif);text-decoration:none;overflow-wrap:anywhere}
.ig-h .arr{width:40px;height:18px;color:var(--red);transition:transform .45s var(--e-out)}
.ig-h:hover .arr{transform:translateX(8px)}

/* CTA + footer */
.cta-band{position:relative;background:var(--red);color:var(--print);padding-block:clamp(90px,11vw,150px);overflow:hidden}
.cta-band .script{position:absolute;right:2%;top:12%;font-size:clamp(130px,19vw,300px);color:var(--red-deep);pointer-events:none}
.cta-band .wrap{position:relative}
.cta-h{font:400 clamp(44px,7vw,104px)/1 var(--serif);margin-bottom:20px;max-width:12ch}
.cta-band p{max-width:46ch;margin-bottom:32px}
.ftr{background:var(--ink);color:var(--print);padding-block:80px 40px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.flogo{width:min(260px,70vw);height:auto;display:block;margin-bottom:24px}
.ftr-brand p{font:italic 400 20px/1.4 var(--serif);max-width:26ch;opacity:.85}
.ftr-brand p span{display:block;font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;margin-top:8px;color:var(--red-lite)}
.ftr .lbl{color:var(--red-lite);display:block;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ftr li a,.ftr li span{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;font-size:15px;overflow-wrap:anywhere}
.ftr li a:hover{color:var(--red-lite)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--hair-d);font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}

/* inner page head */
.ph{position:relative;height:clamp(520px,82svh,860px);background:var(--ink);color:var(--print);overflow:hidden}
.ph-photo{position:absolute;inset:-8% 0 0;will-change:transform}
.ph-photo img{position:absolute;inset:0}
.ph-grey{transition:opacity 2.6s cubic-bezier(.5,0,.3,1) .4s}
.ph-dev.lit .ph-grey{opacity:0}
.ph-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,12,.7),rgba(14,12,12,.08) 60%),linear-gradient(90deg,rgba(14,12,12,.45),rgba(14,12,12,0) 60%)}
.ph-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(44px,8vh,90px)}
.ph-script{font-size:clamp(80px,12vw,200px);color:var(--red-d);margin:10px 0 -.25em -.05em;opacity:.95}
.ph-h{font:400 clamp(46px,7.2vw,108px)/1 var(--serif);text-transform:uppercase;letter-spacing:.01em;max-width:14ch}
.ph-lede{font:italic 400 clamp(20px,2vw,28px)/1.35 var(--serif);max-width:36ch;margin:18px 0 0}
@media (max-width:1080px){.ph-copy{justify-content:flex-end}}

/* about */
.ab-hero{padding-block:calc(var(--hdr) + clamp(70px,9vw,120px)) clamp(70px,9vw,120px)}
.ab-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:center}
.ab-ph{position:relative}
.ab-ph .print{transform:rotate(1.5deg);max-width:520px}
.ab-script{position:absolute;z-index:2;font-size:clamp(100px,14vw,220px);left:-.1em;top:-.55em;transform:rotate(-8deg);pointer-events:none}
.ab-copy .h1{margin:16px 0 22px}
.ab-copy p{max-width:58ch}
.ab-story{padding-bottom:clamp(90px,11vw,150px)}
.ab-story-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.ab-s1{grid-column:1/8;margin:0}
.ab-s-copy{grid-column:8/13;align-self:center;font-size:18px}
.ab-s2{grid-column:3/7;margin:0;margin-top:-40px}
.ab-s3{grid-column:8/12;margin:0;margin-top:60px}
.ab-kit{padding-block:clamp(80px,10vw,130px)}
.kit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.kit-grid .h2{margin-top:14px}
.kit-grid p{max-width:52ch;font-size:18px}

/* portfolio */
.pf-intro{padding-block:clamp(80px,10vw,130px) 0}
.work-pf{padding-top:clamp(60px,8vw,100px)}

/* story galleries */
.pause{padding-block:clamp(90px,12vw,170px) clamp(50px,6vw,80px)}
.pause-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px 60px;align-items:end;position:relative}
.pause .script{grid-column:1/-1;font-size:clamp(80px,11vw,170px);margin-bottom:-.35em}
.pause .h2{font-style:italic}
.pause p{margin:0;max-width:52ch;font-size:18px}
.story{display:grid;gap:clamp(24px,4vw,64px)}
.sp{display:grid;gap:clamp(14px,2.4vw,36px);align-items:start}
.sp figure{margin:0;min-width:0}
.lbb{display:block;width:100%;cursor:zoom-in;position:relative}
.lbb img{width:100%;transition:transform .9s var(--e-out)}
.lbb:hover img{transform:scale(1.015)}
.sp-full{margin-left:calc(-1 * var(--gl));margin-right:calc(-1 * var(--gr))}
.sp-pp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1080px;margin:0 auto;width:100%}
.sp-pp .b{margin-top:clamp(40px,8vw,120px)}
.sp-lp{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end}
.sp-pl{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:end}
.sp-ll{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sp-ll .b{margin-top:clamp(40px,8vw,120px)}
.sp-p{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;width:100%}
.sp-w{max-width:1080px;margin:0 auto;width:100%}
.closer{padding-block:clamp(90px,12vw,160px) 0;text-align:center}
.closer .narrow{display:grid;gap:18px;justify-items:center}
.closer .lbl{color:var(--red)}
.next{padding-block:clamp(90px,12vw,160px)}
.next-a{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center;text-decoration:none;padding-top:40px;border-top:1px solid var(--ink)}
.next-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.next-ph img{position:absolute;inset:0}
.next-a:hover .cv-grey,.next-a:focus-visible .cv-grey{opacity:0}
.next-t{display:grid;gap:10px;min-width:0}
.next-t .script{font-size:clamp(90px,12vw,190px)}
.next-n{display:flex;align-items:center;gap:14px;font:400 clamp(22px,2.4vw,32px) var(--serif)}
.next-n .arr{width:32px;height:14px;color:var(--red);transition:transform .45s var(--e-out)}
.next-a:hover .next-n .arr{transform:translateX(8px)}

/* lightbox */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,9,9,.96);color:var(--print);overscroll-behavior:contain}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(10,9,9,.96)}
.lb-img{max-width:calc(100vw - 140px);max-height:calc(100svh - 80px);width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .35s}
.lb-img.ready{opacity:1}
.lb button{position:absolute;width:56px;height:56px;display:grid;place-items:center;color:var(--print)}
.lb button svg{width:28px;height:14px}
.lb-x{top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));font-size:34px;line-height:1}
.lb-prev{left:calc(10px + env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-next{right:calc(10px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
.lb-next .arr{width:28px;height:14px}
@media (max-width:760px){.lb-img{max-width:100vw;max-height:calc(100svh - 140px)}.lb-prev,.lb-next{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}}

/* packages */
.pk-sec{padding-block:clamp(90px,11vw,150px) clamp(60px,7vw,100px)}
.pk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--hair)}
.pk{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 24px 28px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background-color .4s}
.pk::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.pk:hover{background:var(--print)}
.pk:hover::after{transform:none}
.pk-feat{background:var(--print)}
.pk-feat::after{transform:none}
.gem{width:40px;height:32px;color:var(--red);margin-bottom:6px}
.pk h3{font:400 34px/1 var(--serif)}
.pk .lbl{color:var(--mute)}
.pk-p{font:400 40px/1 var(--serif);margin:14px 0 6px;font-variant-numeric:tabular-nums}
.pk-p small{display:block;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:8px}
.pk ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.5}
.pk li{padding-left:16px;position:relative}
.pk li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:1px;background:var(--red)}
.pk .btn{margin-top:auto;align-self:flex-start}
.note{margin-top:28px;font:400 13px var(--mono);letter-spacing:.06em;color:var(--mute)}
.pk-strip{padding-bottom:clamp(60px,8vw,110px)}
.pk-strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.pk-strip-grid figure{margin:0}
.pk-strip-grid figure:nth-child(even){margin-top:60px}
.faq{background:var(--paper-2);padding-block:clamp(80px,10vw,140px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,90px)}
.faq-grid .h2{margin:14px 0 18px}
.fq{border-top:1px solid var(--ink)}
.fq:last-child{border-bottom:1px solid var(--ink)}
.fq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:400 clamp(20px,2vw,26px)/1.3 var(--serif)}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{position:relative;width:18px;height:18px;flex:none}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--red);transition:transform .4s var(--e-out)}
.fq summary i::after{transform:rotate(90deg)}
.fq[open] summary i::after{transform:rotate(0)}
.fq-a p{max-width:62ch;padding-bottom:24px;margin:0}

/* clients */
.cl-sec{padding-block:clamp(90px,11vw,150px)}
.cl-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:start}
.cl-grid p{max-width:52ch}
.cl-grid .btn{margin:10px 0 16px}
.cl-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--ink)}
.cl-list a{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding .4s var(--e-out),color .3s}
.cl-list a:hover{padding-left:12px;color:var(--red)}
.cl-n{font:400 21px/1.3 var(--serif)}
.cl-d{font:400 12px var(--mono);letter-spacing:.08em;color:var(--mute);white-space:nowrap}
.cl-list .arr{width:24px;height:12px;align-self:center}

/* contact */
.ct-sec{padding-block:clamp(90px,11vw,150px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,110px);align-items:start}
.ctf{display:grid;gap:22px;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fld{position:relative;display:grid}
.fld input,.fld textarea,.fld select{width:100%;font:400 17px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:26px 0 10px;appearance:none;-webkit-appearance:none}
.fld select{background:var(--paper);cursor:pointer;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141212' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-size:10px 6px}
.fld textarea{resize:vertical;min-height:140px}
.fld label{position:absolute;left:0;top:26px;font:400 17px var(--sans);color:var(--mute);pointer-events:none;transform-origin:left top;transition:transform .3s var(--e-out),color .3s}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label,.fld .lab-static,.fld select+label{transform:translateY(-22px) scale(.72);color:var(--red)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-bottom:2px solid var(--red)}
.fld.bad input,.fld.bad textarea{border-bottom-color:var(--red)}
.err{font:400 13px var(--mono);color:var(--red);min-height:0}
.err:not(:empty){margin-top:6px}
.tset{border:0;margin:0;padding:0}
.tset legend{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px;padding:0}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{position:relative;display:inline-flex}
.tchip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tchip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--ink);font:400 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background-color .3s,color .3s}
.tchip input:checked+span{background:var(--ink);color:var(--print)}
.tchip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.ctf .btn{justify-self:start;margin-top:8px}
.ctf .btn[disabled]{opacity:.7;cursor:progress}
.f-ok{padding:24px;background:var(--print);border-top:3px solid var(--red)}
.f-ok strong{font:italic 400 28px var(--serif);display:block;margin-bottom:8px}
.ct-aside{display:grid;gap:44px;min-width:0}
.ct-aside .print{transform:rotate(2deg)}
.ct-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.ct-list li{display:grid;gap:4px}
.ct-list .lbl{color:var(--red)}
.ct-list a{font:400 22px var(--serif);text-decoration:none;overflow-wrap:anywhere}
.ct-list a:hover{color:var(--red)}
.ct-list .mini{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}

/* responsive */
@media (max-width:980px){
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-grid .pk:last-child{grid-column:1/-1}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .intro-grid,.quote-grid,.pk-t-grid,.ab-grid,.kit-grid,.faq-grid,.cl-grid,.ct-grid,.pause-in{grid-template-columns:minmax(0,1fr)}
  .intro-ph{max-width:460px;margin-top:40px}
  .covers{grid-template-columns:minmax(0,1fr)}
  .covers .cover:nth-child(even){margin-top:0}
  .covers{gap:72px}
  .work .center{margin-top:72px}
  .reel-head .script{margin-bottom:.12em}
  .ab-ph{margin-top:60px}
  .ab-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-s1,.ab-s-copy{grid-column:1/-1}
  .ab-s2{grid-column:1;margin-top:0}.ab-s3{grid-column:2;margin-top:50px}
  .sp-lp,.sp-pl{grid-template-columns:minmax(0,1fr)}
  .sp-ll{grid-template-columns:minmax(0,1fr)}
  .sp-ll .b{margin-top:0}
  .pk-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next-a{grid-template-columns:minmax(0,1fr)}
  .next-ph{max-width:360px}
  .pk-t-list li{grid-template-columns:minmax(0,1fr) auto}
  .gem-h{grid-row:2;grid-column:1}
  .gem-p{grid-row:1/3;grid-column:2}
}
@media (max-width:560px){
  body{font-size:16px}
  .pk-grid{grid-template-columns:minmax(0,1fr)}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  .cv-sig{bottom:110px}
  .print{padding:8px 8px 30px}
  .cl-list a{grid-template-columns:minmax(0,1fr) 24px}
  .cl-d{grid-row:2;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .sl .sl-g,.ph-grey{opacity:0}
}

/* polish pass 1 */
.intro-script{z-index:0;top:-.95em;opacity:.9}
.intro-copy .h2{z-index:1}
.sec-head .script{margin-bottom:-.12em}
.pause .script{margin-bottom:-.12em}
.cv-sig{bottom:120px}
.cta-band .script{top:auto;bottom:-4%;right:-1%}
.cta-band p,.cta-band .cta-h,.cta-row{position:relative;z-index:1}
@media (max-width:820px){
  .hl .script{white-space:normal;font-size:clamp(64px,17vw,110px);line-height:.92}
  .hero-lines{height:auto;min-height:200px}
  .hl{position:absolute;right:0}
  .script{white-space:normal}
  .reel-head .script{font-size:clamp(56px,15vw,90px)}
  .sec-head .script{font-size:clamp(60px,16vw,100px)}
  .cta-band .script{font-size:clamp(110px,30vw,180px);bottom:-6%;opacity:.55}
  .ig-h{font-size:clamp(22px,6.4vw,34px);overflow-wrap:normal;word-break:break-word}
  .cv-sig{bottom:132px}
}
@media (max-width:420px){ .ig-h{font-size:21px} }

/* QA pass */
.band-ghost::before,.cta-band .script::before{content:attr(data-t)}
.reel-head .script{color:var(--red-d)}
.ftr-brand p{opacity:1;color:#d9d4cd}
.ftr li a,.ftr li span{min-height:44px}
@media (max-width:820px){
  .intro-script{font-size:clamp(64px,19vw,120px)}
  .next-t .script{font-size:clamp(60px,17vw,150px)}
  .pause .script{font-size:clamp(60px,17vw,120px)}
  .next-n{flex-wrap:wrap}
}

/* ===== THE MICHELE JOURNAL (about) — WebGL book, static pages as fallback ===== */
.jr{position:relative;background:var(--ink);color:var(--ink);--pw:min(540px,88vw);--ph:calc(var(--pw) * 4 / 3)}
.jr-stage{position:relative;padding:calc(var(--hdr) + 50px) var(--gr) 90px var(--gl);background:radial-gradient(ellipse 60% 55% at 50% 55%,rgba(179,18,27,.3),rgba(179,18,27,0) 70%),var(--ink)}
#jr-gl,.jr-hint,.jr-focus{display:none}
.jr-title{text-align:center;color:var(--print);padding-bottom:40px}
.jr-title .lbl{color:var(--red-lite)}
.jr-h{font:400 clamp(84px,19vw,300px)/.9 var(--script);color:var(--red-d);margin:6px 0 0;white-space:nowrap}
.jr-sub{font:italic 400 clamp(18px,1.8vw,26px) var(--serif);margin:10px 0 0}
.book{display:grid;gap:40px;justify-items:center}
.pg{--u:calc(var(--pw) / 100);position:relative;width:var(--pw);height:var(--ph);background:var(--print);overflow:hidden;padding:calc(var(--u)*9) calc(var(--u)*8) calc(var(--u)*12);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.jr .pg-fig img,.jr .q-img,.pg-cover .cv-img{filter:grayscale(1) contrast(1.06)}
html.jr-on .jr-stage{position:sticky;top:0;height:100svh;padding:0;overflow:hidden}
html.jr-on #jr-gl{display:block;position:absolute;inset:0;width:100%;height:100%}
html.jr-on .jr-title{position:absolute;left:0;right:0;top:calc(var(--hdr) + 2.5svh);z-index:3;padding:0 16px;pointer-events:none;will-change:transform,opacity}
html.jr-on .jr-h{text-shadow:0 8px 40px rgba(0,0,0,.5)}
html.jr-on .book{display:block;position:absolute;inset:0;pointer-events:none}
html.jr-on .pg{position:absolute;left:0;top:0;opacity:0;pointer-events:none;box-shadow:none}
html.jr-on .pg.live{pointer-events:auto}
html.jr-on .jr-stage.spot .pg.live{cursor:none}
html.jr-on .jr-focus{display:block;position:absolute;z-index:5;outline:2px solid var(--print);outline-offset:3px;box-shadow:0 0 0 5px var(--red);pointer-events:none}
html.jr-on .jr-focus[hidden]{display:none}
html.jr-on .jr-hint{display:block;position:absolute;z-index:4;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;color:var(--print);opacity:.8;pointer-events:none}
.jr-hint span{display:none}
.jr[data-st=open] .h-open,.jr[data-st=turn] .h-turn,.jr[data-st=end] .h-end{display:inline}

/* page parts */
.pg-foot{position:absolute;left:calc(var(--u)*8);right:calc(var(--u)*8);bottom:calc(var(--u)*5);display:flex;justify-content:space-between;padding-top:calc(var(--u)*2);border-top:1px solid var(--hair);font:400 calc(var(--u)*2) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pg-k{display:block;font:700 calc(var(--u)*2.3)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:calc(var(--u)*4)}
.pg-h{font:400 calc(var(--u)*7.6)/1.04 var(--serif);margin-bottom:calc(var(--u)*5);max-width:15ch;text-wrap:balance}
.pg-body p{font-size:calc(var(--u)*3.2);line-height:1.55;margin:0 0 1em;max-width:34ch}
.pg-script{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*5);font:400 calc(var(--u)*13)/.8 var(--script);color:var(--red);transform:rotate(-7deg);opacity:.9;pointer-events:none}
.pg-tx{display:flex;flex-direction:column;justify-content:flex-end}
.pg-tx .pg-body{margin-bottom:calc(var(--u)*4)}
.pg-link{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;min-height:44px;font:700 calc(var(--u)*2.3) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:2px solid var(--red)}
.pg-link .arr{width:22px;height:11px;transition:transform .45s var(--e-out)}
.pg-link:hover .arr{transform:translateX(5px)}
.pg-ph{padding:calc(var(--u)*5) calc(var(--u)*5) calc(var(--u)*12)}
.pg-fig{margin:0;height:100%;background:var(--paper-2)}
.pg-fig img{width:100%;height:100%;object-fit:cover}
.pg-note{position:absolute;left:calc(var(--u)*6);bottom:calc(var(--u)*6.5);font:400 calc(var(--u)*7)/1 var(--script);color:var(--red);transform:rotate(-4deg)}
.pg-ph .pg-foot{display:none}
/* cover */
.pg-cover{padding:0;background:var(--ink);color:var(--print)}
.pg-cover .cv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:grayscale(1) contrast(1.12) brightness(.92)}
.pg-cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,12,12,.7),rgba(14,12,12,0) 26%,rgba(14,12,12,0) 50%,rgba(14,12,12,.82))}
.cv-top{position:absolute;z-index:2;left:calc(var(--u)*6);right:calc(var(--u)*6);top:calc(var(--u)*5);display:flex;justify-content:space-between;gap:16px;font:700 calc(var(--u)*2.1) var(--mono);letter-spacing:.14em;text-transform:uppercase}
.cv-iss{text-align:right;max-width:62%}
.cv-logo{position:absolute;z-index:2;left:calc(var(--u)*5);top:calc(var(--u)*8.5);width:calc(var(--u)*62);height:auto;color:var(--red)}
.cv-lines{position:absolute;z-index:2;left:calc(var(--u)*6);right:calc(var(--u)*6);bottom:calc(var(--u)*6)}
.cv-story{display:block;font:700 calc(var(--u)*2.2) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-lite)}
.cv-h{font:italic 400 calc(var(--u)*13)/1 var(--serif);margin:calc(var(--u)*1) 0 calc(var(--u)*1)}
.cv-sub{display:block;font:400 calc(var(--u)*2.2) var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:calc(var(--u)*4)}
.cv-lines ul{list-style:none;margin:0;padding:calc(var(--u)*3) 0 0;border-top:1px solid var(--hair-d);display:grid;gap:calc(var(--u)*1);font:400 calc(var(--u)*3) var(--serif);text-align:right}
/* contents */
.pg-toc{padding-top:calc(var(--u)*10)}
.toc-h{font:400 calc(var(--u)*13.5)/.95 var(--serif);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:calc(var(--u)*6)}
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.toc-b{width:100%;display:flex;align-items:baseline;gap:12px;padding:calc(var(--u)*1.7) 0;min-height:max(44px,calc(var(--u)*7));border-bottom:1px solid var(--hair);text-align:left;font:400 calc(var(--u)*3.6)/1.2 var(--serif);transition:color .3s,padding .4s var(--e-out)}
.toc-b i{flex:1;height:0;border-bottom:1px dotted var(--mute);margin-bottom:.25em}
.toc-b:hover,.toc-b:focus-visible{color:var(--red);padding-left:10px}
/* quote */
.pg-quote{padding:0;background:var(--ink);color:var(--print)}
.pg-quote .q-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.pg-quote blockquote{position:absolute;left:calc(var(--u)*8);right:calc(var(--u)*8);bottom:calc(var(--u)*9)}
.pg-quote blockquote p{font:italic 400 calc(var(--u)*8.2)/1.05 var(--serif);margin:0 0 calc(var(--u)*3)}
.pg-quote cite{font:700 calc(var(--u)*2.2) var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--red-lite)}
/* back */
.pg-back{display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.pg-back .pg-script{position:static;transform:rotate(-5deg);margin-bottom:calc(var(--u)*4);font-size:calc(var(--u)*15)}
.pg-back p{font-size:calc(var(--u)*3.1);line-height:1.55;max-width:36ch}
.bk-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:calc(var(--u)*3)}
.bk-row .btn{min-height:44px;padding:0 16px;font-size:max(11px,calc(var(--u)*2.1))}
.bk-logo{position:absolute;left:calc(var(--u)*8);bottom:calc(var(--u)*6);width:calc(var(--u)*46);height:auto;color:var(--red)}
@media (max-width:899px){
  .pg{padding:calc(var(--u)*9) calc(var(--u)*8) calc(var(--u)*13)}
  .pg-body p{font-size:max(14px,calc(var(--u)*3.6))}
  .pg-h{font-size:calc(var(--u)*8.4)}
  .pg-k,.pg-link,.cv-story,.cv-sub,.cv-top{font-size:max(11px,calc(var(--u)*2.6))}
  .pg-foot{font-size:max(10px,calc(var(--u)*2.4))}
  .toc-b{font-size:max(16px,calc(var(--u)*4.2));padding:2px 0}
  .toc-h{font-size:calc(var(--u)*12);margin-bottom:calc(var(--u)*4)}
  .cv-logo{top:calc(var(--u)*14)}
}


/* inside back + back cover */
.bk-sign{font:400 calc(var(--u)*11)/1 var(--script);color:var(--red);margin-top:calc(var(--u)*2)}
.pg-bc{background:var(--red);color:var(--print);display:flex;flex-direction:column;padding:calc(var(--u)*9) calc(var(--u)*8) calc(var(--u)*7)}
.bc-k{display:block;font:700 max(11px,calc(var(--u)*2.3)) var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bc-script{font:400 calc(var(--u)*17)/.85 var(--script);margin:calc(var(--u)*3) 0 calc(var(--u)*4) calc(var(--u)*-1)}
.bc-p{font-size:max(14px,calc(var(--u)*3));line-height:1.5;max-width:36ch;margin-bottom:calc(var(--u)*4)}
.bc-btn{align-self:flex-start}
.bc-work{margin-top:auto;padding-top:calc(var(--u)*4)}
.bc-work ul{list-style:none;margin:calc(var(--u)*2) 0 0;padding:0;border-top:1px solid rgba(250,248,244,.35)}
.bc-work a{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;gap:12px;align-items:baseline;min-height:44px;padding:calc(var(--u)*1.2) 0;border-bottom:1px solid rgba(250,248,244,.35);text-decoration:none;transition:padding .4s var(--e-out)}
.bc-work a:hover,.bc-work a:focus-visible{padding-left:10px}
.bc-work a span{font:400 max(18px,calc(var(--u)*4)) var(--serif)}
.bc-work a i{font:400 max(10px,calc(var(--u)*1.9)) var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;opacity:.85}
.bc-work .arr{width:20px;height:10px}
.bc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:calc(var(--u)*5);font:400 max(10px,calc(var(--u)*1.9)) var(--mono);letter-spacing:.1em;text-transform:uppercase}
.bc-logo{width:calc(var(--u)*38);height:auto;color:var(--print)}
body[data-page=about] .hdr{opacity:.999}



/* ===== HOME: the story (camera → full-screen story) ===== */
.hx{position:relative;height:100svh;min-height:560px;background:var(--ink);color:var(--print);overflow:hidden}
.hx-stage{position:relative;height:100%;overflow:hidden}
.cam,.hx-panels,.hx-logo,.ic-hint,.ic-skip,.lcd-ui,.lcd-shut,.lcd-gloss,.hx-hl{display:none}
.hx-screen{position:absolute;inset:0;background:#000;overflow:hidden}
.hx-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hx-shot.on{opacity:1}
.hx-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,12,.72),rgba(14,12,12,0) 50%),linear-gradient(90deg,rgba(14,12,12,.5),rgba(14,12,12,0) 55%)}
.cam-cap .cc{display:none}
html:not(.hx-on) .cam-cap{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:20px;bottom:150px}
html:not(.hx-on) .cam-cap .cc:last-child{display:grid;gap:8px}
html:not(.hx-on) .cc-s{font:400 clamp(70px,11vw,170px)/.9 var(--script);color:var(--print)}
html:not(.hx-on) .cc-t{font:700 12px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.hx-cta{position:absolute;z-index:8;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(48px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:12px}
/* live */
html.hx-on .hx{height:auto;min-height:0;background:transparent;overflow:visible}
html.hx-on .hx-stage{position:sticky;top:0;height:100svh;background:var(--red)}
html.hx-on .hx-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 55%,rgba(255,236,226,.18),rgba(255,236,226,0) 70%);pointer-events:none;opacity:0;transform:scale(.92);transition:opacity 1.8s cubic-bezier(.25,.6,.3,1),transform 2.2s cubic-bezier(.22,.8,.2,1)}
html.hx-on.hx-lit .hx-stage::before{opacity:1;transform:none}
html.hx-on .cam{display:block;position:absolute;z-index:1;left:50%;top:50%;--cw:min(76vw, calc((100svh - 200px) / .8));width:var(--cw);aspect-ratio:1600/1000;margin:calc(var(--cw) / -3.2) 0 0 calc(var(--cw) / -2);transform-origin:50% 50%;transform:translate3d(120vw,0,0)}
.cam-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
html.hx-on .hx-screen{z-index:2;inset:auto;left:0;top:0;width:30vw;height:20vw;transform:translate3d(120vw,0,0);container-type:size}
html.hx-on .lcd-ui,html.hx-on .lcd-shut,html.hx-on .lcd-gloss{display:block}
html.hx-on .hx-shot{transition:opacity .2s}
html.hx-on .hx-shade{opacity:0}
.lcd-ui{position:absolute;inset:0;font:400 2.2cqw/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.lcd-tl{position:absolute;left:3%;top:5%}.lcd-bl{position:absolute;left:3%;bottom:5%}.lcd-br{position:absolute;right:3%;bottom:5%;color:var(--red-lite)}
.lcd-bat{position:absolute;right:3%;top:5%;width:5.5%;height:5%;border:.3cqw solid currentColor;border-radius:.4cqw}
.lcd-bat i{position:absolute;inset:12%;right:30%;background:currentColor}
.lcd-af{position:absolute;left:50%;top:50%;width:11%;aspect-ratio:1;transform:translate(-50%,-50%);color:#9fe39a;opacity:.85;background:
  linear-gradient(currentColor,currentColor) 0 0/18% 2% no-repeat,linear-gradient(currentColor,currentColor) 0 0/2% 18% no-repeat,
  linear-gradient(currentColor,currentColor) 100% 0/18% 2% no-repeat,linear-gradient(currentColor,currentColor) 100% 0/2% 18% no-repeat,
  linear-gradient(currentColor,currentColor) 0 100%/18% 2% no-repeat,linear-gradient(currentColor,currentColor) 0 100%/2% 18% no-repeat,
  linear-gradient(currentColor,currentColor) 100% 100%/18% 2% no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/2% 18% no-repeat}
.lcd-shut{position:absolute;inset:0;pointer-events:none}
.lcd-shut i{position:absolute;left:0;right:0;height:50.5%;background:#050505;transform:scaleY(0);transition:transform .14s cubic-bezier(.6,0,.4,1)}
.lcd-shut i:first-child{top:0;transform-origin:top}.lcd-shut i:last-child{bottom:0;transform-origin:bottom}
.lcd-shut.snap i{transform:scaleY(1)}
.lcd-gloss{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);pointer-events:none}
html.hx-on .cam-cap{display:block;position:absolute;z-index:3;left:0;top:0;width:var(--lw,300px);height:0;transform-origin:50% 0;pointer-events:none;transform:translate3d(-120vw,0,0)}
html.hx-on .cc{display:grid;position:absolute;left:-30%;right:-30%;top:0;justify-items:center;gap:calc(var(--lw) * .02);text-align:center}
html.hx-on .cc-s{font:400 calc(var(--lw) * .13)/.9 var(--script);color:var(--print);text-shadow:0 6px 30px rgba(60,0,4,.55);white-space:nowrap;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .7s var(--e-out)}
html.hx-on .cc-t{font:700 max(7px,calc(var(--lw) * .02)) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--print);opacity:0;transition:opacity .45s .12s}
html.hx-on .cc.on .cc-s{opacity:1;transform:none}
html.hx-on .cc.on .cc-t{opacity:.9}
html.hx-on .hx-hl{display:grid;position:absolute;z-index:3;left:max(20px,env(safe-area-inset-left,0px));right:20px;bottom:calc(140px + env(safe-area-inset-bottom,0px));gap:10px;pointer-events:none;opacity:0}
.hl-k,.hp-k{font:700 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--print)}
.hl-s,.hp-s{font:400 clamp(76px,12vw,200px)/.9 var(--script);color:var(--print);white-space:nowrap;text-shadow:0 8px 40px rgba(0,0,0,.35)}
.hl-s::first-letter,.hp-s::first-letter{color:var(--red-d)}
.hl-t{font:italic 400 clamp(20px,2vw,28px) var(--serif)}
html.hx-on .hx-panels{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.hxp{position:absolute;inset:0;margin:0;overflow:hidden;transform:translate3d(0,100%,0);background:#000}
.hxp.live{pointer-events:auto}
.hp-ph{position:absolute;left:0;right:0;top:-14%;bottom:-14%}
.hp-ph img{width:100%;height:100%;object-fit:cover}
.hp-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,12,.75),rgba(14,12,12,0) 55%),linear-gradient(90deg,rgba(14,12,12,.45),rgba(14,12,12,0) 60%)}
.hp-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.hp-cap{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:20px;bottom:calc(150px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;justify-items:start}
.hp-go{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--print);font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--red)}
.hp-go .arr{width:24px;height:12px;transition:transform .45s var(--e-out)}
.hp-go:hover .arr{transform:translateX(6px)}
html.hx-on .hx-cta{opacity:0;pointer-events:none}
html.hx-on .hx-cta.show{pointer-events:auto}
html.hx-on .hx-logo{display:block;position:absolute;z-index:6;left:50%;top:calc(var(--hdr) + 3svh);width:min(34vw,380px);margin-left:calc(min(34vw,380px) / -2);color:var(--print);opacity:0}
.ic-logo{width:100%;height:auto;display:block}
html.hx-on .ic-hint{display:block;position:absolute;z-index:8;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;color:var(--print);opacity:.85}
html.hx-on .ic-skip{display:inline-flex;position:absolute;z-index:8;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));min-height:44px;align-items:center;padding:0 14px;color:var(--print);font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(250,248,244,.45)}
.ic-skip:hover,.ic-skip:focus-visible{background:var(--print);color:var(--red)}
body.intro-live .brand{opacity:0;pointer-events:none}
.brand{transition:opacity .4s}
@media (max-width:760px){
  html.hx-on .cam,html.hx-on .cam-cap{--cw:92vw}
  html.hx-on .hx-logo{width:62vw;margin-left:-31vw}
  .lcd-ui{font-size:2.6cqw}
  .hp-cap,html.hx-on .hx-hl{top:calc(var(--hdr) + 26px);bottom:auto}
  .hl-s,.hp-s{font-size:clamp(60px,17vw,110px);white-space:normal}
  html.hx-on .ic-skip{bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .hx-cta{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}
/* parallax inside photo frames */
.pi img{transform:translate3d(0,var(--py,0px),0) scale(1.14)}
.cover:hover .cv-ph.pi img,.cover:focus-visible .cv-ph.pi img{transform:translate3d(0,var(--py,0px),0) scale(1.19)}
.lbb.pi{overflow:hidden}
.lbb.pi:hover img{transform:translate3d(0,var(--py,0px),0) scale(1.17)}
.q-ph{overflow:hidden}

/* journal cover: her signature is the masthead */
.cv-name{display:block;margin:calc(var(--u)*2.5) 0 calc(var(--u)*2.5) calc(var(--u)*-1.5)}
.cv-name .cv-logo{position:static;display:block;width:calc(var(--u)*60);height:auto;color:var(--red-d);filter:drop-shadow(0 calc(var(--u)*.6) calc(var(--u)*2) rgba(0,0,0,.45))}

/* ===== contact sheet (home story) ===== */
.hx-sheet,.hx-boxes,.hx-loupe,.hx-vig,.hx-caps{display:none}
html.hx-on .hx-sheet{display:block;position:absolute;left:0;top:0;z-index:3;transform-origin:0 0;background:#efebe4;box-shadow:0 60px 120px -30px rgba(0,0,0,.75);visibility:hidden}
html.hx-on .hx-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(255,250,240,.0),rgba(60,40,20,.12))}
.shr{position:absolute;background:#0d0c0c}
.sr-b{position:absolute;left:0;right:0;height:44px;background:linear-gradient(90deg,#e9e4dc 0 15px,transparent 15px) 10px 7px/34px 16px repeat-x}
.sr-top{top:0}.sr-bot{bottom:0;background-position:10px 21px}
.sr-t{position:absolute;left:24px;white-space:nowrap;font:700 11px/1 var(--mono);letter-spacing:.22em;color:rgba(239,214,170,.6)}
.sr-t1{top:28px}.sr-t2{bottom:28px}
.sf{position:absolute;width:300px;height:200px;overflow:hidden;background:#1b1a1a;outline:1px solid #000}
.sf img{width:100%;height:100%;object-fit:cover;display:block}
.sr-mk{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);overflow:visible;pointer-events:none}
.mk{fill:none;stroke:#c8151f;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.mk-x{stroke-width:6;opacity:.9}
.mk-n{font:400 64px var(--script);fill:#c8151f;opacity:0}
html.hx-on .hx-boxes{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
.hxk{position:absolute;left:0;top:0;overflow:hidden;visibility:hidden;background:#111}
.hxk img{width:100%;height:100%;object-fit:cover;display:block}
html.hx-on .hx-loupe{display:block;position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0}
.hx-loupe i{position:absolute;left:0;top:0;width:var(--ld,200px);height:var(--ld,200px);margin:calc(var(--ld,200px) / -2) 0 0 calc(var(--ld,200px) / -2);border-radius:50%;
  border:calc(var(--ld,200px) * .07) solid #111;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 30px 60px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.12);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 60%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 62%,rgba(0,0,0,.25))}
.hx-loupe i::after{content:"";position:absolute;left:84%;top:84%;width:55%;height:16%;background:linear-gradient(#2a2828,#111);border-radius:999px;transform:rotate(45deg);transform-origin:0 50%}
html.hx-on .hx-vig{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(14,12,12,0) 45%,rgba(14,12,12,.75))}
html.hx-on .hx-caps{display:block;position:absolute;inset:0;z-index:6;pointer-events:none}
.hxc{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:20px;bottom:calc(150px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;justify-items:start;opacity:0}
.hxc.live{pointer-events:auto}
.hxc .hp-s{display:block;padding:.12em .1em .18em 0;margin:-.12em 0 -.18em}
.hxc .hp-go,.hxc .hp-k{will-change:transform}
@media (max-width:760px){ .hxc{top:calc(var(--hdr) + 26px);bottom:auto} .mk-n{font-size:74px} }

.pg-cover .cv-story{color:var(--print);opacity:.85}
.cv-name{margin-left:calc(var(--u)*-.5)}

/* phone captions: one line, sized to the screen, top edge over the camera's bottom */
html.hx-on .cam-cap.cap-ph{transform-origin:0 0}
html.hx-on .cap-ph .cc{left:0;right:0;gap:10px}
html.hx-on .cap-ph .cc-s{white-space:nowrap}
html.hx-on .cap-ph .cc-t{font-size:11px}

/* hero after the dive: black and white photo, red + white type */
.hx-hl .hl-s{color:var(--red-d);text-shadow:0 6px 34px rgba(0,0,0,.55)}
.hx-hl .hl-s::first-letter{color:inherit}
.hx-hl .hl-k{color:var(--print)}
.hx-hl .hl-t{color:var(--print)}
.hx-shade{background:linear-gradient(0deg,rgba(8,7,7,.82),rgba(8,7,7,0) 58%),linear-gradient(90deg,rgba(8,7,7,.55),rgba(8,7,7,0) 60%)}
.hx .hx-cta .btn-ghost{border-color:var(--print)}
html:not(.hx-on) .cc-s{color:var(--red-d)}
@media (max-width:760px){ .hx-shade{background:linear-gradient(180deg,rgba(8,7,7,.85),rgba(8,7,7,.35) 34%,rgba(8,7,7,0) 52%),linear-gradient(0deg,rgba(8,7,7,.7),rgba(8,7,7,0) 38%)} }

/* journal on touch: colour lens + one page per swipe */
html.jr-snapy{scroll-snap-type:y proximity}
html.jr-on .jr-stage.lock{touch-action:none;touch-action:pinch-zoom}
.jr-snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}
.jr-lens{position:absolute;left:0;top:0;z-index:6;padding:0;border:3px solid var(--print);border-radius:50%;background:rgba(20,18,18,.66);box-shadow:0 8px 22px rgba(0,0,0,.5);transform-origin:50% 50%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.3,1.35,.4,1),opacity .35s,background .25s,box-shadow .25s}
.jr-lens.show{opacity:1;pointer-events:auto}
.jr-lens span{position:absolute;inset:0;display:grid;place-items:center;font:700 calc(10px / var(--ls,.5))/1 var(--mono);letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;color:var(--print);transition:opacity .2s}
.jr-lens.grab{transition:opacity .2s,background .2s;background:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.4);cursor:grabbing}
.jr-lens.grab span{opacity:0}
.jr-lens:focus-visible{outline:2px solid var(--red-d);outline-offset:4px}

/* find me: minimal contact strip (home + portfolio) */
.fm{padding-block:clamp(44px,6vw,72px);border-top:1px solid var(--hair)}
.fm-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(20px,3vw,48px)}
.fm-list li{display:grid;gap:10px;min-width:0}
.fm-list .lbl{color:var(--mute)}
.fm-list a{display:inline-flex;align-items:baseline;gap:8px;justify-self:start;max-width:100%;font:500 18px/1.35 var(--sans);color:var(--ink);text-decoration:none;padding-bottom:5px;background:linear-gradient(var(--red),var(--red)) 0 100%/0 1.5px no-repeat,linear-gradient(var(--hair),var(--hair)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--e-out),color .25s}
.fm-list a span{min-width:0;overflow-wrap:break-word}
.fm-list a:hover,.fm-list a:focus-visible{background-size:100% 1.5px,100% 1px;color:var(--red)}
.fm-arr{flex:none;width:11px;height:11px;color:var(--red);transform:translateY(1px);transition:transform .35s var(--e-out)}
.fm-list a:hover .fm-arr,.fm-list a:focus-visible .fm-arr{transform:translate(3px,-2px)}
@media (max-width:980px){ .fm-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fm-list{grid-template-columns:minmax(0,1fr);gap:0}
  .fm-list li{gap:2px;padding-block:14px 8px;border-bottom:1px solid var(--hair)}
  .fm-list li:first-child{border-top:1px solid var(--hair)}
  .fm-list a{font-size:17px;min-height:44px;align-items:center;padding-bottom:0;background:none}
  .fm-list .lbl{font-size:11px} }