/* 530utopian.help · assets/saturday-night-special.css
   ==========================================================================================
   SITE: written for /saturday-night-special/ and loaded by that page alone, the way report.css is.
   Engine tokens, type roles and rules only: no new colors, no radius, nothing centered, no motion.
   Acid and the 6px heavy rule stay with the deadline component. Emphasis is the 2px rule, in mark red.
   The threat is the only thing lit. Page 3 uses the engine's inversion.
   ========================================================================================== */

/* ---------- opening: the case file, inverted ---------- */
.invert.sn-hero{margin:0; padding:var(--s7) 0 var(--s6)}
.sn-open{display:grid; gap:var(--s6); align-items:end}
@media(min-width:1000px){ .sn-open{grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:var(--s7)} }
.sn-open .lbl{color:var(--mark-lit)}
.sn-open h1{font-size:var(--t-cry); line-height:.84; letter-spacing:-.036em; margin:var(--s3) 0 var(--s4); color:var(--paper);
  font-variation-settings:"wdth" 76,"opsz" 96; max-width:8em}
.sn-open h1 em{font-variation-settings:"wdth" 100,"opsz" 96; color:var(--mark-lit)}
.sn-sub{font-family:var(--voice); font-weight:700; font-size:clamp(1.25rem,2.6vw,1.9rem); line-height:1.05; letter-spacing:-.015em; color:var(--paper);
  font-variation-settings:"wdth" 84,"opsz" 36; margin:0 0 var(--s4); padding-top:var(--s3); border-top:var(--mid) solid var(--paper); max-width:22em}
.sn-open .deck{max-width:30em; color:var(--paper-2)}
.sn-by{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--quiet-dk); margin:var(--s4) 0 0}
.sn-by b{font-weight:400; color:var(--paper)}
.sn-file{margin:0; border-top:var(--mid) solid var(--paper)}
.sn-file > div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:baseline; padding:var(--s2) 0; border-bottom:var(--hair) solid var(--rule-dk)}
.sn-file dt{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--quiet-dk)}
.sn-file dd{margin:0; font-family:var(--voice); font-weight:700; font-size:1.5rem; line-height:1; letter-spacing:-.02em; color:var(--paper); font-variation-settings:"wdth" 84,"opsz" 36}
.sn-file .sn-file-out{grid-template-columns:1fr; gap:var(--s2)}
.sn-file .sn-file-out dd{display:flex; flex-wrap:wrap; gap:var(--s1); font-size:1rem; letter-spacing:0}
.sn-file .sn-file-out span{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border:var(--hair) solid var(--quiet-dk); color:var(--paper-2)}
.sn-file .sn-file-out span.sn-open-case{background:var(--mark-lit); border-color:var(--mark-lit); color:var(--ink)}

/* ---------- the index ---------- */
.sn-index{margin:var(--s6) 0 0; padding-top:var(--s2); border-top:var(--hair) solid var(--ink)}
.sn-index ol{list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:0 var(--s4)}
.sn-index a{display:flex; gap:var(--s2); align-items:baseline; padding:.45em 0; border-bottom:var(--hair) solid var(--paper-3); text-decoration:none; color:var(--ink);
  font-family:var(--voice); font-weight:600; font-size:1rem; font-variation-settings:"wdth" 90,"opsz" 24}
.sn-index a span{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.06em; color:var(--mark); min-width:2.2em}
.sn-index a:hover,.sn-index a:focus-visible{box-shadow:inset 0 -2px 0 var(--mark)}

/* ---------- the lede: one paragraph at reading-poster size ---------- */
.sn-lede{padding:var(--s5) 0 0}
.sn-lede p{font-family:var(--read); font-weight:300; font-size:clamp(1.45rem,2.9vw,2.4rem); line-height:1.24; letter-spacing:-.01em;
  font-variation-settings:"opsz" 60; margin:0; max-width:24em; padding-left:var(--s4); border-left:var(--mid) solid var(--mark)}
.sn-lede strong{font-weight:500; color:var(--mark)}

/* ---------- scene heads ---------- */
.sn-scene h2{margin-bottom:var(--s4)}
.sn-scene .margin .sn-n{display:block; font-family:var(--voice); font-weight:700; font-size:clamp(2.6rem,5vw,4rem); line-height:.85;
  letter-spacing:-.04em; color:var(--ink); font-variation-settings:"wdth" 76,"opsz" 96; margin:0 0 var(--s2)}
