/* SLAB site2, five doors. Paper ground, ink chassis, colour lives on the hat. Display: Archivo Expanded 900. Text: Instrument Sans.
   Fonts and the blank-hat mask are embedded in css/embed.css (loaded first) so file:// works. */
:root{
  --paper:#FAF8F3; --ink:#141416; --bone:#F0EBE1; --soft:#4A473F; --line:rgba(20,20,22,.16); --hair:rgba(20,20,22,.1);
  --flare:#C4160C; --gold:#C9A24A; --gold-ink:#86671A;   /* gold: inked proofs and the Brim Master's thread; gold-ink is the readable shade for words */
  --display:"Archivo",system-ui,sans-serif; --text:"Instrument Sans",system-ui,sans-serif;
  --bar:64px; --g:clamp(16px,4vw,56px); --r:6px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{overflow-x:clip}
[id]{scroll-margin-top:calc(var(--bar) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.disp{font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em;line-height:.92;text-wrap:balance}
.eyebrow{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--soft);margin:0 0 14px}
.lbl{font:700 12px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}
.mix{text-transform:none}   /* SLABoratory keeps its own casing inside the all-caps styles */
.sub{font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:var(--soft);max-width:36ch;margin-top:16px;text-wrap:pretty}
.fine{font-size:13px;color:var(--soft);line-height:1.4}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bone);padding:10px 14px;z-index:999;border-radius:var(--r)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--flare);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r);border:1.5px solid var(--ink);background:var(--ink);color:var(--bone);font:600 14px/1 var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s ease,background .15s,color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink)}
@media (hover:hover){.btn.ghost:hover{background:var(--ink);color:var(--bone)}}   /* hover fills only where a pointer can hover; a tap on iOS otherwise leaves the fill behind */
.btn.big{height:52px;padding:0 24px;font-size:15px}
.btn.wide{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;text-underline-offset:3px}
.x{width:40px;height:40px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;border-radius:50%}
.x:hover{background:var(--hair)}

/* bar */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar);background:var(--ink);color:var(--bone);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:0 var(--g);z-index:60}
.brand img{height:30px;width:auto}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(14px,1.5vw,26px);font-weight:600;font-size:15px;white-space:nowrap}
.nav a{text-decoration:none;opacity:.88;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{opacity:1}
.strip{display:none}
.bag-btn{height:38px;padding:0 14px 0 16px;border-radius:999px;border:1.5px solid var(--bone);background:var(--bone);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.bag-btn .count{min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:var(--bone);font-size:12px;display:inline-grid;place-items:center;padding:0 6px}
.bag-btn.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.12)}}

/* page head (inner pages) */
.page-head{padding:calc(var(--bar) + clamp(24px,4vh,56px)) var(--g) clamp(22px,4vh,44px)}
.page-head h1{font-size:clamp(40px,5.4vw,84px)}
.page-head .sub{max-width:44ch}

