/* ===== KIWA 際 v13 — the red thread leads: one stroke across the whole page ===== */
:root{
  --washi:#F6F3EC; --ink:#1A1714; --shu:#D8401F; --hair:#DCD5C7;
  --mid:#7A7468; --soft:#EDE9DF; --dkline:#3A352E; --dkmid:#A39C8F;
  --serif:'Instrument Serif',serif; --sans:'General Sans',sans-serif; --mono:'Spline Sans Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--washi);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--shu);color:var(--washi)}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid)}
.wrap{max-width:1200px;margin:0 auto;padding:0 44px}
@media(max-width:720px){.wrap{padding:0 22px}}

/* ===== boot — the seal is pressed, not bounced ===== */
#boot{position:fixed;inset:0;background:var(--washi);z-index:200;display:grid;place-items:center;transition:opacity .5s ease .1s}
#boot .bseal{display:grid;place-items:center;width:76px;height:76px;background:var(--shu);color:var(--washi);font-size:40px;opacity:0;transform:scale(1.06);filter:blur(4px)}
#boot.go .bseal{animation:press .4s var(--ease) forwards}
#boot.done{opacity:0;pointer-events:none}
@keyframes press{to{opacity:1;transform:scale(1);filter:blur(0)}}

/* ===== mobile progress line ===== */
#mprog{position:fixed;top:0;left:0;height:2px;background:var(--shu);z-index:80;width:0;display:none}
@media(max-width:1000px){#mprog{display:block}}

/* ===== nav — the quiet door ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:60}
nav .bar{display:flex;align-items:center;justify-content:space-between;padding:22px 44px;background:linear-gradient(to bottom,rgba(246,243,236,.92) 30%,rgba(246,243,236,0));transition:background .6s}
@media(max-width:720px){nav .bar{padding:18px 22px}}
body.dark nav .bar{background:linear-gradient(to bottom,rgba(26,23,20,.9) 30%,rgba(26,23,20,0))}
.logo{display:flex;align-items:center;gap:12px;font-weight:500;letter-spacing:.3em;font-size:13px;transition:color .6s}
body.dark .logo{color:var(--washi)}
.seal{display:grid;place-items:center;width:26px;height:26px;background:var(--shu);color:var(--washi);font-size:13px;transition:transform .3s}
.logo:hover .seal{transform:rotate(90deg)}
.nav-cta{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;position:relative;padding:6px 2px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease),color .6s}
.nav-cta.show{opacity:1;transform:none;pointer-events:auto}
.nav-cta::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--shu);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-cta:hover::after{transform:scaleX(1)}
body.dark .nav-cta{color:var(--washi)}

/* ===== the journey — one stroke, drawn across the whole page, ahead of you ===== */
#journey{position:absolute;top:0;left:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .8s var(--ease)}
#journey.alive{opacity:1}
#journey path{fill:none;stroke:var(--shu);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.dark #journey path{filter:drop-shadow(0 0 8px rgba(216,64,31,.55))}
@media(max-width:1000px){#journey{display:none}}
#spine-label{position:fixed;left:58px;bottom:36px;z-index:50;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);transition:color .6s}
#spine-label b{color:var(--shu);font-weight:500}
body.dark #spine-label{color:var(--dkmid)}
#connector{position:fixed;height:1px;background:var(--shu);z-index:55;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);pointer-events:none}

/* ===== the line — fixed stage: thread · maze · divider ===== */
#lineF{position:fixed;inset:0;width:100%;height:100%;z-index:51;pointer-events:none}
#lineF path{fill:none;stroke:var(--shu);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
#lineF g{transition:opacity .4s}
#lineF .fil{stroke-width:.7;transition:stroke .5s,opacity .5s}
#lineF .fil.ghost{stroke:#8A8275;opacity:.45}
#lineF .xo-strike{stroke-width:1.4}
#lineF .slice{stroke-width:1.1}
#lineF .gapmask{stroke:var(--ink);stroke-width:9;opacity:0;transition:opacity .5s var(--ease)}
#lineF .gapmask.open{opacity:1}
.mid-caption .xo{transition:color .5s}
.mid-caption .xo.struck{color:#A39C8F}
.edge-cap .cl{display:inline-block;transition:transform .45s var(--ease)}
#epin.sliced .cl1{transform:translateY(-4px)}
#epin.sliced .cl2{transform:translateY(4px)}
.cell.pinchT{transform:translateX(1px)}
.cell.pinchB{transform:translateX(-1px)}
.gridwall.tear .cell:nth-child(12),.gridwall.tear .cell:nth-child(13),.gridwall.tear .cell:nth-child(14){transform:translateY(-3px)}
.gridwall.tear .cell:nth-child(26),.gridwall.tear .cell:nth-child(27),.gridwall.tear .cell:nth-child(28){transform:translateY(3px)}
.cell.answer{background:#E5A18C!important;transition:background .15s}
#nib{position:fixed;left:44px;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2px;border-radius:50%;background:var(--shu);opacity:.55;z-index:52;pointer-events:none;transition:opacity .4s}
#nib.off{opacity:0}
#nib.breath{animation:breath 1.2s var(--ease)}
@keyframes breath{0%{opacity:.55}45%{opacity:.9}100%{opacity:.55}}

/* ===== the line — document stages: marks · reserve · bends · elbows · curl ===== */
.lineD{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lineD path{fill:none;stroke:var(--shu);stroke-linecap:round;stroke-linejoin:round}
.lineD .tick{stroke-width:1;opacity:.85;transition:stroke-dashoffset .55s var(--ease)}
.lineD .bend{stroke-width:1.1;opacity:.7;transition:stroke-dashoffset .38s var(--ease)}
.lineD .elbow{stroke-width:1.1;transition:stroke-dashoffset .5s var(--ease),stroke .6s,opacity .6s}
.lineD .elbow.scaffold{stroke:#B8B0A1;opacity:.6}
.lineD .branch{stroke-width:1;transition:stroke-dashoffset .5s var(--ease)}
.lineD .dotted{stroke-width:1;stroke-dasharray:3 5;opacity:0;transition:opacity .6s var(--ease) .3s}
.lineD .dotted.in{opacity:.75}
.lineD .curl{stroke-width:1.5}
.lineD .bfl{stroke-width:1;opacity:.8;transition:stroke-dashoffset .45s var(--ease)}
.lineD .datum,.lineD .sect,.lineD .calib{stroke-width:1;opacity:.85;transition:stroke-dashoffset .55s var(--ease)}
.lineD .xh{stroke-width:1;opacity:0;transition:opacity .25s}
.lineD .xh.on{opacity:.9}
.traces,.xings,#caps,.crossing,.otherside,.arrive{position:relative}
.cap.visited h3::before{opacity:1}
@media(max-width:1000px){#spine-label,#connector,#lineF,#nib,.lineD{display:none}}

/* ===== scrollytelling scaffold ===== */
.seq{position:relative}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:0 8vw;pointer-events:none;will-change:opacity,transform}
.beat .b-line{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6.2vw,88px);line-height:1.08;letter-spacing:-.015em;max-width:20ch}
.beat .b-line em{font-style:italic;color:var(--shu)}
.beat .b-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);margin-bottom:30px}

/* line-level reveals — the serif voice rises by the line, never by the word */
.lr{display:block;overflow:hidden}
.li{display:block;will-change:transform,opacity}
.beat[data-beat="0"] .li{opacity:0;transform:translateY(110%);animation:lrise .8s var(--ease) forwards}
@keyframes lrise{to{opacity:1;transform:none}}

/* intro reveal beat */
.brand-reveal{display:flex;flex-direction:column;align-items:center;gap:30px}
.brand-reveal .mark{display:flex;align-items:center;gap:18px;font-weight:500;letter-spacing:.42em;font-size:clamp(22px,3.4vw,36px)}
.brand-reveal .seal-lg{display:grid;place-items:center;width:clamp(44px,6vw,64px);height:clamp(44px,6vw,64px);background:var(--shu);color:var(--washi);font-size:clamp(22px,3.2vw,34px)}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity .6s}
.scroll-cue.show{opacity:1}
.scroll-cue .stem{width:1px;height:44px;background:var(--shu);transform-origin:top;animation:stem 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes stem{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
#skip{position:fixed;right:44px;bottom:36px;z-index:65;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);padding:6px 0;opacity:0;pointer-events:none;transition:opacity .5s}
#skip.show{opacity:1;pointer-events:auto}
#skip:hover{color:var(--shu)}
@media(max-width:720px){#skip{right:22px}}

/* ===== ch01 — the middle ===== */
.gridwall{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(6px,1vw,12px);width:min(620px,74vw)}
.cell{aspect-ratio:1;background:#DCD7CB;transition:background .6s, transform 1.1s var(--ease), opacity .6s}
.gridwall.uniform .cell{background:#DCD7CB}
.cell.free{position:relative;z-index:2}
.gridwall.escape .cell.free{background:var(--shu);transform:translateX(var(--esc,300px)) rotate(90deg)}
.gridwall.escape .cell:not(.free){opacity:.38}
.mid-caption{position:absolute;left:8vw;bottom:11vh;max-width:36ch;text-align:left;opacity:0;transform:translateY(14px);will-change:opacity,transform}
.mid-caption .b-line{font-size:clamp(26px,3.6vw,44px)}
@media(max-width:720px){.mid-caption{left:22px;right:22px;bottom:8vh}}

/* ===== ch02 — the edge (goes dark) ===== */
#epin{background:var(--washi);transition:background .8s}
#epin.dark{background:var(--ink)}
.edge-stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,5vh,52px)}
.pairs{display:flex;flex-direction:column;gap:clamp(22px,4.4vh,46px);width:100%}
.pair{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;opacity:0;will-change:opacity}
.pair .L{text-align:right;padding-right:clamp(20px,3vw,44px);font-family:var(--serif);font-size:clamp(22px,3.6vw,46px);letter-spacing:-.01em;transition:color .8s;will-change:transform}
.pair .R{text-align:left;padding-left:clamp(20px,3vw,44px);font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.6vw,46px);color:var(--shu);letter-spacing:-.01em;will-change:transform}
#epin.dark .pair .L{color:var(--washi)}
.edge-cap{width:100%;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s;padding:0 8vw}
.edge-cap.show{opacity:1;transform:none}
.edge-cap .b-kicker{transition:color .8s}
.edge-cap .b-line{transition:color .8s}
#epin.dark .edge-cap .b-kicker{color:var(--dkmid)}
#epin.dark .edge-cap .b-line{color:var(--washi)}

/* ===== ch03 — 跡 traces — every crossing leaves a mark ===== */
.traces{padding:20vh 0 8vh}
.traces .b-line{font-family:var(--serif);font-size:clamp(34px,5.4vw,72px);line-height:1.05;letter-spacing:-.015em;max-width:16ch}
.traces .b-line em{font-style:italic;color:var(--shu)}
.traces .tr-sub{margin-top:22px;font-size:15.5px;color:var(--mid);max-width:52ch}
.exhibit{margin-top:11vh;border-top:1px solid var(--hair);padding:8vh 0 0}
.ex-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--shu)}
.exhibit h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,52px);letter-spacing:-.015em;margin-top:18px}
.exhibit h3 em{font-style:italic;color:var(--shu)}
.ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-top:7vh}
@media(max-width:860px){.ex-grid{grid-template-columns:repeat(2,1fr)}}
.ex-stat .num{font-family:var(--mono);font-weight:300;font-size:clamp(32px,4.4vw,60px);letter-spacing:-.02em}
.ex-stat .ul{display:block;width:34px;height:1px;background:var(--shu);margin:14px 0 12px;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease) .2s}
.ex-stat.in .ul{transform:scaleX(1)}
.ex-stat .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);line-height:1.7}
.st .num{opacity:0;filter:blur(6px);transform:scale(1.04);transition:opacity .25s ease,filter .25s ease,transform .25s ease;display:inline-block}
.st.in .num{opacity:1;filter:blur(0);transform:none}
.ex-note{margin-top:6vh;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.registry{margin-top:13vh}
.registry .ex-kicker{color:var(--ink)}
table.reg{width:100%;border-collapse:collapse;margin-top:4vh;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
table.reg th{text-align:left;padding:14px 14px 14px 0;color:var(--mid);font-weight:400;border-bottom:1px solid var(--shu)}
table.reg td{text-align:left;padding:18px 14px 18px 0;border-bottom:1px solid var(--hair);color:var(--ink)}
table.reg td:first-child{color:var(--shu)}
table.reg tr:hover td{background:var(--soft)}
.reg-note{margin-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
@media(max-width:720px){table.reg{font-size:9px}.reg-hide{display:none}}

/* ===== ch04 — crossings ===== */
.xings{padding:18vh 0}
.xings .b-line{font-family:var(--serif);font-size:clamp(30px,4.6vw,58px);letter-spacing:-.015em;line-height:1.08;max-width:18ch}
.xings .b-line em{font-style:italic;color:var(--shu)}
.xslate{margin-top:8vh;border:1px solid var(--hair);padding:7vh 6vw;text-align:center}
.xslate .xn{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--shu)}
.xslate p{margin-top:16px;font-size:15px;color:var(--mid)}

/* ===== ch05 — capabilities ===== */
.caps-intro{padding:20vh 0 6vh}
.caps-intro .b-line{font-family:var(--serif);font-size:clamp(34px,5.4vw,72px);line-height:1.05;letter-spacing:-.015em;max-width:16ch}
.caps-intro .b-line em{font-style:italic;color:var(--shu)}
.cap{border-top:1px solid var(--hair);padding:12vh 0;display:grid;grid-template-columns:140px 1fr;gap:30px;align-items:baseline}
@media(max-width:720px){.cap{grid-template-columns:1fr;gap:12px;padding:9vh 0}}
.cap .idx{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--shu)}
.cap h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.015em;line-height:1.08;position:relative;transition:transform .4s var(--ease)}
.cap h3::before{content:"";position:absolute;left:-30px;top:.64em;width:16px;height:1px;background:var(--shu);opacity:0;transition:opacity .4s}
.cap:hover h3{transform:translateX(16px)}
.cap:hover h3::before{opacity:1}
.cap h3 em{font-style:italic;color:var(--shu)}
.cap p{margin-top:16px;font-size:15.5px;color:var(--mid);max-width:52ch}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ===== ch06 — the crossing ===== */
.crossing{padding:18vh 0}
.crossing .b-line{font-family:var(--serif);font-size:clamp(30px,4.6vw,58px);letter-spacing:-.015em;max-width:18ch;line-height:1.08}
.crossing .b-line em{font-style:italic;color:var(--shu)}
.steps{margin-top:10vh;display:flex;flex-direction:column}
.stp{display:grid;grid-template-columns:120px 220px 1fr;gap:30px;align-items:baseline;padding:36px 0;border-top:1px solid var(--hair);transition:background .4s}
.stp:hover{background:var(--soft)}
@media(max-width:720px){.stp{grid-template-columns:64px 1fr;gap:14px}.stp .sd{grid-column:2}}
.stp .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--shu)}
.stp h4{font-family:var(--serif);font-weight:400;font-size:26px}
.stp p{font-size:14.5px;color:var(--mid);max-width:56ch}
.stp .lg{display:block;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.stp .lg b{color:var(--shu);font-weight:500}
.reading{margin-top:12vh;border:1px solid var(--hair);padding:6vh 5vw;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
@media(max-width:860px){.reading{grid-template-columns:1fr}}
.reading h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.015em;margin-top:14px}
.reading h3 em{font-style:italic;color:var(--shu)}
.reading p{margin-top:14px;font-size:14.5px;color:var(--mid);max-width:54ch}
.reading .rside{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.reading .price{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--shu)}

/* ===== ch07 — the other side ===== */
.otherside{padding:18vh 0}
.otherside .b-line{font-family:var(--serif);font-size:clamp(30px,4.6vw,58px);letter-spacing:-.015em;line-height:1.08;max-width:18ch}
.otherside .b-line em{font-style:italic;color:var(--shu)}
.letter{margin-top:8vh;max-width:62ch;font-family:var(--serif);font-size:clamp(20px,2.3vw,27px);line-height:1.55;letter-spacing:-.005em}
.letter p+p{margin-top:1.1em}
.letter em{font-style:italic;color:var(--shu)}
.sig{margin-top:44px;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,34px)}
.sig span{display:block;margin-top:10px;font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
.facts{margin-top:11vh;display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
@media(max-width:720px){.facts{grid-template-columns:1fr}}
.fact{border-top:1px solid var(--hair);padding:22px 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.fact b{display:block;color:var(--ink);font-weight:500;margin-bottom:7px}
.fact .s{color:var(--shu)}

/* ===== ch08 — arrival ===== */
.arrive{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;border-top:1px solid var(--hair);padding:16vh 0}
.arrive .seal-stamp{display:grid;place-items:center;width:84px;height:84px;background:var(--shu);color:var(--washi);font-size:44px;opacity:0;transform:scale(1.06);filter:blur(4px);margin-bottom:44px}
.arrive.stamped .seal-stamp{animation:press .4s var(--ease) forwards}
.arrive h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.4vw,104px);line-height:1;letter-spacing:-.015em}
.arrive h2 em{font-style:italic;color:var(--shu)}
.arrive .sub{margin-top:30px;font-size:16px;color:var(--mid);max-width:46ch}
.cform{margin-top:8vh;max-width:760px}
.frow{margin-bottom:44px}
.frow .q{display:block;font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);letter-spacing:-.005em;margin-bottom:14px}
.frow .q em{font-style:italic;color:var(--shu)}
.frow input[type=text],.frow input[type=email],.frow textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);font-family:var(--sans);font-size:16px;color:var(--ink);padding:10px 0;outline:none;transition:border-color .3s}
.frow input[type=text]:focus,.frow input[type=email]:focus,.frow textarea:focus{border-bottom-color:var(--shu)}
.frow textarea{min-height:96px;resize:vertical;line-height:1.6}
.frow ::placeholder{color:var(--mid);opacity:.65}
.bands{display:flex;flex-wrap:wrap;gap:10px}
.band{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair);padding:13px 17px;color:var(--mid);transition:border-color .3s,color .3s}
.band:hover{border-color:var(--mid)}
.band.sel{border-color:var(--shu);color:var(--shu)}
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:18px 30px;border:1px solid var(--shu);color:var(--shu);transition:background .3s,color .3s}
.btn:hover{background:var(--shu);color:var(--washi)}
.formnote{margin-top:26px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);line-height:2}
.formnote a{color:var(--shu)}
.btn[disabled]{opacity:.5;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form-status{margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);line-height:2;display:none}
.form-status.show{display:block}
.form-status.ok{color:var(--shu)}
.form-status.err{color:#A3361B}

footer{border-top:1px solid var(--hair);padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
footer .s{color:var(--shu)}

/* ===== reduced motion / static fallback ===== */
body.static #boot,body.static #skip{display:none}
body.static .seq{height:auto!important}
body.static .pin{position:static;height:auto;padding:16vh 0}
body.static .beat{position:static;opacity:1;padding:7vh 8vw}
body.static .li{opacity:1!important;transform:none!important;animation:none!important}
body.static .vline{transform:scaleY(1)}
body.static .pair,body.static .mid-caption,body.static .edge-cap,body.static .scroll-cue{opacity:1!important;transform:none!important}
body.static .rv{opacity:1;transform:none}
body.static .st .num{opacity:1;filter:none;transform:none}
body.static .ex-stat .ul{transform:scaleX(1)}
body.static .arrive .seal-stamp{opacity:1;transform:none;filter:none}
body.static .nav-cta{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}