/* Building · the corkboard page (design/2026-09-motion, boards r2-05 → r4-05). Loaded in the head, after card.css
   (the card itself, with its pin-pivot invariant) and dossier.css (the kraft dossier behind a card), so it applies at
   first paint and places the cards. Sizes on the board use container units (cqw) against .cork-wrap, so the board
   lays itself out from its own width. */

/* ---- page tokens (site tokens live in site-tokens.css) ---- */
:root{
  --cork-label:#625B51;                          /* the board's toolbar label */
  --hue-audio:#3E6274;--hue-publish:#7A4A63;     /* an instrument's one hue: its accent band, pin head and motif */
}

/* ---- page ---- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--text)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.display{font-family:var(--disp);font-weight:400}
.util{font-family:var(--util);letter-spacing:.04em}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.building-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 4vw 64px}
.building-stage{width:min(1180px,100%);margin-top:38px}
.building-intro{display:block}
.board-host{margin-top:26px}
.no-script-list{margin-top:26px;padding:24px;border:1px solid var(--line-strong);background:var(--paper)}
.no-script-list ul{padding-left:20px}
.no-script-list a{border-bottom:1px solid var(--pencil)}
.building-figure{margin-top:34px;color:var(--pencil);font-size:12px}
@media (max-width:640px){.building-page{padding:0 4vw 44px}.building-stage{margin-top:30px}}

/* ---- the board ---- */
.cork-wrap{container-type:inline-size;position:relative}
.cork,.unpin-layer{font-family:var(--text)}
.cork{position:relative;padding:clamp(14px,2.4cqw,28px) 0 clamp(18px,2.6cqw,30px);border:1px solid rgba(140,120,85,.22);border-radius:clamp(12px,1.4cqw,16px);
  background-color:var(--board);background-image:linear-gradient(rgba(207,193,169,.52) 1px,transparent 1px),linear-gradient(90deg,rgba(207,193,169,.52) 1px,transparent 1px);background-size:28px 28px}
/* No shadow under the board: a corkboard is fixed to a wall; the depth belongs to the paper on it. */
.cork::before{content:"";position:absolute;z-index:4;left:48%;top:-9px;width:clamp(86px,9.5cqw,112px);height:clamp(21px,2.1cqw,25px);background:rgba(222,196,143,.67);clip-path:polygon(3% 7%,96% 0,100% 84%,4% 100%);transform:translateX(-50%) rotate(-2deg)}
.cork-toolbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(15px,2.5cqw,30px) 14px}
.cork-order{color:var(--cork-label);font:9.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.cork-actions{display:flex;gap:7px}
.cork-btn{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font:14px/1 "IBM Plex Mono",monospace;cursor:pointer;transition:background-color .16s ease,color .16s ease,opacity .16s ease}
.cork-btn:disabled{opacity:.3;cursor:default;background:var(--paper);color:var(--ink)}
.cork-btn .glyph{display:inline-block}
.cork-viewport{position:relative;width:100%;overflow:clip;touch-action:pan-y;cursor:grab;padding:24px clamp(15px,2.5cqw,30px) 32px}
.cork.grabbing .cork-viewport,.cork.grabbing .cork-viewport *{cursor:grabbing!important}
.cork.grabbing .cork-track{-webkit-user-select:none;user-select:none}
.cork-track{position:relative;display:flex;align-items:flex-start;gap:44px;width:max-content;min-width:100%;min-height:560px;padding:0 18px 0 6px;isolation:isolate}
.cork-track,.swing{will-change:transform}
.slot.lifted{z-index:20}
.slot.unpinned{z-index:1!important}

.slot[data-id="audio-processing-cli"]{--tilt:2.1deg;--drop:136px;--pin-left:34%;--pin-tilt:12deg;--pin-color:var(--hue-audio);--instrument-hue:var(--hue-audio);--motif-tilt:6deg;z-index:10}
.slot[data-id="publish-cli"]{--tilt:-2.8deg;--drop:46px;--pin-left:66%;--pin-tilt:-11deg;--pin-color:var(--hue-publish);--instrument-hue:var(--hue-publish);--motif-tilt:-7deg;z-index:11}
.slot[data-id="tsugi"]{--tilt:-3.15deg;--drop:62px;--pin-left:28%;--pin-tilt:-14deg;--pin-color:var(--ink);z-index:7}
.slot[data-id="instant-bookmark"]{--tilt:3.25deg;--drop:174px;--pin-left:42%;--pin-tilt:8deg;--pin-color:var(--pin-mustard);z-index:8}
.slot[data-id="instant-bookmark"] .paper-inner{background:color-mix(in srgb,var(--wash-wheat) 40%,var(--paper))}
.slot[data-id="wavelength"]{--tilt:-2.45deg;--drop:94px;--pin-left:78%;--pin-tilt:14deg;--pin-color:var(--pin-green);z-index:9}
.slot[data-id="wavelength"] .paper-inner{background:color-mix(in srgb,var(--wash-peach) 40%,var(--paper))}

.cork-viewport:focus-visible{outline:none}   /* the pen's coral 「 」 is the focus mark (FocusMark) */

/* ---- the live page's mobile layout, keyed to the board's own width ---- */
@container (max-width:900px){
  .slot--lead{width:min(680px,78cqw)} .slot--featured{width:min(380px,62cqw)} .slot--instrument{width:min(276px,42cqw)} .slot--standard{width:min(184px,29cqw)}
}
/* On a phone a card whose dossier peeks behind it narrows by the peek (--peek-room), so the tabs sit inside the cork
   rather than clipped to slivers at its edge. At the track's end they need nothing more: the peek's 17 px fit in its
   12 px padding and the viewport's 15. In your hand the dossier is sized from the card before it narrowed. */
@container (max-width:640px){
  .cork{background-size:24px 24px}
  .cork-track{gap:36px;min-height:640px;padding-right:12px}
  .slot--peek{--peek-room:22px}
  .slot--lead{--tilt:-1.2deg;--drop:12px;width:calc(100cqw - 32px - var(--peek-room,0px))}
  .paper--lead .paper-body{min-height:540px;padding:30px 22px 26px}
  .highlighted-title{font-size:clamp(50px,18cqw,74px)}
  .highlighted-note{font-size:16px}
  .highlighted-footer{display:block}
  .slot--featured{--tilt:1.8deg;--drop:76px;width:calc(82cqw - var(--peek-room,0px))}
  .paper--featured .paper-body{min-height:390px;padding:28px 23px}
  .slot--instrument{width:min(286px,78cqw)}
  .slot--standard{width:min(190px,50cqw)}
  .slot[data-id="audio-processing-cli"]{--tilt:1.6deg;--drop:96px}
  .slot[data-id="publish-cli"]{--tilt:-2deg;--drop:30px}
  .slot[data-id="tsugi"]{--tilt:-2.2deg;--drop:42px}
  .slot[data-id="instant-bookmark"]{--tilt:2.35deg;--drop:126px}
  .slot[data-id="wavelength"]{--tilt:-1.8deg;--drop:64px}
  .morph-toggle{width:30px;height:30px}
}

/* ---- pin ticks: pen marks drawn at the pin head for two held frames (hand's clock) ---- */
.pin-ticks{position:absolute;z-index:9;width:52px;height:52px;margin:-26px 0 0 -26px;overflow:visible;pointer-events:none}
.pin-ticks g{opacity:0}
.pin-ticks path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}