.sn-hook{font-family:var(--voice); font-weight:700; font-size:var(--t-h3); line-height:1.08; letter-spacing:-.015em;
  font-variation-settings:"wdth" 84,"opsz" 36; margin:var(--s5) 0 0; max-width:20em}

/* ---------- the log: what was sent, when, in order ---------- */
.sn-log{list-style:none; margin:var(--s4) 0 var(--s5); padding:0; border-top:var(--hair) solid var(--paper-3)}
.sn-log > li{display:grid; grid-template-columns:1fr; gap:var(--s1) var(--s4); padding:var(--s3) 0; border-bottom:var(--hair) solid var(--paper-3)}
@media(min-width:600px){ .sn-log > li{grid-template-columns:9.5rem minmax(0,1fr)} }
.sn-log time,.sn-log .sn-t{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.06em; line-height:1.9; color:var(--quiet);
  text-transform:uppercase}
.sn-log .sn-msg{margin:0; font-family:var(--read); font-size:var(--t-lg); line-height:1.45; font-variation-settings:"opsz" 20}
.sn-log .sn-msg q{quotes:"\201C" "\201D"}
.sn-log .sn-who{display:block; font-family:var(--mach); font-weight:300; font-size:var(--t-xs); letter-spacing:.06em; color:var(--quiet); margin:0 0 var(--s1)}
.sn-log .sn-note{margin:0; font-size:1rem; line-height:1.5; color:var(--ink-soft)}
.sn-log .sn-msg .sn-note{display:block; margin-top:.4em; font-family:var(--read); font-weight:400; font-style:normal; letter-spacing:0}
/* the owner speaks quietly */
.sn-log > li.sn-owner .sn-msg{color:var(--ink-soft); font-style:italic; font-weight:300}
/* the threat is the only thing lit */
.sn-log > li.sn-hot{border-left:var(--mid) solid var(--mark); padding-left:var(--s3); background:linear-gradient(90deg, rgba(168,31,61,.07), transparent 70%)}
.sn-log > li.sn-hot time,.sn-log > li.sn-hot .sn-t{color:var(--mark)}
.sn-log > li.sn-hot .sn-msg{font-family:var(--voice); font-weight:700; font-size:clamp(1.25rem,2.3vw,1.7rem); line-height:1.15; letter-spacing:-.012em;
  font-variation-settings:"wdth" 88,"opsz" 36}
/* one line that explains the rest */
.sn-log > li.sn-key .sn-msg{font-family:var(--voice); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.02; letter-spacing:-.02em;
  font-variation-settings:"wdth" 80,"opsz" 72; color:var(--ink)}

/* ---------- the price list: two sides of one form ---------- */
.sn-ledger{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5)}
@media(min-width:920px){ .sn-ledger{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6)} }
.sn-ledger > li{border-top:var(--mid) solid var(--ink); padding-top:var(--s3); min-width:0}
.sn-ledger > li.sn-cost{border-top-color:var(--mark)}
.sn-ledger .lbl{margin-bottom:var(--s2)}
.sn-price{font-family:var(--voice); font-weight:700; font-size:clamp(2.4rem,6vw,4.2rem); line-height:.9; letter-spacing:-.035em;
  font-variation-settings:"wdth" 76,"opsz" 96; margin:0 0 var(--s4); color:var(--ink)}
.sn-cost .sn-price{color:var(--mark)}
.sn-ledger p:not(.sn-price):not(.lbl){font-size:var(--t-lg); line-height:1.5; margin:0 0 var(--s3); max-width:34em}
.sn-ladder{list-style:none; margin:0 0 var(--s4); padding:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:flex-end}
.sn-ladder li{display:flex; flex-direction:column}
.sn-ladder b{font-family:var(--voice); font-weight:700; font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1; letter-spacing:-.02em;
  font-variation-settings:"wdth" 84,"opsz" 36; font-variant-numeric:lining-nums tabular-nums; color:var(--ink)}
.sn-ladder span{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); letter-spacing:.06em; color:var(--quiet); text-transform:uppercase; margin-top:var(--s1)}
.sn-ladder li.sn-arr{font-family:var(--mach); font-size:1rem; color:var(--quiet); align-self:center; padding-bottom:1.1em}
.sn-aside{font-family:var(--mach); font-weight:300; font-size:var(--t-sm); line-height:1.8; color:var(--ink-soft); margin:var(--s5) 0 0;
  padding-left:var(--s3); border-left:var(--mid) solid var(--ink); max-width:40em}

