/* PHONE — the v3 site laid out for a phone (12 Oct 2026). Loaded only at ≤700px (media on the <link>).
   Principles, after two rounds of patching desktop layouts down to phone size didn't hold on a real phone:
     · nothing depends on the screen's HEIGHT. A real phone's visible height is 600–740px and changes as the address bar
       moves, so every pinned, full-height stage with absolutely placed content becomes plain flow here, sized by its
       content. Only the Interlude stays a full-screen moment, sized to the visible screen (svh).
     · one scale: display 13vw, title 10vw, sub 6.4vw, body 16px, small 14px, labels 10.5px; one 20px gutter (--m);
       sections open with 72px and close with 72px.
     · motion is calm: scroll-linked moves of a few % (compositor-run), finished by the time a block is readable.
   Rules on elements styled at runtime by orig.js carry !important (its stylesheet is added after this one). */

:root{--m:20px;--gap:12px;--t-mega:clamp(56px,17vw,80px);--t-xl:clamp(44px,13vw,60px);--t-l:clamp(36px,10vw,48px);--t-m:clamp(22px,6.4vw,30px);
  --t-b:16px;--t-s:14px;--t-xs:10.5px}
.meta{padding:22px 0 10px}
.sec{padding:0 var(--m)}
html,body{overflow-x:clip}   /* belt and braces: nothing can pan the page sideways on a real phone */

/* ── the landing: the column moves up into the top half and the name grows to ~4/5 of the width (tide.js fitName);
   on a tall screen the glyph dome sits lower (tide.js dome), so it rises under the words instead of through them.
   Positions are in vh (= the large viewport, like the canvas): the address bar moving never shifts them.
   The corner link and the sound button share one line, clear of the notch ── */
html[data-lay=d] .words .tag{top:calc(29vh - var(--nh,90px)*.5 - 30px)}
html[data-lay=d] .words .nmw{top:calc(29vh - var(--nh,90px)*.5)}
html[data-lay=d] .words .lc{top:calc(29vh + var(--nh,90px)*.5 + 16px)}
html[data-lay=d] .words .hl .l1,html[data-lay=d] .words .hl .l2{font-size:clamp(26px,8vw,34px)}
html[data-lay=d] .words .note{margin-top:12px;font-size:14px}
.words .rail{top:calc(max(12px,env(safe-area-inset-top)) + 14px)}
#snd{top:max(12px,env(safe-area-inset-top))!important;right:max(14px,env(safe-area-inset-right))!important}   /* 36 px tall: its middle (30 px) is level with the corner link */

/* ── ABOUT: stacked — label, headline, the print (in the flow, tilted, overlapping a little), the statement, details, numbers ── */
#s-about,#a-card,.card{height:auto!important}
.card{padding:0 var(--m) 72px;overflow:visible}
#a-big{margin-top:28px!important;font-size:var(--t-xl)!important;white-space:normal;line-height:.9!important}
#a-big .l2,#a-big .l3{padding-left:0!important}
#a-print{position:relative!important;left:auto!important;top:auto!important;width:50vw!important;margin:-6px 4px 0 auto!important;display:block}
#a-print .fr{padding:2.4vw 2.4vw 9vw!important}
#a-print .cap{left:3vw!important;bottom:3.2vw!important;font-size:9px!important}
#a-print .pdot{right:3vw!important;bottom:3.4vw!important;width:2vw!important;height:2vw!important}
#a-print .tape{width:20vw!important;height:6vw!important;top:-3vw!important}
#a-low{position:static!important;margin-top:36px;display:flex!important;flex-direction:column;align-items:stretch!important;gap:28px}   /* stretch: the desktop row's align-items:end would push each block to the right edge */
#a-say p{font-size:var(--t-m)!important;max-width:18ch}
#a-det .r{grid-template-columns:7.5em 1fr;padding:11px 0}
#a-det dd{font-size:var(--t-s)}
#a-stats b{font-size:clamp(34px,10vw,46px)!important}
#a-stats div{padding:12px 0 14px}
#a-stats div:nth-child(odd){padding-right:12px} #a-stats div:nth-child(even){padding-left:14px}

