/* ============================================================
       Palette: Sundowner evening — warm amber, tobacco parchment,
       forest green, red laterite dust, aged ivory
    ============================================================ */
:root {
  --amber: #c8732a;
  --amber-lt: #e8a44a;
  --amber-glow: #f5c97a;
  --parchment: #f2e8d0;
  --ivory: #faf5e8;
  --green-dark: #1a3d25;
  --green-mid: #2e6040;
  --green-lt: #4e8a5c;
  --laterite: #8b3a2a;
  --tobacco: #7c5a2e;
  --ink: #2a2118;
  --ink-faded: #5c4a30;
  --rule: #b8985a;

  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "Lora", Georgia, serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--parchment);
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
}

/* ============================================================
       MASTHEAD
    ============================================================ */
.masthead {
  background: var(--green-dark);
  background-image: linear-gradient(
    180deg,
    #0e2818 0%,
    var(--green-dark) 60%,
    #1f4a2d 100%
  );
  color: var(--parchment);
  text-align: center;
  padding: 0;
  border-bottom: 4px solid var(--amber);
  position: relative;
  overflow: hidden;
}

/* Decorative silhouette stripe */
.masthead::after {
  content: "";
  display: block;
  height: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 42' preserveAspectRatio='none'%3E%3Cpath fill='%230e2818' d='M0 42 L0 28 Q20 28 25 22 Q28 18 30 18 Q34 18 36 14 Q38 10 40 8 Q43 4 46 6 Q50 8 54 6 Q58 4 62 8 Q66 12 68 10 Q72 6 76 10 Q78 12 80 10 Q84 6 90 10 Q96 14 100 12 Q110 6 120 12 Q130 18 140 14 Q150 10 160 14 Q165 16 170 14 Q180 10 190 16 Q200 22 210 18 Q218 14 224 18 Q230 22 236 20 Q244 16 250 20 Q256 24 262 20 Q270 14 280 20 Q286 24 290 22 Q296 18 302 22 Q310 28 320 24 Q330 18 340 24 Q348 28 354 24 Q362 18 370 24 Q380 30 390 26 Q398 22 404 26 Q412 30 420 26 Q430 20 440 26 Q450 32 460 28 Q468 24 474 28 Q480 32 486 28 Q494 22 502 28 Q512 34 520 30 Q526 26 530 30 Q536 34 542 30 Q550 24 560 30 Q570 36 580 32 Q590 26 600 32 Q610 38 618 34 Q624 30 628 34 Q634 38 640 34 Q648 28 656 34 Q664 40 670 36 Q676 32 682 36 Q690 40 698 36 Q706 30 714 36 Q720 42 730 38 Q740 32 750 38 Q760 42 770 38 Q778 34 784 38 Q792 42 800 38 Q810 32 820 38 Q830 44 840 40 Q850 34 860 40 Q870 44 880 40 Q890 34 900 40 Q910 46 920 42 Q930 36 940 42 Q948 46 954 42 Q962 36 970 42 L980 42 L1200 42 L1200 0 L0 0 Z'/%3E%3C/svg%3E");
  background-size: 1200px 42px;
  background-repeat: repeat-x;
  margin-top: -1px;
}

.masthead-inner {
  padding: 2.5rem 1.5rem 0.5rem;
}

.site-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber-lt);
  margin-bottom: 0.6rem;
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  color: var(--amber-glow);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.5);
}

.site-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: #b8d4b0;
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

.masthead-rule {
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  margin: 1.1rem auto 0.8rem;
}

.masthead-motto {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8fb89a;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 2rem;
}

/* ============================================================
       LAYOUT
    ============================================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

.main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  padding: 2rem 0 3rem;
}

@media (max-width: 780px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
       SECTION HEADERS
    ============================================================ */
.section-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  white-space: nowrap;
}

.section-head::after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule), transparent);
}

/* ============================================================
       CARD / BOX
    ============================================================ */
.card {
  background: var(--ivory);
  border: 1px solid #d8c8a0;
  border-radius: 2px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.8rem;
  box-shadow: 1px 2px 6px rgba(60, 40, 10, 0.08);
}

/* ============================================================
       HISTORY TV
    ============================================================ */
.tv-wrap {
  background: #1a1a14;
  border: 6px solid #3a3220;
  border-radius: 8px 8px 16px 16px;
  box-shadow:
    0 0 0 2px #5a4a28,
    4px 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(0, 0, 0, 0.6);
  margin-bottom: 1rem;
  position: relative;
}

.tv-screen {
  position: relative;
  padding-top: 56.25%;
  background: #000;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.tv-screen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  object-fit: cover;
}

.tv-custom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tv-btn {
  background: none;
  border: none;
  color: #887755;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  line-height: 1;
  transition: color 0.15s;
}

.tv-btn:hover {
  color: var(--amber-lt);
}

/* CRT scanline overlay */
.tv-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 10;
}

