/* FROZEN MOBILE (max-width:760px) snapshot 2026-10-25. Do not edit during desktop work. */
/* Proportions (Colin 2026-10-25): home hh=1/10, hb=1/20, sw=1/5 of viewport height; lanes 2/3, 2/3, 3/4 of home. Min clamps keep short windows usable. */
@property --sw{syntax:'<length>';inherits:true;initial-value:200px}
@property --hh{syntax:'<length>';inherits:true;initial-value:90px}
@property --legT{syntax:'<length>';inherits:true;initial-value:150px}
@property --armT{syntax:'<length>';inherits:true;initial-value:190px}
@property --R{syntax:'<length>';inherits:true;initial-value:120px}
@property --hb{syntax:'<length>';inherits:true;initial-value:40px}
@property --legB{syntax:'<length>';inherits:true;initial-value:70px}
@property --armB{syntax:'<length>';inherits:true;initial-value:120px}
@property --Rb{syntax:'<length>';inherits:true;initial-value:80px}
@property --rw{syntax:'<length>';inherits:true;initial-value:0px}
/* Elbow rule (Colin 2026-10-24): the inner curve never ends at the end of a piece. Inner radius = half the outer; every arm and leg is
   clamped to at least inner radius + a straight run (>= ~60% of the bar thickness, min 28px). Computed from the animated values, so it holds mid-morph. */
.shell{--RiT:calc(var(--R) / 2);--RiB:calc(var(--Rb) / 2);
 --sT:max(28px,calc(var(--hh) * .6),calc(var(--sw) * .25));--sB:max(28px,calc(var(--hb) * .6),calc(var(--sw) * .25));
 --armE:max(var(--armT),calc(var(--RiT) + var(--sT)));--legE:max(var(--legT),calc(var(--RiT) + var(--sT)));
 --armBE:max(var(--armB),calc(var(--RiB) + var(--sB)));--legBE:max(var(--legB),calc(var(--RiB) + var(--sB)))}
*{box-sizing:border-box;margin:0}
.num{font-size:max(10px,calc(1.22 * var(--u)));letter-spacing:.15em;color:var(--bd3)}
.shell{--P:12px;--PL:var(--P);--G:6px;position:fixed;inset:0;
 transition:--sw var(--M) var(--spring),--hh var(--M) var(--spring),--legT var(--M) var(--spring),--armT var(--M) var(--spring),--R var(--M) var(--spring),
 --hb var(--M) var(--spring) .06s,--legB var(--M) var(--spring) .06s,--armB var(--M) var(--spring) .06s,--Rb var(--M) var(--spring) .06s,--rw var(--M) var(--spring) .1s}
.frame>*{position:absolute}
.seg,.cap,.elT,.elB,.rail,.btn{transition:background-color .35s ease,flex-grow var(--M) var(--spring),opacity .3s}
/* top swept elbow: L-shape = box with a page-colored concave cut-out (inner radius = half outer, clamped to the arms) */
.elT{left:var(--PL);top:var(--P);width:calc(var(--sw) + var(--armE));height:calc(var(--hh) + var(--legE));background:var(--cT);
 border-top-left-radius:var(--R) ;overflow:hidden;padding:calc(var(--hh) * .5 + 14px) 0 0 18px}