/* ── WHAT I DO ── */
#s-do{padding-bottom:72px}
#d-body{margin-top:28px}
#d-l{position:static!important;margin-bottom:40px!important}
#d-l h2{font-size:var(--t-mega)!important}
#d-l .ix{margin:14px 0 18px}
#d-l p{font-size:var(--t-s);max-width:none;text-indent:0}
#d-cts{margin-top:24px;padding-top:16px;gap:16px}
#d-cts b{font-size:clamp(40px,12vw,54px)!important}
.dg{margin-bottom:44px}

/* ── HOW IT GETS MADE ── */
#s-made{min-height:0!important;padding-bottom:40px!important}
#m-mf{font-size:var(--t-m)!important;line-height:1.14!important;padding:40px 0!important;max-width:none}

/* ── INTERLUDE: the one full-screen moment, sized to the visible screen ── */
#s-inter{height:118svh!important}
#s-inter>.o,#oc{height:100svh!important}
#oc .lines p{font-size:12.5vw!important}
#oc .hdl,#oc .hdr{top:22px!important}
#oc .hdr{max-width:52vw;text-align:right;white-space:normal}

/* ── WORK: a swipeable row of cards (orig.js builds .car on phones), the read-out under it ── */
#s-work{height:auto!important}
#s-work>.o,#wk{position:relative!important;height:auto!important;overflow:visible!important;padding:0 0 64px!important}
#wk .wv{display:none!important}
#wk .hdl,#wk .hdr{position:static!important;padding:0 var(--m)}
#wk .hdl{padding-top:22px!important} #wk .hdr{margin-top:4px!important;font-size:var(--t-xs)!important}
#wk .orb{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;display:flex;flex-direction:column}
#wk .word{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:18px 0 -9vw!important;padding:0 var(--m);
  font-size:34vw!important;line-height:.8!important;z-index:0!important;text-align:left}
#wk .car{position:relative;z-index:2;display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:10px 14vw 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#wk .car::-webkit-scrollbar{display:none}
#wk .car .pc{position:relative!important;left:auto!important;top:auto!important;transform:none!important;filter:none!important;flex:0 0 72vw;width:72vw!important;
  scroll-snap-align:center;padding:6px 6px 0!important;border-radius:14px!important;transition:scale .5s var(--ez),opacity .5s var(--ez)}
#wk .car .pc:not(.cur){scale:.92;opacity:.72}
#wk .car .pc .ft{padding:10px 4px 12px!important;font-size:12px!important}
#wk .dots{display:flex;justify-content:center;gap:6px;margin:0 0 22px}
#wk .dots i{display:block;width:18px;height:3px;border-radius:2px;background:rgba(22,22,26,.18);transition:background .4s var(--ez),width .4s var(--ez)}
#wk .dots i.on{width:30px;background:#16161A}
#wk .read{position:static!important;max-width:none!important;padding:0 var(--m)}
#wk .read .nm{font-size:var(--t-l)!important}
#wk .read p{font-size:var(--t-b)!important}
#wk .count{position:static!important;text-align:left!important;padding:10px var(--m) 0}

/* ── OPEN SOURCE: the story, then every patch as a note in a grid, then the three repos as a legend ── */
#s-oss{height:auto!important}
#s-oss>.o,#os{position:relative!important;height:auto!important;overflow:visible!important;padding:22px var(--m) 72px!important;display:flex!important;flex-direction:column}
#os .a{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important}
#os .hdr{margin-top:4px;font-size:var(--t-xs)!important}
#os .rw{display:none!important}
#os .story{order:1;margin-top:26px!important;text-align:left!important;font-size:var(--t-m)!important;line-height:1.2!important}
#os .pz{order:2;position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px 10px;margin-top:34px;pointer-events:auto}
#os .pt{position:relative!important;left:auto!important;top:auto!important;width:auto!important}
#os .pt .cd{padding:10px 9px 10px!important}
#os .pt .no{font-size:9px!important;margin-bottom:5px!important}
#os .pt .tx{font-size:12px!important;line-height:1.2!important}
#os .r1,#os .r2,#os .r3{order:3;display:inline-block;margin-top:22px}
#os .r1{margin-top:30px!important}
#os .ro{display:none!important}

