/* Forge and recall: additions on top of the house skin (_doc.css). House tokens only, no new colours
   except the brand's own dark-on-blue ink (#020810) and two interaction shades of signal blue. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
*{scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}
svg .ah{fill:var(--slate)}

/* skip link */
.skip{position:absolute;left:20px;top:-100px;z-index:30;padding:10px 14px;background:var(--ink);color:var(--white);font-size:14px;font-weight:500;text-decoration:none}
.skip:focus{top:12px}

/* header navigation (house meta row, made into links) */
.site-header .meta a{color:var(--slate);text-decoration:none}
.site-header .meta a:hover{color:var(--ink);text-decoration:underline}
.site-header .meta a.st{color:var(--link)}

/* actions */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:0;background:var(--blue);color:#020810;font:500 15px/1.2 var(--font);letter-spacing:0;text-decoration:none;cursor:pointer;transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out}
.btn:hover{background:#3D8EFF}
.btn:active{background:#0762E0}
.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.44)}
.btn.ghost:hover{border-color:var(--white)}
.btn.quiet{background:var(--white);color:var(--ink);border-color:var(--line-strong)}
.btn.quiet:hover{border-color:var(--ink)}
.cover .btn:focus-visible{outline-color:var(--white)}
.cover .actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:36px}

/* small blue text uses the kit's link blue: signal blue under 18px misses 4.5:1 on paper */
.exit b,.receipt .label,.fig figcaption b{color:var(--link)}

/* spreads: the usual way beside ours, then the receipt */
.spread .vs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 52px;margin-top:32px;align-items:start}
.spread .vs>div{padding-top:14px}
.spread .was{border-top:1px solid var(--line);color:var(--slate)}
.spread .now{border-top:1px solid var(--ink)}
.spread .vs h3{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.06em;line-height:1.3;color:var(--slate)}
.spread .now h3{color:var(--link)}
.spread .was p{font-size:16px}
.spread .now h4{margin:26px 0 4px;font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.spread .now h4:first-of-type{margin-top:6px}
.spread .now ol,.spread .now ul{margin:8px 0 0}
.spread .exit{margin-top:18px}
.receipt{margin:32px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:15px;max-width:74ch}
.receipt .label{display:block;margin-bottom:4px}

/* the handoff: midnight closes the page the way it opened */
.handoff{margin:40px 0 12px;background:var(--midnight);color:var(--white)}
.handoff-head{margin:0;padding:26px 28px 0;font-size:12px;font-weight:500;letter-spacing:.06em;line-height:1.3;color:rgba(255,255,255,.72)}
.handoff pre{margin:0;padding:12px 28px 22px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:19px;line-height:1.55;color:var(--white);background:none}
.handoff-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:0 28px 28px}
.handoff-actions .btn{min-height:44px}
.handoff .btn.quiet{background:transparent;color:var(--white);border-color:rgba(255,255,255,.44)}
.handoff .btn.quiet:hover{border-color:var(--white)}
.handoff .btn:focus-visible{outline-color:var(--white)}
.copied{font-size:14px;color:#BACADA}
#adopt h3{margin-top:36px}

/* traps */
.traps{list-style:none;padding-left:0;max-width:70ch}
.traps li{margin:0;padding:16px 0;border-top:1px solid var(--line)}
.traps li:last-child{border-bottom:1px solid var(--line)}
.traps b{font-weight:500}

footer a{color:var(--slate)}

/* figure: only the drawing scrolls, the caption stays put and lines up with the text column
   (the house caption offset resolves against the figure itself and comes out at zero) */
.fig.wide{overflow:visible}
.fig.wide .scroller{overflow-x:auto}
.fig.wide .scroller:focus-visible{outline-offset:6px}
.fig.wide figcaption{margin-left:max(0px,calc((min(1180px,100vw - 40px) - min(900px,100vw - 40px))/2))}
/* two computed drawings of the same loop: the wide one where it renders at 1:1 or larger, the stacked one below */
.fig-stacked-view{display:none}
.fig.wide .fig-stacked-view svg{min-width:0;max-width:480px}
@media (max-width:1160px){
  .fig.wide{width:auto;margin-left:0}
  .fig.wide figcaption{margin-left:0}
  .fig-wide-view{display:none}
  .fig-stacked-view{display:block}
}

/* receipts rule spans the spread; the text keeps a reading measure */
.receipt{max-width:none;padding-right:max(0px,calc(100% - 74ch))}

/* the usual way stays beside the mechanism while the longer column is read */
@media (min-width:721px){
  .spread .was{position:sticky;top:96px}
}

@media (max-width:720px){
  .spread .vs{grid-template-columns:1fr;gap:26px}
  .cover .actions .btn,.handoff-actions .btn{flex:1 1 100%}
  .handoff-head{padding:22px 20px 0}
  .handoff pre{padding:10px 20px 20px;font-size:17px}
  .handoff-actions{padding:0 20px 20px}
}
@media (max-width:560px){
  .cover .row{flex-direction:column;gap:4px;margin-bottom:28px}
  .receipts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .receipts div,.receipts div+div{padding-left:0;padding-right:12px}
  .receipts div:nth-child(even){padding-left:16px}
  table{min-width:0}
  th,td{padding-right:10px}
  th{vertical-align:bottom}
  th.num{white-space:normal}
}
@media (max-width:380px){
  .receipts b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}