/* Building · the card (lib/building/cards.js): the paper, its pin, tape and label, the lead card's 小红花. Two pages
   show it: the board (Building.dc.html, which places and sizes each card in building.css) and the project pages, where
   the board's own card is clipped to the dossier's corner (lib/building/cover.js). The rules assume the page's reset
   (margin and padding 0) and set every margin they need.

   The pin-pivot invariant: each card is a .slot holding a rotating .swing (the paper) and a .board-pin
   SIBLING that never rotates with it. The paper pivots on the pin's tip — transform-origin
   var(--pin-left) 14px — and the pin's tip is at top:-24px + 90% × 42px = 14px (the pin rotates about
   its own tip, transform-origin 50% 90%). .ghost, .pin-hole (top 13.8px) and the physics (pinPoint,
   the unpin's P.y = 14) use the same point. Change the pin SVG, its top or --pin-left, and all of them
   move together, or the pin visibly slides across the cork whenever the paper swings. */

/* ---- page tokens (site tokens live in site-tokens.css) ---- */
:root{
  --pin-steel:#898989;--pin-shine:#E4E4E4;       /* a pin's stem and its glint */
  --pin-green:#3D5C52;--pin-mustard:#A5822C;     /* pin heads */
  --note-ink:#504A42;--featured-ink:#575149;     /* body text on the lead card, and on the featured card */
}
/* the card is set in the site's text face: its English in Fraunces, its Chinese in the -ui tier of Noto Serif SC
   (declared in dossier.css) */
.slot{font-family:var(--text)}

/* ---- slot = the card's place on the cork; swing = the paper that pivots on the pin ---- */
.slot{--tilt:0deg;--drop:0px;--pin-left:50%;--pin-tilt:-8deg;--pin-color:var(--ink);
  --torn-slip:polygon(0 0,100% 0,100% 96%,95% 100%,90% 97%,85% 100%,80% 96%,75% 100%,70% 97%,65% 100%,60% 96%,55% 100%,50% 97%,45% 100%,40% 96%,35% 100%,30% 97%,25% 100%,20% 96%,15% 100%,10% 97%,5% 100%,0 96%);
  --torn-wide:polygon(0 0,100% 0,100% 97%,97.5% 100%,95% 97%,92.5% 100%,90% 97.5%,87.5% 100%,85% 97%,82.5% 100%,80% 97.5%,77.5% 100%,75% 97%,72.5% 100%,70% 97.5%,67.5% 100%,65% 97%,62.5% 100%,60% 97.5%,57.5% 100%,55% 97%,52.5% 100%,50% 97.5%,47.5% 100%,45% 97%,42.5% 100%,40% 97.5%,37.5% 100%,35% 97%,32.5% 100%,30% 97.5%,27.5% 100%,25% 97%,22.5% 100%,20% 97.5%,17.5% 100%,15% 97%,12.5% 100%,10% 97.5%,7.5% 100%,5% 97%,2.5% 100%,0 97.5%);
  --torn:var(--torn-slip);position:relative;flex:none;margin-top:var(--drop)}
/* Pivot = the pin's real anchor: --pin-left across, 14px down (the pin SVG's tip, see .board-pin). */
.swing{position:relative;transform:rotate(var(--tilt));transform-origin:var(--pin-left) 14px}
/* The pin is a sibling of the paper, so it never rotates or slides with it. Its tip sits at
   top:-24px + 90% of 42px ≈ 14px — the same point the paper pivots on. */
.board-pin{position:absolute;z-index:8;left:var(--pin-left);top:-24px;width:20px;height:42px;overflow:visible;pointer-events:none;transform:translateX(-50%) rotate(calc(var(--pin-tilt) + var(--tilt)));transform-origin:50% 90%;filter:drop-shadow(0 2px 1px rgba(60,50,35,.24))}
.board-pin .pin-shadow{fill:rgba(60,50,35,.3)}
.board-pin .pin-stem{fill:none;stroke:var(--pin-steel);stroke-width:2.6;stroke-linecap:round}
.board-pin .pin-stem-glint{fill:none;stroke:var(--pin-shine);stroke-width:.9;stroke-linecap:round}
.board-pin .pin-head{fill:var(--pin-color)}
.board-pin .pin-glint{fill:rgba(255,255,255,.58)}
/* Lift shadow: a pre-blurred copy of the torn shape; hover only changes its opacity. */
.lift{position:absolute;inset:0;z-index:0;filter:blur(13px);opacity:0;transform:translate(-11px,22px);transition:opacity .28s var(--ease-out);pointer-events:none}
.lift-shape{position:absolute;inset:0;background:rgba(60,50,35,.34);clip-path:var(--torn)}
.slot.lifted .lift{opacity:1}
.paper{position:relative;z-index:1;display:flex;flex-direction:column;color:var(--ink)}

