/* 13 Haku: gallery white, thin type, wide margins. Very little moves, and only because the sun did. */
:root{
  --paper:#FAFAF7;
  --ink:#262624; --ink-2:#62625D; --ink-3:#8C8C86;
  --hair:rgba(38,38,36,.17); --hair-2:rgba(38,38,36,.09);
  --light:#F4E9CB;
  --mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"IBM Plex Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --latin:"Jost","Helvetica Neue",Arial,sans-serif;
  --mg:clamp(20px,5.6vw,92px); --gut:clamp(12px,1.7vw,26px);
  --ease:cubic-bezier(.2,.6,.16,1);
  --slow:1.8s; --pill:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper);overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-weight:300;font-size:14px;line-height:1.95;letter-spacing:.04em;overflow-x:clip;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 0}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.lk-switch img{max-width:none;width:18px}

/* Japanese discipline */
h1,h2,h3,.st{line-break:strict;word-break:auto-phrase;text-wrap:balance}
p,li,dd,figcaption,label,.body{line-break:strict;word-break:auto-phrase;text-wrap:pretty}
.kp{display:inline-block}

.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-inline:var(--mg)}
.st{font-family:var(--mincho);font-weight:200;font-size:clamp(22px,2.15vw,31px);line-height:1.75;letter-spacing:.07em}
.body{font-size:14px;line-height:2;color:var(--ink);letter-spacing:.045em}
.eyebrow{font-family:var(--latin);font-weight:300;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.en-t{font-family:var(--latin);font-weight:300;font-size:13px;letter-spacing:.1em;color:var(--ink-2)}
.no{font-family:var(--latin);font-weight:200;font-size:13px;letter-spacing:.18em;color:var(--ink-2)}
.instr{font-family:var(--latin);font-weight:300;font-size:12.5px;letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1.9;display:flex;flex-direction:column}
.instr .k{letter-spacing:.14em;color:var(--ink-3)}
.mk{display:block;aspect-ratio:880/740;color:var(--ink)}

/* stage */
#stage{position:fixed;left:0;top:0;width:100vw;height:100lvh;z-index:0;display:block;pointer-events:none;background:var(--paper)}
.nogl #stage,.nogl .dims{display:none}
main{position:relative;z-index:1;display:block}
.top{position:absolute;left:0;right:0;top:0;z-index:3;align-items:center;padding-top:clamp(18px,2.6vw,34px)}
.opaque{position:relative;z-index:2;background:var(--paper)}
.materials,.process{border-top:1px solid var(--hair)}
.foot{position:relative;z-index:2}
.dims{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dims span{position:absolute;left:0;top:0;font-family:var(--latin);font-weight:300;font-size:11.5px;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap;will-change:transform}

.brand{grid-column:1/7;display:inline-flex;align-items:center;gap:14px;justify-self:start;min-height:44px}
.brand .mk{width:34px}
.brand-t{display:flex;flex-direction:column;line-height:1.45}
.brand-t b{font-family:var(--mincho);font-weight:300;font-size:13.5px;letter-spacing:.14em}
.brand-t i{font-family:var(--latin);font-style:normal;font-weight:300;font-size:11.5px;letter-spacing:.16em;color:var(--ink-2)}
.top-nav{grid-column:7/13;justify-self:end;display:flex;gap:clamp(16px,2.4vw,36px);font-size:13px;letter-spacing:.14em}
.top-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.top-nav a::after,.foot-nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
@media (hover:hover){.top-nav a:hover::after,.foot-nav a:hover::after{transform:scaleX(1)}}

/* gate: everything arrives through the loader's exit */
.js [data-gate]{opacity:0;transform:translateY(8px);transition:opacity 1.8s var(--ease),transform 2.2s var(--ease)}
.js.gate [data-gate]{opacity:1;transform:none}
.js.gate .hero-t{transition-delay:.7s}.js.gate .hero-sub{transition-delay:1.1s}.js.gate .hero-instr{transition-delay:1.4s}.js.gate .hero-cue{transition-delay:1.9s}
.js [data-r]{opacity:0;transform:translateY(10px);transition:opacity 1.6s var(--ease),transform 2s var(--ease);transition-delay:calc(var(--i,0)*.12s)}
.js [data-r].in{opacity:1;transform:none}

/* hero */
.hero{min-height:100svh;position:relative;grid-template-rows:1fr auto;padding-top:clamp(120px,15vh,170px);padding-bottom:var(--pill);align-items:end}
.hero-t{grid-column:1/3;grid-row:1;align-self:start;writing-mode:vertical-rl;font-family:var(--mincho);font-weight:200;font-size:clamp(30px,3.1vw,46px);line-height:1.7;letter-spacing:.2em;text-wrap:initial;word-break:keep-all;justify-self:start}
.hero-sub{grid-column:1/5;grid-row:2}
.hero-sub .jp{font-family:var(--mincho);font-weight:300;font-size:15px;letter-spacing:.09em}
.hero-sub .en{font-family:var(--latin);font-weight:300;font-size:12.5px;letter-spacing:.08em;line-height:1.75;color:var(--ink-2);margin-top:8px}
.hero-instr{grid-column:10/13;grid-row:2;justify-self:end;text-align:left;min-width:190px}
.hero-cue{position:absolute;left:50%;bottom:calc(var(--pill) + 4px);transform:translateX(-50%);font-size:12px;letter-spacing:.16em;color:var(--ink-2);padding-left:0}
.js.gate .hero-cue{transform:translateX(-50%)}.js .hero-cue{transform:translate(-50%,8px)}
.hero-cue span{display:block;padding-bottom:2px}

.hero-plan{position:absolute;right:var(--mg);top:18vh;width:min(58vw,720px);max-width:none;margin:0}
@media (max-width:767px){.hero-plan{position:relative;right:auto;top:auto;width:auto;grid-column:1/-1;grid-row:2;margin:24px 0}}

/* idea */
.idea{position:relative;min-height:190vh;padding-top:24vh;padding-bottom:28vh;align-content:start;row-gap:0}
.idea-a{grid-column:1/7}
.idea-b{grid-column:1/5;margin-top:17vh}
.idea-b .body+.body{margin-top:1.4em}
.idea-c{grid-column:1/5;margin-top:22vh;display:grid;grid-template-columns:1fr 1fr;gap:18px var(--gut)}
.idea-c dt{font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
.idea-c dd{font-family:var(--latin);font-weight:200;font-size:21px;letter-spacing:.05em;line-height:1.5;border-top:1px solid var(--hair);padding-top:7px;margin-top:3px}

/* day */
.day{position:relative;height:620vh}
.day-pin{position:sticky;top:0;height:100svh;grid-template-rows:auto 1fr auto auto;padding-top:clamp(84px,12vh,120px);padding-bottom:var(--pill)}
.no-js-flat .day-pin{position:static;height:auto}
.day-h{grid-column:1/5;grid-row:1}
.day-date{font-family:var(--mincho);font-weight:300;font-size:15px;letter-spacing:.09em;margin-top:6px}
.clock{grid-column:1/6;grid-row:3;font-family:var(--latin);font-weight:200;font-size:clamp(68px,8.4vw,128px);line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;margin-left:-.04em}
.caps{grid-column:1/5;grid-row:4;position:relative;min-height:112px;margin-top:18px}
.caps li{display:block;max-width:27em;padding-bottom:6px}
.js .caps li{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(5px);transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.js .caps li.on{opacity:1;transform:none}
.cap-t{display:none;font-family:var(--latin);font-size:12px;letter-spacing:.1em;color:var(--ink-2)}
html:not(.js) .cap-t{display:block}
.cap-b{font-family:var(--mincho);font-weight:300;font-size:15px;line-height:2;letter-spacing:.06em;display:block}
.day-side{grid-column:11/13;grid-row:1;justify-self:end;min-width:112px}
.scale{grid-column:5/13;grid-row:4;align-self:end;position:relative;height:30px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.scale b{position:absolute;left:calc(var(--p)*100%);bottom:6px;transform:translateX(-50%);font-family:var(--latin);font-weight:300;font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.scale b:first-of-type{transform:none}.scale b:last-of-type{transform:translateX(-100%)}
.scale::before{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc(100%/12))}
.scale-p{position:absolute;left:0;bottom:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--light);box-shadow:0 0 0 1px rgba(38,38,36,.55);transform:translateX(calc(var(--sp,0)*1px))}

/* works */
.works{position:relative;padding-bottom:30vh}
.works-head{padding-top:26vh;padding-bottom:30vh}
.works-head .st{grid-column:1/8}
.work{position:relative;min-height:220vh;align-content:start;padding-bottom:40vh}
.work-win{display:none}
.work-t{position:sticky;top:clamp(90px,13vh,130px)}
.w1 .work-t{grid-column:1/6}
.w2 .work-t{grid-column:8/13}
.w3 .work-t{grid-column:1/6}
.work h3{font-family:var(--mincho);font-weight:200;font-size:clamp(28px,2.9vw,42px);letter-spacing:.14em;line-height:1.5;margin-top:6px}
.meta{display:grid;grid-template-columns:repeat(4,auto);gap:0 var(--gut);margin-top:22px;justify-content:start;border-top:1px solid var(--hair);padding-top:10px}
.meta dt{font-size:12px;letter-spacing:.1em;color:var(--ink-2);line-height:1.7}
.meta dd{font-size:13px;letter-spacing:.05em;line-height:1.7;white-space:nowrap}
.work .body{margin-top:22px;max-width:33em}
.draw{margin-top:26px;max-width:470px}
.draw svg{display:block;width:100%;height:auto;overflow:visible}
.draw figcaption{font-size:12px;letter-spacing:.1em;color:var(--ink-2);margin-bottom:8px}
.work-live{flex-direction:row;display:block;margin-top:12px}
.dl{fill:none;stroke:var(--ink);stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease);transition-delay:calc(var(--i,0)*.03s)}
.dl.h{stroke:var(--ink-3);stroke-width:.5}
.dl.d{stroke:var(--ink-2);stroke-width:.5}
.dl.ray{stroke:#B59A55;stroke-width:.7}
.po{fill:var(--ink);opacity:0;transition:opacity 2.2s var(--ease) 1.6s}
.pc{fill:rgba(38,38,36,.05);opacity:0;transition:opacity 2.2s var(--ease) 1.6s}
.dt{font-family:var(--latin);font-weight:300;font-size:12px;letter-spacing:.06em;fill:var(--ink-2);opacity:0;transition:opacity 1.6s var(--ease) 2s}
.dt.jp{font-family:var(--gothic)}
.draw.drawn .dl{stroke-dashoffset:0}
.draw.drawn .po{opacity:.88}.draw.drawn .pc{opacity:1}.draw.drawn .dt{opacity:1}
html:not(.js) .dl{stroke-dashoffset:0}

/* materials */
.materials{padding-top:clamp(110px,16vh,190px);padding-bottom:clamp(120px,20vh,220px);row-gap:clamp(60px,10vh,110px);align-items:start}
.m-head{grid-column:1/5;grid-row:1}
.m-head .st{margin-top:12px}
.mat canvas{display:block;width:100%;background:#F2F1EC}
.mat figcaption{margin-top:16px}
.mat h3{font-family:var(--mincho);font-weight:300;font-size:19px;letter-spacing:.14em;line-height:1.5}
.mat .en-t{margin-bottom:8px}
.mat .instr{margin-top:8px;display:block}
.m1{grid-column:6/13;grid-row:1;display:grid;grid-template-columns:5fr 2fr;column-gap:var(--gut);align-items:end}
.m1 canvas{aspect-ratio:5/6}
.m1 figcaption{margin:0;padding-bottom:2px}
.m2{grid-column:2/6;grid-row:2;margin-top:-6vh}
.m2 canvas{aspect-ratio:1/1.08}
.m3{grid-column:6/13;grid-row:2;margin-top:12vh;display:grid;grid-template-columns:1fr;}
.m3 canvas{aspect-ratio:16/8}
.m3 figcaption{display:grid;grid-template-columns:1fr 2fr;column-gap:var(--gut)}
.m3 figcaption h3,.m3 figcaption .en-t{grid-column:1}
.m3 figcaption .body{grid-column:2;grid-row:1/3}
.m3 figcaption .instr{grid-column:1}

/* tool */
.tool{position:relative;min-height:100svh}
.tool-in{min-height:100svh;grid-template-rows:auto 1fr auto;padding-top:clamp(60px,9vh,96px);padding-bottom:var(--pill);row-gap:12px}
.tool-h{grid-column:1/5;grid-row:1}
.tool-h .st{margin-top:6px}
.tool-lead{margin-top:12px;max-width:21em}
.reads{grid-column:1/4;grid-row:3;align-self:end;display:grid;gap:8px}
.reads div{border-top:1px solid var(--hair);padding-top:5px}
.reads dt{font-size:12px;letter-spacing:.08em;color:var(--ink-2);line-height:1.6}
.reads dd{font-family:var(--latin);font-weight:300;font-size:17px;letter-spacing:.04em;line-height:1.35;font-variant-numeric:tabular-nums}
.reads dd small{font-family:var(--gothic);font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.reads .r-time dd{font-weight:200;font-size:clamp(46px,4.6vw,66px);line-height:1.05}
.ctl{grid-column:4/13;grid-row:3;align-self:end}
.arc-wrap{position:relative}
.arc{display:block;width:100%;height:clamp(170px,27vh,250px);touch-action:pan-y;overflow:visible;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.arc .hnd{touch-action:none;cursor:grab;outline:none}
.arc .hnd:focus-visible .ring{stroke:var(--ink);stroke-width:1.2}
.arc text{font-family:var(--latin);font-weight:300;font-size:12px;letter-spacing:.05em;fill:var(--ink-2)}
.arc text.jp{font-family:var(--gothic)}
.date-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:var(--gut);margin-top:6px}
.date-l{font-size:12px;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap}
.date-l output{font-family:var(--mincho);font-weight:300;font-size:15px;color:var(--ink);letter-spacing:.06em;margin-left:6px;display:inline-block;min-width:5.2em}
.date-stops{display:flex;gap:4px}
.date-stops button{appearance:none;background:none;border:0;border-bottom:1px solid transparent;min-height:44px;min-width:48px;padding:0 6px;font-size:13px;letter-spacing:.1em;cursor:pointer;line-height:1.3;transition:border-color .8s var(--ease)}
.date-stops button small{display:block;font-family:var(--latin);font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.date-stops button[aria-pressed="true"]{border-bottom-color:var(--ink)}
#date{appearance:none;-webkit-appearance:none;width:100%;height:44px;background:transparent;margin:0;touch-action:pan-y;cursor:ew-resize}
#date::-webkit-slider-runnable-track{height:1px;background:var(--ink-3)}
#date::-moz-range-track{height:1px;background:var(--ink-3)}
#date::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
#date::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}

/* process */
.process{padding-top:clamp(110px,16vh,180px);padding-bottom:clamp(110px,16vh,180px);row-gap:64px}
.p-head{grid-column:1/5}
.p-head .st{margin-top:12px}
.gantt-wrap{grid-column:1/13;position:relative}
.months{position:relative;height:22px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,7fr);column-gap:var(--gut);font-family:var(--latin);font-weight:300;font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.months div{grid-column:3;position:relative}
.months span{position:absolute;left:calc(var(--m)/24*100%);transform:translateX(-50%);white-space:nowrap}
.months span:first-child{transform:none}.months span:last-child{transform:translateX(-100%)}
.gantt li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,7fr);grid-template-rows:auto auto;column-gap:var(--gut);border-top:1px solid var(--hair);padding:16px 0 18px;position:relative}
.gantt li:last-child{border-bottom:1px solid var(--hair)}
.gantt h3{grid-column:1;font-family:var(--mincho);font-weight:300;font-size:17px;letter-spacing:.1em;line-height:1.7}
.gantt h3 .no{display:inline-block;width:2.6em}
.gantt .dur{grid-column:2;font-size:13px;color:var(--ink-2);line-height:2.2}
.gantt .body{grid-column:1/3;grid-row:2;margin-top:4px;padding-left:calc(2.6em*13/14);max-width:32em}
.bar{grid-column:3;grid-row:1/3;position:relative;display:block;align-self:stretch;min-height:28px;background:linear-gradient(90deg,var(--hair-2) 1px,transparent 1px) 0 0/calc(100%/4) 100%}
.bar::before{content:"";position:absolute;top:13px;left:calc(var(--s)/24*100%);width:calc(var(--d)/24*100%);height:1px;background:var(--ink);transform-origin:left;transition:transform 2.4s var(--ease)}
.bar::after{content:"";position:absolute;top:10px;left:calc((var(--s) + var(--d))/24*100%);width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--light);box-shadow:0 0 0 1px rgba(38,38,36,.55);transition:opacity 1s var(--ease) 2.1s}
.js [data-rl] .bar::before{transform:scaleX(0)}
.js [data-rl] .bar::after{opacity:0}
.js [data-rl].in .bar::before{transform:none}
.js [data-rl].in .bar::after{opacity:1}

/* studio */
.studio{padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(110px,18vh,190px);align-items:start;border-top:1px solid var(--hair-2)}
.s-a{grid-column:1/6}
.s-a .st{margin-top:12px}
.s-a .body{margin-top:26px;max-width:26em}
.people{margin-top:36px;border-top:1px solid var(--hair);max-width:420px}
.people li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--hair-2);padding:7px 0}
.people b{font-family:var(--mincho);font-weight:300;letter-spacing:.14em;font-size:14.5px}
.people span{font-size:13px;color:var(--ink-2)}
.mail{margin-top:26px;font-family:var(--latin);font-weight:300;font-size:15px;letter-spacing:.06em}
.mail a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--hair)}
.form{grid-column:7/13;position:relative}
.form-t{font-family:var(--mincho);font-weight:300;font-size:19px;letter-spacing:.14em;margin-bottom:20px}
.fld{margin-bottom:22px}
.fld label{display:block;font-size:13px;letter-spacing:.08em;color:var(--ink-2)}
.fld input,.fld textarea{display:block;width:100%;appearance:none;background:transparent;border:0;border-bottom:1px solid var(--ink-3);border-radius:0;padding:9px 0;min-height:44px;font-size:16px;letter-spacing:.03em;resize:vertical;transition:border-color .6s var(--ease)}
.fld input::placeholder{color:var(--ink-3)}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.fld .bad{border-bottom-color:#8A4B3A}
.form-end{display:flex;align-items:center;gap:20px;margin-top:6px}
.send,.again{appearance:none;background:transparent;border:1px solid var(--ink);border-radius:0;min-height:46px;min-width:128px;padding:0 26px;letter-spacing:.3em;cursor:pointer;transition:background 1s var(--ease),color 1s var(--ease)}
@media (hover:hover){.send:hover,.again:hover{background:var(--ink);color:var(--paper)}}
.form-err{font-size:13px;color:#8A4B3A;min-height:1.4em}
.done{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-top:44px}
.done[hidden]{display:none}
.done:focus{outline:none}
.form.sent>:not(.done){visibility:hidden}
.done-t{font-family:var(--mincho);font-weight:200;font-size:clamp(22px,2.15vw,31px);letter-spacing:.08em;margin-bottom:10px}
.again{margin-top:24px;letter-spacing:.14em}

/* footer */
.foot-panel canvas{display:block;width:100%;height:clamp(240px,46vh,440px);background:#F2F1EC}
.foot-row{align-items:start;padding-top:26px;padding-bottom:calc(var(--pill) + 18px);row-gap:18px}
.foot-mark{grid-column:1/5;display:inline-flex;align-items:center;gap:12px;font-family:var(--latin);font-weight:300;font-size:12.5px;letter-spacing:.14em;min-height:44px;justify-self:start}
.foot-mark .mk{width:30px}
.foot-note{grid-column:5/10;font-size:12.5px;color:var(--ink-2);padding-top:10px;line-height:1.8}
.foot-nav{grid-column:10/13;justify-self:end;display:flex;gap:18px;font-size:13px;letter-spacing:.12em}
.foot-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px}

/* loader */
#loader{display:none}
.js #loader{display:flex;position:fixed;inset:0;z-index:50;background:var(--paper);align-items:center;justify-content:center;animation:ldfail 1.2s var(--ease) 8s forwards;transition:opacity 1.5s var(--ease),visibility 0s linear 1.5s}
.js #loader.out{opacity:0;visibility:hidden;animation:none}
@keyframes ldfail{to{opacity:0;visibility:hidden}}
.ld{width:min(78vw,880px);height:auto;overflow:visible}
.ld-hz{stroke:var(--ink);stroke-width:.6;vector-effect:non-scaling-stroke}
.ld-sun{fill:var(--light);stroke:var(--ink);stroke-width:.6}
.ld-mark path{fill:none;stroke:var(--ink);stroke-width:7;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--mp,0));stroke-linejoin:miter}