.elT::after,.elB::after{content:'';position:absolute;background:var(--bd3)}
.elT::after{left:var(--sw);top:var(--hh);right:0;bottom:0;border-top-left-radius:var(--RiT)}
.elT::before,.elB::before{content:'';position:absolute;z-index:1;left:calc(var(--sw) - var(--tagR));width:var(--tagR);height:var(--tagR)}
/* Tag-join corner: the elbow-leg corner touching the lane tags matches the tags' corner radius (--tagR) */
.elT::before{bottom:0;background:radial-gradient(circle at 0 0,transparent calc(var(--tagR) - .5px),var(--bd3) var(--tagR))}
.elB::before{top:0;background:radial-gradient(circle at 0 100%,transparent calc(var(--tagR) - .5px),var(--bd3) var(--tagR))}
.elT .num,.elB .num{position:absolute;left:18px}
.elT .num{top:auto;bottom:10px;width:calc(var(--sw) - 30px);text-align:right}
.elB{left:var(--PL);bottom:var(--P);width:calc(var(--sw) + var(--armBE));height:calc(var(--hb) + var(--legBE));background:var(--cB);border-bottom-left-radius:var(--Rb);overflow:hidden}
.elB::after{left:var(--sw);bottom:var(--hb);right:0;top:0;border-bottom-left-radius:var(--RiB)}
.elB .num{top:10px;width:calc(var(--sw) - 30px);text-align:right}
.hrow,.brow{display:flex;align-items:stretch}
.hrow{left:calc(var(--PL) + var(--sw) + var(--armE) + var(--G));right:var(--P);top:var(--P);height:var(--hh)}
.brow{left:calc(var(--PL) + var(--sw) + var(--armBE) + var(--G));right:var(--P);bottom:var(--P);height:var(--hb)}
.seg{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 6px;min-width:0;flex-basis:0;margin-right:var(--G);overflow:hidden}
.seg .num{white-space:nowrap}
.hs1{background:var(--c1)}.hs2{background:var(--c2)}.hs3{background:var(--c3)}
.bs1{background:var(--c3)}.bs2{background:var(--c4)}.bs3{background:var(--c1)}
.cap{width:calc(var(--hh) * .6);border-radius:0 999px 999px 0;background:var(--c2)}
.bcap{width:calc(var(--hb) * .9 + 10px);background:var(--c4)}
.title{color:var(--cTitle);font-size:calc(var(--hh) * .78);line-height:1;letter-spacing:.22em;padding:0 calc(var(--hh) * .12) 0 calc(var(--hh) * .3);
 display:flex;align-items:center;white-space:nowrap;margin-right:var(--G);transition:color .35s;transform-origin:50% 50%}
.calm{border:0;background:var(--neu);color:var(--bd3);font-size:.82rem;letter-spacing:.18em;padding:0 16px;margin-right:var(--G);cursor:pointer;min-width:84px}
.rm .calm{background:var(--accl)}
/* left column of tall rounded-right buttons */
.side{left:var(--PL);width:var(--sw);top:calc(var(--P) + var(--hh) + var(--legE) + var(--G));bottom:calc(var(--P) + var(--hb) + var(--legBE) + var(--G));
 display:flex;flex-direction:column;gap:var(--G)}
.btn{flex:1 1 0;min-height:34px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px 8px 16px;text-decoration:none;color:var(--bd3);
 font-size:max(13px,calc(1.85 * var(--u)));letter-spacing:.2em;border-radius:0 var(--tagR) var(--tagR) 0;overflow:hidden;position:relative;white-space:nowrap}
.btn b{font-weight:600;opacity:.65}
/* tag float on hover: ported 1:1 from the sebret.com square build (.pill:hover) */
/* tag hover = extension: left edge pinned flush to the spine, right edge grows 6px (timing from the sebret.com float: .45s spring) */
.side .btn{width:100%;transition:background-color .3s,width .45s var(--spring),flex-grow var(--M) var(--spring),opacity .3s}
.side .btn:hover{background:var(--neul);width:calc(100% + 6px)}
.side .btn.on:hover{background:var(--acc)}
.rm .side .btn:hover{width:100%}
/* active-tag dark strip: recedes left / extends in from the left edge, timed with the tag stretch (flex-grow: --M, spring) */
.btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bd3);opacity:.5;transition:width var(--M) var(--spring)}
.btn.on::before{width:8px}
.side .btn b{display:inline-block;transition:transform var(--M) var(--spring)}
.side .btn.on b{transform:translateX(8px)}
.side .btn:hover b{transform:translateX(6px);transition-duration:.45s}
.side .btn.on:hover b{transform:translateX(14px)}
.boot .side .btn b{transition:none}
.rm .side .btn b,.rm .side .btn:hover b{transform:none!important;transition:none}
.boot .btn::before{transition:none}
.rm .btn::before{width:8px;opacity:0;transition:opacity .3s ease}
.rm .btn.on::before{opacity:.5}
.b0{background:var(--k0)}.b1{background:var(--k1)}.b2{background:var(--k2)}.b3{background:var(--k3)}.b4{background:var(--k4)}
.btn.on{background:var(--acc);color:var(--bd3)}