/* ---- lead (highlighted) ---- */
.slot--lead{--tilt:-1.65deg;--drop:18px;--pin-left:50%;--pin-tilt:-9deg;--pin-color:var(--ink);--torn:var(--torn-wide);z-index:5;width:min(700px,72cqw)}
.slot--lead .swing::after,.slot--featured .swing::after{content:"";position:absolute;z-index:2;background:rgba(225,196,138,.6)}
.slot--lead .swing::after{right:7%;top:-10px;width:80px;height:24px;clip-path:polygon(3% 0,100% 8%,96% 100%,0 86%);transform:rotate(3deg)}
.paper--lead{filter:drop-shadow(.6px 0 0 var(--line-strong)) drop-shadow(-.6px 0 0 var(--line-strong)) drop-shadow(0 .6px 0 var(--line-strong)) drop-shadow(0 -.6px 0 var(--line-strong)) drop-shadow(-7px 14px 22px rgba(60,50,35,.16))}
.paper--lead .paper-body{display:flex;flex-direction:column;min-height:470px;padding:clamp(30px,4cqw,50px);background:color-mix(in srgb,var(--wash-wheat) 46%,var(--paper));clip-path:var(--torn-wide)}
.highlighted-title{max-width:760px;margin-top:auto;color:var(--ink);font:500 clamp(52px,7.6cqw,96px)/1.3 "Fraunces","DingTalk JinBuTi",serif;letter-spacing:-.045em}
.wm-mark{position:relative;display:inline-block}
.highlighted-note{max-width:750px;margin-top:21px;color:var(--note-ink);font-size:clamp(16px,1.8cqw,20px);line-height:1.55}
.project-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:18px;color:var(--soft);font:10px/1.5 "IBM Plex Mono",monospace;letter-spacing:.035em}
.project-meta span+span::before{content:"/";margin-right:16px;color:var(--pencil)}
.highlighted-footer{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-top:23px}
.project-cta{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:10px/1 "IBM Plex Mono",monospace;letter-spacing:.035em;transition:background-color .16s ease,color .16s ease}
.project-cta::after{content:"→"}

/* ---- featured ---- */
.slot--featured{--tilt:2.75deg;--drop:112px;--pin-left:72%;--pin-tilt:11deg;--pin-color:var(--pin-green);--torn:var(--torn-wide);z-index:6;width:min(390px,48cqw)}
.slot--featured .swing::after{left:-15px;top:24px;width:74px;height:22px;clip-path:polygon(2% 10%,98% 0,100% 84%,0 100%);transform:rotate(-10deg)}
.paper--featured{filter:drop-shadow(.6px 0 0 var(--line-strong)) drop-shadow(-.6px 0 0 var(--line-strong)) drop-shadow(0 .6px 0 var(--line-strong)) drop-shadow(0 -.6px 0 var(--line-strong)) drop-shadow(8px 12px 18px rgba(60,50,35,.14))}
.paper--featured .paper-body{display:flex;flex-direction:column;min-height:360px;padding:30px 28px;background:color-mix(in srgb,var(--wash-blue) 55%,var(--paper));clip-path:var(--torn-wide)}
.paper--featured h2{margin-top:34px;font:500 clamp(38px,4cqw,52px)/.95 "Fraunces","DingTalk JinBuTi",serif;letter-spacing:-.025em}
.paper--featured p{margin-top:23px;color:var(--featured-ink);font-size:16px;line-height:1.62}
.featured-actions{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-top:auto;padding-top:22px}
.featured-actions .project-meta{margin-top:0}
.featured-cta{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font:9px/1.45 "IBM Plex Mono",monospace;letter-spacing:.035em}

/* ---- slips: instrument + standard ---- */
/* What follows a title sits ≥ 10 px and ≥ 2× the pen's drop under its hover line (scripts/verify/pen-spacing.mjs):
   hence 13px under slip titles and 23px under the featured title. */
