/* WERH's page takes its visual cues from mid-century radio advertising and the station's own printed pieces. */
.werh-body { --radio-ink:#162b2d; --radio-red:#a5372b; --radio-gold:#d69b38; --radio-paper:#f3e7cf; --radio-rule:#b9a98a; background:var(--radio-paper); color:var(--radio-ink); }
.radio-masthead { position:relative; padding:28px 24px 31px; text-align:center; background:#efe0bd; border-bottom:5px double var(--radio-ink); }
.radio-back { position:absolute; left:max(24px,calc((100vw - 1120px)/2)); top:34px; color:var(--radio-ink); font:700 12px/1 Arial,sans-serif; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.radio-back:hover,.radio-back:focus-visible { color:var(--radio-red); }
.radio-ident { display:flex; align-items:center; flex-direction:column; }
.ident-city { font:700 12px/1.4 Arial,sans-serif; letter-spacing:.3em; text-transform:uppercase; }
.ident-call { margin:0; font:900 clamp(62px,10vw,112px)/.88 Impact,"Arial Narrow",sans-serif; letter-spacing:.035em; color:var(--radio-red); text-shadow:2px 2px 0 #f7f0e2,4px 4px 0 var(--radio-ink); }
.ident-frequency { margin-top:12px; font:700 17px/1 Arial,sans-serif; letter-spacing:.18em; }
.ident-frequency i { padding:0 8px; color:var(--radio-red); font-style:normal; }
.ident-tagline { margin-top:8px; font:italic 17px/1.2 Georgia,serif; }
.radio-dial { display:block; width:min(100%,650px); height:auto; margin:17px auto 0; filter:drop-shadow(0 5px 3px rgba(22,43,45,.2)); }
.radio-page { max-width:1120px; width:calc(100% - 48px); margin:0 auto; padding:0 0 58px; }
.radio-opening { display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; align-items:center; padding:58px 0 46px; }
.opening-copy .eyebrow,.eyebrow { margin:0 0 14px; color:var(--radio-red); font:700 11px/1.4 Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.opening-copy h1 { margin:0; font-size:clamp(39px,5.2vw,64px); line-height:.98; letter-spacing:-.045em; }
.opening-copy>p:last-child { max-width:470px; margin:20px 0 0; font-size:19px; line-height:1.58; }
.opening-photo { margin:0; padding:10px; border:1px solid #8b806a; background:#e8d8b9; box-shadow:8px 8px 0 rgba(22,43,45,.11); transform:rotate(.45deg); }
.opening-photo img { display:block; width:100%; max-height:520px; object-fit:cover; object-position:center 52%; filter:sepia(.13) contrast(.96); }
.opening-photo figcaption,.photo-grid figcaption,.artifact-card figcaption,.performer-feature figcaption { padding:9px 3px 0; color:#675f50; font:italic 12px/1.45 Georgia,serif; }
.broadcast-strip { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:13px 25px; padding:15px 10px; border-top:1px solid var(--radio-ink); border-bottom:1px solid var(--radio-ink); background:#e9d9b9; font:700 11px/1.3 Arial,sans-serif; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.broadcast-strip b { color:var(--radio-red); font-size:14px; }
.story-section { display:grid; grid-template-columns:170px minmax(0,1fr); gap:38px; padding:54px 0 58px; border-bottom:1px solid var(--radio-rule); }
.section-marker { padding-top:8px; color:var(--radio-red); font:italic 28px/1 Georgia,serif; }
.section-marker span { display:block; margin-top:8px; color:#756b58; font:700 10px/1.3 Arial,sans-serif; letter-spacing:.17em; }
.story-body h2 { margin:0 0 22px; font-size:clamp(34px,4.6vw,54px); line-height:1.02; letter-spacing:-.04em; }
.origin-columns { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.origin-columns p,.wide-copy { margin:0; color:#393d37; font-size:17px; line-height:1.7; }
.origin-columns a { color:var(--radio-red); text-underline-offset:3px; }
.call-letter-note { max-width:790px; margin-top:22px; padding:16px 19px; border-left:4px solid var(--radio-gold); background:rgba(233,217,185,.65); color:#4a483e; font-size:14px; line-height:1.65; }
.call-letter-note strong { display:block; margin-bottom:3px; color:var(--radio-red); font:800 11px/1.4 Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.call-letter-note a { color:var(--radio-red); text-underline-offset:3px; }
.artifact-card { width:min(100%,590px); margin:30px 0 0; padding:10px; background:#e6d5b4; }
.artifact-card img { display:block; width:100%; height:auto; }
.voices-section { background-image:radial-gradient(rgba(93,79,54,.09) .65px,transparent .65px); background-size:5px 5px; }
.wide-copy { max-width:790px; }
.oral-history { position:relative; margin:32px 0 40px; padding:24px 28px 20px 68px; border-left:5px solid var(--radio-red); background:#e9d9b9; }
.quote-mark { position:absolute; top:11px; left:20px; color:var(--radio-red); font:64px/.9 Georgia,serif; }
.oral-history blockquote { margin:0; font-size:clamp(20px,2.5vw,27px); font-style:italic; line-height:1.4; }
.oral-history p { margin:11px 0 0; color:#655d4e; font:700 10px/1.4 Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.performer-feature { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(190px,.85fr); gap:28px; align-items:center; }
.performer-feature figure { margin:0; padding:8px; background:#e6d5b4; }
.performer-feature img { display:block; width:100%; max-height:430px; object-fit:cover; object-position:center 35%; }
.performer-note { padding:20px 0; }
.note-stamp { display:inline-block; padding:7px 10px; transform:rotate(-3deg); border:1px solid var(--radio-red); color:var(--radio-red); font:900 11px/1 Arial,sans-serif; letter-spacing:.2em; }
.performer-note p { margin:20px 0 0; font-size:22px; line-height:1.45; }
.studio-section { padding-top:55px; }
.photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:31px; align-items:start; }
.photo-grid figure { min-width:0; margin:0; padding:8px 8px 12px; background:#e8d8b9; box-shadow:0 5px 13px rgba(35,32,23,.1); }
.photo-grid figure:nth-child(3n+1) { transform:rotate(-.35deg); }
.photo-grid figure:nth-child(3n+2) { transform:rotate(.3deg); }
.photo-grid img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#d2c5aa; filter:sepia(.07) contrast(.98); }
.photo-grid .photo-wide { grid-column:1/-1; }
.photo-grid .photo-wide img { aspect-ratio:16/8; }
.carmol-grid img,.photo-grid.carmol-grid .photo-wide img { height:auto; max-height:430px; aspect-ratio:auto; object-fit:contain; }
.keepsake-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.demolition-photo { margin-top:8px !important; }
.source-note { margin:42px auto 30px; max-width:790px; padding:22px 25px; border:1px solid var(--radio-rule); background:rgba(233,217,185,.48); }
.source-note p { margin:0; color:#4f4b40; font-size:14px; line-height:1.6; }
.source-note a { display:inline-block; margin-top:10px; color:var(--radio-red); font:700 12px/1.4 Arial,sans-serif; letter-spacing:.04em; }
.video-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:25px; }
.video-links a { display:grid; grid-template-columns:34px 1fr 16px; align-items:center; gap:11px; min-height:76px; padding:13px 15px; border:1px solid var(--radio-rule); background:#e9d9b9; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.video-links a:hover,.video-links a:focus-visible { background:#ead3a3; transform:translateY(-2px); }
.video-links .first-upload { border:2px solid var(--radio-red); background:#f0dfbd; }
.video-links .first-upload small { color:var(--radio-red); }
.play-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--radio-red); border-radius:50%; color:var(--radio-red); font:12px/1 Arial,sans-serif; }
.video-links small { display:block; margin-bottom:5px; color:#756b58; font:700 9px/1 Arial,sans-serif; letter-spacing:.17em; }
.video-links strong { display:block; font-size:15px; line-height:1.3; }
.watch-mark { justify-self:end; color:var(--radio-red); font:18px/1 Arial,sans-serif; }
.radio-page .return-link { display:table; margin:0 auto; padding:13px 22px; color:var(--radio-paper); background:var(--radio-ink); font:700 11px/1 Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.radio-page .return-link:hover,.radio-page .return-link:focus-visible { background:var(--radio-red); }

@media (max-width:760px) {
  .radio-back { position:static; display:inline-block; margin-bottom:18px; }
  .radio-masthead { padding-top:19px; }
  .radio-page { width:calc(100% - 32px); }
  .radio-opening { grid-template-columns:1fr; gap:25px; padding:38px 0 31px; }
  .opening-copy h1 { font-size:clamp(41px,11vw,59px); }
  .opening-copy>p:last-child { font-size:17px; }
  .opening-photo { transform:none; }
  .broadcast-strip { gap:10px 13px; font-size:9px; }
  .story-section { grid-template-columns:1fr; gap:17px; padding:38px 0 42px; }
  .section-marker { display:flex; align-items:baseline; gap:12px; padding:0; font-size:23px; }
  .section-marker span { margin:0; }
  .origin-columns { grid-template-columns:1fr; gap:13px; }
  .origin-columns p,.wide-copy { font-size:16px; }
  .performer-feature { grid-template-columns:1fr; gap:14px; }
  .performer-note { padding:0 4px; }
  .performer-note p { margin-top:14px; font-size:20px; }
  .photo-grid { gap:15px; margin-top:23px; }
  .photo-grid figure { padding:5px 5px 9px; }
  .photo-grid figcaption,.opening-photo figcaption,.performer-feature figcaption { font-size:11px; }
  .video-links { grid-template-columns:1fr; }
  .source-note { margin-top:30px; padding:17px; }
}
@media (max-width:480px) {
  .ident-call { font-size:70px; }
  .ident-frequency { font-size:14px; }
  .ident-tagline { font-size:15px; }
  .broadcast-strip { flex-direction:column; gap:7px; }
  .broadcast-strip b { display:none; }
  .photo-grid,.keepsake-grid { grid-template-columns:1fr; }
  .photo-grid .photo-wide { grid-column:auto; }
  .photo-grid .photo-wide img { aspect-ratio:4/3; }
}