@font-face{font-family:"Ibarra Real Nova";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibarra-400.woff2) format("woff2")}
@font-face{font-family:"Ibarra Real Nova";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ibarra-400i.woff2) format("woff2")}
@font-face{font-family:"Ibarra Real Nova";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibarra-700.woff2) format("woff2")}
@font-face{font-family:"Source Code Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sourcecode-400.woff2) format("woff2")}
@font-face{font-family:"Source Code Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sourcecode-600.woff2) format("woff2")}

:root{
  --paper:#f3c7a8;
  --paper-deep:#e8b58a;
  --ink:#1c140e;
  --ink-soft:#5c4638;
  --ink-faint:#8a6d5c;
  --scrim:rgba(243,199,168,.92);
  --max:72rem;
  --rule:1px solid var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Ibarra Real Nova", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight:400;line-height:1.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-color:var(--paper);
}
body{min-height:100vh}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem}
.skip:focus{left:1rem;z-index:20}

/* Nameplate — a newspaper flag, not a logo-left bar */
.mast{text-align:center;padding:1.6rem 1.2rem .9rem}
.mark{margin:0;font-size:clamp(3.1rem, 10vw, 6.4rem);font-weight:700;line-height:.9;letter-spacing:-.03em}
.mark a{text-decoration:none;color:inherit}
.mark em{font-style:italic;font-weight:400;letter-spacing:0}
.flag-rule{border:0;border-top:var(--rule);border-bottom:var(--rule);height:5px;background:transparent;margin:.85rem auto .7rem;max-width:var(--max);width:calc(100% - 2rem)}
nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem 1.35rem;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;padding:0 1rem .2rem}
nav a{text-decoration:none}
nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.22em}

main{max-width:var(--max);margin:0 auto;padding:0 1rem 4rem}

/* Today's issue — the tool, above the fold */
.issue{text-align:center;padding:.6rem 0 2.2rem}
.when{font-family:"Source Code Pro", ui-monospace, monospace;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;margin:.7rem 0 0}
.listen-meta,.no{font-family:"Source Code Pro", ui-monospace, monospace;font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--ink-soft);margin:.25rem 0 0}
.no{margin-top:.85rem;color:var(--ink)}

.plate{margin:1.05rem auto 0;max-width:52rem;position:relative;border:var(--rule);background:var(--ink);box-shadow:0 .6rem 0 -.4rem rgba(28,20,14,.12)}
.plate img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;filter:saturate(1.02)}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--scrim);color:var(--ink);padding:1.1rem 1.25rem 1.15rem;text-align:left}
blockquote{margin:0;padding:0;border:0}
blockquote p{margin:0;font-style:italic;font-size:clamp(1.25rem, 2.7vw, 2.15rem);line-height:1.22;hanging-punctuation:first last}
.by{margin:.7rem 0 0;font-size:1.02rem;font-weight:700;letter-spacing:.01em}
.src{margin:.15rem 0 0;font-family:"Source Code Pro", ui-monospace, monospace;font-size:.68rem;letter-spacing:.04em;color:var(--ink-soft);line-height:1.45}