/* ---------- page 3: the sentence, then where it went ---------- */
.sn-page{display:grid; gap:var(--s5)}
@media(min-width:1000px){ .sn-page{grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:var(--s6) var(--s7); align-items:start} }
.sn-big-n{font-family:var(--voice); font-weight:700; font-size:var(--t-mega); line-height:.8; letter-spacing:-.05em; color:var(--paper);
  font-variation-settings:"wdth" 75,"opsz" 96; margin:0 0 var(--s4)}
.sn-big-n em{font-style:normal; color:var(--mark-lit)}
.sn-quote{margin:0 0 var(--s4); padding:0}
.sn-quote p{font-family:var(--read); font-weight:300; font-size:clamp(1.35rem,2.6vw,2.1rem); line-height:1.32; color:var(--paper); margin:0;
  font-variation-settings:"opsz" 48; max-width:30em}
.sn-quote mark{background:none; color:var(--mark-lit); font-weight:500; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.sn-quote figcaption{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); letter-spacing:.06em; color:var(--quiet-dk); margin:var(--s3) 0 0}
.invert .turn-body .sn-may{font-family:var(--voice); font-weight:700; font-size:var(--t-h3); line-height:1.1; letter-spacing:-.012em;
  font-variation-settings:"wdth" 84,"opsz" 36; color:var(--paper)}
.sn-where{list-style:none; margin:0; padding:0; border-top:var(--mid) solid var(--paper-3)}
.sn-where li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:baseline; padding:var(--s3) 0;
  border-bottom:var(--hair) solid var(--rule-dk)}
.sn-where .w{font-family:var(--voice); font-weight:600; font-size:1.08rem; line-height:1.25; color:var(--paper); font-variation-settings:"wdth" 88,"opsz" 24}
.sn-where .s{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--quiet-dk); white-space:nowrap}
.sn-where li.sn-yes .s{color:var(--ink); background:var(--mark-lit); padding:2px 7px}
.sn-where li.sn-yes .w{color:var(--mark-lit)}
.sn-where-k{margin:0 0 var(--s3)}

/* ---------- the stop: the callback, then the ask ---------- */
.sn-stop .pull{margin-top:var(--s5)}
.sn-ask{font-family:var(--voice); font-weight:700; font-size:var(--t-h3); line-height:1.1; letter-spacing:-.012em;
  font-variation-settings:"wdth" 84,"opsz" 36; margin:var(--s5) 0 0; max-width:22em}
.sn-ask em{font-style:normal; color:var(--mark)}

/* ---------- the escalation: every authority named, in order ---------- */
.sn-esc{margin:var(--s5) 0 var(--s5)}
.sn-esc figcaption{margin-bottom:var(--s3)}
.sn-esc ol{list-style:none; margin:0; padding:0}
.sn-esc li{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s1); padding:0 0 var(--s4) var(--s5); border-left:var(--mid) solid var(--ink); margin-left:6px}
.sn-esc li::before{content:""; position:absolute; left:-8px; top:.3em; width:10px; height:10px; background:var(--paper); border:var(--mid) solid var(--ink)}
@media(min-width:600px){
  .sn-esc li{grid-template-columns:9.5rem minmax(0,1fr); gap:var(--s1) var(--s4); padding-left:0; border-left:0; margin-left:0}
  .sn-esc li::before{left:calc(9.5rem + var(--s2) - 6px)}
  .sn-esc li::after{content:""; position:absolute; left:calc(9.5rem + var(--s2) - 1px); top:0; bottom:0; border-left:var(--mid) solid var(--ink); z-index:-1}
  .sn-esc li > :not(.t){grid-column:2; padding-left:var(--s4)}
  .sn-esc li > .t{grid-row:1 / span 3; text-align:left}
}
.sn-esc .t{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--quiet); line-height:1.6; padding-top:.15em}
.sn-esc .w{font-family:var(--voice); font-weight:700; line-height:1.02; letter-spacing:-.02em; font-variation-settings:"wdth" 82,"opsz" 48; color:var(--ink)}
.sn-esc li:nth-child(1) .w{font-size:1.35rem}
.sn-esc li:nth-child(2) .w{font-size:1.55rem}
.sn-esc li:nth-child(3) .w{font-size:1.8rem}
.sn-esc li:nth-child(4) .w{font-size:2.05rem}
.sn-esc q{display:block; font-family:var(--read); font-size:1.05rem; line-height:1.4; color:var(--ink-soft); quotes:"\201C" "\201D"; margin-top:var(--s1)}
.sn-esc li.gap{padding-top:var(--s1); padding-bottom:var(--s5)}
.sn-esc li.gap::before{display:none}
.sn-esc li.gap{border-left-style:dashed}
.sn-esc li.gap::after{border-left-style:dashed}
.sn-esc .g{font-family:var(--read); font-style:italic; font-size:1.05rem; color:var(--quiet)}
.sn-esc li.end{padding-bottom:0}
.sn-esc li.end::before{background:var(--mark); border-color:var(--mark); width:14px; height:14px; left:-10px}
@media(min-width:600px){ .sn-esc li.end::before{left:calc(9.5rem + var(--s2) - 8px)} .sn-esc li.end::after{bottom:auto; height:.6em} }
.sn-esc li.end .t{color:var(--mark)}
.sn-esc li.end .w{font-size:clamp(2.4rem,5.4vw,3.8rem); line-height:.9; letter-spacing:-.035em; color:var(--mark); font-variation-settings:"wdth" 76,"opsz" 96}
.sn-esc .n{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-top:var(--s2)}