.btn.sweep::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--neul) 50%,transparent);transform:translateX(-100%);animation:sweep .4s cubic-bezier(.33,1,.68,1) forwards;opacity:.55}
@keyframes sweep{to{transform:translateX(100%)}}
.rail{right:var(--P);width:var(--rw);top:calc(var(--P) + var(--hh) + var(--G) * 3);bottom:calc(var(--P) + var(--hb) + var(--G) * 3);border-radius:999px;background:var(--c3)}
.clock{left:calc(var(--PL) + var(--sw) + var(--G) * 4);bottom:calc(var(--P) + var(--hb) + var(--G) * 2);line-height:1}
.time{font-size:2.4rem;color:var(--cTitle);letter-spacing:.06em}.time small{font-size:1.2rem;opacity:.7;margin-left:4px}
.date{font-size:1rem;color:var(--neud);letter-spacing:.14em;margin-top:4px}
/* content: black inset cut out of the frame */
.content{position:absolute;left:calc(var(--PL) + var(--sw) + var(--G) * 5);top:calc(var(--P) + var(--hh) + var(--G) * 4);
 right:calc(var(--P) + var(--rw) + var(--G) * 4);bottom:calc(var(--P) + var(--hb) + 86px);overflow:auto;scrollbar-width:thin;padding:8px 6px 20px}
.roll{opacity:0}.roll.in{opacity:1}
.big{color:var(--acc);letter-spacing:.22em;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1}
h3{color:var(--acc);letter-spacing:.2em;font-size:1.1rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
h3 .num{color:var(--neud)}
.home{display:grid;grid-template-columns:1.25fr 1fr;grid-template-areas:"feat info" "log info";gap:18px 32px;align-content:start}
.feature{grid-area:feat;display:flex;gap:26px;align-items:center}
.bracket{position:relative;padding:14px 30px;flex:none}
.bracket::before,.bracket::after{content:'';position:absolute;top:0;bottom:0;width:22px;border:9px solid var(--accd);transition:border-color .35s}
.bracket::before{left:0;border-right:0;border-radius:22px 0 0 22px}
.bracket::after{right:0;border-left:0;border-radius:0 22px 22px 0}
.bracket img{width:clamp(150px,17vw,220px);display:block;border-radius:30px}
.intro p{margin-top:10px;max-width:34ch}
.log{grid-area:log;list-style:none;padding:0;font-size:1.02rem;letter-spacing:.08em;line-height:1.5}
.c-a{color:var(--acc)}.c-l{color:var(--accl)}.c-n{color:var(--neu)}.c-d{color:var(--neud)}
.info{grid-area:info}
.row{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--neu);padding:9px 0;border-bottom:2px solid var(--bd1)}
.row b{display:block;font:600 1.05rem Rajdhani;letter-spacing:.2em;color:var(--accl)}
.row:hover b{color:var(--neul)}
.chip{flex:none;background:var(--neu);color:var(--bd3);border-radius:999px;padding:2px 12px;font-size:.85rem;letter-spacing:.12em;margin-top:2px}
.row:nth-child(odd) .chip{background:var(--acc)}
.lane .lead{max-width:60ch}
.lane .lead .log{margin-top:10px}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:22px}
.ph{min-height:124px;background:var(--bd1);border-radius:28px;padding:14px 18px;position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--k1);border-radius:28px 0 0 28px}
.ph:nth-child(3n+2)::before{background:var(--k2)}.ph:nth-child(3n)::before{background:var(--k3)}
.ph .num{color:var(--accl)}
/* ---------- lane frame arrangements ---------- */
.shell[data-lane=home]{--sw:max(150px,calc(20 * var(--u)));--hh:max(48px,calc(10 * var(--u)));--hb:max(24px,calc(5 * var(--u)));--legT:max(78px,calc(16.3 * var(--u)));--armT:max(86px,calc(18 * var(--u)));--R:max(62px,calc(13 * var(--u)));--legB:max(42px,calc(8.75 * var(--u)));--armB:max(55px,calc(11.4 * var(--u)));--Rb:max(48px,calc(10 * var(--u)));--rw:0px;
 --cT:var(--acc);--cB:var(--neu);--c1:var(--accd);--c2:var(--neul);--c3:var(--acc);--c4:var(--neud);--cTitle:var(--accl);
 --k0:var(--acc);--k1:var(--neu);--k2:var(--accl);--k3:var(--neul);--k4:var(--accd)}
.shell[data-lane=home] .hs1{flex-grow:2}.shell[data-lane=home] .hs2{flex-grow:.6}.shell[data-lane=home] .hs3{flex-grow:.3}
.shell[data-lane=home] .bs1{flex-grow:1}.shell[data-lane=home] .bs2{flex-grow:2.2}.shell[data-lane=home] .bs3{flex-grow:.5}
.shell[data-lane=home] .b4{flex-grow:1.4}
/* ---- Lane spine (Colin 2026-10-24): every lane after home shares one frame. Top/left from Art, bottom from Builds,
   one outer radius (100px) and one inner radius (50px) for both elbows. Lanes differ only by color + content. ---- */