/* ---------- phone ---------- */
@media (max-width:767px){
  body{font-size:14px}
  :root{--pill:92px}
  .brand{grid-column:1/9}
  .brand .mk{width:30px}
  .brand-t b{font-size:13px;letter-spacing:.1em}
  .top-nav{grid-column:9/13;gap:0;font-size:13px}
  .top-nav a:not([href="#sun"]){display:none}
  .pad{position:relative;background:var(--paper);box-shadow:0 0 22px 18px var(--paper)}

  .hero{padding-top:92px;grid-template-rows:auto 1fr auto}
  .hero-t{grid-column:1/-1;grid-row:1;writing-mode:horizontal-tb;font-size:29px;letter-spacing:.14em;line-height:1.6;word-break:keep-all}
  .hero-sub{grid-column:1/8;grid-row:3}
  .hero-sub .en{font-size:12px}
  .hero-instr{grid-column:8/13;grid-row:3;min-width:0;justify-self:end;font-size:12px}
  .hero-cue{display:none}

  .idea{min-height:0;padding-top:20vh;padding-bottom:64vh}
  .idea-a{grid-column:1/-1}
  .idea-b{grid-column:1/-1;margin-top:46vh}
  .idea-c{grid-column:1/-1;margin-top:46vh}

  .day{height:600vh}
  .day-pin{grid-template-rows:auto 1fr auto auto auto;padding-top:80px}
  .day-h{grid-column:1/9}
  .day-side{grid-column:9/13;font-size:12px;min-width:0}
  .clock{grid-column:1/-1;font-size:66px;grid-row:3}
  .caps{grid-column:1/-1;grid-row:4;min-height:92px;margin-top:6px}
  .cap-b{font-size:14px;line-height:1.85}
  .scale{grid-column:1/-1;grid-row:5;margin-top:4px;margin-bottom:0}
  .day-pin .caps li{background:none}

  .works-head{padding-top:14vh;padding-bottom:58vh}
  .works-head .st{grid-column:1/-1}
  .work{min-height:0;padding-bottom:26vh}
  .work-win{display:block;grid-column:1/-1;height:62vh}
  .work-t,.w1 .work-t,.w2 .work-t,.w3 .work-t{grid-column:1/-1;position:relative;top:auto;box-shadow:0 0 26px 20px var(--paper)}
  .meta{grid-template-columns:1fr 1fr;gap:6px var(--gut)}
  .draw{max-width:none}
  .works{padding-bottom:20vh}

  .materials{row-gap:64px}
  .m-head{grid-column:1/-1}
  .m1{grid-column:1/-1;grid-row:auto;grid-template-columns:1fr}
  .m1 figcaption{margin-top:14px}
  .m2{grid-column:3/13;grid-row:auto;margin-top:0}
  .m3{grid-column:1/-1;grid-row:auto;margin-top:0}
  .m3 canvas{aspect-ratio:4/3}
  .m3 figcaption{display:block}

  .tool-in{padding-top:20px;row-gap:0;grid-template-rows:auto minmax(190px,1fr) auto auto;min-height:100svh}
  .tool-h{grid-column:1/-1;background:none;box-shadow:none}
  .tool-h .eyebrow{display:none}
  .tool-h .st{font-size:19px;margin:0}
  .tool-lead{font-size:13px;line-height:1.75;margin-top:2px;max-width:none}
  .reads{grid-column:1/-1;grid-row:3;grid-template-columns:1fr 1fr 1fr;gap:6px 12px;box-shadow:none;background:none}
  .reads .r-time{grid-column:1/-1;border-top:0;display:flex;align-items:baseline;justify-content:space-between}
  .reads .r-time dd{font-size:42px}
  .reads dd{font-size:15px}
  .reads dd small{display:block}
  .reads .r-small{display:none}
  .ctl{grid-column:1/-1;grid-row:4;box-shadow:none;background:none;margin-top:10px}
  .arc{height:132px}
  .date-row{grid-template-columns:1fr auto;row-gap:0}
  .date-l{grid-column:1}
  .date-stops{grid-column:2;grid-row:1}
  #date{grid-column:1/-1}

  .process{row-gap:36px}
  .p-head,.gantt-wrap{grid-column:1/-1}
  .months{display:block}
  .gantt li{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}
  .gantt h3{grid-column:1}
  .gantt .dur{grid-column:2;grid-row:1}
  .bar{grid-column:1/-1;grid-row:2;min-height:26px;margin:2px 0 6px}
  .gantt .body{grid-column:1/-1;grid-row:3;padding-left:0;margin-top:0}

  .s-a,.form{grid-column:1/-1}
  .form{margin-top:72px}
  .foot-mark,.foot-note,.foot-nav{grid-column:1/-1;justify-self:start}
  .foot-note{padding-top:0}
}
@media (max-width:1100px) and (min-width:768px){
  .hero-instr{grid-column:9/13}
  .meta{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s!important;transition-delay:0s!important;animation-duration:.01s!important}
}