/* ---- unpin: the card in hand and its dossier ---- */
/* A card and its dossier taller than the window: the layer scrolls rather than cutting the sheet off. */
.unpin-layer{position:fixed;inset:0;z-index:800;overflow:hidden auto;overscroll-behavior:contain}
.unpin-layer[hidden]{display:none}
.unpin-layer.leaving{pointer-events:none}
.unpin-scrim{position:fixed;inset:0;background:rgba(251,246,236,.68);opacity:0;transition:opacity .45s var(--ease-out) .16s}
.unpin-scrim.on{opacity:1}
.unpin-layer.leaving .unpin-scrim{transition:opacity .34s var(--ease-out)}
.unpin-fly{position:absolute;left:0;top:0;z-index:2;container-type:inline-size;pointer-events:none}
.unpin-card{position:absolute!important;left:0;top:0;margin:0!important;pointer-events:auto}
.unpin-card .swing{cursor:default}
.unpin-card .lift{transition-duration:.5s}
.unpin-card .morph-icon{transform:translate(-50%,-50%) rotate(45deg)}
/* The panel holds still and clips at its own top edge, tucked under the card (8 px, or the slide's overshoot on a tall
   sheet: dossier.js tuck()), so the dossier inside shows only once it has slid out from behind the card. */
.unpin-panel{position:absolute;z-index:1;opacity:0;clip-path:inset(0 -100vw -120px)}
.unpin-panel.open{opacity:1}
.unpin-close{display:inline-flex;gap:6px;align-items:center;flex:none;padding:6px 0;font:500 10px/1 var(--util);letter-spacing:.04em;text-transform:none;color:var(--ink)}
.unpin-close>span[aria-hidden]{font-size:14px}
.unpin-close .pen-t{border-bottom:1px solid var(--ink)}

@media (prefers-reduced-motion:reduce){
  .unpin-scrim,.cork-btn{transition:none!important}
}
@media (forced-colors:active){
  .cork,.cork-btn{border-color:CanvasText}
  .cork-viewport:focus-visible{outline:2px solid CanvasText}
}