/* Typographic listening line — not a sticky bottom bar */
.deck{max-width:52rem;margin:0 auto;padding:1rem 0 0;text-align:left}
.playrow{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem 1rem;align-items:center}
button.play{width:2.7rem;height:2.7rem;border:var(--rule);background:var(--ink);color:var(--paper);cursor:pointer;padding:0;display:grid;place-items:center;font:inherit}
button.play svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block}
button.play[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.tmeta{min-width:0}
.tmeta .title{font-size:1.2rem;font-style:italic;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta .album{margin:.1rem 0 0;font-family:"Source Code Pro", ui-monospace, monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.times{font-family:"Source Code Pro", ui-monospace, monospace;font-size:.68rem;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap}
.bar{margin:.7rem 0 0;height:1.1rem;position:relative;cursor:pointer;background:transparent;border:0;padding:0;width:100%;appearance:none;display:block}
.bar:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);opacity:.25;transform:translateY(-50%)}
.bar .fill{position:absolute;left:0;top:50%;height:2px;background:var(--ink);transform:translateY(-50%);width:0}
.bar .knob{position:absolute;top:50%;width:.5rem;height:.5rem;border:0;background:var(--ink);transform:translate(-50%,-50%);left:0}
.actions{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1rem 0 0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.actions button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.actions button:hover{text-decoration-thickness:2px}
.status{min-height:1.2rem;margin:.7rem 0 0;font-family:"Source Code Pro", ui-monospace, monospace;font-size:.72rem;color:var(--ink-soft)}
.status[data-kind="err"]{color:#6b1d12}
.creditline{margin:1.1rem 0 0;font-size:.92rem;color:var(--ink-soft)}

/* Archive: dated typographic issues in three columns */
.band{border-top:var(--rule);margin:2.2rem 0 0;padding:2rem 0 0}
.band h2{font-family:"Source Code Pro", ui-monospace, monospace;font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;margin:0 0 1.6rem}
.issues{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 1.4rem}
.card{text-align:left;color:inherit;text-decoration:none;display:block}
.card:hover .card-q{text-decoration:underline;text-underline-offset:.15em}
.card .thumb{border:var(--rule);margin:0 0 .7rem;aspect-ratio:16/9;object-fit:cover;width:100%}
.card .d,.card .listen,.card .num{font-family:"Source Code Pro", ui-monospace, monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin:0;color:var(--ink-soft)}
.card .num{color:var(--ink);margin:.35rem 0 0}
.card-q{margin:.35rem 0 0;font-style:italic;font-size:1.05rem;line-height:1.3}
.card .who{margin:.35rem 0 0;font-weight:700;font-size:.95rem}
.card .more{margin:.45rem 0 0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

/* Sources as a printed bibliography */
.biblio{list-style:none;margin:0;padding:0;text-align:left}
.biblio li{padding:.7rem 0;border-top:var(--rule);font-size:1rem;line-height:1.4}
.biblio li:last-child{border-bottom:var(--rule)}
.biblio .qt{font-style:italic}
.biblio .cite{display:block;margin-top:.25rem;font-family:"Source Code Pro", ui-monospace, monospace;font-size:.68rem;letter-spacing:.03em;color:var(--ink-soft)}

/* Notes — colophon, not a FAQ accordion */
.notes{text-align:left;max-width:42rem;margin:0 auto}
.notes h2{text-align:center}
.note{margin:0 0 1.1rem}
.note dt{font-family:"Source Code Pro", ui-monospace, monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .25rem}
.note dd{margin:0;font-size:1.05rem}

footer{border-top:var(--rule);text-align:center;padding:2rem 1rem 3rem;font-size:.95rem}
footer p{margin:.35rem 0}
footer .endmark{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;margin:0 0 .6rem}

/* 404 */
.lost{text-align:center;padding:3rem 1.2rem 5rem}
.lost h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:700;margin:0 0 .6rem}
.lost p{margin:.4rem 0}

@media (max-width:1024px){
  .issues{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mast{padding:1.1rem .8rem .5rem}
  .mark{font-size:clamp(2.6rem, 16vw, 4.2rem)}
  nav{gap:.2rem .9rem;letter-spacing:.16em;font-size:.7rem}
  main{padding:0 .8rem 3rem}
  .plate figcaption{padding:.75rem .85rem .8rem;background:rgba(243,199,168,.95)}
  .plate img{aspect-ratio:auto;height:22rem;object-fit:cover}
  blockquote p{font-size:1.22rem}
  .mark{font-size:clamp(2.35rem, 14vw, 3.6rem)}
  .mast{padding:.85rem .7rem .25rem}
  .when{margin-top:.45rem}
  .playrow{grid-template-columns:auto 1fr auto;grid-template-rows:auto}
  .times{grid-column:auto;justify-self:end}
  .issues{grid-template-columns:1fr;gap:1.6rem}
}