/* Option C — Provincial broadcaster, 1979. Built on the shield's stripes:
   mountain / green / gold / brown, on cream paper. Alfa Slab One + Georgia. */

* { box-sizing: border-box; }

:root {
  --paper: #F3EAD6;
  --paper-2: #EADFC6;
  --ink: #2B1F14;
  --green: #009933;
  --gold: #CCCC66;
  --brown: #CC9966;
  --sky: #66CCFF;
  --pink: #FCA0A0;
  --rule: #b89a6a;
}

html { background: var(--paper); }
body {
  margin: 0;
  font: 16px/1.55 Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--paper);
}
a { color: #0b6aa8; }
img { max-width: 100%; height: auto; display: block; }

.slab { font-family: "Alfa Slab One", "Rockwell Extra Bold", Rockwell, Georgia, serif; font-weight: normal; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

/* the three-stripe band, edge to edge */
.band { display: block; width: 100%; height: 54px; }
.band span { display: block; height: 18px; }
.band .g { background: var(--green); }
.band .y { background: var(--gold); }
.band .b { background: var(--brown); }

/* ---- masthead ---- */
.mast { text-align: center; padding: 26px 0 22px; }
.mast img { width: 160px; margin: 0 auto 10px; }
.mast h1 {
  margin: 0;
  font-size: 54px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--pink);
}
.mast .sub {
  margin: 10px 0 0;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-size: 15px;
  color: #5a4630;
}
.mast .sub b { color: var(--green); }

/* ---- section headings ---- */
section { padding: 34px 0 6px; }
h2 {
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.05;
  color: var(--ink);
  border-bottom: 3px double var(--rule);
  padding-bottom: 8px;
}
h2 small {
  display: block;
  font: italic 15px Georgia, serif;
  color: #6a5540;
  margin-top: 4px;
}

/* ---- program guide ---- */
.guide {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.guide caption {
  caption-side: top;
  text-align: left;
  font-size: 22px;
  padding: 0 0 8px;
  color: var(--ink);
}
.guide caption em { font: italic 15px Georgia, serif; color: #6a5540; }
.guide th, .guide td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.guide th {
  background: var(--ink);
  color: var(--paper);
  font-variant: small-caps;
  letter-spacing: 1.5px;
  font-weight: normal;
  font-size: 14px;
}
.guide tbody tr:nth-child(even) td { background: var(--paper-2); }
.guide td.time { white-space: nowrap; font-family: "Alfa Slab One", Georgia, serif; font-size: 15px; width: 1%; }
.guide td.prog { width: 30%; }
.guide td.prog b { display: block; font-family: "Alfa Slab One", Georgia, serif; font-weight: normal; font-size: 17px; line-height: 1.2; }
.guide td.prog small { display: block; font-style: italic; color: #6a5540; font-size: 13px; }
.guide td .thumb { width: 120px; margin-top: 6px; border: 2px solid var(--ink); }
.guide tr.break td { background: var(--gold); font-style: italic; }
.guide tr.break td b { font-style: normal; }
.guide tr.break td.time { font-family: Georgia, serif; }

.tonight {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--brown);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tonight .blurb h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.1; }
.tonight .blurb p { margin: 0 0 10px; }
.tonight .blurb .also { border-top: 1px solid var(--rule); padding-top: 10px; font-size: 14px; }
.tonight .blurb .also a { display: block; margin-bottom: 4px; }

/* ---- news crew ---- */
.ovals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 8px;
  padding: 6px 0 14px;
}
.ovals figure { margin: 0; width: 110px; text-align: center; }
.ovals img {
  width: 100px;
  height: 128px;
  object-fit: cover;
  margin: 0 auto 6px;
  border-radius: 50% / 40%;
  border: 6px solid var(--brown);
  background: #ddd;
}
.ovals figcaption b { display: block; font-family: "Alfa Slab One", Georgia, serif; font-weight: normal; font-size: 13px; line-height: 1.15; }
.ovals figcaption i { display: block; font-size: 12px; color: #6a5540; }

.bios {
  column-count: 2;
  column-gap: 34px;
  column-rule: 1px solid var(--rule);
  margin-top: 6px;
  font-size: 15px;
}
.bios h3 {
  break-after: avoid;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.15;
}
.bios h3 i { display: block; font: italic 13px Georgia, serif; color: #6a5540; }
.bios p { margin: 0 0 14px; break-inside: avoid; }
.bios p q { font-style: italic; }
.bios .hear { color: #5a4630; }
.bios .hear:before { content: "\2014  "; }

/* ---- on location ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.grid figure { margin: 0; border-top: 1px solid var(--rule); padding-top: 8px; }
.grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--ink); }
.grid figcaption {
  margin-top: 6px;
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size: 13px;
  color: #5a4630;
}

/* ---- footer stripes ---- */
footer { margin-top: 34px; }
footer .stripe { padding: 16px 0; }
footer .brown { background: var(--brown); color: var(--ink); }
footer .goldst { background: var(--gold); color: var(--ink); }
footer .green { background: var(--green); color: #fff; }
footer p { margin: 0; max-width: 78ch; }
footer .brown p { font-size: 14px; }
footer .goldst ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
footer .goldst a { color: var(--ink); font-family: "Alfa Slab One", Georgia, serif; text-decoration: none; font-size: 15px; }
footer .goldst a:hover { text-decoration: underline; }
footer .green .slab { font-size: 20px; }
footer .green small { display: block; margin-top: 4px; font-size: 13px; opacity: 0.9; }
footer .green a { color: #fff; }

/* ---- phone ---- */
@media (max-width: 720px) {
  .mast h1 { font-size: 36px; }
  .mast img { width: 120px; }
  .mast .sub { letter-spacing: 1px; font-size: 14px; }
  h2 { font-size: 26px; }
  .guide th, .guide td { padding: 8px 8px; font-size: 14px; }
  .guide td.prog { width: auto; }
  .guide td .thumb { width: 90px; }
  .tonight { grid-template-columns: minmax(0, 1fr); }
  .bios { column-count: 1; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ovals figure { width: 96px; }
  .ovals img { width: 88px; height: 112px; border-width: 4px; }
}