/* Hometown Trades Journal: one shared stylesheet.
   Look taken from the publication's own art: cream newsprint, near-black ink, one rust red,
   Georgia-metric serif (Gelasio) for the masthead and text, Archivo caps for the labels. */

@font-face{font-family:Gelasio;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/gelasio-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Gelasio;font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/gelasio-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Gelasio;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/gelasio-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Gelasio;font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/gelasio-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-latin-700-normal.woff2) format("woff2")}

:root{
  --paper:#f2ead8;
  --paper-2:#e6d9bb;
  --paper-3:#d6c59d;
  --ink:#16120e;
  --ink-2:#251e17;
  --ink-3:#3a3025;
  --ink-0:#0d0a07;
  --rust:#b4371c;
  --rust-d:#8c2812;
  --rust-lite:#f08463;
  --muted:#4d4437;
  --muted-ink:#d4c9b2;
  --serif:Gelasio,Georgia,"Times New Roman",serif;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 .22 0 0 0 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--rust);color:var(--paper)}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.on-ink :focus-visible,.s-ink :focus-visible,.s-rust :focus-visible{outline-color:var(--rust-lite)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--paper);padding:.7rem 1rem;font:700 .85rem var(--sans);transition:top .2s}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* surfaces: each step is visibly different */
.s-paper{background:var(--grain),var(--paper)}
.s-paper-2{background:var(--grain),linear-gradient(180deg,var(--paper-2),#dfd0ac)}
.s-ink{background:var(--grain),radial-gradient(120% 90% at 85% 0,var(--ink-3) 0,var(--ink) 55%);color:var(--paper)}
.s-rust{background:var(--grain),linear-gradient(180deg,#bd3b1e,#9e2e14);color:var(--paper)}
.s-ink-0{background:var(--ink-0);color:var(--muted-ink)}
section{padding-block:clamp(3.5rem,8vw,6rem)}

/* dateline strip and header */
.dateline{background:var(--ink);color:var(--muted-ink);font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.dateline .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:.7rem}
.dateline span:last-child{color:var(--rust-lite)}
@media(max-width:560px){.dateline span:last-child{display:none}}
.bar{background:var(--grain),var(--paper);border-bottom:1px solid rgba(22,18,14,.25);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:700 1.05rem/1.1 var(--serif)}
.brand img{width:38px;height:38px;border-radius:50%;transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-14deg) scale(1.06)}
.brand b{color:var(--rust-d);font-weight:700}
@media(max-width:560px){.brand span{display:none}}
.nav{display:flex;gap:clamp(.9rem,3vw,2.2rem)}
.nav a{font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:.7rem .1rem;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:3px;background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}

/* buttons: offset ink shadow, like a letterpress block */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.8rem 1.35rem;background:var(--rust);color:var(--paper);border:2px solid var(--ink);font:700 .8rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);background:var(--rust-d)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn svg{width:1em;height:1em;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem 1.25rem}

/* masthead */
.mast{padding-block:clamp(2rem,4vw,3.25rem) clamp(2.25rem,4vw,3.5rem);text-align:center;position:relative;overflow:hidden}
.mast::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 0,rgba(255,255,255,.55),transparent 70%);pointer-events:none}
.mast .wrap{position:relative}
.dbl{display:block;height:11px;border-top:7px solid var(--ink);border-bottom:2px solid var(--ink);transform-origin:center;animation:draw 1.3s var(--ease) .1s both}
.dbl--b{border-top-width:2px;border-bottom-width:7px;animation-delay:.35s}
@keyframes draw{from{transform:scaleX(0)}}
.mast__kicker{font:700 clamp(.62rem,1.7vw,.82rem)/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding-block:1rem .9rem;color:var(--ink)}
.mast h1{font:700 clamp(2.9rem,8.6vw,6rem)/1.02 var(--serif);letter-spacing:-.012em;text-wrap:balance;padding-block:.55rem .75rem;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.mast h1 em{font-style:normal;color:var(--rust)}
.mast__line{font:italic 400 clamp(1.15rem,2.6vw,1.65rem)/1.35 var(--serif);padding-block:.9rem .3rem;border-top:1px solid rgba(22,18,14,.5);text-wrap:balance}
.mast__body{max-width:44rem;margin:.6rem auto 1.9rem;color:var(--muted);text-wrap:pretty}
.mast .btn-row{justify-content:center;margin-bottom:2.2rem}

/* ticker */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-block:1px solid var(--ink-3);box-shadow:0 6px 18px rgba(22,18,14,.28);position:relative;z-index:2}
.ticker__track{display:flex;width:max-content;animation:tick 70s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;flex:none}
.ticker__item{display:flex;align-items:center;padding:1rem 0;font:600 .76rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.ticker__item::after{content:"";width:.5rem;height:.5rem;margin-inline:1.6rem;background:var(--rust-lite);transform:rotate(45deg)}
@keyframes tick{to{transform:translateX(-50%)}}

/* section flag: a rule with the section name in it */
.flag{display:flex;align-items:center;gap:1.1rem;font:700 .78rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin-bottom:2rem}
.flag::after{content:"";flex:1;height:7px;border-top:2px solid currentColor;border-bottom:1px solid currentColor;opacity:.85}
h2.flag{font-size:.78rem}

/* lead story + side column */
.lead{display:grid;gap:3rem;align-items:start}
@media(min-width:960px){.lead{grid-template-columns:minmax(0,7fr) minmax(0,4.2fr);gap:4.5rem}}
.lead__story h3{font:700 clamp(2.1rem,4.6vw,4.2rem)/1.06 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.lead__story h3 a{text-decoration:none;background:linear-gradient(var(--rust),var(--rust)) 0 100%/0 4px no-repeat;transition:background-size .45s var(--ease)}
.lead__story h3 a:hover{background-size:100% 4px}
.byline{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:1.1rem;font:600 .74rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.byline b{color:var(--ink);font-weight:700}
.lead__story .sum{margin-top:1.5rem;font-size:1.3rem;max-width:40rem;text-wrap:pretty}
.dl{font:700 .82em/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust-d)}
.dl::after{content:"";display:inline-block;width:1.4em;height:2px;background:var(--rust);vertical-align:middle;margin:0 .7em .15em}
.lead__story .btn-row{margin-top:1.8rem}
.lead__story audio{display:block;width:100%;max-width:40rem;margin-top:1.6rem}
.empty h2,.empty h3{font:700 clamp(2rem,4.2vw,3.2rem)/1.1 var(--serif);text-wrap:balance}
.empty p{margin-top:1.2rem;font-size:1.2rem;max-width:38rem;text-wrap:pretty}
.empty .btn-row{margin-top:1.8rem}

/* the cover as a stack of printed sheets */
.sheet{position:relative;width:min(100%,24rem);margin:0 auto 2.5rem;aspect-ratio:1;isolation:isolate}
.sheet::before,.sheet::after{content:"";position:absolute;inset:0;background:var(--grain),var(--paper-3);border:1px solid rgba(22,18,14,.35);z-index:-1;box-shadow:0 10px 24px rgba(22,18,14,.22)}
.sheet::before{transform:rotate(-5deg) translate(-10px,6px);animation:fan1 1.4s var(--ease) .2s both}
.sheet::after{transform:rotate(4deg) translate(12px,4px);background:var(--grain),var(--paper-2);animation:fan2 1.4s var(--ease) .3s both}
.sheet img{width:100%;height:100%;object-fit:cover;border:1px solid rgba(22,18,14,.4);box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 28px 50px -12px rgba(22,18,14,.5),0 10px 18px rgba(22,18,14,.25);transform:rotate(-1.2deg);transition:transform .6s var(--ease);animation:settle 1.2s var(--ease) both}
.sheet:hover img{transform:rotate(0) scale(1.02)}
@keyframes fan1{from{transform:rotate(0) translate(0,0)}}
@keyframes fan2{from{transform:rotate(0) translate(0,0)}}
@keyframes settle{from{transform:rotate(1.4deg) scale(1.05)}}

/* listen and watch panel */
.lead__side .sheet{width:min(100%,19rem);margin-bottom:2.2rem}
.panel{background:var(--grain),linear-gradient(160deg,var(--ink-3),var(--ink));color:var(--paper);padding:1.9rem 1.7rem 1.4rem;box-shadow:8px 8px 0 var(--rust),0 30px 50px -20px rgba(22,18,14,.55);position:relative}
.panel h3{font:700 1.5rem/1.2 var(--serif);margin-bottom:.4rem}
.panel > p{font-size:.95rem;color:var(--muted-ink);margin-bottom:.6rem}
.panel li{border-top:1px solid rgba(242,234,216,.22)}
.panel li:first-child{margin-top:1rem}
.panel a{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center;padding:1rem .2rem;text-decoration:none;transition:padding .25s var(--ease),background .25s}
.panel a:hover{padding-left:.8rem;background:rgba(242,234,216,.07)}
.panel a b{font:700 1.08rem/1.25 var(--serif)}
.panel a small{grid-column:1;font:600 .68rem/1.4 var(--sans);letter-spacing:.06em;color:var(--muted-ink);overflow-wrap:anywhere}
.panel a svg{grid-row:1/3;grid-column:2;width:1.2rem;height:1.2rem;color:var(--rust-lite);transition:transform .3s var(--ease)}
.panel a:hover svg{transform:translateX(5px)}

/* episode rows */
.rows{margin-top:3.5rem}
.rows__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.rows__head h3{font:700 1.5rem/1.2 var(--serif)}
.link{font:700 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--rust-d);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:.35rem;transition:background-size .35s var(--ease)}
.link:hover{background-size:100% 2px}
.row{display:grid;gap:.5rem 2rem;padding:1.7rem 1rem;border-top:1px solid rgba(22,18,14,.45);transition:background .25s}
.row:last-child{border-bottom:1px solid rgba(22,18,14,.45)}
.row:hover{background:rgba(255,255,255,.4)}
@media(min-width:860px){.row{grid-template-columns:8.5rem minmax(0,1fr) auto;align-items:start}}
.row__date{font:700 .74rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:.5rem}
.row h2,.row h3{font:700 1.6rem/1.2 var(--serif);text-wrap:balance}
.row h2 a,.row h3 a{text-decoration:none;background:linear-gradient(var(--rust),var(--rust)) 0 100%/0 3px no-repeat;transition:background-size .4s var(--ease)}
.row h2 a:hover,.row h3 a:hover,.row:hover h2 a,.row:hover h3 a{background-size:100% 3px}
.row p{margin-top:.6rem;max-width:42rem;text-wrap:pretty}
.row .co{font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row__links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding-top:.6rem}
@media(min-width:860px){.row__links{flex-direction:column;align-items:flex-end;gap:.7rem}}

/* three columns divided by hairlines */
.intro{display:grid;gap:1.5rem 4rem;margin-bottom:3rem}
@media(min-width:900px){.intro{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end}}
.intro h2{font:700 clamp(2rem,4.4vw,3.4rem)/1.08 var(--serif);text-wrap:balance}
.intro p{color:var(--muted);font-size:1.1rem}
.cols{display:grid;border-top:7px double var(--ink)}
@media(min-width:860px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{padding:2rem clamp(1rem,2.4vw,2.2rem) 1rem;position:relative}
.col:first-child{padding-left:0}@media(max-width:859px){.col{padding-inline:0}}
.col:last-child{padding-right:0}
@media(min-width:860px){.col+.col::before{content:"";position:absolute;left:0;top:1.6rem;bottom:.4rem;width:1px;background:var(--ink);transform-origin:top;transition:transform 1.1s var(--ease) .15s}}
@media(max-width:859px){.col+.col{border-top:1px solid rgba(22,18,14,.45)}}
.col h3{font:700 1.55rem/1.2 var(--serif);margin-bottom:.7rem}
.col p{color:var(--muted);font-size:1.1rem}

/* hosts */
.hosts h2{font:700 clamp(2rem,4.4vw,3.4rem)/1.08 var(--serif);max-width:20ch;text-wrap:balance;margin-bottom:3rem}
.hosts ul{display:grid;gap:3rem 2.5rem}
@media(min-width:860px){.hosts ul{grid-template-columns:repeat(3,1fr)}}
.who{border-top:2px solid rgba(242,234,216,.5);padding-top:1.2rem;position:relative}
.who__i{display:block;font:italic 700 clamp(6rem,11vw,8.5rem)/.8 var(--serif);color:var(--rust-lite);margin:.5rem 0 1rem;letter-spacing:-.02em}
.who h3{font:700 1.7rem/1.2 var(--serif)}
.who .role{font:600 .72rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rust-lite);margin:.3rem 0 .9rem}
.who p{color:var(--muted-ink)}

/* sign-off */
.signoff{padding-block:clamp(4rem,9vw,7rem);text-align:center;position:relative;overflow:hidden}
.signoff p{font:italic 700 clamp(1.7rem,4.3vw,3.4rem)/1.2 var(--serif);max-width:24ch;margin-inline:auto;text-wrap:balance;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.signoff .dbl{border-color:var(--paper);width:min(100%,38rem);margin:2.2rem auto 0;animation:none}

/* footer */
.foot{padding-block:3rem 2.2rem;font:400 .95rem/1.6 var(--serif)}
.foot .wrap{display:grid;gap:2rem}
@media(min-width:860px){.foot .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.foot .brand{color:var(--paper);font-size:1.25rem}
.foot h2{font:700 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rust-lite);margin-bottom:1rem}
.foot li+li{margin-top:.5rem}
.foot a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
.foot a:hover{color:var(--paper);background-size:100% 1px}
.foot .fine{grid-column:1/-1;border-top:1px solid rgba(242,234,216,.18);padding-top:1.4rem;font-size:.85rem}

/* inner pages */
.head-grid{display:grid;gap:1.5rem 3rem;align-items:center}
@media(min-width:900px){.head-grid{grid-template-columns:minmax(0,1fr) 19rem}}
@media(max-width:899px){.head-grid .sheet{display:none}}
.head-grid .sheet{margin:1rem auto 1.5rem}
.page-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.page-head h1{font:700 clamp(2.4rem,6.4vw,4.6rem)/1.05 var(--serif);letter-spacing:-.012em;text-wrap:balance;max-width:18ch;padding-block:1.4rem 1rem}
.page-head .mast__line{max-width:46rem;border-top:0;padding-top:.4rem;text-align:left}
.prose{display:grid;gap:2.2rem 5rem}
@media(min-width:960px){.prose{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.prose h2{font:700 clamp(1.7rem,3.2vw,2.4rem)/1.12 var(--serif);text-wrap:balance}
.prose .body{display:grid;gap:1.25rem;font-size:1.15rem;max-width:42rem}
.prose .body p{text-wrap:pretty}
.prose .body p:first-child::first-letter{font:700 4.3rem/.8 var(--serif);float:left;padding:.28rem .6rem 0 0;color:var(--rust-d)}
.banner{margin-top:3rem}
.banner img{width:100%;aspect-ratio:3.6/1;object-fit:cover;object-position:50% 50%;border:1px solid rgba(22,18,14,.5);box-shadow:0 22px 40px -14px rgba(22,18,14,.45)}
.banner figcaption{font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}
.where{display:grid;gap:2.5rem 4.5rem;align-items:start}
@media(min-width:960px){.where{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.where h2{font:700 clamp(1.8rem,3.6vw,2.7rem)/1.12 var(--serif);text-wrap:balance}
.where > div > p{margin-top:1rem;color:var(--muted);font-size:1.1rem;max-width:34rem}
.nf{padding-block:clamp(4rem,10vw,8rem);text-align:center}
.nf h1{font:700 clamp(2.4rem,7vw,5rem)/1.05 var(--serif);text-wrap:balance}
.nf p{margin:1.2rem auto 2rem;max-width:34rem;font-size:1.2rem}
.nf .btn-row{justify-content:center}

/* motion on scroll: hidden state only exists once the script has added js-rv */
html.js-rv .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
html.js-rv .rv.in{opacity:1;transform:none}
html.js-rv .rv-row{opacity:0;transform:translateX(-34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*120ms)}
html.js-rv .rv-row.in{opacity:1;transform:none}
html.js-rv .signoff p{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease)}
html.js-rv .signoff.in p{clip-path:inset(-.2em 0 -.2em 0)}
html.js-rv .rv-blur .who__i{opacity:0;filter:blur(14px);transform:scale(.82);transform-origin:left bottom;transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*160ms)}
html.js-rv .rv-blur.in .who__i{opacity:1;filter:none;transform:none}
html.js-rv .cols.rv-rule .col+.col::before{transform:scaleY(0)}
html.js-rv .cols.rv-rule.in .col+.col::before{transform:scaleY(1)}
html.js-rv .cols.rv-rule .col{opacity:0;transition:opacity .9s var(--ease);transition-delay:calc(var(--i,0)*140ms)}
html.js-rv .cols.rv-rule.in .col{opacity:1}

@media print{.dateline,.bar,.ticker,.sheet{display:none}}