:root{
--serif:'Playfair Display','Times New Roman',serif;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
--accent:rgba(62,96,168,.84);
--nameFs:46px;
--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#fff;color:#000;overflow:hidden;font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{touch-action:none;user-select:none;-webkit-user-select:none}
body.ready{cursor:grab}
body.ready.over{cursor:pointer}
body.grabbing{cursor:grabbing}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 2.4s ease}
#bg.on{opacity:1}
/* ---------- top bar + intro ---------- */
#topbar{position:fixed;left:0;top:0;width:100%;height:5px;background:#2d3a3c;z-index:3;
transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
#intro{position:fixed;top:4.6vh;left:0;width:100%;margin:0;text-align:center;font-size:17px;z-index:3;pointer-events:none;
opacity:0;transform:translateY(-8px);transition:opacity 1s ease .2s,transform 1s var(--ease) .2s}
#intro a{color:#000;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
body.ui-in #topbar{transform:scaleX(1)}
body.ui-in #intro{opacity:1;transform:none}
/* ---------- masked letter reveal (PORTFOLIO + category title) ---------- */
.rev{display:flex;white-space:nowrap;font-family:var(--serif);font-weight:600;line-height:.8;letter-spacing:-.01em}
.rev .lw{display:block;overflow:hidden;padding:.1em .03em;margin:-.1em -.03em}
.rev .l{display:block;transform:translateY(118%);transition:transform 1.3s var(--ease)}
#portfolio{position:fixed;left:50%;top:0;margin:0;z-index:1;pointer-events:none;color:#000;
transform:translateX(-50%) scaleY(1.25);transform-origin:50% 0}
body.letters-in #portfolio .l{transform:none}
body.leaving #portfolio .l{transform:translateY(-124%);transition-duration:1.1s} /* slides up and disappears */
/* ---------- WebGL film ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:2;opacity:0;transition:opacity .2s linear;pointer-events:none}
#gl.on{opacity:1}
/* ---------- big category title on the film (home) ---------- */
#title{position:fixed;inset:0;z-index:3;pointer-events:none;transition:opacity .45s ease}
#title.moving{opacity:0}
#title .t{position:absolute;left:50%;top:var(--titleY,50%);white-space:nowrap;font-family:var(--serif);font-weight:500;
font-size:clamp(28px,3.8vw,80px);color:rgba(255,255,255,.9);letter-spacing:-.01em;
text-shadow:0 4px 40px rgba(0,0,0,.18);
transform:translate(-50%,-50%) translateY(26px);opacity:0;filter:blur(10px);
transition:opacity .9s ease,transform 1.1s var(--ease),filter .9s ease}
#title .t.show{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}
#title .t.out{opacity:0;transform:translate(-50%,-50%) translateY(-26px);filter:blur(10px);transition-duration:.5s}
/* ---------- category page ---------- */
#cat{position:fixed;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;touch-action:pan-y;
overscroll-behavior:contain;visibility:hidden;--fw:800px;--heroTop:400px}
#cat::-webkit-scrollbar{display:none}
#cat.on{visibility:visible}
#catInner{position:relative;width:100%;padding-top:var(--heroTop)}
#catTitle{position:absolute;left:50%;top:0;margin:0;color:rgba(0,0,0,.6);letter-spacing:-.015em;
transform:translateX(-50%) scaleY(1.2);transform-origin:50% 81.5%;pointer-events:none}
body.cat-in #catTitle .l{transform:none}
#heroSlot{display:none} /* the 2nd image takes the first image's place */
#cat .shot.hold{opacity:0;transform:scale(.97)} /* waits for the flat picture, then fades in */
.shot{position:relative;margin:0 auto 44px;width:var(--fw);cursor:zoom-in;
transition:opacity 1s ease,transform 1.2s var(--ease)}
/* every picture is cut into thin strips so it can bend (fold) as it scrolls under the top edge */
.strip{position:relative;display:block;width:100%;background-color:#e8e6e3;background-repeat:no-repeat;
transform-origin:50% 50%;transition:border-radius 1.2s ease}
.strip::after{display:none;content:'';position:absolute;inset:0;background:#0d111c;opacity:var(--sh,0);border-radius:inherit;pointer-events:none}
#cat.rounded .shot .strip:first-child{border-top-left-radius:18px;border-top-right-radius:18px}
#cat.rounded .shot .strip:last-child{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
#foldShade{display:none;position:fixed;left:50%;top:3.5vh;height:10vh;width:60vw;transform:translateX(-50%);z-index:1;pointer-events:none;
background:radial-gradient(ellipse 50% 50% at 50% 62%,rgba(48,52,66,.20),rgba(48,52,66,0) 100%);opacity:0;transition:opacity 1.2s ease}
body.cat-in #foldShade{opacity:1}
.shot.rv{opacity:0;transform:translateY(70px) scale(.97)}
.shot.rv.in{opacity:1;transform:none}
#cat.closing #gallery{opacity:0;transition:opacity .5s ease}
.endpad{height:40vh}
#zoomTip{position:fixed;left:0;top:0;z-index:6;pointer-events:none;padding:8px 14px;border-radius:8px;
font:600 15px/1 var(--sans);color:#fff;background:rgba(70,120,200,.55);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .2s;transform:translate(-200px,-200px)}
#zoomTip.on{opacity:1}
#lightbox{position:fixed;inset:0;z-index:30;background:rgba(10,10,12,.92);display:grid;place-items:center;opacity:0;pointer-events:none;
transition:opacity .4s ease;cursor:zoom-out}
#lightbox.on{opacity:1;pointer-events:auto}
#lightbox img{max-width:92vw;max-height:90vh;border-radius:12px;transform:scale(.95);transition:transform .7s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.5)}
#lightbox.on img{transform:none}
/* ---------- glass controls ---------- */
#controls{position:fixed;left:50%;bottom:3.4vh;z-index:4;display:flex;gap:8px;align-items:center;
transform:translateX(-50%) translateY(40px);opacity:0;transition:opacity 1s ease,transform 1.2s var(--ease)}
body.ui-in #controls{opacity:1;transform:translateX(-50%)}
body.ctl-hide #controls{opacity:0;transform:translateX(-50%) translateY(40px);pointer-events:none;transition-duration:.6s}
.glass,.circ.glass{position:relative;color:#fff;
background:
linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.10) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.16) 100%),
linear-gradient(var(--accent),var(--accent)),
linear-gradient(#1e2c54,#1e2c54);
-webkit-backdrop-filter:blur(24px) saturate(1.9) brightness(1.08);backdrop-filter:blur(24px) saturate(1.9) brightness(1.08);
box-shadow:0 16px 38px rgba(15,25,60,.24),0 2px 6px rgba(15,25,60,.14),
inset 0 1.5px 0 rgba(255,255,255,.70),inset 0 -1px 0 rgba(255,255,255,.20),
inset 0 0 0 1px rgba(255,255,255,.24),inset 0 14px 22px -12px rgba(255,255,255,.40);
transition:background-color .8s ease,filter .25s ease,transform .2s var(--ease)}
.glass::before{content:'';position:absolute;left:7%;right:7%;top:2px;height:40%;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));opacity:.6}
.glass:hover{filter:brightness(1.07)}
.pill{display:flex;align-items:center;gap:16px;height:84px;padding:0 12px;border-radius:8px;min-width:322px}
.thumb{width:62px;height:62px;border-radius:50%;overflow:hidden;flex:none;background:rgba(255,255,255,.3)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease}
.txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;flex:1;min-width:84px;transition:opacity .22s ease}
.txt.fade{opacity:0}
.cap{display:none;font:400 13px/1 var(--sans);opacity:.8;letter-spacing:.01em}
.label{font:600 19px/1 var(--sans);letter-spacing:.01em}
.arrows{display:flex;gap:6px}
.arrow{all:unset;cursor:pointer;width:44px;height:30px;border-radius:15px;display:grid;place-items:center;
background:rgba(255,255,255,.26);transition:background .2s,transform .2s var(--ease)}
.arrow:hover{background:rgba(255,255,255,.45)}
.arrow:active{transform:scale(.92)}
.arrow:focus-visible,.circ:focus-visible{outline:2px solid #fff;outline-offset:2px}
.circ{all:unset;cursor:pointer;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
transition:transform .2s var(--ease),background-color .8s ease}
.circ:active{transform:scale(.94)}
.circ.glass{border-radius:50%;position:relative}
.circ svg{width:30px;height:30px}
.ic{display:none;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic-ring{display:none !important}
.ic-scroll{display:block;transition:opacity .3s}
.circ.off .ic-scroll{opacity:.5}
#back{display:none}
body:not(.mode-cat) #auto{display:none} /* no round button beside the controller on the home page */
body.mode-cat #back{display:grid}
body.mode-cat .cap{display:block}
body.mode-cat .arrows{display:none}
body.mode-cat .pill{min-width:0;padding-right:30px}
body.mode-cat .ic-ring{display:none}
body.mode-cat .ic-scroll{display:block}
body.mode-cat.gallery .ic-scroll{display:none}
body.mode-cat.gallery .ic-plus{display:block}
/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:10;pointer-events:none}
#bootRing{position:absolute;inset:0;width:100%;height:100%}
#bootVine{transition:opacity .5s ease}
#bootVine .vine{fill:none;stroke:#5a3b34;stroke-linecap:round;stroke-linejoin:round}
#bootText{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:90vw}
#bootName{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--nameFs);letter-spacing:-.01em;line-height:1.1;
opacity:0;filter:blur(14px);transform:translateY(10px);
transition:opacity 1.3s ease,filter 1.3s ease,transform 1.5s var(--ease)}
#bootName.in{opacity:1;filter:none;transform:none}
#bootPct{margin:16px 0 0;font:500 17px var(--sans);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .7s ease}
body.show-pct #bootPct{opacity:1}
#bootText.out #bootName,#bootText.out #bootPct{opacity:0;filter:blur(10px);transform:translateY(-14px);
transition:opacity .7s ease,filter .7s ease,transform .8s var(--ease)}
body.txt3d #title{display:none}
#nogl{position:fixed;inset:0;display:none;place-items:center;font:16px var(--sans);z-index:20;background:#fff;text-align:center;padding:24px}
/* the round button: plus turns into LAYOUT on hover; in layout view it shows GRID */
.circ .ic-plus,.circ .ic-lay,.circ .ic-grid{transform-origin:15px 15px;transition:opacity .35s ease,transform .7s var(--ease)}
body.mode-cat .ic-lay, body.mode-cat .ic-grid{display:block;opacity:0;transform:rotate(-90deg) scale(.55)}
body.mode-cat.gallery:not(.layout-view) .circ:hover .ic-plus{opacity:0;transform:rotate(90deg) scale(.55)}
body.mode-cat.gallery:not(.layout-view) .circ:hover .ic-lay{opacity:1;transform:none}
body.layout-view .ic-plus{opacity:0;transform:rotate(90deg) scale(.55)}
body.layout-view .ic-grid{opacity:1;transform:none}
body.layout-view .circ:hover .ic-grid{transform:rotate(90deg)}
@media (hover:none){
body.mode-cat.gallery:not(.layout-view) .ic-plus{opacity:0}
body.mode-cat.gallery:not(.layout-view) .ic-lay{opacity:1;transform:none}
}
/* ---------- layout view (endless 3-D film strip) ---------- */
#cat{transition:opacity .6s ease}
body.layout-view #cat{opacity:0;pointer-events:none}
body.layout-view #foldShade{opacity:0}
body.layout-view #intro{opacity:0}
body.layout-view{cursor:grab}
body.layout-view.grabbing{cursor:grabbing}
#filmHud{position:fixed;left:0;right:0;bottom:3.4vh;padding:0 42px;z-index:3;display:flex;justify-content:space-between;pointer-events:none;
font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#222;
opacity:0;transition:opacity .8s ease}
body.layout-view #filmHud{opacity:1;transition-delay:.6s}
@media (max-width:700px){
#filmHud{bottom:auto;top:5vh;padding:0 20px}
}
/* =====================================================================
EXTRAS — paper grain, petals, aperture cursor, tilt, sound button
===================================================================== */
/* ---------- paper texture: a faint grain + fibres behind the pencil flowers ---------- */
#paper,#page .pg-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
background-color:#fffefb;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:320px 320px,520px 520px}
#paper::after,#page .pg-bg::after{content:'';position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,0) 55%,rgba(120,96,70,.07) 100%)} /* soft vignette like an old sheet */
/* ---------- petal / sweep canvas ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
/* ---------- aperture cursor (fine pointers only) ---------- */
#aperture{position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:100;pointer-events:none;
opacity:0;transition:opacity .3s ease;will-change:transform;filter:drop-shadow(0 0 1.2px rgba(40,24,20,.75))}
#aperture.on{opacity:1}
#aperture svg{width:100%;height:100%;display:block;overflow:visible}
#aperture .ring{fill:none;stroke:#fff;stroke-width:1.6}
#aperture .blade{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#aperture .dot{fill:#fff}
@media (pointer:fine){
html,body,body *{cursor:none !important}
}
@media (pointer:coarse){ #aperture{display:none} }
/* ---------- tilt + shine on photos ---------- */
.shot{--tx:0deg;--ty:0deg;--ts:1;--sx:50%;--sy:50%}
.shot.rv.in{transform:perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty)) scale(var(--ts))}
.shot.tilt{transition:opacity 1s ease,transform .16s ease-out}
.shot.tilt-off{transition:opacity 1s ease,transform .9s var(--ease)}
.shot::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
transition:opacity .5s ease;border-radius:0;
background:
radial-gradient(circle at var(--sx) var(--sy),rgba(255,255,255,.28),rgba(255,255,255,0) 46%),
linear-gradient(105deg,rgba(255,255,255,0) calc(var(--sx) - 22%),rgba(255,255,255,.30) var(--sx),rgba(255,255,255,0) calc(var(--sx) + 22%))}
.shot.tilt::after{opacity:1}
#cat.rounded .shot::after{border-radius:18px}
/* ---------- sound button ---------- */
#sound{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;font:inherit;position:fixed;right:22px;top:20px;z-index:45;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
cursor:pointer;opacity:0;pointer-events:none;transform:translateY(-10px);
transition:opacity 1s ease .4s,transform 1.2s var(--ease) .4s,filter .25s ease,background-color .8s ease}
body.ui-in #sound{opacity:1;pointer-events:auto;transform:none}
body.layout-view #sound,body.mode-cat #sound{opacity:1}
#sound svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sound .wave{transition:opacity .25s ease}
#sound .slash{transition:opacity .25s ease}
#sound[aria-pressed="false"] .wave{opacity:0}
#sound[aria-pressed="true"] .slash{opacity:0}
#sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:700px){ #sound{right:14px;top:14px;width:42px;height:42px} }
/* ---------- pencil flowers that draw themselves while loading ---------- */
#bootPencil{transition:opacity .5s ease}
#bootPencil path{fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
.shot.rv.in{transform:none}
.shot::after{display:none}
}
/* =====================================================================
THEME — paper, pencil ink and blossom pink for fonts + buttons
(laptop and phone)
===================================================================== */
:root{
--sans:'Playfair Display','Times New Roman',serif; /* one family everywhere: the same serif as the headings */
--ink:#4a2f2a; /* pencil brown, same as the vine */
--ink-soft:rgba(74,47,42,.62);
--blush:#f7c6d6; --rose:#d94c78; --paper:#fffcf6;
--accent:var(--rose);
}
body{font-variant-numeric:lining-nums}
#intro{font:italic 400 18px/1.3 var(--serif);color:var(--ink);letter-spacing:.005em}
#intro a{color:var(--ink);text-decoration-color:var(--rose);text-decoration-thickness:1.5px;text-underline-offset:4px}
#bootPct{font:italic 500 18px var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink-soft)}
#filmHud{font:italic 500 13px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* ---------- buttons: cream paper, hand-drawn double pencil outline, blossom wash on hover ---------- */
.glass,.circ.glass,#sound.glass{
color:var(--ink);
background:
radial-gradient(120% 140% at 12% 0%,rgba(247,198,214,.28),rgba(247,198,214,0) 55%),
linear-gradient(var(--paper),var(--paper));
-webkit-backdrop-filter:none;backdrop-filter:none;
box-shadow:inset 0 0 0 1.4px rgba(74,47,42,.78),0 6px 16px rgba(120,80,70,.16),0 1px 2px rgba(120,80,70,.18);
transition:background-color .3s ease,filter .25s ease,transform .25s var(--ease),box-shadow .3s ease}
.glass::before{content:'';position:absolute;left:-3.5px;right:-3.5px;top:-3.5px;bottom:-3.5px;height:auto;
border-radius:inherit;border:1.1px solid rgba(74,47,42,.38);background:none;opacity:1;pointer-events:none;
transform:rotate(-.35deg)} /* the second, slightly off pencil line */
.pill.glass{border-radius:16px 20px 17px 19px / 19px 16px 20px 17px}
.circ.glass{border-radius:48% 52% 50% 50% / 52% 48% 52% 48%}
#sound.glass{border-radius:50% 48% 52% 50% / 48% 52% 48% 52%}
.glass:hover{filter:none;box-shadow:inset 0 0 0 1.4px rgba(74,47,42,.9),inset 0 0 0 40px rgba(247,198,214,.38),0 8px 20px rgba(217,76,120,.20)}
.circ:active,.arrow:active,#sound:active{transform:scale(.93)}
.ic{stroke:var(--ink);stroke-width:2}
.ic-ring{stroke:var(--rose)}
#sound svg{stroke:var(--ink)}
.thumb{background:var(--blush);box-shadow:0 0 0 1.4px rgba(74,47,42,.7),0 0 0 4px var(--paper),0 0 0 5px rgba(74,47,42,.3)}
.arrow{color:var(--ink);background:rgba(247,198,214,.55);box-shadow:inset 0 0 0 1px rgba(74,47,42,.45)}
.arrow:hover{background:rgba(247,198,214,.95)}
.arrow:focus-visible,.circ:focus-visible,#sound:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.label{font:600 17px/1 var(--serif);letter-spacing:.14em;color:var(--ink)}
.cap{font:italic 400 14px/1 var(--serif);letter-spacing:.01em;opacity:.75;color:var(--ink)}
#zoomTip{font:italic 600 15px/1 var(--serif);letter-spacing:.04em;color:var(--ink);background:rgba(255,252,246,.94);
box-shadow:inset 0 0 0 1.3px rgba(74,47,42,.7),0 6px 16px rgba(120,80,70,.18);border-radius:10px 12px 10px 13px;
-webkit-backdrop-filter:none;backdrop-filter:none}
/* ---------- phone ---------- */
@media (max-width:700px){
#intro{font-size:15px;top:4vh}
#controls{gap:6px;bottom:max(2.4vh,env(safe-area-inset-bottom,0px) + 10px)}
#controls .pill{height:62px;min-width:0;gap:10px;padding:0 10px}
body.mode-cat #controls .pill{padding-right:20px}
#controls .thumb{width:44px;height:44px}
#controls .txt{min-width:70px;gap:5px}
.label{font-size:13.5px;letter-spacing:.11em}
.cap{font-size:12.5px}
.arrows{gap:4px}
.arrow{width:36px;height:28px}
.circ{width:62px;height:62px}
.circ svg{width:26px;height:26px}
#filmHud{font-size:11px}
#zoomTip{font-size:13px;padding:7px 11px}
#bootPct{font-size:16px}
}
@media (max-width:360px){
#controls .thumb{display:none}
#controls .pill{padding:0 8px}
}
/* faint track under the auto-rotate progress ring so the round button never looks empty */
body:not(.mode-cat) #auto::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
border-radius:50%;border:2px solid rgba(74,47,42,.16);pointer-events:none}
@media (max-width:700px){ body:not(.mode-cat) #auto::after{width:19px;height:19px;margin:-9.5px 0 0 -9.5px} }
/* =====================================================================
ABOUT + CONTACT pages
===================================================================== */
#paper,#page .pg-bg{} /* (paper texture is shared, see above) */
#mainnav{position:fixed;left:28px;top:calc(4.6vh - 10px);z-index:46;display:flex;gap:2px;padding:5px 7px;
opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 1s ease .5s,transform 1.2s var(--ease) .5s}
body.ui-in #mainnav{opacity:1;pointer-events:auto;transform:none}
#mainnav.glass{border-radius:16px 20px 17px 19px / 19px 16px 20px 17px}
#mainnav.glass:hover{box-shadow:inset 0 0 0 1.4px rgba(74,47,42,.78),0 6px 16px rgba(120,80,70,.16),0 1px 2px rgba(120,80,70,.18)}
#mainnav button{appearance:none;-webkit-appearance:none;border:0;margin:0;background:none;color:var(--ink);cursor:pointer;
font:italic 500 17px/1 var(--serif);padding:9px 14px;border-radius:12px;position:relative;transition:background-color .3s ease}
#mainnav button::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:1.5px;background:var(--rose);
transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
#mainnav button:hover{background:rgba(247,198,214,.5)}
#mainnav button:hover::after,#mainnav button.on::after{transform:scaleX(1)}
#mainnav button:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
body.page-open #mainnav{top:20px}
body.page-open.pg-scrolled #mainnav{opacity:0 !important;pointer-events:none !important;transition:opacity .25s ease,transform 1.2s var(--ease) !important}
#page{position:fixed;inset:0;z-index:35;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;
touch-action:pan-y;background:#fffefb;visibility:hidden;opacity:0;pointer-events:none;
transition:opacity .55s ease .2s,visibility 0s linear .8s;user-select:text;-webkit-user-select:text}
#page::-webkit-scrollbar{display:none}
#page.on{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .55s ease .3s,visibility 0s}
#page .pg-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#pgCv{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.pg-inner{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:108px 40px 150px}
#pgTitle{display:inline-block;margin:0 0 6px;font:500 var(--pgFs) / 1 var(--serif);letter-spacing:0;color:var(--ink);white-space:nowrap;
cursor:pointer;opacity:0;transform:translateY(24px);filter:blur(10px);
transition:opacity .9s ease,transform 1.2s var(--ease),filter .9s ease}
#page{--pgFs:clamp(64px,min(19vw,22vh),188px)}
#page.ready #pgTitle{opacity:1;transform:none;filter:none}
#page.scatter #pgTitle{opacity:0;transition:opacity .18s ease}
#page.scatter.back #pgTitle{opacity:1;transition:opacity .55s ease}
.pg-kicker{font:italic 400 16px/1 var(--serif);color:var(--rose);letter-spacing:.04em;margin:0 0 14px}
.pg-hint{font:italic 400 14px/1 var(--serif);color:var(--ink-soft);margin:6px 0 0}
.pg-rise{opacity:0;transform:translateY(26px);filter:blur(8px);
transition:opacity .9s ease calc(var(--i,0)*.09s + .55s),transform 1.2s var(--ease) calc(var(--i,0)*.09s + .55s),filter .9s ease calc(var(--i,0)*.09s + .55s)}
#page.ready .pg-rise{opacity:1;transform:none;filter:none}
.pg-sec[hidden]{display:none}
.pg-lead{font:italic 400 clamp(22px,2.7vw,30px)/1.4 var(--serif);color:var(--ink);margin:30px 0 0;max-width:760px}
.pg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;margin-top:46px;align-items:start}
.pg-copy p{font:400 17px/1.75 var(--serif);color:rgba(74,47,42,.9);margin:0 0 18px}
.pg-sign{font:italic 500 26px/1 var(--serif);color:var(--rose);margin-top:8px}
.portrait{position:relative;aspect-ratio:4/5;border-radius:18px 22px 19px 21px / 21px 18px 22px 19px;
background:radial-gradient(120% 90% at 20% 0%,rgba(247,198,214,.55),rgba(247,198,214,0) 60%),linear-gradient(var(--paper),var(--paper));
box-shadow:inset 0 0 0 1.5px rgba(74,47,42,.78),0 14px 30px rgba(120,80,70,.16);display:grid;place-items:center;overflow:visible}
.portrait .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:inherit;display:block}
.portrait .fl{z-index:2}
.portrait::before{content:'';position:absolute;inset:-6px;border-radius:inherit;border:1.1px solid rgba(74,47,42,.38);transform:rotate(-.8deg);pointer-events:none}
.portrait .ini{font:italic 500 clamp(54px,8vw,92px)/1 var(--serif);color:var(--ink);letter-spacing:.02em;position:relative;z-index:1}
.portrait .cap2{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:italic 400 14px/1 var(--serif);color:var(--ink-soft);z-index:1}
.portrait svg.fl{position:absolute;overflow:visible;pointer-events:none}
.portrait .f1{right:-26px;top:-30px}.portrait .f2{left:-22px;bottom:34px}
.facts{margin:0 0 30px;padding:0;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:13px 0;border-bottom:1.2px dashed rgba(74,47,42,.28);align-items:baseline}
.facts dt{font:italic 400 15px/1.3 var(--serif);color:var(--ink-soft)}
.facts dd{margin:0;font:500 17px/1.4 var(--serif);color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 34px}
.stats div{padding:6px 0 0 14px;border-left:1.4px solid rgba(217,76,120,.55)}
.stats b{display:block;font:500 clamp(34px,4.2vw,50px)/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums}
.stats span{display:block;margin-top:6px;font:italic 400 14px/1.3 var(--serif);color:var(--ink-soft)}
.pbtn{appearance:none;-webkit-appearance:none;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:54px;padding:0 30px;font:600 15px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
border-radius:16px 20px 17px 19px / 19px 16px 20px 17px}
.pbtn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbtn:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
/* contact */
.cinfo{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:0}
.cinfo li{padding:15px 0;border-bottom:1.2px dashed rgba(74,47,42,.28)}
.cinfo small{display:block;font:italic 400 14px/1 var(--serif);color:var(--ink-soft);margin-bottom:7px}
.cinfo a,.cinfo span{font:500 clamp(19px,2vw,23px)/1.3 var(--serif);color:var(--ink);text-decoration:none;
background:linear-gradient(var(--rose),var(--rose)) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease)}
.cinfo a:hover{background-size:100% 1.5px}
.cform{display:block}
.fld{position:relative;margin:0 0 26px}
.fld input,.fld textarea{all:unset;display:block;box-sizing:border-box;width:100%;padding:22px 2px 9px;font:italic 400 19px/1.4 var(--serif);color:var(--ink);
border-bottom:1.4px solid rgba(74,47,42,.7);user-select:text;-webkit-user-select:text;caret-color:var(--rose)}
.fld textarea{min-height:128px;resize:none;white-space:pre-wrap}
.fld label{position:absolute;left:2px;top:22px;font:italic 400 19px/1 var(--serif);color:var(--ink-soft);pointer-events:none;transform-origin:left;
transition:transform .4s var(--ease),color .3s ease}
.fld input:focus + label,.fld input:not(:placeholder-shown) + label,.fld textarea:focus + label,.fld textarea:not(:placeholder-shown) + label{
transform:translateY(-22px) scale(.74);color:var(--rose)}
.fld::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fld:focus-within::after{transform:scaleX(1)}
.chips-t{font:italic 400 15px/1 var(--serif);color:var(--ink-soft);margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.chip{appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;border:0;background:var(--paper);color:var(--ink);font:italic 500 16px/1 var(--serif);
padding:11px 18px;border-radius:14px 17px 15px 16px / 16px 14px 17px 15px;box-shadow:inset 0 0 0 1.3px rgba(74,47,42,.6);
transition:background-color .3s ease,box-shadow .3s ease,transform .25s var(--ease)}
.chip:hover{background:rgba(247,198,214,.55)}
.chip[aria-pressed="true"]{background:var(--blush);box-shadow:inset 0 0 0 1.5px rgba(74,47,42,.9),0 4px 10px rgba(217,76,120,.2)}
.chip:active{transform:scale(.95)}
.chip:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.cnote{font:italic 400 15px/1.5 var(--serif);color:var(--ink-soft);margin:18px 0 0;min-height:23px;transition:color .4s ease}
.cnote.ok{color:var(--rose)}
/* decorative pencil flowers that draw themselves */
.deco{position:fixed;z-index:1;pointer-events:none;overflow:visible}
.deco.d1{right:-34px;top:92px;width:min(250px,26vw)}
.deco.d2{left:-50px;bottom:-30px;width:min(300px,30vw)}
.deco.d3{right:8vw;bottom:16vh;width:min(120px,12vw)}
.dr{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;
transition:stroke-dashoffset 1.5s ease var(--d,0s),opacity .01s linear var(--d,0s)}
#page.ready .dr{stroke-dashoffset:0;opacity:1}
#pgClose{position:fixed;left:50%;bottom:3.4vh;z-index:8;transform:translateX(-50%) translateY(30px);opacity:0;
width:84px;height:84px;display:grid;place-items:center;
transition:opacity .9s ease 1.1s,transform 1.2s var(--ease) 1.1s,box-shadow .3s ease,background-color .3s ease}
#page.ready #pgClose{opacity:1;transform:translateX(-50%)}
#pgClose:active{transform:translateX(-50%) scale(.93)}
#pgClose svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
.pg-grid{grid-template-columns:1fr;gap:38px}
.portrait{max-width:300px}
}
@media (max-width:700px){
#mainnav{left:50%;top:calc(4vh + 28px);transform:translate(-50%,-8px)}
body.ui-in #mainnav{transform:translateX(-50%)}
body.page-open #mainnav{top:14px}
#mainnav button{font-size:15.5px;padding:8px 12px}
.pg-inner{padding:84px 22px 150px}
#page{--pgFs:clamp(60px,21vw,120px)}
.facts div{grid-template-columns:104px 1fr;gap:10px}
.stats b{font-size:32px}
.deco.d1{top:70px;opacity:.55;width:150px;right:-30px}
.deco.d2{opacity:.55;width:170px}
.deco.d3{display:none}
#pgClose{width:62px;height:62px;bottom:max(2.4vh,env(safe-area-inset-bottom,0px) + 10px)}
#pgClose svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
.pg-rise,#pgTitle{transition:opacity .4s ease;transform:none;filter:none}
.dr{transition:none}
}
#pgClose.glass{border-radius:48% 52% 50% 50% / 52% 48% 52% 48%}
.deco.d3{right:1vw;bottom:4vh;width:min(96px,8vw)}
@media (max-width:1200px){ .deco.d3{display:none} }
/* ---------- credit, bottom-left on the home screen (minimal) ---------- */
#credit{display:none !important;position:fixed;left:28px;bottom:3.4vh;z-index:5;color:var(--ink-soft);text-decoration:none;white-space:nowrap;
font:italic 400 14px/1 var(--serif);letter-spacing:.01em;opacity:0;pointer-events:none;
transition:opacity .9s ease .7s,color .3s ease}
body.ready:not(.page-open):not(.mode-cat):not(.layout-view) #credit{opacity:0;pointer-events:none}
body:not(.ready) #credit,body.page-open #credit,body.mode-cat #credit,body.layout-view #credit{transition-delay:0s;transition-duration:.4s}
#credit:hover,#credit:focus-visible{color:var(--ink);opacity:1}
#credit:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
#credit .by{position:relative}
#credit .by::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
#credit:hover .by::after,#credit:focus-visible .by::after{transform:scaleX(1)}
@media (max-width:700px){
#credit{display:none} /* on phones the credit lives at the end of the About page */
}
/* credit inside the About page (phones only) */
.credit-in{display:block;margin-top:38px;padding-top:20px;border-top:1.2px dashed rgba(74,47,42,.28);color:var(--ink-soft);text-decoration:none;font:italic 400 14px/1 var(--serif)}
.credit-in .by{position:relative}
.credit-in .by::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--rose)}
@media (max-width:700px){
.credit-in{display:block;margin-top:38px;padding-top:20px;border-top:1.2px dashed rgba(74,47,42,.28)}
}
/* ---------- loading screen: the name in the same ink + italic serif as the rest ---------- */
#bootName{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink);letter-spacing:.005em;position:relative;display:inline-block}
#bootName::after{content:'';position:absolute;left:12%;right:12%;bottom:-8px;height:2px;border-radius:2px;background:var(--rose);opacity:.8;
transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .9s}
#bootName.in::after{transform:scaleX(1)}
#bootText.out #bootName::after{opacity:0;transition:opacity .5s ease}
#bootName::after{bottom:-5px}
#bootPct{margin-top:26px}
/* ---------- NAME above PORTFOLIO + top-row layout (About / Contact left, sound right) ---------- */
#intro{font:italic 500 clamp(24px,2.5vw,46px)/1.1 var(--serif);letter-spacing:.02em;color:var(--ink);
top:var(--nameTop,6vh);white-space:nowrap;text-shadow:none}
#mainnav{top:20px;left:28px}
body.page-open #mainnav{top:20px}
#sound{top:20px}
/* vertical scrolling (category page) and film view: no name, no About / Contact */
body.mode-cat #intro,body.layout-view #intro{opacity:0 !important;transition-delay:0s}
body.mode-cat #mainnav,body.layout-view #mainnav{opacity:0 !important;pointer-events:none !important;transition-delay:0s}
@media (max-width:700px){
#intro{font-size:clamp(22px,6.4vw,30px);top:var(--nameTop,18vh)}
#mainnav{left:14px;top:14px;transform:translateY(-8px)}
body.ui-in #mainnav{transform:none}
body.page-open #mainnav{top:14px}
#sound{top:14px}
}