/*
Design read: working press-office tool for a music manager sending pitches, desk-utility language,
leaning editorial print shop over SaaS.
Tokens (namespaced --sf-*, derived from ../assets/press.css): paper-2, paper, text, void (masthead only),
volt #46b1ff (brand blue, on night only), volt-ink #0b5fa8 (AA on paper), line #c8c5bc,
sent green #17724c, flag amber #8a5a00.
Type: Archivo 900 display (record's logo face), Hanken Grotesk body, IBM Plex Mono for addresses,
counters and durations.
Layout: a thin night masthead with the real lockup and the sent meter, then the generator as a
two-pane desk (outlet rail | composed email), then reference sections.
Signature: the sent meter, a large Archivo numeral with a volt rule that fills as Reid marks pitches sent.
Self-critique: night + one blue accent drifts toward the dark-SaaS default, so night is limited to
the masthead and the working surface is stone paper with print-style rules; blue is the record's own color.
*/
:root{
  --sf-paper:var(--paper-2,#e8e6df); --sf-sheet:var(--paper,#f4f3f0); --sf-ink:var(--text,#16161f); --sf-ink-2:#45444d; --sf-muted:var(--text-mute,#55545e);
  --sf-night:var(--void,#07070b); --sf-night-ink:#f4f3f0; --sf-volt:#46b1ff; --sf-volt-ink:var(--volt-deeper,#17588f); --sf-volt-wash:#dcebf8;
  --sf-line:var(--rule,#d4d1c8); --sf-line-2:#dcd9d1; --sf-ok:#17724c; --sf-ok-wash:#dff0e6; --sf-flag:#8a5a00; --sf-flag-wash:#f6ebd2;
  --sf-r-s:var(--r-sm,4px); --sf-r-m:var(--r-md,10px);
  --sf-f-display:var(--display,"Archivo",ui-sans-serif,sans-serif);
  --sf-f-body:var(--body,"Hanken Grotesk",ui-sans-serif,sans-serif);
  --sf-f-mono:var(--mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);
  --sf-gut:var(--gutter,clamp(16px,3.2vw,40px));
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sf-paper);color:var(--sf-ink);font:400 16px/1.5 var(--sf-f-body)}
a{color:var(--sf-volt-ink);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sf-volt);outline-offset:2px;border-radius:3px}
.wrap{padding-inline:var(--sf-gut)}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--sf-gut);top:8px;z-index:10;background:var(--sf-sheet);padding:8px 12px}