.paper--instrument,.paper--standard{filter:drop-shadow(-6px 11px 12px rgba(60,50,35,.15))}
.paper-edge{display:flex;width:100%;padding:1.5px;background:var(--line-strong);clip-path:var(--torn-slip)}
.paper-inner{position:relative;display:flex;flex:1;flex-direction:column;min-width:0;clip-path:var(--torn-slip);background:rgba(251,246,236,.98)}
.paper--standard .paper-edge{min-height:146px}
.paper--standard .paper-inner{padding:18px 16px 15px}
.paper--instrument .paper-inner{padding:17px 17px 14px;background-color:var(--paper);background-image:repeating-linear-gradient(rgba(207,193,169,.30) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(207,193,169,.30) 0 1px,transparent 1px 9px)}
.paper--instrument .paper-inner::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--instrument-hue,var(--ink))}
.slot--instrument{width:min(292px,33cqw)}
.slot--standard{width:min(178px,23cqw)}
.instrument-motif{position:absolute;right:13px;top:13px;width:34px;height:34px;color:var(--instrument-hue,var(--ink));opacity:.9;transform:rotate(var(--motif-tilt,-5deg));pointer-events:none}
.instrument-motif path,.instrument-motif polyline{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.paper--instrument .project-label{margin-right:40px}
.paper--instrument h2{margin-top:9px;font:500 21px/1.24 "Fraunces","DingTalk JinBuTi",serif;letter-spacing:-.02em}
.paper--standard h2{font:500 20px/1.02 "Fraunces","DingTalk JinBuTi",serif;letter-spacing:-.018em}
.instrument-capabilities{margin:13px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.instrument-capabilities li{position:relative;padding-left:13px;color:var(--soft);font:9.5px/1.55 "IBM Plex Mono",monospace;letter-spacing:.005em}
.instrument-capabilities li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.2px;border-radius:1px;background:var(--instrument-hue,var(--line-strong))}
.standard-period{margin-top:13px;color:var(--soft);font:8px/1.45 "IBM Plex Mono",monospace;letter-spacing:.025em}
.paper--instrument .standard-period{margin-top:12px}
.project-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.paper--instrument .project-actions{margin-top:11px;padding-top:0}
.project-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;color:var(--soft);font:9px/1.4 "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.project-label strong{color:var(--ink);font-weight:500}
.project-label-dot{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.github-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:10px/1.45 "IBM Plex Mono",monospace;letter-spacing:.025em}
.github-link svg{width:15px;height:15px;flex:none}
.github-link--card{padding:7px 0;font-size:8.5px}
.morph-toggle{position:relative;z-index:3;flex:none;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:0 3px 7px rgba(60,50,35,.15);cursor:pointer}
.morph-icon{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);transition:transform .33s var(--ease-settle)}
.morph-icon::before,.morph-icon::after{content:"";position:absolute;left:50%;top:50%;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.morph-icon::before{width:10px;height:1.3px}
.morph-icon::after{width:1.3px;height:10px}
/* a link's printed pencil rule sits under its words; the pen's hover line traces it */
.github-link .pen-t,.featured-cta .pen-t{border-bottom:1px solid var(--pencil)}

/* ---- one unpin trigger per card: the title (lead, featured) or the "+" (slips) ---- */
.unpin-trigger--title{display:inline-block;position:relative;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;cursor:pointer}
/* the pen's coral 「 」 is the focus mark (FocusMark / Tier.wire) */
.unpin-trigger:focus-visible{outline:none}
.swing{cursor:pointer}
.swing a{position:relative;z-index:3}

/* ---- the cork under the paper has not faded: a slightly darker patch at the rest tilt, and the pin hole.
   Both are only seen when the card is off the board. ---- */
.ghost{position:absolute;z-index:0;left:0;top:0;width:100%;height:var(--ghost-h,200px);background:rgba(120,92,52,.075);clip-path:var(--torn);transform:rotate(var(--tilt));transform-origin:var(--pin-left) 14px;opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.slot.unpinned .ghost{opacity:1}
.pin-hole{position:absolute;z-index:7;left:var(--pin-left);top:13.8px;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:rgba(51,48,43,.62);box-shadow:0 0 0 2px rgba(51,48,43,.1);opacity:0;pointer-events:none}
.slot.unpinned .pin-hole{opacity:1}

/* ---- the 小红花 on the lead card (lib/building/flower.js) ---- */
.stk{position:absolute;z-index:2;pointer-events:none;transform:rotate(var(--rot));filter:drop-shadow(-.5px .8px 0 rgba(60,50,35,.2))}
.stk svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stk-flap{transform:scaleX(.7)}   /* the petal that never took the glue, folded up about its crease */
.stk-shadow{filter:blur(.3px)}
.stk--unapplied{visibility:hidden}   /* until it has been applied (first view per session), the card has no flower */

@media (prefers-reduced-motion:reduce){
  .lift,.morph-icon,.ghost{transition:none!important}
}
@media (forced-colors:active){
  .morph-toggle,.project-cta{border-color:CanvasText}
  .paper-edge{background:CanvasText;forced-color-adjust:none}
  .paper-inner,.paper-body{background:Canvas;forced-color-adjust:none}
  .project-label-dot{background:CanvasText}
  .board-pin .pin-head{fill:CanvasText}
  .unpin-trigger:focus-visible{outline:2px solid CanvasText}
}