/* Rip & Ship Report — "the break sheet". See DESIGN.md. Flat paper, ink, one label red. No gradients, grain, glass or tilt. */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/LibreFranklin-400-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/BigShouldersDisplay-900.woff2) format("woff2")}
:root{--pad:clamp(18px,4vw,40px);--paper:#F3EFE6;--sheet:#FBF9F4;--acrylic:#E3E8E9;--ink:#16202A;--graphite:#4B5560;--red:#A71D28;--ok:#1F6B3A;--rule:rgba(22,32,42,.22);--soft:rgba(22,32,42,.1);
 --body:"Libre Franklin",system-ui,"Segoe UI",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
h1,h2,h3{font-family:var(--body);font-weight:700;letter-spacing:-.012em;margin:0;line-height:1.12}
h1{font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem)}h3{font-size:1.15rem;line-height:1.25}
p{margin:0 0 1em}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:12px 16px;z-index:50}.skip:focus{top:8px}
.ref,.no{font:400 .78rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite)}
.no{margin:0 0 4px}

/* header */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;padding-top:10px;padding-bottom:11px;background:linear-gradient(var(--ink),var(--ink)) bottom center/calc(100% - 2*var(--pad)) 1.5px no-repeat}
.mark{display:inline-flex;align-items:center;min-height:44px;font:900 1.7rem/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--ink)}.mark span{color:var(--red);margin-left:.3em}
.top nav,.foot nav{display:flex;flex-wrap:wrap;align-items:center}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:.95rem;font-weight:600;text-decoration:none}
.top nav a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:6px}
.top nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:6px}
.top nav .navjoin{border:1.5px solid var(--ink);border-radius:3px;margin-left:8px;padding:0 14px}.top nav .navjoin:hover{background:var(--ink);color:#fff}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start;padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(36px,5vw,64px)}
.lead{font-size:1.15rem;line-height:1.5;max-width:36em;margin:20px 0 24px}
.trust{font-size:.9rem;color:var(--graphite);margin:14px 0 0}
.crumbs{font-size:.88rem;color:var(--graphite);margin:0 0 14px}
.crumbs a{display:inline-block;padding:13px 2px;margin:-13px 0}
.trust a,.heroslab figcaption a,.srcline a,.sub a{display:inline-block;padding:13px 2px;margin:-13px 0}
.signup{display:flex;gap:10px;flex-wrap:wrap}
.signup input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 14px;font:400 1rem var(--body);border:1.5px solid var(--ink);border-radius:3px;background:var(--sheet);color:var(--ink)}
.btn{min-height:48px;padding:0 20px;border:1.5px solid var(--red);border-radius:3px;background:var(--red);color:#fff;font:600 1rem var(--body);cursor:pointer}
.btn:hover{background:#85161f;border-color:#85161f}.btn:disabled{opacity:.65;cursor:progress}
.fine{font-size:.86rem;color:var(--graphite);margin:10px 0 0}.fine.ok{color:var(--ok);font-weight:600}.fine.err{color:var(--red);font-weight:600}
.signup-box[hidden],.signup[hidden]{display:none}

/* the slab: flat acrylic, printed label, card face */
.slab{background:var(--acrylic);border:1.5px solid var(--ink);border-radius:10px;padding:10px}
.label{display:flex;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--ink);border-top:6px solid var(--red);border-radius:2px;padding:10px 12px}
.l-left{display:flex;flex-direction:column;min-width:0;font-size:.84rem;line-height:1.35;color:var(--graphite)}
.l-left b{font:900 1.2rem/1.1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.l-left .ref{margin-top:4px;font-size:.66rem;letter-spacing:.02em;text-transform:none}
.l-grade{text-align:right;display:flex;flex-direction:column;justify-content:center;flex:none}
.l-grade small{font-size:.8rem;font-weight:600;color:var(--graphite)}
.l-grade strong{font:900 2.7rem/1 var(--disp);color:var(--red);letter-spacing:.01em}
.heroslab{margin:0}.heroslab figcaption{font-size:.84rem;color:var(--graphite);margin-top:12px}
.cardface{margin-top:10px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:6px 14px 10px}

/* price-guide tables */
.guide{width:100%;border-collapse:collapse;font-size:.98rem}
.guide caption{text-align:left;font-size:.86rem;color:var(--graphite);padding:0 0 8px}
.guide th,.guide td{padding:9px 8px 9px 0;border-bottom:1px solid var(--rule);text-align:right;vertical-align:baseline}
.guide th[scope=row],.guide thead th:first-child{text-align:left;font-weight:600}
.guide thead th{font:400 .72rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--graphite);border-bottom:1.5px solid var(--ink)}
.guide td{font-family:var(--mono);font-size:.95rem;white-space:nowrap}
.guide td:last-child,.guide thead th:last-child{padding-right:0}
.guide small{display:block;font:400 .78rem/1.35 var(--body);color:var(--graphite);white-space:normal}
.guide td small{font-family:var(--mono);text-align:right}
.guide tr.best th,.guide tr.best td{font-weight:600;border-bottom:2px solid var(--ink)}.guide tr.best th:first-child{box-shadow:inset 4px 0 0 var(--red);padding-left:10px}
.guide.worked{margin-top:20px}.guide.worked caption{font-weight:600;color:var(--ink)}

/* calculators: break sheet */
.sheet{padding:clamp(28px,4vw,48px) 0;border-top:1.5px solid var(--ink)}
.sheet-head{max-width:46rem;margin-bottom:20px}.sheet-head .no{display:block;margin-bottom:6px;color:var(--red)}.sheet-head p{margin:8px 0 0;color:var(--graphite)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.fields{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(7.5rem,10.5rem);gap:2px 16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule);min-height:58px}
.row label{display:flex;flex-direction:column;gap:2px}
.lab{font-weight:600;font-size:.95rem;line-height:1.3}
.hint{font-size:.8rem;line-height:1.35;color:var(--graphite)}
.err{font-size:.8rem;font-weight:600;color:var(--red)}
.inp{display:flex;align-items:center;min-height:46px;border:1.5px solid var(--ink);border-radius:3px;background:var(--sheet);padding:0 10px}
.inp:focus-within{outline:3px solid var(--red);outline-offset:2px}
.inp input,.inp select{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:var(--ink);font:400 1rem var(--mono);text-align:right;padding:0 2px;outline:0}
.inp .aff{font:400 .95rem var(--mono);color:var(--graphite);padding:0 4px}
.inp input[aria-invalid]{color:var(--red)}
.row.wide{grid-template-columns:1fr}.row.wide .inp{padding:0 6px}.row.wide select{text-align:left;font:400 .95rem var(--body);width:100%}
.row.check{grid-template-columns:minmax(0,1fr) 46px}.row.check .inp{border:0;background:none;padding:0;justify-content:flex-end}
.inp input[type=checkbox]{flex:none;appearance:none;-webkit-appearance:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:3px;background:var(--sheet);cursor:pointer;display:grid;place-content:center;padding:0}
.inp input[type=checkbox]:checked{background:var(--red);border-color:var(--red)}
.inp input[type=checkbox]:checked::after{content:"";width:12px;height:22px;border:solid #fff;border-width:0 4px 4px 0;transform:translateY(-3px) rotate(45deg)}
.inp:has(input[type=checkbox]:focus-visible){outline:0}.inp input[type=checkbox]:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.rates{padding-bottom:clamp(12px,2vw,24px)}.rates-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end}
.resultcol{position:sticky;top:16px}
.detail{margin-top:12px}
.lines{width:100%;border-collapse:collapse;font-size:.95rem}
.lines th,.lines td{padding:8px 0;border-bottom:1px solid var(--rule);font-weight:400;text-align:left}.lines td{text-align:right;font-family:var(--mono)}
.lines tr.sub th,.lines tr.sub td{color:var(--graphite)}
.lines tr.total th,.lines tr.total td{font-weight:600;border-bottom:2px solid var(--ink)}
.rank{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.rank li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.rank .p{font-weight:600}.rank .v{font:600 1.1rem var(--mono);text-align:right}.rank .d{grid-column:1/-1;font-size:.84rem;color:var(--graphite)}
.rank li.best{box-shadow:inset 4px 0 0 var(--red);padding-left:10px}
.note{font-size:.84rem;line-height:1.45;color:var(--graphite);margin:10px 0 0}
.unv{border-left:3px solid var(--red);padding-left:10px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ghost{min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);font:600 .9rem var(--body);cursor:pointer}
.ghost:hover{background:var(--ink);color:#fff}
.mini-join{margin-top:18px;padding-top:14px;border-top:1.5px dashed var(--ink)}.mini-join>p{margin:0 0 10px;font-size:.95rem}
.mini-join .signup input{flex:1 1 150px}

/* issues checklist */
.issues{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px);border-top:1.5px solid var(--ink)}
.sub{color:var(--graphite);max-width:44em;margin:10px 0 24px}
.checklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.checklist li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.checklist .box{width:22px;height:22px;margin-top:20px;border:2px solid var(--ink);border-radius:2px;background:var(--sheet)}
.checklist h2,.checklist h3{font-size:1.3rem;margin-bottom:6px}.checklist li p:last-child{margin:0;max-width:42em}
.all{margin:18px 0 0}.all a{display:inline-block;padding:10px 0;font-weight:600}

/* sources as ticket stubs */
.sources{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px);border-top:1.5px solid var(--ink)}
.stubs{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.stub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px}
.stub::before,.stub::after{content:"";position:absolute;right:178px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.stub::before{top:-11px;clip-path:inset(50% 0 0 0)}.stub::after{bottom:-11px;clip-path:inset(0 0 50% 0)}
.stub-main{padding:16px 22px 14px}.stub-main h3{font-size:1.3rem}.stub-main p{font-size:.92rem;margin:8px 0 0}
.chk{font:400 .78rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--graphite)}
.stub-link{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;min-height:60px;border-left:2px dashed var(--ink);font-weight:600;font-size:.95rem}
.caveat{margin-top:32px;max-width:50em}.caveat ul{padding-left:20px;margin:10px 0 0}.caveat li{margin:6px 0}
.caveat h3{font-size:1.25rem}

/* join ticket */
.join2{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(36px,5vw,64px)}
.ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px}
.ticket::before,.ticket::after{content:"";position:absolute;right:52px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.ticket::before{top:-11px;clip-path:inset(50% 0 0 0)}.ticket::after{bottom:-11px;clip-path:inset(0 0 50% 0)}
.ticket-main{padding:clamp(20px,3vw,32px)}.ticket-main p{max-width:36em;margin:10px 0 18px}.ticket-main .signup-box{max-width:560px}
.ticket-stub{border-left:2px dashed var(--ink);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;gap:14px;font:600 .8rem var(--mono);letter-spacing:.14em;color:var(--graphite)}.ticket-stub b{color:var(--red)}
.more{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:20px}.more p{margin:0}
.inline{list-style:none;display:flex;flex-wrap:wrap;gap:0 6px;margin:0;padding:0}.inline a{display:inline-block;padding:11px 8px}

/* landing + prose */
.ratecard{background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px;padding:16px 20px}
.ratecard .ref{margin:0 0 6px}.ratecard dl{margin:0}.ratecard dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}.ratecard dl div:last-child{border:0}
.ratecard dt{color:var(--graphite);font-size:.9rem}.ratecard dd{margin:0;font-weight:600;text-align:right;font-size:.95rem}
.prose{padding-top:20px;padding-bottom:20px}.prose>*{max-width:46rem}
.prose h2{margin:36px 0 12px}.prose h3{margin:26px 0 8px}.prose ul{padding-left:20px}.prose li{margin:5px 0}
.prose .guide{margin:14px 0 18px}.prose .guide td{white-space:normal;font-family:var(--body);font-size:.95rem}
.srcline{font-size:.9rem;color:var(--graphite);border-top:1px solid var(--rule);padding-top:12px;margin-top:28px}
.unvin{border-left:3px solid var(--red);padding-left:18px}.unvin h2{margin-top:8px}
.issue-body h1{margin:6px 0 14px}.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:36px}.pager a{padding:12px 0;font-weight:600}
.issue .prose .lead{margin-top:12px}
.nf-main{padding-top:clamp(40px,8vw,96px);padding-bottom:clamp(40px,8vw,96px);min-height:60vh}.nf-links{list-style:none;padding:0}.nf-links a{display:inline-block;padding:10px 0;font-weight:600}