/* masthead */
.mast{background:var(--sf-night);color:var(--sf-night-ink);padding-top:env(safe-area-inset-top,0px)}
.mast-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;justify-content:space-between;padding-block:18px}
.mast img.lockup{height:clamp(44px,6vw,64px);width:auto;display:block}
.meter{display:flex;align-items:baseline;gap:10px;min-width:0}
.meter b{font:900 clamp(40px,6vw,64px)/.9 var(--sf-f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.meter span{font:500 13px/1.3 var(--sf-f-mono);color:#b9b8c2}
.meter-rule{height:4px;background:#24252d;position:relative;overflow:hidden}
.meter-rule i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--sf-volt);transform-origin:left;transform:scaleX(0);transition:transform .4s ease}
@media (prefers-reduced-motion:reduce){.meter-rule i{transition:none}}

/* hero */
.hero{padding-block:clamp(24px,4vw,48px) 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.hero h1{font:900 clamp(34px,5.6vw,72px)/.95 var(--sf-f-display);letter-spacing:-.025em;margin:0 0 14px;max-width:16ch}
.hero p{margin:0 0 20px;color:var(--sf-ink-2);max-width:60ch;font-size:18px}
.hero .cover{width:clamp(96px,14vw,168px);height:auto;aspect-ratio:1;border-radius:var(--sf-r-s);display:block}
.hero figcaption{font:500 12px/1.3 var(--sf-f-mono);color:var(--sf-muted);margin-top:6px;max-width:168px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{appearance:none;border:1.5px solid var(--sf-ink);background:var(--sf-sheet);color:var(--sf-ink);font:700 15px/1 var(--sf-f-body);padding:13px 18px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--sf-ink);color:var(--sf-sheet)}
.btn.primary{background:var(--sf-ink);color:var(--sf-sheet)}
.btn.primary:hover{background:var(--sf-volt-ink);border-color:var(--sf-volt-ink)}
.btn.small{font-size:14px;padding:9px 14px;min-height:40px}
.btn.ok{border-color:var(--sf-ok);color:var(--sf-ok)}
.btn.ok[aria-pressed="true"]{background:var(--sf-ok);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* sections */
section.block{padding-block:clamp(32px,5vw,64px);border-top:1.5px solid var(--sf-ink)}
section.block:first-of-type{border-top:0}
h2{font:900 clamp(26px,3.4vw,40px)/1 var(--sf-f-display);letter-spacing:-.02em;margin:0 0 8px}
h3{font:800 20px/1.15 var(--sf-f-display);margin:0 0 6px}
.lede{color:var(--sf-ink-2);margin:0 0 22px;max-width:62ch}
.tag{display:inline-block;font:600 11px/1 var(--sf-f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sf-muted)}

/* generator desk */
.desk{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:0;background:var(--sf-sheet);border:1.5px solid var(--sf-ink);border-radius:var(--sf-r-m);overflow:hidden}
.rail{border-right:1.5px solid var(--sf-ink);display:flex;flex-direction:column;min-width:0;max-height:min(84vh,900px)}
.rail-top{padding:14px;border-bottom:1px solid var(--sf-line);display:grid;gap:10px}
.field{display:grid;gap:4px;min-width:0}
.field label,.lbl{font:600 12px/1.2 var(--sf-f-mono);letter-spacing:.04em;color:var(--sf-muted)}
input[type=search],input[type=text],input[type=url],input[type=email],select,textarea{font:400 16px/1.4 var(--sf-f-body);color:var(--sf-ink);background:#fff;border:1.5px solid var(--sf-line);border-radius:var(--sf-r-s);padding:9px 10px;min-height:44px;width:100%;min-width:0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sf-volt);outline-offset:0;border-color:var(--sf-ink)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check{display:flex;align-items:center;gap:8px;font-size:15px;min-height:44px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--sf-ink)}
.count{font:500 13px/1.3 var(--sf-f-mono);color:var(--sf-muted)}
.list{list-style:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;flex:1}
.list li{border-bottom:1px solid var(--sf-line-2)}
.list button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;width:100%;padding:11px 14px;cursor:pointer;min-height:52px}
.list button:hover{background:var(--sf-volt-wash)}
.list button:focus-visible{outline:3px solid var(--sf-volt);outline-offset:-3px}
.list button[aria-current="true"]{background:var(--sf-ink);color:var(--sf-sheet)}
.list button[aria-current="true"] .meta{color:#c9c8d0}
.list .name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .meta{grid-column:1/2;font:500 12px/1.3 var(--sf-f-mono);color:var(--sf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .tier{grid-row:1/3;grid-column:2;align-self:center;font:800 13px/1 var(--sf-f-display)}
.sent-mark{color:var(--sf-ok);font-weight:700}
.list button[aria-current="true"] .sent-mark{color:#8fe0b6}
.empty{padding:18px 14px;color:var(--sf-ink-2)}

.compose{padding:clamp(14px,2vw,24px);display:grid;gap:14px;min-width:0;align-content:start}
.angles{display:flex;flex-wrap:wrap;gap:6px}
.angles button{appearance:none;border:1.5px solid var(--sf-line);background:#fff;color:var(--sf-ink);font:600 14px/1 var(--sf-f-body);padding:10px 12px;border-radius:999px;min-height:40px;cursor:pointer;transition:border-color .15s,background-color .15s}
.angles button[aria-pressed="true"]{background:var(--sf-volt-ink);color:#fff;border-color:var(--sf-volt-ink)}
.who{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px;border:1.5px dashed var(--sf-line);border-radius:var(--sf-r-s);background:#fff}
.who .addr{font:500 15px/1.35 var(--sf-f-mono);user-select:all;-webkit-user-select:all;word-break:break-all}
.who .src{grid-column:1/-1;font-size:13px;color:var(--sf-muted)}
.why{font-size:14px;color:var(--sf-ink-2);margin:0}
.why b{color:var(--sf-ink)}
.subject{font:600 16px/1.4 var(--sf-f-body)}
textarea#body{min-height:clamp(320px,52vh,560px);font:400 15px/1.55 var(--sf-f-body);resize:vertical}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.status{font:500 13px/1.3 var(--sf-f-mono);color:var(--sf-ok);min-height:1.3em}
.custom{border:1px solid var(--sf-line);border-radius:var(--sf-r-s);padding:0 12px;background:#fff}
.custom summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.custom .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding-bottom:12px}
.links-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}

/* tables */
.scroll{overflow-x:auto;border:1.5px solid var(--sf-ink);border-radius:var(--sf-r-m);background:var(--sf-sheet)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--sf-line-2)}
th{font:600 12px/1.2 var(--sf-f-mono);letter-spacing:.04em;color:var(--sf-muted);background:var(--sf-sheet);position:sticky;top:0}
td.mono,.mono{font-family:var(--sf-f-mono);font-size:13px}
td.num{font-variant-numeric:tabular-nums}
.pill{display:inline-block;font:600 11px/1 var(--sf-f-mono);padding:4px 7px;border-radius:999px;background:var(--sf-line-2);color:var(--sf-ink);white-space:nowrap}
.pill.form{background:var(--sf-flag-wash);color:var(--sf-flag)}
.pill.email{background:var(--sf-volt-wash);color:var(--sf-volt-ink)}
.pill.sent{background:var(--sf-ok-wash);color:var(--sf-ok)}
.tbl-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px}
.tbl-tools .field{min-width:200px;flex:1}
.cat-summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.cat-summary li{background:var(--sf-sheet);border:1px solid var(--sf-line);border-radius:999px;padding:6px 12px;font-size:14px}
.cat-summary b{font-variant-numeric:tabular-nums}

/* press releases */
.releases{display:grid;gap:18px}
.release{background:var(--sf-sheet);border:1.5px solid var(--sf-ink);border-radius:var(--sf-r-m);padding:clamp(16px,2.4vw,32px)}
.release header{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:14px}
.release .doc{max-width:68ch}
.release .doc h3{font-size:clamp(22px,2.6vw,30px);line-height:1.08;font-weight:900;margin-bottom:10px}
.release .doc .sub{font-weight:600;color:var(--sf-ink-2);margin:0 0 14px}
.release .doc p{margin:0 0 12px}
.release .doc .dl{font:600 13px/1.4 var(--sf-f-mono);letter-spacing:.03em}
.release .doc ol{padding-left:22px;margin:0 0 12px;font-variant-numeric:tabular-nums}
.release .doc .end{text-align:center;letter-spacing:.3em}
details.more{margin-top:8px}
details.more>summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}

/* captions */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.cap{background:var(--sf-sheet);border:1px solid var(--sf-line);border-radius:var(--sf-r-m);padding:14px;display:grid;gap:10px;align-content:start}
.cap pre{white-space:pre-wrap;font:400 14px/1.5 var(--sf-f-body);margin:0;background:#fff;border:1px solid var(--sf-line-2);border-radius:var(--sf-r-s);padding:10px}

/* calendar */
.cal{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1.5px solid var(--sf-ink);border-radius:var(--sf-r-m);background:var(--sf-sheet);overflow:hidden}
.cal>li{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,260px);gap:10px 20px;padding:14px 16px;border-bottom:1px solid var(--sf-line-2)}
.cal>li:last-child{border-bottom:0}
.cal>li.key{background:var(--sf-volt-wash)}
.cal .d{font:900 20px/1 var(--sf-f-display)}
.cal .d small{display:block;font:500 12px/1.4 var(--sf-f-mono);color:var(--sf-muted);margin-top:4px}
.cal ul{margin:6px 0 0;padding-left:18px;display:grid;gap:6px;max-width:68ch}
.cal .social{font-size:13px;color:var(--sf-ink-2)}
.cal .social b{font-variant-numeric:tabular-nums}

/* asks */
.asks{display:grid;gap:10px}
.ask{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;background:var(--sf-sheet);border:1px solid var(--sf-line);border-radius:var(--sf-r-m);padding:14px}
.ask q{font-style:italic;color:var(--sf-ink-2)}
.ask .src{font-size:13px;color:var(--sf-muted)}
.ask .where{grid-row:1/4;grid-column:2;align-self:center}

footer.foot{padding-block:32px 48px;color:var(--sf-muted);font-size:14px;border-top:1.5px solid var(--sf-ink)}

@media (max-width:860px){
  .desk{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1.5px solid var(--sf-ink);max-height:420px}
  .hero{grid-template-columns:1fr}
  .hero figure{display:none}
  .cal>li{grid-template-columns:1fr}
  .ask{grid-template-columns:1fr}
  .ask .where{grid-row:auto;grid-column:auto}
}
@media (max-width:480px){
  .who{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .btns .btn{flex:1 1 auto;justify-content:center}
}

/* links line + talking points */
.vlinks{margin-top:16px;background:var(--sf-sheet);border:1px solid var(--sf-line);border-radius:var(--sf-r-m);padding:14px 16px}
.vlinks h3{margin:0 0 8px;font:800 16px/1.2 var(--sf-f-display)}
.vlinks ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vlinks li{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.vlinks code{font:500 13px/1.3 var(--sf-f-mono);word-break:break-all;user-select:all}
.tp{margin:0;padding-left:1.1em;display:grid;gap:6px}
.ask .st{font:600 12px/1.2 var(--sf-f-mono);text-transform:uppercase;letter-spacing:.04em}
.ask .st.need{color:var(--sf-flag)} .ask .st.open{color:var(--sf-volt-ink)} .ask .st.done{color:var(--sf-ok)}
@media (max-width:860px){.vlinks li{grid-template-columns:1fr auto}.vlinks li>span:first-child{grid-column:1/-1}}
html{scroll-padding-top:120px}
.mast{position:sticky;top:0;z-index:20}
@media (max-width:860px){.mast{position:relative}html{scroll-padding-top:16px}}
.cap table{width:100%;table-layout:fixed;border-collapse:collapse}
.cap th{width:5.5rem}
.cap td{overflow-wrap:anywhere}

.hero .photo{width:clamp(220px,26vw,360px);height:auto;aspect-ratio:640/373;object-fit:cover;border-radius:var(--sf-r-s);display:block}
.hero figcaption{max-width:360px}
.mast .back{margin-right:auto;color:var(--sf-night-ink);font:500 12px/1 var(--sf-f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:.25em;padding-block:14px}
@media (max-width:860px){.hero .photo{width:100%;max-width:480px}}