.tv-bezel {
  background: linear-gradient(180deg, #2e2a1e 0%, #1e1c14 100%);
  padding: 0.5rem 0.8rem 0.7rem;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tv-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: #887755;
  text-transform: uppercase;
}

.tv-knobs {
  display: flex;
  gap: 0.5rem;
}

.tv-knob {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #5a4a30, #2a2010);
  border-radius: 50%;
  border: 1px solid #3a3020;
}

/* ============================================================
       RADIO PLAYER
    ============================================================ */
.radio-wrap {
  background: linear-gradient(160deg, #3a2e1e, #241e10);
  border: 3px solid #5a4820;
  border-radius: 6px;
  padding: 1rem 1.1rem 0.8rem;
  box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.35);
  margin-bottom: 1.8rem;
}

.radio-head {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--amber-glow);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.4rem;
}

.radio-freq {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: #a8e840;
  text-align: center;
  text-shadow: 0 0 8px rgba(168, 232, 64, 0.5);
  letter-spacing: 0.12em;
  margin-bottom: 0.7rem;
  font-weight: bold;
}

.radio-track-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--amber-lt);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.7rem;
  min-height: 1em;
  letter-spacing: 0.04em;
  font-style: italic;
}

.radio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.radio-btn {
  background: #4a3a1a;
  border: 1px solid #7a6030;
  color: var(--amber-glow);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s;
}

.radio-btn:hover {
  background: #6a5020;
}
.radio-btn.play-btn {
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
}

.radio-progress-wrap {
  background: #1a1408;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 0.35rem;
  cursor: pointer;
  overflow: hidden;
}

.radio-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-glow));
  border-radius: 3px;
  transition: width 0.3s linear;
}

.radio-time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #6a5a30;
  text-align: center;
}

/* ============================================================
       OBITUARY SLIDER
    ============================================================ */
.obit-slider {
  position: relative;
  min-height: 120px;
}

.obit-card {
  display: none;
  animation: fadeIn 0.5s ease;
}

.obit-card.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.obit-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--green-dark);
  letter-spacing: 0.05em;
}

.obit-dates {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faded);
  margin: 0.15rem 0 0.5rem;
  letter-spacing: 0.06em;
}

.obit-text {
  font-size: 0.88rem;
  color: var(--ink-faded);
  font-style: italic;
  line-height: 1.55;
}

.obit-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
  align-items: center;
}

.obit-nav button {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: none;
  border: 1px solid var(--rule);
  color: var(--tobacco);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  letter-spacing: 0.1em;
}

.obit-nav button:hover {
  background: var(--parchment);
}

.obit-counter {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #9a8060;
  margin-left: auto;
}

/* ============================================================
       CALENDAR / HOLIDAYS
    ============================================================ */
.holiday-list {
  list-style: none;
}

.holiday-list li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #d0bc90;
  font-size: 0.88rem;
}

.holiday-list li:last-child {
  border-bottom: none;
}

.holiday-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--amber);
  white-space: nowrap;
  min-width: 80px;
}

.holiday-name {
  color: var(--ink);
}

.holiday-loading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faded);
  font-style: italic;
}

.cal-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--green-dark);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--green-mid);
  transition:
    background 0.15s,
    color 0.15s;
}

.cal-btn:hover {
  background: var(--amber);
  color: var(--green-dark);
  border-color: var(--amber);
}

/* ============================================================
       NEWS / NOTICEBOARD
    ============================================================ */
.notice-item {
  border-left: 3px solid var(--amber);
  padding: 0.4rem 0 0.4rem 0.8rem;
  margin-bottom: 1rem;
}

.notice-item:last-child {
  margin-bottom: 0;
}

.notice-date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-faded);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notice-text {
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

.notice-text a {
  color: var(--green-mid);
  text-decoration: none;
  border-bottom: 1px dotted;
}

.notice-text a:hover {
  color: var(--amber);
}

/* ============================================================
       QUOTE BLOCK
    ============================================================ */
.sundowner-quote {
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  padding: 1rem 1.5rem;
  margin: 0 0 1.8rem;
  text-align: center;
  background: rgba(200, 115, 42, 0.06);
}

.sundowner-quote blockquote {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--ink-faded);
  line-height: 1.7;
}

.sundowner-quote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--tobacco);
  margin-top: 0.5rem;
  text-transform: uppercase;
  font-style: normal;
}

/* ============================================================
       FOOTER
    ============================================================ */
footer {
  background: var(--green-dark);
  color: #6a9070;
  text-align: center;
  padding: 1.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  border-top: 3px solid var(--amber);
}

footer a {
  color: var(--amber-lt);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

.footer-motto {
  color: var(--amber-lt);
  font-size: 0.8rem;
  font-family: var(--font-display);
  margin-bottom: 0.4rem;
  letter-spacing: 0.12em;
}

/* ============================================================
       WEATHER STRIP
    ============================================================ */
.weather-strip {
  background: rgba(30, 61, 37, 0.07);
  border: 1px solid #c8b878;
  padding: 0.5rem 0.8rem;
  margin-bottom: 1.2rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.weather-city {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.weather-temp {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--amber);
}

/* ============================================================
       MISC HELPERS
    ============================================================ */
.text-small {
  font-size: 0.82rem;
  color: var(--ink-faded);
}

.divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.5rem 0;
  opacity: 0.4;
}

.green-dot {
  width: 8px;
  height: 8px;
  background: #5cc060;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.35rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Typewriter-style blinking cursor */
.blink {
  animation: blink 1.1s step-end infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ============================================================
       RESPONSIVE TWEAKS
    ============================================================ */
@media (max-width: 500px) {
  .radio-wrap {
    padding: 0.8rem;
  }
}