/* the room. one stylesheet for every page. */
:root{
  --ink:#15171B; --wall:#15171B; --chalk:#EDE9E1; --paper:#FFFFFF; --mist:#F1EFEA; --line:#E6E3DC;
  --lamp:#F2B632; --sky:#1C5688; --red:#FF3B30; --yard:#2F7D4B; --maroon:#6E1D2A; --saffron:#FF6A13;
  --serif:'Source Serif 4',Georgia,serif; --mono:'Azeret Mono',ui-monospace,monospace;
  --gut:48px; --ease:cubic-bezier(.2,.7,.2,1); --snap:cubic-bezier(.7,0,.2,1);
}
html.lamp{--wall:#2B241B}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wall);color:var(--chalk);font-family:var(--serif);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background 600ms}
body.light{background:var(--paper);color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.skip{position:absolute;left:-9999px;top:0;background:var(--lamp);color:var(--ink);padding:12px 16px;z-index:100}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
::selection{background:var(--lamp);color:var(--ink)}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.k{font-family:var(--mono);font-size:13px;letter-spacing:0;line-height:1.5}
.k12{font-family:var(--mono);font-size:12px;line-height:1.55}
.h40{margin:0;font-size:40px;line-height:1.15;font-weight:400}
.h44{margin:0;font-size:44px;line-height:1.12;font-weight:400}
.lede{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px var(--gut);background:var(--wall);border-bottom:1px solid rgba(237,233,225,.18);transition:background 600ms}
body.light .top{background:var(--paper);border-bottom-color:var(--line)}
.top .name{font-size:20px;text-decoration:none}
.top nav{display:flex;gap:22px;font-family:var(--mono);font-size:13px;flex-wrap:wrap}
.top nav a{text-decoration:none;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right 300ms var(--ease)}
.top nav a:hover::after,.top nav a[aria-current="page"]::after{right:0}
.top .tools{display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:13px}
.lampb{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px}
.stampc{display:flex;align-items:center;gap:8px}
.stampc i{width:12px;height:12px;background:var(--red);display:inline-block}
.menu{display:none;all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;border:1px solid currentColor;padding:8px 12px}

/* reveal: elements wait until they are on screen */
[data-r]{opacity:0}
[data-r].in{animation:rise 800ms var(--ease) var(--d,0ms) both}
[data-wipe] img{clip-path:inset(0 0 100% 0)}
[data-wipe].in img{animation:wipe 1000ms var(--snap) var(--d,0ms) both}
[data-side] img{clip-path:inset(0 100% 0 0)}
[data-side].in img{animation:side 1000ms var(--snap) var(--d,0ms) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes side{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes drop{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + .9deg))}}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes kb{from{transform:scale(1.12) translate(-2%,-1%)}to{transform:scale(1) translate(0,0)}}
@keyframes thunk{0%{transform:scale(1.9) rotate(-14deg);opacity:0}60%{transform:scale(.9) rotate(-7deg);opacity:1}100%{transform:scale(1) rotate(-7deg);opacity:1}}
@keyframes flip{from{opacity:0;transform:rotateX(70deg)}to{opacity:1;transform:none}}
@keyframes land{0%{opacity:0;transform:translateY(-40px) rotate(-6deg)}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes grow{from{width:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* the wall */
.wallbox{position:relative;width:100%;aspect-ratio:1344/1000;overflow:hidden}
.wall{position:absolute;left:0;top:0;width:1344px;height:1000px;transform-origin:0 0;transform:scale(var(--s,1))}
.pz{position:absolute;transform:translate(calc(var(--mx,0) * var(--dp) * 1px),calc(var(--my,0) * var(--dp) * 1px));transition:transform 500ms var(--ease)}
.pd{animation:drop 800ms cubic-bezier(.2,.8,.2,1) var(--d) both}
.ps{transform-origin:50% 0;animation:sway var(--sw) ease-in-out var(--d) infinite;transform:rotate(var(--r))}
.ps img{width:100%;height:auto;transition:transform 300ms var(--ease)}
.pin{position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--lamp);z-index:2}
.pz:hover{z-index:20}
.pz:hover .ps img{transform:translateY(-8px) scale(1.04)}
.notecard{background:var(--paper);color:var(--ink);padding:22px 22px 18px;transform:rotate(-1.2deg);display:flex;flex-direction:column;gap:12px;position:relative}
.notecard p{margin:0}
.wallhint{position:absolute;left:var(--gut);bottom:20px;font-family:var(--mono);font-size:12px;opacity:.7}
.introm{display:none}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;background:var(--lamp);color:var(--ink);padding:18px 0;font-size:22px}
.ticker>div{display:inline-flex;gap:56px;animation:tick 70s linear infinite;padding-right:56px}

/* work prints */
.prints{column-count:3;column-gap:32px}
.print{display:block;break-inside:avoid;margin:0 0 40px;text-decoration:none}
.print .im{overflow:hidden;background:#0D0E10}
.print img{width:100%;height:auto;transition:transform 700ms var(--ease)}
.print:hover img{transform:scale(1.025)}
.print .ttl{font-size:26px;line-height:1.2;transition:color 200ms}
.print:hover .ttl{color:var(--lamp)}
.print .meta{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:16px;padding-top:16px;align-items:start}
.print .typecard{background:var(--lamp);color:var(--ink);padding:40px 24px;display:flex;flex-direction:column;gap:16px}
.stamp{width:64px;height:64px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:11px;line-height:1.1;border:0;
  -webkit-mask:radial-gradient(circle 4px at 4px 4px,transparent 3.5px,#000 4px) -4px -4px/8px 8px;mask:radial-gradient(circle 4px at 4px 4px,transparent 3.5px,#000 4px) -4px -4px/8px 8px;background:rgba(237,233,225,.12)}
.stamp.got{background:var(--red);color:#fff;animation:thunk 500ms cubic-bezier(.2,.8,.2,1) both}

/* window */
.window{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.frame{border:14px solid #2A2621;outline:1px solid rgba(237,233,225,.3);height:640px;position:relative;overflow:hidden;background:#2A2621}
.frame::before,.frame::after{content:"";position:absolute;background:#2A2621;z-index:2}
.frame::before{left:50%;top:0;bottom:0;width:10px;margin-left:-5px}
.frame::after{top:50%;left:0;right:0;height:10px;margin-top:-5px}
.frame img{width:100%;height:100%;object-fit:cover;animation:kb 24s ease-in-out infinite alternate}
.arrow{display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:14px}
.arrow span{transition:transform 300ms var(--ease)}
.arrow:hover span{transform:translateX(6px)}

/* route */
.paper{background:var(--paper);color:var(--ink)}
.eggs{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 24px;scrollbar-width:thin}
.egg{scroll-snap-align:start;flex:0 0 340px;display:flex;flex-direction:column;gap:16px}
.egg .ph{height:220px;overflow:hidden;background:var(--mist)}
.egg .ph img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.egg:hover .ph img{transform:scale(1.06)}
.egg .yr{height:100%;display:flex;align-items:flex-end;padding:16px}
.egg p{margin:0;font-size:19px;line-height:1.55}

/* body */
.body2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.ba{position:relative;overflow:hidden;height:680px;user-select:none;background:#0D0E10}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut,50%))}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--lamp)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--chalk);outline:none;margin:12px 0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:var(--lamp);cursor:ew-resize}
.range::-moz-range-thumb{width:22px;height:22px;background:var(--lamp);border:0;border-radius:0;cursor:ew-resize}

/* desk */
.desk{background:var(--lamp);color:var(--ink)}
.deskgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;padding:10px 12px;border:1px solid currentColor}
.chip[aria-selected="true"]{background:var(--ink);color:var(--lamp)}
.chip span{opacity:.6}
.posts{list-style:none;margin:0;padding:0;border-top:2px solid currentColor}
.posts li{display:grid;grid-template-columns:100px minmax(0,1fr) 150px;gap:16px;padding:14px 0;border-bottom:1px solid currentColor;font-family:var(--mono);font-size:12px;align-items:baseline}
.posts li[hidden]{display:none}
.posts .t{font-family:var(--serif);font-size:21px;line-height:1.3}
.posts a.t{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color 300ms}
.posts a.t:hover{text-decoration-color:currentColor}
.posts .wait{opacity:.6}
.posts .k2{text-align:right}
.empty{padding:18px 0;border-bottom:1px solid currentColor;font-size:21px;opacity:.7}
.drawer{background:var(--ink);color:var(--chalk);padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:520px;perspective:800px}
.drawer .q{margin:0;font-size:36px;line-height:1.25;animation:flip 600ms var(--ease) both;transform-origin:50% 0}
.go{all:unset;cursor:pointer;background:var(--lamp);color:var(--ink);padding:16px 32px;font-family:var(--mono);font-size:15px;transition:transform 200ms var(--ease)}
.go:hover{transform:translateY(-2px)}
.go:active{transform:translateY(1px)}

/* shelf */
.shelf{display:flex;align-items:flex-end;gap:6px;height:380px;border-bottom:14px solid var(--ink);overflow:hidden}
.book{all:unset;cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-family:var(--mono);font-size:13px;transition:transform 300ms var(--ease);flex:0 0 auto}
.book b{font-weight:400;font-size:15px}
.book:hover{transform:rotate(180deg) translateY(18px)}
.book[aria-pressed="true"]{transform:rotate(180deg) translateY(34px)}
.bookinfo{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;gap:48px;padding-top:32px;align-items:start;min-height:120px}
.bookinfo .n{font-size:34px;line-height:1.15}

/* rest of the wall */
.col5{column-count:5;column-gap:20px}
.col5 img{width:100%;height:auto;margin:0 0 20px;break-inside:avoid;filter:saturate(.85);transition:filter 300ms,transform 300ms var(--ease)}
.col5 img:hover{filter:none;transform:rotate(-1deg) scale(1.02)}
.lists{display:flex;flex-direction:column;gap:28px}
.lists div{border-top:1px solid rgba(237,233,225,.5);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.lists b{font-weight:400;color:var(--lamp);font-family:var(--mono);font-size:13px}

/* say something */
.say{background:var(--sky)}
.saygrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{all:unset;cursor:pointer;padding:14px 18px;font-family:var(--mono);font-size:13px;border:1px solid var(--chalk)}
.tab[aria-selected="true"]{background:var(--chalk);color:var(--sky)}
form.f{display:flex;flex-direction:column;gap:22px;max-width:720px}
form.f[hidden]{display:none}
.fld{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:13px}
.fld input,.fld textarea,.fld select{font:inherit;font-family:var(--serif);font-size:19px;color:var(--chalk);background:transparent;border:0;border-bottom:1px solid var(--chalk);border-radius:0;padding:10px 0;outline:none;width:100%}
.fld select option{color:var(--ink)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-bottom:3px solid var(--lamp);padding-bottom:8px}
.cork{background:#2A2621;min-height:520px;padding:28px;display:flex;flex-wrap:wrap;gap:20px;align-content:flex-start}
.note{background:var(--paper);color:var(--ink);padding:16px;width:220px;animation:land 600ms cubic-bezier(.2,.8,.2,1) both;transform:rotate(var(--r));position:relative}
.note p{margin:0 0 10px;font-size:17px;line-height:1.45}
.foot{padding:56px var(--gut);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--paper);color:var(--ink)}
.foot img{width:200px;height:70px;object-fit:contain;mix-blend-mode:multiply}

/* case pages */
.cs{background:var(--paper);color:var(--ink)}
.hero-photo{height:680px;overflow:hidden;background:var(--ink)}
.hero-photo img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
.hero-shot{background:var(--ink);padding:64px var(--gut)}
.hero-shot img{width:auto;height:auto;max-width:100%;max-height:640px;margin:0 auto;animation:wipe 1100ms var(--snap) 200ms both}
.hero-type{padding:96px var(--gut);display:flex;flex-direction:column;gap:20px;color:var(--ink)}
.art{max-width:1440px;padding:72px var(--gut) 120px;display:flex;flex-direction:column;gap:88px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:start}
.s1{grid-column:1/span 2}.s3-10{grid-column:3/span 10}.s3-7{grid-column:3/span 7}.s3-5{grid-column:3/span 5}.s9-4{grid-column:9/span 4}.s1-12{grid-column:1/span 12}.s3-8{grid-column:3/span 8}.s11-2{grid-column:11/span 2;justify-self:end}
.art h1{margin:0;font-weight:400;font-size:64px;line-height:1.05;max-width:1000px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{border-top:3px solid var(--acc);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.stat b{font-weight:400;font-size:52px;line-height:1}
.prose{display:flex;flex-direction:column;gap:22px;font-size:20px;line-height:1.72;max-width:660px}
.prose p{margin:0}
.row{display:flex;gap:16px;align-items:flex-start}
.row figure,.side{margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fr{overflow:hidden;background:var(--mist)}
.fr img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.fr:hover img{transform:scale(1.03)}
figcaption{font-family:var(--mono);font-size:11px;line-height:1.5}
.chart{margin:0;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--ink);padding-top:18px}
.bars{display:flex;flex-direction:column;gap:14px}
.brow{display:grid;grid-template-columns:220px minmax(0,1fr) 140px;gap:16px;align-items:center;font-family:var(--mono);font-size:13px}
.track{position:relative;height:30px;background:var(--mist)}
.fill{position:absolute;left:0;top:0;bottom:0;width:0;transition:width 1200ms var(--ease)}
.in .fill{width:var(--w)}
.rng{position:absolute;top:0;bottom:0;border:1px dashed var(--ink)}
.dots{display:grid;gap:6px}
.dot{width:22px;height:22px;border:1px solid var(--ink);transform:scale(0)}
.in .dot{animation:pop 400ms cubic-bezier(.2,.8,.2,1) var(--d) both}
.stack{display:flex;height:56px;background:var(--mist)}
.stack div{width:0;border-right:2px solid #fff;transition:width 1200ms var(--ease)}
.in .stack div{width:var(--w)}
.trow{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.trow .was{font-family:var(--mono);font-size:13px;line-height:1.6;text-decoration:line-through;text-decoration-color:var(--acc)}
.trow .now{font-size:21px;line-height:1.4}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.flow div{border-top:3px solid var(--acc);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.bigstamp{width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  -webkit-mask:radial-gradient(circle 5px at 5px 5px,transparent 4.5px,#000 5px) -5px -5px/10px 10px;mask:radial-gradient(circle 5px at 5px 5px,transparent 4.5px,#000 5px) -5px -5px/10px 10px;opacity:0}
.in .bigstamp{animation:thunk 600ms cubic-bezier(.2,.8,.2,1) 300ms both}
.next{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:center;text-decoration:none;border-top:1px solid var(--line);padding-top:32px}
.next .nx{height:200px;overflow:hidden;background:var(--ink)}
.next .nx img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.next:hover .nx img{transform:scale(1.05)}

/* route page */
.key{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;border:1px solid var(--chalk);padding:10px 14px;display:flex;align-items:center;gap:10px}
.key[aria-pressed="true"]{background:var(--chalk);color:var(--ink)}
.idx path.ln{fill:none;stroke:var(--chalk);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:opacity 200ms,stroke 200ms;stroke-dashoffset:0}
.idx.pick path.ln{opacity:.22}
.idx.pick path.ln.on{opacity:1;stroke:var(--lamp);stroke-width:3}
.eggb{all:unset;cursor:pointer;position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--mono);font-size:11px}
.eggb[aria-pressed="true"]{color:var(--lamp)}
.eggb[aria-pressed="true"] path.shell{fill:var(--lamp)}
.lane{position:relative;border-bottom:1px solid rgba(237,233,225,.35)}
.seg{position:absolute;top:10px;height:36px;border:1px solid var(--chalk);padding:4px 6px;font-family:var(--mono);font-size:11px;line-height:1.3;white-space:nowrap}
.wev{position:absolute;font-family:var(--mono);font-size:11px;line-height:1.3;white-space:nowrap;padding-left:6px;border-left:1px solid var(--chalk)}
.selline{position:absolute;top:0;bottom:0;border-left:1px solid var(--lamp);display:none}
.has-sel .selline{display:block}
.erow{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:56px 140px minmax(0,1fr) 260px;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--chalk);width:100%}
.erow:hover,.erow[aria-pressed="true"]{background:var(--lamp);color:var(--ink)}

/* posts */
.post{max-width:760px;margin:0 auto;padding:72px var(--gut) 120px}
.post h1{font-weight:400;font-size:56px;line-height:1.05;margin:0 0 16px}
.post .prose{max-width:none}
.post h2{font-family:var(--mono);font-weight:400;font-size:13px;margin:32px 0 0}
.post blockquote{margin:24px 0;padding:0;font-size:34px;line-height:1.25}
.post blockquote p{margin:0}
.slides{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 16px}
.slides figure{flex:0 0 auto;margin:0;scroll-snap-align:center}
.slides img{height:min(72vh,720px);width:auto;max-width:none}
.slnav{display:flex;gap:8px;align-items:center}
.slnav button{all:unset;cursor:pointer;border:1px solid currentColor;padding:10px 16px;font-family:var(--mono);font-size:13px}

@media (max-width:900px){
  :root{--gut:20px}
  body{font-size:18px}
  .top nav{display:none}
  .top nav.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--wall);flex-direction:column;padding:16px var(--gut);gap:14px;border-bottom:1px solid rgba(237,233,225,.18)}
  body.light .top nav.open{background:var(--paper)}
  .menu{display:inline-block}
  .top .tools .clock{display:none}
  .lede,.window,.body2,.deskgrid,.saygrid,.bookinfo{grid-template-columns:minmax(0,1fr);gap:24px}
  .h40,.h44{font-size:30px}
  .notecard-wrap{display:none}
  .introm{display:block;padding:24px var(--gut) 40px}
  .wallhint{display:none}
  .prints{column-count:1}
  .frame{height:420px}
  .ba{height:460px}
  .col5{column-count:2}
  .egg{flex-basis:78vw}
  .posts li{grid-template-columns:72px minmax(0,1fr)}
  .posts .k2{display:none}
  .shelf{overflow-x:auto;height:320px}
  .art{padding-top:40px;gap:56px}
  .art h1,.post h1{font-size:38px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:38px}
  .g12>*{grid-column:1/-1 !important;justify-self:stretch !important}
  .row{flex-direction:column}
  .row figure{flex:none !important;width:100%}
  .brow{grid-template-columns:minmax(0,1fr) 90px}
  .brow .track{grid-column:1/-1;grid-row:2}
  .trow{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next{grid-template-columns:minmax(0,1fr)}
  .hero-photo{height:420px}
  .hero-shot{padding:24px var(--gut)}
  .erow{grid-template-columns:40px minmax(0,1fr)}
  .erow .hide-s{display:none}
  .slides img{height:56vh}
  .drawer{padding:24px;min-height:360px}
  .drawer .q{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-r],[data-wipe] img,[data-side] img,.bigstamp,.dot{opacity:1;clip-path:none;transform:none}
  .fill{width:var(--w)}.stack div{width:var(--w)}
}

/* ---------- counter: four roles and their tickets ---------- */
.counter{padding-top:120px;padding-bottom:80px}
.role{border-top:1px solid rgba(237,233,225,.25);padding:56px 0;display:flex;flex-direction:column;gap:32px}
.rolehead{background:var(--rc);color:var(--rf);padding:28px 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rolehead h3{margin:0;font-weight:400;font-size:64px;line-height:1}
.pitch{margin:0;font-size:24px;line-height:1.55;max-width:980px}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pf{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--rc);padding-top:14px;text-decoration:none}
.pf .pl{font-size:22px;line-height:1.3}
.pf .go2{opacity:0;transform:translateX(-6px);transition:opacity 200ms,transform 300ms var(--ease)}
a.pf:hover .go2{opacity:1;transform:none}
.tickets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ticket{--stub:118px;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);background:var(--rc);color:var(--rf);min-height:210px;
  -webkit-mask:radial-gradient(circle 12px at calc(100% - var(--stub)) 0,transparent 11.5px,#000 12px) top/100% 51% no-repeat,radial-gradient(circle 12px at calc(100% - var(--stub)) 100%,transparent 11.5px,#000 12px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 12px at calc(100% - var(--stub)) 0,transparent 11.5px,#000 12px) top/100% 51% no-repeat,radial-gradient(circle 12px at calc(100% - var(--stub)) 100%,transparent 11.5px,#000 12px) bottom/100% 51% no-repeat;
  transition:transform 300ms var(--ease)}
.ticket:hover{transform:translateY(-4px) rotate(-.6deg)}
.tmain{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.tt{font-size:26px;line-height:1.15}
.tw{font-size:15px;line-height:1.5;flex:1}
.tstub{border-left:2px dashed currentColor;padding:20px 14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;transform-origin:0 100%;transition:transform 400ms var(--ease)}
.ticket:hover .tstub{transform:rotate(5deg) translateX(4px)}
.book2{font-family:var(--mono);font-size:13px;background:var(--rf);color:var(--rc);padding:10px 12px;text-decoration:none;writing-mode:horizontal-tb}
.book2:hover{outline:2px solid var(--rf);outline-offset:2px}

/* ---------- simran.gpt ---------- */
.gptb{font-family:var(--mono);font-size:13px;background:var(--lamp);color:var(--ink);padding:8px 12px;text-decoration:none;white-space:nowrap}
.gpt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;padding-top:96px;padding-bottom:96px;border-top:1px solid rgba(237,233,225,.25)}
.gptq{display:flex;flex-direction:column;gap:10px}
.gptq a{display:flex;justify-content:space-between;gap:16px;border:1px solid rgba(237,233,225,.4);padding:16px 18px;text-decoration:none;font-size:20px;transition:background 200ms,color 200ms}
.gptq a:hover{background:var(--chalk);color:var(--ink)}

/* ---------- how my mind works ---------- */
.mind{padding-top:96px;padding-bottom:96px}
.steps{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps li{border-top:2px solid currentColor;padding-top:16px;display:flex;flex-direction:column;gap:12px}
.steps b{font-weight:400;font-size:24px;line-height:1.2}
.steps span:last-child{font-size:16px;line-height:1.55}
.filter{border:1px solid currentColor;padding:28px 32px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px}
.filter ol{margin:0;padding-left:20px;font-size:20px;line-height:1.6}

/* ---------- route, in the mountains ---------- */
body.mountain{--wall:#0F1724;--chalk:#EDF0F2;background:var(--wall);color:var(--chalk)}
html.lamp body.mountain{--wall:#1A1F2A}
.rhero{position:relative;height:88vh;min-height:560px;overflow:hidden;background:#05080D}
.rhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 30s ease-out both}
.rhero-t{position:absolute;left:0;right:0;top:56px;display:flex;flex-direction:column;gap:24px;color:var(--chalk)}
.contours{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%23EDF0F2' stroke-opacity='.07'%3E%3Cpath d='M-20 300 C80 240 160 260 240 210 S420 120 620 170'/%3E%3Cpath d='M-20 330 C90 270 170 290 250 240 S430 150 620 200'/%3E%3Cpath d='M-20 360 C100 300 180 320 260 270 S440 180 620 230'/%3E%3Cpath d='M-20 270 C70 210 150 230 230 180 S410 90 620 140'/%3E%3Cellipse cx='420' cy='120' rx='60' ry='26'/%3E%3Cellipse cx='420' cy='120' rx='100' ry='46'/%3E%3Cellipse cx='420' cy='120' rx='140' ry='66'/%3E%3C/g%3E%3C/svg%3E");background-size:600px 400px}
.keys{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
body.mountain .key{border-color:var(--chalk)}
.rgrid{display:grid;grid-template-columns:120px minmax(0,1fr)}
.ralt{display:flex;flex-direction:column;justify-content:space-between;height:360px;padding-top:56px}
.rplot{position:relative}
.eggline{position:relative;height:56px}
.rsvg{position:relative;height:360px;border-bottom:1px solid var(--chalk)}
.rsvg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.idx path.ln{stroke-dasharray:1;stroke-dashoffset:1}
.idx.in path.ln,.in .idx path.ln{animation:draw 2400ms cubic-bezier(.6,0,.2,1) both}
.lanes .lane{margin-bottom:0}
.lanes>span{padding-top:18px}
body.mountain .erow{border-bottom-color:rgba(237,240,242,.35)}
.flags{display:flex;gap:6px;padding:24px 0 0;border-top:1px solid var(--chalk);margin-top:40px;overflow:hidden}
.flags i{flex:0 0 40px;height:30px;transform-origin:50% 0;animation:flag 3s ease-in-out var(--d) infinite;opacity:.9}
@keyframes flag{0%,100%{transform:rotate(-4deg) skewX(-3deg)}50%{transform:rotate(4deg) skewX(3deg)}}

/* ---------- desk page ---------- */
body.deskp{--wall:#F2B632;background:var(--wall);color:var(--ink)}
body.deskp .top{background:var(--wall);border-bottom-color:rgba(21,23,27,.2)}
.dhero,.whero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:78vh}
.dhero>img,.whero>img{width:100%;height:100%;object-fit:cover;animation:kb 24s ease-out both}
.dhero>div,.whero>div{padding-top:72px;padding-bottom:72px;display:flex;flex-direction:column;justify-content:flex-end;gap:28px}
.dhero>.dhero-t,.whero>.whero-t{position:static}
.deskall{padding-top:96px;padding-bottom:120px;display:flex;flex-direction:column;gap:72px}
.drwh{display:flex;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);padding-top:12px;margin-bottom:24px}
.drwlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pcard{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.pcard .fr img{height:auto}
.pcard .pt{font-size:26px;line-height:1.2}
.pcard .ps2{font-size:16px;line-height:1.55}
.pcard.wait{opacity:.6;border:1px dashed var(--ink);padding:18px}
a.pcard:hover .pt{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ---------- workshop ---------- */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.wcard{display:flex;flex-direction:column;gap:16px}
.wcard .fr img{height:auto}
.wtype{background:rgba(237,233,225,.08);padding:36px 24px;color:var(--lamp);display:flex;align-items:flex-end;min-height:180px}
.wmeta h3{margin:4px 0 10px;font-weight:400;font-size:30px;line-height:1.15}
.wmeta dl{margin:0 0 14px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 14px;font-size:16px;line-height:1.55}
.wmeta dt{font-family:var(--mono);font-size:12px;padding-top:3px;opacity:.75}
.wmeta dd{margin:0}
.wmeta .mindd{color:var(--lamp)}
.killed{display:flex;flex-direction:column}
.kill{display:grid;grid-template-columns:260px minmax(0,1fr) minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid rgba(237,233,225,.35);align-items:baseline}
.kill .kt{font-size:24px;text-decoration:line-through;text-decoration-color:var(--red)}

/* ---------- posts ---------- */
.post-cover{background:var(--ink);height:520px;overflow:hidden}
.post-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.post-sum{font-size:22px;line-height:1.55;margin:24px 0 40px}
.carousel{padding:8px 0 24px}

@media (max-width:900px){
  .rolehead h3{font-size:40px}
  .pitch{font-size:20px}
  .proof,.tickets,.steps,.drwlist,.wgrid{grid-template-columns:minmax(0,1fr)}
  .gpt,.filter,.dhero,.whero,.kill{grid-template-columns:minmax(0,1fr)}
  .dhero>img,.whero>img{height:46vh}
  .rhero{height:70vh}
  .rgrid{grid-template-columns:44px minmax(0,1fr)}
  .rgrid.lanes{grid-template-columns:minmax(0,1fr)}
  .rgrid.lanes .lane{overflow-x:auto}
  .rsvg,.ralt{height:240px}
  .post-cover{height:340px}
}

.route{overflow-x:clip}
/* phones: the header keeps its tools, drops their words */
@media (max-width:600px){
  .top{gap:10px;padding:12px 16px}
  .top .name{font-size:16px;line-height:1.15;max-width:7.5em}
  .top .tools{gap:12px}
  .lampb .lt,.stampc .sw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .gptb{padding:7px 9px;font-size:12px}
}
.dhero,.whero{overflow:hidden}
/* saahas, the political room: maroon, chalk, one rule */
body.saahasp{--wall:#4A1520;--chalk:#F1E9E4;--acc:#F2B632;background:var(--wall);color:var(--chalk)}
html.lamp body.saahasp{--wall:#3A1119}
body.saahasp .top{background:var(--wall);border-bottom-color:rgba(241,233,228,.2)}
.shero>img{object-position:50% 40%}
.srule{border-top:3px solid var(--acc);border-bottom:1px solid rgba(241,233,228,.25);padding:28px 0 32px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px;align-items:baseline}
.srule .h40{font-style:italic}
.smap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;margin-top:40px}
.smap .fr img{width:100%;height:auto;display:block;border:1px solid rgba(241,233,228,.25)}
.sparts{list-style:none;display:flex;flex-direction:column}
.sparts li{display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding:16px 0;border-bottom:1px solid rgba(241,233,228,.22)}
.sparts li:first-child{padding-top:0}
.sparts .sn{grid-row:span 2;color:var(--acc)}
.sparts b{font-weight:500;font-size:20px}
.sparts span:last-child{opacity:.82;font-size:16px;line-height:1.45}
.sstats{margin-top:56px}
.saxes{margin:40px 0 32px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.saxes .k{width:100%;margin-bottom:6px}
.sax{border:1px solid rgba(241,233,228,.45);padding:7px 12px;font-family:var(--mono);font-size:13px}
.arrow.big{font-size:22px}
.iag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.iag blockquote{border-top:3px solid var(--acc);padding-top:20px}
.iag blockquote p{font-size:26px;line-height:1.25}
.srest{list-style:none;margin-top:32px;border-top:1px solid rgba(241,233,228,.35)}
.srest li{display:grid;grid-template-columns:140px minmax(0,4fr) minmax(0,5fr);gap:24px;padding:18px 0;border-bottom:1px solid rgba(241,233,228,.22);align-items:baseline}
.srest .t{font-size:21px;line-height:1.3}
.srest .d{opacity:.8;font-size:16px;line-height:1.45}
@media (max-width:900px){
  .srule,.smap,.iag{grid-template-columns:minmax(0,1fr)}
  .srest li{grid-template-columns:minmax(0,1fr);gap:6px}
  .iag blockquote p{font-size:22px}
}
.iag blockquote{margin:0}.srest,.sparts{padding:0;margin-left:0}

/* =========================================================
   v2: photos over paint. colour stays in lines, numbers and light,
   fields come from the photographs, cut into the shapes of the places
   ========================================================= */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  --hair:rgba(237,233,225,.22);
  --cut-window:polygon(9% 0,91% 0,100% 100%,0 100%);
  --cut-ridge:polygon(0 9%,9% 3%,17% 8%,28% 0,39% 7%,47% 4%,58% 11%,69% 2%,80% 8%,90% 1%,100% 6%,100% 100%,0 100%);
  --cut-slant:polygon(0 0,100% 5%,93% 100%,0 95%)}
/* atmosphere: a section lit by its photograph */
.atmo{position:relative;isolation:isolate;background:none !important}
.atmo::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--ph) center/cover no-repeat;opacity:var(--pho,.22);filter:grayscale(.4) contrast(1.06)}
.atmo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--wall) 0,color-mix(in srgb,var(--wall) 35%,transparent) 24%,color-mix(in srgb,var(--wall) 35%,transparent) 76%,var(--wall) 100%)}

/* heroes: the photo blurred into the room, the sharp one cut into a shape */
.hero2{position:relative;isolation:isolate;background:transparent}
.hero2::before{content:"";position:absolute;inset:-60px;z-index:-2;background:var(--ph) center/cover;filter:blur(42px) saturate(1.15);opacity:.5}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--wall) 20%,transparent) 0,var(--wall) 78%),linear-gradient(0deg,var(--wall) 0,transparent 30%),var(--grain);background-blend-mode:normal,normal,overlay}
.hero2>img{width:calc(100% - var(--gut));height:calc(100% - 112px);margin:64px 0 48px var(--gut);box-shadow:none}
.shape-window>img{clip-path:var(--cut-window)}
.shape-ridge>img{clip-path:var(--cut-ridge)}
.shape-slant>img{clip-path:var(--cut-slant)}
/* the Ladakhi window gets its frame, drawn as a second, larger cut behind */
.shape-window{--frame:#2A1F17}
.shape-window>.frame-b{display:none}

/* a case hero painted in its accent becomes a tint */
.hero-type{box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.66)}

/* the desk page: warm night, window flowers in the glass */
body.deskp{--wall:#17140F;background:var(--wall);color:var(--chalk)}
body.deskp .top{background:color-mix(in srgb,var(--wall) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--hair)}
body.deskp .drw{border-color:var(--hair)}
body.deskp .drwh{border-top-color:var(--lamp)}
body.deskp .pcard.wait{border-color:rgba(237,233,225,.3)}

/* saahas: dusk over the bazaar, maroon only as light, never a wall */
body.saahasp{--wall:#151012;background:radial-gradient(1100px 700px at 12% -8%,rgba(110,29,42,.55),transparent 70%),radial-gradient(900px 700px at 100% 55%,rgba(110,29,42,.22),transparent 70%),var(--wall);background-attachment:fixed}
body.saahasp .top{background:color-mix(in srgb,var(--wall) 85%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.smap .fr{clip-path:polygon(0 0,100% 0,100% 94%,96% 100%,0 100%)}
.iag blockquote{background:linear-gradient(180deg,rgba(110,29,42,.28),transparent 85%);padding:22px 20px 26px}
.srule{background:linear-gradient(90deg,rgba(110,29,42,.35),transparent 70%);padding-left:24px;padding-right:24px}

/* the route: the milky way stays faintly in the sky behind the whole page */
body.mountain{background:linear-gradient(180deg,rgba(15,23,36,.82),rgba(15,23,36,.96) 40%),url(/img/ladakh/milky-way.jpg) center top/cover fixed,#0F1724}

@media (max-width:900px){
  .hero2>img{width:calc(100% - 2 * var(--gut));height:46vh;margin:24px var(--gut) 0}
  .hero2::after{background:linear-gradient(0deg,var(--wall) 0,transparent 60%),var(--grain)}
  body.mountain{background-attachment:scroll}
}
@media (prefers-reduced-transparency:reduce){
}
.pcard.wait{align-self:start}
body.deskp{background:linear-gradient(180deg,rgba(23,20,15,.88),rgba(23,20,15,.97) 55%),url(/img/ladakh/window-flowers.jpg) center/cover fixed,#17140F}
@media (max-width:900px){body.deskp{background-attachment:scroll}}
.wcard{scroll-margin-top:96px}