/* ---------- the complaint, as a document ---------- */
.sn-doc{margin:var(--s5) 0; padding:var(--s4) var(--s5) var(--s5); background:var(--paper-2); border-top:var(--mid) solid var(--ink)}
.sn-doc-k{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--mark); margin:0 0 var(--s4)}
.sn-doc .sn-l{font-family:var(--read); font-size:var(--t-lg); line-height:1.4; margin:0 0 var(--s3); font-variation-settings:"opsz" 24}
.sn-doc .sn-l-big{font-family:var(--voice); font-weight:700; font-size:clamp(1.35rem,2.5vw,1.9rem); line-height:1.12; letter-spacing:-.015em;
  font-variation-settings:"wdth" 86,"opsz" 36; padding-left:var(--s3); border-left:var(--mid) solid var(--mark)}
.sn-doc .sn-g{font-family:var(--mach); font-weight:300; font-size:var(--t-xs); letter-spacing:.06em; color:var(--quiet); margin:var(--s4) 0 var(--s1)}
.sn-doc > :last-child{margin-bottom:0}

/* ---------- the fix, as steps ---------- */
.sn-steps{list-style:none; margin:var(--s3) 0 var(--s4); padding:0; counter-reset:s}
.sn-steps li{counter-increment:s; display:grid; grid-template-columns:3rem minmax(0,1fr); gap:var(--s3); padding:var(--s3) 0; border-top:var(--hair) solid var(--paper-3);
  font-size:var(--t-lg); line-height:1.45}
.sn-steps li:last-child{border-bottom:var(--hair) solid var(--paper-3)}
.sn-steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--voice); font-weight:700; font-size:1.7rem; line-height:1; letter-spacing:-.03em; color:var(--mark);
  font-variation-settings:"wdth" 76,"opsz" 72}

/* ---------- the pattern: one tactic, three times ---------- */
.sn-pat{width:100%; border-collapse:collapse; margin:var(--s5) 0 0; table-layout:fixed}
.sn-pat thead th{text-align:left; vertical-align:bottom; padding:0 var(--s3) var(--s3) 0; font-family:var(--voice); font-weight:700; font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1; letter-spacing:-.02em; font-variation-settings:"wdth" 84,"opsz" 36; border-bottom:var(--mid) solid var(--ink)}
.sn-pat thead th b{display:block; font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:.85; letter-spacing:-.045em; color:var(--mark); font-variation-settings:"wdth" 76,"opsz" 96; margin-bottom:var(--s2)}
.sn-pat thead td{border-bottom:var(--mid) solid var(--ink); width:calc(15rem + var(--s6))}
.sn-pat tbody th{text-align:left; vertical-align:top; padding:var(--s3) var(--s3) var(--s3) 0; font-family:var(--mach); font-weight:400; font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--quiet); border-bottom:var(--hair) solid var(--paper-3)}
.sn-pat tbody td{vertical-align:top; padding:var(--s3) var(--s4) var(--s3) 0; font-size:var(--t-lg); line-height:1.4; border-bottom:var(--hair) solid var(--paper-3)}
.sn-pat tr.sn-pat-q td{font-family:var(--voice); font-weight:700; font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.15; letter-spacing:-.01em;
  font-variation-settings:"wdth" 88,"opsz" 36; border-left:var(--mid) solid var(--mark); padding-left:var(--s3); background:linear-gradient(90deg, rgba(168,31,61,.07), transparent 80%)}
