/* overrides.css · the ONLY place Builderhood Blvd departs from the vendored kit. Keep it short; every rule says why. */

/* Body stack: the kit asks for Avenir, which is not shipped (licence). Same visual weight on every OS. */
body, .shell, .topic p, .lead { font-family: Avenir, 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* The midpoint dot has no glyph in EmbossT1 or Gaposiss (brand-font trap): give it its own span and a face that has it. */
.brand-dot, .mid { font-family: Chalkduster, 'Avenir Next', sans-serif; }

/* Honest "not built yet" tape: grey, so it never reads as a live control. EmbossT1 lacks · ( ) : so tapes avoid them. */
.tape.not-built { --tape-color: var(--ink-lt); font-size: .78rem; margin-top: .6rem; display: inline-block; }

/* Doors that are real routes get the arcade button; doors that are not built get the tape and NO button (no fake controls). */
.door-card .map-link { display: grid; gap: .4rem; }
.door-card .door-fact { color: var(--ink-md); font-size: .95rem; }

/* Sprint table on lined paper, readable at 390. */
.sprint-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sprint-table th, .sprint-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px dashed var(--page-line); }
.sprint-table tr.now td { color: var(--teal-dk); font-weight: 600; }
.sprint-table .num { font-family: Gaposiss, monospace; letter-spacing: .04em; }

/* Skip link for keyboard users (the kit has none). */
.skip { position: absolute; left: -999px; top: 0; background: var(--gold-cream); color: var(--ink); padding: .5rem .8rem; border-radius: 8px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; }

/* Reduced motion: the fx kit honours it; make sure tilted paper does not animate either. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* MSG-20260919-0040 · label ends. The kit's curl shadow on stacked labels (data-curl) is an SVG stretched to the label's width, so a long label reads as a flared, over-rounded end; and its notch cuts are percentages of the width, so they grow with the label. Universes labels are short and read flat, with straight ends, a fine cut and a thin shadow. The same geometry here for every label, short or long: 2px notches, a straight shadow band. */
.tape[data-curl="ends"]::before, .tape[data-curl="middle"]::before, #workshop .tape[data-curl="ends"]::before, #workshop .tape[data-curl="middle"]::before { clip-path: polygon(0 0, 100% 0, calc(100% - 1.4px) 25%, calc(100% - 2px) 50%, calc(100% - 1.4px) 75%, 100% 100%, 0 100%, 1.4px 75%, 2px 50%, 1.4px 25%) !important; }
.tape[data-curl]::after, #workshop .tape[data-curl]::after, #workshop .chapter-tape[data-curl]::after { background: rgba(57, 56, 50, .22) !important; inset: 45% 2% -2px 2% !important; clip-path: none !important; border-radius: 0 !important; filter: blur(1.8px) !important; opacity: 1 !important; transform: rotate(.2deg) !important; }