/* footer */
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:start;padding-top:25px;padding-bottom:36px;background:linear-gradient(var(--ink),var(--ink)) top center/calc(100% - 2*var(--pad)) 1.5px no-repeat;font-size:.9rem;color:var(--graphite)}
.foot p{margin:6px 0 0}.foot nav{flex-direction:column;align-items:flex-start}.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot .foot-fine{grid-column:1/-1;margin:0;font-size:.82rem}

@media (max-width:900px){
 .hero,.rates-grid{grid-template-columns:1fr}
 .tool-grid{grid-template-columns:1fr;gap:0}
 /* result first and pinned while you edit the fields; detail, actions and signup follow the fields */
 .resultcol{display:contents}
 .out{order:-1;position:sticky;top:0;z-index:5;margin:0 calc(-1 * var(--pad)) 8px;padding:6px var(--pad);border-radius:0;border-width:0 0 1.5px 0;background:var(--acrylic)}
 .out .label{padding:6px 10px;border-top-width:4px}.out .l-left span:not(.ref){font-size:.78rem}.out .l-left .ref{display:none}.out .l-left b{display:none}
 .out .l-grade strong{font-size:2rem}.out .l-left span+span{display:none}
 .detail{margin-top:16px}
 .stub{grid-template-columns:1fr}.stub::before,.stub::after{display:none}.stub-link{border-left:0;border-top:2px dashed var(--ink);justify-content:flex-start;min-height:48px}
 .foot{grid-template-columns:1fr}
}
@media (max-width:600px){
 body{font-size:16px}
 .row{grid-template-columns:minmax(0,1fr) 8.5rem;gap:2px 12px}
 .row.wide{grid-template-columns:1fr}
 .signup .btn{width:100%}
 .ticket{grid-template-columns:1fr}.ticket::before,.ticket::after{display:none}.ticket-stub{display:none}
 .top nav a{padding:0 9px;font-size:.92rem}.top nav .navjoin{margin-left:0}
 .guide td{font-size:.9rem}
 .ratecard dl div{flex-direction:column;gap:2px}.ratecard dd{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.top nav,.actions,.mini-join,.join2,.signup-box{display:none}.out{position:static}}

/* ===== v7 "break night" colour layer: paper/ink structure, brand red + yellow, hard print shadows ===== */
:root{--red:#B3202A;--red-d:#8E1820;--yellow:#F4C430;--yellow-d:#E0AE12;--shadow:4px 4px 0 var(--ink)}
/* masthead: full-bleed red band */
.top{background:var(--red);box-shadow:0 0 0 100vmax var(--red);clip-path:inset(0 -100vmax);color:#fff;padding-top:8px;padding-bottom:8px}
.top .mark{color:#fff}.top .mark span{color:var(--yellow)}
.top nav a{color:#fff}
.top nav a:hover,.top nav a[aria-current]{color:#fff;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.top nav .navjoin{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:700}
.top nav .navjoin:hover{background:#fff;color:var(--ink)}
.top :focus-visible{outline-color:var(--yellow)}
/* static fee strip (no marquee) */
.strip{background:var(--ink);color:#fff;font:600 .82rem/1.2 var(--mono);letter-spacing:.02em}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;min-height:38px;padding-top:6px;padding-bottom:6px}
.strip b{background:var(--yellow);color:var(--ink);padding:3px 8px;margin-right:14px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.strip span{display:inline;white-space:nowrap}
.strip span+span::before{content:"";display:inline-block;vertical-align:middle;width:6px;height:6px;background:var(--yellow);transform:rotate(45deg);margin:-2px 14px 0}
.strip em{font-style:normal;color:var(--yellow)}.strip small{font:inherit}.strip i{font-style:normal}
.strip .when{color:#c9d1da;font-weight:400}
/* headings */
h1 em{font-style:normal;color:var(--red);background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%)}
.sheet-head .no{display:inline-block;background:var(--red);color:#fff;padding:4px 9px;font-weight:600;letter-spacing:.08em}
.sheet{border-top:3px solid var(--ink)}
.sheet-head h2::after{content:"";display:block;width:56px;height:6px;background:var(--yellow);margin-top:10px}
/* buttons */
.btn{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--shadow);font-weight:700;transition:transform .08s,box-shadow .08s}
.btn:hover{background:var(--yellow-d);border-color:var(--ink);transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.ghost{border-width:2px}.ghost:hover{background:var(--red);border-color:var(--red);color:#fff}
.signup input{border-width:2px}
/* the slab: thick ink edge, hard shadow, red label header */
.slab{background:var(--acrylic);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.label{border:2px solid var(--ink);border-top:0;padding:0;gap:0;overflow:hidden;background:linear-gradient(var(--red),var(--red)) top/100% 32px no-repeat #fff}
.label .l-left{padding:0 12px 10px;flex:1 1 auto}
.label .l-left b{display:block;color:#fff;margin:0 0 8px;height:32px;line-height:32px;padding:0;letter-spacing:.06em;white-space:nowrap}
.label .l-grade{padding:40px 12px 10px 0}
.l-grade strong{color:var(--red)}
.l-grade small{color:var(--ink)}
.out .l-grade strong,.heroslab .l-grade strong{background:linear-gradient(transparent 70%,var(--yellow) 70%)}
/* best row = yellow, not just a red bar */
.guide tr.best th,.guide tr.best td{background:var(--yellow);color:var(--ink);border-bottom:2px solid var(--ink)}
.guide tr.best th:first-child{box-shadow:inset 6px 0 0 var(--red)}
.rank li.best{background:var(--yellow);box-shadow:inset 6px 0 0 var(--red);padding-right:8px}
.rank li.best .d{color:var(--ink)}
.lines tr.total th,.lines tr.total td{background:var(--yellow);padding-left:8px;padding-right:8px}
/* inputs */
.inp{border-width:2px}.inp:focus-within{outline-color:var(--red);background:#fff}
.inp input[type=checkbox]:checked{background:var(--red)}
/* rate card + sources: red caps line */
.ratecard{border-width:2px;box-shadow:var(--shadow)}.ratecard .ref{color:var(--red);font-weight:600}
.stub{border-width:2px;box-shadow:var(--shadow)}.stub-link{background:var(--yellow);border-left-color:var(--ink)}.stub-link:hover{background:var(--yellow-d);color:var(--ink)}
.chk{color:var(--red);font-weight:600}
/* join ticket: the loud one */
.ticket{background:var(--red);color:#fff;border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.ticket::before,.ticket::after{border-width:2.5px}
.ticket h2{color:#fff}.ticket-main p{color:#fde9ea}.ticket .fine{color:#fde9ea}.ticket .fine.ok{color:var(--yellow)}.ticket .fine.err{color:#fff}
.ticket a{color:#fff;text-decoration-color:var(--yellow)}
.ticket-stub{border-left-color:#fff;color:#fff}.ticket-stub b{color:var(--yellow)}
.ticket .signup input{border-color:var(--ink)}
/* issues checklist: red numbers */
.checklist .no{color:var(--red);font-weight:600}.checklist .box{border-color:var(--red)}
/* footer: ink band */
.foot{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);color:#c9d1da;margin-top:24px}
.foot .mark{color:#fff}.foot .mark span{color:var(--yellow)}
.foot a{color:#fff;text-decoration-color:var(--yellow)}.foot a:hover{color:var(--yellow)}
.foot :focus-visible{outline-color:var(--yellow)}
a{text-decoration-color:var(--red)}
.skip{background:var(--yellow);color:var(--ink)}
@media (max-width:900px){
 .out{background:var(--acrylic);border-bottom:2.5px solid var(--ink);box-shadow:none}
 .out .label{background-size:100% 6px}.out .label .l-left{padding:12px 10px 8px}.out .label .l-grade{padding:12px 10px 8px 0}
}
@media (max-width:600px){
 /* mobile fee watch: three even stat cells, no wrapping sentences */
 .strip .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:0;padding-bottom:0;min-height:0}
 .strip b,.strip .when{display:none}
 .strip .fw{display:flex;flex-direction:column;align-items:flex-start;padding:7px 0 8px 10px;border-left:1px solid rgba(255,255,255,.18);white-space:nowrap}
 .strip .fw:first-of-type{border-left:0;padding-left:0}
 .strip span+span::before{display:none}
 .strip .fw small{font:600 .68rem/1.2 var(--body);letter-spacing:.02em;color:#c9d1da}
 .strip .fw em{font:900 1.35rem/1.05 var(--disp);letter-spacing:.02em}
 .strip .fw i{font:400 .66rem/1.2 var(--mono);font-style:normal;color:#c9d1da}
 .top nav .navjoin{display:none}.top nav{margin-left:-9px}
 .strip b{margin-right:10px}.strip span+span::before{margin:0 9px}
 .top{padding-top:4px;padding-bottom:4px}
}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none}}

/* ===== v8 photos: real Pexels photos, toned in the palette by tools/images.py, framed like prints ===== */
.photo{position:relative;margin:0;background:var(--ink);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.photo img{display:block;width:100%;height:auto}
.ptag{position:absolute;left:12px;top:12px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);font:600 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px}
.pcredit{font-size:.74rem;color:var(--graphite);margin:10px 0 0}.pcredit a{color:inherit;text-decoration-thickness:1px}
/* home hero: print behind, slab overlapping */
.hero-art{position:relative}
.hero-photo{width:78%;margin-left:auto;transform:rotate(1.5deg)}
.hero-photo .ptag{background:var(--red);color:#fff;border-color:#fff}
.hero-art .heroslab{position:relative;z-index:2;margin-top:-42%;width:88%;background:transparent}
.hero-art .heroslab figcaption{background:var(--paper);padding:6px 0 0}
/* landing band */
.band-photo{margin-top:0;margin-bottom:clamp(24px,4vw,40px)}
.band-photo .ptag{top:auto;bottom:14px;left:14px;font-size:.85rem;padding:8px 11px}
/* issues strip: three prints */
.pstrip{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.pstrip .photo:nth-child(1){transform:rotate(-1.2deg)}.pstrip .photo:nth-child(2){transform:rotate(.8deg)}.pstrip .photo:nth-child(3){transform:rotate(-.6deg)}
@media (max-width:900px){
 .hero-art{margin-top:8px}
 .hero-photo{width:100%;transform:none;aspect-ratio:16/10}
 .hero-photo img{height:100%;object-fit:cover;object-position:50% 62%}
 .hero-art .heroslab{margin-top:-64px;width:calc(100% - 24px);margin-left:12px}
}
@media (max-width:600px){
 .photo{box-shadow:4px 4px 0 var(--ink);border-width:2px}
 .band-photo .photo{aspect-ratio:16/9}.band-photo .photo img{height:100%;object-fit:cover}
 .pstrip{gap:8px}.ptag{font-size:.7rem}
}
.band-photo .photo{aspect-ratio:3/1}.band-photo .photo img{height:100%;object-fit:cover;object-position:50% 55%}
.photo picture{display:block;height:100%}
@media (max-width:600px){.band-photo .photo{aspect-ratio:16/9}.band-photo .ptag{bottom:10px;left:10px;font-size:.68rem;padding:5px 7px}}
@media (max-width:600px){.strip .fw{box-sizing:border-box;height:62px;overflow:hidden}.strip .fw small,.strip .fw em,.strip .fw i{display:block}.strip .fw small{height:15px}.strip .fw em{height:26px}.strip .fw i{height:14px}}