.shell:not([data-lane=home]){--sw:max(112px,calc(15 * var(--u)));--hh:max(32px,calc(6.667 * var(--u)));--hb:max(16px,calc(3.333 * var(--u)));--legT:max(35px,calc(7.33 * var(--u)));--armT:max(252px,calc(52.5 * var(--u)));--legB:max(122px,calc(25.5 * var(--u)));--armB:max(34px,calc(7 * var(--u)));--R:max(48px,calc(10 * var(--u)));--Rb:max(48px,calc(10 * var(--u)));--rw:0px}
.shell:not([data-lane=home]) .hs1{flex-grow:.3}.shell:not([data-lane=home]) .hs2{flex-grow:1.4}.shell:not([data-lane=home]) .hs3{flex-grow:.2}
.shell:not([data-lane=home]) .bs1{flex-grow:2}.shell:not([data-lane=home]) .bs2{flex-grow:1}.shell:not([data-lane=home]) .bs3{flex-grow:.3}
.shell:not([data-lane=home]) .btn{flex-grow:.55}.shell:not([data-lane=home]) .btn.on{flex-grow:2.6}
.shell[data-lane=create]{--cT:var(--neu);--cB:var(--acc);--c1:var(--neul);--c2:var(--acc);--c3:var(--neud);--c4:var(--accd);--cTitle:var(--acc);
 --k0:var(--neud);--k1:var(--acc);--k2:var(--neu);--k3:var(--neul);--k4:var(--accd)}
.shell[data-lane=write]{--cT:var(--accd);--cB:var(--neul);--c1:var(--neu);--c2:var(--accl);--c3:var(--neud);--c4:var(--acc);--cTitle:var(--neul);
 --k0:var(--neu);--k1:var(--neud);--k2:var(--acc);--k3:var(--accl);--k4:var(--neul)}
.shell[data-lane=make]{--cT:var(--neud);--cB:var(--accd);--c1:var(--acc);--c2:var(--neu);--c3:var(--accl);--c4:var(--neul);--cTitle:var(--acc);
 --k0:var(--neul);--k1:var(--neu);--k2:var(--neud);--k3:var(--acc);--k4:var(--accd)}
/* calm mode: frame snaps under a fade (JS), no geometry travel */
.rm .shell{transition:none}.rm .seg,.rm .btn,.rm .elT,.rm .elB,.rm .cap,.rm .rail{transition:background-color .3s ease,opacity .3s}
.rm .btn.sweep::after{animation:none}
/* ---------- phone ---------- */
@media (max-width:760px){
 :root{--tagR:18px}
 .shell{--P:8px;--G:5px}
 .shell[data-lane]{--sw:26px;--armT:64px;--R:58px;--hb:28px;--armB:70px;--Rb:44px;--rw:0px}
 .shell[data-lane=home]{--hh:58px;--legT:250px;--legB:250px}
 .shell:not([data-lane=home]){--hh:50px;--legT:110px;--armT:150px;--hb:28px;--legB:300px;--armB:70px;--R:58px;--Rb:58px}
 .elT .num,.elB .num,.hs2 .num,.bs2 .num{display:none}
 .title{font-size:calc(var(--hh) * .52);letter-spacing:.16em;padding-left:10px}
 .cap{width:22px}.bcap{width:22px}.calm{min-width:0;padding:0 10px;font-size:.7rem}
 .side{top:calc(var(--P) + var(--hh) + var(--G) * 2);left:calc(var(--PL) + var(--sw) + var(--G) * 2);right:var(--P);bottom:auto;width:auto;height:40px;
  flex-direction:row;overflow-x:auto;scrollbar-width:none}
 .btn::before{display:none}
 .side .btn b{transform:none!important}
 .side .btn{width:auto!important;flex:none!important;border-radius:999px;padding:0 14px;align-items:center;font-size:.9rem;letter-spacing:.12em;gap:6px}

 .content{left:calc(var(--PL) + var(--sw) + var(--G) * 3);right:var(--P);top:calc(var(--P) + var(--hh) + 58px);bottom:calc(var(--P) + var(--hb) + 64px)}
 .clock{left:calc(var(--PL) + var(--sw) + var(--G) * 3)}.time{font-size:1.8rem}.date{font-size:.8rem}
 .home{grid-template-columns:1fr;grid-template-areas:"feat" "log" "info"}
 .feature{flex-direction:column;text-align:center}.bracket img{width:170px}.intro p{margin:8px auto 0}
}