/* Rofaida Abdelwahap portfolio styles */
:root{color-scheme:light}body{margin:0;font:14px system-ui}[hidden]{display:none!important}
.kc-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;
  padding:clamp(14px,2.4vw,40px) 0 0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center}

.kc-grid{position:absolute;left:50%;top:clamp(110px,13vw,230px);transform:translateX(-50%);
  width:min(820px,62vw);aspect-ratio:896/939;opacity:.3;pointer-events:none;
  background-image:linear-gradient(rgba(41,72,14,.3) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(41,72,14,.3) 1px,transparent 1px);
  background-size:calc(100%/36) calc(100%/36)}

.kc-title{position:relative;z-index:3;text-align:center;color:#29480E;
  font-size:clamp(30px,5.4vw,104px);line-height:.94;letter-spacing:-.025em;pointer-events:none}

.kc-notes{position:absolute;inset:0;z-index:3;pointer-events:none}
.kc-note{position:absolute;width:min(250px,22vw);font-size:clamp(13px,1.05vw,20px);line-height:1.2;color:#475E32}
.kc-note.kc-l{left:clamp(14px,5vw,126px);top:36%}
.kc-note.kc-r{right:clamp(14px,4vw,120px);bottom:20%}


.kc-stage{position:relative;z-index:2;width:100%;height:100%;touch-action:pan-y}
/* no will-change here: the scaler only changes on resize, and a pinned raster scale
   (set while the works page was still hidden) left the resting chains and hub unpainted */
.kc-scaler{position:absolute;left:0;top:0;transform-origin:0 0}
.kc-layer{position:absolute;left:0;top:0;pointer-events:none}
.kc-still{position:absolute;display:block}
#kcChains{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
#kcStills{z-index:1}
.kc-hub{position:absolute;z-index:2;pointer-events:none}
.kc-hub img,.kc-part img{display:block;width:100%;height:100%;-webkit-user-drag:none}
.kc-part{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;
  transition:filter .2s ease}
.kc-part.kc-hot{filter:drop-shadow(0 14px 18px rgba(28,48,9,.22)) brightness(1.04)}

.kc-kbd{position:absolute;left:0;top:0;z-index:40;appearance:none;background:none;border:0;
  padding:0;opacity:0;cursor:pointer}
.kc-kbd:focus-visible{opacity:1;outline:2px solid #19708F;outline-offset:2px;border-radius:10px}

.kc-tip{position:fixed;z-index:20;pointer-events:none;opacity:0;transform:translate(-50%,-240%);
  background:#1C2E0A;color:#FFFEEB;font-size:13px;font-weight:500;padding:7px 11px;
  border-radius:8px;white-space:nowrap;transition:opacity .18s ease;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.kc-tip.kc-on{opacity:1}

.kc-hint{position:relative;z-index:6;margin:6px 0 18px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#657853;display:flex;align-items:center;gap:10px}
.kc-sound{appearance:none;border:1px solid rgba(41,72,14,.35);background:transparent;
  color:#29480E;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;cursor:pointer}
.kc-sound[aria-pressed="true"]{background:#29480E;color:#FFFEEB;border-color:#29480E}

@media (max-width:860px){
  .kc-hero{height:auto;min-height:0;padding-bottom:26px;grid-template-rows:auto auto auto auto;row-gap:10px}
  .kc-stage{height:min(64svh,520px)}
  .kc-grid{top:clamp(90px,24vw,180px);width:min(560px,82vw)}
  .kc-notes{position:static;display:flex;flex-direction:column;gap:12px;padding:4px clamp(16px,5vw,32px) 0}
  .kc-note{position:static;width:auto;max-width:44ch;margin:0 auto;text-align:center}
  .kc-hint{flex-direction:column;gap:10px;text-align:center}
}

.kc{position:relative;color:#233413;font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
.kc h3.kc-title{margin:0;font-weight:800;letter-spacing:-.025em}
.kc p{margin:0}

/* =============================================================================
   Rofaida — V2 (Figma "V2" section 332:4796)
   Three rooms on one turning world: Home, Selected works, About.
   Units: U(n) = n design px of the 1920 frame, scaled to the viewport width.
          A(n) = n px of a painting's own 1921-wide art box (cover-fitted).
          S(n) = n px of a notebook sheet.
   Spacing and control sizes sit on the 8pt grid (8/16/24/32/48/64).
   ========================================================================== */
:root{
  --u:calc(min(100vw, 1920px) / 1920);
  --cream:#FFFEEB; --leaf:#29480E; --leaf-ink:#233413; --moss:#475E32; --maroon:#7D1C30;
  --rule:#CAC3AE; --sky-blue:#2491CC; --sky:#2491CC; --lilac:#E0B9E2;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
  --black:"Archivo Black",Archivo,"Helvetica Neue",Arial,sans-serif;
  --narrow:"Archivo Narrow",Archivo,"Helvetica Neue",Arial,sans-serif;
  --hand:"Homemade Apple","Bradley Hand",cursive;
  --note:"Architects Daughter","Bradley Hand",cursive;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --vh:100vh;
  color-scheme:light;
}
@supports (height:100dvh){:root{--vh:100dvh}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sky)}
body{font-family:var(--sans);color:var(--leaf);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,dl,dd{margin:0}
img{display:block}
button{font:inherit;color:inherit}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-64px;z-index:200;padding:12px 16px;border-radius:12px;background:var(--cream);color:var(--leaf);font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(41,72,14,.55)}
.site{position:fixed;inset:0;overflow:hidden;background:var(--sky)}
.dayimg{opacity:var(--day,1);transition:opacity 700ms var(--ease-io)}
.nightimg{opacity:calc(1 - var(--day,1));transition:opacity 700ms var(--ease-io)}
.site[data-theme="night"]{--day:0;--sky:#0C111F}

/* ------------------------------------------------------------- glass nav --
   Figma 332:4896: 729 x 58, 25 from the top. */
.gnav{position:fixed;top:calc(25 * var(--u));left:50%;z-index:90;width:calc(728 * var(--u));transform:translateX(calc(-50% - calc(35.5 * var(--u))));
  display:flex;align-items:center;justify-content:space-between;padding:calc(8 * var(--u));border-radius:999px;
  background:rgba(255,255,255,.21);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px) saturate(1.3);-webkit-backdrop-filter:blur(6px) saturate(1.3);
  box-shadow:inset 0 4px 6px rgba(255,255,255,.25);
  transition:background .45s var(--ease-io),border-color .45s,box-shadow .45s}
.gnav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(calc(160 * var(--u)) calc(60 * var(--u)) at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 70%);transition:opacity .3s}
.gnav:hover::after{opacity:.6}
.gnav .me{display:block;width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:999px;overflow:hidden;flex:none;transition:transform .5s var(--spring)}
.gnav .me:hover{transform:rotate(-8deg) scale(1.06)}
.gnav .me img{width:100%;height:100%;object-fit:cover}
.gnav .links{display:flex;gap:calc(52 * var(--u));align-items:center}
.gnav .links a{position:relative;color:var(--cream);text-decoration:none;font-size:calc(20 * var(--u));font-weight:500;line-height:1.2;transition:color .35s}
.gnav .links a::after{content:"";position:absolute;left:0;right:0;bottom:calc(-4 * var(--u));height:calc(2 * var(--u));border-radius:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.gnav .links a:hover::after,.gnav .links a[aria-current="true"]::after{transform:scaleX(1)}
.resume{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u));border-radius:999px;background:var(--cream);
  color:var(--sky-blue);font-weight:600;font-size:calc(11.6 * var(--u));line-height:calc(16 * var(--u));text-decoration:none;white-space:nowrap;transition:transform .25s var(--spring),box-shadow .25s}
.resume:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(2,21,28,.5)}
.resume b{display:grid;place-items:center;width:calc(28 * var(--u));height:calc(28 * var(--u));border-radius:999px;background:var(--sky-blue);transition:transform .4s var(--spring)}
.resume:hover b{transform:translateY(calc(2 * var(--u)))}
.resume b img{width:calc(18 * var(--u));height:calc(18 * var(--u))}
/* on cream pages the glass picks up the paper */
.site[data-dive] .gnav,.site[data-mode="works"] .gnav,.site[data-mode="all"] .gnav,.site[data-mode="case"] .gnav{background:rgba(255,254,235,.72);border-color:rgba(41,72,14,.14);
  box-shadow:inset 0 4px 6px rgba(255,255,255,.4),0 18px 34px -22px rgba(23,40,8,.45)}
.site[data-dive] .gnav .links a,.site[data-mode="works"] .gnav .links a,.site[data-mode="all"] .gnav .links a,.site[data-mode="case"] .gnav .links a{color:var(--leaf)}
.site[data-dive] .resume,.site[data-mode="works"] .resume,.site[data-mode="all"] .resume,.site[data-mode="case"] .resume{background:var(--leaf);color:var(--cream)}

.hdr-zone{position:fixed;left:0;right:0;top:0;height:96px;z-index:89;pointer-events:none}
.hdr-grip{position:absolute;left:50%;top:8px;width:48px;height:5px;margin-left:-24px;border-radius:999px;background:rgba(255,254,235,.85);
  box-shadow:0 1px 6px rgba(2,21,28,.35);opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--spring)}
.site[data-hdrauto]:not([data-hdr]):not([data-hdrpin]) .hdr-grip{opacity:1;transform:none}
.site[data-mode="works"] .hdr-grip,.site[data-mode="all"] .hdr-grip,.site[data-mode="case"] .hdr-grip{background:rgba(41,72,14,.45)}
.site[data-hdrauto] .gnav,.site[data-hdrauto] .corner{transition:transform .5s var(--ease-out),opacity .35s,background .45s,border-color .45s,box-shadow .45s}
.site[data-hdrauto]:not([data-hdr]):not([data-hdrpin]) .gnav{transform:translateX(calc(-50% - calc(35.5 * var(--u)))) translateY(-160%);opacity:0;pointer-events:none}
.site[data-hdrauto]:not([data-hdr]):not([data-hdrpin]) .corner{transform:translateY(-200%);opacity:0;pointer-events:none}
.corner{position:fixed;z-index:90;top:calc(38.6 * var(--u));right:calc(81 * var(--u));display:flex;gap:calc(8 * var(--u));align-items:center}
.sound{position:relative;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:999px;border:0;background:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .3s var(--spring),box-shadow .3s}
.sound::before,.toggle::before{content:"";position:absolute;inset:-6px}
.sound:hover{transform:scale(1.06);box-shadow:0 8px 16px -8px rgba(2,21,28,.45)}
.sound svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.sound .bar{transform-box:fill-box;transform-origin:50% 50%}
.sound[aria-pressed="true"] .bar{animation:eq .9s ease-in-out infinite alternate}
.sound[aria-pressed="true"] .bar:nth-child(2){animation-delay:-.3s}.sound[aria-pressed="true"] .bar:nth-child(3){animation-delay:-.6s}
.sound[aria-pressed="true"] .bar:nth-child(4){animation-delay:-.15s}.sound[aria-pressed="true"] .bar:nth-child(5){animation-delay:-.45s}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1.05)}}
.toggle{position:relative;width:calc(66 * var(--u));height:calc(34 * var(--u));border-radius:999px;cursor:pointer;padding:0;background:rgba(255,254,235,.16);border:1px solid rgba(255,254,235,.5);transition:background .3s,border-color .3s}
.toggle .knob{position:absolute;top:calc(3 * var(--u));left:calc(3 * var(--u));width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:999px;background:#F5C84B;box-shadow:inset -3px -3px 0 0 #E0A517;transition:transform .45s var(--spring),background .3s,box-shadow .3s}
.site[data-theme="night"] .toggle .knob{transform:translateX(calc(32 * var(--u)));background:#FFFEEB;box-shadow:inset -7px -2px 0 0 #B1C2A1}
.site[data-mode="works"] .toggle,.site[data-mode="case"] .toggle{background:rgba(41,72,14,.08);border-color:rgba(41,72,14,.3)}

/* ------------------------------------------------------- liquid glass kit */
.glass-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;
  font:500 16px/1 var(--sans);color:var(--leaf);text-decoration:none;cursor:pointer;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(16px) saturate(1.7);-webkit-backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px -10px rgba(255,255,255,.35),0 10px 28px -14px rgba(2,21,28,.45);
  transition:transform .35s var(--spring),box-shadow .3s,background .3s}
.glass-btn::after{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:999px 999px 40% 40%;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.glass-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -10px 18px -10px rgba(255,255,255,.45),0 16px 32px -14px rgba(2,21,28,.5)}
.glass-btn:active{transform:scale(.96)}
.glass-btn svg{width:20px;height:20px;flex:none}
.glass-btn.close{width:48px;padding:0}
.glass-btn.solid{background:var(--leaf);color:var(--cream);border-color:var(--leaf)}
.glass-btn.solid::after{opacity:.25}

/* ==================================================================== world */
.world{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#1F86C4 0%,#4FA8DD 55%,#BFE3F1 100%)}
.site[data-theme="night"] .world{background:linear-gradient(180deg,#060B18 0%,#0E2034 60%,#1C3440 100%)}
.w-backdrop{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-io);pointer-events:none}
.w-backdrop .sky-drift{position:absolute;inset:-4%;opacity:.55}
.site[data-orbit] .w-backdrop{opacity:1}
.scene{position:absolute;inset:0;perspective:var(--P,2400px);perspective-origin:50% 50%}
.prism{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.prism>.face{pointer-events:auto}
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--sky);transform:rotateY(calc(var(--i) * 120deg)) translateZ(var(--a,0px));
  border-radius:var(--fr,0px);transition:border-radius .5s var(--ease-out),box-shadow .5s,filter .6s var(--ease-io)}
.face[data-i="0"]{--i:0}.face[data-i="1"]{--i:1}.face[data-i="2"]{--i:2}
.site[data-orbit] .face{--fr:32px;box-shadow:0 40px 80px -30px rgba(3,30,48,.55),0 0 0 1px rgba(255,255,255,.35)}
.site[data-orbit] .face *{pointer-events:none !important}
.site:not([data-orbit]) .face:not(.on){visibility:hidden}
.world.grab{cursor:grabbing}

/* the painting box: cover-fits the room, keeping its focal point on a third */
.art{position:absolute;pointer-events:none;
  --W:max(100vw, calc(var(--vh) * var(--arw) / var(--arh)));
  --H:max(var(--vh), calc(100vw * var(--arh) / var(--arw)));
  --k:calc(var(--W) / var(--arw));
  width:var(--W);height:var(--H);left:calc((100vw - var(--W)) * var(--fx));top:calc((var(--vh) - var(--H)) * var(--fy))}
.art > *{pointer-events:auto}
.art .bgimg,.art .cutout{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.ui{position:absolute;z-index:6}

/* mega titles: Archivo Black, the design's own tracking (-8.07% / -8.07% / -8.94%) */
.mega{position:absolute;z-index:3;margin:0;font-family:var(--black);font-weight:400;line-height:1;text-transform:uppercase;color:var(--cream);
  white-space:nowrap;pointer-events:none;text-shadow:0 2px 30px rgba(2,21,28,.08)}

/* ---------------------------------------------------------- 0 · home */
.f-home{--arw:1921;--arh:1096;--fx:.5;--fy:.5}
/* lifted 70 art units (Doha, Oct 23): the plate grows from the bottom edge so the
   grass still reaches the floor, and her face keeps its x (it sits ~38 units higher) */
.f-home .plate{position:absolute;left:calc(-617.6 * var(--k));top:calc(178.13 * var(--k));width:calc(2776.6 * var(--k));height:calc(925.5 * var(--k));
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--mA,0%),#000 var(--mB,16%));mask-image:linear-gradient(to bottom,transparent var(--mA,0%),#000 var(--mB,16%))}
.plate img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.cloudloop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cloudtrack{position:absolute;left:0;bottom:0;height:100%;display:flex;width:max-content;animation:windloop 300s linear infinite;will-change:transform}
.cloudtrack.far{animation-duration:190s;animation-delay:-60s}
.cloudtrack img{height:100%;width:auto;flex:none}
@keyframes windloop{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:calc(1 - var(--day,1));transition:opacity 700ms}
.star{position:absolute;width:3px;height:3px;border-radius:999px;background:#FFFEEB;opacity:.85;animation:twinkle 3.6s ease-in-out infinite alternate}
.star:nth-child(2n){animation-delay:-1.2s}.star:nth-child(3n){animation-delay:-2.4s}
@keyframes twinkle{from{transform:scale(.6)}to{transform:scale(1.2)}}
.catpart{position:absolute}
.catpart img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.cat-tail{transform-origin:78.8% 90.2%;animation:catsway 3s ease-in-out infinite alternate}
.cat-head{transform-origin:39.42% 95.12%;animation:catsway 3s ease-in-out infinite alternate}
.her-head{left:80.0909%;top:41.6364%;width:4.5455%;height:14.3636%;transform-origin:36.00% 92.41%;animation:hernod 2.2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes catsway{0%{transform:rotate(-9deg)}45%{transform:rotate(3deg)}100%{transform:rotate(8deg)}}
@keyframes hernod{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.catpart.boing{animation:boing .9s var(--spring) both !important}
@keyframes boing{0%{transform:rotate(0)}25%{transform:rotate(-18deg) scale(1.06)}55%{transform:rotate(12deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.her-head.nod{animation:bignod 1.4s ease-in-out both !important}
@keyframes bignod{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}

/* hotspots: the cut-out of each object glows along its own outline */
.spots{position:absolute;inset:0}
.spot{position:absolute;display:block;pointer-events:none;text-decoration:none;outline:none;transition:filter .35s var(--ease-out)}
.spot .cut{position:absolute;inset:0;width:100%;height:100%}
.catspot{position:absolute;pointer-events:none}
.catspot .cut{position:absolute;inset:0;width:100%;height:100%}
.spot .hit{position:absolute;inset:0;pointer-events:auto;cursor:pointer;clip-path:var(--hit)}
.spot:hover,.spot:focus-visible,.spot.hint{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
  drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,255,255,.6));animation:glowpulse 1.8s ease-in-out .4s infinite}
.spot.go{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 14px #fff) drop-shadow(0 0 40px rgba(255,255,255,.9)) brightness(1.08)}
@keyframes glowpulse{0%,100%{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,255,255,.6))}
  50%{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 11px #fff) drop-shadow(0 0 28px rgba(255,255,255,.75))}}
.spot b{position:absolute;left:50%;top:-12px;translate:-50% -100%;font:600 14px/1 var(--sans);color:#0E3A55;background:rgba(255,255,255,.94);
  padding:8px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 22px -12px rgba(2,21,28,.6);
  opacity:0;transform:translateY(6px) scale(.92);transition:opacity .25s,transform .4s var(--spring);pointer-events:none}
.spot b::after{content:" \2192"}
.spot:focus-visible b{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.spot b{display:none}}
.spot:focus-visible .hit{outline:2px dashed #fff;outline-offset:2px}

/* Figma Frame 43 at (95,216): pill, then the title, then the player tucked after GROW */
.home-ui{left:calc(112 * var(--u));top:calc(192 * var(--u));width:calc(1228.2 * var(--u));height:calc(400 * var(--u));pointer-events:none}
.home-ui > *{pointer-events:auto}
.pill{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:calc(12 * var(--u));height:calc(52 * var(--u));padding:0 calc(24 * var(--u));border-radius:999px;
  background:rgba(2,21,28,.28);color:var(--cream);font:500 calc(20.16 * var(--u))/calc(28.8 * var(--u)) var(--sans);white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill{overflow:hidden}
.pill-t{display:block;white-space:nowrap}
.pill i{position:relative;width:calc(11.5 * var(--u));height:calc(11.5 * var(--u));border-radius:999px;background:#9CD16D;flex:none;box-shadow:0 0 0 0 rgba(156,209,109,.6);animation:statusping 2.2s infinite}
.pill i::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid rgba(156,209,109,.85);animation:online 2.2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes statusping{0%{box-shadow:0 0 0 0 rgba(156,209,109,.6)}80%,100%{box-shadow:0 0 0 calc(10 * var(--u)) rgba(156,209,109,0)}}
.home-title{left:0;top:calc(77.2 * var(--u));font-size:calc(148 * var(--u));letter-spacing:calc(-12 * var(--u));pointer-events:none}

/* FEEL THE VIBES — Figma 332:4976, liquid glass with two records */
.vibes{position:absolute;left:calc(492 * var(--u));top:calc(243 * var(--u));width:calc(351.35 * var(--u));height:calc(106.66 * var(--u));border-radius:999px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(3px) saturate(1.5);-webkit-backdrop-filter:blur(3px) saturate(1.5);
  box-shadow:inset 0 calc(3.8 * var(--u)) calc(5.56 * var(--u)) calc(1.52 * var(--u)) #F5F1EE,inset calc(-1.52 * var(--u)) calc(-7.6 * var(--u)) calc(1.75 * var(--u)) 0 rgba(0,15,24,.25);
  filter:drop-shadow(0 calc(6 * var(--u)) calc(2.8 * var(--u)) rgba(0,54,78,.21));transition:transform .5s var(--spring)}
.vibes:hover{transform:translateY(calc(-2 * var(--u)))}
.disk{position:absolute;top:calc(13.97 * var(--u));width:calc(73.16 * var(--u));height:calc(73.16 * var(--u));border-radius:999px;border:calc(2.28 * var(--u)) solid #373535;
  box-shadow:0 0 0 calc(1.52 * var(--u)) #62615E;overflow:hidden;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    conic-gradient(from 90deg,#121212 0%,#121212 8.76%,#272727 10.18%,#3b3b3b 11.59%,#505050 13.01%,#646464 14.42%,#4f4f4f 18.19%,#3b3b3b 21.95%,#262626 31%,#121212 40.04%,#121212 59.51%,#272727 61.29%,#3b3b3b 63.07%,#505050 64.84%,#646464 66.62%,#4f4f4f 68.72%,#393939 70.82%,#262626 80.96%,#121212 91.1%,#121212 100%)}
.disk.l{left:calc(13.97 * var(--u))}.disk.r{left:calc(264.21 * var(--u))}
.disk i{position:absolute;left:50%;top:50%;width:calc(26.46 * var(--u));height:calc(26.46 * var(--u));margin:calc(-13.23 * var(--u)) 0 0 calc(-13.23 * var(--u));border-radius:999px;
  background:radial-gradient(circle,#1A1A1A 0 calc(2.4 * var(--u)),#E5E0A6 calc(2.6 * var(--u)) calc(7.4 * var(--u)),#C8C28A calc(7.6 * var(--u)) calc(13.2 * var(--u)));box-shadow:0 0 0 calc(1 * var(--u)) rgba(0,0,0,.4)}
.disk i::after{content:"";position:absolute;left:28%;top:18%;width:16%;height:16%;border-radius:999px;background:rgba(41,72,14,.6)}
.site[data-playing] .disk{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.v-title{position:absolute;left:0;right:0;top:calc(14 * var(--u));text-align:center;font:500 max(11px,calc(14 * var(--u)))/1 var(--narrow);letter-spacing:-.007em;color:#070707;pointer-events:none}
.v-bar{position:absolute;left:calc(105.21 * var(--u));top:calc(42.94 * var(--u));width:calc(140.9 * var(--u));height:calc(10.09 * var(--u));border-radius:999px;background:#686360;
  box-shadow:0 calc(2.28 * var(--u)) calc(.76 * var(--u)) 0 #EDEDED,inset 0 calc(-.76 * var(--u)) calc(2.28 * var(--u)) rgba(0,0,0,.2),inset calc(2.28 * var(--u)) calc(2.28 * var(--u)) calc(2.59 * var(--u)) rgba(0,0,0,.5)}
.v-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:linear-gradient(90deg,#29480E,#9CD16D)}
.v-knob{position:absolute;top:50%;left:calc(var(--p,0) * (100% - calc(19.26 * var(--u))));width:calc(19.26 * var(--u));height:calc(19.26 * var(--u));margin-top:calc(-9.63 * var(--u));border-radius:999px;
  border:calc(.76 * var(--u)) solid #E4E5E5;background:radial-gradient(circle at 50% 50%,#F6F4F5,#CACCC9);filter:drop-shadow(calc(1.5 * var(--u)) calc(3 * var(--u)) calc(1.5 * var(--u)) rgba(0,0,0,.25));pointer-events:none}
.v-knob::after{content:"";position:absolute;left:50%;top:50%;width:calc(6 * var(--u));height:calc(6 * var(--u));margin:calc(-3 * var(--u)) 0 0 calc(-3 * var(--u));border-radius:999px;background:linear-gradient(150deg,#fff 16%,#8D8B8F 70%);box-shadow:0 calc(.76 * var(--u)) calc(1.45 * var(--u)) rgba(0,0,0,.51)}
.v-bar input{position:absolute;inset:calc(-12 * var(--u)) 0;width:100%;height:calc(100% + calc(24 * var(--u)));margin:0;opacity:0;cursor:pointer}
.v-time{position:absolute;top:calc(57.6 * var(--u));font:400 max(10px,calc(9 * var(--u)))/1 var(--narrow);letter-spacing:.02em;color:#070707;font-variant-numeric:tabular-nums}
.v-time.a{left:calc(105.22 * var(--u))}.v-time.b{left:calc(226.71 * var(--u))}
.v-play{position:absolute;left:calc(158.69 * var(--u));top:calc(60.73 * var(--u));width:calc(33.96 * var(--u));height:calc(33.96 * var(--u));border-radius:999px;border:0;padding:0;cursor:pointer;
  background:#29480E;color:#9CD16D;display:grid;place-items:center;box-shadow:inset 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(255,255,255,.25),0 calc(3 * var(--u)) calc(6 * var(--u)) -calc(2 * var(--u)) rgba(0,0,0,.4);
  transition:transform .3s var(--spring)}
.v-play::before{content:"";position:absolute;inset:-6px;border-radius:999px}
.v-play:hover{transform:scale(1.08)}.v-play:active{transform:scale(.92)}
.v-play svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.v-play .i-pause{display:none}
.v-play[aria-pressed="true"] .i-play{display:none}.v-play[aria-pressed="true"] .i-pause{display:block}

.selhint{position:absolute;z-index:6;left:50%;bottom:72px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;height:48px;padding:0 20px 0 24px;border-radius:999px;
  font:500 16px/1 var(--sans);color:#3E3D3A;pointer-events:none;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25));border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 28px -16px rgba(2,21,28,.5)}
.selhint img{width:20px;height:20px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.site[data-theme="night"] .selhint,.site[data-theme="night"] .cue{color:var(--cream);background:rgba(12,17,31,.45);border-color:rgba(255,255,255,.25)}
.bubble{position:absolute;z-index:8;pointer-events:none;padding:12px 16px;border-radius:16px 16px 16px 4px;background:var(--cream);color:var(--leaf-ink);
  font:500 15px/1.35 var(--sans);box-shadow:0 14px 30px -16px rgba(2,21,28,.55);max-width:240px;opacity:0;translate:0 -100%;
  transform:translateY(8px) scale(.9);transform-origin:0 100%;transition:opacity .25s,transform .45s var(--spring)}
.bubble.on{opacity:1;transform:none}
.bubble em{font-style:normal;font-family:var(--hand);font-size:13px;display:block;margin-top:8px;color:var(--moss)}
.note-float{position:absolute;z-index:8;pointer-events:none;font-size:20px;color:#fff;text-shadow:0 2px 8px rgba(2,21,28,.4);animation:floatUp 1.8s var(--ease-out) forwards}
@keyframes floatUp{from{transform:translate(0,0) rotate(-10deg);opacity:0}15%{opacity:1}to{transform:translate(var(--dx,20px),-120px) rotate(14deg);opacity:0}}
.magic{position:absolute;inset:0;z-index:7;pointer-events:none;width:100%;height:100%}

/* the opening shot (scroll scrubs the camera back from her face to the hill) */
.f-home .art.bg{transform-origin:0 0;will-change:transform,opacity}
.f-home .art.bg > .plate{transition:none}
.intro-backdrop{position:absolute;inset:-6%;z-index:-1;pointer-events:none;opacity:0}
.intro-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(42px) saturate(1.05);transform:scale(1.1)}
.close-plate{position:absolute;z-index:2;pointer-events:none;will-change:transform,opacity;opacity:0;visibility:hidden}
.close-plate .inner{position:absolute;inset:0}
.close-plate .ghost{opacity:0;mix-blend-mode:screen}   /* the glow image is pre-blurred and brightened (a/closeup-glow.webp) */
/* keep the zooming, blurring and glowing layers on their own compositor layers from the start, so the first frames of the move don't hitch */
.close-plate .ghost{will-change:transform,opacity}
/* pre-blurred copies of both plates fade in over the move instead of a live CSS blur (a live blur over the
   drifting clouds had to be redone on every frame, which is what made the zoom judder) */
.softl{opacity:0;will-change:opacity;pointer-events:none}
.site:not([data-intro]) #wideSoft{display:none}
.site[data-intro] .f-home{perspective:1600px;perspective-origin:72% 46%}
.intro-grain{display:none;position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
/* while the camera is moving the ambient loops hold still */
.site[data-intro] .f-home:not(.alive) .cloudtrack,.site[data-intro] .f-home:not(.alive) .catpart,.site[data-intro] .f-home:not(.alive) .star{animation-play-state:paused}
.close-plate img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.intro-vig{position:absolute;inset:-2%;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(120% 95% at 72% 46%,rgba(255,250,236,1) 0%,rgba(255,250,236,.55) 45%,rgba(255,250,236,0) 100%);mix-blend-mode:screen}
.intro-cue{opacity:0;transition:opacity .5s var(--ease-out)}
.site[data-intro] .intro-cue{opacity:var(--cue,1)}
.site[data-intro] .f-home .spots,.site[data-intro] .f-home .ui:not(.intro-cue),.site[data-intro] .selhint{pointer-events:none}
.site[data-intro] .turnhint{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(24px)}
.site[data-intro] .selhint{opacity:var(--rv,0)}
.f-home .home-ui > *{will-change:transform,opacity}

/* ---------------------------------------------------------- 1 · works */
.f-works{--arw:1921;--arh:1117;--fx:.62;--fy:.5}
.works-title{left:calc(112 * var(--u));top:calc(192 * var(--u));font-size:calc(184 * var(--u));letter-spacing:calc(-12 * var(--u))}
.f-works .art.fx{z-index:5}
.skyband{position:absolute;overflow:hidden;pointer-events:none}
.sb-track{position:absolute;left:0;top:0;height:100%;display:flex;width:max-content;animation:windloop 420s linear infinite;will-change:transform}
.sb-track img{height:100%;width:auto;flex:none;max-width:none}
.sb-track img.flip{transform:scaleX(-1)}
.f-works .art.wfg{z-index:4}
.f-works .art.wfg *{pointer-events:none}
.zoomer{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.see-mobile{display:none;justify-content:center;padding:32px 16px}
.screen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.screen polygon{fill:#FFFEEB;stroke:#FFFEEB;stroke-width:10;stroke-linejoin:round}
.screen .s-lit{opacity:var(--lit,0)}
.screen .s-bloom{opacity:calc(var(--lit,0) * .9)}
.screen-hit{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;
  clip-path:polygon(100% 0%,7.65% 2.13%,0% 92.99%,95.45% 100%)}
.screen-hit .s-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);padding:12px 20px;border-radius:999px;
  font:600 16px/1 var(--sans);color:var(--leaf);background:rgba(255,254,235,.92);opacity:0;transition:opacity .3s,transform .4s var(--spring);white-space:nowrap;
  box-shadow:0 12px 28px -16px rgba(2,21,28,.6)}
.screen-hit:hover .s-label,.screen-hit:focus-visible .s-label{opacity:1;transform:translate(-50%,-50%)}
/* once the laptop starts opening, the label has done its job: it fades and stays gone */
.site[data-dive] .screen-hit .s-label,.site:not([data-mode="world"]) .screen-hit .s-label{opacity:0 !important;transform:translate(-50%,-50%) scale(.9) !important;transition:opacity .18s,transform .3s}
.site[data-dive] .screen-hit{pointer-events:none}
.f-works:has(.screen-hit:hover) .screen,.f-works .screen.peek{--lit:.22}
.cue{left:50%;bottom:72px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;height:48px;padding:0 24px 0 16px;border-radius:999px;
  font:500 16px/1 var(--sans);color:var(--leaf);white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 28px -16px rgba(2,21,28,.5)}
.cue-m{display:none}
.mouse{position:relative;width:20px;height:30px;border-radius:12px;border:1.6px solid currentColor}
.mouse i{position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wheel 1.6s var(--ease-io) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}
.cue .dot{width:16px;height:16px;border-radius:999px;background:#9CD16D;box-shadow:0 0 0 0 rgba(156,209,109,.7);animation:statusping 2.2s infinite}

/* ---------------------------------------------------------- 2 · about */
.f-about{--arw:1921;--arh:1117;--fx:.6;--fy:.55}
.about-title{left:calc(112 * var(--u));top:calc(192 * var(--u));font-size:calc(184 * var(--u));letter-spacing:calc(-12 * var(--u));text-shadow:0 4px 40px rgba(20,40,8,.18)}
.f-about .art.fg{z-index:4}
/* the matcha sits still on the grass, grounded by its own shadow: a dark
   contact line under the base and the cup's silhouette cast along the
   ground away from the sun, sharp at the foot and softening with distance */
.cup{transform:none}
.cup-shadow{pointer-events:none;mix-blend-mode:multiply;opacity:.5}
.cup-grass{pointer-events:none}
.page-ink{position:absolute;left:0;top:0;width:720px;height:920px;transform-origin:0 0;pointer-events:none !important}
.page-ink.l{mix-blend-mode:multiply;color:#2E4A12}
.page-ink.l.stk{mix-blend-mode:normal}
/* "Who is Rofaida ?" — Doha's page (Oct 24): ruled lines, a margin rule, cats in the corners */
.page-ink.l:not(.stk){background:
  linear-gradient(90deg,transparent 78px,rgba(170,160,140,.55) 78px 80px,transparent 80px) 0 40px/100% 760px no-repeat,
  repeating-linear-gradient(to bottom,transparent 0 56px,rgba(170,165,145,.5) 56px 58px) 0 98px/100% 638px no-repeat}
.ink-t.who{position:absolute;left:100px;top:96px;margin:0;font:400 62px/1 var(--sans);letter-spacing:-.01em}
.ink-p.who{position:absolute;left:100px;right:56px;top:172px;margin:0;font:400 27px/58px var(--note);letter-spacing:.01em;background:none}
.ink-why{position:absolute;left:400px;top:636px;margin:0;font:400 24px/46px var(--hand);transform:rotate(-6deg);transform-origin:0 0}
.ink-cat{position:absolute;display:block;height:auto;filter:drop-shadow(0 3px 4px rgba(30,40,10,.25));transition:transform .6s var(--spring)}
.c-white{left:548px;top:22px;width:150px;transform:rotate(7deg)}
.c-cream{left:18px;top:640px;width:170px;transform:rotate(-5deg)}
.c-black{left:120px;top:724px;width:150px;transform:rotate(-12deg)}
.c-orange{left:540px;top:710px;width:150px;transform:rotate(4deg)}
.art.fg:has(.page-hit.l:hover) .c-white{transform:rotate(12deg) translateY(-8px)}
.art.fg:has(.page-hit.l:hover) .c-orange{transform:rotate(-2deg) translateY(-10px)}
.art.fg:has(.page-hit.l:hover) .c-black{transform:rotate(-6deg) translateY(-8px)}
.ink-t{font:400 104px/0.92 var(--sans);letter-spacing:-.035em;margin:0}
.ink-p{margin:40px 0 0;font:400 34px/64px var(--note);letter-spacing:.01em;
  background:repeating-linear-gradient(to bottom,transparent 0 62px,rgba(202,195,174,.9) 62px 64px)}
.ink-cta{position:absolute;left:72px;bottom:96px;font:400 30px/1 var(--hand);color:#29480E;opacity:.85}
.page-ink.r .ink-cta{left:auto;right:64px;bottom:72px}
.pola{position:absolute;margin:0;background:#fff;padding:14px 14px 56px;box-shadow:0 2px 2px rgba(0,0,0,.08),0 14px 30px -12px rgba(20,30,10,.45);
  transform:rotate(var(--r,0deg));transition:transform .6s var(--spring),box-shadow .4s}
.pola img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#E9E6D5}
.pola figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:400 22px/1 var(--hand);color:#475E32;white-space:nowrap}
.page-ink.r .pola{width:300px}
.page-ink.r .p1{left:60px;top:70px;--r:-6deg}
.page-ink.r .p2{left:350px;top:150px;--r:5deg}
.page-ink.r .p3{left:150px;top:420px;--r:-2deg}
.art.fg:has(.page-hit.r:hover) .page-ink.r .p1{transform:rotate(-9deg) translate(-8px,-14px)}
.art.fg:has(.page-hit.r:hover) .page-ink.r .p2{transform:rotate(8deg) translate(10px,-18px)}
.art.fg:has(.page-hit.r:hover) .page-ink.r .p3{transform:rotate(-4deg) translate(0,-16px)}
.art.fg:has(.page-hit.l:hover) .page-ink.l .ink-cta{opacity:1}
.pages{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pg{fill:#fff;opacity:0;transition:opacity .35s var(--ease-out);stroke:#fff;stroke-width:6;stroke-linejoin:round}
.pg.on{opacity:.22;filter:drop-shadow(0 0 12px rgba(255,255,255,.9))}
.pg.shim{animation:shim 1.4s var(--ease-io)}
@keyframes shim{0%,100%{opacity:0}40%{opacity:.18}}
.page-hit{position:absolute;border:0;padding:0;background:transparent;cursor:pointer}
.page-hit b{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.94);padding:12px 20px;border-radius:999px;font:600 16px/1 var(--sans);
  color:var(--leaf);background:rgba(255,254,235,.94);white-space:nowrap;opacity:0;transition:opacity .25s,transform .4s var(--spring);box-shadow:0 12px 28px -16px rgba(2,21,28,.6)}
.page-hit:hover b,.page-hit:focus-visible b{opacity:1;transform:translate(-50%,-50%)}
.page-hit:focus-visible{outline:none}
.site[data-sheet] .f-about{filter:blur(12px) brightness(.92) saturate(1.05)}

/* -------------------------------------------------------- room switcher */
.turnhint{position:fixed;z-index:85;left:50%;bottom:32px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;margin:0;
  font:600 14px/1 var(--sans);color:var(--cream);text-shadow:0 1px 2px rgba(2,21,28,.7),0 1px 12px rgba(2,21,28,.6);pointer-events:none;white-space:nowrap;transition:opacity .6s}
.turnhint svg{width:20px;height:20px;animation:turnspin 3.2s var(--ease-io) infinite}
@keyframes turnspin{0%,60%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.site[data-turned] .turnhint{opacity:0}
.site[data-sheet] .turnhint,.site[data-dive] .turnhint,.site:not([data-mode="world"]) .turnhint{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(24px)}


/* =========================================================== layers */
.layer{position:fixed;inset:0;z-index:60;opacity:0;visibility:hidden;transition:opacity .5s var(--ease-io),visibility 0s .5s}
.layer.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease-io),visibility 0s}

/* ------------------------------------------------ works (inside the laptop) */
.works-page{background:var(--cream);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:auto}
.wp-bar{position:fixed;z-index:70;top:calc(32 * var(--u));left:calc(48 * var(--u))}
.wp-bar .glass-btn{background:rgba(255,254,235,.8);border-color:rgba(41,72,14,.16)}
.stack{position:relative}
.folder{position:sticky;top:0;height:var(--vh);padding-top:calc(112 * var(--u));pointer-events:none}
.folder.see{margin-bottom:calc(var(--vh) * -1);z-index:0}
.folder.f1{z-index:1}.folder.f2{z-index:2}.folder.f3{z-index:3}
.tabrow{position:relative;height:calc(81.68 * var(--u))}
.tab{position:absolute;bottom:-1px;left:calc(var(--x) * var(--u));width:calc(516.21 * var(--u));height:calc(82.68 * var(--u));display:flex;align-items:center;gap:8px;
  padding:0 calc(72 * var(--u)) calc(4 * var(--u)) calc(69 * var(--u));color:var(--ink,var(--cream));background:var(--c,var(--maroon));text-decoration:none;font:400 calc(24 * var(--u))/1 var(--sans);
  pointer-events:auto;cursor:pointer;border:0;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516.2 82.7' preserveAspectRatio='none'><path d='M0 82.7 L28.6 18.6 C33.9 6.7 42.2 0 56.4 0 L445.8 0 C458.4 0 465.6 5.1 471.6 14.8 L516.2 82.7 Z'/></svg>") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516.2 82.7' preserveAspectRatio='none'><path d='M0 82.7 L28.6 18.6 C33.9 6.7 42.2 0 56.4 0 L445.8 0 C458.4 0 465.6 5.1 471.6 14.8 L516.2 82.7 Z'/></svg>") 0 0/100% 100% no-repeat;
  transition:filter .3s,transform .4s var(--spring)}
.tab:hover{filter:brightness(1.06)}
.tab span{transition:transform .4s var(--spring)}
.tab:hover span{transform:translateX(calc(6 * var(--u)))}
.tab svg{width:calc(24 * var(--u));height:calc(24 * var(--u));transition:transform .4s var(--spring)}
.tab:hover svg{transform:translate(calc(3 * var(--u)),calc(-3 * var(--u)))}
.see .tab{--c:var(--maroon);--ink:var(--cream);width:calc(491.51 * var(--u));padding-left:calc(62.8 * var(--u))}
.tab:focus-visible{outline:none;filter:brightness(1.12) drop-shadow(0 0 0 #000)}
.tab:focus-visible span{text-decoration:underline;text-underline-offset:6px}
.fbody{position:absolute;left:0;right:0;top:calc(calc(112 * var(--u)) + calc(81.68 * var(--u)));bottom:0;background:var(--c,var(--maroon));color:var(--ink,var(--cream));pointer-events:auto;
  padding:calc(40 * var(--u)) calc(48 * var(--u)) calc(48 * var(--u));display:flex;flex-direction:column;overflow:hidden}
.folder.see .fbody{pointer-events:none}
.fbody > *{transform:scale(calc(1 - var(--cover,0) * .045));transform-origin:50% 0;filter:brightness(calc(1 - var(--cover,0) * .22));opacity:calc(1 - var(--cover,0) * .35)}
.p-head{display:grid;grid-template-columns:1fr calc(480 * var(--u));grid-template-rows:auto auto;column-gap:calc(48 * var(--u));padding-bottom:calc(32 * var(--u));border-bottom:1px dashed var(--ink2)}
.p-title{grid-column:1;font:400 calc(112 * var(--u))/.9 var(--sans);letter-spacing:-.045em}
.p-lede{grid-column:1;margin-top:calc(16 * var(--u));font:400 calc(32 * var(--u))/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink2)}
.p-meta{grid-column:2;grid-row:1;align-self:start;display:flex;flex-direction:column;gap:calc(8 * var(--u));font:500 calc(18 * var(--u))/1.3 var(--narrow);text-transform:uppercase;letter-spacing:.04em}
.p-meta div{display:flex;gap:calc(16 * var(--u))}
.p-meta dt{width:calc(120 * var(--u));color:var(--ink2)}
.p-tags{grid-column:2;grid-row:2;align-self:end;height:calc(40 * var(--u));border-radius:calc(8 * var(--u));overflow:hidden;background:color-mix(in srgb,var(--ink) 10%,transparent);
  display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.p-tagtrack{display:flex;width:max-content;animation:tags 22s linear infinite;font:500 calc(16 * var(--u))/1 var(--narrow);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.p-tags:hover .p-tagtrack{animation-play-state:paused}
@keyframes tags{to{transform:translateX(-50%)}}
.p-body{flex:1;min-height:0;display:grid;grid-template-columns:calc(400 * var(--u)) 1fr calc(440 * var(--u));gap:calc(32 * var(--u));padding-top:calc(32 * var(--u))}
.p-copy{display:flex;flex-direction:column;justify-content:space-between;gap:calc(24 * var(--u))}
.p-copy p{font:500 calc(20 * var(--u))/1.6 var(--narrow);text-transform:uppercase;letter-spacing:.03em}
/* what the resume says she actually did, as short plain lines under the pitch */
.p-facts{list-style:none;margin:calc(24 * var(--u)) 0 0;padding:calc(20 * var(--u)) 0 0;border-top:1px dashed var(--ink2);display:flex;flex-direction:column;gap:calc(10 * var(--u));font:400 calc(18 * var(--u))/1.4 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.p-facts li{position:relative;padding-left:calc(20 * var(--u))}
.p-facts li::before{content:"";position:absolute;left:0;top:.62em;width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:999px;background:var(--ink2)}
.p-link{align-self:flex-start;display:inline-flex;align-items:center;gap:calc(8 * var(--u));min-height:48px;color:inherit;text-decoration:none;font:600 calc(20 * var(--u))/1 var(--narrow);text-transform:uppercase;letter-spacing:.06em;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--ease-out)}
button.p-link{appearance:none;border:0;background-color:transparent;padding:0;cursor:pointer}
.p-link:hover,.p-link:focus-visible{background-size:100% 1.5px}
.p-link svg{width:calc(24 * var(--u));height:calc(24 * var(--u));transition:transform .4s var(--spring)}
.p-link:hover svg{transform:translate(calc(3 * var(--u)),calc(-3 * var(--u)))}
.p-side{display:grid;grid-template-rows:1fr 1fr;gap:calc(24 * var(--u));min-height:0}
/* placeholder photos: drop the real image into the figure and these disappear */
.pimg{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:calc(8 * var(--u));color:var(--ink2,rgba(41,72,14,.7));
  background:linear-gradient(135deg,color-mix(in srgb,var(--ph) 82%,#fff),var(--ph) 60%,color-mix(in srgb,var(--ph) 85%,#000));
  clip-path:inset(0 0 var(--rev,0%) 0 round calc(8 * var(--u)));transition:clip-path 1s var(--ease-out)}
.pimg::before{content:"";position:absolute;inset:0;opacity:.18;background:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 14px);transition:transform 1.2s var(--ease-out)}
.pimg:hover::before{transform:scale(1.06)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* real project photos: no placeholder stripes; a slow, small zoom on hover (mouse only) */
.pimg.has-img::before{display:none}
.pimg.has-img img{transition:scale 1.2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pimg.has-img:hover img{scale:1.04}}
@media (prefers-reduced-motion:reduce){.pimg.has-img img{transition:none}.pimg.has-img:hover img{scale:1}}
.ph-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font:500 14px/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.08em;text-align:center}
.ph-in svg{width:32px;height:32px;opacity:.85}
.ph-in em{font-style:normal}
.ph-in small{font-size:12px;opacity:.75}
.folder .pimg{cursor:none}
.folder:not(.in) .pimg{--rev:100%}
.folder:not(.in) .p-title,.folder:not(.in) .p-lede{opacity:0;transform:translateY(calc(24 * var(--u)))}
.p-title,.p-lede{transition:opacity .8s var(--ease-out),transform 1s var(--ease-out)}
.folder.in .p-lede{transition-delay:.08s}
.folder.in .p-side .pimg:nth-child(1){transition-delay:.12s}.folder.in .p-side .pimg:nth-child(2){transition-delay:.22s}
.stack-hold{height:calc(var(--vh) * .6)}
.site:not([data-mode="works"]) .viewcur{visibility:hidden}
.viewcur{position:fixed;z-index:95;left:0;top:0;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:999px;display:grid;place-items:center;pointer-events:none;
  font:600 14px/1 var(--sans);color:var(--leaf);background:rgba(255,254,235,.55);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px) saturate(1.6);-webkit-backdrop-filter:blur(10px) saturate(1.6);box-shadow:inset 0 1px 0 #fff,0 12px 28px -14px rgba(2,21,28,.5);
  transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(var(--cs,0));transition:transform .35s var(--spring)}

/* keyring on the sky (Figma 332:4851) */
.peek{position:relative;overflow:hidden;background:linear-gradient(to bottom,#2E86C8,#4C9BD4 55%,#6BAEE2)}
.frame{position:relative;width:calc(1920 * var(--u));margin:0 auto}
.peek .frame{height:calc(1627 * var(--u))}
.peek-sky{position:absolute;left:0;right:0;top:calc(-121 * var(--u));bottom:0;opacity:.69;pointer-events:none}
.sheet{position:absolute;left:50%;transform:translateX(calc(-50% + calc(.33 * var(--u))));top:calc(252.86 * var(--u));width:calc(1728 * var(--u));height:calc(1100 * var(--u));background:var(--cream);border-radius:calc(28 * var(--u));box-shadow:0 calc(34 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(8,38,61,.25)}
.sheet .clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.peek-title{position:absolute;left:0;right:0;top:calc(57.34 * var(--u));margin:0;text-align:center;font-weight:800;font-size:calc(120 * var(--u));line-height:.94;letter-spacing:calc(-3 * var(--u));color:var(--leaf);z-index:1}
.peek-grid{position:absolute;left:calc(497.35 * var(--u));top:calc(300 * var(--u));width:calc(733.3 * var(--u));height:calc(768.89 * var(--u));opacity:.4;pointer-events:none}
.peek-note{position:absolute;margin:0;width:calc(300 * var(--u));font-size:calc(22 * var(--u));line-height:1.3;color:var(--moss);z-index:1}
.peek-note.l{left:calc(80 * var(--u));top:calc(560 * var(--u))}.peek-note.r{left:calc(1348 * var(--u));top:calc(820 * var(--u))}
.tape{position:absolute;width:calc(150 * var(--u));height:calc(40 * var(--u));z-index:3;pointer-events:none;transition:transform .6s var(--spring)}
.tape.l{left:calc(241.68 * var(--u));top:calc(232.87 * var(--u));background:rgba(243,173,155,.86);transform:rotate(-6deg)}
.tape.r{left:calc(1557 * var(--u));top:calc(241.86 * var(--u));background:rgba(180,211,53,.85);transform:rotate(7deg)}
.peek:hover .tape.l{transform:rotate(-8deg) translateY(-2px)}.peek:hover .tape.r{transform:rotate(9deg) translateY(-2px)}
.peek .kc-hero{position:absolute;inset:0;height:auto;min-height:0;padding:0;display:block;overflow:visible;z-index:2}
.peek .kc-stage{position:absolute;left:calc(548.05 * var(--u));top:calc(188.42 * var(--u));width:calc(699.25 * var(--u));height:calc(875.58 * var(--u))}
.kc-foot{position:absolute;left:0;right:0;bottom:calc(26 * var(--u));display:flex;justify-content:center;z-index:4;pointer-events:none}
.kc-foot span{font-family:var(--hand);font-size:calc(18 * var(--u));color:var(--moss);transform:rotate(-2deg)}
.wp-foot{display:flex;flex-direction:column;align-items:center;gap:24px;padding:calc(96 * var(--u)) 24px calc(128 * var(--u));background:#E2EEDF;text-align:center}
.wp-foot p{font:400 calc(64 * var(--u))/1 var(--sans);letter-spacing:-.03em;color:var(--leaf)}
.wp-foot-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

.sky-drift{overflow:hidden}
.sky-drift .skytrack{position:absolute;left:0;top:0;height:100%;display:flex;width:max-content;animation:windloop 220s linear infinite;will-change:transform}
.sky-drift .skytrack img{height:100% !important;width:auto !important;max-width:none;flex:none;object-fit:fill !important}
.sky-drift .skytrack img.flip{transform:scaleX(-1)}

/* ------------------------------------------------------ all works (See all) */
/* ------------------------------------------------ all works: a maroon folder
   The "See all projects" tab pulls forward into a whole folder. Inside it, the
   reference list: a big title, ALL / PRODUCT / GRAPHIC / PLAYGROUND, numbered
   rows, and one row open at a time with its line and a strip of previews. */
.all-works{z-index:75;background:var(--cream);color:var(--cream);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;clip-path:inset(var(--ct,0) var(--cr,0) var(--cb,0) var(--cl,0) round var(--crad,0px))}
.aw-in{min-height:100%;display:flex;flex-direction:column;padding-top:calc(112 * var(--u))}
.aw-tabrow{position:relative;flex:none;height:calc(81.68 * var(--u))}
.aw-tab{position:absolute;left:0;bottom:-1px;width:calc(491.51 * var(--u));height:calc(82.68 * var(--u));display:flex;align-items:center;padding:0 calc(72 * var(--u)) calc(4 * var(--u)) calc(62.8 * var(--u));
  background:var(--maroon);color:var(--cream);font:400 calc(24 * var(--u))/1 var(--sans);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516.2 82.7' preserveAspectRatio='none'><path d='M0 82.7 L28.6 18.6 C33.9 6.7 42.2 0 56.4 0 L445.8 0 C458.4 0 465.6 5.1 471.6 14.8 L516.2 82.7 Z'/></svg>") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516.2 82.7' preserveAspectRatio='none'><path d='M0 82.7 L28.6 18.6 C33.9 6.7 42.2 0 56.4 0 L445.8 0 C458.4 0 465.6 5.1 471.6 14.8 L516.2 82.7 Z'/></svg>") 0 0/100% 100% no-repeat}
.aw-tabrow .glass-btn.close{position:absolute;right:calc(48 * var(--u));top:50%;transform:translateY(-50%);color:var(--leaf);background:rgba(255,254,235,.8);border-color:rgba(41,72,14,.16)}
.aw-body{flex:1;background:var(--maroon);padding:calc(64 * var(--u)) calc(82 * var(--u)) calc(120 * var(--u))}
.aw-title{margin:0;font:500 calc(132 * var(--u))/1 var(--sans);letter-spacing:-.045em}
.aw-filter{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 calc(8 * var(--u));margin-top:calc(40 * var(--u));padding-bottom:calc(44 * var(--u));border-bottom:1px solid rgba(255,254,235,.3);
  font:400 calc(32 * var(--u))/1.2 var(--sans);letter-spacing:-.01em;color:rgba(255,254,235,.42)}
.aw-filter button{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;transition:color .25s}
.aw-filter button:hover{color:rgba(255,254,235,.8)}
.aw-filter button[aria-pressed="true"]{color:var(--cream)}
.aw-filter button:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:4px}
.aw-list{list-style:none;margin:0;padding:0}
.aw-row{border-bottom:1px solid rgba(255,254,235,.3)}
.aw-row[hidden]{display:none}
.aw-line{display:grid;grid-template-columns:calc(92 * var(--u)) minmax(0,auto) minmax(0,1fr) auto;align-items:center;padding:calc(52 * var(--u)) 0}
.aw-n{font:400 calc(32 * var(--u))/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.aw-name{margin:0;max-width:calc(760 * var(--u));font:400 calc(72 * var(--u))/1.02 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.aw-toggle{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.aw-toggle:focus-visible{outline:2px solid var(--cream);outline-offset:6px;border-radius:6px}
.aw-desc{margin:0 calc(48 * var(--u)) 0 calc(92 * var(--u));max-width:calc(700 * var(--u));font:400 calc(22 * var(--u))/calc(46 * var(--u)) var(--sans);letter-spacing:-.02em;opacity:0;visibility:hidden;transform:translateY(calc(8 * var(--u)));
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out),visibility 0s .45s}
.aw-row.open .aw-desc{opacity:1;visibility:inherit;transform:none;transition:opacity .5s var(--ease-out) .1s,transform .7s var(--ease-out) .1s,visibility 0s}
.aw-btn{justify-self:end;display:inline-flex;align-items:center;gap:calc(14 * var(--u));height:calc(76 * var(--u));padding:0 calc(36 * var(--u));border:1.5px solid var(--cream);border-radius:calc(10 * var(--u));
  color:var(--cream);font:500 calc(20 * var(--u))/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
button.aw-btn{appearance:none;background:transparent;cursor:pointer}
.aw-btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u));transition:transform .4s var(--spring)}
.aw-row.open .aw-btn,.aw-btn:hover,.aw-btn:focus-visible{background:var(--cream);color:var(--maroon)}
.aw-btn:hover svg{transform:translate(calc(3 * var(--u)),calc(-3 * var(--u)))}
.aw-btn:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.aw-more{display:grid;grid-template-rows:0fr;margin-right:calc(calc(-82 * var(--u)));transition:grid-template-rows .65s var(--ease-out)}
.aw-row.open .aw-more{grid-template-rows:1fr}
.aw-more-in{min-height:0;overflow:hidden}
.aw-strip{display:flex;gap:calc(19 * var(--u));padding:calc(4 * var(--u)) calc(82 * var(--u)) calc(60 * var(--u)) 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.aw-strip::-webkit-scrollbar{display:none}
.aw-shot{flex:0 0 calc(507 * var(--u));aspect-ratio:507/255;margin:0;scroll-snap-align:start;color:rgba(255,254,235,.85);opacity:0;transform:translateX(calc(40 * var(--u)));
  transition:opacity .4s var(--ease-out),transform .7s var(--ease-out)}
.aw-row.open .aw-shot{opacity:1;transform:none}
.aw-row.open .aw-shot:nth-child(2){transition-delay:.06s}.aw-row.open .aw-shot:nth-child(3){transition-delay:.12s}.aw-row.open .aw-shot:nth-child(4){transition-delay:.18s}
.aw-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;justify-self:stretch;padding:calc(24 * var(--u));color:rgba(255,254,235,.96)}
.aw-cover b{font:400 calc(34 * var(--u))/1.05 var(--sans);letter-spacing:-.02em;max-width:12ch;text-wrap:balance;text-shadow:0 1px 14px rgba(2,21,28,.18)}
.aw-cover small{font:500 13px/1 var(--narrow);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.aw-empty{padding:48px 0;font-size:24px}
.aw-empty span{display:block;margin-top:8px;font-family:var(--hand);font-size:16px;opacity:.8}

/* --------------------------------------------------------- notebook sheets */
.sheets{position:fixed;inset:0;z-index:72;visibility:hidden;pointer-events:none}
.sheets.open{visibility:visible;pointer-events:auto}
.sheet-scrim{position:absolute;inset:0;background:rgba(10,30,6,.18);opacity:0;transition:opacity .5s var(--ease-io)}
.sheets.open .sheet-scrim{opacity:1}
.nb-sheet{position:absolute;left:0;top:0;width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s));transform-origin:0 0;visibility:hidden;
  outline:none;perspective:2600px}
.side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 2px 2px rgba(30,40,10,.18)) drop-shadow(0 24px 30px rgba(10,30,6,.32))}
.paper{position:absolute;inset:0;background:#FFFEEB url(../a/paper.webp) center/cover;clip-path:var(--deckle,none)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:70;
  background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.35),transparent 55%),
    radial-gradient(140% 120% at 50% 50%,transparent 62%,rgba(120,100,50,.16) 100%),
    linear-gradient(115deg,transparent 70%,rgba(140,120,70,.08) 85%,transparent 95%)}
/* the about page is a real leaf: it hinges on its left edge, follows the
   hand (or a click, or the arrow keys) and swings over to show the work
   journey lying underneath. --turn runs 0 (flat) to 1 (turned over). */
.nb-pages{position:absolute;inset:0;perspective:calc(3600 * var(--s));perspective-origin:0 50%;user-select:none;-webkit-user-select:none}
.nb-pages > .side.back{z-index:1}
.under-shade{position:absolute;left:0;top:calc(8 * var(--s));bottom:calc(8 * var(--s));width:28%;z-index:2;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(30,40,10,.34),rgba(30,40,10,.12) 40%,rgba(30,40,10,0))}
.leaf{position:absolute;inset:0;z-index:3;transform-style:preserve-3d;transform-origin:0 50%;will-change:transform;cursor:grab;touch-action:pan-y}
.leaf.grabbing{cursor:grabbing}
.nb-sheet:not(.turning) .leaf{transition:transform .5s var(--spring)}
.nb-sheet:not(.turning):not(.flipped) .leaf.peek{transform:rotateY(-9deg)}
.nb-sheet.flipped .leaf{pointer-events:none}
.nb-sheet.flipped.settled .leaf{visibility:hidden}
.leaf > .side.front{z-index:1}
.leaf-rev{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 2px 2px rgba(30,40,10,.18)) drop-shadow(0 24px 30px rgba(10,30,6,.32))}
.leaf-rev .paper{transform:scaleX(-1)}
.leaf-rev .paper::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(60,50,20,.10),rgba(60,50,20,.02) 30%,rgba(255,255,255,.12) 70%,rgba(60,50,20,.08))}
.leaf-shade{position:absolute;inset:calc(6 * var(--s));z-index:66;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:0;will-change:opacity;
  background:linear-gradient(90deg,rgba(255,255,240,.3) 0,rgba(40,40,10,.12) 35%,rgba(30,30,8,.42) 100%)}
.nb-sheet.turning .side{filter:drop-shadow(0 2px 2px rgba(30,40,10,.18)) drop-shadow(0 40px 40px rgba(10,30,6,.38))}
.turn{position:absolute;right:0;bottom:0;z-index:65;width:calc(220 * var(--s));height:calc(150 * var(--s));border:0;padding:0;background:none;cursor:pointer;color:var(--leaf)}
.turn .curl{position:absolute;right:0;bottom:0;width:calc(72 * var(--s));height:calc(72 * var(--s));transition:width .45s var(--spring),height .45s var(--spring);
  background:linear-gradient(315deg,rgba(0,0,0,0) 0 49%,#E8E3C2 50%,#F7F3D9 62%,#FFFEEB 100%);
  box-shadow:-6px -6px 12px -6px rgba(60,50,20,.35);border-top-left-radius:6px}
.turn:hover .curl,.turn:focus-visible .curl{width:calc(104 * var(--s));height:calc(104 * var(--s))}
.turn-l{position:absolute;right:calc(88 * var(--s));bottom:calc(28 * var(--s));font:400 calc(18 * var(--s))/1 var(--hand);white-space:nowrap;transition:transform .45s var(--spring)}
.turn:hover .turn-l{transform:translateX(calc(-14 * var(--s)))}
.turn:focus-visible{outline:none}.turn:focus-visible .turn-l{text-decoration:underline;text-underline-offset:6px}
.jr-title{white-space:nowrap}
.jr-note{position:absolute;left:calc(398 * var(--s));top:calc(118 * var(--s));font:400 calc(17 * var(--s))/1 var(--hand);color:var(--moss);transform:rotate(-3deg)}
.jr-list{position:absolute;left:calc(250 * var(--s));top:calc(200 * var(--s));width:calc(440 * var(--s));margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(20 * var(--s))}
.jr-list::before{content:"";position:absolute;left:calc(-31 * var(--s));top:calc(14 * var(--s));bottom:calc(30 * var(--s));width:2px;background:repeating-linear-gradient(to bottom,var(--leaf) 0 6px,transparent 6px 12px);opacity:.55}
.jr-list li{position:relative}
.jr-pick{display:grid;grid-template-columns:calc(140 * var(--s)) 1fr;column-gap:calc(16 * var(--s));row-gap:calc(2 * var(--s));align-items:baseline;width:100%;margin:0;padding:calc(8 * var(--s)) calc(12 * var(--s)) calc(10 * var(--s));border:0;border-radius:calc(10 * var(--s));
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .3s,transform .4s var(--spring)}
.jr-pick:hover{background:rgba(41,72,14,.06);transform:translateX(calc(6 * var(--s)))}
.jr-pick[aria-pressed="true"]{background:rgba(156,209,109,.24)}
.jr-pick:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.jr-dot{position:absolute;left:calc(-39 * var(--s));top:calc(16 * var(--s));transition:transform .4s var(--spring);width:calc(18 * var(--s));height:calc(18 * var(--s));border-radius:999px;background:var(--cream);border:2px solid var(--leaf)}
.jr-list li.picked .jr-dot{transform:scale(1.35)}
.jr-list li.now .jr-dot{background:#9CD16D;border-color:#9CD16D;box-shadow:0 0 0 0 rgba(156,209,109,.6);animation:statusping 2.2s infinite}
.jr-when{font:500 calc(14 * var(--s))/1.3 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.jr-role{font:500 calc(26 * var(--s))/1.1 var(--sans);letter-spacing:-.02em;color:var(--leaf)}
.jr-where{grid-column:2;font:500 calc(16 * var(--s))/1.4 var(--narrow);text-transform:uppercase;letter-spacing:.06em;color:var(--moss)}
.jr-p{grid-column:2;margin:calc(4 * var(--s)) 0 0;font:400 calc(19 * var(--s))/calc(30 * var(--s)) var(--note);color:var(--leaf)}
.jr-pola{left:calc(1150 * var(--s));top:calc(40 * var(--s));width:calc(150 * var(--s));padding:calc(8 * var(--s)) calc(8 * var(--s)) calc(30 * var(--s));--r:8deg;z-index:3}
/* the card: what she did at the stop you picked, on a taped index card */
.jr-detail{position:absolute;box-sizing:border-box;left:calc(712 * var(--s));top:calc(130 * var(--s));width:calc(420 * var(--s));min-height:calc(340 * var(--s));padding:calc(32 * var(--s)) calc(30 * var(--s)) calc(26 * var(--s));z-index:2;color:var(--leaf);
  background:repeating-linear-gradient(to bottom,transparent 0 calc(31 * var(--s)),rgba(120,160,190,.28) calc(31 * var(--s)) calc(32 * var(--s))),#FFFDF2;background-position:0 calc(78 * var(--s));
  box-shadow:0 1px 1px rgba(0,0,0,.06),0 18px 30px -18px rgba(20,30,10,.5);transform:rotate(-1.2deg)}
.jr-detail::before{content:"";position:absolute;left:calc(40 * var(--s));top:calc(-12 * var(--s));width:calc(96 * var(--s));height:calc(26 * var(--s));background:rgba(156,209,109,.7);transform:rotate(-5deg)}
.jr-detail .jd-when{display:block;font:500 calc(14 * var(--s))/1.3 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.jr-detail h3{margin:calc(6 * var(--s)) 0 0;font:500 calc(28 * var(--s))/1.1 var(--sans);letter-spacing:-.02em}
.jr-detail .jd-where{margin:calc(4 * var(--s)) 0 calc(14 * var(--s));font:500 calc(15 * var(--s))/1.3 var(--narrow);text-transform:uppercase;letter-spacing:.06em;color:var(--moss)}
.jr-detail ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(10 * var(--s))}
.jr-detail li{position:relative;padding-left:calc(22 * var(--s));font:400 calc(17 * var(--s))/calc(27 * var(--s)) var(--note)}
.jr-detail li::before{content:"";position:absolute;left:0;top:calc(11 * var(--s));width:calc(10 * var(--s));height:calc(2 * var(--s));background:var(--leaf);opacity:.6}
.jr-detail.swap{animation:jdin .55s cubic-bezier(.16,1,.3,1)}
@keyframes jdin{from{opacity:0;transform:rotate(-1.2deg) translateY(calc(14 * var(--s)))}to{opacity:1;transform:rotate(-1.2deg)}}
.jr-pola figcaption{font-size:calc(16 * var(--s));bottom:calc(10 * var(--s))}
.jr-pola .tape{position:absolute;left:50%;top:calc(-14 * var(--s));width:calc(90 * var(--s));height:calc(26 * var(--s));margin-left:calc(-45 * var(--s));background:rgba(243,173,155,.86);transform:rotate(-4deg);z-index:2}
.turn.back .turn-l{right:calc(88 * var(--s))}
/* polaroids on the pixels page */
.ph{background:#fff;padding:calc(7 * var(--s)) calc(7 * var(--s)) calc(26 * var(--s));box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 22px -10px rgba(20,30,10,.45);transform:rotate(var(--r,0deg))}
.ph img{object-fit:cover;background:#ECE9D8}
.nb-sheet.intro{--w:1383.48;--h:687.06}
.nb-sheet.pixels{--w:1328.03;--h:828.06}
.nb-sheet{--s:min(var(--u), calc(92vw / var(--w)), calc((var(--vh) - 160px) / var(--h)))}
.nb-sheet.live{visibility:visible}
.nb-in{position:absolute;inset:0;overflow:hidden}
.nb-sheet .close{position:absolute;right:16px;top:16px;z-index:80;opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s var(--spring)}
.nb-sheet.landed .close{opacity:1;transform:none}
.nb-sheet .nb-in > *{transition:opacity .5s var(--ease-out)}
.nb-sheet:not(.landed) .nb-in > :not(.ab-lines){opacity:0}
.ab-lines{position:absolute;inset:0;width:100%;height:100%}
.ab-title{position:absolute;left:calc(58.3 * var(--s));top:calc(42.8 * var(--s));font:400 calc(86 * var(--s))/calc(79.08 * var(--s)) var(--sans);letter-spacing:calc(-2.88 * var(--s));color:var(--leaf);white-space:nowrap}
.ab-copy{position:absolute;left:calc(255.4 * var(--s));top:calc(234.1 * var(--s));width:calc(887.6 * var(--s));font:400 calc(23.05 * var(--s))/calc(54.66 * var(--s)) var(--note);letter-spacing:calc(.72 * var(--s));color:var(--leaf);text-shadow:0 0 calc(17 * var(--s)) rgba(41,72,14,.08)}
.ab-why{position:absolute;left:calc(1079.8 * var(--s));top:calc(414.6 * var(--s));width:calc(150 * var(--s));font:400 calc(17.3 * var(--s))/1.6 var(--hand);color:var(--leaf);transform:rotate(2.5deg);white-space:nowrap}
.ab-why .q{display:inline-block;transform-origin:50% 80%}
.sticker{position:absolute;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;transition:transform .5s var(--spring),filter .3s;filter:drop-shadow(0 calc(6 * var(--s)) calc(10 * var(--s)) rgba(23,40,8,.12))}
.sticker:hover{filter:drop-shadow(0 calc(16 * var(--s)) calc(18 * var(--s)) rgba(23,40,8,.22))}
.sticker.grab{cursor:grabbing;transition:none;filter:drop-shadow(0 calc(22 * var(--s)) calc(22 * var(--s)) rgba(23,40,8,.28));z-index:20}
.sticker.orange{cursor:pointer}
.sticker.wig{animation:wig .7s var(--spring)}
.sticker:focus-visible{outline:2px dashed var(--leaf);outline-offset:4px;border-radius:12px;box-shadow:none}
@keyframes wig{0%{rotate:0deg}30%{rotate:-7deg}60%{rotate:5deg}100%{rotate:0deg}}
.px-title{position:absolute;inset:0;pointer-events:none;font:400 calc(82.53 * var(--s))/calc(75.9 * var(--s)) var(--sans);letter-spacing:calc(-2.76 * var(--s));color:var(--leaf)}
.px-title span{position:absolute;text-align:center;white-space:nowrap}
.px-title .a{left:calc(468.4 * var(--s));top:calc(302.3 * var(--s));width:calc(391 * var(--s))}
.px-title .b{left:calc(560.4 * var(--s));top:calc(409.6 * var(--s));width:calc(207 * var(--s))}
.ph{position:absolute;margin:0;cursor:grab;touch-action:none;user-select:none;will-change:transform;transition:filter .3s}
.ph img{width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.ph:hover{z-index:30;filter:drop-shadow(0 calc(18 * var(--s)) calc(20 * var(--s)) rgba(23,40,8,.25))}
.ph.grab{cursor:grabbing;z-index:40;filter:drop-shadow(0 calc(28 * var(--s)) calc(26 * var(--s)) rgba(23,40,8,.32))}
.ph:focus-visible{outline:2px solid #9747FF;outline-offset:3px;box-shadow:none}
.sel{position:absolute;z-index:50;pointer-events:none;border:2px solid var(--lilac);transition:left .45s var(--ease-out),top .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out)}
.sel.snap{transition:none}
.sel i{position:absolute;width:calc(7.5 * var(--s));height:calc(7.5 * var(--s));min-width:6px;min-height:6px;background:#fff;border:1px solid #000;transform:translate(-50%,-50%)}
.sel i:nth-child(1){left:0;top:0}.sel i:nth-child(2){left:50%;top:0}.sel i:nth-child(3){left:100%;top:0}
.sel i:nth-child(4){left:0;top:50%}.sel i:nth-child(5){left:100%;top:50%}
.sel i:nth-child(6){left:0;top:100%}.sel i:nth-child(7){left:50%;top:100%}.sel i:nth-child(8){left:100%;top:100%}
.sel b{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);background:#9747FF;color:#fff;font:500 12px/1 var(--sans);padding:4px 8px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity .25s}
.sel.photo b{opacity:1}
.px-hint{position:absolute;left:50%;bottom:calc(24 * var(--s));transform:translateX(-50%);font:400 calc(16 * var(--s))/1 var(--hand);color:var(--moss);white-space:nowrap;opacity:.85}

/* ------------------------------------------------------------ photo viewer */
.lightbox{position:fixed;inset:0;z-index:78;display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lb-scrim{position:absolute;inset:0;background:rgba(14,24,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
.lb-pola{position:relative;margin:0;background:#fff;padding:16px 16px 72px;box-shadow:0 2px 3px rgba(0,0,0,.12),0 40px 60px -24px rgba(0,0,0,.55);transform:rotate(-1.5deg)}
.lb-photo{display:block;width:min(64vh,72vw);height:min(64vh,72vw);background:#ECE9D8;overflow:hidden}
.lb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lb-pola figcaption{position:absolute;left:16px;right:16px;bottom:20px;text-align:center;font:400 20px/1.3 var(--hand);color:#29480E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-nav{display:flex;align-items:center;gap:16px}
.lb-btn{width:48px;padding:0;color:var(--cream);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.lb-count{min-width:64px;text-align:center;font:500 15px/1 var(--narrow);letter-spacing:.08em;color:var(--cream)}
.lb-close{position:absolute;right:24px;top:24px;color:var(--cream);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}

/* ------------------------------------------------------------ let's talk */
.contact-page{z-index:85;overflow-y:auto;overscroll-behavior:contain;background:#A9DBFF}
.c-close{position:fixed;z-index:80;left:calc(48 * var(--u));top:calc(32 * var(--u));color:var(--cream)}
.talk{position:relative;overflow:hidden;background:#A9DBFF}
.talk .frame{height:calc(1270 * var(--u))}
.talk-sky{position:absolute;left:calc(-9.33 * var(--u));top:calc(-415.57 * var(--u));width:calc(1939.08 * var(--u));height:calc(1776.26 * var(--u));opacity:.8;pointer-events:none}
.talk-hill{position:absolute;left:calc(-9.33 * var(--u));top:calc(512 * var(--u));width:calc(1929.33 * var(--u));height:calc(1820.8 * var(--u));pointer-events:none}
.talk-sky img,.talk-hill img{width:100%;height:100%}
.glass{position:absolute;left:50%;top:calc(231.91 * var(--u));width:calc(1221.84 * var(--u));height:calc(823.17 * var(--u));transform:translateX(calc(-50% + calc(.33 * var(--u))));border-radius:calc(76 * var(--u));overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(0,11,32,.2) 0%,rgba(255,255,255,.2) 60.26%),linear-gradient(90deg,rgba(20,38,46,.14),rgba(20,38,46,.14));
  backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:inset calc(11 * var(--u)) calc(11 * var(--u)) calc(23.9 * var(--u)) calc(-9 * var(--u)) rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.18)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(calc(520 * var(--u)) calc(380 * var(--u)) at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.22),transparent 65%);transition:opacity .5s}
.glass:hover::before{opacity:1}
.cloud{position:absolute;opacity:.8;pointer-events:none;will-change:transform}
.cloud img{width:100%;height:100%}
.cloud.c1{left:calc(-172.4 * var(--u));top:calc(211.02 * var(--u));width:calc(695.94 * var(--u));height:calc(198.33 * var(--u))}
.cloud.c2{left:calc(354.91 * var(--u));top:calc(-133.61 * var(--u));width:calc(695.94 * var(--u));height:calc(198.33 * var(--u))}
.cloud.c3{left:calc(1274.32 * var(--u));top:calc(144.67 * var(--u));width:calc(695.94 * var(--u));height:calc(174.48 * var(--u))}
.talk-me{position:absolute;left:50%;top:calc(120.62 * var(--u));width:calc(264.68 * var(--u));height:calc(264.68 * var(--u));transform:translateX(calc(-50% + calc(.33 * var(--u))));border-radius:999px;border:0;padding:0;background:none;cursor:pointer;z-index:3;transition:transform .6s var(--spring)}
.talk-me .avface{position:absolute;inset:0;border-radius:999px;overflow:hidden;box-shadow:0 0 0 calc(6 * var(--u)) rgba(255,255,255,.55),0 0 calc(30 * var(--u)) calc(4 * var(--u)) rgba(255,255,255,.35)}
.talk-me img{width:100%;height:100%}
.talk-me .ring{position:absolute;inset:calc(-6 * var(--u));border-radius:999px;border:calc(3 * var(--u)) solid rgba(255,255,255,.85);pointer-events:none;animation:online 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.talk-me .ring.r2{animation-delay:1.3s}
@keyframes online{0%{transform:scale(1);opacity:.85}70%{opacity:0}100%{transform:scale(1.32);opacity:0}}
.talk-me .online{position:absolute;right:calc(22 * var(--u));bottom:calc(22 * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:999px;background:#7FD15A;border:calc(4 * var(--u)) solid #fff;box-shadow:0 0 calc(12 * var(--u)) rgba(127,209,90,.8);animation:dot 2.6s ease-in-out infinite}
@keyframes dot{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
.talk-me:hover{transform:translateX(calc(-50% + calc(.33 * var(--u)))) rotate(-4deg) scale(1.03)}
.talk-h{position:absolute;left:0;width:100%;top:calc(223.35 * var(--u));text-align:center;font-weight:600;font-size:calc(91.684 * var(--u));line-height:calc(96.268 * var(--u));letter-spacing:calc(-1.3753 * var(--u));color:var(--cream);z-index:2}
.talk-p{position:absolute;left:50%;transform:translateX(-50%);top:calc(355.59 * var(--u));width:calc(640 * var(--u));text-align:center;font-size:calc(20 * var(--u));line-height:calc(32 * var(--u));color:#FFFEEB;z-index:2}
.talk-actions{position:absolute;left:0;right:0;top:calc(472 * var(--u));display:flex;justify-content:center;flex-wrap:wrap;gap:calc(16 * var(--u));z-index:2}
.t-btn{display:inline-flex;align-items:center;gap:calc(8 * var(--u));height:calc(64 * var(--u));min-height:44px;padding:0 calc(32 * var(--u));border-radius:999px;text-decoration:none;font:500 calc(20 * var(--u))/1 var(--sans);color:#FFFEEB;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(255,255,255,.25);
  transition:transform .3s var(--spring),background .3s,box-shadow .3s}
.t-btn:hover{transform:translateY(calc(-3 * var(--u)));background:rgba(255,255,255,.24);box-shadow:inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(255,255,255,.3),0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-14 * var(--u)) rgba(2,21,28,.55)}
.t-btn.main{background:#FFFEEB;color:#29480E;border-color:#FFFEEB;font-weight:600}
.t-btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u));transition:transform .4s var(--spring)}
.t-btn:hover svg{transform:translate(calc(3 * var(--u)),calc(-3 * var(--u)))}
.talk-status{position:absolute;left:0;right:0;top:calc(610 * var(--u));text-align:center;font:500 calc(16 * var(--u))/1.4 var(--sans);color:rgba(255,254,235,.88);z-index:2}
.talk-mail{position:absolute;left:0;right:0;top:calc(560 * var(--u));margin:0;text-align:center;font:500 calc(18 * var(--u))/1.4 var(--sans);letter-spacing:.01em;color:rgba(255,254,235,.92);z-index:2}
.talk-mail span{user-select:all;-webkit-user-select:all}
.talk-status i{display:inline-block;width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:999px;background:#9CD16D;margin-right:calc(8 * var(--u));vertical-align:middle;animation:statusping 2.2s infinite}
.talk-foot{position:absolute;left:0;right:0;top:calc(1200 * var(--u));text-align:center;font:500 calc(15 * var(--u))/1.4 var(--sans);color:#FFFEEB;text-shadow:0 1px 10px rgba(10,30,10,.6);z-index:2}

.kc-tip{position:fixed;z-index:120;pointer-events:none;opacity:0;transform:translate(-50%,-240%);background:#1C2E0A;color:#FFFEEB;font-size:13px;font-weight:500;padding:8px 12px;border-radius:8px;white-space:nowrap;transition:opacity .18s ease;box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.kc-tip.kc-on{opacity:1}

/* ---------------------------------------------------------------- night */
.site[data-theme="night"] .f-works .art.bg,.site[data-theme="night"] .f-works .art.wfg,.site[data-theme="night"] .f-about .art{filter:brightness(.5) saturate(.8) hue-rotate(12deg) contrast(1.05)}
.site[data-theme="night"] .f-works,.site[data-theme="night"] .f-about{background:#0C111F}
.site[data-theme="night"] .peek,.site[data-theme="night"] .talk{filter:brightness(.62) saturate(.85) hue-rotate(8deg)}
.site[data-theme="night"] .screen polygon{fill:#FFF6C9;stroke:#FFF6C9}
.site[data-theme="night"] .v-title,.site[data-theme="night"] .v-time{color:var(--cream)}
.site[data-theme="night"] .vibes{background:rgba(255,255,255,.06);box-shadow:inset 0 calc(3.8 * var(--u)) calc(5.56 * var(--u)) calc(1.52 * var(--u)) rgba(245,241,238,.35),inset calc(-1.52 * var(--u)) calc(-7.6 * var(--u)) calc(1.75 * var(--u)) 0 rgba(0,15,24,.35)}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .f-about .art,.f-works .art,.f-home .plate{translate:none !important}
  .cloudtrack,.catpart,.star,.sky-drift .skytrack,.talk-me .ring,.talk-me .online,.talk-status i,.pill i,.spot,.disk,.p-tagtrack,.turnhint svg,.mouse i,.selhint img,.sound .bar{animation:none !important}
  .face,.layer{transition-duration:.01s !important}
}

/* ================================================================ mobile */
@media (max-width:760px){
  :root{--u:calc(100vw / 760)}
  .gnav{top:12px;width:calc(100vw - 32px);transform:translateX(-50%);padding:6px}
  .gnav .me{width:36px;height:36px}
  .gnav .links{gap:14px}.gnav .links a{font-size:14px}
  .gnav .links a[data-go="play"]{display:none}
  .resume{font-size:0;padding:3px;gap:0}.resume b{width:30px;height:30px}.resume b img{width:18px;height:18px}
  .corner{top:72px;right:16px;padding:4px;border-radius:999px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .sound{width:40px;height:40px}.sound svg{width:24px;height:24px}
  .toggle{width:64px;height:40px}.toggle .knob{width:32px;height:32px;top:3px;left:3px}
  .site[data-theme="night"] .toggle .knob{transform:translateX(24px)}
  .f-home{--fx:.86}.f-works{--fx:.72}.f-about{--fx:.62;--fy:.62}
  .home-ui{left:16px;top:128px;width:calc(100vw - 32px);height:auto}
  .pill{position:relative;height:auto;padding:8px 16px;gap:8px;font-size:12px;line-height:16px;white-space:normal;max-width:100%}
  .pill i{width:8px;height:8px}
  .home-title{position:relative;top:auto;margin-top:16px;font-size:clamp(44px,14.5vw,72px);letter-spacing:-.07em;white-space:normal}
  .vibes{position:relative;left:auto;top:auto;margin-top:16px;--u:calc(236px / 351.35)}
  .works-title,.about-title{left:16px;top:128px;font-size:clamp(56px,17vw,96px);letter-spacing:-.08em}
  .selhint{bottom:64px;height:44px;font-size:14px;padding:0 16px}
  .cue-d{display:none}.cue-m{display:inline}
  .cue{bottom:64px;font-size:14px;height:44px;padding:0 16px 0 12px;white-space:normal;max-width:calc(100vw - 32px)}
  .spot b{display:none}
  .turnhint{bottom:24px;font-size:13px}
  .wp-bar{top:72px;left:16px}
  .wp-bar .glass-btn{height:44px;padding:0 16px;font-size:14px}
  .folder,.folder.see{position:relative;height:auto;padding-top:0;margin:0}
  .folder.see{display:none}
  .stack{padding-top:128px}
  .tabrow{height:48px}
  .tab{left:16px !important;width:220px;height:49px;padding:0 40px 4px 32px;font-size:16px}
  .fbody{position:relative;top:auto;padding:24px 16px 32px}
  .fbody > *{transform:none;filter:none;opacity:1}
  .p-head{grid-template-columns:1fr;row-gap:16px}
  .p-title{font-size:56px}.p-lede{font-size:20px;margin-top:8px}
  .p-meta,.p-tags{grid-column:1;grid-row:auto}
  .p-meta{font-size:14px}.p-meta dt{width:96px}
  .p-tags{height:32px}.p-tagtrack{font-size:13px}
  .p-body{grid-template-columns:1fr;gap:16px}
  .p-copy p{font-size:15px}.p-facts{font-size:15px;gap:8px;margin-top:16px;padding-top:14px}.p-facts li{padding-left:16px}.p-facts li::before{width:6px;height:6px}.p-link{font-size:15px}.p-link svg{width:20px;height:20px}
  .pimg.main{aspect-ratio:16/10}
  .p-side{grid-template-rows:none;grid-template-columns:1fr 1fr}.p-side .pimg{aspect-ratio:16/10}
  .see-mobile{display:flex}
  .stack-hold{display:none}
  .peek .frame{height:auto;width:auto;padding:72px 16px 64px}
  .peek-sky{top:0;height:100%}
  .sheet{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;border-radius:20px;padding:36px 16px 24px;display:flex;flex-direction:column}
  .sheet .clip{z-index:0}.peek-title{order:1}.peek .kc-hero{order:2}.peek-note{order:3}.kc-foot{order:4}
  .peek-title{position:relative;top:auto;font-size:44px;letter-spacing:-1px}
  .peek-grid{left:50%;top:120px;width:86%;height:auto;aspect-ratio:733/769;transform:translateX(-50%)}
  .peek .kc-hero{position:relative;inset:auto;height:auto;margin-top:18px}
  .peek .kc-stage{position:relative;left:auto;top:auto;margin:0 auto;width:min(76vw,400px);height:auto;aspect-ratio:699/876}
  .peek-note{position:relative;left:auto !important;top:auto !important;width:auto;font-size:16px;margin:14px 0 0;text-align:center}
  .tape{width:90px;height:26px}.tape.l{left:20px;top:58px}.tape.r{left:auto;right:20px;top:60px}
  .kc-foot{position:relative;bottom:auto;margin-top:12px}.kc-foot span{font-size:13px}
  .wp-foot p{font-size:32px}
  .aw-in{padding-top:72px}
  .aw-tabrow{height:48px}.aw-tab{width:200px;height:49px;padding:0 24px 2px 26px;font-size:15px}
  .aw-tabrow .glass-btn.close{right:16px}
  .aw-body{padding:32px 16px 64px}
  .aw-title{font-size:48px}
  .aw-filter{margin-top:20px;padding-bottom:20px;font-size:17px;gap:0 6px}
  .aw-line{grid-template-columns:44px 1fr;row-gap:12px;padding:24px 0}
  .aw-n{font-size:15px}.aw-name{font-size:30px;max-width:none}
  .aw-desc{grid-column:1/-1;margin:0;max-width:none;font-size:15px;line-height:24px;display:none}
  .aw-row.open .aw-desc{display:block}
  .aw-btn{grid-column:1/-1;justify-self:start;height:44px;padding:0 18px;font-size:15px;border-radius:8px}.aw-btn svg{width:18px;height:18px}
  .aw-more{margin-right:-16px}.aw-strip{gap:10px;padding:0 16px 24px 0}
  .aw-tabrow .glass-btn.close{top:calc(100% + 32px);transform:none;color:var(--cream);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
  .aw-shot{flex-basis:78vw}
  .aw-cover{padding:14px}.aw-cover b{font-size:20px}.aw-cover small{font-size:11px}
  /* sheets become full pages you can scroll */
  .nb-sheet{--s:calc((100vw - 32px) / var(--w))}
  .nb-sheet.m-flow{width:calc(100vw - 32px);height:auto;max-height:calc(var(--vh) - 144px);overflow-y:auto;border-radius:16px}
  .nb-sheet.m-flow .nb-in{position:relative;inset:auto;padding:72px 16px 32px;overflow:visible}
  .nb-sheet.m-flow .ab-lines{display:none}
  .nb-sheet.m-flow .paper.journey{padding:72px 16px 32px}
  .nb-sheet.m-flow .ab-title{position:relative;left:auto;top:auto;font-size:44px;line-height:1;letter-spacing:-1.5px;white-space:normal}
  .nb-sheet.m-flow .ab-copy{position:relative;left:auto;top:auto;width:auto;margin-top:16px;font-size:17px;line-height:32px;letter-spacing:.2px;background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px)}
  .nb-sheet.m-flow .ab-why{position:relative;left:auto;top:auto;width:auto;display:block;margin:24px 0 0 auto;text-align:right;font-size:15px}
  .nb-sheet.m-flow.intro .nb-in{padding-bottom:180px}
  .nb-sheet.m-flow .sticker.cream{left:16px !important;top:auto !important;bottom:24px;width:104px !important;height:112px !important}
  .nb-sheet.m-flow .sticker.black{left:80px !important;top:auto !important;bottom:8px;width:104px !important;height:112px !important}
  .nb-sheet.m-flow .sticker.white{left:auto !important;right:120px;top:auto !important;bottom:56px;width:96px !important;height:84px !important}
  .nb-sheet.m-flow .sticker.orange{left:auto !important;right:16px;top:auto !important;bottom:16px;width:104px !important;height:96px !important}
  .nb-sheet.m-flow.pixels .nb-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center}
  .nb-sheet.m-flow .px-title{position:relative;inset:auto;grid-column:1/-1;font-size:40px;line-height:1.05;text-align:center;margin-bottom:12px}
  .nb-sheet.m-flow .px-title span{position:static;display:block;width:auto}
  .nb-sheet.m-flow .ph{position:relative;left:auto !important;top:auto !important;width:100% !important;height:auto !important;aspect-ratio:1}
  .nb-sheet.m-flow .ph img{object-fit:cover}
  .nb-sheet.m-flow .sel{display:none}
  .nb-sheet.m-flow{perspective:none}
  .nb-sheet.m-flow .nb-pages{position:relative;perspective:none}
  .nb-sheet.m-flow .leaf{position:relative;inset:auto;transform:none !important;visibility:inherit !important;pointer-events:auto}
  .nb-sheet.m-flow .leaf-rev,.nb-sheet.m-flow .leaf-shade,.nb-sheet.m-flow .under-shade{display:none}
  .nb-sheet.m-flow.flipped .leaf{display:none}
  .nb-sheet.m-flow .side{position:relative;inset:auto;transform:none}
  .nb-sheet.m-flow .jr-detail{position:relative;left:auto;top:auto;width:auto;min-height:0;margin:24px 0 0;padding:24px 18px 20px;transform:none}
  .nb-sheet.m-flow .jr-detail h3{font-size:22px}.nb-sheet.m-flow .jr-detail li{font-size:15px;line-height:24px;padding-left:16px}
  .nb-sheet.m-flow .jr-detail .jd-when,.nb-sheet.m-flow .jr-detail .jd-where{font-size:12px}
  .nb-sheet.m-flow .jr-pick{grid-template-columns:1fr;padding:8px 10px}
  .nb-sheet.m-flow .paper{position:relative;inset:auto}
  .nb-sheet.m-flow .side.back{display:none}
  .nb-sheet.m-flow.flipped .side.front{display:none}
  .nb-sheet.m-flow.flipped .side.back{display:block}
  .nb-sheet.m-flow .turn{position:relative;display:block;width:auto;height:56px;margin:24px 0 0 auto}
  .nb-sheet.m-flow .turn .curl{width:48px;height:48px}
  .nb-sheet.m-flow .turn-l{right:60px;bottom:16px;font-size:14px}
  .nb-sheet.m-flow .jr-note{position:relative;left:auto;top:auto;margin-top:8px;font-size:14px}
  .nb-sheet.m-flow .jr-list{position:relative;left:auto;top:auto;width:auto;margin:24px 0 0 32px;gap:20px}
  .nb-sheet.m-flow .jr-list::before{left:-23px;top:10px}
  .nb-sheet.m-flow .jr-dot{left:-31px;top:4px;width:16px;height:16px}
  .nb-sheet.m-flow .jr-list li{grid-template-columns:1fr;row-gap:4px}
  .nb-sheet.m-flow .jr-when{font-size:12px}.nb-sheet.m-flow .jr-role{font-size:22px}
  .nb-sheet.m-flow .jr-where{grid-column:1;font-size:13px}.nb-sheet.m-flow .jr-p{grid-column:1;font-size:16px;line-height:26px}
  .nb-sheet.m-flow .jr-pola{position:relative;left:auto;top:auto;width:150px;margin:24px auto 0;padding:8px 8px 32px}
  .nb-sheet.m-flow .jr-pola figcaption{font-size:13px;bottom:8px}
  .nb-sheet.m-flow .ph{padding:5px 5px 18px}
  .lb-pola{padding:10px 10px 52px}.lb-pola figcaption{font-size:15px;bottom:16px}
  .lb-close{top:72px;right:16px}
  .nb-sheet.m-flow .px-hint{position:relative;left:auto;bottom:auto;transform:none;grid-column:1/-1;text-align:center;font-size:13px;margin-top:8px;white-space:normal}
  .c-close{left:16px;top:72px}
  .talk .frame{height:auto;width:auto;padding:160px 16px 180px}
  .talk-sky{left:0;top:0;width:100%;height:100%}.talk-sky img{object-fit:cover}
  .talk-hill{left:0;top:auto;bottom:-40%;width:100%;height:90%}.talk-hill img{object-fit:cover;object-position:30% 0}
  .glass{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;border-radius:32px;padding:112px 16px 48px}
  .talk-me{top:96px;width:128px;height:128px;transform:translateX(-50%)}
  .talk-me:hover{transform:translateX(-50%) rotate(-4deg)}
  .talk-h{position:relative;top:auto;font-size:44px;line-height:1.1;letter-spacing:-.7px}
  .talk-p{position:relative;left:auto;top:auto;transform:none;width:auto;margin-top:16px;font-size:16px;line-height:26px}
  .talk-actions{position:relative;top:auto;margin-top:24px;gap:8px}
  .t-btn{height:44px;padding:0 16px;font-size:15px;gap:6px}.t-btn svg{width:18px;height:18px}
  .talk-mail{position:relative;top:auto;margin-top:16px;font-size:14px}
  .talk-status{position:relative;top:auto;margin-top:16px;font-size:13px}
  .talk-foot{position:relative;top:auto;margin-top:32px;font-size:12px;padding:0 8px}
  .talk-me .ring{inset:-4px;border-width:2px}.talk-me .avface{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 18px 2px rgba(255,255,255,.35)}
  .talk-me .online{right:10px;bottom:10px;width:18px;height:18px;border-width:3px}
  .cloud.c1{left:-120px;top:70px;width:360px;height:103px}.cloud.c2{left:30%;top:-30px;width:360px;height:103px}.cloud.c3{left:auto;right:-140px;top:150px;width:360px;height:90px}
}

/* ---------------------------------------------- pixel dissolve (intro) */
.pixfx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;visibility:hidden;will-change:opacity}
.intro-backdrop{will-change:opacity}

/* ------------------------------------------- cursor parallax
   only on the opening close-up (before the zoom) and on About's grass */
/* the opening close-up is a still picture: no cursor motion */
.f-about .art.bg,.f-about .art.fg{scale:1.035;translate:calc(var(--mx,0) * -18px) calc(var(--my,0) * -12px)}
/* the same lean on Selected works (meadow, laptop and its lit screen move as one) and on Home's
   hill once the opening zoom is done (the plate grows in gently, so nothing pops) */
.f-works .art.bg,.f-works .art.wfg,.f-works .art.fx{scale:1.035;translate:calc(var(--mx,0) * -18px) calc(var(--my,0) * -12px)}
/* the hill keeps its small lean-room scale during the opening zoom too, so the zoom lands exactly where the
   page rests (it used to land at 100% and snap to 103.5% on the last frame) */
.f-home .plate{transform-origin:50% 50%;scale:1.035}


/* ------------------------------------------ the chatty tooltip (cursor) */
.ptip{position:fixed;left:0;top:0;z-index:96;pointer-events:none;transform:translate3d(var(--tx,-300px),var(--ty,-300px),0)}
.ptip-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:999px;background:#FFFEEB;
  box-shadow:0 0 0 1px rgba(41,72,14,.35),0 1px 4px rgba(2,21,28,.35);opacity:0;transition:opacity .25s}
.ptip-pill{position:absolute;left:-14px;bottom:12px;display:block;min-width:56px;min-height:40px;padding:10px 16px;border-radius:16px;white-space:nowrap;
  font:500 16px/20px var(--sans);letter-spacing:.005em;color:#29480E;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,254,235,.5),rgba(255,254,235,.28));border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(16px) saturate(1.8) brightness(1.06);-webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -8px 14px -10px rgba(255,255,255,.6),inset 0 0 0 .5px rgba(255,255,255,.4),0 12px 28px -12px rgba(2,21,28,.45);
  opacity:0;transform:translateY(6px) scale(.94);transform-origin:14px 100%;
  transition:opacity .28s var(--ease-out),transform .45s var(--spring),background .5s .12s}
/* the glass's specular sheen */
.ptip-pill::before{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:15px 15px 40% 40%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
.ptip.on .ptip-pill{background:linear-gradient(180deg,rgba(255,254,235,.86),rgba(255,254,235,.66))}
.ptip.flip .ptip-pill{left:auto;right:-14px;transform-origin:calc(100% - 14px) 100%}
.ptip.below .ptip-pill{bottom:auto;top:12px}
.ptip.on .ptip-dot{opacity:1}
.ptip.on .ptip-pill{opacity:1;transform:none}
.ptip-t .ch{display:inline-block;white-space:pre;opacity:0;filter:blur(4px);animation:chin .32s var(--ease-out) forwards}
@keyframes chin{to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.ptip-t .ch{animation:none;opacity:1;filter:none}}

/* the opening cue: SCROLL in Archivo Regular 16px, a 14px down arrow beside it, 6px apart; still */
.intro-cue{left:50%;bottom:40px;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:6px;
  color:#FFFEEB;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(2,21,28,.4)) drop-shadow(0 2px 12px rgba(2,21,28,.25))}
.ic-word{font:400 16px/1 Archivo,var(--sans);letter-spacing:1px;text-transform:uppercase}
.ic-arrow{width:14px;height:14px;flex:none}
.intro-cue .cue-m{display:none}
@media (max-width:760px){.intro-cue{bottom:32px}.intro-cue .cue-d{display:none}.intro-cue .cue-m{display:block}}
/* "Select an element to see": no glass, cream type and arrow, 24px lower */
.selhint{bottom:48px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;height:auto;
  color:#FFFEEB;filter:drop-shadow(0 1px 2px rgba(2,21,28,.4)) drop-shadow(0 2px 12px rgba(2,21,28,.25))}
.selhint img{filter:brightness(0) invert(99%) sepia(6%) saturate(600%) hue-rotate(10deg)}
.site[data-theme="night"] .selhint{background:none;border:0;color:#FFFEEB}
@media (max-width:760px){.selhint{bottom:40px}}
.turnhint{bottom:16px}
@media (max-width:760px){.turnhint{bottom:12px}}

/* ---------------------------------------------------------- case study page
   Rises over the works page like a sheet pulled up from the folder. Cream
   paper, green ink: tags, a huge title, the statement, a meta grid, a
   full-bleed cover, numbered sections with image slots, a pull line, and a
   big "Next up" that walks on to the next project. */
.case-page{z-index:80;background:var(--cream);color:var(--leaf);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.cs-in{max-width:calc(1920 * var(--u));margin:0 auto;padding:calc(120 * var(--u)) calc(82 * var(--u)) 0}
.cs-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cs-back{color:var(--leaf);background:rgba(255,254,235,.8);border-color:rgba(41,72,14,.16)}
.cs-crumb{font:500 calc(18 * var(--u))/1 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.cs-hero{padding:calc(96 * var(--u)) 0 calc(72 * var(--u))}
.cs-tags{list-style:none;margin:0 0 calc(40 * var(--u));padding:0;display:flex;flex-wrap:wrap;gap:calc(10 * var(--u))}
.cs-tags li{padding:calc(8 * var(--u)) calc(18 * var(--u));border:1px solid rgba(41,72,14,.35);border-radius:999px;font:500 calc(16 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.06em}
.cs-title{margin:0;font:500 calc(220 * var(--u))/.9 var(--sans);letter-spacing:-.055em;text-wrap:balance}
.cs-statement{margin:calc(48 * var(--u)) 0 0;max-width:calc(1240 * var(--u));font:400 calc(52 * var(--u))/1.18 var(--sans);letter-spacing:-.03em;text-wrap:pretty}
.cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(32 * var(--u));margin:0;padding:calc(32 * var(--u)) 0 calc(72 * var(--u));border-top:1px solid rgba(41,72,14,.25)}
.cs-meta dt{font:500 calc(15 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--moss)}
.cs-meta dd{margin:calc(12 * var(--u)) 0 0;font:400 calc(22 * var(--u))/1.4 var(--sans);letter-spacing:-.01em}
.cs-cover{margin:0 calc(calc(-82 * var(--u)));aspect-ratio:1920/900;border-radius:0}
.cs-cover .aw-cover{padding:calc(56 * var(--u))}.cs-cover .aw-cover b{font-size:calc(96 * var(--u));max-width:14ch}.cs-cover .aw-cover small{font-size:calc(16 * var(--u))}
.cs-stats{list-style:none;margin:0;padding:calc(72 * var(--u)) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(32 * var(--u));border-bottom:1px solid rgba(41,72,14,.25)}
.cs-stats b{display:block;font:500 calc(128 * var(--u))/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cs-stats span{display:block;margin-top:calc(12 * var(--u));max-width:22ch;font:400 calc(20 * var(--u))/1.4 var(--sans);color:var(--moss)}
.cs-sec{display:grid;grid-template-columns:calc(380 * var(--u)) minmax(0,1fr);gap:calc(32 * var(--u));padding:calc(96 * var(--u)) 0 calc(48 * var(--u))}
.cs-lbl{margin:0;font:500 calc(18 * var(--u))/1 var(--narrow);letter-spacing:.08em;color:var(--moss)}
.cs-body h3{margin:0;font:500 calc(56 * var(--u))/1.05 var(--sans);letter-spacing:-.035em}
.cs-body p{margin:calc(24 * var(--u)) 0 0;max-width:60ch;font:400 calc(24 * var(--u))/1.6 var(--sans);letter-spacing:-.01em}
.cs-list{list-style:none;margin:calc(40 * var(--u)) 0 0;padding:0;display:grid;gap:calc(28 * var(--u));counter-reset:cs}
.cs-list li{display:grid;grid-template-columns:calc(56 * var(--u)) minmax(0,1fr);row-gap:calc(6 * var(--u));counter-increment:cs;padding-top:calc(24 * var(--u));border-top:1px solid rgba(41,72,14,.2)}
.cs-list li::before{content:counter(cs,decimal-leading-zero);grid-row:span 2;font:500 calc(18 * var(--u))/1.6 var(--narrow);color:var(--moss)}
.cs-list b{font:500 calc(28 * var(--u))/1.25 var(--sans);letter-spacing:-.02em}
.cs-list span{max-width:60ch;font:400 calc(22 * var(--u))/1.55 var(--sans)}
.cs-quote{margin:calc(48 * var(--u)) 0 calc(64 * var(--u)) calc(412 * var(--u));max-width:calc(1200 * var(--u));font:400 calc(64 * var(--u))/1.12 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.cs-quote::before{content:"\201C";display:block;height:calc(48 * var(--u));font-size:calc(120 * var(--u));line-height:1;color:var(--ph)}
.cs-media{display:grid;gap:calc(20 * var(--u));margin:calc(20 * var(--u)) 0}
.cs-media.full{grid-template-columns:1fr}.cs-media.full .cs-shot{aspect-ratio:16/8}
.cs-media.two{grid-template-columns:1fr 1fr}.cs-media.two .cs-shot{aspect-ratio:4/3}
.cs-media.three{grid-template-columns:repeat(3,1fr)}.cs-media.three .cs-shot{aspect-ratio:3/4}
.cs-shot{margin:0;color:rgba(255,254,235,.85)}
.cs-ref{margin:0;padding:calc(80 * var(--u)) 0 calc(40 * var(--u))}
.cs-behance{display:inline-flex;align-items:center;gap:calc(10 * var(--u));color:var(--leaf);font:500 calc(20 * var(--u))/1 var(--sans);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:calc(6 * var(--u))}
.cs-behance svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.cs-next{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:calc(24 * var(--u));margin:0 calc(calc(-82 * var(--u)));padding:calc(72 * var(--u)) calc(82 * var(--u)) calc(96 * var(--u));
  border-top:1px solid rgba(41,72,14,.25);color:var(--leaf);text-decoration:none;overflow:hidden;isolation:isolate}
.cs-next::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nph);transform:translateY(101%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.cs-next:hover::before,.cs-next:focus-visible::before{transform:none}
.cs-next:hover,.cs-next:focus-visible{color:var(--cream)}
.cs-next-lbl{grid-column:1/-1;font:500 calc(18 * var(--u))/1 var(--narrow);text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.cs-next-name{font:500 calc(180 * var(--u))/.95 var(--sans);letter-spacing:-.055em;text-wrap:balance}
.cs-next svg{width:calc(120 * var(--u));height:calc(120 * var(--u));transition:transform .5s var(--spring)}
.cs-next:hover svg{transform:translate(calc(10 * var(--u)),calc(-10 * var(--u)))}
.cs-next:focus-visible{outline:none}
@media (max-width:760px){
  .cs-in{padding:88px 16px 0}
  .cs-crumb{font-size:12px}
  .cs-hero{padding:40px 0 32px}
  .cs-tags{gap:6px;margin-bottom:20px}.cs-tags li{font-size:12px;padding:6px 10px}
  .cs-title{font-size:56px}
  .cs-statement{margin-top:20px;font-size:21px;line-height:1.3}
  .cs-meta{grid-template-columns:1fr 1fr;gap:20px 16px;padding:20px 0 32px}
  .cs-meta dt{font-size:12px}.cs-meta dd{font-size:15px;margin-top:6px}
  .cs-cover{margin:0 -16px;aspect-ratio:4/3}.cs-cover .aw-cover{padding:20px}.cs-cover .aw-cover b{font-size:32px}.cs-cover .aw-cover small{font-size:11px}
  .cs-stats{grid-template-columns:1fr;gap:20px;padding:32px 0}.cs-stats b{font-size:56px}.cs-stats span{font-size:14px}
  .cs-sec{grid-template-columns:1fr;gap:10px;padding:48px 0 16px}
  .cs-lbl{font-size:12px}.cs-body h3{font-size:30px}.cs-body p{font-size:16px;margin-top:12px}
  .cs-list{margin-top:20px;gap:16px}.cs-list li{grid-template-columns:32px minmax(0,1fr);padding-top:14px}.cs-list li::before{font-size:12px}
  .cs-list b{font-size:18px}.cs-list span{font-size:15px}
  .cs-quote{margin:24px 0 32px;font-size:30px}.cs-quote::before{font-size:64px;height:28px}
  .cs-media{gap:8px;margin:8px 0}.cs-media.three{grid-template-columns:1fr 1fr}.cs-media.three .cs-shot:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .cs-ref{padding:40px 0 24px}.cs-behance{font-size:15px}.cs-behance svg{width:16px;height:16px}
  .cs-next{margin:0 -16px;padding:32px 16px 48px}.cs-next-lbl{font-size:12px}.cs-next-name{font-size:52px}.cs-next svg{width:40px;height:40px}
}
/* scroll reveal on case pages: each part waits just below where it will sit,
   and arrives as it scrolls into view. Images open like a blind lifting. */
.case-page.rv-on .rv{opacity:0;transform:translateY(calc(64 * var(--u)));transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0s)}
.case-page.rv-on .rv.in{opacity:1;transform:none}
.case-page.rv-on .cs-shot.rv,.case-page.rv-on .cs-cover.rv{transform:none;clip-path:inset(100% 0 0 0);transition:opacity .4s linear,clip-path 1.2s cubic-bezier(.65,0,.2,1);transition-delay:var(--rd,0s)}
.case-page.rv-on .cs-shot.rv.in,.case-page.rv-on .cs-cover.rv.in{clip-path:inset(0 0 0 0)}
.case-page.rv-on .cs-cover.rv .aw-cover{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .1s}
.case-page.rv-on .cs-cover.rv.in .aw-cover{transform:none}

/* About: "Pick a page in the notebook" matches Home's "Select an element to see" — no glass pill, cream type + nudging arrow */
#aboutCue{bottom:48px;gap:8px;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font:500 16px/1 var(--sans);color:#FFFEEB;filter:drop-shadow(0 1px 2px rgba(2,21,28,.4)) drop-shadow(0 2px 12px rgba(2,21,28,.25))}
#aboutCue img{width:20px;height:20px;animation:nudge 1.8s ease-in-out infinite;filter:brightness(0) invert(99%) sepia(6%) saturate(600%) hue-rotate(10deg)}
.site[data-theme="night"] #aboutCue{background:none;border:0;color:#FFFEEB}
@media (max-width:760px){#aboutCue{bottom:40px;font-size:14px;height:auto;padding:0;white-space:nowrap;max-width:none}}
@media (prefers-reduced-motion:reduce){#aboutCue img{animation:none}}
/* the laptop cue matches the home and notebook cues: cream words and a nudging arrow, no pill */
#worksCue{bottom:48px;gap:8px;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font:500 16px/1 var(--sans);color:#FFFEEB;filter:drop-shadow(0 1px 2px rgba(2,21,28,.4)) drop-shadow(0 2px 12px rgba(2,21,28,.25))}
#worksCue img{width:20px;height:20px;animation:nudge 1.8s ease-in-out infinite;filter:brightness(0) invert(99%) sepia(6%) saturate(600%) hue-rotate(10deg)}
.site[data-theme="night"] #worksCue{background:none;border:0;color:#FFFEEB}
@media (max-width:760px){#worksCue{bottom:40px;font-size:14px;height:auto;padding:0;white-space:nowrap;max-width:none}}
@media (prefers-reduced-motion:reduce){#worksCue img{animation:none}}
#worksCue{transition:opacity .35s var(--ease-out)}
#worksCue.gone{opacity:0 !important;pointer-events:none}

/* ---------------------------------------------- touch targets (UX pass, Oct 24)
   every tap target gets at least a 44px hit area; the visible sizes stay as designed */
.gnav .links a::before{content:"";position:absolute;inset:-14px -8px}
.resume{position:relative}.resume::before{content:"";position:absolute;inset:-6px}
.aw-filter button{position:relative}.aw-filter button::before{content:"";position:absolute;inset:-12px -3px}
@media (max-width:760px){
  .gnav .me{width:44px;height:44px;margin:-4px 0;padding:4px;overflow:visible;background:none}
  .gnav .me img{border-radius:999px}
  .gnav .links{gap:18px}
  .v-play::before{inset:-12px}
  .vibes{--u:calc(236px / 351.35)}
  .v-time{font-size:11px}.v-title{font-size:12px}
  .pill-t{white-space:normal}
  .aw-toggle{position:relative}.aw-toggle::before{content:"";position:absolute;inset:-7px -4px}
}

/* ================================================= case study story blocks (Oct 25)
   at a glance, jump links, insight, findings, personas, problem -> decision -> why,
   flows, swatches, impact (labelled honestly), competitor table */
.cs-tldr{padding:calc(8 * var(--u)) 0 calc(72 * var(--u));border-top:1px solid rgba(41,72,14,.25)}
.cs-tldr .cs-lbl{padding:calc(32 * var(--u)) 0 calc(28 * var(--u))}
.cs-tldr ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24 * var(--u))}
.cs-tldr li{position:relative;padding:calc(36 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u));border-radius:calc(20 * var(--u));background:rgba(41,72,14,.05);border:1px solid rgba(41,72,14,.12)}
.cs-tldr li::before{content:"";position:absolute;left:calc(36 * var(--u));top:0;width:calc(56 * var(--u));height:calc(4 * var(--u));border-radius:0 0 4px 4px;background:var(--ph)}
.cs-tldr li.t2{background:var(--leaf);color:var(--cream);border-color:transparent}
.cs-tldr li.t2::before{background:var(--cream)}
.cs-tldr b{display:block;font:500 calc(16 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.cs-tldr p{margin:calc(16 * var(--u)) 0 0;font:400 calc(26 * var(--u))/1.45 var(--sans);letter-spacing:-.015em;text-wrap:pretty}
.cs-jump{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u));padding:0 0 calc(56 * var(--u))}
.cs-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 calc(22 * var(--u));border-radius:999px;border:1px solid rgba(41,72,14,.3);color:var(--leaf);text-decoration:none;
  font:500 calc(18 * var(--u))/1 var(--sans);transition:background-color .25s,color .25s}
.cs-jump a:hover,.cs-jump a:focus-visible{background:var(--leaf);color:var(--cream);outline:none}
.cs-lbl .cs-kind{display:block;margin-top:calc(10 * var(--u));font-size:calc(15 * var(--u));text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.cs-sec:focus{outline:none}
.cs-insight{margin:calc(32 * var(--u)) 0 0!important;max-width:30ch!important;padding-left:calc(32 * var(--u));border-left:calc(6 * var(--u)) solid var(--ph);font:400 calc(52 * var(--u))/1.15 var(--sans)!important;letter-spacing:-.03em!important;text-wrap:balance}
.cs-find{list-style:none;margin:calc(40 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(300 * var(--u)),1fr));gap:calc(16 * var(--u))}
.cs-find li{display:flex;flex-direction:column;gap:calc(10 * var(--u));padding:calc(24 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u));border-radius:calc(16 * var(--u));background:#fff;border:1px solid rgba(41,72,14,.12)}
.cs-find small{align-self:flex-start;padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:999px;background:rgba(41,72,14,.08);font:500 calc(13 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.cs-find b{font:500 calc(26 * var(--u))/1.25 var(--sans);letter-spacing:-.02em}
.cs-find span{font:400 calc(19 * var(--u))/1.5 var(--sans);color:rgba(41,72,14,.82)}
.cs-personas{list-style:none;margin:calc(40 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16 * var(--u))}
.cs-personas li{display:flex;flex-direction:column;gap:calc(8 * var(--u));padding:calc(28 * var(--u));border-radius:calc(16 * var(--u));background:color-mix(in srgb,var(--ph) 16%,#fff)}
.cs-personas b{font:500 calc(30 * var(--u))/1.1 var(--sans);letter-spacing:-.02em}
.cs-personas small{font:500 calc(16 * var(--u))/1.3 var(--narrow);text-transform:uppercase;letter-spacing:.06em;color:var(--moss)}
.cs-personas span{margin-top:calc(6 * var(--u));font:400 calc(19 * var(--u))/1.5 var(--sans)}
.cs-pairs{list-style:none;margin:calc(40 * var(--u)) 0 0;padding:0;display:grid;gap:calc(16 * var(--u));counter-reset:pr}
.cs-pairs li{counter-increment:pr;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);border-radius:calc(18 * var(--u));overflow:hidden;border:1px solid rgba(41,72,14,.14);background:#fff}
.cs-pairs li > div{padding:calc(26 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u))}
.cs-pairs .pp{background:rgba(125,27,48,.06)}
.cs-pairs .pd{background:color-mix(in srgb,var(--ph) 14%,#fff);border-inline:1px solid rgba(41,72,14,.1)}
.cs-pairs small{display:block;font:500 calc(13 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--moss)}
.cs-pairs .pp small{color:#7D1B30}
.cs-pairs .pp small::before{content:counter(pr,decimal-leading-zero) "  \00b7  "}
.cs-pairs p{margin:calc(10 * var(--u)) 0 0!important;max-width:none!important;font:400 calc(20 * var(--u))/1.5 var(--sans)!important}
.cs-pairs .pd p{font-weight:500!important}
.cs-flow{margin:calc(40 * var(--u)) 0 0}
.cs-flow small{display:block;margin-bottom:calc(14 * var(--u));font:500 calc(14 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--moss)}
.cs-flow ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(10 * var(--u)) calc(8 * var(--u))}
.cs-flow li{display:inline-flex;align-items:center;gap:calc(8 * var(--u));font:500 calc(18 * var(--u))/1 var(--sans)}
.cs-flow li span,.cs-flow li{padding:calc(12 * var(--u)) calc(18 * var(--u));border-radius:999px;background:#fff;border:1px solid rgba(41,72,14,.18)}
.cs-flow li:not(:last-child)::after{content:"\2192";margin-inline-start:calc(10 * var(--u));color:var(--moss)}
.cs-swatches{list-style:none;margin:calc(36 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(210 * var(--u)),1fr));gap:calc(16 * var(--u))}
.cs-swatches li{display:grid;grid-template-columns:calc(64 * var(--u)) 1fr;column-gap:calc(14 * var(--u));align-items:center}
.cs-swatches i{grid-row:span 2;width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:calc(14 * var(--u));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cs-swatches b{font:500 calc(18 * var(--u))/1.2 var(--sans);font-variant-numeric:tabular-nums}
.cs-swatches span{font:400 calc(16 * var(--u))/1.35 var(--sans);color:var(--moss)}
.cs-impact{list-style:none;margin:calc(36 * var(--u)) 0 0;padding:0;display:grid;gap:calc(12 * var(--u))}
.cs-impact li{display:grid;grid-template-columns:calc(150 * var(--u)) minmax(0,1fr);align-items:baseline;gap:calc(20 * var(--u));padding:calc(20 * var(--u)) 0;border-top:1px solid rgba(41,72,14,.16)}
.cs-impact small{justify-self:start;padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:999px;font:500 calc(13 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.08em;background:var(--leaf);color:var(--cream)}
.cs-impact .i-expected small{background:#F2C230;color:#3a2c00}
.cs-impact .i-measure small{background:#2192BF;color:#fff}
.cs-impact .i-next small{background:transparent;color:var(--leaf);box-shadow:inset 0 0 0 1px rgba(41,72,14,.4)}
.cs-impact p{margin:0!important;max-width:60ch;font:400 calc(22 * var(--u))/1.5 var(--sans)!important}
.cs-table-wrap{margin:calc(36 * var(--u)) 0 calc(8 * var(--u));overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-table{border-collapse:collapse;min-width:100%;font:400 calc(19 * var(--u))/1.3 var(--sans)}
.cs-table th,.cs-table td{padding:calc(14 * var(--u)) calc(18 * var(--u));border-bottom:1px solid rgba(41,72,14,.16);text-align:center}
.cs-table thead th{font:500 calc(15 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.cs-table thead th:last-child,.cs-table td:last-child{background:color-mix(in srgb,var(--ph) 18%,transparent);font-weight:600}
.cs-table tbody th{text-align:start;font-weight:500}
.cs-table td.yes{color:#2E6B3F;font-weight:700}.cs-table td.no{color:rgba(125,27,48,.7)}
.cs-table .sr,.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-nda{font:400 calc(20 * var(--u))/1.5 var(--sans);color:var(--moss)}
@media (max-width:760px){
  .cs-tldr{padding-bottom:32px}.cs-tldr .cs-lbl{padding:20px 0 14px}
  .cs-tldr ol{grid-template-columns:1fr;gap:10px}
  .cs-tldr li{padding:22px 18px 22px;border-radius:14px}.cs-tldr li::before{left:18px;width:40px}
  .cs-tldr b{font-size:12px}.cs-tldr p{margin-top:8px;font-size:16px}
  .cs-jump{gap:8px;padding-bottom:28px}.cs-jump a{padding:0 16px;font-size:14px}
  .cs-lbl .cs-kind{display:inline;margin:0 0 0 10px;font-size:12px}
  .cs-insight{margin-top:16px!important;padding-left:16px;border-left-width:4px;font-size:24px!important}
  .cs-find{grid-template-columns:1fr;gap:10px;margin-top:20px}
  .cs-find li{padding:16px 16px 18px;gap:6px;border-radius:12px}.cs-find small{font-size:11px;padding:3px 8px}
  .cs-find b{font-size:18px}.cs-find span{font-size:15px}
  .cs-personas{grid-template-columns:1fr;gap:10px;margin-top:20px}.cs-personas li{padding:18px;border-radius:12px}
  .cs-personas b{font-size:20px}.cs-personas small{font-size:12px}.cs-personas span{font-size:15px}
  .cs-pairs{gap:12px;margin-top:20px}
  .cs-pairs li{grid-template-columns:1fr;border-radius:14px}
  .cs-pairs .pd{border-inline:0;border-block:1px solid rgba(41,72,14,.1)}
  .cs-pairs li > div{padding:14px 16px 16px}
  .cs-pairs small{font-size:11px}.cs-pairs p{font-size:15px!important;margin-top:4px!important}
  .cs-flow{margin-top:20px}.cs-flow small{font-size:12px}
  .cs-flow ol{gap:8px 6px}.cs-flow li{padding:8px 12px;font-size:13px}
  .cs-swatches{grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  .cs-swatches li{grid-template-columns:44px 1fr;column-gap:10px}.cs-swatches i{width:44px;height:44px;border-radius:10px}
  .cs-swatches b{font-size:14px}.cs-swatches span{font-size:12px}
  .cs-impact{margin-top:20px;gap:4px}
  .cs-impact li{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .cs-impact small{font-size:11px}.cs-impact p{font-size:15px!important}
  .cs-table{font-size:13px}.cs-table th,.cs-table td{padding:10px 8px}.cs-table thead th{font-size:11px}
  .cs-nda{font-size:15px}
}

/* ---- real screens in phone frames (Halan, Oct 25) */
.cs-phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--u));flex:none}
.cs-phone .pf{position:relative;display:block;width:calc(300 * var(--u));aspect-ratio:414/896;padding:calc(9 * var(--u));border-radius:calc(46 * var(--u));background:#141613;
  box-shadow:inset 0 0 0 calc(2 * var(--u)) #3a3d38,0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(20,40,10,.45),0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(20,40,10,.18)}
.cs-phone .pf img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(37 * var(--u));background:#f4f4f2}
.cs-phone figcaption{max-width:calc(300 * var(--u));text-align:center;font:500 calc(16 * var(--u))/1.35 var(--sans);color:var(--moss)}
.cs-strip{display:flex;gap:calc(40 * var(--u));margin:calc(8 * var(--u)) calc(calc(-82 * var(--u))) calc(24 * var(--u));padding:calc(24 * var(--u)) calc(82 * var(--u)) calc(40 * var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cs-strip .cs-phone{scroll-snap-align:start}
.cs-strip:focus-visible{outline:2px solid var(--leaf);outline-offset:-4px}
.cs-sec + .cs-anim,.cs-anim + .cs-anim{display:inline-flex;vertical-align:top;margin:calc(8 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) 0}
.cs-sec + .cs-anim{margin-left:calc(412 * var(--u))}
.cs-anim .pf img{position:absolute;inset:calc(9 * var(--u));width:calc(100% - calc(18 * var(--u)));height:calc(100% - calc(18 * var(--u)));opacity:0;transition:opacity .35s ease}
.cs-anim .pf img.on{opacity:1}
.cs-compare{display:grid;grid-template-columns:1fr 1fr;gap:calc(32 * var(--u));margin:calc(40 * var(--u)) 0 0}
.cs-compare > div{display:flex;flex-direction:column;align-items:center;padding:calc(32 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u));border-radius:calc(20 * var(--u));background:rgba(41,72,14,.05);border:1px solid rgba(41,72,14,.12)}
.cs-compare > div:last-child{background:color-mix(in srgb,var(--ph) 12%,#fff)}
.cs-compare .cs-phone .pf{width:calc(260 * var(--u))}
.cs-compare .cv-t{margin:calc(24 * var(--u)) 0 0!important;font:500 calc(24 * var(--u))/1.25 var(--sans)!important;text-align:center}
.cs-compare .cv-d{margin:calc(8 * var(--u)) 0 0!important;font:400 calc(18 * var(--u))/1.5 var(--sans)!important;text-align:center;max-width:34ch!important}
.cs-todo{margin:calc(28 * var(--u)) 0 0!important;max-width:60ch;padding:calc(16 * var(--u)) calc(20 * var(--u));border:calc(2 * var(--u)) dashed #E0A517;border-radius:calc(14 * var(--u));background:rgba(242,194,48,.12);
  font:400 calc(19 * var(--u))/1.5 var(--sans)!important;color:#5a4300}
.cs-todo b{display:block;margin-bottom:calc(4 * var(--u));font:600 calc(13 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:#9a6c00}
.cs-tldr li.t2 .cs-todo{background:rgba(255,254,235,.12);border-color:#F2C230;color:var(--cream)}
.cs-tldr li.t2 .cs-todo b{color:#F2C230}
@media (max-width:760px){
  .cs-phone{gap:10px}.cs-phone .pf{width:200px;padding:6px;border-radius:30px}.cs-phone .pf img{border-radius:24px}
  .cs-phone figcaption{max-width:200px;font-size:13px}
  .cs-strip{gap:16px;margin:4px -16px 16px;padding:16px 16px 24px}
  .cs-sec + .cs-anim,.cs-anim + .cs-anim{margin:4px 12px 24px 0}
  .cs-sec + .cs-anim{margin-left:0}
  .cs-anim .pf img{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
  .cs-anim .pf{width:150px}.cs-anim figcaption{max-width:150px}
  .cs-compare{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .cs-compare > div{padding:14px 10px;border-radius:14px}
  .cs-compare .cs-phone .pf{width:130px;padding:4px;border-radius:20px}.cs-compare .cs-phone .pf img{border-radius:16px}
  .cs-compare .cv-t{font-size:15px!important;margin-top:12px!important}.cs-compare .cv-d{font-size:13px!important}
  .cs-todo{padding:12px 14px;font-size:14px!important}.cs-todo b{font-size:11px}
}

/* ---- live motion demos (Halan) */
.cs-demos{display:flex;flex-wrap:wrap;gap:calc(32 * var(--u));margin:calc(40 * var(--u)) 0 0}
.cs-demo{margin:0;display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.dm-stage{position:relative;width:calc(380 * var(--u));height:calc(300 * var(--u));border-radius:calc(28 * var(--u));overflow:hidden;background:#F4F4F2;box-shadow:inset 0 0 0 1px rgba(41,72,14,.1);font-family:var(--sans);color:#1d1d1b}
.cs-demo figcaption{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));width:calc(380 * var(--u));font:500 calc(16 * var(--u))/1.35 var(--sans);color:var(--moss)}
.dm-replay{flex:none;min-height:44px;padding:0 calc(18 * var(--u));border-radius:999px;border:1px solid rgba(41,72,14,.3);background:#fff;color:var(--leaf);font:500 calc(15 * var(--u))/1 var(--sans);cursor:pointer}
.dm-replay:hover,.dm-replay:focus-visible{background:var(--leaf);color:var(--cream);outline:none}
.dm-otp{position:absolute;inset:0;padding:calc(56 * var(--u)) calc(26 * var(--u)) 0}
.ot-t{margin:0;font:600 calc(21 * var(--u))/1.2 var(--sans)}
.ot-s{margin:calc(8 * var(--u)) 0 calc(20 * var(--u));font:400 calc(13 * var(--u))/1.4 var(--sans);color:#6a6a66}
.ot-row{position:relative;display:flex;gap:calc(9 * var(--u))}
.ob{display:grid;place-items:center;width:calc(46 * var(--u));height:calc(52 * var(--u));border-radius:calc(12 * var(--u));background:#fff;border:calc(1.5 * var(--u)) solid #E6E6E3;font:700 calc(26 * var(--u))/1 var(--sans);font-style:normal;color:#111}
.dm-otp.otp-a .ob{border-color:#16A06A}
.ot-check{position:absolute;left:50%;top:50%;width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:calc(16 * var(--u));background:#fff;border:calc(1.5 * var(--u)) solid #16A06A;display:grid;place-items:center;opacity:0;transform:translate(-50%,-50%) scale(.2)}
.ot-check svg{width:calc(40 * var(--u));height:calc(40 * var(--u))}
.ot-r{margin:calc(18 * var(--u)) 0 0;font:400 calc(13 * var(--u))/1 var(--sans);color:#6a6a66}.ot-r b{color:#16A06A}
.ot-toast{position:absolute;left:50%;top:calc(14 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u));margin:0;padding:calc(10 * var(--u)) calc(16 * var(--u));border-radius:calc(12 * var(--u));background:#16A06A;color:#fff;font:600 calc(15 * var(--u))/1 var(--sans);white-space:nowrap;
  transform:translate(-50%,-140%);opacity:0;box-shadow:0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(0,80,40,.45)}
.ot-toast svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.dm-env{position:absolute;inset:0;display:grid;place-items:center;perspective:calc(800 * var(--u));background:linear-gradient(180deg,#fff 0%,#E3FBF0 100%)}
.ev-wrap{position:relative;width:calc(200 * var(--u));height:calc(128 * var(--u));margin-top:calc(60 * var(--u))}
.ev-back{position:absolute;inset:0;border-radius:calc(6 * var(--u));background:#82C3AB;z-index:1}
.ev-card{position:absolute;left:4%;top:0;width:92%;height:auto;z-index:2;filter:drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,60,30,.25))}
.ev-front{position:absolute;inset:0;width:100%;height:100%;z-index:3;filter:drop-shadow(0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0,90,50,.25))}
.ev-flap{position:absolute;left:0;top:0;width:100%;height:auto;z-index:0;transform-origin:50% 0;transform:rotateX(180deg)}
.cs-demo.still .ot-toast{opacity:1;transform:translate(-50%,0)}
.cs-demo.still .dm-otp.otp-a .ob{opacity:0}.cs-demo.still .ot-check{opacity:1;transform:translate(-50%,-50%) scale(.85)}
.cs-motion-notes{list-style:none;margin:calc(28 * var(--u)) 0 0;padding:0;display:grid;gap:calc(10 * var(--u))}
.cs-motion-notes li{display:grid;grid-template-columns:calc(240 * var(--u)) 1fr;gap:calc(16 * var(--u));padding-top:calc(10 * var(--u));border-top:1px solid rgba(41,72,14,.15);font:400 calc(18 * var(--u))/1.5 var(--sans)}
.cs-motion-notes b{font-weight:500}
@media (max-width:760px){
  .cs-demos{gap:16px;margin-top:20px}
  .cs-demo{width:100%}
  .dm-stage{--u:calc(min(100vw - 32px,380px) / 380);width:100%;max-width:380px}
  .cs-demo figcaption{width:100%;max-width:380px;font-size:13px}.dm-replay{font-size:13px;padding:0 14px}
  .cs-motion-notes li{grid-template-columns:1fr;gap:4px;font-size:14px}
}

/* ===================================== All works, grid version (Oct 25)
   same maroon folder; Archivo Black title, pill filters, square cards */
.aw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(24 * var(--u))}
.aw-view{flex:none;display:inline-flex;padding:calc(5 * var(--u));margin-top:calc(12 * var(--u));border-radius:999px;background:rgba(255,254,235,.1);border:1px solid rgba(255,254,235,.25)}
.aw-view button{display:inline-flex;align-items:center;gap:calc(8 * var(--u));min-height:44px;padding:0 calc(20 * var(--u));border:0;border-radius:999px;background:transparent;color:rgba(255,254,235,.75);
  font:500 calc(17 * var(--u))/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s}
.aw-view button svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.aw-view button[aria-pressed="true"]{background:var(--cream);color:var(--maroon)}
.aw-view button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.aw-body.v-grid .aw-filter,.aw-body.v-grid #awList{display:none}
.aw-body.v-list .awg-filter,.aw-body.v-list .awg-grid{display:none}
.aw-body.v-grid .aw-title{font:400 calc(184 * var(--u))/.9 var(--black);letter-spacing:calc(-12 * var(--u));text-transform:uppercase;color:var(--cream)}
.awg-filter{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--u));margin-top:calc(56 * var(--u));padding-bottom:calc(40 * var(--u));border-bottom:1px dashed rgba(255,254,235,.4)}
.awg-lbl{margin-right:calc(8 * var(--u));font:500 calc(19 * var(--u))/1 var(--narrow);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.awg-filter button{display:inline-flex;align-items:center;min-height:44px;height:calc(56 * var(--u));padding:0 calc(22 * var(--u));border-radius:999px;border:1.5px solid rgba(255,254,235,.45);background:transparent;color:var(--cream);
  font:500 calc(19 * var(--u))/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.awg-filter button:hover{border-color:var(--cream)}
.awg-filter button[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--maroon)}
.awg-filter button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.awg-grid{list-style:none;margin:0;padding:calc(40 * var(--u)) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(56 * var(--u)) calc(32 * var(--u))}
.awg-item[hidden]{display:none}
.awg-card{display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;color:var(--cream);text-align:left;cursor:pointer}
.awg-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;aspect-ratio:1;padding:calc(28 * var(--u));border-radius:calc(6 * var(--u));color:rgba(255,254,235,.96);
  transition:transform .6s var(--spring),box-shadow .5s,clip-path 1s var(--ease-out)}
.awg-cover b{position:relative;font:400 calc(40 * var(--u))/1.05 var(--sans);letter-spacing:-.02em;max-width:10ch;text-wrap:balance;text-shadow:0 1px 14px rgba(2,21,28,.18)}
.awg-cover small{position:relative;font:500 calc(15 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.awg-arrow{position:absolute;right:calc(22 * var(--u));bottom:calc(22 * var(--u));display:grid;place-items:center;width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:999px;background:var(--cream);color:var(--maroon);
  opacity:0;transform:translate(calc(-8 * var(--u)),calc(8 * var(--u))) scale(.8);transition:opacity .3s,transform .5s var(--spring)}
.awg-arrow svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.awg-name{margin-top:calc(22 * var(--u));font:400 calc(32 * var(--u))/1.1 var(--sans);letter-spacing:-.02em}
.awg-kind{margin-top:calc(12 * var(--u));font:500 calc(16 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.awg-card:hover .awg-cover,.awg-card:focus-visible .awg-cover{transform:translateY(calc(-8 * var(--u)));box-shadow:0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,.45)}
.awg-card:hover .awg-arrow,.awg-card:focus-visible .awg-arrow{opacity:1;transform:none}
.awg-card:focus-visible{outline:none}
.awg-card:focus-visible .awg-cover{outline:2px solid var(--cream);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.awg-cover,.awg-arrow{transition:none}}
@media (max-width:1100px) and (min-width:761px){.awg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .aw-head{flex-direction:column;gap:14px}
  .aw-view{margin-top:0;padding:3px}.aw-view button{padding:0 14px;font-size:13px;gap:6px}.aw-view button svg{width:15px;height:15px}
  .aw-body.v-grid .aw-title{font-size:clamp(36px,12vw,56px);letter-spacing:-.06em;padding-right:64px}
  .awg-filter{margin-top:20px;padding-bottom:20px;gap:8px}
  .awg-lbl{display:none}
  .awg-filter button{height:40px;padding:0 14px;font-size:13px}
  .awg-grid{grid-template-columns:1fr 1fr;gap:28px 12px;padding-top:24px}
  .awg-cover{padding:12px;border-radius:6px}.awg-cover b{font-size:18px}.awg-cover small{font-size:10px}
  .awg-arrow{display:none}
  .awg-name{margin-top:10px;font-size:17px}.awg-kind{margin-top:6px;font-size:11px}
}

/* ===================================== All works, reel version (Oct 25 trial)
   only the project names show; hovering a name opens its line, button and an endless strip */
.aw-body.v-reel .aw-filter,.aw-body.v-reel #awList,.aw-body.v-reel .awg-grid{display:none}
.aw-body.v-grid .awr-list,.aw-body.v-list .awr-list{display:none}
.aw-body.v-reel .aw-title{font:400 calc(184 * var(--u))/.9 var(--black);letter-spacing:calc(-12 * var(--u));text-transform:uppercase;color:var(--cream)}
.awr-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,254,235,.22)}
.awr-item{border-bottom:1px solid rgba(255,254,235,.22)}
.awr-item[hidden]{display:none}
.awr-row{display:grid;grid-template-columns:calc(84 * var(--u)) minmax(calc(360 * var(--u)),auto) minmax(0,1fr) auto;align-items:center;column-gap:calc(36 * var(--u));padding:calc(52 * var(--u)) 0}
.awr-n{font:400 calc(24 * var(--u))/1 var(--sans);font-variant-numeric:tabular-nums;opacity:.75}
.awr-name{margin:0}
.awr-name{display:flex;flex-direction:column;align-items:flex-start;gap:calc(10 * var(--u))}
.awr-toggle{padding:0;border:0;background:none;color:var(--cream);text-align:left;cursor:pointer;font:400 calc(56 * var(--u))/1.05 var(--sans);letter-spacing:-.03em;white-space:nowrap}
.awr-kind{font:500 calc(15 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.awr-toggle:focus-visible{outline:2px solid var(--cream);outline-offset:6px;border-radius:6px}
.awr-desc{margin:0;max-width:44ch;font:400 calc(19 * var(--u))/1.45 var(--sans);opacity:0;transform:translateX(calc(-10 * var(--u)));transition:opacity .35s,transform .5s var(--ease-out)}
.awr-item.open .awr-desc{opacity:.85;transform:none;transition-delay:.08s}
.awr-btn{display:inline-flex;align-items:center;gap:calc(12 * var(--u));min-height:44px;height:calc(64 * var(--u));padding:0 calc(26 * var(--u));border:1px solid rgba(255,254,235,.4);border-radius:calc(8 * var(--u));background:transparent;color:var(--cream);
  font:500 calc(19 * var(--u))/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
a.awr-btn{text-decoration:none}
.awr-btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u));transition:transform .4s var(--spring)}
.awr-item.open .awr-btn,.awr-btn:hover,.awr-btn:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--maroon);outline:none}
.awr-btn:hover svg{transform:translate(calc(3 * var(--u)),calc(-3 * var(--u)))}
.awr-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.awr-item.open .awr-more{grid-template-rows:1fr}
.awr-more-in{min-height:0;overflow:hidden}
.awr-strip{padding-bottom:calc(64 * var(--u));overflow:hidden;cursor:pointer}
/* endless strip: two copies side by side, the track slides by exactly one copy and starts again;
   it only runs while its row is open, and stops while the cursor (or a finger) is on it */
.awr-track{display:flex;width:max-content;animation:awrLoop var(--awr-dur,40s) linear infinite;animation-play-state:paused;will-change:transform}
.awr-set{display:flex;gap:calc(20 * var(--u));padding-right:calc(20 * var(--u));flex:none}
.awr-item.open .awr-track{animation-play-state:running}
.awr-item.open .awr-strip:hover .awr-track,.awr-item.open .awr-strip.hold .awr-track{animation-play-state:paused}
@keyframes awrLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .awr-strip{overflow-x:auto;scrollbar-width:none}.awr-strip::-webkit-scrollbar{display:none}
  .awr-track{animation:none}.awr-set.dup{display:none}
}
/* "More work": a centred section set like a project name; the rest of the projects fold under it */
.awr-sep{border-bottom:1px solid rgba(255,254,235,.22)}
.awr-sep[hidden]{display:none}
.awr-more-btn{display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u));width:100%;padding:calc(72 * var(--u)) 0;border:0;background:none;color:var(--cream);cursor:pointer;text-align:center}
.awr-more-name{font:400 calc(56 * var(--u))/1.05 var(--sans);letter-spacing:-.03em;transition:opacity .25s}
.awr-more-sub{display:inline-flex;align-items:center;gap:calc(12 * var(--u))}
.awr-more-btn .awr-kind{transition:opacity .25s}
.awr-plus{position:relative;width:calc(30 * var(--u));height:calc(30 * var(--u));min-width:20px;min-height:20px;border:1.5px solid rgba(255,254,235,.6);border-radius:50%;transition:transform .45s var(--ease-out),background-color .25s,border-color .25s}
.awr-plus::before,.awr-plus::after{content:"";position:absolute;left:50%;top:50%;width:44%;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.awr-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .3s}
.awr-more-btn[aria-expanded="true"] .awr-plus{transform:rotate(180deg)}
.awr-more-btn[aria-expanded="true"] .awr-plus::after{opacity:0}
.awr-more-btn:hover .awr-plus{background:var(--cream);border-color:var(--cream);color:var(--maroon)}
.awr-more-btn:hover .awr-kind{opacity:1}
.awr-more-btn:focus-visible{outline:2px solid var(--cream);outline-offset:-2px}
.awr-end{padding:calc(56 * var(--u)) 0 calc(24 * var(--u));text-align:center}
.awr-end[hidden]{display:none}
.awr-end p{margin:0;font:400 calc(22 * var(--u))/1.5 var(--sans);color:rgba(255,254,235,.72)}
.awr-end a{display:inline-flex;align-items:center;gap:calc(6 * var(--u));color:var(--cream);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.awr-end svg{width:calc(18 * var(--u));height:calc(18 * var(--u));min-width:14px;min-height:14px;transition:transform .4s var(--spring)}
.awr-end a:hover svg,.awr-end a:focus-visible svg{transform:translate(2px,-2px)}
.awr-end a:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:4px}
@media (max-width:760px){.awr-end{padding:32px 0 12px}.awr-end p{font-size:15px}}
.aw-view{display:none}
.awr-tile{position:relative;flex:none;height:calc(420 * var(--u));margin:0;border-radius:calc(10 * var(--u));overflow:hidden}
.awr-tile.cover{width:calc(740 * var(--u));display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;padding:calc(28 * var(--u));color:rgba(255,254,235,.96)}
.awr-tile.cover b{position:relative;font:400 calc(56 * var(--u))/1.05 var(--sans);letter-spacing:-.02em;max-width:11ch;text-wrap:balance}
.awr-tile.cover small{position:relative;font:500 calc(14 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.awr-tile.phx{width:calc(560 * var(--u));display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding:calc(22 * var(--u));color:rgba(255,254,235,.9)}
.awr-tile.phx.t1{width:calc(740 * var(--u));filter:brightness(1.12) saturate(.85)}.awr-tile.phx.t2{width:calc(420 * var(--u));filter:brightness(.82)}
.awr-tile.phx span{position:relative;font:500 calc(15 * var(--u))/1.3 var(--narrow);letter-spacing:.08em;text-transform:uppercase}
.awr-tile.shot{width:auto;aspect-ratio:414/896;background:#f4f4f2;border-radius:calc(20 * var(--u));box-shadow:inset 0 0 0 calc(4 * var(--u)) #141613}
.awr-tile.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(18 * var(--u));padding:calc(4 * var(--u))}
@media (prefers-reduced-motion:reduce){.awr-more,.awr-desc{transition:none}}
@media (max-width:760px){
  .aw-body.v-reel .aw-title{font-size:clamp(36px,12vw,56px);letter-spacing:-.06em;padding-right:64px}
  .awr-row{grid-template-columns:30px minmax(0,1fr) auto !important;column-gap:10px;row-gap:10px;padding:22px 0}
  .awr-n{font-size:12px}
  .awr-toggle{font-size:28px;white-space:normal}
  .awr-name{gap:6px}.awr-kind{font-size:11px}
  .awr-more-btn{padding:36px 0;gap:10px}.awr-more-name{font-size:28px}.awr-more-sub{gap:8px}
  .awr-desc{grid-column:2/-1;grid-row:2;font-size:14px;display:none}
  .awr-item.open .awr-desc{display:block}
  .awr-btn{height:40px;padding:0 12px;font-size:12px;gap:6px}.awr-btn svg{width:15px;height:15px}
  .awr-strip{padding-bottom:28px}
  .awr-set{gap:10px;padding-right:10px}
  .awr-tile{height:190px;border-radius:8px}
  .awr-tile.cover{width:300px;padding:14px}.awr-tile.cover b{font-size:22px}.awr-tile.cover small{font-size:10px}
  .awr-tile.phx{width:220px;padding:12px}.awr-tile.phx.t1{width:300px}.awr-tile.phx.t2{width:170px}.awr-tile.phx span{font-size:10px}
  .awr-tile.shot{border-radius:12px;box-shadow:inset 0 0 0 3px #141613}.awr-tile.shot img{border-radius:10px;padding:3px}
}

/* ---- page ends (Oct 25): every scrolling page closes on the sky, with a liquid-glass bar.
   The page's own colour (--from) melts into the painting so a flat page still ends in the sky. */
.sky-end{--from:var(--cream);--mid:color-mix(in srgb,var(--from) 55%,#BFE0FB);--p:0;--pull:0;position:sticky;bottom:0;z-index:0;isolation:isolate;overflow:visible;display:flex;align-items:center;justify-content:center;
  min-height:calc(900 * var(--u));padding:calc(400 * var(--u)) calc(112 * var(--u)) calc(220 * var(--u));
  background:linear-gradient(to bottom,var(--from) 0%,var(--from) 4%,var(--mid) 30%,#C4E3FB 46%,#6DB8F0 64%,#2B8FE0 100%)}
/* the painting fades in over that ramp, so any page colour melts into the same sky */
.sky-end::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../a/sky-end.webp) center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 16%,rgba(0,0,0,.18) 28%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.82) 52%,#000 62%);
  mask-image:linear-gradient(to bottom,transparent 16%,rgba(0,0,0,.18) 28%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.82) 52%,#000 62%)}
/* everything above the sky covers it until the page runs out (full-bleed so wide screens stay covered too) */
.works-page .peek,.aw-body,.cs-in{position:relative;z-index:1}
/* case pages: the content layer stays open (no own stacking context) so the sticky outline can sit above the
   header blur band; the sky footer drops to -1 instead, so the page still covers it */
.case-page .cs-in{z-index:auto}
.case-page .sky-end{z-index:-1}
/* only screens wider than the 1920 grid need the cream carried past the sides */
.cs-in{border-image:conic-gradient(var(--cream) 0 0) fill 0//0 max(0px,calc((100vw - 1920px) / 2))}
/* a soft edge hangs below the page, so the sky is uncovered through a fade, never a hard line */
.sky-hang::after,.aw-body::after,.cs-in::after{content:"";position:absolute;left:50%;top:100%;width:100vw;height:calc(280 * var(--u));transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(to bottom,var(--hang,var(--cream)) 0%,color-mix(in srgb,var(--hang,var(--cream)) 70%,transparent) 30%,color-mix(in srgb,var(--hang,var(--cream)) 30%,transparent) 62%,transparent)}
.aw-body{--hang:var(--maroon)}
/* the keyring section clips its own overflow, so its soft edge is a separate zero-height layer after it */
.sky-hang{position:relative;z-index:1;height:0}
/* the glass rises in as the sky is uncovered, and stretches when pulled past the end */
.sky-end .sky-glass{opacity:calc(var(--p) * 1.4 - .3);
  transform:translate3d(0,calc((1 - var(--p)) * calc(90 * var(--u)) - var(--pull) * 1px),0) scale(calc(.94 + var(--p) * .06 - var(--pull) * .0004),calc(.94 + var(--p) * .06 + var(--pull) * .0016));
  transform-origin:50% 100%;will-change:transform}
.sky-end .sky-glass p{letter-spacing:calc(.3em + var(--p) * .18em)}
.sky-end::before{transform:translate3d(0,calc(var(--pull) * -.25px),0) scale(calc(1 + var(--pull) * .0006))}
.sky-end.sky-spring .sky-glass,.sky-end.sky-spring::before{transition:transform .75s cubic-bezier(.34,1.56,.64,1)}
/* fully covered: draw nothing at all (it would only cost frames) */
.sky-end.sky-hid{visibility:hidden}
@media (prefers-reduced-motion:reduce){.sky-end .sky-glass{opacity:1;transform:none}.sky-end .sky-glass p{letter-spacing:.48em}}
.sky-glass{position:relative;width:min(100%,calc(720 * var(--u)));height:calc(140 * var(--u));display:grid;place-items:center;border-radius:calc(36 * var(--u));overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.07) 42%,rgba(255,255,255,.04) 70%,rgba(255,255,255,.12) 100%);
  border:1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.22),inset 0 0 calc(36 * var(--u)) rgba(255,255,255,.1),0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(12,62,124,.14)}
.sky-glass p{position:relative;margin:0;padding-left:.48em;font:500 calc(18 * var(--u))/1 var(--sans);letter-spacing:.48em;text-transform:uppercase;color:#fff;text-shadow:0 1px calc(12 * var(--u)) rgba(0,48,110,.28)}
/* maroon passes through a dusty rose on its way up to the sky, dusk into day */
.aw-sky{--mid:#D9A7B3;min-height:calc(1400 * var(--u));padding-top:calc(860 * var(--u));
  background:linear-gradient(to bottom,var(--from) 0%,
    color-mix(in srgb,var(--from) 94%,var(--mid)) 8%,color-mix(in srgb,var(--from) 82%,var(--mid)) 15%,color-mix(in srgb,var(--from) 64%,var(--mid)) 22%,
    color-mix(in srgb,var(--from) 42%,var(--mid)) 29%,color-mix(in srgb,var(--from) 20%,var(--mid)) 36%,var(--mid) 42%,
    color-mix(in srgb,var(--mid) 70%,#C4E3FB) 49%,color-mix(in srgb,var(--mid) 35%,#C4E3FB) 55%,#C4E3FB 60%,#8CC6F3 70%,#5AACEB 82%,#2B8FE0 100%)}
/* the painting arrives later and more slowly over the long ramp */
.aw-sky::before{-webkit-mask-image:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.08) 47%,rgba(0,0,0,.22) 53%,rgba(0,0,0,.42) 59%,rgba(0,0,0,.64) 65%,rgba(0,0,0,.84) 71%,#000 78%);
  mask-image:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.08) 47%,rgba(0,0,0,.22) 53%,rgba(0,0,0,.42) 59%,rgba(0,0,0,.64) 65%,rgba(0,0,0,.84) 71%,#000 78%)}
/* a longer, eased hang under the maroon too */
.aw-body::after{height:calc(520 * var(--u));background:linear-gradient(to bottom,var(--maroon) 0%,color-mix(in srgb,var(--maroon) 88%,transparent) 18%,color-mix(in srgb,var(--maroon) 66%,transparent) 36%,
  color-mix(in srgb,var(--maroon) 40%,transparent) 56%,color-mix(in srgb,var(--maroon) 16%,transparent) 76%,transparent)}
@media (max-width:760px){.aw-sky{min-height:760px;padding-top:440px}.aw-body::after{height:260px}}
/* contact already stands in the sky and meadow: only the glass bar, low on the hill */
.talk .frame{height:calc(1560 * var(--u))}
.talk-glass{position:absolute;left:0;right:0;margin:0 auto;top:calc(1290 * var(--u));z-index:2}
.talk-foot{top:calc(1500 * var(--u))}
@media (max-width:760px){
  .sky-end{min-height:440px;padding:200px 16px 110px}
  .sky-glass{width:min(100%,280px);height:60px;border-radius:18px}
  .sky-glass p{font-size:10px;letter-spacing:.38em;padding-left:.38em}
  .talk .frame{height:auto}
  .talk-glass{position:relative;left:auto;right:auto;top:auto;margin:40px auto 0}
}

/* Selected works: the page ends inside the keyring section, so its own moving sky simply carries on
   behind the glass (no separate picture, no sticky curtain here) */
.sky-end.peek-end{position:relative;z-index:5;min-height:calc(600 * var(--u));padding:calc(220 * var(--u)) calc(112 * var(--u)) calc(220 * var(--u));background:none;isolation:auto}
.sky-end.peek-end::before{display:none}
@media (max-width:760px){.sky-end.peek-end{min-height:320px;padding:140px 16px 110px}}
/* over the pale drifting clouds the glass needs a touch of blue so the white words stay readable */
.peek-end .sky-glass{background:linear-gradient(170deg,rgba(255,255,255,.2) 0%,rgba(46,134,200,.14) 55%,rgba(46,134,200,.2) 100%)}
.peek-end .sky-glass p{text-shadow:0 1px calc(14 * var(--u)) rgba(0,48,110,.5)}

/* the glass always sits on top of everything in its section, also while it is pulled */
.sky-glass{z-index:5}
/* the drifting sky is two pictures side by side; overlap them a hair so no seam line shows */
.sky-drift .skytrack img+img{margin-left:-2px}

/* ---- real boards in a case study (Sadeem, Oct 26) */
.cs-cover.has-img{background:#e9e6f7;overflow:hidden}
.cs-cover.has-img img{display:block;width:100%;height:100%;object-fit:cover}
.cs-figs{display:grid;gap:calc(28 * var(--u));margin:calc(8 * var(--u)) 0 calc(56 * var(--u))}
.cs-figs.two{grid-template-columns:1fr 1fr;align-items:start}
.cs-figs.narrow{max-width:calc(1000 * var(--u));margin-left:calc(412 * var(--u))}
.cs-figs.pair{grid-template-columns:minmax(0,1fr) calc(380 * var(--u));align-items:stretch}
.pr-main{display:grid;gap:calc(28 * var(--u));align-content:start}
.cs-fig.phone{display:flex;flex-direction:column;min-height:0}
.ph-scroll{position:relative;flex:1 1 0;min-height:calc(420 * var(--u));overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ph) 40%,transparent) transparent;border-radius:calc(18 * var(--u))}
.ph-scroll img{position:absolute;top:0;left:0;right:0;margin-inline:auto;width:100%;height:auto}
.cs-fig img[style]{margin-inline:auto}
.ph-scroll:focus-visible{outline:2px solid var(--ph);outline-offset:4px}
.cs-fig{margin:0;padding:calc(20 * var(--u));background:#fff;border-radius:calc(32 * var(--u));box-shadow:0 calc(24 * var(--u)) calc(70 * var(--u)) calc(-40 * var(--u)) rgba(41,72,14,.28),0 0 0 1px rgba(41,72,14,.06)}
.cs-fig img,.cs-fig video{display:block;width:100%;height:auto;border-radius:calc(18 * var(--u))}
.cs-fig figcaption{margin:calc(16 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u));font:400 calc(18 * var(--u))/1.45 var(--sans);color:var(--moss)}
.cs-vid video{background:#dcd6f6}
.awr-tile.pic{width:auto;background:transparent;border-radius:calc(14 * var(--u))}
.awr-tile.pic img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .cs-figs{gap:12px;margin:4px 0 28px}.cs-figs.two{grid-template-columns:1fr}
  .cs-fig{padding:8px;border-radius:18px}.cs-fig img,.cs-fig video{border-radius:12px}
  .cs-fig figcaption{margin:10px 4px 2px;font-size:13px}
  .awr-tile.pic{border-radius:8px}
}

/* stats: one row for however many there are (Sadeem has four) */
.cs-stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:760px){.cs-stats{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
/* boards sit straight on the page (Doha, Oct 26): no white card, and the white inside each picture
   takes the page's beige. Multiply turns white into exactly --cream and leaves colours almost as they are;
   the figure carries the cream itself so the blend works even mid-reveal. */
.cs-fig{padding:0;background:var(--cream);border-radius:0;box-shadow:none}
.cs-fig img,.cs-fig video{mix-blend-mode:multiply;border-radius:0}
.cs-fig figcaption{margin:calc(12 * var(--u)) 0 0}
@media (max-width:760px){.cs-fig{padding:0;border-radius:0}.cs-fig img,.cs-fig video{border-radius:0}.cs-fig figcaption{margin:8px 0 0}}

/* ---- Maaliy (Oct 26): two-column pairs, board callouts as text, type specimens */
.cs-pairs.two li{grid-template-columns:1fr 1fr}
.cs-notes{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-type{list-style:none;margin:calc(8 * var(--u)) 0 calc(56 * var(--u));padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(28 * var(--u))}
.cs-type li{display:flex;flex-direction:column;gap:calc(6 * var(--u));padding:calc(28 * var(--u)) 0;border-top:1px solid rgba(41,72,14,.25)}
.cs-type .ty-aa{font-size:calc(150 * var(--u));line-height:1;font-weight:700;color:#14101f;margin-bottom:calc(18 * var(--u))}
.cs-type b{font:500 calc(24 * var(--u))/1.2 var(--sans)}
.cs-type small{font:400 calc(17 * var(--u))/1.4 var(--sans);color:var(--moss)}
.cs-type .ty-s{margin-top:calc(14 * var(--u));font-size:calc(22 * var(--u));line-height:1.5;color:#3a3550;overflow-wrap:anywhere}
@media (max-width:760px){
  .cs-pairs.two li{grid-template-columns:1fr}
  .cs-notes{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;list-style:none;margin:-16px 0 28px;padding:0;display:grid;gap:8px}
  .cs-notes li{font:400 14px/1.45 var(--sans);color:var(--moss);padding-left:12px;border-left:2px solid var(--ph,#522E93)}
  .cs-notes b{color:var(--leaf);font-weight:600}
  .cs-type{grid-template-columns:1fr;gap:0;margin-bottom:28px}.cs-type li{padding:18px 0}
  .cs-type .ty-aa{font-size:72px;margin-bottom:8px}.cs-type b{font-size:17px}.cs-type small{font-size:12px}.cs-type .ty-s{font-size:15px}
}
.cs-type [dir=rtl]{text-align:left}

/* ---- case pages as analysis (Oct 26): problem → process → solution → result */
/* the outline sticks under the top edge while you read, and marks where you are */
/* the outline sits in the header row, between the name and Back, above the scroll blur band (z 65) */
.cs-jump{position:sticky;top:calc(calc(32 * var(--u)) + 22px - (calc(16 * var(--u)) + 22px));z-index:70;width:max-content;max-width:100%;margin:0 0 calc(40 * var(--u));padding:calc(8 * var(--u));gap:calc(6 * var(--u));border-radius:999px;
  background:rgba(255,254,235,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(41,72,14,.14),0 calc(14 * var(--u)) calc(36 * var(--u)) calc(-22 * var(--u)) rgba(41,72,14,.45)}
.cs-jump a{gap:calc(10 * var(--u));border:0;min-height:44px;transition:background-color .25s,color .25s}
.cs-jump a i{display:inline-grid;place-items:center;width:calc(26 * var(--u));height:calc(26 * var(--u));min-width:20px;min-height:20px;border-radius:50%;font:500 calc(14 * var(--u))/1 var(--narrow);font-style:normal;box-shadow:inset 0 0 0 1px currentColor;opacity:.7}
.cs-jump a.on{background:var(--ph,var(--leaf));color:#fff}
.cs-jump a.on i{opacity:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.cs-lead{margin:calc(28 * var(--u)) 0 0!important;max-width:34ch!important;font:500 calc(40 * var(--u))/1.2 var(--sans)!important;letter-spacing:-.025em!important;text-wrap:balance}
.cs-goals{list-style:none;margin:calc(36 * var(--u)) 0 0;padding:0;display:grid;gap:calc(14 * var(--u));counter-reset:gl}
.cs-goals li{counter-increment:gl;display:grid;grid-template-columns:calc(64 * var(--u)) minmax(0,1fr);align-items:baseline;padding:calc(22 * var(--u)) calc(26 * var(--u));border-radius:calc(16 * var(--u));background:#fff;box-shadow:0 0 0 1px rgba(41,72,14,.1);font:400 calc(24 * var(--u))/1.45 var(--sans)}
.cs-goals li::before{content:counter(gl);font:500 calc(40 * var(--u))/1 var(--sans);color:var(--ph,var(--leaf));letter-spacing:-.04em}
.cs-scen{list-style:none;margin:calc(36 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(330 * var(--u)),1fr));gap:calc(16 * var(--u))}
.cs-scen li{padding:calc(24 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u));border-radius:calc(16 * var(--u));background:#fff;box-shadow:0 0 0 1px rgba(41,72,14,.1)}
.cs-scen small{display:block;font:500 calc(15 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;color:var(--ph,var(--moss))}
.cs-scen p{margin:calc(14 * var(--u)) 0 0!important;font:400 calc(21 * var(--u))/1.45 var(--sans)!important}
.cs-options{list-style:none;margin:calc(36 * var(--u)) 0 0;padding:0;display:grid;gap:calc(16 * var(--u))}
.cs-options li{padding:calc(24 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u));border-radius:calc(16 * var(--u));background:#fff;box-shadow:0 0 0 1px rgba(41,72,14,.1)}
.cs-options li.op-chosen{box-shadow:0 0 0 2px var(--ph,var(--leaf))}
.cs-options .op-top{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u))}
.cs-options b{font:500 calc(24 * var(--u))/1.25 var(--sans)}
.cs-options .op-tag{flex:none;padding:calc(6 * var(--u)) calc(14 * var(--u));border-radius:999px;font:500 calc(14 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase}
.op-rejected .op-tag{background:rgba(125,28,48,.1);color:#8a2a3b}
.op-chosen .op-tag{background:var(--ph,var(--leaf));color:#fff}
.cs-options p{margin:calc(12 * var(--u)) 0 0!important;font:400 calc(21 * var(--u))/1.5 var(--sans)!important}
.cs-options .op-why{color:var(--moss)}
.op-rejected b,.op-rejected p:not(.op-why){opacity:.75}
.cs-chal{margin:calc(40 * var(--u)) 0 0;padding:calc(30 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));border-radius:calc(20 * var(--u));background:#fff8e6;box-shadow:inset 0 0 0 1px rgba(196,140,20,.28)}
.cs-chal .ch-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:calc(10 * var(--u));margin:0!important;max-width:none!important;font:400 calc(24 * var(--u))/1.4 var(--sans)!important}
.cs-chal .ch-h svg{width:calc(24 * var(--u));height:calc(24 * var(--u));min-width:18px;min-height:18px;color:#b47a06;align-self:center}
.cs-chal .ch-h b{font-weight:600;color:#7a5200}
.cs-chal ol{margin:calc(18 * var(--u)) 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:calc(12 * var(--u))}
.cs-chal li{counter-increment:st;display:grid;grid-template-columns:calc(44 * var(--u)) minmax(0,1fr);font:400 calc(20 * var(--u))/1.5 var(--sans)}
.cs-chal li::before{content:counter(st);display:grid;place-items:center;width:calc(30 * var(--u));height:calc(30 * var(--u));min-width:22px;min-height:22px;border-radius:50%;background:#f2dfae;color:#7a5200;font:600 calc(14 * var(--u))/1 var(--sans)}
.cs-ba{margin:calc(36 * var(--u)) 0 0;border-radius:calc(16 * var(--u));overflow:hidden;box-shadow:0 0 0 1px rgba(41,72,14,.12);background:#fff}
.cs-ba .ba-r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:calc(24 * var(--u));padding:calc(18 * var(--u)) calc(26 * var(--u));border-top:1px solid rgba(41,72,14,.1);font:400 calc(19 * var(--u))/1.45 var(--sans)}
.cs-ba .ba-h{border-top:0;background:rgba(41,72,14,.04);font:500 calc(14 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}
.cs-ba b{font-weight:500}
.cs-ba .ba-b{color:#7b6f6f;text-decoration:line-through;text-decoration-color:rgba(125,28,48,.35)}
.cs-ba .ba-a{color:var(--leaf)}
.cs-measure{list-style:none;margin:calc(36 * var(--u)) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(330 * var(--u)),1fr));gap:calc(16 * var(--u))}
.cs-measure li{padding:calc(24 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));border-radius:calc(16 * var(--u));background:#fff;box-shadow:0 0 0 1px rgba(41,72,14,.1)}
.cs-measure small{font:500 calc(14 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}
.cs-measure b{display:block;margin-top:calc(12 * var(--u));font:500 calc(23 * var(--u))/1.3 var(--sans)}
.cs-measure p{margin:calc(10 * var(--u)) 0 0!important;font:400 calc(19 * var(--u))/1.5 var(--sans)!important}
.cs-measure .ms-t{color:var(--leaf)}.cs-measure .ms-t span{font-weight:600}
@media (max-width:760px){
  .cs-jump{top:62px;width:100%;justify-content:space-between;padding:4px;gap:2px;margin-bottom:20px}
  .cs-jump a{padding:0 10px;font-size:13px;gap:6px;flex:1;justify-content:center}.cs-jump a i{display:none}
  .cs-lead{font-size:21px!important;margin-top:14px!important}
  .cs-goals{margin-top:18px;gap:8px}.cs-goals li{grid-template-columns:30px 1fr;padding:14px 16px;font-size:15px;border-radius:12px}.cs-goals li::before{font-size:22px}
  .cs-scen{margin-top:18px;grid-template-columns:1fr;gap:8px}.cs-scen li{padding:14px 16px;border-radius:12px}.cs-scen small{font-size:11px}.cs-scen p{font-size:15px!important;margin-top:8px!important}
  .cs-options{margin-top:18px;gap:8px}.cs-options li{padding:14px 16px;border-radius:12px}.cs-options b{font-size:16px}.cs-options .op-tag{font-size:10px;padding:5px 10px}.cs-options p{font-size:14px!important}
  .cs-chal{margin-top:20px;padding:16px;border-radius:14px}.cs-chal .ch-h{font-size:16px!important}.cs-chal li{grid-template-columns:32px 1fr;font-size:14px}
  .cs-ba{margin-top:18px}.cs-ba .ba-h{display:none}.cs-ba .ba-r{grid-template-columns:1fr;gap:4px;padding:14px 16px;font-size:14px}
  .cs-ba .ba-b::before{content:"Before: ";text-decoration:none;display:inline-block;font-weight:600;color:#8a2a3b}.cs-ba .ba-a::before{content:"After: ";font-weight:600}
  .cs-measure{margin-top:18px;grid-template-columns:1fr;gap:8px}.cs-measure li{padding:14px 16px;border-radius:12px}.cs-measure b{font-size:16px}.cs-measure p{font-size:14px!important}
}
.cs-jump{margin-left:auto;margin-right:auto}

/* ---- header (Figma "new header" 513:54, Oct 26): avatar + name left, compass + current page right */
.nhdr{position:fixed;z-index:90;top:0;left:0;right:0;height:calc(calc(32 * var(--u)) + 44px);padding:calc(32 * var(--u)) calc(112 * var(--u)) 0;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;pointer-events:none;color:var(--cream)}
.nhdr > *{pointer-events:auto}
.nh-me{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-height:44px;transition:opacity .35s,transform .45s var(--ease-out)}
.nh-me img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1.5px rgba(255,254,235,.85),0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(2,21,28,.25);transition:transform .5s var(--spring)}
.nh-me:hover img{transform:rotate(-8deg) scale(1.06)}
.nh-name{position:relative;display:inline-flex;align-items:center;font:400 16px/1.2 "Architects Daughter",cursive;white-space:nowrap;text-shadow:0 1px calc(10 * var(--u)) rgba(2,21,28,.35)}
/* typewriter: each letter arrives in turn and fades up out of a soft blur, the caret riding just behind */
.nh-name .tw span{display:inline-block;white-space:pre;opacity:0;filter:blur(3px);transform:translateY(calc(3 * var(--u)));transition:opacity .38s ease-out,filter .38s ease-out,transform .5s var(--ease-out)}
.nh-name .tw span.on{opacity:1;filter:none;transform:none}
.nh-name .caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;opacity:0;border-radius:1px}
.nh-name.typing .caret{opacity:1;animation:caretBlink .9s steps(1) infinite}
.nh-name.typed .caret{opacity:0;transition:opacity .6s}
@keyframes caretBlink{50%{opacity:0}}
.nh-compass{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;cursor:pointer;font:400 16px/1 var(--sans);letter-spacing:-.02em;text-shadow:0 1px calc(10 * var(--u)) rgba(2,21,28,.35)}
.nh-compass .cmp{width:20px;height:20px;flex:none;overflow:visible}
.nh-compass .cmp-n{transform-origin:10px 10px;transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
.nh-compass:hover .cmp-n{transform:rotate(-35deg)}
.site[data-compass] .nh-compass .cmp-n{transform:rotate(315deg)}
.nh-cur{display:inline-block}
.nh-compass:focus-visible,.nh-me:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}
/* on the cream pages the header turns leaf green; the name steps aside where a page has its own back button */
.site[data-dive] .nhdr,.site[data-mode="works"] .nhdr,.site[data-mode="all"] .nhdr,.site[data-mode="case"] .nhdr{color:var(--leaf)}
.site[data-dive] .nh-name,.site[data-mode="works"] .nh-name,.site[data-mode="all"] .nh-name,.site[data-mode="case"] .nh-name,
.site[data-dive] .nh-compass,.site[data-mode="works"] .nh-compass,.site[data-mode="all"] .nh-compass,.site[data-mode="case"] .nh-compass{text-shadow:none}
.nh-me img,.nh-compass{transition:opacity .6s ease,transform .5s var(--spring)}

/* ---- compass menu: the page blurs away and two columns of cards drop in at the top right */
.compass{position:fixed;inset:0;z-index:120}
.compass[hidden]{display:none}
.cp-scrim{position:absolute;inset:0;background:rgba(14,24,10,.32);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);opacity:0;transition:opacity .38s ease}
.site[data-compass] .cp-scrim{opacity:1}
.cp-wrap{position:absolute;top:calc(24 * var(--u));right:calc(96 * var(--u));display:flex;align-items:flex-start;gap:calc(12 * var(--u));max-height:calc(100% - calc(48 * var(--u)))}
.cp-side{display:flex;flex-direction:column;gap:calc(12 * var(--u));width:calc(230 * var(--u))}
.cp-main{display:flex;flex-direction:column;gap:calc(12 * var(--u));width:calc(360 * var(--u))}
.cp-card{position:relative;margin:0;border-radius:calc(16 * var(--u));background:var(--cream);color:var(--leaf);box-shadow:0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-24 * var(--u)) rgba(10,20,6,.45),0 0 0 1px rgba(41,72,14,.08);
  opacity:0;transform:translateY(calc(-14 * var(--u))) scale(.97);transition:opacity .35s ease,transform .6s var(--spring)}
.site[data-compass] .cp-card,.site[data-compass] .cp-cta{opacity:1;transform:none}
.site[data-compass] .cp-menu{transition-delay:.02s}.site[data-compass] .cp-pic{transition-delay:.08s}.site[data-compass] .cp-note{transition-delay:.14s}.site[data-compass] .cp-cta{transition-delay:.1s}
.cp-pic{overflow:hidden;aspect-ratio:230/180;padding:calc(6 * var(--u))}
.cp-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:calc(11 * var(--u))}
.cp-note{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:calc(290 * var(--u));padding:calc(26 * var(--u)) calc(22 * var(--u)) calc(80 * var(--u));text-align:center;overflow:hidden}
.cp-note p{margin:0;font:400 calc(27 * var(--u))/1.25 "Architects Daughter",cursive;color:var(--maroon);transform:rotate(-2deg)}
.cp-note img{position:absolute;right:calc(12 * var(--u));bottom:calc(-8 * var(--u));width:calc(86 * var(--u));transform:rotate(12deg);filter:drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.18));transition:transform .5s var(--spring);cursor:pointer}
.cp-note:hover img{transform:rotate(-4deg) translateY(calc(-6 * var(--u)))}
.cp-menu{padding:calc(30 * var(--u)) calc(34 * var(--u)) calc(26 * var(--u))}
.cp-lbl{margin:0 0 calc(18 * var(--u));font:500 calc(14 * var(--u))/1 var(--narrow);letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.cp-x{position:absolute;top:calc(14 * var(--u));right:calc(14 * var(--u));width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--leaf);cursor:pointer;transition:background .25s,transform .4s var(--spring)}
.cp-x svg{width:calc(22 * var(--u));height:calc(22 * var(--u));min-width:18px;min-height:18px}
.cp-x:hover{background:rgba(41,72,14,.08);transform:rotate(90deg)}
.cp-nav{display:flex;flex-direction:column;align-items:flex-start;gap:calc(2 * var(--u))}
.cp-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--leaf);text-decoration:none;font:400 calc(38 * var(--u))/1.1 var(--sans);letter-spacing:-.03em;transition:transform .35s var(--ease-out),color .25s}
.cp-nav a::before{content:"";position:absolute;left:calc(-16 * var(--u));top:50%;width:calc(7 * var(--u));height:calc(7 * var(--u));margin-top:calc(-3.5 * var(--u));border-radius:50%;background:var(--maroon);transform:scale(0);transition:transform .35s var(--spring)}
.cp-nav a:hover{transform:translateX(calc(8 * var(--u)))}
.cp-nav a[aria-current="page"]::before{transform:scale(1)}
.cp-nav a[aria-current="page"]{color:var(--maroon)}
.cp-rule{height:1px;margin:calc(18 * var(--u)) 0 calc(14 * var(--u));background:rgba(41,72,14,.16)}
.cp-social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cp-social a{display:inline-flex;align-items:center;min-height:36px;color:var(--leaf);text-decoration:none;font:500 calc(15 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;opacity:.85;transition:opacity .2s}
.cp-social a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.cp-sound{display:flex;align-items:center;justify-content:space-between;margin-top:calc(12 * var(--u));padding-top:calc(12 * var(--u));border-top:1px solid rgba(41,72,14,.12);font:400 calc(16 * var(--u))/1 var(--sans);color:var(--moss)}
.cp-sound .sound{box-shadow:0 0 0 1px rgba(41,72,14,.16)}
.cp-cta{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));min-height:48px;height:calc(56 * var(--u));border-radius:calc(14 * var(--u));background:var(--leaf);color:var(--cream);text-decoration:none;font:500 calc(18 * var(--u))/1 var(--narrow);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-20 * var(--u)) rgba(10,20,6,.55);opacity:0;transform:translateY(calc(-14 * var(--u)));transition:opacity .35s ease,transform .6s var(--spring),background-color .25s}
.cp-cta svg{width:calc(20 * var(--u));height:calc(20 * var(--u));min-width:16px;min-height:16px;transition:transform .35s var(--spring)}
.cp-cta:hover{background:#1f3a0a}.cp-cta:hover svg{transform:translate(3px,-3px)}
.cp-nav a:focus-visible,.cp-social a:focus-visible,.cp-cta:focus-visible,.cp-x:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.cp-card,.cp-cta,.cp-scrim,.nh-name .tw span{transition:none}.nh-compass .cmp-n{transition:none}}
@media (max-width:760px){
  .nhdr{top:12px;left:16px;right:12px}
  .nh-name{font-size:16px}.nh-compass{font-size:16px;gap:8px}.nh-compass .cmp{width:20px;height:20px}
  .cp-wrap{top:10px;left:10px;right:10px;flex-direction:column-reverse;gap:8px;overflow:auto;max-height:calc(100% - 20px);border-radius:16px}
  .cp-main,.cp-side{width:100%;gap:8px}
  .cp-side{flex-direction:row}
  .cp-pic,.cp-note{flex:1;min-height:0}
  .cp-pic{aspect-ratio:auto;height:150px}.cp-note{height:150px;padding:14px 12px 40px}.cp-note p{font-size:17px}.cp-note img{width:56px}
  .cp-card{border-radius:14px}.cp-menu{padding:20px 20px 16px}.cp-lbl{font-size:12px;margin-bottom:10px}
  .cp-nav a{font-size:28px}.cp-social a{font-size:13px}.cp-sound{font-size:14px}
  .cp-cta{height:52px;font-size:15px;border-radius:12px}
}
.nh-cur{transition:opacity .17s ease,transform .26s var(--ease-out)}.nh-cur.out{opacity:0;transform:translateY(-6px)}
@media (max-width:760px){.nh-me img{width:30px;height:30px}.nh-me{gap:8px}}

/* ---- compass menu motion pass (interaction-design, Oct 26)
   enter: cards grow out of the top-right corner, where the compass is (continuity), with a spring;
          the menu links follow 40 ms apart (stagger); exit: ~60% of the enter time, ease-in, no stagger */
.cp-card,.cp-cta{transform-origin:100% 0;transform:translateY(-10px) scale(.94)}
.site[data-cpout] .cp-card,.site[data-cpout] .cp-cta{transition:opacity .16s cubic-bezier(.55,0,1,.45),transform .22s cubic-bezier(.55,0,1,.45)!important;transition-delay:0s!important}
.site[data-cpout] .cp-scrim{transition:opacity .22s cubic-bezier(.55,0,1,.45)}
.cp-nav a{opacity:0;translate:0 10px;transition:opacity .3s ease,translate .5s var(--ease-out),transform .35s var(--ease-out),color .25s}
.site[data-compass] .cp-nav a{opacity:1;translate:0 0;transition-delay:calc(.12s + var(--i,0) * 40ms),calc(.12s + var(--i,0) * 40ms),0s,0s}
.site[data-cpout] .cp-nav a{opacity:0;transition-duration:.12s;transition-delay:0s}
/* hover previews the dot the current page wears */
.cp-nav a:hover::before{transform:scale(.55)}
.cp-nav a[aria-current="page"]:hover::before{transform:scale(1)}
/* press feedback: a quick squeeze under the finger or click */
.nh-compass .cmp{transition:scale .12s ease-out}.nh-compass:active .cmp{scale:.88}
.nh-me:active img{scale:.94}
.cp-x:active{scale:.9}
.cp-cta{transition:opacity .35s ease,transform .6s var(--spring),background-color .25s,scale .12s ease-out}.cp-cta:active{scale:.98}
.cp-nav a:active{scale:.98}
@media (prefers-reduced-motion:reduce){.cp-nav a{opacity:1;translate:none;transition:none}.cp-card,.cp-cta{transform:none}}

/* ---- header stays on every page (Oct 26): the pages' own back buttons sit just below it */
/* on desktop the page's back button joins the header row, just right of the name */
.wp-bar{top:calc(calc(32 * var(--u)) - 2px);left:calc(calc(112 * var(--u)) + 212px)}
.c-close{top:calc(calc(32 * var(--u)) + 22px);left:calc(calc(112 * var(--u)) + 212px);transform:translateY(-50%)}
/* ...and once a page scrolls, a soft band of blur fades in behind the header. It lives inside each
   scrolling page (sticky at its top), so it blurs that page's content but stays under the page's own
   back button, while the header text floats above it */
.works-page::before,.all-works::before,.case-page::before,.contact-page::before{content:"";position:sticky;top:0;display:block;z-index:65;height:calc(calc(32 * var(--u)) + 44px + calc(40 * var(--u)) + 16px);margin-bottom:calc(-1 * (calc(32 * var(--u)) + 44px + calc(40 * var(--u)) + 16px));
  pointer-events:none;opacity:0;transition:opacity .35s ease;background:transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 45%,rgba(0,0,0,.6) 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 45%,rgba(0,0,0,.6) 70%,transparent 100%)}
.site[data-hscroll][data-mode="works"] .works-page::before,.site[data-hscroll][data-mode="all"] .all-works::before,
.site[data-hscroll][data-mode="case"] .case-page::before,.site[data-hscroll][data-mode="contact"] .contact-page::before{opacity:1;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
@media (max-width:760px){
  .nhdr{top:0;left:0;right:0;height:56px;padding:12px 12px 0 16px}
  .works-page::before,.all-works::before,.case-page::before,.contact-page::before{height:84px;margin-bottom:-84px}
  .wp-bar,.c-close{top:68px;left:16px}
}
.wp-bar,.c-close{z-index:95}

/* name wave on hover: each letter lifts and tilts by its distance from the pointer */
.nh-name .tw span{translate:0 var(--wy,0px);rotate:var(--wr,0deg);transform-origin:50% 80%;
  transition:opacity .38s ease-out,filter .38s ease-out,transform .5s var(--ease-out),translate .32s var(--spring),rotate .32s var(--spring)}
/* All works: once the maroon list slides under the clear blur, the header reads in cream */
.site[data-mode="all"][data-hscroll] .nhdr{color:var(--cream)}
.site[data-mode="all"][data-hscroll] .nh-name,.site[data-mode="all"][data-hscroll] .nh-compass{text-shadow:0 1px 8px rgba(40,6,14,.35)}
.nhdr{transition:color .3s ease}

/* ---- project pages (Oct 26): the compass turns into a back arrow; the pages' own back buttons are gone */
.wp-bar,.cs-bar .cs-back{display:none!important}
.cs-bar{justify-content:flex-end}
.nh-compass .cmp-b{opacity:0;transform:translateX(3px);transform-origin:10px 10px;transition:opacity .25s ease,transform .45s var(--spring)}
.nh-compass .cmp-n{transition:transform .9s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.site[data-mode="case"] .nh-compass .cmp-n{opacity:0;transform:rotate(-135deg) scale(.4)}
.site[data-mode="case"] .nh-compass .cmp-b{opacity:1;transform:none}
.site[data-mode="case"] .nh-compass:hover .cmp-b{transform:translateX(-2px)}

/* caret follows the typing (positioned by world.js) */
.nh-name .caret{position:absolute;left:0;top:50%;margin:0;transform:translate(0,-50%);transition:opacity .6s}

/* ---------------------------- case blocks: goal tiers, competitors, IA (Dhi, Oct 28) */
.cs-tiers{margin:calc(36 * var(--u)) 0 0;display:grid;gap:calc(28 * var(--u))}
.ct-h{margin:0 0 calc(12 * var(--u))!important;font:500 calc(14 * var(--u))/1.2 var(--narrow)!important;text-transform:uppercase;letter-spacing:.1em;color:var(--moss)}
.cs-tiers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(10 * var(--u))}
.cs-tiers li{padding:calc(12 * var(--u)) calc(20 * var(--u));border-radius:999px;border:1px solid rgba(41,72,14,.28);background:#fff;font:500 calc(19 * var(--u))/1.2 var(--sans)}
.cs-tiers li.on{background:var(--leaf);border-color:var(--leaf);color:var(--cream)}
.cs-compete{margin:calc(40 * var(--u)) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(16 * var(--u))}
.cs-compete .cc{border-radius:calc(20 * var(--u));background:#fff;border:1px solid rgba(41,72,14,.12);overflow:hidden;display:flex;flex-direction:column}
.cs-compete header{display:flex;align-items:baseline;justify-content:space-between;gap:calc(12 * var(--u));padding:calc(24 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u));border-bottom:1px solid rgba(41,72,14,.1)}
.cs-compete header b{font:500 calc(34 * var(--u))/1 var(--sans);letter-spacing:-.03em}
.cs-compete header small{font:500 calc(14 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.cc-col{padding:calc(20 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u))}
.cc-col p{margin:0 0 calc(10 * var(--u))!important;font:500 calc(14 * var(--u))/1.2 var(--narrow)!important;text-transform:uppercase;letter-spacing:.1em}
.cc-s p{color:#2E6B3F}.cc-w p{color:#7D1B30}
.cc-w{background:color-mix(in srgb,#7D1B30 5%,#fff);flex:1}
.cc-col ul{margin:0;padding:0 0 0 1.1em;display:grid;gap:calc(6 * var(--u));font:400 calc(18 * var(--u))/1.45 var(--sans)}
.cc-s li::marker{color:#2E6B3F}.cc-w li::marker{color:#7D1B30}
.cs-ia{margin:calc(40 * var(--u)) 0 0}
.ia-entry{list-style:none;margin:0 0 calc(24 * var(--u));padding:0;display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));counter-reset:none}
.ia-entry li{padding:calc(10 * var(--u)) calc(16 * var(--u));border-radius:999px;background:#fff;border:1px solid rgba(41,72,14,.18);font:500 calc(16 * var(--u))/1 var(--sans)}
.ia-entry li:not(:last-child)::after{content:"\2192";margin-inline-start:calc(10 * var(--u));color:var(--moss)}
.ia-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(12 * var(--u));align-items:start}
.ia-tab{border-radius:calc(16 * var(--u));background:#fff;border:1px solid rgba(41,72,14,.12);padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u))}
.ia-tab h4{display:flex;align-items:center;gap:calc(10 * var(--u));margin:0 0 calc(14 * var(--u));padding-bottom:calc(12 * var(--u));border-bottom:1px solid rgba(41,72,14,.12);font:500 calc(22 * var(--u))/1.1 var(--sans);letter-spacing:-.02em}
.ia-tab h4 i{display:grid;place-items:center;width:calc(28 * var(--u));height:calc(28 * var(--u));border-radius:50%;background:var(--ph);color:var(--leaf);font:600 calc(14 * var(--u))/1 var(--narrow);font-style:normal}
.ia-tab ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(6 * var(--u));font:400 calc(16 * var(--u))/1.35 var(--sans)}
.ia-tab ul ul{margin-top:calc(6 * var(--u));padding-inline-start:calc(12 * var(--u));border-inline-start:2px solid color-mix(in srgb,var(--ph) 60%,#fff);font-size:calc(15 * var(--u));color:rgba(41,72,14,.82)}
.ia-sub>b{font-weight:600}
.ia-grp+.ia-grp{margin-top:calc(14 * var(--u))}
.ia-grp p{margin:0 0 calc(8 * var(--u))!important;font:500 calc(13 * var(--u))/1.2 var(--narrow)!important;text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
/* clean product screen + numbered decisions + takeaway (Maaliy, Oct 28) */
.cs-screen{display:grid;grid-template-columns:minmax(0,calc(800 * var(--u))) minmax(0,1fr);gap:calc(64 * var(--u));align-items:start;margin:calc(8 * var(--u)) 0 calc(64 * var(--u)) calc(412 * var(--u))}
.sc-fig{margin:0;padding:calc(36 * var(--u));border-radius:calc(32 * var(--u));background:radial-gradient(120% 90% at 30% 15%,color-mix(in srgb,var(--ph) 11%,#fff),#fff 72%);box-shadow:0 calc(24 * var(--u)) calc(70 * var(--u)) calc(-40 * var(--u)) rgba(41,72,14,.22),0 0 0 1px rgba(41,72,14,.06)}
.sc-fig img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(24 * var(--u)) calc(32 * var(--u)) rgba(30,16,60,.18))}
.sc-side{position:sticky;top:calc(170 * var(--u))}
.sc-fig .sc-2{margin-top:calc(28 * var(--u))}
.cs-screen.no-img{grid-template-columns:minmax(0,calc(860 * var(--u)))}.no-img .sc-side{position:static}
.sc-lbl{margin:0 0 calc(18 * var(--u))!important;font:500 calc(14 * var(--u))/1.2 var(--narrow)!important;text-transform:uppercase;letter-spacing:.1em;color:var(--moss)}
.sc-notes{list-style:none;margin:0;padding:0;counter-reset:sc;display:grid;gap:calc(4 * var(--u))}
.sc-notes li{counter-increment:sc;display:grid;grid-template-columns:calc(44 * var(--u)) 1fr;column-gap:calc(14 * var(--u));padding:calc(16 * var(--u)) 0;border-top:1px solid rgba(41,72,14,.12)}
.sc-notes li::before{content:counter(sc,decimal-leading-zero);grid-row:span 2;display:grid;place-items:center;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;background:color-mix(in srgb,var(--ph) 12%,#fff);color:var(--ph);font:600 calc(14 * var(--u))/1 var(--narrow)}
.sc-notes b{font:500 calc(21 * var(--u))/1.3 var(--sans);letter-spacing:-.015em;color:var(--leaf)}
.sc-notes span::first-letter{text-transform:uppercase}
.sc-notes span{margin-top:calc(4 * var(--u));font:400 calc(18 * var(--u))/1.5 var(--sans);color:rgba(41,72,14,.82)}
.sc-take{margin:calc(20 * var(--u)) 0 0!important;padding:calc(20 * var(--u)) calc(24 * var(--u));border-radius:calc(18 * var(--u));background:var(--ph);color:#fff;font:500 calc(21 * var(--u))/1.45 var(--sans)!important;letter-spacing:-.01em}
.sc-take small{display:block;margin-bottom:calc(8 * var(--u));font:500 calc(13 * var(--u))/1 var(--narrow);text-transform:uppercase;letter-spacing:.12em;opacity:.72}
/* flat IA: the sidebar as one numbered rail, depth as chips */
/* phone screens in a row + decisions (Dhi) */
.cs-phones{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,calc(300 * var(--u))));gap:calc(32 * var(--u));margin:calc(8 * var(--u)) 0 calc(40 * var(--u)) calc(412 * var(--u));align-items:start}
.cs-phones.n1{--n:1}.cs-phones.n2{--n:2}.cs-phones.n3{--n:3}.cs-phones.n4{--n:4}
.cs-phone{position:relative;margin:0}
.cs-phone img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(22 * var(--u)) calc(28 * var(--u)) rgba(27,77,62,.18))}
.cs-phone .ph-frame{aspect-ratio:640/1292;overflow-y:auto;scrollbar-width:none;border-radius:calc(44 * var(--u));filter:drop-shadow(0 calc(22 * var(--u)) calc(28 * var(--u)) rgba(27,77,62,.18))}
.cs-phone .ph-frame::-webkit-scrollbar{display:none}
.cs-phone .ph-frame img{filter:none}
.cs-phone .ph-frame:focus-visible{outline:2px solid var(--ph);outline-offset:4px}
.ph-hint{position:absolute;right:calc(10 * var(--u));top:calc(14 * var(--u));padding:calc(5 * var(--u)) calc(10 * var(--u));border-radius:999px;background:rgba(27,77,62,.82);color:#fff;font:500 calc(12 * var(--u))/1 var(--narrow);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.cs-phone figcaption{display:flex;gap:calc(8 * var(--u));align-items:baseline;margin:calc(16 * var(--u)) calc(4 * var(--u)) 0;font:400 calc(17 * var(--u))/1.4 var(--sans);color:var(--moss)}
.cs-phone figcaption i{font:600 calc(13 * var(--u))/1 var(--narrow);font-style:normal;color:var(--ph)}
.cs-phnotes{max-width:calc(1180 * var(--u));margin:0 0 calc(72 * var(--u)) calc(412 * var(--u))}
.cs-phnotes .sc-notes{grid-template-columns:1fr 1fr;column-gap:calc(40 * var(--u))}
.cs-phnotes .sc-take{background:color-mix(in srgb,var(--ph) 40%,#123326)}
@media (max-width:1300px){.cs-phones,.cs-phnotes{margin-left:0}}
@media (max-width:1100px){.cs-phones{grid-template-columns:repeat(min(var(--n,3),2),minmax(0,1fr))}.cs-phnotes .sc-notes{grid-template-columns:1fr}}
@media (max-width:760px){.cs-phones{gap:18px 14px;margin:4px 0 28px}.cs-phone figcaption{font-size:13px;margin-top:10px}.cs-phone .ph-frame{border-radius:26px}.ph-hint{font-size:10px}.cs-phnotes{margin:0 0 40px}}
.cs-figs.phonevid{max-width:calc(420 * var(--u));margin-left:calc(412 * var(--u))}
.cs-figs.phonevid .cs-fig{background:#0d0d0d;padding:calc(10 * var(--u));border-radius:calc(28 * var(--u))}
.cs-figs.phonevid video{border-radius:calc(20 * var(--u));mix-blend-mode:normal;background:#000}
.cs-figs.phonevid figcaption{color:rgba(255,255,255,.7);margin:calc(12 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u))}
@media (max-width:1300px){.cs-figs.phonevid{margin-left:0}}
@media (max-width:760px){.cs-figs.phonevid{max-width:300px;margin:4px auto 28px}}
.cs-iaf{margin:calc(40 * var(--u)) 0 0}
.iaf-cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:calc(20 * var(--u));align-items:start}
.iaf-rail{border-radius:calc(20 * var(--u));background:#fff;border:1px solid rgba(41,72,14,.12);overflow:hidden}
.iaf-rail header{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(4 * var(--u)) calc(12 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u));background:var(--ph);color:#fff}
.iaf-rail header b{font:500 calc(24 * var(--u))/1.1 var(--sans);letter-spacing:-.02em}
.iaf-rail header small{font:400 calc(16 * var(--u))/1.3 var(--sans);opacity:.78}
.iaf-count{margin-inline-start:auto;padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:999px;background:rgba(255,255,255,.16);font:500 calc(13 * var(--u))/1 var(--narrow);text-transform:uppercase;letter-spacing:.08em}
.iaf-rail ol{list-style:none;margin:0;padding:calc(6 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u))}
.iaf-rail li{display:grid;grid-template-columns:calc(36 * var(--u)) calc(230 * var(--u)) minmax(0,1fr);align-items:center;gap:calc(12 * var(--u));padding:calc(12 * var(--u));border-radius:calc(12 * var(--u))}
.iaf-rail li+li{border-top:1px solid rgba(41,72,14,.08)}
.iaf-rail li:hover{background:color-mix(in srgb,var(--ph) 5%,#fff)}
.iaf-rail li i{font:600 calc(14 * var(--u))/1 var(--narrow);font-style:normal;color:var(--ph)}
.iaf-rail li b{font:500 calc(19 * var(--u))/1.25 var(--sans);letter-spacing:-.01em;color:var(--leaf)}
.iaf-in{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u))}
.iaf-in em{padding:calc(6 * var(--u)) calc(11 * var(--u));border-radius:999px;background:color-mix(in srgb,var(--ph) 9%,#fff);color:color-mix(in srgb,var(--ph) 82%,#000);font:400 calc(15 * var(--u))/1.15 var(--sans);font-style:normal}
.iaf-in em.one{background:none;border:1px dashed rgba(41,72,14,.28);color:var(--moss)}
.iaf-aside{display:grid;gap:calc(20 * var(--u))}
.iaf-rail.portal header{background:color-mix(in srgb,var(--ph) 14%,#fff);color:var(--leaf)}
.iaf-rail.portal li{grid-template-columns:calc(36 * var(--u)) 1fr}
.iaf-bell{display:grid;grid-template-columns:calc(40 * var(--u)) 1fr;column-gap:calc(14 * var(--u));align-items:center;padding:calc(18 * var(--u)) calc(22 * var(--u));border-radius:calc(20 * var(--u));border:1px dashed rgba(41,72,14,.26)}
.iaf-bell svg{grid-row:span 2;width:calc(32 * var(--u));height:calc(32 * var(--u));color:var(--ph)}
.iaf-bell b{font:500 calc(19 * var(--u))/1.2 var(--sans);color:var(--leaf)}
.iaf-bell small{font:400 calc(15 * var(--u))/1.35 var(--sans);color:var(--moss)}
.iaf-note{margin:0!important;padding:calc(18 * var(--u)) calc(22 * var(--u));border-left:3px solid var(--ph);background:color-mix(in srgb,var(--ph) 6%,#fff);border-radius:0 calc(14 * var(--u)) calc(14 * var(--u)) 0;font:400 calc(18 * var(--u))/1.5 var(--sans)!important;color:var(--leaf)}
@media (max-width:1300px){.iaf-cols{grid-template-columns:1fr}.cs-screen{margin-left:0}}
@media (max-width:1100px){.cs-screen{grid-template-columns:1fr;gap:24px}.sc-side{position:static}}
@media (max-width:1100px){.ia-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .cs-compete{grid-template-columns:1fr}
  .cs-tiers li{font-size:15px;padding:9px 14px}
  .cc-col ul{font-size:15px}.cs-compete header b{font-size:26px}
  .ia-tabs{grid-template-columns:1fr}.ia-tab ul{font-size:15px}.ia-entry li{font-size:13px}
}

/* ---------------------------- personas as folder tabs (Dhi, Oct 28: from her persona boards) */
.cs-pers{margin:calc(44 * var(--u)) 0 0;max-width:calc(1100 * var(--u))}
.pr-tabs{display:flex;gap:calc(6 * var(--u));padding-inline-start:calc(24 * var(--u))}
.pr-tabs [role=tab]{appearance:none;border:0;cursor:pointer;position:relative;display:flex;align-items:baseline;gap:calc(12 * var(--u));min-height:44px;padding:calc(16 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u));border-radius:calc(22 * var(--u)) calc(22 * var(--u)) 0 0;
  background:transparent;color:rgba(41,72,14,.55);font:500 calc(26 * var(--u))/1 var(--sans);letter-spacing:-.02em;transition:color .2s,background-color .2s}
.pr-tabs [role=tab]:hover{color:var(--leaf)}
.pr-tabs [role=tab][aria-selected=true]{background:#fff;color:var(--leaf);box-shadow:0 -1px 0 rgba(41,72,14,.12),1px 0 0 rgba(41,72,14,.12),-1px 0 0 rgba(41,72,14,.12)}
.pr-tabs [role=tab]:focus-visible{outline:2px solid var(--leaf);outline-offset:-4px}
.pr-ar{font:600 calc(20 * var(--u))/1 "Almarai",var(--sans);opacity:.7}
.pr-card{border-radius:calc(24 * var(--u));background:#fff;border:1px solid rgba(41,72,14,.12);padding:calc(36 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));animation:prIn .35s cubic-bezier(.23,1,.32,1)}
@keyframes prIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pr-card header{display:flex;align-items:baseline;flex-wrap:wrap;gap:calc(10 * var(--u)) calc(18 * var(--u))}
.pr-card header b{font:500 calc(56 * var(--u))/1 var(--sans);letter-spacing:-.04em}
.pr-age{font:500 calc(15 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--moss)}
.pr-story{margin:calc(16 * var(--u)) 0 0!important;max-width:60ch;font:400 calc(22 * var(--u))/1.5 var(--sans)!important}
.pr-grid{margin-top:calc(28 * var(--u));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14 * var(--u))}
.pr-box{border:1px solid rgba(41,72,14,.16);border-radius:calc(18 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u))}
.pr-box small{display:block;margin-bottom:calc(10 * var(--u));font:500 calc(14 * var(--u))/1.2 var(--narrow);text-transform:uppercase;letter-spacing:.1em;color:var(--moss)}
.pr-goals small{color:#2E6B3F}.pr-pains small{color:#7D1B30}
.pr-box ul{margin:0;padding:0 0 0 1.1em;display:grid;gap:calc(6 * var(--u));font:400 calc(19 * var(--u))/1.45 var(--sans)}
.pr-goals li::marker{color:#2E6B3F}.pr-pains li::marker{color:#7D1B30}
.pr-chips{margin:0!important;display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.pr-chips span{padding:calc(8 * var(--u)) calc(16 * var(--u));border-radius:999px;background:color-mix(in srgb,var(--ph) 22%,#fff);font:500 calc(17 * var(--u))/1.2 var(--sans)}
@media (prefers-reduced-motion:reduce){.pr-card{animation:none}}
@media (max-width:760px){
  .pr-tabs{padding-inline-start:8px;gap:2px}.pr-tabs [role=tab]{padding:12px 14px 10px;font-size:17px;gap:6px}.pr-ar{display:none}
  .pr-card{padding:20px 18px 22px;border-radius:16px}.pr-card header b{font-size:34px}.pr-story{font-size:16px!important}
  .pr-grid{grid-template-columns:1fr;gap:10px}.pr-box ul{font-size:15px}.pr-chips span{font-size:14px}
  .pr-age{font-size:12px;flex-basis:100%}.pr-box small{font-size:12px}
}

/* slimmer outline bar (Oct 28, Doha): 44px tall, centred on the header row */
@media (min-width:761px){
  .cs-jump{top:calc(calc(32 * var(--u)) + 22px - 22px);height:44px;padding:4px;gap:2px;align-items:center}
  .cs-jump a{min-height:36px;height:36px;padding:0 calc(18 * var(--u));font-size:max(13px,calc(16 * var(--u)))}
  .cs-jump a i{width:max(18px,calc(22 * var(--u)));height:max(18px,calc(22 * var(--u)))}
}

@media (max-width:760px){
  .cs-screen{margin:4px 0 40px}.sc-fig{padding:14px;border-radius:20px}
  .sc-notes li{grid-template-columns:32px 1fr;padding:12px 0}.sc-notes li::before{width:26px;height:26px;font-size:11px}
  .sc-notes b{font-size:16px}.sc-notes span{font-size:14px}.sc-take{font-size:16px!important;padding:16px}.sc-take small{font-size:11px}
  .iaf-rail header{padding:16px}.iaf-rail header b{font-size:20px}.iaf-rail header small{font-size:13px}.iaf-count{margin-inline-start:0;font-size:11px}
  .iaf-rail ol{padding:4px 6px 8px}.iaf-rail li{grid-template-columns:26px 1fr;gap:6px 8px;padding:10px 8px}
  .iaf-rail li i{font-size:12px}.iaf-rail li b{font-size:16px}.iaf-in{grid-column:2}.iaf-in em{font-size:12.5px;padding:5px 9px}
  .iaf-bell b{font-size:16px}.iaf-bell small{font-size:13px}.iaf-note{font-size:15px!important}
}
@media (max-width:1100px){.cs-figs.narrow{margin-left:0}.cs-figs.pair{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:760px){.cs-figs.pair{grid-template-columns:1fr}.cs-figs.narrow{max-width:none}.ph-scroll{flex:none;height:70vh;max-width:340px;margin:0 auto;width:100%}}

/* ---- phone fixes (Nov 3): website layout untouched ---- */
@media (max-width:760px){
  /* project folders pile up as you scroll, like the desktop stack; works.js sets each one's top so its whole body is seen first */
  .folder:not(.see){position:sticky;top:var(--stick,0px)}
  /* the outline stays under the header while reading a case */
  .cs-jump{position:sticky;top:62px}
  /* the keyring sky: one plain layer on phones (the long drifting strip can fail to paint on iOS) */
  .peek-sky.sky-drift .skytrack{animation:none;transform:none;will-change:auto}
}
/* phones held upright: the hill is zoomed out so the cat, her, the headphones, the notebook and the laptop all fit;
   the painting sits on the bottom of the screen and its sky fades into the page sky above it */
@media (max-width:760px) and (orientation:portrait){
  .f-home .art{--W:max(100vw, calc(100vw / .41));--H:calc(var(--W) * var(--arh) / var(--arw));
    left:calc((100vw - var(--W)) * .9);top:calc(var(--vh) - var(--H))}   /* no mask here: the plate's own fade melts its top, and a mask on a layer that zooms is costly */
}
/* the same zoomed-out framing on the Selected works painting (upright phones only); About keeps its full-bleed framing */
@media (max-width:760px) and (orientation:portrait){
  .f-works .art{--W:max(100vw, calc(100vw / .41));--H:calc(var(--W) * var(--arh) / var(--arw));
    left:calc((100vw - var(--W)) * .77);top:calc(var(--vh) - var(--H));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}
}

/* =========================================================== the journal
   Clicking the notebook in the meadow opens a leather travel journal: two-page
   spreads of scrapbook collage (washi + paper tape, torn snippets, polaroids,
   handwriting, pressed flowers, stamps) that turn like real pages. J(n) is a
   design unit: one page is 800 x 1040 J. */
.journal{position:fixed;inset:0;z-index:72;visibility:hidden;pointer-events:none;--j:.5px;
  /* three faces only (Doha, Oct 24): Archivo for formal facts, Architects Daughter for handwriting, Special Elite for titles, labels and years */
  --jhand:"Architects Daughter","Segoe Print","Bradley Hand",cursive;--jnote:"Architects Daughter","Segoe Print","Bradley Hand",cursive;--jsans:Archivo,"Helvetica Neue",Arial,sans-serif;--jtype:"Special Elite","Courier New",monospace;
  --paper:#FBF5E3;--ink:#2F3B1E;--ink2:#5C6B45;--kraft:#C9A66B;--sage:#A9BC8E;--rose:#E7A9A0;--sky2:#9CC6D9;--leather:#6B4527;--leather2:#4A2E18}
.journal.open{visibility:visible;pointer-events:auto}
.j-scrim{position:absolute;inset:0;background:rgba(18,28,8,.34);opacity:0;transition:opacity .5s var(--ease-io)}
.journal.open .j-scrim{opacity:1}
.j-stage{position:absolute;left:50%;top:50%;width:calc(1600 * var(--j));height:calc(1040 * var(--j));margin:calc(-520 * var(--j)) 0 0 calc(-800 * var(--j));transition:transform .9s cubic-bezier(.62,0,.22,1)}
.journal.single .j-stage{width:calc(800 * var(--j));margin-left:calc(-400 * var(--j))}
.journal.closed .j-stage{transform:translateX(calc(-400 * var(--j)))}
.journal.turning .j-stage{transition:none}
.journal.single.closed .j-stage{transform:none}
/* the book itself: leather boards, page stacks, a ribbon and an elastic */
.j-boards{position:absolute;left:calc(-26 * var(--j));right:calc(-26 * var(--j));top:calc(-24 * var(--j));bottom:calc(-30 * var(--j));border-radius:calc(18 * var(--j));
  background:radial-gradient(120% 90% at 30% 20%,#7d5534,var(--leather) 45%,var(--leather2));
  box-shadow:0 calc(40 * var(--j)) calc(70 * var(--j)) calc(-20 * var(--j)) rgba(10,20,4,.6),inset 0 0 0 calc(3 * var(--j)) rgba(0,0,0,.12)}
.j-boards::before{content:"";position:absolute;inset:calc(10 * var(--j));border-radius:calc(12 * var(--j));border:calc(2 * var(--j)) dashed rgba(240,214,170,.45)}
.j-boards::after{content:"";position:absolute;left:50%;top:calc(-6 * var(--j));bottom:calc(-6 * var(--j));width:calc(26 * var(--j));margin-left:calc(-13 * var(--j));background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.08) 45%,rgba(0,0,0,.3));border-radius:calc(6 * var(--j))}
.journal.single .j-boards::after{display:none}
.journal.shut .j-boards{left:calc(50% - calc(10 * var(--j)))}
.journal.single .j-boards{left:calc(-22 * var(--j))}
.j-stack{position:absolute;top:calc(8 * var(--j));bottom:calc(-14 * var(--j));width:calc(800 * var(--j));background:repeating-linear-gradient(0deg,#efe4c7 0 calc(2 * var(--j)),#d9cba6 calc(2 * var(--j)) calc(3 * var(--j)));border-radius:calc(4 * var(--j));box-shadow:0 calc(4 * var(--j)) calc(8 * var(--j)) rgba(40,30,10,.3)}
.j-stack.l{left:calc(-8 * var(--j))}.j-stack.r{right:calc(-8 * var(--j))}
.journal.shut .j-stack.l,.journal.single .j-stack.l{display:none}
.journal.single .j-stack.r{right:calc(-8 * var(--j));left:auto}
.j-ribbon{position:absolute;left:calc(50% + calc(600 * var(--j)));bottom:calc(-120 * var(--j));width:calc(26 * var(--j));height:calc(150 * var(--j));background:linear-gradient(90deg,#3f6a1e,#5f8f33 50%,#3f6a1e);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);z-index:0}
.journal.single .j-ribbon{left:calc(360 * var(--j))}
.j-band{position:absolute;right:calc(70 * var(--j));top:calc(-26 * var(--j));bottom:calc(-32 * var(--j));width:calc(18 * var(--j));background:linear-gradient(90deg,#2e1c0e,#5a3a20 50%,#2e1c0e);border-radius:calc(4 * var(--j));z-index:9;pointer-events:none;opacity:0;transition:opacity .4s}
.journal.closed .j-band{opacity:1}
/* page slots and the turning leaf */
/* each slot (and each page) is its own stacking context: a sticker's z-index can
   never climb above the turning leaf or poke through it */
.j-slot{position:absolute;top:0;width:calc(800 * var(--j));height:calc(1040 * var(--j));z-index:1;isolation:isolate}
.j-slot.l{left:0}.j-slot.r{left:calc(800 * var(--j))}
.journal.single .j-slot.r{left:0}.journal.single .j-slot.l{display:none}
.j-leaf{position:absolute;top:0;left:calc(800 * var(--j));width:calc(800 * var(--j));height:calc(1040 * var(--j));transform-style:preserve-3d;transform-origin:0 50%;z-index:5;visibility:hidden;will-change:transform}
.journal.single .j-leaf{left:0}
.j-leaf.on{visibility:visible}
.j-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.j-face.back{transform:rotateY(180deg)}
.j-face .j-curl{position:absolute;inset:0;pointer-events:none;z-index:60;opacity:0;will-change:opacity;
  background:linear-gradient(90deg,rgba(255,250,230,.35),rgba(60,40,10,.10) 40%,rgba(40,25,5,.40))}
.j-face.back .j-curl{background:linear-gradient(270deg,rgba(255,250,230,.35),rgba(60,40,10,.10) 40%,rgba(40,25,5,.40))}
.j-under{position:absolute;top:0;width:calc(800 * var(--j));height:calc(1040 * var(--j));pointer-events:none;z-index:4;opacity:0;will-change:opacity,transform}
.j-under.r{left:calc(800 * var(--j));background:linear-gradient(90deg,rgba(40,30,10,.38),rgba(40,30,10,.12) 22%,rgba(40,30,10,0) 45%)}
.j-under.l{left:0;background:linear-gradient(270deg,rgba(40,30,10,.38),rgba(40,30,10,.12) 22%,rgba(40,30,10,0) 45%)}
.journal.single .j-under.r{left:0}
.j-stage{perspective:calc(4200 * var(--j))}
/* a page */
.j-page{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#FBF5E3 url(../a/paper.webp) center/cover;color:var(--ink);border-radius:calc(4 * var(--j)) calc(10 * var(--j)) calc(10 * var(--j)) calc(4 * var(--j));
  font:400 calc(21 * var(--j))/1.5 var(--jnote);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.j-page.left{border-radius:calc(10 * var(--j)) calc(4 * var(--j)) calc(4 * var(--j)) calc(10 * var(--j))}
.j-page::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:50;
  background:linear-gradient(90deg,rgba(80,60,20,.16),rgba(80,60,20,0) 9%),radial-gradient(140% 120% at 50% 50%,transparent 60%,rgba(120,90,40,.16) 100%)}
.j-page.left::after{background:linear-gradient(270deg,rgba(80,60,20,.18),rgba(80,60,20,0) 9%),radial-gradient(140% 120% at 50% 50%,transparent 60%,rgba(120,90,40,.16) 100%)}
.j-page.grid{background-image:linear-gradient(rgba(110,140,90,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(110,140,90,.18) 1px,transparent 1px),url(../a/paper.webp);background-size:calc(40 * var(--j)) calc(40 * var(--j)),calc(40 * var(--j)) calc(40 * var(--j)),cover}
.j-page.ruled{background-image:repeating-linear-gradient(to bottom,transparent 0 calc(43 * var(--j)),rgba(120,150,170,.32) calc(43 * var(--j)) calc(44 * var(--j))),url(../a/paper.webp);background-size:auto,cover;background-position:0 calc(20 * var(--j)),center}
.j-page.endpaper{background:#E9DFC2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%2373905a' stroke-width='1.6' stroke-linecap='round' opacity='.55'><path d='M12 30c6-8 14-8 18 0-6 6-12 6-18 0z'/><path d='M12 30l18 0'/><path d='M52 70c6-8 14-8 18 0-6 6-12 6-18 0z'/><path d='M52 70l18 0'/><circle cx='60' cy='18' r='3'/><circle cx='22' cy='62' r='2'/></g></svg>");background-size:calc(90 * var(--j)) calc(90 * var(--j))}
.j-pno{position:absolute;bottom:calc(26 * var(--j));font:400 calc(16 * var(--j))/1 var(--jtype);color:var(--ink2);z-index:3}
.j-page.right .j-pno{right:calc(96 * var(--j))}.j-page.left .j-pno{left:calc(96 * var(--j))}
/* collage pieces */
.j-a{position:absolute;margin:0;transform:rotate(var(--r,0deg));transform-origin:50% 50%}
.j-wash{position:absolute;border-radius:50%;filter:blur(calc(18 * var(--j)));opacity:.55;pointer-events:none}
.j-h{position:absolute;margin:0;font:400 calc(40 * var(--j))/1.15 var(--jhand);color:var(--ink);transform:rotate(var(--r,0deg))}
.j-type{position:absolute;margin:0;padding:calc(10 * var(--j)) calc(22 * var(--j)) calc(12 * var(--j));font:400 calc(30 * var(--j))/1 "Special Elite","Courier New",monospace;letter-spacing:.06em;color:#1d1d16;background:#F4EBD2;
  box-shadow:0 calc(3 * var(--j)) calc(6 * var(--j)) rgba(40,30,10,.25);transform:rotate(var(--r,0deg));text-transform:uppercase}
.j-type.dark{background:#1f2316;color:#F4EBD2}
.j-type.sage{background:#C9D6B0}
.j-note{position:absolute;margin:0;font:400 calc(21 * var(--j))/calc(34 * var(--j)) var(--jnote);color:var(--ink);transform:rotate(var(--r,0deg))}
.j-note b{font-weight:400;background:linear-gradient(transparent 55%,rgba(156,209,109,.55) 55%)}
.j-note.small{font-size:calc(18 * var(--j));line-height:calc(29 * var(--j));color:var(--ink2)}
.j-snip{position:absolute;margin:0;padding:calc(34 * var(--j)) calc(24 * var(--j)) calc(26 * var(--j));background:#FBF3DC;box-shadow:0 calc(3 * var(--j)) calc(5 * var(--j)) rgba(50,35,10,.28);transform:rotate(var(--r,0deg));font:400 calc(20 * var(--j))/calc(30 * var(--j)) var(--jnote);color:var(--ink)}
.j-snip.lined{background:repeating-linear-gradient(to bottom,#FBF5E6 0 calc(31 * var(--j)),rgba(120,150,170,.35) calc(31 * var(--j)) calc(32 * var(--j)));background-position:0 calc(30 * var(--j))}
.j-snip.sage{background-color:#D5DFC0}.j-snip.kraft{background-color:#DDC293}.j-snip.blue{background-color:#C8DDE3}.j-snip.rose{background-color:#F1D2C8}
.j-snip h4{margin:0 0 calc(6 * var(--j));font:400 calc(16 * var(--j))/1.2 "Special Elite","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.j-snip h3{margin:0 0 calc(4 * var(--j));font:400 calc(28 * var(--j))/1.1 var(--jhand);color:var(--ink)}
.j-snip ul{margin:calc(8 * var(--j)) 0 0;padding:0 0 0 calc(22 * var(--j))}
.j-snip li{margin:0 0 calc(4 * var(--j))}
.j-tape{position:absolute;height:calc(34 * var(--j));opacity:.88;transform:rotate(var(--r,0deg));z-index:20;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 calc(6 * var(--j)),transparent calc(6 * var(--j)) calc(12 * var(--j))),var(--tc,#A9BC8E)}
.j-tape.dots{background:radial-gradient(circle,rgba(255,255,255,.65) calc(3 * var(--j)),transparent calc(3.5 * var(--j))) 0 0/calc(16 * var(--j)) calc(16 * var(--j)),var(--tc,#E7A9A0)}
.j-tape.grid{background:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px) 0 0/calc(10 * var(--j)) calc(10 * var(--j)),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px) 0 0/calc(10 * var(--j)) calc(10 * var(--j)),var(--tc,#9CC6D9)}
.j-tape.kraft{opacity:.92;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.06)),#C9A66B}
.j-pola{position:absolute;margin:0;padding:calc(14 * var(--j)) calc(14 * var(--j)) calc(52 * var(--j));background:#fffdf7;box-shadow:0 calc(2 * var(--j)) calc(3 * var(--j)) rgba(0,0,0,.12),0 calc(14 * var(--j)) calc(22 * var(--j)) calc(-8 * var(--j)) rgba(40,30,10,.38);transform:rotate(var(--r,0deg))}
.j-pola img{display:block;width:100%;height:100%;object-fit:cover;background:#e9e2cc}
.j-pola figcaption{position:absolute;left:0;right:0;bottom:calc(10 * var(--j));text-align:center;font:400 calc(20 * var(--j))/1.15 var(--jhand);color:var(--ink)}
.j-cut{position:absolute;margin:0;transform:rotate(var(--r,0deg));filter:drop-shadow(calc(2 * var(--j)) 0 0 #fff) drop-shadow(calc(-2 * var(--j)) 0 0 #fff) drop-shadow(0 calc(2 * var(--j)) 0 #fff) drop-shadow(0 calc(-2 * var(--j)) 0 #fff) drop-shadow(0 calc(8 * var(--j)) calc(8 * var(--j)) rgba(40,30,10,.35))}
.j-cut img{display:block;width:100%;height:100%;object-fit:cover}
.j-cut .j-cutcap{position:absolute;left:calc(-20 * var(--j));right:calc(-20 * var(--j));top:calc(100% + calc(10 * var(--j)));text-align:center;font:400 calc(20 * var(--j))/1.15 var(--jhand);color:var(--ink);pointer-events:none}
.j-stk{position:absolute;margin:0;filter:drop-shadow(0 calc(6 * var(--j)) calc(6 * var(--j)) rgba(40,30,10,.35))}
.j-stk img,.j-stk svg{display:block;width:100%;height:100%}
.j-stamp{position:absolute;margin:0;padding:calc(10 * var(--j));background:#fbf7ea;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(4 * var(--j)) calc(5 * var(--j)) rgba(40,30,10,.3));
  --pf:radial-gradient(circle calc(6 * var(--j)) at calc(6 * var(--j)) calc(6 * var(--j)),transparent 98%,#000) calc(-6 * var(--j)) calc(-6 * var(--j))/calc(16 * var(--j)) calc(16 * var(--j)),linear-gradient(#000,#000) center/calc(100% - calc(20 * var(--j))) calc(100% - calc(20 * var(--j))) no-repeat;-webkit-mask:var(--pf);mask:var(--pf)}
.j-stamp .in{position:relative;width:100%;height:100%;overflow:hidden;border:calc(2 * var(--j)) solid rgba(60,70,40,.25)}
.j-stamp img{width:100%;height:100%;object-fit:cover;display:block}
.j-stamp .val{position:absolute;right:calc(6 * var(--j));top:calc(4 * var(--j));font:400 calc(18 * var(--j))/1 "Special Elite",monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.j-stamp .nm{position:absolute;left:calc(6 * var(--j));bottom:calc(4 * var(--j));font:400 calc(12 * var(--j))/1 "Special Elite",monospace;color:#fff;letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.j-rubber{position:absolute;margin:0;white-space:nowrap;text-align:center;line-height:1.2!important;padding:calc(8 * var(--j)) calc(16 * var(--j));border:calc(4 * var(--j)) double rgba(176,48,48,.75);border-radius:calc(8 * var(--j));color:rgba(176,48,48,.8);font:400 calc(26 * var(--j))/1 "Special Elite",monospace;letter-spacing:.12em;transform:rotate(var(--r,-8deg));mix-blend-mode:multiply}
.j-doodle{position:absolute;pointer-events:none;color:var(--ink2);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* things you can pick up */
.j-page .dr{cursor:grab;touch-action:none;transition:filter .2s}
.j-page .dr:hover{filter:brightness(1.03) drop-shadow(0 calc(10 * var(--j)) calc(10 * var(--j)) rgba(40,30,10,.25))}
.j-page .dr.held{cursor:grabbing;z-index:40 !important}
.j-page .j-cut.dr:hover{filter:drop-shadow(calc(2 * var(--j)) 0 0 #fff) drop-shadow(calc(-2 * var(--j)) 0 0 #fff) drop-shadow(0 calc(2 * var(--j)) 0 #fff) drop-shadow(0 calc(-2 * var(--j)) 0 #fff) drop-shadow(0 calc(14 * var(--j)) calc(12 * var(--j)) rgba(40,30,10,.4))}
.j-pola.lifted{z-index:45 !important;transform:rotate(0deg) scale(1.9) !important;transition:transform .5s var(--spring)}
/* folded notes: the cover flap is hinged on the top edge; opening swings it
   up and over (you see its plain back) and the note underneath is revealed */
.j-fold{position:absolute;margin:0;perspective:calc(1400 * var(--j));transform:rotate(var(--r,0deg));z-index:12}
.j-fold .fi{position:absolute;inset:0;padding:calc(20 * var(--j)) calc(24 * var(--j));overflow:hidden;background:repeating-linear-gradient(to bottom,#FFFBEF 0 calc(31 * var(--j)),rgba(120,150,170,.32) calc(31 * var(--j)) calc(32 * var(--j))),#FFFBEF;background-position:0 calc(14 * var(--j));
  box-shadow:0 calc(3 * var(--j)) calc(6 * var(--j)) rgba(40,30,10,.25);font:400 calc(18 * var(--j))/calc(30 * var(--j)) var(--jnote);color:var(--ink)}
.j-fold .fi h4{margin:0 0 calc(4 * var(--j));font:400 calc(16 * var(--j))/calc(28 * var(--j)) "Special Elite",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.j-fold .fi ul{margin:0;padding-left:calc(20 * var(--j))}
.j-fold .fi li{margin:0 0 calc(2 * var(--j))}
.j-fold .ff{position:absolute;left:calc(-2 * var(--j));right:calc(-2 * var(--j));top:calc(-2 * var(--j));bottom:calc(-2 * var(--j));transform-origin:50% 0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.45,0,.2,1);
  cursor:pointer;border:0;padding:0;background:none;font:inherit;color:inherit;z-index:2}
.j-fold .ff > span{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8 * var(--j));padding:calc(16 * var(--j));text-align:center}
.j-fold .ff .o{background:var(--fc,#E6D3A8) url(../a/paper.webp) center/cover;background-blend-mode:multiply;box-shadow:0 calc(8 * var(--j)) calc(12 * var(--j)) calc(-4 * var(--j)) rgba(40,30,10,.38);font:400 calc(26 * var(--j))/1.1 var(--jhand);color:var(--ink)}
.j-fold .ff .o::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(60,40,10,.25),transparent)}
.j-fold .ff .o small{font:400 calc(15 * var(--j))/1 "Special Elite",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.j-fold .ff .i{transform:rotateX(180deg);background:#EFE4C6 url(../a/paper.webp) center/cover;background-blend-mode:multiply}
.j-fold .ff:hover{transform:rotateX(-14deg)}
.j-fold.open .ff{transform:rotateX(-172deg)}
.j-fold .ff:focus-visible{outline:none}.j-fold .ff:focus-visible .o{outline:2px solid var(--leaf);outline-offset:3px}
/* the cover */
.j-cover-out{position:absolute;inset:0;border-radius:calc(6 * var(--j)) calc(16 * var(--j)) calc(16 * var(--j)) calc(6 * var(--j));background:radial-gradient(120% 90% at 30% 20%,#80583a,var(--leather) 45%,var(--leather2));
  box-shadow:inset 0 0 0 calc(3 * var(--j)) rgba(0,0,0,.15);overflow:hidden;cursor:pointer}
.j-cover-out::before{content:"";position:absolute;inset:calc(18 * var(--j));border-radius:calc(10 * var(--j));border:calc(2 * var(--j)) dashed rgba(240,214,170,.5)}
.j-cover-out .lab{position:absolute;left:calc(150 * var(--j));top:calc(300 * var(--j));width:calc(500 * var(--j));padding:calc(36 * var(--j)) calc(30 * var(--j));background:#F4EBD2;text-align:center;transform:rotate(-2deg);box-shadow:0 calc(6 * var(--j)) calc(12 * var(--j)) rgba(0,0,0,.35)}
.j-cover-out .lab b{display:block;font:400 calc(26 * var(--j))/1 "Special Elite",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.j-cover-out .lab span{display:block;margin-top:calc(14 * var(--j));font:400 calc(50 * var(--j))/1.15 var(--jhand);color:var(--ink)}
.j-cover-out .lab i{display:block;margin-top:calc(16 * var(--j));font:400 calc(19 * var(--j))/1.3 var(--jnote);font-style:normal;color:var(--ink2)}
.j-cover-out .tapnote{position:absolute;left:0;right:0;bottom:calc(130 * var(--j));text-align:center;font:400 calc(28 * var(--j))/1 var(--jhand);color:#F4EBD2;opacity:.9}
/* controls */
.j-ctl{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:30}
.j-ctl .glass-btn{color:var(--cream)}
.j-ctl .j-count{min-width:96px;text-align:center;font:500 15px/1 var(--jsans);color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.journal .j-close{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:max(16px,env(safe-area-inset-top,0px));z-index:31}
.j-hint{position:absolute;left:50%;top:max(14px,env(safe-area-inset-top,0px));transform:translateX(-50%);margin:0;font:400 15px/1.3 var(--jsans);color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.55);white-space:nowrap;z-index:30}
.j-corner{position:absolute;bottom:0;width:calc(120 * var(--j));height:calc(120 * var(--j));z-index:55;cursor:pointer;border:0;padding:0;background:none}
.j-page.right .j-corner{right:0}.j-page.left .j-corner{left:0}
.j-corner::before{content:"";position:absolute;bottom:0;width:calc(46 * var(--j));height:calc(46 * var(--j));transition:width .35s var(--spring),height .35s var(--spring);box-shadow:calc(-4 * var(--j)) calc(-4 * var(--j)) calc(10 * var(--j)) calc(-4 * var(--j)) rgba(60,40,10,.35)}
.j-page.right .j-corner::before{right:0;background:linear-gradient(315deg,rgba(0,0,0,0) 0 49%,#E2D6B4 50%,#F6EEDA 70%,#FBF5E3)}
.j-page.left .j-corner::before{left:0;background:linear-gradient(45deg,rgba(0,0,0,0) 0 49%,#E2D6B4 50%,#F6EEDA 70%,#FBF5E3);box-shadow:calc(4 * var(--j)) calc(-4 * var(--j)) calc(10 * var(--j)) calc(-4 * var(--j)) rgba(60,40,10,.35)}
.j-corner:hover::before,.j-corner:focus-visible::before{width:calc(78 * var(--j));height:calc(78 * var(--j))}
.j-corner:focus-visible{outline:none}
.j-cta{position:absolute;display:inline-flex;align-items:center;gap:calc(10 * var(--j));padding:calc(14 * var(--j)) calc(26 * var(--j));border:calc(2 * var(--j)) solid var(--ink);border-radius:999px;background:#F4EBD2;color:var(--ink);font:600 calc(23 * var(--j))/1 var(--jsans);cursor:pointer;text-decoration:none;transform:rotate(var(--r,0deg));box-shadow:0 calc(4 * var(--j)) 0 var(--ink)}
.j-cta:hover{transform:rotate(var(--r,0deg)) translateY(calc(-3 * var(--j)));box-shadow:0 calc(7 * var(--j)) 0 var(--ink)}
.j-cta:focus-visible{outline:2px solid var(--leaf);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.j-stage,.j-fold .ff{transition:none}}
.j-stk img[src$="p-plane.webp"]{filter:drop-shadow(calc(3 * var(--j)) 0 0 #fff) drop-shadow(calc(-3 * var(--j)) 0 0 #fff) drop-shadow(0 calc(3 * var(--j)) 0 #fff) drop-shadow(0 calc(-3 * var(--j)) 0 #fff)}
/* the journal is its own little room: the site chrome steps aside */
.site[data-sheet="journal"] .nhdr{opacity:0!important;pointer-events:none!important;visibility:hidden}
/* the paper standee of Rofaida: die-cut card with a little fold-out foot and a cast shadow */
.j-standee{filter:drop-shadow(0 calc(3 * var(--j)) calc(2 * var(--j)) rgba(40,30,10,.35)) drop-shadow(calc(14 * var(--j)) calc(10 * var(--j)) calc(10 * var(--j)) rgba(40,30,10,.22));z-index:8}
.j-standee::after{content:"";position:absolute;left:18%;right:18%;bottom:calc(-10 * var(--j));height:calc(22 * var(--j));border-radius:50%;background:radial-gradient(closest-side,rgba(40,30,10,.32),transparent);z-index:-1}
.j-standee img{object-fit:contain}

/* the cover rides the leaf when the book opens or closes: its inside face
   carries its own strip of leather board, so nothing pops when it lands */
.j-leaf.cover .j-face.back::before{content:"";position:absolute;left:calc(-26 * var(--j));top:calc(-24 * var(--j));bottom:calc(-30 * var(--j));right:calc(-1 * var(--j));border-radius:calc(18 * var(--j)) 0 0 calc(18 * var(--j));z-index:-1;
  background:radial-gradient(120% 90% at 30% 20%,#7d5534,var(--leather) 45%,var(--leather2));box-shadow:inset 0 0 0 calc(3 * var(--j)) rgba(0,0,0,.12)}
.j-leaf.cover .j-face.back{transform-style:flat}
.journal.single .j-under.l{display:none}
.journal.single .j-hint{font-size:15px;top:max(22px,env(safe-area-inset-top,0px))}
/* ===================================================== paper goods (Oct 24)
   Cards on backing sheets, a receipt, tickets, luggage tags, entry stamps,
   postage stamps and inked illustration stickers: less torn paper, more variety. */
.journal{--mono:"Special Elite","Courier New",monospace}
/* labels: fishtail ribbon ends instead of torn edges */
.j-type{clip-path:polygon(0 0,100% 0,calc(100% - calc(12 * var(--j))) 50%,100% 100%,0 100%,calc(12 * var(--j)) 50%);padding-left:calc(30 * var(--j));padding-right:calc(30 * var(--j))}
/* photos with mounting corners instead of torn edges */
.j-cut{padding:calc(8 * var(--j));background:#fffdf7;filter:none;box-shadow:0 calc(2 * var(--j)) calc(3 * var(--j)) rgba(0,0,0,.12),0 calc(12 * var(--j)) calc(18 * var(--j)) calc(-8 * var(--j)) rgba(40,30,10,.35)}
.j-cut::after{content:"";position:absolute;inset:calc(-4 * var(--j));pointer-events:none;
  background:linear-gradient(135deg,#3b3a30 calc(16 * var(--j)),transparent 0) top left/calc(34 * var(--j)) calc(34 * var(--j)) no-repeat,linear-gradient(225deg,#3b3a30 calc(16 * var(--j)),transparent 0) top right/calc(34 * var(--j)) calc(34 * var(--j)) no-repeat,
  linear-gradient(315deg,#3b3a30 calc(16 * var(--j)),transparent 0) bottom right/calc(34 * var(--j)) calc(34 * var(--j)) no-repeat,linear-gradient(45deg,#3b3a30 calc(16 * var(--j)),transparent 0) bottom left/calc(34 * var(--j)) calc(34 * var(--j)) no-repeat;opacity:.85}
.j-page .j-cut.dr:hover{filter:brightness(1.03)}
/* cards: a face on a coloured backing sheet */
.j-card{position:absolute;transform:rotate(var(--r,0deg));z-index:6}
.j-card .bk{position:absolute;inset:0;background:var(--back,#C9D6B0);transform:translate(calc(-14 * var(--j)),calc(12 * var(--j))) rotate(-2.2deg);box-shadow:0 calc(8 * var(--j)) calc(14 * var(--j)) calc(-8 * var(--j)) rgba(40,30,10,.35)}
.j-card .fc{position:relative;padding:calc(28 * var(--j)) calc(30 * var(--j)) calc(26 * var(--j));background:#FBF7EA;color:var(--ink);font:400 calc(19 * var(--j))/calc(30 * var(--j)) var(--jsans);box-shadow:0 calc(2 * var(--j)) calc(3 * var(--j)) rgba(40,30,10,.12),0 calc(12 * var(--j)) calc(20 * var(--j)) calc(-10 * var(--j)) rgba(40,30,10,.3)}
.j-card.index .fc{background:repeating-linear-gradient(to bottom,transparent 0 calc(32 * var(--j)),rgba(120,150,170,.30) calc(32 * var(--j)) calc(33 * var(--j))),linear-gradient(90deg,transparent calc(22 * var(--j)),rgba(200,80,80,.35) calc(22 * var(--j)) calc(24 * var(--j)),transparent calc(24 * var(--j))),#FBF7EA;background-position:0 calc(26 * var(--j)),0 0,0 0}
.j-card.grid .fc{background:linear-gradient(rgba(110,140,90,.16) 1px,transparent 1px) 0 0/calc(28 * var(--j)) calc(28 * var(--j)),linear-gradient(90deg,rgba(110,140,90,.16) 1px,transparent 1px) 0 0/calc(28 * var(--j)) calc(28 * var(--j)),#FAF8EF}
.j-card.kraft .fc{background:#E8D3A8 url(../a/paper.webp) center/cover;background-blend-mode:multiply}
.j-card.holes .fc{padding-left:calc(52 * var(--j));-webkit-mask:radial-gradient(circle calc(8 * var(--j)) at calc(20 * var(--j)) calc(22 * var(--j)),transparent 96%,#000) 0 0/100% calc(44 * var(--j));mask:radial-gradient(circle calc(8 * var(--j)) at calc(20 * var(--j)) calc(22 * var(--j)),transparent 96%,#000) 0 0/100% calc(44 * var(--j))}
.j-card h4,.j-receipt h4,.j-ticket h4,.j-tag h4{margin:0 0 calc(8 * var(--j));font:400 calc(15 * var(--j))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.j-card h3,.j-ticket h3{margin:0 0 calc(6 * var(--j));font:400 calc(28 * var(--j))/1.1 var(--jhand);color:var(--ink)}
.j-clip{position:absolute;z-index:24;pointer-events:none;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(3 * var(--j)) calc(3 * var(--j)) rgba(0,0,0,.3))}
.j-clip svg{display:block;width:100%;height:auto}
/* lists, a timeline and tables, all set to be read */
.j-list{margin:calc(4 * var(--j)) 0 0;padding:0;list-style:none}
.j-list li{position:relative;padding-left:calc(26 * var(--j));margin:0 0 calc(2 * var(--j))}
.j-list li::before{content:"";position:absolute;left:calc(4 * var(--j));top:calc(13 * var(--j));width:calc(9 * var(--j));height:calc(9 * var(--j));border-radius:50%;background:var(--ink2)}
.j-list.check li::before{top:calc(8 * var(--j));width:calc(14 * var(--j));height:calc(14 * var(--j));border-radius:calc(3 * var(--j));background:none;border:calc(2 * var(--j)) solid var(--ink2)}
.j-list.check li::after{content:"";position:absolute;left:calc(6 * var(--j));top:calc(10 * var(--j));width:calc(8 * var(--j));height:calc(5 * var(--j));border-left:calc(2.5 * var(--j)) solid #3E7D3A;border-bottom:calc(2.5 * var(--j)) solid #3E7D3A;transform:rotate(-45deg)}
.j-list.two{columns:2;column-gap:calc(26 * var(--j))}
.j-list.two li{break-inside:avoid}
.j-tl{list-style:none;margin:0;padding:0 0 0 calc(34 * var(--j));position:relative}
.j-tl::before{content:"";position:absolute;left:calc(9 * var(--j));top:calc(10 * var(--j));bottom:calc(16 * var(--j));border-left:calc(3 * var(--j)) dashed var(--ink2);opacity:.6}
.j-tl > li{position:relative;margin:0 0 calc(22 * var(--j))}
.j-tl > li:last-child{margin:0}
.j-tl > li::before{content:"";position:absolute;left:calc(-34 * var(--j));top:calc(4 * var(--j));width:calc(18 * var(--j));height:calc(18 * var(--j));border-radius:50%;background:#9CC66D;border:calc(3 * var(--j)) solid var(--ink)}
.j-tl .w{display:inline-block;margin-bottom:calc(6 * var(--j));padding:calc(2 * var(--j)) calc(10 * var(--j));font:400 calc(16 * var(--j))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#F2DFA6;color:var(--ink)}
.j-tl h3{margin:0;font:600 calc(26 * var(--j))/1.1 var(--jsans)}
.j-tl .at{margin:0 0 calc(2 * var(--j));font:400 calc(19 * var(--j))/1.3 var(--mono);color:var(--ink2)}
.j-tab{width:100%;border-collapse:collapse;font:400 calc(18 * var(--j))/calc(28 * var(--j)) var(--jsans)}
.j-tab th{font:400 calc(14 * var(--j))/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-align:left;vertical-align:top}
.j-tab.kv th{width:calc(110 * var(--j));padding:calc(8 * var(--j)) calc(10 * var(--j)) calc(8 * var(--j)) 0}
.j-tab.kv td{padding:calc(4 * var(--j)) 0;font-size:calc(24 * var(--j))}
.j-tab.kv tr+tr{border-top:calc(1.5 * var(--j)) dashed rgba(60,70,40,.35)}
.j-tab.grid3 thead th{padding:0 calc(10 * var(--j)) calc(10 * var(--j)) 0;border-bottom:calc(3 * var(--j)) solid var(--ink)}
.j-tab.grid3 td{padding:calc(12 * var(--j)) calc(12 * var(--j)) calc(12 * var(--j)) 0;vertical-align:top;border-bottom:calc(1.5 * var(--j)) solid rgba(60,70,40,.3);font-size:calc(21 * var(--j));line-height:calc(29 * var(--j))}
.j-tab.grid3 tr:last-child td{border-bottom:0}
.j-tab.grid3 td:first-child{width:calc(170 * var(--j))}.j-tab.grid3 td:nth-child(2){width:calc(130 * var(--j));font:600 calc(22 * var(--j))/1.1 var(--jsans)}
.j-tab b{display:block;font:600 calc(23 * var(--j))/1.1 var(--jsans)}
.j-tab small{display:block;font:400 calc(15 * var(--j))/1.3 var(--mono);color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
/* the receipt: zigzag top and bottom, thermal paper, typewriter text */
.j-receipt{position:absolute;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(3 * var(--j)) calc(2 * var(--j)) rgba(40,30,10,.18)) drop-shadow(0 calc(14 * var(--j)) calc(14 * var(--j)) rgba(40,30,10,.25));z-index:6}
.j-receipt .rc{padding:calc(34 * var(--j)) calc(30 * var(--j)) calc(36 * var(--j));background:#FFFEF8;color:#2a2a24;font:400 calc(19 * var(--j))/calc(28 * var(--j)) var(--mono);
  --zz:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(18 * var(--j)) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(18 * var(--j)) 51% repeat-x;-webkit-mask:var(--zz);mask:var(--zz)}
.rc-h{text-align:center;padding-bottom:calc(12 * var(--j));border-bottom:calc(2 * var(--j)) dashed #2a2a24;margin-bottom:calc(12 * var(--j))}
.rc-h b{display:block;font:700 calc(30 * var(--j))/1.1 var(--mono);letter-spacing:.14em}
.rc-h span{display:block;font-size:calc(16 * var(--j));letter-spacing:.08em;text-transform:uppercase;color:#5d5d52}
.rc-kv{width:100%;border-collapse:collapse}
.rc-kv th{text-align:left;font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:#5d5d52;width:calc(100 * var(--j));padding:calc(2 * var(--j)) 0}
.rc-kv td{font-weight:700;text-align:right}
.rc-t{margin:calc(14 * var(--j)) 0 calc(6 * var(--j));padding-top:calc(12 * var(--j));border-top:calc(2 * var(--j)) dashed #2a2a24;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.rc-items{margin:0;padding:0;list-style:none}
.rc-items li{display:flex;gap:calc(12 * var(--j));justify-content:space-between;align-items:flex-start;padding:calc(5 * var(--j)) 0;border-bottom:calc(1 * var(--j)) dotted #9a9a8c}
.rc-items i{font-style:normal;font-weight:700}
.rc-note{margin:calc(8 * var(--j)) 0 0;font-size:calc(16 * var(--j));color:#5d5d52;font-style:italic}
.rc-tot{display:flex;justify-content:space-between;margin-top:calc(12 * var(--j));padding:calc(8 * var(--j)) 0;border-top:calc(3 * var(--j)) double #2a2a24;border-bottom:calc(3 * var(--j)) double #2a2a24;font-weight:700;font-size:calc(21 * var(--j))}
.rc-ty{margin:calc(12 * var(--j)) 0 calc(8 * var(--j));text-align:center;font-size:calc(15 * var(--j));letter-spacing:.14em;text-transform:uppercase;color:#5d5d52}
.rc-bar{height:calc(44 * var(--j));margin:0 calc(30 * var(--j));background:repeating-linear-gradient(90deg,#2a2a24 0 calc(2 * var(--j)),transparent calc(2 * var(--j)) calc(5 * var(--j)),#2a2a24 calc(5 * var(--j)) calc(9 * var(--j)),transparent calc(9 * var(--j)) calc(11 * var(--j)),#2a2a24 calc(11 * var(--j)) calc(12 * var(--j)),transparent calc(12 * var(--j)) calc(16 * var(--j)))}
/* tickets: notched sides, a perforated stub */
.j-ticket{position:absolute;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(3 * var(--j)) calc(2 * var(--j)) rgba(40,30,10,.18)) drop-shadow(0 calc(12 * var(--j)) calc(12 * var(--j)) rgba(40,30,10,.24));z-index:6}
.j-ticket .tk{display:flex;background:var(--tk,#C8DDE3);color:var(--ink);font:400 calc(18 * var(--j))/calc(28 * var(--j)) var(--jsans);
  --nt:radial-gradient(circle calc(16 * var(--j)) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle calc(16 * var(--j)) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;-webkit-mask:var(--nt);mask:var(--nt)}
.tk-m{flex:1;padding:calc(22 * var(--j)) calc(26 * var(--j)) calc(20 * var(--j)) calc(34 * var(--j));background:#FBF7EA;margin:calc(10 * var(--j)) 0 calc(10 * var(--j)) calc(10 * var(--j))}
.tk-s{width:calc(130 * var(--j));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--j));border-left:calc(3 * var(--j)) dashed rgba(40,40,30,.45);text-align:center}
.tk-s b{font:600 calc(24 * var(--j))/1 var(--jsans);color:var(--ink)}
.tk-s span{font:400 calc(13 * var(--j))/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.j-ticket .j-list{display:flex;flex-wrap:wrap;gap:0 calc(24 * var(--j))}
.j-ticket .j-list li{white-space:nowrap}
/* luggage tags */
.j-tag{position:absolute;padding:calc(16 * var(--j)) calc(22 * var(--j)) calc(16 * var(--j)) calc(54 * var(--j));background:var(--tg,#DDC293);color:var(--ink);font:400 calc(18 * var(--j))/calc(27 * var(--j)) var(--jsans);transform:rotate(var(--r,0deg));
  clip-path:polygon(calc(30 * var(--j)) 0,100% 0,100% 100%,calc(30 * var(--j)) 100%,0 calc(100% - calc(22 * var(--j))),0 calc(22 * var(--j)));filter:drop-shadow(0 calc(6 * var(--j)) calc(6 * var(--j)) rgba(40,30,10,.3));z-index:5}
.j-tag::before{content:"";position:absolute;left:calc(18 * var(--j));top:50%;width:calc(16 * var(--j));height:calc(16 * var(--j));margin-top:calc(-8 * var(--j));border-radius:50%;background:#FBF5E3;box-shadow:inset 0 0 0 calc(3 * var(--j)) rgba(60,40,10,.35)}
.j-tag.mini{padding:calc(8 * var(--j)) calc(18 * var(--j)) calc(8 * var(--j)) calc(44 * var(--j));font-size:calc(16 * var(--j));line-height:calc(24 * var(--j))}
.j-tag.mini h4{margin:0;font-size:calc(15 * var(--j))}
.j-tag.mini::before{left:calc(14 * var(--j));width:calc(12 * var(--j));height:calc(12 * var(--j));margin-top:calc(-6 * var(--j))}
/* inked entry stamps */
.j-ink{position:absolute;margin:0;transform:rotate(var(--r,0deg));mix-blend-mode:multiply;opacity:.88;pointer-events:none;z-index:7}
.j-ink svg{display:block;width:100%;height:100%;filter:url(#jRough)}
/* postage stamps with drawn tool icons */
.j-pst{position:absolute;margin:0;padding:calc(9 * var(--j));background:#fbf7ea;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(4 * var(--j)) calc(5 * var(--j)) rgba(40,30,10,.3));
  --pf:radial-gradient(circle calc(6 * var(--j)) at calc(6 * var(--j)) calc(6 * var(--j)),transparent 98%,#000) calc(-6 * var(--j)) calc(-6 * var(--j))/calc(15 * var(--j)) calc(15 * var(--j)),linear-gradient(#000,#000) center/calc(100% - calc(20 * var(--j))) calc(100% - calc(20 * var(--j))) no-repeat;
  -webkit-mask:var(--pf);mask:var(--pf)}
.j-pst .in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:var(--ps,#C8DDE3);border:calc(2 * var(--j)) solid rgba(40,40,30,.3)}
.j-pst svg{width:46%;height:auto}
.j-pst .lg{display:flex;align-items:center;justify-content:center;gap:6%;width:52%;aspect-ratio:1;margin-top:calc(-4 * var(--j))}
.j-pst .lg img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.j-pst .lg.two{width:78%}
.j-pst .lg.two img{width:47%;height:auto}
.j-pst .v{position:absolute;left:calc(8 * var(--j));top:calc(6 * var(--j));font:400 calc(17 * var(--j))/1 var(--jtype);color:var(--ink)}
.j-pst .l{position:absolute;left:0;right:0;bottom:calc(7 * var(--j));text-align:center;font:700 calc(12 * var(--j))/1.1 var(--jsans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
/* inked illustration stickers get a die-cut white edge */
.j-art svg{display:block;width:100%;height:100%;overflow:visible}
.j-art{filter:drop-shadow(calc(3 * var(--j)) 0 0 #fff) drop-shadow(calc(-3 * var(--j)) 0 0 #fff) drop-shadow(0 calc(3 * var(--j)) 0 #fff) drop-shadow(0 calc(-3 * var(--j)) 0 #fff) drop-shadow(0 calc(8 * var(--j)) calc(7 * var(--j)) rgba(40,30,10,.35))}
.j-page .j-art.dr:hover{filter:drop-shadow(calc(3 * var(--j)) 0 0 #fff) drop-shadow(calc(-3 * var(--j)) 0 0 #fff) drop-shadow(0 calc(3 * var(--j)) 0 #fff) drop-shadow(0 calc(-3 * var(--j)) 0 #fff) drop-shadow(0 calc(14 * var(--j)) calc(12 * var(--j)) rgba(40,30,10,.4))}
/* ===================================================== real elements + the folder (Oct 24, round 2)
   Doha's own stickers and papers (background removed, otherwise untouched), real photos,
   and the work journey kept in an open manila folder of white sheets. */
.j-kst{position:absolute;margin:0;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(3 * var(--j)) calc(3 * var(--j)) rgba(40,30,10,.25)) drop-shadow(0 calc(10 * var(--j)) calc(12 * var(--j)) rgba(40,30,10,.22));z-index:8}
.j-kst img{display:block;width:100%;height:auto}
.j-kst.real{filter:drop-shadow(0 calc(4 * var(--j)) calc(4 * var(--j)) rgba(30,20,10,.3)) drop-shadow(0 calc(16 * var(--j)) calc(18 * var(--j)) rgba(30,20,10,.28))}
.j-page .j-kst.dr:hover{filter:drop-shadow(0 calc(4 * var(--j)) calc(4 * var(--j)) rgba(40,30,10,.25)) drop-shadow(0 calc(18 * var(--j)) calc(18 * var(--j)) rgba(40,30,10,.3))}
.j-rp{position:absolute;margin:0;transform:rotate(var(--r,0deg));filter:drop-shadow(0 calc(8 * var(--j)) calc(10 * var(--j)) rgba(40,30,10,.25));z-index:6}
.j-rp > img{display:block;width:100%;height:auto}
.j-rp .rp-t{position:absolute;color:#2f2f2a}
.j-rp.dark .rp-t{color:#FBF4E2;text-shadow:0 1px 1px rgba(30,30,10,.35)}
.j-rp.dark .lbl,.j-rp.dark .where{color:#F1E6C8}
.j-rp.dark .j-list.pen li::before{background:#FBF4E2}
/* the folder: manila stock, a crease along the spine and an index tab */
.j-page.jfolder{background:#E9DCC0 url(../a/paper.webp) center/cover;background-blend-mode:multiply}
.j-folder{position:absolute;left:calc(22 * var(--j));right:calc(22 * var(--j));top:calc(34 * var(--j));bottom:calc(22 * var(--j));border-radius:calc(12 * var(--j));background:linear-gradient(180deg,#EED9A6,#E6CF98);
  box-shadow:inset 0 0 0 calc(1.5 * var(--j)) rgba(140,105,40,.25),0 calc(4 * var(--j)) calc(10 * var(--j)) rgba(80,60,20,.18)}
.j-folder::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url(../a/paper.webp) center/cover;mix-blend-mode:multiply;opacity:.55}
.j-page.left .j-folder::after,.j-page.right .j-folder::after{content:"";position:absolute;top:0;bottom:0;width:calc(18 * var(--j))}
.j-page.right .j-folder::after{left:0;background:linear-gradient(90deg,rgba(120,90,30,.22),transparent)}
.j-page.left .j-folder::after{right:0;background:linear-gradient(270deg,rgba(120,90,30,.22),transparent)}
.j-folder .ftab{position:absolute;top:calc(-28 * var(--j));height:calc(36 * var(--j));padding:0 calc(26 * var(--j));border-radius:calc(10 * var(--j)) calc(10 * var(--j)) 0 0;background:#EED9A6;box-shadow:inset 0 calc(1.5 * var(--j)) 0 rgba(255,255,255,.5),inset 0 0 0 calc(1.5 * var(--j)) rgba(140,105,40,.22)}
.j-folder .ftab span{display:block;font:400 calc(17 * var(--j))/calc(36 * var(--j)) "Special Elite","Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;color:#5a4a26;white-space:nowrap}
/* white sheets with a couple underneath, a clip on top */
.j-sheet{position:absolute;transform:rotate(var(--r,0deg));z-index:6}
.j-sheet .u1,.j-sheet .u2{position:absolute;inset:0;background:#F3F1EA;box-shadow:0 calc(3 * var(--j)) calc(8 * var(--j)) rgba(60,45,15,.22)}
.j-sheet .u1{transform:translate(calc(10 * var(--j)),calc(9 * var(--j))) rotate(1.6deg)}
.j-sheet .u2{transform:translate(calc(-8 * var(--j)),calc(16 * var(--j))) rotate(-1.4deg);background:#EFECE3}
.j-sheet .sh{position:relative;padding:calc(40 * var(--j)) calc(40 * var(--j)) calc(36 * var(--j));background:#F8F7F3 url(../a/paper.webp) center/cover;background-blend-mode:multiply;color:#33332d;
  box-shadow:0 calc(1 * var(--j)) calc(2 * var(--j)) rgba(0,0,0,.1),0 calc(10 * var(--j)) calc(18 * var(--j)) calc(-6 * var(--j)) rgba(60,45,15,.28)}
.j-sheet.torn .sh{padding-top:calc(46 * var(--j));clip-path:polygon(0 calc(14 * var(--j)),4% calc(8 * var(--j)),9% calc(15 * var(--j)),14% calc(7 * var(--j)),19% calc(13 * var(--j)),25% calc(6 * var(--j)),31% calc(14 * var(--j)),37% calc(8 * var(--j)),43% calc(14 * var(--j)),49% calc(6 * var(--j)),55% calc(13 * var(--j)),61% calc(7 * var(--j)),67% calc(15 * var(--j)),73% calc(8 * var(--j)),79% calc(13 * var(--j)),85% calc(6 * var(--j)),91% calc(14 * var(--j)),96% calc(8 * var(--j)),100% calc(12 * var(--j)),100% 100%,0 100%)}
.j-sheet.torn .sh::before{content:"";position:absolute;left:calc(26 * var(--j));right:calc(26 * var(--j));top:calc(20 * var(--j));height:calc(14 * var(--j));background:radial-gradient(circle calc(5 * var(--j)),#E6CF98 92%,transparent) 0 0/calc(28 * var(--j)) calc(14 * var(--j)) repeat-x}
.j-sheet .sclip{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 calc(2 * var(--j)) calc(2 * var(--j)) rgba(0,0,0,.25))}
.j-sheet .sclip svg{display:block;width:100%;height:auto}
.j-sheet .sclip.paperclip{right:calc(70 * var(--j));top:calc(-26 * var(--j));width:calc(30 * var(--j))}
.j-sheet .sclip.binder{right:calc(40 * var(--j));top:calc(-34 * var(--j));width:calc(76 * var(--j))}
/* the writing: typewriter labels, handwriting entries */
.j-sheet .lbl,.j-rp .lbl{margin:0 0 calc(4 * var(--j));font:400 calc(17 * var(--j))/1.3 "Special Elite","Courier New",monospace;letter-spacing:.06em;text-transform:uppercase;color:#4c4a2a}
.j-sheet .lbl.big,.j-rp .lbl.big{margin:0 0 calc(12 * var(--j));font-size:calc(30 * var(--j));letter-spacing:.02em}
.j-sheet .lbl + .hw{margin-top:0}
.j-sheet .hw{margin:0 0 calc(16 * var(--j));font:500 calc(24 * var(--j))/1.25 var(--jsans);color:#3a3a34}
.j-sheet .hw.sm{margin:calc(10 * var(--j)) 0 0;font:400 calc(19 * var(--j))/1.4 var(--jhand);color:#6a6a60}
.j-sheet .ttl{margin:0 0 calc(22 * var(--j));font:400 calc(58 * var(--j))/1 "Special Elite","Courier New",monospace;letter-spacing:-.01em;text-transform:uppercase;color:#4c4a2a}
.job{margin:0 0 calc(18 * var(--j))}
.job:last-child{margin-bottom:0}
.job .role{margin:0;font:600 calc(27 * var(--j))/1.15 var(--jsans);letter-spacing:-.01em;color:#2f2f2a}
.job .where{margin:calc(2 * var(--j)) 0 calc(6 * var(--j));font:400 calc(19 * var(--j))/1.3 var(--jsans);color:#5d5c52}
.j-list.pen li{font:400 calc(19 * var(--j))/1.4 var(--jsans);padding-left:calc(24 * var(--j));margin:0 0 calc(4 * var(--j));color:inherit}
.j-list.pen li::before{top:calc(11 * var(--j));width:calc(6 * var(--j));height:calc(6 * var(--j));background:#4a4a40}
.idx{list-style:none;margin:0;padding:0}
.idx li{display:grid;grid-template-columns:calc(92 * var(--j)) 1fr;gap:calc(10 * var(--j));padding:calc(8 * var(--j)) 0;border-top:calc(1.5 * var(--j)) dashed rgba(70,70,50,.3)}
.idx li:first-child{border-top:0}
.idx b{font:400 calc(17 * var(--j))/calc(30 * var(--j)) "Special Elite","Courier New",monospace;color:#4c4a2a}
.idx span{font:600 calc(22 * var(--j))/1.15 var(--jsans);color:#2f2f2a}
.idx small{display:block;font:400 calc(17 * var(--j))/1.3 var(--jsans);color:#6a6a60}
/* a photo in a clear badge holder on a lanyard */
.j-badge{position:absolute;margin:0;transform:rotate(var(--r,0deg));z-index:7}
.j-badge .strap{position:absolute;left:50%;top:calc(-140 * var(--j));width:calc(34 * var(--j));height:calc(110 * var(--j));margin-left:calc(-17 * var(--j));background:linear-gradient(90deg,#3e3d3a,#5b5a56 50%,#3e3d3a);border-radius:calc(4 * var(--j))}
.j-badge .hook{position:absolute;left:50%;top:calc(-46 * var(--j));width:calc(30 * var(--j));height:calc(56 * var(--j));margin-left:calc(-15 * var(--j));border-radius:calc(8 * var(--j)) calc(8 * var(--j)) calc(4 * var(--j)) calc(4 * var(--j));background:linear-gradient(90deg,#d9d9d6,#fff 50%,#cfcfcb);box-shadow:0 calc(2 * var(--j)) calc(3 * var(--j)) rgba(0,0,0,.3)}
.j-badge .sleeve{position:absolute;inset:0;display:block;border-radius:calc(14 * var(--j));padding:calc(46 * var(--j)) calc(18 * var(--j)) calc(18 * var(--j));background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.35) 40%,rgba(255,255,255,.5));
  box-shadow:inset 0 0 0 calc(2 * var(--j)) rgba(255,255,255,.9),0 calc(14 * var(--j)) calc(22 * var(--j)) calc(-6 * var(--j)) rgba(40,30,10,.35);backdrop-filter:blur(1px)}
.j-badge .sleeve::before{content:"";position:absolute;left:50%;top:calc(16 * var(--j));width:calc(64 * var(--j));height:calc(12 * var(--j));margin-left:calc(-32 * var(--j));border-radius:calc(6 * var(--j));background:rgba(120,120,110,.35);box-shadow:inset 0 calc(1 * var(--j)) calc(2 * var(--j)) rgba(0,0,0,.25)}
.j-badge .sleeve::after{content:"";position:absolute;inset:calc(46 * var(--j)) calc(18 * var(--j)) calc(18 * var(--j));background:linear-gradient(125deg,rgba(255,255,255,.4),transparent 35%,transparent 70%,rgba(255,255,255,.18));pointer-events:none}
.j-badge img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.j-page.jfolder .j-pno{z-index:20}
.j-sheet.tight .sh{padding:calc(34 * var(--j)) calc(30 * var(--j)) calc(28 * var(--j))}
.j-sheet.tight .ttl{font-size:calc(48 * var(--j));margin-bottom:calc(10 * var(--j))}
.j-sheet.tight .idx li{padding:calc(6 * var(--j)) 0}
.j-sheet.tight .idx span{font-size:calc(21 * var(--j))}
.j-sheet.tight .idx small{font-size:calc(16 * var(--j))}
.j-rp .job .role{font-size:calc(25 * var(--j))}
.j-rp .lbl.big{font-size:calc(26 * var(--j))}
/* a compact sheet: three jobs side by side */
.j-sheet.compact .sh{padding:calc(30 * var(--j)) calc(30 * var(--j)) calc(26 * var(--j))}
.j-sheet .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(22 * var(--j))}
.j-sheet .cols3 .job{margin:0}
.j-sheet.compact .job .role{font-size:calc(23 * var(--j))}
.j-sheet.compact .job .where{font-size:calc(17 * var(--j))}
.j-sheet.compact .j-list.pen li{font-size:calc(17 * var(--j));line-height:1.35}
/* =============================================== edit mode (owner only) */
.ed-pill{position:fixed;left:16px;bottom:16px;z-index:300;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border:0;border-radius:999px;
  background:#1f2316;color:#FFFEEB;font:500 14px/1 Archivo,system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.ed-pill svg{width:18px;height:18px}
.editing .ed-pill{display:none}
.ed-bar{position:fixed;left:50%;top:12px;z-index:301;transform:translate(-50%,-160%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;
  border-radius:14px;background:#1f2316;color:#FFFEEB;box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.editing .ed-bar{transform:translate(-50%,0)}
.ed-msg{margin:0;font:400 13px/1.35 Archivo,system-ui,sans-serif;opacity:.9}
.ed-btn{flex:none;height:34px;padding:0 14px;border:0;border-radius:10px;background:#9CC66D;color:#1f2316;font:600 13px/1 Archivo,system-ui,sans-serif;cursor:pointer}
.ed-btn.ghost{background:transparent;color:#FFFEEB;box-shadow:inset 0 0 0 1px rgba(255,254,235,.4)}
.ed-btn:disabled{opacity:.5}
.ed-toast{position:fixed;left:16px;bottom:66px;z-index:302;margin:0;max-width:min(360px,calc(100vw - 32px));padding:10px 14px;border-radius:12px;background:#1f2316;color:#FFFEEB;
  font:400 13px/1.35 Archivo,system-ui,sans-serif;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.ed-toast.on{opacity:1;transform:none}
/* selectable things */
.editing [data-eb]{pointer-events:auto !important;cursor:move}
.editing [data-eb]:hover{outline:1.5px dashed rgba(122,170,70,.9);outline-offset:3px}
.editing [data-ek]{pointer-events:auto !important}
html:not(.editing) .ed-hidden{display:none !important}
.editing .ed-hidden{opacity:.28 !important;outline:1.5px dashed #b0302f;outline-offset:3px}
.editing [contenteditable="true"]{cursor:text;-webkit-user-select:text;user-select:text;outline:2px solid #7AAA46;outline-offset:2px;background:rgba(255,255,240,.25)}
/* the selection frame, its handles and the floating toolbar */
.ed-frame{position:fixed;z-index:303;display:none;pointer-events:none;outline:2px solid #7AAA46;outline-offset:2px;border-radius:2px}
.ed-frame.on{display:block}
.ed-frame i{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #7AAA46,0 2px 6px rgba(0,0,0,.3);pointer-events:auto;touch-action:none}
.ed-frame .h-scale{right:-9px;bottom:-9px;cursor:nwse-resize;border-radius:3px}
.ed-frame .h-rot{left:50%;top:-30px;margin-left:-7px;cursor:grab}
.ed-frame .h-rot::after{content:"";position:absolute;left:6px;top:14px;width:2px;height:14px;background:#7AAA46}
.ed-tools{position:fixed;z-index:304;display:none;flex-direction:column;gap:6px;padding:6px;border-radius:12px;background:#1f2316;color:#FFFEEB;box-shadow:0 10px 26px -8px rgba(0,0,0,.55);
  font:500 12px/1 Archivo,system-ui,sans-serif;max-width:calc(100vw - 16px)}
.ed-tools.on{display:flex}
.ed-tools .row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ed-tools .row + .row{padding-top:6px;border-top:1px solid rgba(255,254,235,.16)}
.ed-tools:not(.is-text) .txt{display:none}
.ed-tools:not(.is-text) .row + .row{padding-top:0;border-top:0}
.ed-tools button,.ed-tools select{height:30px;min-width:30px;padding:0 9px;border:0;border-radius:8px;background:rgba(255,254,235,.1);color:#FFFEEB;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ed-tools button[hidden]{display:none}
.ed-tools button svg{width:16px;height:16px;fill:none}
.ed-tools button.wide{background:#9CC66D;color:#1f2316;font-weight:600}
.ed-tools button.wide.on{background:#FFFEEB}
.ed-tools select{max-width:170px}
.ed-tools select option{color:#1f2316}
.ed-tools button.on{background:#9CC66D;color:#1f2316}
.ed-tools button:not(.wide):not(.on):hover{background:rgba(255,254,235,.2)}
.ed-tools .fsv{min-width:46px;text-align:center;opacity:.85}
.ed-tools .sw{display:inline-flex;align-items:center;gap:3px;margin-right:4px}
.ed-tools .dot{width:20px;height:20px;min-width:20px;padding:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(255,254,235,.5)}
.ed-tools .dot.pick{position:relative;display:inline-block;background:conic-gradient(#e44,#ee4,#4e4,#4ee,#44e,#e4e,#e44);cursor:pointer}
.ed-tools .dot.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
/* text boxes added in edit mode */
.ed-note{position:absolute;margin:0;z-index:30;min-width:2ch;white-space:pre-wrap}
.ed-note.in-j{font:400 calc(30 * var(--j))/1.2 "Architects Daughter",cursive;color:#2f2f2a;max-width:calc(560 * var(--j))}
.ed-note.in-site{font:500 calc(28 * var(--u))/1.2 Archivo,system-ui,sans-serif;color:#FFFEEB;text-shadow:0 1px 2px rgba(2,21,28,.4);max-width:calc(900 * var(--u))}
.editing .ed-note{pointer-events:auto;cursor:move}
.editing .ed-note:hover{outline:1.5px dashed rgba(122,170,70,.9);outline-offset:3px}
@media (max-width:760px){.ed-msg{display:none}}
/* ---- work journey: the index and the sheets that slide out of the folder (Doha, Oct 24) */
.j-sheet.jw-index{z-index:9}
.jw-hint{margin:0 0 calc(14 * var(--j))!important}
.jw-hint .tap{display:none}
@media (hover:none){.jw-hint .hov{display:none}.jw-hint .tap{display:inline}}
.jw-idx li{display:block;padding:0}
.jw-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:calc(86 * var(--j)) 1fr calc(26 * var(--j));gap:calc(8 * var(--j));align-items:start;width:100%;padding:calc(10 * var(--j)) calc(8 * var(--j)) calc(10 * var(--j)) calc(6 * var(--j));margin:0 calc(-6 * var(--j));border-radius:calc(8 * var(--j));cursor:pointer;
  transition:background-color .2s}
.jw-row b{font:400 calc(17 * var(--j))/calc(30 * var(--j)) "Special Elite","Courier New",monospace;color:#4c4a2a}
.jw-row span{font:600 calc(21 * var(--j))/1.15 var(--jsans);color:#2f2f2a}
.jw-row small{display:block;font:400 calc(16 * var(--j))/1.3 var(--jsans);color:#6a6a60}
.jw-row i{align-self:center;width:calc(22 * var(--j));height:calc(22 * var(--j));border-left:calc(2.5 * var(--j)) solid #8a8670;border-bottom:calc(2.5 * var(--j)) solid #8a8670;transform:rotate(45deg) translate(calc(4 * var(--j)),calc(-2 * var(--j)));opacity:.55;transition:transform .25s,opacity .2s}
.jw-row:hover,.jw-row.on{background:rgba(242,214,120,.38)}
.jw-row:hover i,.jw-row.on i{opacity:1;transform:rotate(45deg) translate(calc(-2 * var(--j)),calc(4 * var(--j)))}
.jw-row:focus-visible{outline:calc(2.5 * var(--j)) solid #457817;outline-offset:calc(2 * var(--j))}
.j-sheet.jw-pop{left:calc(20 * var(--j));top:calc(66 * var(--j));width:calc(346 * var(--j));z-index:8;opacity:0;visibility:hidden;transform:translateX(calc(200 * var(--j))) rotate(3deg);
  transition:transform .42s cubic-bezier(.6,0,.4,1),opacity .2s .1s,visibility 0s .42s}
.j-sheet.jw-pop.on{opacity:1;visibility:visible;transform:rotate(-1.5deg);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .18s,visibility 0s}
.jw-pop .sh{padding:calc(30 * var(--j)) calc(28 * var(--j)) calc(26 * var(--j))!important}
.jw-pop .job .role{font-size:calc(25 * var(--j));padding-right:calc(30 * var(--j))}
.jw-pop .job{margin-bottom:calc(6 * var(--j))}
.jw-pop .lbl{margin-top:calc(14 * var(--j))!important}
.jw-pop .lbl:first-of-type{margin-top:0!important}
.jw-pop .j-list.pen li{font-size:calc(18 * var(--j));line-height:1.35;margin-bottom:calc(5 * var(--j))}
.jw-pop .hw.sm{margin:calc(2 * var(--j)) 0 0!important;font:400 calc(17 * var(--j))/1.4 var(--jsans)!important}
.jw-x{all:unset;position:absolute;right:calc(14 * var(--j));top:calc(12 * var(--j));width:calc(34 * var(--j));height:calc(34 * var(--j));border-radius:50%;text-align:center;font:400 calc(26 * var(--j))/calc(32 * var(--j)) var(--jsans);color:#5d5c52;cursor:pointer}
.jw-x:hover{background:rgba(0,0,0,.07)}
.jw-x:focus-visible{outline:calc(2 * var(--j)) solid #457817}
.jw-links{display:flex;flex-wrap:wrap;gap:calc(8 * var(--j));margin-top:calc(4 * var(--j))}
.jw-links .lk{display:flex;flex-direction:column;padding:calc(6 * var(--j)) calc(12 * var(--j)) calc(7 * var(--j));border:calc(2 * var(--j)) solid #4c4a2a;border-radius:calc(10 * var(--j));background:#FFFDF3;color:#2f2f2a;text-decoration:none;transition:background-color .2s,transform .2s}
.jw-links .lk b{font:600 calc(17 * var(--j))/1.2 var(--jsans)}
.jw-links .lk small{font:400 calc(12 * var(--j))/1.3 "Special Elite","Courier New",monospace;letter-spacing:.04em;text-transform:uppercase;color:#6a6a60}
.jw-links .lk.soon{border-style:dashed;border-color:#9a9580;background:transparent;opacity:.75;cursor:default}
.jw-links a.lk:hover{background:#F2DFA6;transform:translateY(calc(-2 * var(--j)))}
@media (prefers-reduced-motion:reduce){.j-sheet.jw-pop,.j-sheet.jw-pop.on{transition:opacity .15s,visibility 0s;transform:rotate(-1.5deg)}}
/* ---- learning journey: one sheet, newest first */
.jl-line{list-style:none;margin:0;padding:0;position:relative}
.jl-line::before{content:"";position:absolute;left:calc(122 * var(--j));top:calc(18 * var(--j));bottom:calc(18 * var(--j));border-left:calc(2 * var(--j)) dashed rgba(70,70,50,.35)}
.jl-line li{position:relative;display:grid;grid-template-columns:calc(110 * var(--j)) 1fr;gap:calc(30 * var(--j));padding:calc(7 * var(--j)) 0}
.jl-line li::after{content:"";position:absolute;left:calc(116 * var(--j));top:calc(19 * var(--j));width:calc(14 * var(--j));height:calc(14 * var(--j));border-radius:50%;background:#4c4a2a;box-shadow:0 0 0 calc(4 * var(--j)) #F8F7F3}
.jl-line .yr{font:400 calc(19 * var(--j))/calc(34 * var(--j)) "Special Elite","Courier New",monospace;color:#4c4a2a;text-align:right}
.jl-tag{display:inline-block;margin:0 0 calc(2 * var(--j));padding:calc(2 * var(--j)) calc(10 * var(--j));border-radius:calc(20 * var(--j));font:400 calc(13 * var(--j))/1.4 "Special Elite","Courier New",monospace;letter-spacing:.05em;text-transform:uppercase;color:#3b3a30;background:#C8DDE3}
.jl-tag.ux{background:#C8DDE3}.jl-tag.d3{background:#F1D2C8}.jl-tag.cal{background:#D5DFC0}.jl-tag.gd{background:#F2DFA6}
.jl-line .role{margin:0;font:600 calc(23 * var(--j))/1.15 var(--jsans);color:#2f2f2a}
.jl-line .where{margin:calc(1 * var(--j)) 0 0;font:400 calc(17 * var(--j))/1.3 var(--jsans);color:#5d5c52}
.jl-line .what{margin:calc(2 * var(--j)) 0 0;font:400 calc(16 * var(--j))/1.35 var(--jsans);color:#6a6a60}
.j-sheet.jl-sheet .sh{padding:calc(32 * var(--j)) calc(28 * var(--j)) calc(24 * var(--j)) calc(10 * var(--j))}

/* "Who is Rofaida ?": the paragraph sits on the ruled lines (lines every calc(44 * var(--j))) */
.j-note.who{font-size:calc(22 * var(--j));line-height:calc(44 * var(--j))}

/* ---- read it bigger: a clean copy of a note at reading size (UX pass, Oct 24) */
.j-slot :is(.j-sheet:not(.jw-index),.j-rp,.j-card,.j-tag,.j-note,.j-snip){cursor:zoom-in}
.j-reader{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:max(56px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px))}
.j-reader[hidden]{display:none}
.jr-back{position:absolute;inset:0;background:rgba(18,22,10,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.jr-card{--j:.86px;position:relative;width:min(560px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border-radius:12px;box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
@media (min-width:900px){.jr-card{--j:1px;width:min(640px,100%)}}
.jr-x{position:sticky;top:8px;float:right;z-index:30;width:44px;height:44px;margin:8px 8px -52px 0;border:0;border-radius:999px;background:#1f2316;color:#FFFEEB;
  font:400 26px/44px Archivo,system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.jr-x:focus-visible{outline:3px solid #9CC66D;outline-offset:2px}
.jr-in{min-height:100%}
.j-reader .in-reader{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;margin:0!important;
  transform:none!important;translate:none!important;rotate:none!important;scale:none!important;opacity:1!important;visibility:visible!important;clip-path:none!important;cursor:auto}
.j-reader .in-reader .sh{box-shadow:none;padding:calc(48 * var(--j)) calc(40 * var(--j)) calc(40 * var(--j))}
.j-reader .j-sheet.in-reader .sh{min-height:100%}
.j-reader .j-note.in-reader{padding:calc(56 * var(--j)) calc(36 * var(--j)) calc(40 * var(--j));background:#FBF7EA url(../a/paper.webp) center/cover;background-blend-mode:multiply;font-size:calc(23 * var(--j));line-height:calc(40 * var(--j))}
.j-reader .j-note.small.in-reader{font-size:calc(21 * var(--j))}
.j-reader .j-rp.in-reader{padding:calc(56 * var(--j)) calc(36 * var(--j)) calc(40 * var(--j));background:#EAD9B0 url(../a/paper.webp) center/cover;background-blend-mode:multiply}
.j-reader .j-rp.dark.in-reader{background-color:#4c3d29}
.j-reader .j-rp.in-reader > img{display:none}
.j-reader .j-rp.in-reader .rp-t{position:static!important;inset:auto!important}
.j-reader .j-tag.in-reader{padding-top:calc(40 * var(--j));padding-bottom:calc(32 * var(--j))}
.j-reader .j-card.in-reader .fc{box-shadow:none}
.j-reader .jw-links .lk{min-height:44px;justify-content:center}
.j-reader .jw-links .lk small{font-size:calc(13 * var(--j))}
.journal.single .j-hint{max-width:calc(100vw - 150px);white-space:normal;text-align:center;line-height:1.35}
/* the coffee-cup sticker overlaps the matcha polaroid's bottom-left corner: its caption centres in the space beside the cup */
.j-pola:has(img[src$="p-matcha.webp"]) figcaption{padding-left:calc(52 * var(--j))}