/* hero (landing) */
.hero{position:relative;min-height:90svh;padding:calc(var(--bar) + 1vh) var(--g) 5vh;overflow:hidden;isolation:isolate}
.mast{position:absolute;left:0;right:0;top:calc(var(--bar) + 1vh);text-align:center;font-size:min(28.5vw,500px);line-height:.82;letter-spacing:-.04em;color:var(--ink);user-select:none;pointer-events:none;z-index:1}
.stage{position:relative;display:block;width:100%;aspect-ratio:1;border:0;background:transparent;padding:0;cursor:pointer}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.stage img.on{opacity:1}
.stage:hover img.on{transform:translateY(-6px)}
.caption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:-4%;flex-wrap:wrap}
.cap-name{font-size:clamp(18px,1.8vw,26px)}
.cap-price{font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(16px,1.4vw,20px)}
.cap-kind{font:700 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.hero-copy{position:absolute;left:var(--g);bottom:6vh;z-index:3;max-width:min(31vw,430px)}
.hero h1{font-size:clamp(26px,2.9vw,44px)}   /* sized so "Introducing" holds one line at every width */
.lead{font-size:clamp(17px,1.5vw,22px);color:var(--soft);margin-top:16px;max-width:22ch}
.hero-cta{position:absolute;right:var(--g);bottom:6vh;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.hero-cta .meta{font-size:14px;color:var(--soft);margin-top:4px}

/* hero, the framed portrait (concept, 2026-10-02): the painting hangs in a carved gilt frame, SLAB is gilded into its
   backdrop and the hat changes on her head. The frame fills the whole first screen under the bar, edge to edge
   (2026-10-02): it's drawn as a nine-slice border-image, so the carved corners keep their shape and only the rails
   lengthen to fit any screen. The painting covers the opening from its top (a .canvas at the plate's own proportions,
   so the hat stays on her head and SLAB stays in view; only the sides or the dark foot are trimmed). Wide screens hang
   the wide frame with the words in the painting's dark lower corners; tall screens hang the tall one and put the
   words under it. --u is the frame's scale: 1u is a hundredth of the frame picture's width. The numbers are the
   frame's rails and the hat's place on her head, from the pictures themselves (assets/hero/, see README). */
.hero.art{height:100svh;min-height:420px;display:flex;flex-direction:column;padding:var(--bar) 0 0}
.art .gallery{position:relative;flex:1 1 0;min-height:0;width:100%;max-width:calc((100svh - var(--bar)) * 2.2);margin:0 auto;container-type:size;--u:min(1cqw,1.8635cqh)}   /* past 2.2:1 (ultra-wide monitors) the frame stops widening, or the cover would trim her face */
.art .framed{position:absolute;inset:0;border-style:solid;border-width:calc(var(--u)*6.584) calc(var(--u)*5.939) calc(var(--u)*6.477) calc(var(--u)*5.966);
  border-image-source:url(../assets/hero/frame-desk-1600.webp);
  border-image-slice:12.268% 5.939% 12.069% 5.966%;border-image-repeat:stretch}
.art .painting{position:absolute;inset:0;overflow:hidden;background:#1d1a19;container-type:size}
.art .painting::after{content:"";position:absolute;inset:0;box-shadow:inset 0 .5cqw 1.6cqw rgba(0,0,0,.55);pointer-events:none;z-index:4}   /* the frame's lip shades the canvas */
.art .canvas{position:absolute;left:50%;top:0;width:max(100cqw,calc(100cqh * 3840 / 1770));aspect-ratio:3840/1770;transform:translateX(-50%);container-type:size}
.art .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art .mast{position:absolute;left:0;right:0;top:4.2cqh;margin:0;font-size:21cqw;line-height:.8;letter-spacing:-.04em;text-align:center;color:transparent;z-index:1;
  background:linear-gradient(180deg,rgba(255,236,180,.12) 0%,rgba(70,40,5,.1) 45%,rgba(40,22,0,.42) 100%),#b89140 url(../assets/hero/gilt.webp) center/42cqw auto;-webkit-background-clip:text;background-clip:text;filter:saturate(.82) brightness(.9)}   /* gilt in a dim room: lit from above, deeper at the foot */
.art .stage{position:absolute;left:38.464%;top:12.429%;width:24.115%;aspect-ratio:982/667;z-index:2;padding:0;border:0;background:none;cursor:pointer}
.art .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.art .stage img.on{opacity:1}
.art .stage:hover img.on{transform:none}
.art .caption{position:absolute;left:50%;top:auto;bottom:calc(var(--u)*-3.24);transform:translate(-50%,50%);z-index:3;margin:0;gap:max(10px,calc(var(--u)*.9));flex-wrap:nowrap;align-items:baseline;padding:max(7px,calc(var(--u)*.55)) max(16px,calc(var(--u)*1.5));border-radius:3px;white-space:nowrap;
  background:linear-gradient(180deg,#2b241b 0%,#16120d 100%);border:1px solid #b8913f;box-shadow:inset 0 0 0 2px #16120d,inset 0 0 0 3px rgba(201,162,74,.55),0 calc(var(--u)*.15) calc(var(--u)*.4) rgba(0,0,0,.5)}   /* a museum plate on the bottom rail: dark, engraved in gold, readable against the gilt */
.art .caption > *{flex:none;white-space:nowrap}
.art .cap-kind{font-size:max(10px,calc(var(--u)*.72));color:#c9ad6a;letter-spacing:.16em}
.art .cap-name{font-size:max(14px,calc(var(--u)*1.12));color:#f1e2b4}
.art .cap-price{font-size:max(13px,calc(var(--u)*1.02));font-weight:700;color:#f1e2b4}
.art .hero-copy{position:absolute;left:calc(var(--u)*8.6);bottom:calc(var(--u)*6.477 + 48px);z-index:3;max-width:calc(var(--u)*27);color:var(--bone)}
.hero.art h1{font-size:calc(var(--u)*2.8);color:var(--bone)}
.art .lead{font-size:calc(var(--u)*1.1);color:rgba(240,235,225,.78);margin-top:calc(var(--u)*.9)}
.art .hero-cta{position:absolute;right:calc(var(--u)*8.6);bottom:calc(var(--u)*6.477 + 48px);z-index:3;gap:calc(var(--u)*.7)}
.art .hero-cta .btn{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.art .hero-cta .meta{color:rgba(240,235,225,.78)}
@media (min-resolution:1.5dppx){.art .framed{border-image-source:url(../assets/hero/frame-desk-2880.webp)}}   /* the sharp frame by screen resolution, not image-set(): Safari slices an image-set() border-image at the sharp picture's pixel size, twice too wide, so the rails drew thin with the page showing inside them (2026-10-03) */
@media (max-aspect-ratio:1/1){
  .hero.art{display:block;height:auto;min-height:0;padding:var(--bar) 0 36px}
  .art .gallery{container-type:inline-size;--u:min(1cqw,calc((100svh - var(--bar)) * .0056825));--rail:1.7}   /* 1278/2249 of a hundredth; --rail hangs the frame 1.7x its picture's own weight, or on a phone it reads as a thin line (2026-10-03) */
  .art .framed{position:relative;inset:auto;width:100%;height:calc(100svh - var(--bar));
    border-width:calc(var(--u)*var(--rail)*7.433) calc(var(--u)*var(--rail)*6.494) calc(var(--u)*var(--rail)*7.199) calc(var(--u)*var(--rail)*6.495);
    border-image-source:url(../assets/hero/frame-phone-900.webp);
    border-image-slice:4.224% 6.494% 4.091% 6.495%}
  @media (min-resolution:1.5dppx){.art .framed{border-image-source:url(../assets/hero/frame-phone-1278.webp)}}
  .art .canvas{width:max(100cqw,calc(100cqh * 1277 / 2368));aspect-ratio:1277/2368}
  .art .mast{top:7.6cqh;font-size:25cqw}
  .art .stage{left:15.348%;top:10.684%;width:72.514%}
  .art .caption{bottom:calc(var(--u)*var(--rail)*-3.59);gap:10px;padding:6px 14px}
  .art .cap-kind{display:none}
  .art .cap-name{font-size:14px}
  .art .cap-price{font-size:13px}
  .art .hero-copy,.art .hero-cta{position:static;max-width:none;margin-top:24px;padding:0 var(--g);color:var(--ink)}
  .hero.art h1{font-size:min(9.1vw,52px);color:var(--ink)}
  .art .lead{font-size:17px;color:var(--soft);margin-top:12px}
  .art .hero-cta{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .art .hero-cta .btn{width:100%;background:var(--ink);color:var(--bone);border-color:var(--ink)}
  .art .hero-cta .meta{color:var(--soft);text-align:left}
}

/* sections */
.sec{padding:clamp(56px,9vh,110px) var(--g)}
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* THE FIVE DOORS */
.doors-sec{padding:0;border-top:1.5px solid var(--ink)}
/* the grid's own top rule went with the doors heading; .doors-sec carries the section rule now */
.doors{display:grid;grid-template-columns:repeat(4,1fr)}
.door{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:min(72vh,720px);padding:26px 24px 24px;border-right:1.5px solid var(--ink);text-decoration:none;color:var(--ink);background:var(--paper);overflow:hidden;transition:background .25s,color .25s}
.door:last-child{border-right:0}
.door .no{font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;font-weight:900;font-stretch:125%;font-size:clamp(48px,6vw,96px);line-height:.85;letter-spacing:-.03em}
.door .vis{position:relative;height:min(32vh,320px);margin:6px -8px}
.door .vis img{position:absolute;object-fit:contain}
.door .name{font-size:clamp(20px,2.1vw - 3px,34px);margin-top:8px}
.door .line{font-size:15px;line-height:1.4;color:var(--soft);margin-top:10px;max-width:28ch;transition:color .25s}
.door .enter{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-weight:700;font-size:14px}
.door .enter i{font-size:19px;line-height:1;display:inline-grid;place-items:center;font-style:normal;transition:transform .25s}
.door:hover,.door:focus-visible{background:var(--ink);color:var(--bone)}
.door:hover .line{color:#B9B3A6}
.door:hover .enter i{transform:translateX(6px)}
/* door visuals */
.door-core .vis img,.door-proofs .vis img{width:64%;bottom:0;left:calc(var(--i)*18%);z-index:calc(3 - var(--i));filter:drop-shadow(0 8px 10px rgba(20,20,22,.16));transition:transform .3s}
.door-core:hover .vis img,.door-proofs:hover .vis img{transform:translateY(calc(-6px - var(--i)*4px))}
.door-lab .vis img{width:78%;bottom:0;left:11%}
.door-legends .vis img{width:78%;bottom:44px;left:11%}
.door-legends .plate{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:10px;z-index:4;background:var(--bone);color:var(--ink);border:1.5px solid var(--ink);padding:6px 10px;font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase}
.door.door-legends:hover .plate{background:var(--ink);color:var(--bone);border-color:var(--bone)}
.door-legends .plate.two{display:grid;gap:2px;text-align:center;padding:6px 12px} .door-legends .plate.two i{font-style:normal;font-weight:600;letter-spacing:.04em;text-transform:none}

/* collections (core page) */
.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.lane{position:relative;text-align:left;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:20px 20px 18px;min-height:300px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:background .2s,color .2s}
.lane:hover,.lane:focus-visible{background:var(--ink);color:var(--bone)}
.lane .fan{position:absolute;left:0;right:0;top:14px;height:180px}
.lane .fan img{position:absolute;bottom:0;width:52%;left:calc(var(--i)*22% + 2%);z-index:calc(3 - var(--i));transition:transform .28s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 8px 10px rgba(20,20,22,.16))}
.lane:hover .fan img{transform:translateY(calc(-8px - var(--i)*4px)) rotate(calc((var(--i) - 1) * 2deg))}
.lane-txt{position:relative;display:flex;flex-direction:column;gap:6px;margin-top:150px}
.lane-name{font-size:clamp(22px,2.1vw,32px)}
.lane-count{font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.lane.all{grid-column:span 2;justify-content:center;align-items:center;text-align:center}
.lane.all .lane-txt{margin-top:0;align-items:center}
.lane.all .lane-name{font-size:clamp(34px,3.4vw,52px)}

/* shop rail + wall */
.shop{padding-bottom:40px}
.rail{position:sticky;top:var(--bar);z-index:30;background:var(--paper);border-bottom:1.5px solid var(--ink);margin:26px calc(-1*var(--g)) 0;padding:12px var(--g);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.search{position:relative;flex:1 1 300px;max-width:480px;color:var(--ink)}
.search-ico{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none}
.search input{width:100%;height:44px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:0 14px 0 42px;font:500 15px var(--text);color:var(--ink)}
.search input::placeholder{color:#8a867c}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23141416' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;cursor:pointer}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r);box-shadow:0 14px 30px rgba(20,20,22,.14);z-index:40;max-height:60vh;overflow:auto}
.sugg li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:4px;cursor:pointer;font-size:14px}
.sugg li[aria-selected=true],.sugg li:hover{background:var(--ink);color:var(--bone)}
.sugg li img{width:44px;height:44px;object-fit:contain}
.sugg li .k{font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-left:auto}
.sugg .hd{font:700 11px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);padding:8px 10px 4px;cursor:default}
.sugg .hd:hover{background:transparent;color:var(--soft)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:38px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:transparent;font:600 13px var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.chip .n{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
@media (hover:hover){.chip:hover{background:var(--hair)}}   /* hover fills only where a pointer can hover; a tap on iOS otherwise leaves the fill behind */
.chip[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.chip-gap{flex:none;width:1.5px;height:22px;background:var(--line);align-self:center;margin:0 6px}   /* the six lanes, a hairline, then the two kinds that are not core */
.rail-sub{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:10px 0 6px}
.result{font-size:13px;color:var(--soft)}   /* no nowrap: the All line is a sentence now and wraps on phone instead of clipping */
.sort{font:600 13px var(--text);display:inline-flex;align-items:center;gap:8px}
.sort select{height:38px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:0 10px;font:600 13px var(--text);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--paper);border:0;border-bottom:1.5px solid var(--ink);margin:0 calc(-1*var(--g))}
.card{background:var(--paper);padding:14px 14px 16px;display:flex;flex-direction:column;position:relative;min-width:0;box-shadow:inset -1.5px 0 0 var(--hair)}
.card .shot{position:relative}
.card .ph{position:relative;aspect-ratio:1;border:0;background:transparent;padding:0;cursor:pointer;width:100%;border-radius:4px}
.card .ph img{width:100%;height:100%;object-fit:contain}
/* the hover zoom grows the photo's own box rather than scaling it: Safari scales a snapshot taken where a zoom starts,
   blurred until the zoom stopped, and draws a photo scaled below its box softer for good (2026-10-22). A box that
   grows is drawn afresh each frame, sharp the whole way */
.card .ph>img{position:absolute;left:0;top:0;transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1)}
.card:hover .ph>img{left:-3%;top:-5.12%;width:106%;height:106%}
.card .ph::before{content:"";position:absolute;left:14%;right:14%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,22,.16),rgba(20,20,22,0));opacity:0;transition:opacity .28s}
.card:hover .ph::before{opacity:1}
.card .tag{position:absolute;top:8px;left:8px;background:var(--ink);color:var(--bone);font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:3px;z-index:2}
.card .cardtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px}
.card .grp{font:600 12px var(--text);letter-spacing:0;color:var(--soft);background:transparent;border:0;padding:0;cursor:pointer;text-align:left;min-width:0}
.card .grp:hover{color:var(--ink)}
.card .grp.static{cursor:default}
.card .grp.static:hover{color:var(--soft)}
.card .meta{margin-top:4px}
.card .nm{font-size:clamp(17px,1.35vw,21px);min-width:0}
.card .pr{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;flex:none}
.card .brim-line{font-size:13px;color:var(--soft);margin-top:6px;line-height:1.35}
.card .brim-line b{font-weight:700;color:var(--ink);letter-spacing:.04em}
.card .credit{font-size:13px;color:var(--soft);margin-top:4px}
.card .credit b{color:var(--ink)}
/* the action sits over the empty band under the hat: hidden until hover or keyboard focus */
.card .buy{position:absolute;left:8px;right:8px;bottom:6px;display:flex;gap:8px;z-index:3;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.card:hover .buy,.card:focus-within .buy{opacity:1;transform:none;pointer-events:auto}
.card .buy .btn{flex:1;height:42px;padding:0 10px}
.card .buy .btn.ghost{background:var(--paper)}
@media (hover:hover){.card .buy .btn.ghost:hover{background:var(--ink)}}   /* hover fills only where a pointer can hover; a tap on iOS otherwise leaves the fill behind */
@media (hover:none){.card .buy{opacity:1;transform:none;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){.card .buy{transition:none}}
.card .under{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--c,var(--ink));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.card:hover .under{transform:scaleX(1)}
.card.soldout .ph img{opacity:.75}
.empty{padding:60px var(--g);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty .disp{font-size:clamp(28px,3.4vw,44px)}
.shop-foot{margin-top:22px;font-size:13px;color:var(--soft);text-align:center}


/* SLABORATORY: the hat the studio draws (js/lab.js). The studio's own pane, under the site's bar, is further down (the console) */
.hatbox{position:relative;flex:1 1 auto;min-height:0}
.model{position:absolute;left:50%;top:50%;width:var(--hat,600px);aspect-ratio:1;transform:translate(-50%,-51.5%);isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.model{pointer-events:none}   /* the photo's empty margin reaches past the stage (over the reply line and, on a phone, the parts): only the hat's own shapes (.hit) take the pointer */
.model.over{cursor:pointer}
.model:focus-visible,:root .studio .model:focus-visible{outline:none}   /* not the studio's focus ring round the photo's whole square */
.model:focus-visible .ol{opacity:1}   /* keyboard focus on the hat outlines the hat itself */
.model-inner{position:absolute;inset:0;animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-1.1%)}}
@media (prefers-reduced-motion:reduce){.model-inner{animation:none}}
.model .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
/* the part tints are added together first (their masks share each soft edge, so a border pixel gets a true mix of the
   two colours), then the sum multiplies through the photo. Multiplying each tint on its own would leave a light hairline
   wherever two parts meet. */
.model .tints,.labshot .tints,.proof .tints{position:absolute;inset:0;mix-blend-mode:multiply;isolation:isolate;pointer-events:none}
.model .tint{position:absolute;inset:0;background:var(--c,#fff);mix-blend-mode:plus-lighter;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;pointer-events:none;transition:background .25s}
/* the front drawn from the plates' light and shade (js/lab-shade.js): once it has drawn, it stands in for the photo, its
   tints and its grey maps */
.model .shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.model.shaded .shade{display:block}
.model.shaded .plate,.model.shaded .tints,.model.shaded .fx.sheen,.model.shaded .fx.grain{visibility:hidden}
/* over each tint, stronger the darker the part (js/lab.js sets the opacity): the sheen on the crown and the brim top,
   and the seams and weave deepened, as a dark fabric shows them in a photo (build/lab-front.py) */
.model .fx{position:absolute;inset:0;pointer-events:none;background:center/contain no-repeat;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:0;transition:opacity .25s}
.model .sheen{background-image:var(--sheen,url(../assets/lab/front-sheen-1600.webp));mix-blend-mode:screen}   /* the side and the back set their own (js/lab.js setView) */
.model .grain{background-image:var(--grain,url(../assets/lab/front-grain-1600.webp));mix-blend-mode:soft-light}
.model .edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.model .edge text{font-family:var(--text);font-variation-settings:"wdth" 88,"wght" 720;font-weight:720;font-stretch:88%;font-size:calc(var(--edge-fs,58) * 1px);letter-spacing:.045em;fill:var(--edge,#141416)}
/* a remix kit's brim words as they are stitched, in the hat's own frame, over the brim. On a drawn hat (js/common.js
   lettering()) their own thread is an image and another colour goes through their shape (a mask); in the SLABoratory
   they are an svg of the same frame (js/lab.js), recoloured by an svg filter, and picked, they are boxed as one line */
.model .lettering-at,span.lettering,span.lettering>img,.lettering>i{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.model .badge{position:absolute;display:none;height:auto;max-width:none;pointer-events:none;filter:brightness(.93) drop-shadow(0 .12vmin .16vmin rgba(0,0,0,.35))}
/* where the turntable's photos had it, in the 1600 frame: the back's right panel by the strap, following the panel's
   curve; the side's back corner by the strap, turned away */
.model[data-view=back] .badge.back{display:block;left:69.9%;top:71.4%;width:6.75%;transform:rotate(-11deg)}
.model[data-view=side] .badge.side{display:block;left:7.3%;top:67.8%;width:5.1%;transform:rotate(18deg) scaleX(.85)}
.model .lettering-at[hidden]{display:none}   /* an svg: the page's [hidden] rule is for html elements only */
.model .lettering-at{transition:opacity .25s}.model .lettering-at.waiting{opacity:.35}   /* words typed, not yet stitched: the letters there now, faded (the cook switch) */
.model .lettering-at.busy{animation:lettersWait 1.1s ease-in-out infinite alternate}@keyframes lettersWait{from{opacity:.2}to{opacity:.6}}   /* while they are stitched */
@media (prefers-reduced-motion:reduce){.model .lettering-at.busy{animation:none}}
span.lettering>img{max-height:none;object-fit:contain;filter:none;transform:none}   /* span.: above the quick view's and the cards' own rules for a hat's image */
.lettering>i{-webkit-mask:var(--lt) center/contain no-repeat;mask:var(--lt) center/contain no-repeat}
span.lettering.tint{isolation:isolate}span.lettering.tint>img{filter:grayscale(1) brightness(1.15)}span.lettering.tint>i{mix-blend-mode:multiply}   /* another colour, the thread's shading kept */
.model .floor{position:absolute;left:14%;right:14%;bottom:18%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,22,.2),rgba(20,20,22,0));z-index:-1}
/* a picked part is outlined, like selected text: one thin line along its edge, the same weight at any size. Each line is
   clipped to its own part (js/lab.js), so only its inner half shows: a stroke twice the width the eye sees */
.model .outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.model .ol{fill:none;stroke:var(--flare);stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .15s}
.model .ol.hov{opacity:.5}
/* the same outlines, unseen, as the shapes a click lands on: no paint at all (a filled one would show through the
   photo's soft outer edge as a dark rim), but the browser still tests the pointer against their insides */
.model .hit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.model .hit path{fill:none;stroke:none;pointer-events:fill}
.model .hl.front{position:absolute;width:var(--patch-w,26%);height:var(--patch-maxh,20%);border:2px dashed transparent;border-radius:12px;pointer-events:none;z-index:3;transition:border-color .15s}
/* the uploaded image: on the front panel of the hat, in the lab and wherever the hat is drawn */
.model .patch,.labshot .patch,.proof .pf .patch{position:absolute;left:50%;top:var(--patch-top,43%);width:var(--patch-w,26%);max-height:var(--patch-maxh,20%);transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:2}
/* a remixed hat's front art sits on the front as a note ("From Love Remains") until art is put there */
.model .note-tag{position:absolute;width:var(--patch-w,26%);height:calc(var(--patch-maxh,20%) * .7);display:grid;place-items:center;text-align:center;border:2px dashed rgba(20,20,22,.55);border-radius:12px;padding:3%;container-type:inline-size;pointer-events:none;z-index:2}
.model .note-tag span{font:800 10cqi/1.15 var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.model .note-tag.dark{border-color:rgba(240,235,225,.7)}
.model .note-tag.dark span{color:var(--bone)}
/* an empty front: a dashed square where the art goes, its own part to tap, as faint as YOUR LINE HERE on the brim */
.model .slot{position:absolute;width:var(--patch-maxh,20%);aspect-ratio:1;display:grid;place-content:center;justify-items:center;border:1.5px dashed rgba(20,20,22,.3);border-radius:12px;color:rgba(20,20,22,.38);container-type:inline-size;pointer-events:none;z-index:2;transition:border-color .15s,color .15s,background .15s}
.model .slot[hidden],.model .stitch-fx:not([hidden]) ~ .slot{display:none}   /* while art is rendered into it, the stitching shows instead */
.model .slot svg{width:20cqi;height:20cqi;margin-bottom:5cqi}   /* in the square's own units: its children's cqi, not its own, are the square's */
.model .slot span{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;font-weight:800;font-stretch:118%;font-size:10cqi;line-height:1.25;letter-spacing:.14em;text-align:center}
.model .slot.dark{border-color:rgba(240,235,225,.35);color:rgba(240,235,225,.45)}
.model .slot.hov{border-color:rgba(20,20,22,.55);color:rgba(20,20,22,.6)}
.model .slot.dark.hov{border-color:rgba(240,235,225,.65);color:rgba(240,235,225,.75)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* read out, not shown */
/* Shuffle: the real hat, where the blank was, with where it came from and the way in */
.shuffle-view{position:absolute;inset:0;margin:0;z-index:2}
.shuffle-view img{position:absolute;left:50%;top:50%;width:calc(var(--hat,600px) * .8);aspect-ratio:1;height:auto;max-width:none;transform:translate(-50%,-51%);object-fit:contain;pointer-events:none}
.studio.shuffling .model{visibility:hidden}
/* the first hat drawn: each part says its name, once */
.model .tips{position:absolute;inset:0;pointer-events:none;z-index:5;transition:opacity .3s}
.model .tips.out{opacity:0}
.model .tip{position:absolute;display:inline-flex;align-items:center;gap:6px;transform:translate(-7px,-50%);background:var(--ink);color:var(--bone);font:700 12px/1 var(--text);padding:6px 10px 6px 6px;border-radius:999px;white-space:nowrap;animation:tipIn .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
.model .tip i{width:10px;height:10px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 2px #fff}
.model .tip.flip{flex-direction:row-reverse;padding:6px 6px 6px 10px;transform:translate(calc(7px - 100%),-50%)}
.model .tip.under{transform:translate(-50%,0)}
@keyframes tipIn{from{opacity:0;scale:.8}}
@media (prefers-reduced-motion:reduce){.model .tip{animation:none}}
/* a file dragged over the hat lands on the front */
.studio.dropping .hatbox::after{content:"Drop it on the front.";position:absolute;inset:6%;display:grid;place-items:center;border:2px dashed var(--ink);border-radius:24px;background:rgba(250,248,243,.7);font:700 16px var(--text);z-index:6;pointer-events:none}

/* the quick view's status plate */
.qv-status.legend{color:var(--ink);border:1.5px solid var(--ink);border-radius:0;padding:6px 10px}   /* a permanent state: an ink plate, red stays with Live now */
/* drop detail (dialog) */
.qv-credit{font-size:15px}
.qv-credit b{font-weight:700}
.qv-story{font-size:15px;color:var(--soft);line-height:1.5}
.qv-status{display:inline-flex;align-items:center;gap:8px;font:700 11px var(--text);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border:1.5px solid currentColor;border-radius:999px;width:max-content}
.qv-legend{font-size:14px}
/* the inside label, drawn as it reads on the real one: ink tag, bone type, a woven hairline inset from the edge */
.qv-sewn{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--soft)}
.qv-sewn button.tag{border:0;cursor:zoom-in;transition:transform .15s}
@media (hover:hover){.qv-sewn button.tag:hover{transform:translateY(-2px)}}
.qv-sewn .tag{display:grid;gap:3px;justify-items:center;text-align:center;background:var(--ink);color:var(--bone);font:700 10px/1.4 var(--text);letter-spacing:.12em;padding:10px 14px;border-radius:2px;white-space:nowrap;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px rgba(240,235,225,.35)}
.qv-sewn p{text-wrap:pretty}
/* the Brim Master's label: bone, their number, their signature. The signature is a script face until a real one exists */
.qv-sewn .tag.bm{background:var(--ink);color:var(--bone);box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px rgba(201,162,74,.55)}   /* black, a gold edge */
.qv-sewn .tag.bm .sig{color:#C9A24A}
.sig{font-family:"Snell Roundhand","Savoye LET","Apple Chancery","Brush Script MT",cursive;font-weight:400;font-size:20px;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--ink);display:inline-block;transform:rotate(-5deg)}
.qv-sewn .tag .sig{font-size:17px;margin-top:3px}
/* the maker's handle: a quiet link, ink on hover, never red */
.credit .hd,.credit .tl,.qv-credit .hd,.qv-credit .tl{white-space:nowrap}   /* the dot travels with the handle or the date when the line wraps (.sugg .hd is a different thing) */
a.handle{color:inherit;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line)}
a.handle:hover{border-color:var(--ink)}

/* the next drop: a veiled tile where the hat would be, and a line instead of a name */
/* the countdown on the live row */

/* the vote: a signal only */

/* how it works: the label photo and the words, on the Proofs board */
.howto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(56px,9vh,110px) var(--g);background:var(--ink);color:var(--bone)}   /* the same band as Sewn in: ink, the photo left, the words right */
.howto img{width:100%;border-radius:var(--r);display:block}
.howto h2{font-size:clamp(32px,4.2vw,60px)}
.howto .sub{color:#B9B3A6;max-width:46ch;margin-top:14px}
/* footnote marker on a sentence, not a second link line */
.fn{position:relative;font-size:.7em;vertical-align:super;line-height:0;margin-left:1px;font-weight:700;color:var(--soft);text-decoration:none}
/* the glyph is 4px wide: give it a real tap target without moving the sentence */
.fn::after{content:"";position:absolute;inset:-12px -8px}
.fn:hover,.fn:focus-visible{color:var(--ink)}
.howto .fn{color:#B9B3A6}
.howto .fn:hover,.howto .fn:focus-visible{color:var(--bone)}

.qv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:8px}
.qv-acts .btn{flex:0 0 auto;min-width:140px}
/* the remix is a door, not a call to action: a quiet line at the foot of the panel */
.qv-remix{font-size:13px;color:var(--soft);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:1px;white-space:nowrap}
.qv-remix:hover{color:var(--ink);border-color:var(--ink)}
.qv-remix i{font-style:normal;display:inline-block;transition:transform .2s}
.qv-remix:hover i{transform:translateX(3px)}

/* HALL OF LEGENDS */
.legend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:clamp(28px,4vh,56px) var(--g) clamp(56px,9vh,110px)}
article.legend{border-radius:var(--r);background:var(--paper);display:flex;flex-direction:column;overflow:hidden}
.legend .ph{position:relative;aspect-ratio:1;background:var(--bone);border:0;padding:6%;cursor:pointer;width:100%}
.legend .ph img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(0,0,0,.2));transition:transform .3s}
.legend:hover .ph img{transform:translateY(-2%)}
.legend .plate{position:absolute;left:14px;top:14px;background:var(--bone);color:var(--ink);border:1.5px solid var(--ink);padding:7px 10px;font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase}
.legend .body{padding:16px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
.legend .nm{font-size:clamp(24px,2.2vw,34px)}
.legend .maker{display:flex;gap:12px;align-items:center}
/* the profile: the face and the signature in one column, the credit and the maker's words beside them */
.legend .maker.big{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:start;margin-top:4px}
.legend .face{display:grid;justify-items:center;gap:6px}
.legend .maker.big .disc,.legend .maker.big .portrait{width:88px;height:88px;font-size:24px}
.legend .about{font-size:15px;line-height:1.45;margin-top:6px}
.legend .disc{flex:none;width:48px;height:48px;border-radius:50%;background:var(--bone);border:1.5px solid var(--ink);display:grid;place-items:center;font:700 13px var(--text);letter-spacing:.08em}
.legend .portrait{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover}
.legend .credit{font-size:15px}
.legend .credit b{font-weight:700}
.legend .story{font-size:14px;color:var(--soft);line-height:1.45}
.legend .buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.legend .buy .pr{font-weight:700;font-variant-numeric:tabular-nums}
.sewn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(56px,9vh,110px) var(--g);background:var(--ink);color:var(--bone)}
.sewn .sub{color:#B9B3A6}
.sewn h2{font-size:clamp(32px,4.2vw,60px)}
.sewn img{width:100%;border-radius:var(--r)}
.empty-legends{padding:40px var(--g) 80px;color:var(--soft)}

/* drop email: same band as .how, so the page ends on a quiet bone field rather than a red one */
.drop{background:var(--paper);border-top:1.5px solid var(--ink)}
.drop-in{max-width:760px}
.drop h2{font-size:clamp(32px,4.2vw,60px)}
.drop p{font-size:16px;margin-top:12px;color:var(--soft)}
.drop form{display:flex;gap:10px;margin-top:26px;max-width:520px}
.drop input{flex:1;height:52px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;color:var(--ink);padding:0 16px;font:500 16px var(--text);min-width:0}
.drop input::placeholder{color:#8a867c}
.drop .ok{margin-top:18px;font-weight:700}
.trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}   /* the field people never see (worker/forms.js) */
.form-err{margin:0;font-size:14px;line-height:1.4;color:#A1281C}
.drop .form-err{margin-top:12px;color:#A1281C}

/* footer */
.foot{background:var(--ink);color:var(--bone);padding:clamp(36px,5vh,60px) var(--g) 22px}
.foot-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:24px}
.foot-mark{height:44px;width:auto}
.foot-line{font-size:clamp(24px,2.6vw,38px);letter-spacing:0;text-align:right}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:22px 0}
.foot-cols .lbl{color:#B9B3A6}
.foot-cols a,.foot-cols span{display:block;font-size:15px;line-height:1.9;text-decoration:none;opacity:.92}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-base{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;font-size:12px;color:#B9B3A6;padding-top:22px}

/* bag */
.scrim{position:fixed;inset:0;background:rgba(20,20,22,.45);z-index:80;opacity:0;transition:opacity .25s}
.scrim.on{opacity:1}
.bag{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--paper);z-index:90;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;display:flex;flex-direction:column;box-shadow:none}
.bag.open{box-shadow:-20px 0 50px rgba(20,20,22,.2)}   /* closed, its shadow would lie along the right edge of every page */
.bag.open{transform:none}
.bag-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;border-bottom:1.5px solid var(--ink)}
.bag-head h3{font-size:26px}
.bag-items{flex:1;overflow:auto;padding:8px 20px}
.bag-item{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
.bag-item img{width:84px;height:84px;object-fit:contain}
.bag-item .nm{font-size:16px}
.bag-item .grp{font-size:12px;color:var(--soft)}
.bag-item .qty{margin-top:8px}
.bag-item .pr{font-weight:700;font-variant-numeric:tabular-nums}
.bag-item .rm{display:block;border:0;background:transparent;font-size:12px;color:var(--soft);text-decoration:underline;cursor:pointer;padding:0;margin-top:8px}
.bag-empty{padding:40px 0;text-align:center;color:var(--soft)}
.bag-empty .disp{font-size:24px;color:var(--ink);margin-bottom:8px}
.bag-foot{padding:16px 20px 20px;border-top:1.5px solid var(--ink);display:grid;gap:10px}
.bag-foot .row{display:flex;justify-content:space-between;font-size:16px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--r);height:36px}
.qty button{width:34px;height:100%;border:0;background:transparent;font-size:18px;cursor:pointer}
.qty span{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* quick view */
.qv{border:0;padding:0;max-width:min(1360px,96vw);width:100%;max-height:none;background:var(--paper);color:var(--ink);border-radius:8px;overflow:hidden;box-shadow:0 30px 80px rgba(20,20,22,.35)}
.qv::backdrop{background:rgba(20,20,22,.55)}
.qv[open]{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);height:min(880px,92vh);height:min(880px,92dvh)}
/* the pane: the collage, a lookbook page of the hat on paper (js/common.js paintViews) */
.qv-ph{position:relative;background:var(--paper);min-height:0;overflow:hidden;padding:10px}
.qv-collage{display:grid;gap:8px;height:100%;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"h"}
.qv-collage.n2{grid-template-rows:1fr .42fr;grid-template-areas:"h" "c"}
.qv-collage.n3,.qv-collage.n4{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr .62fr}
.qv-collage.n3{grid-template-areas:"h h a" "h h a" "c c c"}
.qv-collage.n4{grid-template-areas:"h h a" "h h b" "c c c"}
.qv-tile{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--crown,#eee);cursor:zoom-in;container-type:size;color:inherit;box-shadow:inset 0 0 0 1px rgba(20,20,22,.06)}
.qv-tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(20,20,22,.10))}   /* a studio's light falloff, so the crops read as shots */
.qv-tile:not(:first-child) .qv-frame.hat>img{filter:none}
@media (hover:hover){.qv-tile .qv-frame{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.qv-collage:not(.solo) .qv-tile:hover .qv-frame{transform:scale(1.04)}}
/* one tile opened across the collage */
.qv-collage.solo{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:none}
.qv-collage.solo .qv-tile{display:none}
.qv-collage.solo .qv-tile.on{display:block;grid-area:1/1/-1/-1!important}
.qv-all{position:absolute;left:20px;top:20px;z-index:3;height:34px;padding:0 14px;border:0;border-radius:999px;background:rgba(20,20,22,.72);color:var(--bone);font:700 12px var(--text);letter-spacing:.06em;cursor:pointer}
/* a view in its frame: sized so the part it looks at (--px --py the middle, --rw --rh how much, in fractions of the
   picture) fills the box it sits in, and nudged so that middle is the box's middle. .cover fills the box edge to edge. */
.qv-frame{--d:min(calc(100cqw / var(--rw)), calc(100cqh * var(--ar) / var(--rh)));position:absolute;display:block;width:var(--d);aspect-ratio:var(--ar);left:calc(50cqw - var(--px) * var(--d));top:calc(50cqh - var(--py) * var(--d) / var(--ar));container-type:inline-size;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.qv-frame.art{top:max(calc(50cqh - var(--py) * var(--d) / var(--ar)), calc(100cqh - var(--cut,.615) * var(--d) / var(--ar)))}   /* the art close-up: the photo never shows below the top of the brim, or below the art's own box where the art reaches lower (artCut in js/common.js) */
.qv-frame.cover{--d:max(min(calc(100cqw / var(--rw)), calc(100cqh * var(--ar) / var(--rh))), 100cqw, calc(100cqh * var(--ar)));left:clamp(100cqw - var(--d), 50cqw - var(--px) * var(--d), 0px);top:clamp(100cqh - var(--d) / var(--ar), 50cqh - var(--py) * var(--d) / var(--ar), 0px)}   /* a photo with its own background: the part it looks at as big as it fits, but never short of the box's edges */
.qv-frame>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;-webkit-user-select:none;user-select:none}
.qv-frame.hat>img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.22))}
.qv-frame .labshot{position:absolute;inset:0;width:100%;height:100%}
.qv-tile.zoom .qv-frame{transform:scale(2.4);transition:transform .35s cubic-bezier(.2,.7,.2,1),transform-origin .08s linear}
.qv-tile.on{cursor:zoom-in}.qv-tile.zoom{cursor:zoom-out}
@media (hover:none),(pointer:coarse){.qv-tile.on{cursor:pointer}}
@media (prefers-reduced-motion:reduce){.qv-frame,.qv-tile .qv-frame,.qv-tile.zoom .qv-frame{transition:none!important}}
/* the label's own lettering, laid on the blank label's weave where the photo's was (build/label-blank.py) */
.qv-lbl{position:absolute;left:49.8%;top:34%;display:grid;justify-items:center;gap:1.4cqw;transform:translate(-50%,-50%) rotate(-2.2deg);font:600 min(2.45cqw,calc(52cqw / var(--len)))/1 var(--text);font-stretch:85%;font-variation-settings:"wdth" 85;letter-spacing:.06em;white-space:nowrap;pointer-events:none;filter:drop-shadow(0 .05em 0 rgba(0,0,0,.55))}   /* woven, not printed: thread-coloured, rows of thread across the letters and a little depth under them */
/* the rows of thread, in em so they keep their size against the letters at any size (a fixed-size texture with
   roughened edges, #qvWoven until 2026-10-07, blurred the words in a small tile); the letters themselves stay crisp */
.qv-lbl b{font-weight:600;color:transparent;background:repeating-linear-gradient(180deg,#E6E1D5 0 .06em,#C3BEB2 .06em .1em);-webkit-background-clip:text;background-clip:text}
.qv-lbl.bm{top:34%;gap:1.4cqw}
.qv-lbl.bm .sig{font-size:4cqw;color:#C9A24A;margin-top:.2cqw;text-shadow:none}
.qv-info{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:10px;justify-content:center;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain}
.qv-group{background:transparent;border:0;padding:0;cursor:pointer;text-align:left;margin:0}
.qv-group:hover{color:var(--ink)}
.qv-group.static{cursor:default}
.qv-group.static:hover{color:var(--soft)}
.qv-info h3{font-size:clamp(30px,3.2vw,46px)}
.qv-price{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.qv-brim{font-size:15px;color:var(--soft)}
.qv-brim b{color:var(--ink);letter-spacing:.04em}
.qv-front{font-size:15px;color:var(--soft)}
.qv-buy{display:flex;gap:10px;align-items:center;margin-top:10px}
.qv-buy .btn{flex:1}
.qv-buy .qty{height:52px}
/* a private run in the quick view (js/common.js renderRunQV): a number for each size, the hats added up, the price */
.qv-run{display:grid;gap:10px;margin-top:6px}
.qv-run-lbl{font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.qv-run-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qv-run-row{display:grid;gap:6px;font:600 13px var(--text);color:var(--ink)}
.qv-run-row input{height:48px;width:100%;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:8px 12px;font:700 18px var(--text);color:var(--ink);font-variant-numeric:tabular-nums}
.qv-run-sum{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:15px;color:var(--soft)}
.qv-run-sum b{color:var(--ink);font-size:20px}
.qv-run-sum .tot{margin-left:auto;color:var(--ink);font-weight:600}
.qv-run-note{font-size:13px;color:var(--soft);min-height:1em}
.qv-run-note:empty{display:none}
/* Make it in the quick view (js/common.js renderPostQV): one question, then the proof's form */
.qv-post{display:grid;gap:12px;margin-top:6px}
.qv-post form,.qv-post .sent,.qv-post #postWho{display:grid;gap:14px}
.qv-post-q{font:800 19px var(--text);color:var(--ink)}
.qv-post label{display:grid;gap:6px;font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.qv-post input{height:46px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:10px 14px;font:500 15px var(--text);color:var(--ink);letter-spacing:0;text-transform:none}
.qv-post .fine.rule{color:var(--ink);border-left:3px solid var(--ink);padding-left:10px}
.qv-post .fine .fn{color:var(--soft)}
.qv-post .link{background:none;border:0;padding:0;font:600 14px var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ink)}
.post-acts{align-items:center}
/* a SLABoratory hat in the quick view (js/common.js renderSharedQV): Share and Copy link, or Make it yours */
.qv-send{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:10px}
.qv-send .btn{flex:1 1 200px}
.qv-send .fine{flex-basis:100%;margin:0}
.qv.lone .qv-nav{display:none}
.qv-x{position:absolute;top:10px;right:10px;z-index:3;background:var(--paper)}
.qv-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;font-size:18px}
.qv-nav.prev{left:12px}
.qv-nav.next{right:12px}
.qv-ph:has(.qv-collage:is(.n3,.n4):not(.solo)) .qv-nav.next{right:calc((100% - 20px) / 3 + 18px)}
.qv-ph:has(.qv-collage:is(.n1,.solo)) .qv-nav{top:50%}
.qv-ph:has(.qv-collage.n2:not(.solo)) .qv-nav{top:35%}
@media (hover:hover){.qv-nav:hover{background:var(--ink);color:var(--bone)}}   /* hover fills only where a pointer can hover; a tap on iOS otherwise leaves the fill behind */
.qv.dark .qv-nav{border-color:var(--bone);background:rgba(20,20,22,.5);color:var(--bone)}

/* modal */
.modal{overscroll-behavior:contain;border:0;padding:0;width:min(560px,94vw);background:var(--paper);color:var(--ink);border-radius:8px;box-shadow:0 30px 80px rgba(20,20,22,.35)}
.modal::backdrop{background:rgba(20,20,22,.55)}
.modal form,.modal .sent{padding:32px;display:grid;gap:16px}
.modal h3{font-size:34px}
.modal label{display:grid;gap:6px;font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.modal input,.modal textarea{height:46px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:10px 14px;font:500 15px var(--text);color:var(--ink);letter-spacing:0;text-transform:none}
.modal textarea{height:auto;resize:vertical}
.modal .x{position:absolute;top:10px;right:10px;z-index:2}
/* Post a Proof: the hat on its crown colour beside the form, the same two panes as the quick view */
.modal.post{width:min(940px,94vw)}
.modal.post[open]{display:block}   /* the dialog is a grid for the plain forms; the module lays itself out */
.modal.post #modalBody{width:100%}
.modal.pass{width:min(460px,94vw)}   /* the SLABoratory's email step (js/lab-pass.js): the email, then the code */
.modal.pass h3{font-size:30px}
.modal.pass form,.modal.pass #passGrace{grid-template-columns:minmax(0,1fr)}
.modal.pass #passGrace{padding:32px;display:grid;gap:16px}   /* the code couldn't go: laid out like the forms */
.modal.pass input{width:100%;min-width:0}   /* the code's wide, spaced digits would otherwise size the box past a phone's panel */
.modal.pass input[name=code]{font-size:24px;font-weight:600;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.pass-typo,.pass-err,.pass-show{margin:-6px 0 0;font-size:14px;line-height:1.4}
.pass-err{color:#A1281C}
.pass-show{padding:10px 12px;border:1.5px dashed var(--ink);border-radius:var(--r);background:var(--bone)}
.pass-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pass-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pass-link:disabled{text-decoration:none;opacity:.6;cursor:default}
.lc-who{display:flex;align-items:center;gap:10px;min-width:0;margin:0 8px 0 auto;font:500 11px/1.2 var(--text);color:var(--lab-t3,var(--soft))}   /* signed in as, in the conversation's head */
.lc-who-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-who .pass-link{flex:none;color:var(--lab-t1,var(--ink))}
.post{display:grid;grid-template-columns:1fr 1.05fr}
.post-ph{background:var(--ground,#eee);display:grid;place-items:center;padding:9%;border-radius:8px 0 0 8px}
.post-txt{padding:32px;display:grid;gap:14px;align-content:start}
.post-txt .sub{margin-top:-4px}
.post-acts{display:flex;gap:10px;flex-wrap:wrap}

/* toast */
/* an admin changing a private run's design in the SLABoratory (js/lab-save.js runBar): one line across the top, over the studio */
.run-bar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:95;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;max-width:calc(100vw - 32px);background:var(--ink);color:var(--bone);padding:8px 8px 8px 14px;border-radius:999px;font-size:13px;line-height:1.3;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.run-bar button{font:inherit;font-weight:700;background:var(--bone);color:var(--ink);border:0;border-radius:999px;padding:7px 14px;cursor:pointer}.run-bar button:disabled{opacity:.6;cursor:default}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bone);padding:12px 12px 12px 18px;border-radius:999px;display:flex;align-items:center;gap:14px;z-index:95;box-shadow:0 14px 30px rgba(20,20,22,.3);font-weight:600;font-size:14px}
.toast button{height:32px;padding:0 12px;border-radius:999px;border:0;background:var(--bone);color:var(--ink);font-weight:700;cursor:pointer}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}   /* four across on a wide screen, like the Proofs board */
  .lanes{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:1fr 1fr}
  .door{border-bottom:1.5px solid var(--ink);min-height:min(56vh,560px)}
  .door:nth-child(2n){border-right:0}
  .legend-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  html.locked{overflow:hidden}
  html.locked body{position:fixed;left:0;right:0;width:100%}   /* iOS keeps scrolling the page behind a modal unless the body is pinned */
  :root{--bar:104px}
  .bar{grid-template-rows:56px 48px;row-gap:0;padding:0 var(--g)}
  .brand,.nav{align-self:center}
  .strip{display:flex;grid-column:1/-1;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--g));padding:0 var(--g) 8px}
  .strip::-webkit-scrollbar{display:none}
  .strip a{flex:none;height:32px;padding:0 12px;border:1.5px solid rgba(240,235,225,.5);border-radius:999px;display:inline-flex;align-items:center;font:700 12px var(--text);letter-spacing:.04em;text-decoration:none;color:var(--bone)}
  .strip a[aria-current=page]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
  .hero{min-height:0;padding-bottom:40px;display:flex;flex-direction:column}
  .mast{position:relative;top:auto;font-size:27vw;margin-top:calc(var(--bar) + 6px)}
  .caption{margin-top:-2%}
  .hero-copy,.hero-cta{position:static;max-width:none;text-align:left;align-items:flex-start;margin-top:22px}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%}
  .hero-cta .btn{width:100%}
  .hero-cta .meta{text-align:left}
  .hero h1{font-size:9.1vw}
  .nav a{display:none}
  .nav{gap:14px}
  .doors{grid-template-columns:1fr}
  .door{display:grid;grid-template-columns:52px 1fr;align-items:center;column-gap:14px;min-height:0;padding:16px 20px;border-right:0;border-bottom:1.5px solid var(--ink)}
  .door .vis{display:none}
  .door .no{font-size:34px;align-self:start}
  .door > div:last-child{grid-column:2;position:relative;padding-right:26px}
  .door .name{font-size:20px;margin-top:0;display:block}
  .door .line{font-size:13px;margin-top:4px;max-width:none}
  .door .enter{position:absolute;right:0;top:3px;margin-top:0}
  .door .enter i{font-size:17px}
  .lane{min-height:250px}
  .rail{gap:10px;padding:10px var(--g) 12px;top:calc(var(--bar) - 64px)}
  .chips{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 2*var(--g));margin:0 calc(-1*var(--g));padding:2px var(--g);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .rail-sub{justify-content:space-between;font-size:12px}
  .toast{max-width:calc(100vw - 32px)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card{padding:10px 10px 14px}
  /* a stack, not a grid: Safari sizes grid rows to the dialog's max-height and lets the photo spill over the words */
  .qv[open]{display:block;max-height:92vh;max-height:92dvh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .qv[open]{height:auto}
  .qv-ph{display:block;padding:8px}
  .qv-collage{height:auto;aspect-ratio:1/1.12;gap:6px}   /* sized by the width, whatever the browser thinks of percentage heights */
  .qv-collage.n1{aspect-ratio:1/1}
  .qv-info{overflow:visible}
  .modal.post{max-height:92vh;overflow:auto}
  .post{grid-template-columns:1fr}
  .post-ph{border-radius:8px 8px 0 0;padding:4% 22%}
  .post-txt{padding:22px 20px 26px}
  .qv-nav{top:34vw}   /* stacked dialog: the arrows sit on the big picture, not over the eyebrow */
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-line{text-align:left}
  .legend-grid{grid-template-columns:1fr}
  .howto{grid-template-columns:1fr;gap:20px;padding:36px var(--g) 40px}
  .howto img{max-height:34vh;object-fit:cover}
  .howto h2{font-size:30px}
  .sewn{grid-template-columns:1fr}
}
/* the studio: one pane under the site's bar that never scrolls, like a car's console (js/lab-console.js). Its own bar
   (the page's title, the design's name, dark mode, Undo, Proof), the view, the hat centred in whatever is left (tap a
   part to pick it), with a small caption and, on a blank hat, ideas to tap on the floor under it, the strip (the
   controls for what is picked, else Start; on a phone its height never changes, on a wide screen it is a drawer over
   the floor) and the chat box. The conversation runs down the right on a wide screen; below that it opens over the
   hat as soon as the chat box is used. Paper and ink, hairlines, one accent. On a phone the pane is the whole screen under the bar (just its logo and
   Bag), with no footer; from a tablet up it fills the first screen, and the footer is under it. */
.lc-thread{display:none}
@media all{
  html:has(#lab),html:has(#lab) body{background:var(--paper)}
  html.lab-dark:has(#lab),html.lab-dark:has(#lab) body{background:#0E0F10}
  :root .studio{
    /* light, the default: the site's own paper and ink */
    --lab-bg:var(--paper);--lab-floor:#EFEAE0;--lab-shadow:rgba(20,20,22,.22);
    --lab-t1:var(--ink);--lab-t2:var(--soft);--lab-t3:#7C786E;--lab-t4:#A6A298;
    --lab-hair:var(--hair);--lab-fill:#EFEBE3;--lab-fill-hi:#E8E3D9;--lab-edge:rgba(20,20,22,.28);--lab-track:#E3DED3;--lab-accent:#3E6AE1;
    --lab-ring:0 0 0 2px #fff,0 0 0 3px rgba(20,20,22,.35);
    position:relative;margin-top:var(--bar);height:calc(100vh - var(--bar));height:calc(100dvh - var(--bar));
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) 118px calc(64px + env(safe-area-inset-bottom));
    grid-template-areas:"ltop" "lviews" "stage" "strip" "lask";
    --floor:64px;--room:0px;--dmax:0px;--dh:0px;   /* the hat's sizing (js/lab.js sizeHat): the floor kept under the brim (the caption and the ideas), the room it may rise into above the stage, the drawer open, and the drawer now */gap:0;min-height:0;padding:0;overflow:hidden;overscroll-behavior:none;
    background:var(--lab-bg);color:var(--lab-t1);font:400 13px/1.3 var(--text);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  /* dark, a tap away (the moon in the bar; html.lab-dark, remembered in this browser) */
  html.lab-dark .studio{--lab-bg:#0E0F10;--lab-floor:#141517;--lab-shadow:rgba(5,5,6,.9);
    --lab-t1:#F2F2F2;--lab-t2:#8A8D92;--lab-t3:#6B6E73;--lab-t4:#55585D;
    --lab-hair:#1E2023;--lab-fill:#1A1B1D;--lab-fill-hi:#202124;--lab-edge:#3A3D42;--lab-track:#2A2C30;
    --lab-ring:0 0 0 2px #F2F2F2,0 0 0 3px rgba(0,0,0,.5)}
  :root .studio :focus-visible{outline:2px solid var(--lab-t2);outline-offset:2px}
  /* the readouts: the text face, narrowed and spaced out, in capitals with even figures; the site has no mono */
  :root .lc-k,:root .lc-read,:root .lc-mono{font:500 10px/1.2 var(--text);font-stretch:85%;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--lab-t3)}
  /* 1. the bar */
  :root .lc-top{grid-area:ltop;display:flex;align-items:center;gap:2px;padding:0 16px 0 20px;height:60px}
  :root .lc-title{flex:1;min-width:0;margin-right:10px;display:grid;gap:4px}   /* a gap before dark mode */
  :root .lc-h{margin:0;font-size:clamp(14px,calc((100vw - 256px)/8.4),24px);line-height:.95;color:var(--lab-t1);white-space:nowrap}   /* the page's title, as every door has it, in the studio's own bar */
  :root .lc-sub{font:400 12px/1.2 var(--text);color:var(--lab-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* the design's name, once it has one; the tagline till then */
  :root .lc-name{display:flex;align-items:center;gap:5px;justify-self:start;max-width:100%;margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer}   /* tapped, it is renamed */
  :root .lc-name>span{overflow:hidden;text-overflow:ellipsis}
  :root .lc-name svg{flex:none;width:1.1em;height:1.1em;opacity:.8}
  :root .lc-name:hover:not([disabled]){color:var(--lab-t1)}
  :root .lc-name[disabled]{cursor:default}
  :root .lc-name[disabled] svg,:root .lc-name[hidden],:root .lc-rename[hidden]{display:none}
  :root .lc-rename{width:100%;max-width:260px;margin:-2px 0 -2px -5px;padding:1px 5px;border:1px solid var(--lab-t3);border-radius:5px;background:var(--lab-fill);color:var(--lab-t1);font-size:16px;line-height:1.15;-webkit-user-select:text;user-select:text}   /* 16px: a phone doesn't zoom in on it */
  :root .studio .lc-rename:focus-visible{outline:0}   /* its own border is the ring */
  :root .lc-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--lab-t1);text-decoration:none;cursor:pointer}
  :root .lc-icon svg{width:20px;height:20px}
  :root .lc-icon>span{display:grid}
  :root .lc-sun,html.lab-dark .lc-moon{display:none!important}
  html.lab-dark .lc-sun{display:grid!important}
  :root .lc-icon[disabled]{color:var(--lab-t4);cursor:default}
  :root .lc-over{display:none}   /* Start over: from a tablet up; on a phone Start's Blank is always in view, and the bar has no room */
  :root .lc-pill{flex:none;height:36px;padding:0 16px;border:1px solid var(--lab-t1);border-radius:18px;background:var(--lab-t1);color:var(--lab-bg);font:500 13px/1 var(--text);cursor:pointer;margin-left:4px;position:relative}
  :root .lc-pill::before{content:"";position:absolute;inset:-4px -2px}   /* 44px to the finger, 36 to the eye */
  :root .lc-pill.out{background:transparent;color:var(--lab-t1);border-color:var(--lab-edge)}
  :root .lc-pill[disabled]{opacity:.4}
  /* 2. the view, like a gear selector */
  /* the view: three dots under the hat, the one in view a short bar; tap one to turn to it (the arrows and a drag turn it too) */
  :root .lc-views{display:flex;justify-content:center;pointer-events:auto}
  :root .lc-views button{display:grid;place-items:center;width:28px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
  :root .lc-views i{display:block;width:6px;height:6px;border-radius:3px;background:var(--lab-t4);transition:width .3s cubic-bezier(.2,.8,.2,1),background .2s}
  :root .lc-views button[aria-pressed=true] i{width:18px;background:var(--lab-t1)}
  :root .studio.shuffling .lc-views{visibility:hidden}
  /* 3. the stage: the hat centred on a soft pool of light, a dark shadow under the brim */
  :root .studio-stage{grid-area:stage;position:relative;min-height:0;display:block;overflow:visible;clip-path:inset(calc(-1 * var(--room)) 0 0 0);touch-action:none}   /* clipped at its sides and foot, and its head but for the room the hat may rise into */
  :root .hatbox{position:absolute;inset:0;transform:translateY(calc(-1 * var(--rise,0px)));transition:transform .38s cubic-bezier(.2,.8,.2,1)}   /* risen over the drawer (js/lab-console.js rise) */
  @media (prefers-reduced-motion:reduce){:root .hatbox{transition:none}}
  :root .hatbox::before{content:"";position:absolute;left:50%;top:calc(var(--hat-cy,50%) + var(--hat,500px) * .19);width:min(118%,calc(var(--hat,500px) * .95));aspect-ratio:3.2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--lab-floor) 55%,rgba(20,21,23,0));pointer-events:none}
  html.lab-dark .model .plate,html.lab-dark .model .shade{filter:url(#labEdge)}   /* on the dark ground the photo's soft white edge would rim the hat */
  :root .model .floor{background:radial-gradient(closest-side,var(--lab-shadow),transparent);left:18%;right:18%;bottom:19%;height:5%}
  :root .model-inner{scale:var(--view-k,1);transition:scale .25s}
  :root .studio .model-inner{animation:none}   /* the hat holds still: nothing moves under the thumb but what it moves */
  :root .model .ol,:root .model .pin,:root .model .hl{display:none}
  /* a part under the pointer, and the hello (js/lab.js hello()) lighting each in turn: the part washed, a little light
     over dark fabric and a little shade over light, which shows on any colour as a hairline doesn't; and the hat
     follows a drag (js/lab-console.js) */
  :root .model .glow{background:#141416;--peak:.09}
  :root .model .glow.lit{background:#fff;--peak:.11}
  :root .model .glow.hello{animation:labHello 1.1s ease-in-out both}
  :root .model .hl.front.hello{display:block;border:1px dashed var(--lab-t2);--peak:.75;animation:labHello 1.1s ease-in-out both}
  :root .model .slot.hello{animation:labHelloSlot 1.1s ease-in-out both}
  :root .model .slot.dark.hello{animation-name:labHelloSlotDark}
  @keyframes labHello{0%,100%{opacity:0}40%,60%{opacity:var(--peak)}}
  @keyframes labHelloSlot{40%,60%{background:rgba(20,20,22,.07)}}
  @keyframes labHelloSlotDark{40%,60%{background:rgba(255,255,255,.12)}}
  :root .model-inner{transition:scale .25s,translate .38s cubic-bezier(.2,.8,.2,1)}
  :root .model-inner.held{transition:scale .25s}
  @media (prefers-reduced-motion:reduce){:root .model-inner{transition:scale .25s}}
  /* the turn arrows: faint, at the stage's sides, one each way there is a view to turn to */
  :root .lc-turn{position:absolute;top:var(--hat-cy,50%);z-index:4;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--lab-t4);cursor:pointer;transition:color .2s,background .2s}
  :root .lc-turn{--off:max(4px,calc(50% - var(--hat,500px) * .42))}
  :root .hatbox:has(.model:not([data-view=front])) .lc-turn{--off:max(4px,calc(50% - var(--hat,500px) * .47 - 52px))}   /* the side and the back are wider */
  :root .lc-turn[data-turn="-1"]{left:var(--off)}
  :root .lc-turn.next{right:var(--off)}
  :root .lc-turn svg{width:20px;height:20px}
  :root .studio.shuffling .lc-turn{display:none}
  @media (hover:hover){:root .lc-turn:hover{color:var(--lab-t1);background:var(--lab-fill)}}
  @media (hover:hover) and (pointer:fine){:root .studio-stage{cursor:grab}:root .studio-stage.grabbing{cursor:grabbing}}
  :root .model:not([data-view=front]) :is(.glow,.edge,.lettering-at,.patch,.note-tag,.slot,.outline,.hl,.hit,.tips,.stitch-fx){display:none!important}   /* the side and the back keep their sheen and grain */
  :root .studio.dragging .model .tint,:root .studio.dragging .model .fx{transition:none}
  /* up close on the front art (js/lab.js zoom): the hat glides big round the art; the stage is cut off at the caption
     (--zclip, js/lab-console.js), the floor's shadow and the turning arrows step aside */
  :root .studio.zooming .model{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  @media (prefers-reduced-motion:reduce){:root .studio.zooming .model{transition:none}}
  :root .studio.zoomed .studio-stage{clip-path:inset(0 0 var(--zclip,0px) 0);cursor:default}
  :root .studio.zoomed .hatbox::before{opacity:0}
  :root .studio.zoomed .lc-turn{display:none}
  :root .hatbox::before{transition:opacity .3s}
  :root .model .tip{background:var(--lab-fill);color:var(--lab-t1);font-weight:500;box-shadow:0 0 0 1px var(--lab-edge)}
  :root .model .tip i{box-shadow:0 0 0 2px var(--lab-fill)}
  :root .shuffle-view{position:absolute;inset:0}
  :root .shuffle-view img{top:var(--hat-cy,50%)}
  :root .shuffle-view img{width:min(calc(var(--hat,500px) * .66),88vw)}
  :root .studio.dropping .hatbox::after{display:none}
  /* 4. the readout */
  /* the caption, on the floor under the brim (riding the drawer on a wide screen): what to do next, a render under way
     or one that did not come back (two lines at most); on a blank hat, the ideas to tap under it. Until 2026-10-05 it
     was a status line in its own row */
  :root .lc-voice{grid-area:stage;align-self:end;z-index:4;display:flex;flex-direction:column;gap:6px;min-width:0;margin-bottom:var(--dh);padding-bottom:6px;pointer-events:none;transition:margin-bottom .38s cubic-bezier(.2,.8,.2,1)}
  :root .lc-voice>*{pointer-events:auto}
  @media (prefers-reduced-motion:reduce){:root .lc-voice{transition:none}}
  :root .lc-say{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 20px}
  :root .lc-read{display:block;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root .lc-read.msg{font:400 12px/1.4 var(--text);font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--lab-t3);text-align:center;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  :root .lc-chips:empty{display:none}
  :root .lc-chips{height:34px;justify-content:safe center}
  :root .lc-read.msg b{font-weight:500;color:var(--lab-t1)}
  :root .lc-read .lc-secs{font-size:10px;margin-left:4px}
  :root .lc-read .lc-link{height:auto;vertical-align:baseline;margin-left:6px;color:var(--lab-t1)}
  :root .lc-chips{display:flex;gap:6px;align-items:center;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 20px;touch-action:pan-x}
  :root .lc-chips::-webkit-scrollbar{display:none}
  :root .ch-chip svg{width:13px;height:13px;margin:0 4px 0 -3px;vertical-align:-2px}
  /* Remix: one button in the colours a hat can go, softened (dusty, not neon), sliding slowly through it. A tap slides its drawer out to the right:
     the ways to remix, from a little to a lot, each ringed in one of the button's colours (js/lab-console.js REMIXES).
     Remix stays put. On a phone the drawer scrolls on its own where it runs past the row, fading at its end; from a
     tablet up it runs on past the column, where there is room */
  :root .lc-chips.has-mix{overflow:hidden}
  :root .lc-mix{position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 13px 0 10px;border:0;border-radius:14px;
    background:linear-gradient(100deg,#C4596A,#BC6440,#3E8466,#4C69B5,#8066B5,#A9558C,#C4596A) 0 0/200% 100% repeat-x;color:#fff;font:600 12px/1 var(--text);
    text-shadow:0 1px 1px rgba(0,0,0,.2);cursor:pointer;animation:lcMix 9s linear infinite}
  :root .lc-mix::before{content:"";position:absolute;inset:-8px -3px}
  :root .lc-mix svg{width:14px;height:14px;flex:none}
  :root .lc-mix svg+svg,:root .lc-mix[aria-expanded=true] svg:first-child{display:none}
  :root .lc-mix[aria-expanded=true] svg+svg{display:block}
  @keyframes lcMix{to{background-position:-200% 0}}
  :root .lc-mixes{flex:1;min-width:0;align-self:stretch;display:flex;gap:6px;align-items:center;margin-right:-20px;padding:0 20px 0 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
    visibility:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
  :root .lc-mixes::-webkit-scrollbar{display:none}
  :root .lc-chips.mixing .lc-mixes{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
  :root .ch-chip.lc-mixo{padding-left:21px;border-color:var(--c);background:radial-gradient(circle at 11px 50%,var(--c) 3px,transparent 3.5px);
    opacity:0;transform:translateX(-14px);transition:opacity .2s,transform .35s cubic-bezier(.2,.8,.2,1),background-color .15s}
  :root .lc-chips.mixing .ch-chip.lc-mixo{opacity:1;transform:none;transition-delay:calc(var(--i) * 45ms),calc(var(--i) * 45ms),0s}
  :root .ch-chip.lc-mixo:focus-visible{background-color:color-mix(in srgb,var(--c) 14%,transparent)}
  @media (hover:hover){:root .ch-chip.lc-mixo:hover{background-color:color-mix(in srgb,var(--c) 14%,transparent)}}
  @media (prefers-reduced-motion:reduce){:root .lc-mix{animation:none}:root .lc-mixes,:root .ch-chip.lc-mixo,:root .lc-chips.mixing .lc-mixes,:root .lc-chips.mixing .ch-chip.lc-mixo{transition:none}}
  /* Remix rides on the caption's own line, the two centred together, so the caption is no taller than its words and the
     hat rises no higher than they need (js/lab-console.js rise). Its drawer slides out over the words, which step aside
     while it is open; on a phone the words may take a third line beside it */
  :root .lc-voice.has-mix{display:grid;grid-template-columns:auto minmax(0,max-content);justify-content:center;align-items:center;column-gap:12px;row-gap:6px;padding-inline:20px}
  :root .lc-voice.has-mix>.lc-views{grid-column:1/-1}
  :root .lc-voice.has-mix>.lc-chips{display:contents}
  :root .lc-voice.has-mix .lc-mix{grid-area:2/1}
  :root .lc-voice.has-mix .lc-mixes{grid-area:2/2;height:34px}
  :root .lc-voice.has-mix>.lc-say{grid-area:2/2;justify-content:flex-start;padding:0}
  :root .lc-voice.has-mix .lc-read.msg{text-align:left;-webkit-line-clamp:3}
  :root .lc-voice.mixing>.lc-say{display:none}   /* out of the layout, not just invisible: Safari on the iPhone drew an invisible one under the options (js/lab-console.js chips() also sets it on the element) */
  /* 5. the strip: one height whatever is in it. An empty front's is only its head: on a phone the caption and the ideas
     move into the rest of it, so the hat stays put */
  :root .studio.strip-short:not(.kb) .lc-voice{grid-area:strip;margin-bottom:0;padding-bottom:10px}
  :root .lc-pull{display:none}
  :root .lc-strip{grid-area:strip;display:block;position:relative;border-top:1px solid var(--lab-hair);padding:0 20px;overflow:hidden}
  :root .lc-strip>*{animation:lcIn .22s ease both}
  @keyframes lcIn{from{opacity:0;transform:translateY(4px)}}
  @media (prefers-reduced-motion:reduce){:root .lc-strip>*{animation:none}}
  :root .lc-row{display:flex;align-items:center;gap:10px;min-width:0}
  :root .lc-row.head{height:36px;justify-content:space-between}
  :root .lc-tabs{display:flex;gap:14px;min-width:0}
  :root .lc-tab{position:relative;height:36px;padding:0;border:0;background:transparent;font:400 12.5px/1 var(--text);color:var(--lab-t2);cursor:pointer;white-space:nowrap}
  :root .lc-tab::before{content:"";position:absolute;inset:0 -7px -4px}   /* a wider, taller finger target than the word */
  :root .lc-tab::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .2s}
  :root .lc-tab[aria-pressed=true]{color:var(--lab-t1)}
  :root .lc-tab[aria-pressed=true]::after{transform:none}
  :root .lc-now{display:flex;align-items:center;gap:8px;flex:none}
  :root .lc-dot{width:20px;height:20px;border-radius:50%;background:var(--c,#fff);box-shadow:inset 0 0 0 1px var(--lab-edge)}
  :root .lc-link{position:relative;height:28px;padding:0;border:0;background:transparent;color:var(--lab-t2);cursor:pointer}
  :root .lc-link::before{content:"";position:absolute;inset:-8px -6px}
  :root .lc-link.lc-mono{color:var(--lab-t2)}
  /* the sliders: a thin track, a 20px knob in the colour it sets, ringed in light; a 44px band takes the finger */
  :root .lc-slide{display:flex;align-items:center;gap:12px;height:40px}
  :root .lc-slide.pair{gap:20px}   /* the brim words' hue and shade, on one row */
  :root .lc-range{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:44px;margin:-2px 0;padding:0;background:transparent;touch-action:none;cursor:pointer}
  :root .lc-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--track,var(--lab-track))}
  :root .lc-range::-moz-range-track{height:8px;border-radius:4px;background:var(--track,var(--lab-track))}
  :root .lc-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:var(--knob,#fff);border:0;box-shadow:var(--lab-ring)}
  :root .lc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--knob,#fff);border:0;box-shadow:var(--lab-ring)}
  :root .lc-range.hue{--track:linear-gradient(90deg,#f00,#ff0 16.7%,#0f0 33.3%,#0ff 50%,#00f 66.7%,#f0f 83.3%,#f00)}
  /* a field looks 32px (or 38) but takes a 44px tap: clear borders above and below, the fill clipped inside them */
  :root .lc-lbl{flex:none;font:400 12.5px/1 var(--text);color:var(--lab-t2)}
  :root .lc-btns{display:flex;gap:8px;align-items:center}
  :root .lc-btn{position:relative;flex:none;height:36px;padding:0 16px;border:1px solid var(--lab-edge);border-radius:18px;background:transparent;color:var(--lab-t1);font:400 13px/1 var(--text);cursor:pointer;white-space:nowrap}
  :root .lc-btn::before{content:"";position:absolute;inset:-4px -2px}
  :root .lc-btn.fill{background:var(--lab-t1);border-color:var(--lab-t1);color:var(--lab-bg);font-weight:500}
  :root .lc-btn.grow{flex:1}
  :root .lc-btn[disabled]{opacity:.4}
  :root .lc-fonts .lc-tab{font-size:13px}
  :root .lc-tabs.lc-fonts{gap:13px;overflow-x:auto;scrollbar-width:none}   /* the fonts run past a phone's width: the row scrolls */
  :root .lc-tabs.lc-fonts::-webkit-scrollbar{display:none}
  :root .lc-tabs.lc-fonts.more-next{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  :root .lc-tabs.lc-fonts.more-prev{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
  :root .lc-tabs.lc-fonts.more-prev.more-next{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  /* a house font's tab: its name in its own letters (build/brim-fonts.py), a flat shape in the tab's colour, its line
     set by the tab (js/lab-console.js fontTabs) so the names stand on one line */
  :root .lc-fonts .lc-tab.lc-tf{display:flex;align-items:flex-start;flex:none}
  :root .lc-lf{display:block;flex:none;background:currentColor;-webkit-mask:var(--lf) center/100% 100% no-repeat;mask:var(--lf) center/100% 100% no-repeat}
  :root .lc-bar{height:2px;border-radius:1px;background:var(--lab-track);overflow:hidden;margin:8px 0 14px}
  :root .lc-bar i{display:block;height:100%;width:var(--p,0%);background:var(--lab-accent);transition:width .6s ease}
  /* Start: the blank, a Core hat or a Proof, one row of tiles that scrolls sideways inside the strip; the pane never does */
  :root .lc-rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -20px;padding:2px 20px 0;touch-action:pan-x;scroll-snap-type:x proximity;scroll-padding-inline:20px}   /* the snap keeps the padding, so the first tile never sits on the edge */
  :root .lc-rail::-webkit-scrollbar{display:none}
  :root .lc-railwrap{position:relative}
  :root .lc-arrow{display:none}
  @media (hover:hover) and (pointer:fine){   /* a mouse: arrows at the row's ends, over a fade of the tiles, while there is more that way */
    :root .lc-arrow{position:absolute;z-index:2;top:0;display:grid;place-items:center;width:48px;height:54px;padding:0;border:0;background:none;color:var(--lab-t1);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
    :root .lc-arrow.prev{left:-20px;padding-left:10px;justify-items:start;background:linear-gradient(90deg,var(--lab-bg) 35%,transparent)}
    :root .lc-arrow.next{right:-20px;padding-right:10px;justify-items:end;background:linear-gradient(270deg,var(--lab-bg) 35%,transparent)}
    :root .lc-arrow svg{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:50%;background:var(--lab-bg);box-shadow:0 0 0 1px var(--lab-hair),0 1px 4px rgba(20,20,22,.12)}
    :root .lc-arrow:hover svg{background:var(--lab-fill-hi)}
    :root .more-prev>.lc-arrow.prev,:root .more-next>.lc-arrow.next{opacity:1;pointer-events:auto}
  }
  :root .lc-tile{flex:none;width:64px;display:grid;gap:5px;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--lab-t2);scroll-snap-align:start}
  :root .lc-tile .ph{position:relative;display:grid;place-items:center;width:64px;height:52px;border-radius:8px;overflow:hidden;background:var(--lab-fill);box-shadow:inset 0 0 0 1px var(--lab-hair)}
  /* the hat photos are square with the hat across 75% of their width and 60% of their height, a little above centre:
     sized so the whole hat, peak to brim, fills the tile */
  :root .lc-tile img{position:absolute;left:50%;top:50%;width:var(--tile-img,68px);height:var(--tile-img,68px);max-width:none;transform:translate(-50%,-48%)}
  :root .lc-tile[aria-current=true] .ph{box-shadow:inset 0 0 0 1.5px var(--lab-t1)}
  :root .lc-tile>span:last-child{font:400 10px/1.1 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root .lc-tile svg{width:20px;height:20px}
  :root .lc-tile.blank .ph{background:repeating-linear-gradient(45deg,var(--lab-fill) 0 6px,transparent 6px 12px)}
  /* Art, with an image on the crown: the chat. The versions, the latest exchange (or ideas to try), a field and send */
  :root .ch-chip{position:relative;flex:none;height:28px;padding:0 11px;border-radius:14px;border:1px solid var(--lab-edge);background:transparent;color:var(--lab-t1);font:400 12px/1 var(--text);cursor:pointer}
  :root .ch-chip::before{content:"";position:absolute;inset:-8px -3px}
  :root .ch-send{flex:none;width:38px;height:38px;border-radius:19px;border:0;background:var(--lab-t1);color:var(--lab-bg);display:grid;place-items:center;cursor:pointer;position:relative}
  :root .ch-send::before{content:"";position:absolute;inset:-3px}
  :root .ch-send svg{width:18px;height:18px}
  :root .ch-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle}
  :root .ch-dots i{width:4px;height:4px;border-radius:2px;background:var(--lab-t3);animation:chDot 1s ease-in-out infinite}
  :root .ch-dots i:nth-child(2){animation-delay:.15s}
  :root .ch-dots i:nth-child(3){animation-delay:.3s}
  @keyframes chDot{50%{opacity:.25;transform:translateY(-2px)}}
  :root .model .patch{transition:filter .3s,opacity .3s}
  :root .model .patch.ch-busy{filter:saturate(.3);opacity:.55}
  @media (prefers-reduced-motion:reduce){:root .ch-dots i{animation:none}}
  /* the chat box, always there at the foot: the one place to type and to add a picture (the +, a paste, a drop) */
  :root .lc-ask{grid-area:lask;display:flex;align-items:center;min-width:0;padding:0 16px env(safe-area-inset-bottom)}
  :root .lc-field{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:48px;padding:0 5px;border-radius:24px;background:var(--lab-fill);box-shadow:inset 0 0 0 1px var(--lab-hair);transition:box-shadow .2s,background .2s}
  :root .lc-field:focus-within,:root .lc-ask.dropping .lc-field{background:var(--lab-fill-hi);box-shadow:inset 0 0 0 1px var(--lab-edge)}
  :root .lc-field input{flex:1;min-width:0;height:44px;margin:0;padding:0 6px;border:0;background:transparent;color:var(--lab-t1);font:400 16px/1 var(--text);-webkit-user-select:text;user-select:text;outline:0}
  :root .lc-field input::placeholder{color:var(--lab-t3)}
  :root .lc-field input:focus-visible{outline:0}   /* the field itself shows focus */
  :root .lc-plus{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:19px;background:transparent;color:var(--lab-t1);cursor:pointer;position:relative}
  :root .lc-plus::before{content:"";position:absolute;inset:-3px}
  :root .lc-plus svg{width:20px;height:20px}
  :root .lc-ask :disabled{opacity:.4;cursor:default}
  /* the part picked on the hat: one thin line just inside its edge (1.5px: white on a dark colour, ink on a light one,
     js/lab.js lineOn), the brim words' line round them, or the front's box; the tag in the chat box names it. No halo:
     until 2026-10-05 a dark band, grown in square steps, ran either side of a white line */
  :root .model[data-pick=crown] [data-hl=crown],:root .model[data-pick=brim] [data-hl=brim],:root .model[data-pick=button] [data-hl=button]{display:block;opacity:1;stroke:var(--ol,#fff);stroke-width:3px}
  :root .model .ol-words{display:none;fill:none;stroke:var(--ol-words,#fff);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  :root .model[data-pick=words] .ol-words{display:block}   /* the brim words, typed or stitched: one thin pill round them (js/lab.js wordsPill) */
  :root .model[data-pick=front] .hl.front{display:block;border:calc(1.5px / var(--zk,1)) dashed var(--ol-front,#fff)}
  :root .model[data-pick=front]:has(.slot:not([hidden])) .hl.front{display:none}   /* an empty front: its own square is outlined instead */
  /* with art on it, the box is the art's handle: dragged, the art moves; a corner pulled, it grows or shrinks about its
     middle (js/lab.js). The corners are small white dots, ringed, that read on any crown */
  :root .model[data-pick=front]:has(.patch:not([hidden])) .hl.front{pointer-events:auto;cursor:move;touch-action:none}
  :root .model .hl.front .grip{display:none;position:absolute;width:11px;height:11px;margin:-6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(20,20,22,.45),0 1px 3px rgba(0,0,0,.3)}
  :root .model .hl.front .grip{scale:calc(1 / var(--zk,1))}   /* the same size up close */
  :root .model .hl.front .grip::before{content:"";position:absolute;inset:-12px}   /* a fingertip's worth round it */
  :root .model[data-pick=front]:has(.patch:not([hidden])) .hl.front .grip{display:block}
  :root .model .hl.front .grip[data-grip=nw]{left:0;top:0;cursor:nwse-resize}
  :root .model .hl.front .grip[data-grip=ne]{left:100%;top:0;cursor:nesw-resize}
  :root .model .hl.front .grip[data-grip=sw]{left:0;top:100%;cursor:nesw-resize}
  :root .model .hl.front .grip[data-grip=se]{left:100%;top:100%;cursor:nwse-resize}
  :root .studio.moving,:root .studio.moving *{cursor:grabbing!important}
  :root .studio.moving .model .glow{opacity:0!important}   /* nothing else washed while the art is moved */
  :root .model[data-pick=front] .slot{border-color:var(--ol-front,#fff);color:rgba(20,20,22,.6)}
  :root .model[data-pick=front] .slot.dark{color:rgba(240,235,225,.8)}
  :root .studio.art-wanted .lc-plus{background:var(--lab-t1);color:var(--lab-bg)}   /* the empty front picked: the + is how a picture gets there */
  :root .lc-focus{flex:none;display:inline-flex;align-items:center;gap:2px;height:30px;margin:0 2px;padding:0 3px 0 11px;border-radius:15px;background:var(--lab-t1);color:var(--lab-bg);font:500 12px/1 var(--text);white-space:nowrap}
  :root .lc-focus-x{position:relative;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
  :root .lc-focus-x::before{content:"";position:absolute;inset:-8px -6px}
  :root .lc-focus-x svg{width:13px;height:13px}
  :root .studio.wording .lc-field input{letter-spacing:.03em}   /* the words, as typed: capitals and lowercase as written */
  :root .lc-name{font:500 14px/1 var(--text);color:var(--lab-t1);white-space:nowrap}
  /* the colour code: a field, picked up whole when tapped, to copy or to type or paste a code over; the copy button and
     the eyedropper beside it */
  :root .lc-hex{width:calc(8ch + 1em + 10px);height:28px;margin:0 -4px 0 2px;padding:0 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--lab-t2);text-transform:uppercase;outline:none}
  :root .lc-hex:focus{border-color:var(--lab-edge);color:var(--lab-t1);background:var(--lab-bg)}
  :root .lc-mini{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:14px;background:transparent;color:var(--lab-t2);cursor:pointer;transition:color .2s,background .2s}
  :root .lc-mini::before{content:"";position:absolute;inset:-8px -4px}   /* 44px to the finger */
  :root .lc-mini svg{width:16px;height:16px}
  :root .lc-mini[aria-pressed=true]{background:var(--lab-t1);color:var(--lab-bg)}
  :root .studio.eyedrop .model{cursor:crosshair}
  @media (hover:hover){:root .lc-mini:not([aria-pressed=true]):hover{color:var(--lab-t1);background:var(--lab-fill)}}
  :root .lc-mini[disabled]{opacity:.32;cursor:default;pointer-events:none}
  /* the front art's tools in its head (a closer look, Remove), a hairline, then Done; under them its size: a step
     smaller, the slider (a thin track, inked up to the size), a step bigger, and Fit to front */
  :root .lc-tools{gap:6px}
  :root .lc-sep{flex:none;width:1px;height:16px;margin:0 6px 0 4px;background:var(--lab-edge);opacity:.6}
  :root .lc-sizer{height:44px;gap:4px}
  :root .lc-range.lc-size{--knob:var(--lab-bg);--track:linear-gradient(90deg,var(--lab-t1) var(--fill,50%),var(--lab-track) var(--fill,50%));margin:-2px 4px}
  :root .lc-range.lc-size::-webkit-slider-runnable-track{height:4px;border-radius:2px}
  :root .lc-range.lc-size::-moz-range-track{height:4px;border-radius:2px}
  :root .lc-range.lc-size::-webkit-slider-thumb{margin-top:-8px;box-shadow:0 0 0 1.5px var(--lab-t1),0 1px 3px rgba(0,0,0,.18)}
  :root .lc-range.lc-size::-moz-range-thumb{box-shadow:0 0 0 1.5px var(--lab-t1),0 1px 3px rgba(0,0,0,.18)}
  :root .lc-btn.lc-fit{display:inline-flex;align-items:center;gap:7px;margin-left:8px;padding:0 14px 0 12px;transition:background .2s,color .2s,border-color .2s}
  :root .lc-btn.lc-fit svg{width:15px;height:15px;flex:none}
  :root .lc-btn.lc-fit[aria-pressed=true]{background:var(--lab-t1);border-color:var(--lab-t1);color:var(--lab-bg)}
  /* the brim words' size: a small A and a big one, in one pill, after the colour's sliders */
  :root .lc-step{flex:none;display:flex;align-items:center;gap:2px;height:32px;padding:0 1px;border:1px solid var(--lab-edge);border-radius:16px}
  :root .lc-step .lc-mini{width:30px}
  :root .lc-step .lc-mini svg{width:18px;height:18px}
  /* the picture in the chat box, waiting to be sent with what to do with it */
  :root .lc-pic{position:relative;flex:none;width:36px;height:36px;margin:0 2px;border-radius:8px;background:var(--lab-bg);box-shadow:inset 0 0 0 1px var(--lab-edge)}
  :root .lc-pic img{display:block;width:100%;height:100%;padding:3px;box-sizing:border-box;border-radius:8px;object-fit:contain}
  :root .lc-pic-x{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:9px;background:var(--lab-t1);color:var(--lab-bg);cursor:pointer}
  :root .lc-pic-x::before{content:"";position:absolute;inset:-8px}
  :root .lc-pic-x svg{width:12px;height:12px}
  /* the conversation: over the hat below a wide screen (from the view down to the strip, the chat box under it), opened
     by using the chat box; down the right on a wide screen */
  :root .lc-thread{grid-row:lviews-start / lask-start;grid-column:1;z-index:6;flex-direction:column;min-height:0;background:var(--lab-bg);border-bottom:1px solid var(--lab-hair)}
  :root .studio.threaded .lc-thread{display:flex;animation:lcIn .22s ease both}
  :root .lc-thead{flex:none;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 6px 0 20px}
  :root .lc-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;margin:0;padding:6px 20px 20px;list-style:none;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-user-select:text;user-select:text}
  :root .lm{display:grid;gap:6px;justify-items:start;max-width:86%}
  :root .lm.you{align-self:flex-end;justify-items:end}
  :root .lm p{margin:0;font:400 13.5px/1.4 var(--text);color:var(--lab-t2)}
  :root .lm p b{font-weight:500;color:var(--lab-t1)}
  :root .lm.you p{padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--lab-t1);color:var(--lab-bg)}
  :root .lm.empty{max-width:none;margin:auto 0}
  :root .lm.empty p{text-align:center;color:var(--lab-t3)}
  :root .lm-pic{display:block;width:136px;height:136px;border-radius:12px;overflow:hidden;background:var(--lab-fill);box-shadow:inset 0 0 0 1px var(--lab-hair)}
  :root .lm-pic img{display:block;width:100%;height:100%;padding:10px;box-sizing:border-box;object-fit:contain}
  :root .lm-use{height:auto;color:var(--lab-t1)}
  :root .lm-on{color:var(--lab-t3)}
  /* an answer is the hat as it came back, drawn as the board draws a proof, and a tap shows it big; the one on screen
     says so */
  :root .lm-shot{position:relative;display:block;width:200px;height:176px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--lab-fill);box-shadow:inset 0 0 0 1px var(--lab-hair);cursor:pointer}
  :root .lm-shot .labshot{position:absolute;left:50%;top:50%;width:252px;transform:translate(-50%,-49%)}
  :root .lm.slab .lm-on,:root .lm.slab.on .lm-use{display:none}
  :root .lm.slab.on .lm-on{display:inline}
  :root .lm.slab.on .lm-shot{box-shadow:inset 0 0 0 1.5px var(--lab-t1)}
  :root .lm.err p{font-size:12.5px;color:var(--lab-t3)}
  :root .lm.err .lc-link{height:auto;margin-left:4px;color:var(--lab-t1)}
  :root .lm.ask p{color:var(--lab-t1)}   /* the brain's question, and its answers to tap (js/lab-console.js) */
  :root .lm-choices{display:flex;flex-wrap:wrap;gap:6px}
  /* the answer on its way: the hat as it is, faded, the stitching sheen passing over it */
  :root .lm.wait .lm-shot{cursor:default}
  :root .lm.wait .labshot{opacity:.45;filter:saturate(.4)}
  :root .lm.wait .lm-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) 0 0/250% 100% no-repeat;animation:stitchSweep 1.3s linear infinite}
  html.lab-dark .lm.wait .lm-shot::after{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%)}
  :root .lm.wait .lc-link{height:auto;margin-left:6px;color:var(--lab-t1)}
  @media (prefers-reduced-motion:reduce){:root .lm.wait .lm-shot::after{animation:none}}
  :root .lc-thread.dropping .lc-msgs{box-shadow:inset 0 0 0 1px var(--lab-edge)}
  /* while the art engine works, the front shows it being stitched in: a dashed patch box with a sheen passing over */
  :root .model .stitch-fx{position:absolute;width:var(--patch-w,26%);height:var(--patch-maxh,20%);border-radius:12px;pointer-events:none;z-index:3;
    outline:2px dashed color-mix(in srgb,var(--edge,#141416) 45%,transparent);outline-offset:-2px;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%) 0 0/250% 100% no-repeat;animation:stitchSweep 1.3s linear infinite}
  @keyframes stitchSweep{from{background-position:130% 0}to{background-position:-30% 0}}
  @media (prefers-reduced-motion:reduce){:root .model .stitch-fx{animation:none}}
  /* the brim words being made: a dashed line round them and a sheen passing along, inside it (js/lab.js busy) */
  :root .model .busy-words[hidden]{display:none}   /* an svg: the page's [hidden] rule is for html elements only */
  :root .model .busy-words .wb-line{fill:none;stroke:color-mix(in srgb,var(--ol-words,#141416) 55%,transparent);stroke-width:1.5px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
  :root .model .busy-words .wb-sweep{animation:wordsSweep 1.5s linear infinite}
  @keyframes wordsSweep{from{transform:translateX(80px)}to{transform:translateX(1180px)}}
  @media (prefers-reduced-motion:reduce){:root .model .busy-words .wb-sweep{animation:none;transform:translateX(590px)}}
  /* while new brim words are stitched in a remix's own hand, the words standing in for them pulse */
  :root .model .edge.ch-busy text{animation:wordsWait 1.1s ease-in-out infinite alternate}
  @keyframes wordsWait{from{opacity:.3}to{opacity:.85}}
  @media (prefers-reduced-motion:reduce){:root .model .edge.ch-busy text{animation:none;opacity:.6}}
  /* the keyboard up (js sets --vv-h to what is left, and the pane covers it): the view and the strip step aside, the hat gets smaller, and the
     chat box sits on the keyboard */
  :root .studio.kb{grid-template-rows:auto 0 minmax(0,1fr) 0 64px}
  :root .studio.kb .lc-views,:root .studio.kb .lc-strip{visibility:hidden}
  /* typing the brim words, the fonts stay: their row alone sits over the chat box, in the readout's place, so a font is a tap away with the
     keyboard up (2026-10-03: the whole strip stepped aside, and the fonts with it) */
  :root .studio.kb.wording{grid-template-rows:auto 0 minmax(0,1fr) 48px 64px}
  :root .studio.kb.wording .lc-voice{visibility:hidden}
  :root .studio.kb.wording{--floor:20px}   /* the caption gone, the hat takes its floor (js/lab.js sizeHat) */
  :root .studio.kb.wording .lc-strip{visibility:visible}
  :root .studio.kb.wording .lc-strip .lc-row.head,:root .studio.kb.wording .lc-strip .lc-slide{display:none}
  :root .studio.kb.wording .lc-strip .lc-row{height:47px}
  /* with the cook switch on there are no fonts (the look is said in the chat box), so the words' colour and size sit there instead (2026-10-07:
     the row stood empty), and the + steps aside, so the words have the box's room: a picture goes on the front, not the brim */
  :root .studio.kb.wording .lc-strip:not(:has(.lc-fonts)) .lc-slide.pair{display:flex;height:47px}
  :root .studio.kb.wording .lc-plus{display:none}
  :root .studio.kb.wording .lc-field{padding-left:4px}
  /* the dialogs the ways out open sit over the console */
  html:has(#lab) .modal,html:has(#lab) .qv{z-index:80}
}
/* the console on a wide screen: the phone's pane, scaled up. The hat grows (sizeHat caps it near 560px), the bar spans
   the width, and the readout, the strip and the tools keep to one centred column so the controls stay together */
@media (max-width:860px){
  html:has(#lab){--bar:56px}
  html:has(#lab),html:has(#lab) body{height:100%;overflow:hidden;overscroll-behavior:none}
  html:has(#lab) .bar{grid-template-rows:56px}
  html:has(#lab) .strip,html:has(#lab) .foot{display:none}
  :root .studio{position:fixed;left:0;right:0;top:calc(var(--bar) + var(--vv-top,0px));margin:0;height:calc(100vh - var(--bar));height:calc(var(--vv-h,100dvh) - var(--bar));z-index:50;padding-bottom:0}
  :root .studio.kb{top:var(--vv-top,0px);height:var(--vv-h,100dvh)}
  html:has(#lab.kb) .bar{visibility:hidden}
}
@media (min-width:861px){
  /* the strip is a drawer over the floor under the brim, shut to its head till it is wanted (js/lab-console.js drawer),
     and the view sits at the stage's top left, so the stage runs from the bar to the chat box and the hat is sized as if the strip
     weren't there: the floor under it holds the shut drawer, the caption and the ideas; opened, the drawer slides up
     over that floor and the hat glides up into the bar's empty middle, never shrinking */
  :root .studio{grid-template-rows:auto auto minmax(0,1fr) 76px;grid-template-areas:"ltop" "lviews" "stage" "lask";
    --dh:44px;--floor:112px;--room:64px;--dmax:236px}   /* open, the drawer carries the view's dots, the caption and the ideas (Remix, on a remix): 132 + 96 + 8 */
  :root .studio.drawer{--dh:132px}
  :root .studio.drawer.strip-short{--dh:52px}
  :root .lc-top{position:relative;z-index:7;pointer-events:none}   /* over a risen hat, only its buttons take a tap: the title's box runs the bar's width and hid the top button until 2026-10-05 */
  :root .lc-top :is(a,button,input,label){pointer-events:auto}
  :root .studio-stage{clip-path:inset(-76px 0 0 0)}   /* the whole bar above, so the tips over a risen hat aren't cut */
  :root .lc-strip{grid-area:stage;align-self:end;z-index:5;height:var(--dh);background:var(--lab-bg);transition:height .38s cubic-bezier(.2,.8,.2,1)}
  :root .studio:not(.drawer) .lc-strip{cursor:pointer}
  @media (prefers-reduced-motion:reduce){:root .lc-strip{transition:none}}
  :root .studio.strip-short:not(.kb) .lc-voice{grid-area:stage;margin-bottom:var(--dh);padding-bottom:6px}
  :root .lc-pull{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:14px;background:transparent;color:var(--lab-t1);cursor:pointer}
  :root .lc-pull::before{content:"";position:absolute;inset:-8px}
  :root .lc-pull svg{width:16px;height:16px;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
  :root .lc-pull[aria-expanded=true] svg{transform:rotate(180deg)}
  :root .lc-top{padding:0 24px;height:76px}
  :root .lc-over{display:grid;width:auto;grid-auto-flow:column;gap:6px;padding:0 14px 0 12px;border-radius:22px;font:500 13px/1 var(--text);margin-right:4px}
  :root .lc-title{gap:6px}   /* the name under the title, as on a phone */
  :root .lc-h{font-size:34px}
  :root .lc-sub{font-size:14px}
  :root .lc-voice,:root .lc-ask{width:100%;max-width:600px;justify-self:center}
  :root .lc-chips.has-mix{overflow:visible}
  :root .lc-mixes{flex:none;margin-right:0;padding-right:0;overflow:visible;-webkit-mask-image:none;mask-image:none}   /* Remix's drawer, all of it */
  :root .lc-thead,:root .lc-msgs{padding-inline:max(20px,calc(50% - 300px))}   /* opened over the hat, the conversation keeps to the controls' column */
  :root .lc-read.msg{font-size:13.5px}
  :root .lc-strip>div{max-width:560px;margin:0 auto;padding-top:6px}
  /* Start's row of hats runs the full width; its tabs keep to the column */
  :root .lc-strip[data-tool=start]>div{max-width:none}
  :root .lc-strip[data-tool=start] .lc-row{max-width:560px;margin:0 auto}
  :root .lc-rail{margin:0 -20px;padding:2px 24px 0;scroll-padding-inline:24px;justify-content:safe center}
  :root .lc-tile{width:72px}
  :root .lc-tile .ph{width:72px;height:58px;--tile-img:76px}
  :root .lc-k,:root .lc-read,:root .lc-mono{font-size:11px}
  :root .lc-tab,:root .lc-lbl,:root .lc-btn{font-size:13.5px}
  @media (hover:hover){
    :root .lc-tab:hover{color:var(--lab-t1)}
    :root .lc-views button:not([aria-pressed=true]):hover i{background:var(--lab-t2)}
    :root .lc-btn:hover{border-color:var(--lab-t2)}
    :root .lc-icon:not([disabled]):hover{background:var(--lab-fill)}
    :root .lm.slab:not(.on) .lm-shot:hover{box-shadow:inset 0 0 0 1px var(--lab-t2)}
  }
  /* a part under the pointer: washed (the .glow rules above) */
  :root .model .ol{display:block;stroke:var(--lab-t2);stroke-width:2px}
  :root .model .glow.hov{opacity:var(--peak)}
  :root .model .slot.hov{background:rgba(20,20,22,.07)}
  :root .model .slot.dark.hov{background:rgba(255,255,255,.12)}
  :root .model:not([data-pick=front]) .patch:not([hidden]) ~ .hl.front.hov{display:block;border:1px dashed var(--lab-t2)}   /* the art on the front, the same (an empty front's square shows it itself) */
  :root .studio.dropping .hatbox::after{display:grid;inset:4%;border:1px dashed var(--lab-t2);background:color-mix(in srgb,var(--lab-bg) 75%,transparent);color:var(--lab-t1);font:400 14px var(--text)}
}
/* a wide screen: the conversation runs down the right, always there, beside the whole console */
@media (min-width:1180px){
  :root .studio{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"ltop ltop" "lviews thread" "stage thread" "lask thread"}
  :root .lc-thread{display:flex;grid-area:thread;border-bottom:0;border-left:1px solid var(--lab-hair);animation:none}
  :root .lc-thread-x{display:none}
  :root .lc-thead,:root .lc-msgs{padding-inline:20px}
}
@media (max-width:520px){
  .lanes{grid-template-columns:1fr}
  .lane.all{grid-column:auto}
  .grid{grid-template-columns:1fr 1fr}
  .card .nm{font-size:15px}
  .card .buy{left:6px;right:6px;bottom:4px}
  .card .buy .btn{height:38px;font-size:13px}
  .drop form{flex-direction:column}
  .foot-cols{grid-template-columns:1fr}
  .page-head h1{font-size:9.4vw}
}

/* ---------- SIZE PICKER ---------- */
.qv-size{margin:14px 0 4px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.qv-size-lbl{font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sizes .size{height:38px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:transparent;font:600 14px var(--text);color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.sizes .size:hover{background:var(--hair)}
.sizes .size[aria-checked=true]{background:var(--ink);color:var(--bone)}
/* a sold-out size: struck through and quiet, still there so the three sizes always read the same */
.sizes .size.out{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sizes .size.out:hover{background:transparent}
.size-help{font-size:13px;margin-left:auto}
.bag-item .sz{font:600 12px var(--text);color:var(--soft);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{padding-top:0;max-width:820px}
.faq h2{font-size:clamp(22px,2.2vw,32px);margin-bottom:14px}
.faq h3{font-size:18px;margin:26px 0 8px}
.faq p{font-size:15px;line-height:1.55;color:var(--soft);max-width:62ch}
.faq-note{border-left:3px solid var(--ink);padding-left:12px;color:var(--ink)}
/* the legal pages (terms.html, privacy.html, contact.html) and the FAQ's answers: paragraphs and lists spaced as
   prose, the contents list, the big email, and a blank still waiting on a decision, highlighted until it's filled */
.faq>:is(p,ul,ol)+:is(p,ul,ol){margin-top:12px}
.faq>:is(ul,ol){font-size:15px;line-height:1.55;color:var(--soft);max-width:62ch;margin:0;padding-left:1.3em}
.faq li{margin:6px 0;padding-left:2px}
.faq>p b,.faq li b{color:var(--ink)}
.faq a{text-underline-offset:3px}
.toc ol{columns:2 240px;column-gap:40px;margin:22px 0 0;padding:0;list-style:none;counter-reset:toc;font-size:15px;line-height:1.4}
.toc li{break-inside:avoid;margin:0 0 9px;counter-increment:toc}
.toc li::before{content:counter(toc) ". ";font-weight:700;color:var(--ink)}
.toc a{color:var(--soft)}
.contact-mail a{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;font-weight:800;font-size:clamp(24px,4vw,44px);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.faq .contact-mail{max-width:none;margin:4px 0 16px}
.agree a,.drop-fine a{color:inherit;text-underline-offset:2px}
.drop .drop-fine{font-size:13px;margin-top:12px}
/* the formal Terms and Privacy Policy: numbered clauses, lettered sub-clauses indented, the definitions, the date line,
   and tables whose rows stack on a phone */
.faq>p.cl{padding-left:1.4em}
.faq>p.cl+p.cl{margin-top:6px}
.faq>ul.defs{list-style:none;padding-left:0}
.legal-meta{font-size:14px;color:var(--ink)!important}
.ltable{overflow-x:auto;margin:14px 0}
.ltable .sizetable{margin:0}
@media (max-width:560px){.ltable thead{display:none}.ltable tr{display:block;padding:10px 0;border-bottom:1px solid var(--hair)}.ltable .sizetable td{display:block;border:0;padding:2px 0}.ltable td:nth-child(3)::before{content:"Sources: ";font-weight:700;color:var(--ink)}}   /* a phone: each row stacks, its first cell the heading */
.ltable td,.ltable th{vertical-align:top;font-size:14px;line-height:1.45;color:var(--soft)}
.ltable td b{color:var(--ink)}
/* the size band (faq.html#sizing): which size to order along a tape of head sizes, --lo to --hi cm; a head typed in pins it */
.sizeband{margin:18px 0 22px;--span:calc(var(--hi) - var(--lo))}
.sb-bar{position:relative;height:58px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper)}
.sb-seg{position:absolute;top:0;bottom:0;left:calc((var(--a) - var(--lo)) / var(--span) * 100%);width:calc((var(--b) - var(--a)) / var(--span) * 100%);display:grid;place-items:center;text-align:center;padding:0 4px;font:700 13px/1.15 var(--text);border-left:1.5px solid var(--paper)}
.sb-seg.kids{background:#E3DCCB;color:var(--ink)}
.sb-seg.sm{background:#9C978C;color:var(--paper)}
.sb-seg.ml{background:var(--ink);color:var(--bone)}
.sb-seg.on{box-shadow:inset 0 0 0 3px #C9A24A}
.sb-pin{position:absolute;top:-10px;bottom:-10px;width:3px;margin-left:-1.5px;background:#C9A24A;border-radius:2px;left:calc((var(--at) - var(--lo)) / var(--span) * 100%)}
.sb-ticks{position:relative;height:20px;margin-top:6px;font:600 12px var(--text);color:var(--soft);font-variant-numeric:tabular-nums}
.sb-ticks.in{margin-top:0;color:#9C978C}
.sb-ticks span{position:absolute;left:calc((var(--t) - var(--lo)) / var(--span) * 100%);transform:translateX(-50%);white-space:nowrap}
.sb-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.sb-ask label{font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.sb-ask input{width:96px;height:42px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:8px 12px;font:700 16px var(--text);color:var(--ink)}
.sb-unit{display:inline-flex;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden}
.sb-unit button{height:39px;padding:0 14px;border:0;background:transparent;font:600 14px var(--text);color:var(--ink);cursor:pointer}
.sb-unit button[aria-checked=true]{background:var(--ink);color:var(--bone)}
.sb-say{flex-basis:100%;margin:0;font-size:15px;color:var(--ink)!important}
@media (max-width:560px){.sb-seg{font-size:11px;overflow-wrap:anywhere}.sizetable{font-size:13px}.sizetable th,.sizetable td{padding:8px 8px 8px 0}}
.sizetable{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:15px}
.sizetable th,.sizetable td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair)}
.sizetable th{font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}

/* ---------- CUSTOM RUN ---------- */
/* Same three moves as .proof and .model: the plate as image and as mask, a tint per part multiplied
   through it, the brim words on the measured arc. Sized by whatever box it is dropped into. */
.labshot{--plate:url(../assets/lab/plates/a0-640.webp);position:relative;display:block;width:100%;aspect-ratio:1/1;isolation:isolate}
.labshot>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
.labshot .tint{position:absolute;inset:0;background:var(--c);mix-blend-mode:plus-lighter;-webkit-mask:var(--plate) center/contain no-repeat;mask:var(--plate) center/contain no-repeat;pointer-events:none}
.labshot .tint.crown{-webkit-mask-image:var(--a0-crown);mask-image:var(--a0-crown)}
.labshot .tint.brim{-webkit-mask-image:var(--a0-brim);mask-image:var(--a0-brim)}
.labshot .tint.face{-webkit-mask-image:var(--a0-face);mask-image:var(--a0-face)}
.labshot .tint.button{-webkit-mask-image:var(--a0-button);mask-image:var(--a0-button)}
.labshot.lab-blank .tint.crown{-webkit-mask-image:var(--front-crown);mask-image:var(--front-crown)}   /* the SLABoratory's own photo of the blank (js/common.js runShot); not .studio, the pane's own name, whose size it took until 2026-10-05, cropping the hat */
.labshot.lab-blank .tint.brim{-webkit-mask-image:var(--front-brim);mask-image:var(--front-brim)}
.labshot.lab-blank .tint.face{-webkit-mask-image:var(--front-face);mask-image:var(--front-face)}
.labshot.lab-blank .tint.button{-webkit-mask-image:var(--front-button);mask-image:var(--front-button)}
.labshot .edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.labshot .edge text{font-family:var(--text);font-variation-settings:"wdth" 88,"wght" 720;font-weight:720;font-stretch:88%;font-size:calc(var(--fs,58) * 1px);letter-spacing:.045em;fill:var(--edge,#141416)}
.bag-item .labshot{width:84px}

/* ---------- PROOFS ---------- */
/* A proof is the SLABoratory front view: one cached plate serving as both the <img> and the CSS mask,
   a tint per part (crown, brim, brim face, button) multiplied through it, and the brim words on the measured arc. Same
   three moves as .model, see js/lab.js setAngle(). Nothing here loads js/masks.js. */
.arcdef{position:absolute;width:0;height:0;overflow:hidden}
/* four across at most, so a hat is big enough to look at on a wide screen (eight 200px hats read as thumbnails,
   2026-10-22); the board sits on the page's gutter, its cards' own padding pulled back so the names line up with the
   search, not with the screen's edge */
.grid.proofs{--plate:url(../assets/lab/plates/a0-640.webp);grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;border-bottom:0;margin:0 -10px}
.card.proof{padding:0 10px 12px;box-shadow:none;content-visibility:auto;contain-intrinsic-size:auto 480px}   /* about a live card's height, so late-drawn cards barely move the page */
.proof .shot{margin-bottom:-15%}
.proof .ph{display:block}
/* the studio's picture leaves a fifth of its frame round the hat: 1.2 times closer in, and up off the name, then 1.26
   on hover, by its box (an inset past the card's own), never a scale, sharp in Safari for the same reason as
   .card .ph>img */
.proof .pf{position:absolute;inset:-14% -10% -6%;isolation:isolate;transition:top .28s cubic-bezier(.2,.8,.2,1),right .28s cubic-bezier(.2,.8,.2,1),bottom .28s cubic-bezier(.2,.8,.2,1),left .28s cubic-bezier(.2,.8,.2,1)}
.proof .ph img{width:100%;height:100%;object-fit:contain}
.proof:hover .pf{inset:-17% -13% -9%}
.proof .ph::before{left:14%;right:14%;bottom:18%;height:6%}
.proof .tint{position:absolute;inset:0;background:var(--c);mix-blend-mode:plus-lighter;-webkit-mask:var(--plate) center/contain no-repeat;mask:var(--plate) center/contain no-repeat;pointer-events:none}
.proof .tint.crown{-webkit-mask-image:var(--a0-crown);mask-image:var(--a0-crown)}
.proof .tint.brim{-webkit-mask-image:var(--a0-brim);mask-image:var(--a0-brim)}
.proof .tint.face{-webkit-mask-image:var(--a0-face);mask-image:var(--a0-face)}
.proof .tint.button{-webkit-mask-image:var(--a0-button);mask-image:var(--a0-button)}
.proof .edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.proof .edge text{font-family:var(--text);font-variation-settings:"wdth" 88,"wght" 720;font-weight:720;font-stretch:88%;font-size:calc(var(--fs,58) * 1px);letter-spacing:.045em;fill:var(--edge,#141416)}
.proof .buy{bottom:18%}   /* Share sits over the brim shadow of a shot pulled up 15%, never over the name */
@media (hover:none){.proof .buy{display:none}}   /* on touch the card stays a hat, a name and a pill; Share lives in the dialog */
.proof .pn{display:block;margin-top:8px;position:relative;z-index:1;font-size:13px;line-height:1.1;letter-spacing:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* above the shot it overlaps */
.proof .who{font:600 12px var(--text);color:var(--soft);margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:none){.proof:hover .pf{inset:-14% -10% -6%}}
@media (prefers-reduced-motion:reduce){.proof .pf{transition:none}.proof:hover .pf{inset:-14% -10% -6%}}

.rail #toLab{margin-left:auto;height:38px;padding:0 16px;font-size:13px}

/* home strip: a live band of the wall under the doors. Not a door: no number, no panel, no rule. */
/* The whole section is the colour block, header and rail together, so the heading still belongs to the
   hats underneath it. An ink rule top and bottom closes it against the paper doors above and the paper
   email band below. */
.proofs-peek{background:var(--bone);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding-top:clamp(32px,4.5vh,56px);padding-bottom:clamp(36px,5vh,64px)}
.peek-head{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start}
.peek-title{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.peek-title h2{font-size:clamp(26px,2.6vw,40px)}
.peek-head .line{grid-column:1;font-size:15px;color:var(--soft);max-width:62ch}
.peek-head .btn{grid-column:2;grid-row:1/span 2;align-self:center}
.peek-title .enter i{font-size:19px;line-height:1;display:inline-grid;place-items:center;font-style:normal;transition:transform .25s}
.peek-title:hover .enter i{transform:translateX(6px)}
/* the strip is a rail, not a grid. It keeps a slim scrollbar on purpose: with the bar hidden there is
   nothing on a desktop that says the row moves, and cards running off the edge just read as cropped. */
.grid.proofs.peek{display:flex;grid-template-columns:none;margin:clamp(26px,3.6vh,42px) calc(-1*var(--g)) 0;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:var(--g);padding:0 var(--g) 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.grid.proofs.peek::-webkit-scrollbar{height:8px}
.grid.proofs.peek::-webkit-scrollbar-track{background:transparent}
.grid.proofs.peek::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.grid.proofs.peek::-webkit-scrollbar-thumb:hover{background:var(--soft)}
.grid.proofs.peek{background:transparent}
.grid.proofs.peek .proof{flex:0 0 clamp(186px,17vw,240px);scroll-snap-align:start;background:transparent}
/* the last card fades at the right edge so the row reads as continuing, not as cut off */
.peek-rail{position:relative}
.peek-rail::after{content:"";position:absolute;right:0;top:0;bottom:18px;width:72px;pointer-events:none;background:linear-gradient(90deg,rgba(240,235,225,0),var(--bone));z-index:2}

/* the Core Collection dropdown: the six lanes hang off the first bar word. Every other word is a plain link. */
.navdrop{position:relative;display:flex}
.navdrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.navmenu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:172px;background:var(--ink);border:1.5px solid rgba(240,235,225,.25);border-radius:var(--r);padding:6px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:70}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{opacity:1;visibility:visible;transform:none}
.navdrop.shut .navmenu{opacity:0;visibility:hidden;transform:translateY(-4px)}
.nav .navmenu a{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:4px;border-bottom:0;font-size:14px;opacity:.88}
.nav .navmenu a i{margin-left:auto;font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;opacity:.6}
#navCore{min-width:210px}
#navCore a:first-child{border-bottom:1px solid rgba(240,235,225,.18);border-radius:4px 4px 0 0;margin-bottom:2px;padding-bottom:10px}
.navmenu hr{border:0;border-top:1px solid rgba(240,235,225,.18);height:0;margin:2px 0}   /* the lanes above, the live drop and the Brim Masters below */
.nav .navmenu a:hover,.nav .navmenu a:focus-visible{background:rgba(240,235,225,.14);opacity:1}
.nav .navmenu a[aria-current=page]{background:var(--bone);color:var(--ink);opacity:1}
.nav a[aria-current]{opacity:1;border-bottom-color:var(--bone)}
@media (prefers-reduced-motion:reduce){.navmenu{transition:none}}


@media (max-width:1100px){
  .proofs-peek{border-top:0}          /* the last door row already rules the full width here */
  .grid.proofs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .grid.proofs{margin:0 -8px}
  .card.proof{padding:0 8px 12px}
  .navdrop{display:none}
  .peek-head{grid-template-columns:1fr}
  .peek-head .btn{grid-column:1;grid-row:3;justify-self:start;margin-top:10px}
  .rail #toLab{margin-left:0;order:3}
}
@media (max-width:520px){
  .grid.proofs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof .pn{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* ---------- CONCEPT: the clock and the bar on Proofs, the Vault as a stamp ---------- */
/* One ink bar, no red: red stays with Live now and the focus ring. A vaulted hat keeps its colour; the stamp and
   the number say it was made and closed for good. */
.meter{height:5px;background:var(--hair);border-radius:3px;overflow:hidden;margin-top:8px;position:relative;z-index:1}
.meter span{display:block;height:100%;width:0;background:var(--ink);border-radius:inherit}
.meter.big{height:8px;margin-top:4px}
.proof .pstat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:6px 0 0;font-size:12px;color:var(--soft);position:relative;z-index:1}
.proof .pstat .cnt{white-space:nowrap}
.proof .pstat b{color:var(--ink);font-weight:800;font-size:13px}
.proof .pclock{white-space:nowrap;font-variant-numeric:tabular-nums}
.proof .who{margin-top:2px}
.proof .vline{font:600 12px var(--text);color:var(--soft);margin:6px 0 0;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.stamp{position:absolute;left:6px;top:6px;z-index:2;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);padding:4px 7px;font:700 10px var(--text);letter-spacing:.12em;text-transform:uppercase;border-radius:2px;pointer-events:none}
.stamp.go{background:var(--gold);color:var(--ink);border-color:var(--gold)}   /* inked: gold, the colour of the Brim Master's thread */
.stamp.soft{border-style:dashed;color:var(--soft);border-color:var(--soft)}
.proof.joined .meter span{background:var(--ink)}
.proof.review .pf{opacity:.8}
.board-line{margin:0 auto 0 0;font-size:13px;color:var(--soft)}
.board-line b{color:var(--ink);font-weight:700}
.board-line .link{font-weight:600;color:var(--ink)}
/* the quick view's join block: the bar, the count beside the ticking clock, I'm in, the line about paying */
.qv-join{display:grid;gap:8px;margin-top:4px;padding-top:14px;border-top:1.5px solid var(--line)}
.qv-count{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:14px;color:var(--soft)}
.qv-count b{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;font-weight:800;font-stretch:118%;font-size:26px;line-height:1;color:var(--ink);letter-spacing:-.01em}
.qv-clock{font-weight:700;color:var(--ink)}
.qv-join-row{display:flex;align-items:center;gap:16px;margin-top:4px}
.qv-join-row .link{font:600 13px var(--text);color:var(--soft)}
/* I'm in: the Post a Proof module with a size and an email */
.post-ph>img{width:100%;height:auto;max-height:56vh;object-fit:contain}
@media (max-width:860px){
  .board-line{font-size:12px}
}
/* who is it for: the lab's two ways out say it, and Post a Proof asks before the form */
.who-pick{display:grid;gap:10px;margin-top:4px}
.who-opt{display:grid;gap:4px;text-align:left;padding:16px 18px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);cursor:pointer;font:500 14px/1.4 var(--text);transition:background .15s,color .15s}
.who-opt b{font:800 17px var(--text)}
.who-opt span{color:var(--soft)}
@media (hover:hover){.who-opt:hover{background:var(--ink);color:var(--bone)}.who-opt:hover span{color:#B9B3A6}}
/* the share kit: the made post on the left, formats and apps on the right */
.modal.post:has(.post.share){width:min(1180px,96vw)}   /* the share kit: the made post is the point, so it gets the room */
.post.share{grid-template-columns:1.15fr 1fr}
.post.share .share-ph{background:var(--bone);padding:4% 6%;min-height:420px}
.share-ph img,.share-ph video{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:10px;box-shadow:0 18px 44px rgba(20,20,22,.2)}
.sh-wait{margin:0}
.sh-fmt{display:flex;gap:8px;flex-wrap:wrap}
.sh-apps{display:flex;flex-wrap:wrap;gap:8px}
.sh-app{height:36px;padding:0 13px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 13px var(--text);cursor:pointer;transition:background .15s,color .15s}
@media (hover:hover){.sh-app:hover{background:var(--ink);color:var(--bone)}}
.sh-cap textarea{height:auto;font-size:13px;line-height:1.45;resize:none;color:var(--soft)}
@media (max-width:860px){
  .post.share{grid-template-columns:1fr}
  .post.share .share-ph{min-height:0;padding:16px 12%}
  .share-ph img,.share-ph video{max-height:52vh}
}
/* Trending shows what moved today; everywhere else the line stays out of the way */
.proof .ptoday{display:none;margin:4px 0 0;font:700 12px var(--text);color:var(--ink);position:relative;z-index:1}
.grid.trending .proof.live .ptoday{display:block}
/* inked: the bar and the word go gold so a proof past the number stands out from the ones still filling */
.proof.inked .meter span,.qv-join.inked .meter span{background:var(--gold)}
.proof .pstat .ink-word{color:var(--gold-ink);font:800 11px var(--text);letter-spacing:.1em;margin-right:2px}
.qv-status.inked{color:var(--gold-ink);border-color:var(--gold);background:rgba(201,162,74,.12)}
/* the brim words typed: what stands in for a house font while its stitched letters come (js/lab-art.js), and on a
   design with no picture of its words. Clean is the embedded Archivo, narrow, as Golden Retriever's letters are; the
   others are the nearest face the device has (American Typewriter, Iowan Old Style and Bradley Hand on Apple), so they
   vary a little from screen to screen. Described lettering (own) stands in as the standard face, below */
.edge[data-font=clean] text{font-family:var(--display);font-variation-settings:"wdth" 75,"wght" 620;font-weight:620;font-stretch:75%;letter-spacing:.06em}
.edge[data-font=typewriter] text{font-family:"American Typewriter","Courier New",Courier,monospace;font-variation-settings:normal;font-weight:600;font-stretch:normal;letter-spacing:.08em}
.edge[data-font=elegant] text{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-variation-settings:normal;font-weight:700;font-stretch:normal;letter-spacing:.1em}
.edge[data-font=sketch] text{font-family:"Bradley Hand","Marker Felt","Segoe Print","Ink Free",cursive;font-variation-settings:normal;font-weight:700;font-stretch:normal;letter-spacing:.14em}
.edge[data-font=groovy] text{font-family:"Cooper Black","Cooper Std","Bookman Old Style",Georgia,serif;font-variation-settings:normal;font-weight:900;font-stretch:normal;letter-spacing:.04em}

/* the "are you human" check's widget (js/common.js SLAB_HUMAN): invisible unless Turnstile wants a click; then in the
   open dialog, or at the foot of the page above the chat box */
/* the "are you human" check (SLAB_HUMAN in js/common.js): unseen until Turnstile wants a click. In an open dialog it
   sits under the form with a line saying why; on its own it is a small dialog of the site's, "One quick check." */
.human-box{display:grid;justify-items:center;gap:8px;margin-top:12px}
.human-say{margin:0;font:500 14px/1.4 var(--text);color:var(--ink);text-align:center}
.human-ask{position:fixed;left:0;bottom:0;width:320px;height:80px;opacity:0;pointer-events:none;overflow:hidden}   /* drawn, unseen: Turnstile works out of sight */
.human-ask:not(.on) h3,.human-ask:not(.on) p,.human-ask:not(.on) .x{display:none}
.human-ask.on{inset:0;width:auto;height:auto;opacity:1;pointer-events:auto;overflow:auto;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(20,20,22,.55);overscroll-behavior:contain}
.human-card{position:relative}
.human-ask.on .human-card{width:min(420px,100%);background:var(--paper);color:var(--ink);border-radius:8px;box-shadow:0 30px 80px rgba(20,20,22,.35);padding:32px 28px 28px;display:grid;gap:12px;justify-items:center;text-align:center}
.human-ask h3{font-size:30px;outline:none}
.human-ask .sub{margin:0;color:var(--soft);font:400 15px/1.45 var(--text)}
.human-ask.on .human-w{min-height:65px;margin-top:6px}
.human-ask .x{position:absolute;top:10px;right:10px}