.sn-pat tr.sn-pat-out td span{display:inline-block; font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border:var(--hair) solid var(--ink); line-height:1.5}
.sn-pat tr.sn-pat-out td span.sn-open-case{background:var(--mark); border-color:var(--mark); color:var(--paper)}
@media(max-width:759px){
  .sn-pat,.sn-pat tbody,.sn-pat tr,.sn-pat td,.sn-pat tbody th{display:block; width:auto}
  .sn-pat thead{display:none}
  .sn-pat tbody tr{margin:0 0 var(--s4); border-top:var(--mid) solid var(--ink)}
  .sn-pat tbody th{border:0; padding:var(--s2) 0 var(--s1); color:var(--mark)}
  .sn-pat tbody td{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:var(--s2); padding:var(--s2) 0; font-size:1rem}
  .sn-pat tbody td::before{content:attr(data-k); font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.04em; color:var(--quiet); text-transform:uppercase; padding-top:.2em}
  .sn-pat tr.sn-pat-q td{border-left:0; padding-left:0; background:none; font-size:1.05rem}
  .sn-pat tr.sn-pat-out td span{justify-self:start}
}

/* ---------- what we concede: three cards ---------- */
.sn-cc{display:grid; gap:var(--s5); margin:var(--s5) 0 var(--s4)}
@media(min-width:900px){ .sn-cc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) var(--s6)} .sn-cc-wide{grid-column:1 / -1} }
.sn-cc-card{border-top:var(--mid) solid var(--ink); padding-top:var(--s3)}
.sn-cc-n{display:flex; align-items:baseline; gap:var(--s3); margin:0 0 var(--s3)}
.sn-cc-n b{font-family:var(--voice); font-weight:700; font-size:2.6rem; line-height:.85; letter-spacing:-.045em; color:var(--mark); font-variation-settings:"wdth" 76,"opsz" 96}
.sn-cc-n span{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--quiet)}
.sn-cc-pull{font-family:var(--voice); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.02; letter-spacing:-.025em;
  font-variation-settings:"wdth" 80,"opsz" 72; margin:0 0 var(--s4); max-width:14em}
.sn-cc-card > p:not(.sn-cc-n):not(.sn-cc-pull):not(.sn-cc-answer){font-size:var(--t-lg); line-height:1.55; margin:0 0 var(--s3); max-width:34em}
.sn-cc-card > p.sn-cc-turn{font-family:var(--read); font-style:italic; padding-left:var(--s3); border-left:var(--mid) solid var(--mark)}
.sn-cc-wide{background:var(--paper-2); border-top-color:var(--ink); padding:var(--s4) var(--s5) var(--s5)}
.sn-cc-head{display:grid; gap:var(--s2); margin-bottom:var(--s4)}
@media(min-width:900px){ .sn-cc-head{grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:end; gap:var(--s6)} .sn-cc-head .sn-cc-pull{margin:0} }
.sn-cc-pts{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4)}
@media(min-width:700px){ .sn-cc-pts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s6)} }
@media(min-width:1100px){ .sn-cc-pts{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5)} }
.sn-cc-pts li{border-top:var(--hair) solid var(--ink); padding-top:var(--s2)}
.sn-cc-pts .k,.sn-cc-answer .k{display:block; font-family:var(--voice); font-weight:700; font-size:1.1rem; line-height:1.15; margin-bottom:var(--s2); font-variation-settings:"wdth" 88,"opsz" 24}
.sn-cc-pts p{font-size:1rem; line-height:1.5; margin:0}
.sn-cc-answer{margin:var(--s5) 0 0; padding:var(--s3) var(--s4); background:var(--ink); color:var(--paper); font-family:var(--read); font-size:var(--t-lg); line-height:1.45}
.sn-cc-answer .k{font-family:var(--mach); font-weight:400; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--mark-lit); margin-bottom:var(--s1)}

/* ---------- fact sheet card: opens the PDF over the page ---------- */
.sn-sheet-row{margin-top:var(--s6)}
.sn-sheetcard{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:var(--s4); align-items:center; max-width:36rem;
  padding:var(--s3); border:var(--hair) solid var(--ink); border-left:var(--mid) solid var(--mark); background:var(--paper-2); color:var(--ink); text-decoration:none}