/* ── METHOD ── */
#s-method .stick{padding:0 var(--m) 64px!important;min-height:0!important}
#me-l h2{font-size:var(--t-l)!important}
#me-fig{margin-top:36px}

/* ── KIT: plain flow (already), and its section no longer clips it ── */
#s-kit{height:auto!important}
#kt .hd{font-size:var(--t-xl)!important}

/* ── RECORD ── */
#s-record{padding-bottom:72px}
#r-head{margin-top:28px!important}
#r-head h2{font-size:var(--t-mega)!important}
#r-head p{margin-top:18px;font-size:var(--t-s)!important}
#r-ex{margin-top:40px!important}
.rx{margin-top:36px!important}
.rx .fig{font-size:clamp(56px,18vw,80px)!important;margin:20px 0 10px!important}
#r-hack{margin-top:56px!important}
#r-study{margin-top:48px!important}

/* ── CONTACT ── */
#c-ui{min-height:0!important;padding-bottom:20px!important}
#s-contact .stick{height:100svh!important;margin-bottom:-100svh!important}
#c-hl{margin-top:56px!important;font-size:clamp(48px,14.5vw,72px)!important}   /* clears the sound button when it reaches the top */
#c-sub{font-size:var(--t-m)!important}
#c-low{padding-top:72px!important;row-gap:28px}
#c-em button{font-size:calc((100vw - 2*var(--m))/12.6)!important}   /* the whole width on a phone */
#c-nav{margin-top:56px!important;font-size:11vw!important;justify-content:flex-start!important;flex-wrap:wrap;gap:.06em .3em!important}
#c-foot{display:grid!important;grid-template-columns:1fr auto;row-gap:10px;align-items:baseline}
#c-foot>span:first-child{grid-column:1/-1}

/* ── calm scroll motion (compositor-run): a few % of movement, done by the time a block is readable ── */
@supports (animation-timeline: view()){
  #a-big,#d-l h2,#me-l h2,#r-head h2,#c-hl,#kt .hd,#wk .word,#r-hack .hk-t{animation:p-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  @keyframes p-rise{from{translate:0 5vw;opacity:.35}to{translate:0 0;opacity:1}}
  #a-print{animation:p-tilt linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  @keyframes p-tilt{from{rotate:5deg;translate:0 4vh}to{rotate:0deg;translate:0 0}}
  .rx,#me-fig,#r-hack{animation:p-up linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
  @keyframes p-up{from{translate:0 5vh}to{translate:0 0}}
  .rx .fig{animation:p-side linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
  @keyframes p-side{from{translate:-5vw 0}to{translate:0 0}}   /* from the left: a start state never widens the page */
  #os .pt:nth-child(3n+1){animation:p-up linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  #os .pt:nth-child(3n+2){animation:p-up2 linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  #os .pt:nth-child(3n){animation:p-up3 linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  @keyframes p-up2{from{translate:0 8vh}to{translate:0 0}}
  @keyframes p-up3{from{translate:0 3vh}to{translate:0 0}}
  #kt .tile{animation:p-tile linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
  @keyframes p-tile{from{scale:.9}to{scale:1}}
  .dg .hd{animation:p-side linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
}
@media (prefers-reduced-motion:reduce){
  #a-big,#d-l h2,#me-l h2,#r-head h2,#c-hl,#kt .hd,#wk .word,#r-hack .hk-t,#a-print,.rx,#me-fig,#r-hack,.rx .fig,#os .pt,#kt .tile,.dg .hd{animation:none!important}
  #wk .car{scroll-behavior:auto}
}