.sn-sheetcard:hover,.sn-sheetcard:focus-visible{outline:none; box-shadow:inset 0 0 0 1px var(--mark); border-color:var(--mark)}
.sn-sheetcard-img{display:block; width:100%; height:auto; border:var(--hair) solid var(--quiet); background:var(--paper)}
.sn-sheetcard-txt{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.sn-sheetcard-k{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--mark)}
.sn-sheetcard-t{font-family:var(--voice); font-weight:700; font-size:1.3rem; line-height:1.05; letter-spacing:-.015em; font-variation-settings:"wdth" 84,"opsz" 36}
.sn-sheetcard-t em{font-style:normal; color:var(--mark)}
.sn-sheetcard-d{font-size:.95rem; line-height:1.4; color:var(--ink-soft)}
.sn-sheetcard-go{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.sn-sheetcard:hover .sn-sheetcard-go,.sn-sheetcard:focus-visible .sn-sheetcard-go{color:var(--mark)}

/* ---------- the viewer: a native dialog over a dimmed page ---------- */
html.sv-open{overflow:hidden}
.sv{width:min(60rem,calc(100vw - 2rem)); max-width:none; height:calc(100vh - 2rem); height:calc(100dvh - 2rem); max-height:none; margin:auto;
  padding:0; border:var(--mid) solid var(--ink); background:var(--paper); color:var(--ink); display:none; flex-direction:column; overflow:hidden}
.sv[open]{display:flex}
.sv::backdrop{background:rgba(23,18,28,.72)}
.sv-bar{flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); padding:var(--s3) var(--s4);
  background:var(--ink); color:var(--paper)}
.sv-t{margin:0; font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--paper)}
.sv-actions{display:flex; flex-wrap:wrap; gap:var(--s2)}
.sv-btn{appearance:none; cursor:pointer; font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; line-height:1;
  padding:.7em 1em; min-height:2.75rem; display:inline-flex; align-items:center; border:var(--hair) solid var(--paper); background:transparent; color:var(--paper); text-decoration:none}
.sv-btn:hover,.sv-btn:focus-visible{outline:none; background:var(--paper); color:var(--ink)}
.sv-btn[data-sv-share]{background:var(--mark-lit); border-color:var(--mark-lit); color:var(--ink)}
.sv-btn[data-sv-share]:hover,.sv-btn[data-sv-share]:focus-visible{background:var(--paper); border-color:var(--paper)}
.sv-status{flex-basis:100%; margin:0; font-family:var(--mach); font-size:var(--t-xs); color:var(--mark-lit); overflow-wrap:anywhere}
.sv-status:empty{display:none}
.sv-body{flex:1; overflow:auto; overscroll-behavior:contain; padding:var(--s4); display:grid; gap:var(--s4); justify-items:center; background:var(--paper-3)}
.sv-body img{display:block; width:100%; max-width:52rem; height:auto; border:var(--hair) solid var(--quiet); background:var(--paper)}
.sv-alt{margin:0; font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase}
@media(max-width:599px){ .sv{width:100vw; height:100vh; height:100dvh; border:0} .sv-bar{padding:var(--s2) var(--s3)} .sv-body{padding:var(--s2)} }

/* ---------- blog bits ---------- */
.sn-crumb{color:inherit}
.sn-blog-nav{font-family:var(--mach); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; margin:var(--s3) 0 0}

/* ---------- print: the page reads on paper too ---------- */
@media print{
  .route,.topnav,.menu,.top-tel,.number,.acts-band,.sv,.sn-blog-nav{display:none !important}
  .sn-hero{padding:0 0 1rem}
  .sn-hero h1,.sn-hero .sn-sub,.sn-hero .deck,.sn-file dd,.sn-by b{color:var(--ink)}
  .invert{background:none; color:var(--ink)}
  .invert .sn-big-n,.invert .sn-quote p,.invert .sn-where .w,.invert .turn-body .sn-may,.invert h2{color:var(--ink)}
}
.sn-doc .sn-g-cont{margin:calc(-1 * var(--s2)) 0 var(--s4)}
@media(max-width:599px){
  .sn-esc li.end{border-left-color:transparent}
  .sn-esc li.end::after{content:""; position:absolute; left:-2px; top:0; height:.4em; border-left:var(--mid) solid var(--ink)}
}