:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17201d;
  background: #f7f7f3;
  --screen-pad-x: clamp(16px, 1.45svw, 30px);
  --screen-pad-top: clamp(14px, 2.1svh, 26px);
  --screen-gap: clamp(10px, 1.65svh, 18px);
  --header-height: clamp(82px, 10svh, 108px);
  --ticker-height: clamp(42px, 5svh, 54px);
  --panel-pad: clamp(10px, 1.3svh, 16px);
  --maintenance-banner-height: clamp(36px, 4.8svh, 48px);
  --edge-inset: var(--panel-pad);
  --panel-radius: 8px;
  --layout-left: minmax(230px, 0.72fr);
  --layout-center: minmax(560px, 1.82fr);
  --layout-right: minmax(280px, 0.82fr);
  --shell-text: #17201d;
  --shell-muted: #465851;
  --shell-heading: #0d5c63;
  --shell-accent: #0d6f72;
  --shell-accent-secondary: #b46a2b;
  --shell-border: rgba(23, 32, 29, 0.16);
  --shell-surface: rgba(250, 251, 248, 0.86);
  --shell-surface-strong: rgba(255, 255, 253, 0.92);
  --shell-surface-soft: rgba(238, 243, 238, 0.84);
  --shell-item: rgba(255, 255, 253, 0.68);
  --shell-shadow: 0 14px 34px rgba(25, 35, 31, 0.16);
  --shell-photo-filter: brightness(0.9) saturate(0.86) contrast(0.96);
  --shell-shade: rgba(235, 240, 235, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  overflow: hidden;
  background: #f7f7f3;
}

.maintenance-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  min-height: var(--maintenance-banner-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5px var(--screen-pad-x);
  border-bottom: 3px solid #1d1d18;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    #f5c400;
  box-shadow: 0 5px 16px rgba(18, 18, 14, 0.28);
  color: #171712;
  font-size: clamp(0.9rem, 1.45svw, 1.45rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.maintenance-banner span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temporary-farewell-overlay {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 29;
  width: 100%;
  height: 300px;
  transform: translateY(-50%);
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px var(--screen-pad-x);
  background: rgba(0, 82, 204, 0.70);
  color: rgba(255, 230, 0, 0.60);
  font-size: clamp(3rem, 5.8vw, 7rem);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}

.election-results-overlay {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 31;
  width: 100%;
  height: 260px;
  transform: translateY(-50%);
  pointer-events: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  padding: 12px var(--screen-pad-x) 10px;
  border-block: 2px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(5px) saturate(0.92);
  box-shadow: 0 14px 36px rgba(8, 30, 86, 0.22);
  color: #121b2f;
  text-align: center;
}

.election-results-title,
.election-results-message,
.election-results-meta {
  margin: 0;
}

.election-results-title {
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  font-weight: 900;
  letter-spacing: 0;
}

.election-results-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(32px, 6vw, 110px);
  width: min(960px, 88vw);
  margin-inline: auto;
}

.election-result {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-weight: 950;
  line-height: 0.86;
}

.election-result span {
  font-size: clamp(1.8rem, 2.8vw, 3rem);
}

.election-result strong {
  font-size: clamp(4.2rem, 7vw, 7.4rem);
  letter-spacing: 0;
  white-space: nowrap;
}

.election-result-yes {
  color: #c62828;
}

.election-result-no {
  color: #0d47a1;
}

.election-result-no::before {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: calc(clamp(32px, 6vw, 110px) / -2);
  width: 1px;
  background: rgba(18, 27, 47, 0.22);
  content: "";
}

.election-results-message {
  align-self: center;
  font-size: clamp(2.4rem, 5vw, 5.8rem);
  font-weight: 950;
  line-height: 1;
}

.election-results-message.is-stale {
  color: #8b1a1a;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
}

.election-results-meta {
  min-height: 1.2em;
  overflow: hidden;
  font-size: clamp(0.82rem, 1.05vw, 1.15rem);
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-banner-visible .screen {
  padding-top: calc(var(--screen-pad-top) + var(--maintenance-banner-height) + 6px);
}

body.brightness-day .screen,
body.brightness-day .maintenance-banner {
  filter: brightness(0.85);
}

body.brightness-evening .screen,
body.brightness-evening .maintenance-banner {
  filter: brightness(0.65) saturate(0.9);
}

body.brightness-night .screen,
body.brightness-night .maintenance-banner {
  filter: brightness(0.40) saturate(0.78);
}

.background-photo,
.background-shade {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.background-photo {
  z-index: 0;
  background:
    linear-gradient(135deg, #ffffff 0%, #f1f3ef 58%, #e8ece7 100%);
  background-position: center;
  background-size: cover;
  opacity: 0.82;
  filter: brightness(0.98) saturate(0.92) contrast(0.98);
  transition: opacity 600ms ease, background-image 600ms ease;
}

.background-photo.visible {
  opacity: 1;
}

.background-shade {
  z-index: 1;
  background: rgba(247, 247, 243, 0.08);
}

.decoration-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.decoration {
  position: absolute;
  width: min(var(--decoration-width, 420px), 90vw);
  max-height: 34vh;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(25, 35, 31, 0.18));
}

.decoration-top-left {
  top: clamp(8px, 2svh, 24px);
  left: var(--screen-pad-x);
}

.decoration-top-center {
  top: clamp(8px, 2svh, 24px);
  left: 50%;
  transform: translateX(-50%);
}

.decoration-top-right {
  top: clamp(8px, 2svh, 24px);
  right: var(--screen-pad-x);
}

.decoration-middle-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.decoration-bottom-center {
  bottom: calc(var(--ticker-height) + clamp(8px, 1.5svh, 18px));
  left: 50%;
  transform: translateX(-50%);
}

.icelandic-special-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.icelandic-special-backdrop {
  position: absolute;
  inset: -4%;
  z-index: 0;
  opacity: 0.22;
  animation: specialBackdropDrift 28s ease-in-out infinite alternate;
}

.icelandic-special-language .icelandic-special-backdrop {
  background:
    linear-gradient(128deg, rgba(38, 86, 120, 0.2) 0 26%, transparent 26% 54%, rgba(218, 57, 48, 0.12) 54% 72%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(240, 246, 247, 0.55), rgba(216, 228, 225, 0.2));
}

.icelandic-special-nature .icelandic-special-backdrop {
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 232, 143, 0.48) 0 10%, transparent 11%),
    linear-gradient(128deg, rgba(70, 139, 101, 0.25) 0 28%, transparent 28% 50%, rgba(70, 146, 169, 0.16) 50% 70%, transparent 70%),
    linear-gradient(180deg, rgba(213, 235, 217, 0.48), rgba(236, 244, 232, 0.2));
}

.icelandic-special-ocean .icelandic-special-backdrop {
  background:
    repeating-linear-gradient(168deg, rgba(47, 127, 154, 0.2) 0 18px, transparent 18px 80px),
    linear-gradient(135deg, rgba(54, 111, 153, 0.24), rgba(236, 246, 247, 0.1));
}

.icelandic-special-summer .icelandic-special-backdrop {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 210, 73, 0.5) 0 12%, transparent 13%),
    linear-gradient(125deg, rgba(255, 221, 95, 0.24), rgba(87, 160, 117, 0.14), transparent 70%);
}

.icelandic-special-winter .icelandic-special-backdrop {
  background:
    repeating-linear-gradient(135deg, rgba(124, 168, 190, 0.18) 0 16px, transparent 16px 86px),
    linear-gradient(180deg, rgba(226, 237, 242, 0.52), rgba(255, 255, 255, 0.18));
}

.icelandic-special-national .icelandic-special-backdrop,
.icelandic-special-generic .icelandic-special-backdrop {
  background:
    linear-gradient(118deg, rgba(2, 82, 156, 0.2) 0 28%, transparent 28% 46%, rgba(220, 30, 53, 0.14) 46% 58%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(222, 232, 239, 0.18));
}

.special-symbol {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  animation: specialSymbolFloat var(--duration, 30s) ease-in-out infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 5px 10px rgba(23, 32, 29, 0.13));
}

.language-glyph {
  color: rgba(3, 82, 156, 0.54);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5.2vw, 5.8rem);
  font-weight: 800;
  line-height: 1;
}

.nature-leaf {
  width: clamp(18px, 2.9vw, 42px);
  aspect-ratio: 0.68;
  border-radius: 80% 10% 80% 12%;
  background: linear-gradient(145deg, rgba(65, 139, 91, 0.82), rgba(149, 194, 104, 0.62));
  transform-origin: 50% 100%;
}

.nature-leaf::after,
.beer-hop::after {
  content: "";
  position: absolute;
}

.nature-leaf::after {
  left: 49%;
  top: 8%;
  bottom: 8%;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  transform: rotate(-12deg);
}

.nature-mountain {
  position: absolute;
  left: 8%;
  right: 10%;
  bottom: calc(var(--ticker-height) - 2px);
  z-index: 0;
  height: 30vh;
  opacity: 0.2;
  background:
    linear-gradient(135deg, transparent 0 34%, rgba(65, 120, 95, 0.8) 34% 52%, transparent 52%),
    linear-gradient(145deg, transparent 0 50%, rgba(44, 105, 124, 0.58) 50% 70%, transparent 70%);
}

.nature-sun,
.summer-sunburst {
  position: absolute;
  right: 10%;
  top: 14%;
  z-index: 0;
  width: clamp(60px, 10vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 205, 71, 0.32);
  box-shadow: 0 0 42px rgba(255, 205, 71, 0.22);
}

.ocean-wave {
  width: clamp(42px, 7vw, 92px);
  height: clamp(13px, 1.8vw, 24px);
  border-radius: 999px;
  border-top: 5px solid rgba(38, 128, 169, 0.55);
}

.ocean-sail {
  position: absolute;
  left: 10%;
  bottom: calc(var(--ticker-height) + 5vh);
  z-index: 1;
  width: clamp(46px, 7vw, 88px);
  height: clamp(54px, 9vw, 110px);
  opacity: 0.42;
  background:
    linear-gradient(135deg, transparent 0 50%, rgba(255, 255, 255, 0.78) 50%),
    linear-gradient(90deg, transparent 0 48%, rgba(36, 88, 115, 0.62) 48% 54%, transparent 54%);
}

.summer-flower {
  width: clamp(20px, 3vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f2b84b 0 16%, transparent 17%),
    radial-gradient(circle at 50% 12%, rgba(238, 104, 89, 0.74) 0 18%, transparent 19%),
    radial-gradient(circle at 88% 50%, rgba(255, 215, 89, 0.74) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 88%, rgba(96, 167, 99, 0.68) 0 18%, transparent 19%),
    radial-gradient(circle at 12% 50%, rgba(63, 146, 196, 0.64) 0 18%, transparent 19%);
}

.winter-crystal {
  width: clamp(24px, 3.4vw, 48px);
  aspect-ratio: 1;
  opacity: 0.54;
}

.winter-crystal::before,
.winter-crystal::after,
.icelandic-spark::before,
.icelandic-spark::after {
  content: "";
  position: absolute;
  inset: 46% 0;
  border-radius: 999px;
  background: rgba(86, 142, 170, 0.62);
}

.winter-crystal::after {
  transform: rotate(60deg);
  box-shadow: 0 0 0 0 rgba(86, 142, 170, 0.62);
}

.winter-crystal {
  background: linear-gradient(90deg, transparent 46%, rgba(86, 142, 170, 0.62) 46% 54%, transparent 54%);
  transform: rotate(30deg);
}

.icelandic-spark {
  width: clamp(18px, 2.7vw, 38px);
  aspect-ratio: 1;
  color: rgba(2, 82, 156, 0.55);
}

.icelandic-spark::before {
  background: currentColor;
}

.icelandic-spark::after {
  background: currentColor;
  transform: rotate(90deg);
}

.icelandic-flag-ribbon {
  position: absolute;
  left: -5vw;
  right: -5vw;
  top: clamp(98px, 16vh, 180px);
  z-index: 0;
  height: clamp(18px, 2vw, 34px);
  opacity: 0.26;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, #02529c 0 42%, #ffffff 42% 47%, #dc1e35 47% 54%, #ffffff 54% 59%, #02529c 59% 100%);
}

@keyframes specialBackdropDrift {
  0% { transform: translate3d(-1%, -0.7%, 0) scale(1); }
  100% { transform: translate3d(1.2%, 0.8%, 0) scale(1.02); }
}

@keyframes specialSymbolFloat {
  0%, 100% { transform: translate(0, 0) rotate(-6deg) scale(0.96); }
  34% { transform: translate(var(--x1), var(--y1)) rotate(9deg) scale(1.05); }
  68% { transform: translate(var(--x2), var(--y2)) rotate(-8deg) scale(0.98); }
}

.march1-beer-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.beer-backdrop {
  position: absolute;
  inset: -4%;
  z-index: 0;
  opacity: 0.24;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 247, 208, 0.72) 0 8%, transparent 9%),
    radial-gradient(circle at 82% 24%, rgba(112, 168, 116, 0.38) 0 9%, transparent 10%),
    linear-gradient(124deg, rgba(246, 181, 62, 0.28) 0 24%, transparent 24% 47%, rgba(72, 139, 142, 0.18) 47% 68%, transparent 68%),
    repeating-linear-gradient(18deg, rgba(255, 224, 124, 0.23) 0 18px, transparent 18px 84px);
  animation: beerBackdropDrift 26s ease-in-out infinite alternate;
}

.beer-mug {
  position: absolute;
  left: var(--start-x, 0);
  top: var(--start-y, 0);
  z-index: 2;
  width: clamp(30px, 4.2vw, 58px);
  aspect-ratio: 0.78;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px 7px 10px 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 12%, transparent 12% 38%, rgba(255, 255, 255, 0.18) 38% 48%, transparent 48% 100%),
    linear-gradient(180deg, #f8c64c 0 22%, #e69a20 22% 74%, #be7418 74% 100%);
  box-shadow: 0 10px 22px rgba(72, 46, 16, 0.16);
  animation: beerMugFloat var(--duration, 32s) ease-in-out infinite;
  animation-delay: var(--delay);
}

.beer-foam {
  position: absolute;
  left: -8%;
  right: -8%;
  top: -15%;
  height: 30%;
  border-radius: 999px 999px 8px 8px;
  background:
    radial-gradient(circle at 16% 46%, #ffffff 0 17%, transparent 18%),
    radial-gradient(circle at 40% 26%, #ffffff 0 22%, transparent 23%),
    radial-gradient(circle at 66% 38%, #ffffff 0 20%, transparent 21%),
    radial-gradient(circle at 86% 54%, #fff6d6 0 15%, transparent 16%),
    linear-gradient(180deg, #fffdf2, #fff3c0);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.38);
}

.beer-handle {
  position: absolute;
  right: -42%;
  top: 26%;
  width: 45%;
  height: 42%;
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.beer-bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: clamp(6px, 0.9vw, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 246, 205, 0.74);
  border: 1px solid rgba(234, 164, 54, 0.24);
  box-shadow: 0 2px 7px rgba(255, 232, 152, 0.18);
  animation: beerBubbleRise 8.4s ease-in-out infinite;
  animation-delay: var(--delay);
}

.beer-bubble-1,
.beer-bubble-4 {
  background: rgba(255, 255, 255, 0.68);
}

.beer-bubble-2 {
  background: rgba(108, 163, 112, 0.36);
}

.beer-hop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: clamp(14px, 1.9vw, 28px);
  aspect-ratio: 0.8;
  opacity: 0.56;
  transform-origin: 50% 100%;
  animation: beerHopSway 9s ease-in-out infinite;
  animation-delay: var(--delay);
}

.beer-hop::before,
.beer-hop::after {
  content: "";
  position: absolute;
  inset: 8% 15%;
  border-radius: 70% 10% 70% 10%;
  background: #5e9f58;
  transform: rotate(-30deg);
  box-shadow:
    8px 5px 0 rgba(87, 145, 77, 0.86),
    0 12px 0 rgba(112, 168, 93, 0.82);
}

.beer-hop::after {
  inset: 34% 45% 0 45%;
  border-radius: 999px;
  background: rgba(73, 107, 57, 0.7);
  transform: none;
  box-shadow: none;
}

@keyframes beerBackdropDrift {
  0% { transform: translate3d(-1.2%, -0.5%, 0) scale(1); }
  100% { transform: translate3d(1%, 0.8%, 0) scale(1.02); }
}

@keyframes beerMugFloat {
  0%, 100% { transform: translate(0, 0) rotate(-5deg) scale(0.96); }
  25% { transform: translate(var(--x1), var(--y1)) rotate(7deg) scale(1.04); }
  52% { transform: translate(var(--x2), var(--y2)) rotate(-8deg) scale(0.98); }
  78% { transform: translate(var(--x3), var(--y3)) rotate(5deg) scale(1.02); }
}

@keyframes beerBubbleRise {
  0%, 100% { transform: translateY(0) scale(0.9); opacity: 0.42; }
  48% { transform: translateY(-22px) scale(1.14); opacity: 0.82; }
}

@keyframes beerHopSway {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-8px); }
}

.july12-cartoon-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.july12-theme-active .background-shade {
  overflow: hidden;
}

.july12-theme-active .background-shade::before,
.july12-theme-active .background-shade::after {
  content: "";
  position: absolute;
  inset: -4%;
  pointer-events: none;
}

.july12-theme-active .background-shade::before {
  z-index: 0;
  background:
    linear-gradient(116deg, rgba(255, 228, 75, 0.22) 0 24%, transparent 24% 44%, rgba(63, 149, 209, 0.18) 44% 64%, transparent 64% 100%),
    repeating-linear-gradient(152deg, rgba(255, 241, 143, 0.18) 0 18px, transparent 18px 72px),
    linear-gradient(180deg, rgba(255, 236, 94, 0.15), rgba(65, 146, 205, 0.11));
  animation: july12BackdropDrift 24s ease-in-out infinite alternate;
}

.july12-theme-active .background-shade::after {
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.22) 42px 48px, transparent 48px 96px);
  opacity: 0.34;
  transform: rotate(-7deg);
  animation: july12BackdropSlide 18s linear infinite;
}

.cartoon-buddy {
  position: absolute;
  z-index: 2;
  left: var(--start-x, 0);
  top: var(--start-y, 0);
  width: clamp(38px, 5.2vw, 74px);
  aspect-ratio: 0.72;
  border-radius: 44% 44% 38% 38%;
  background: linear-gradient(180deg, #ffe36b 0%, #f7c638 62%, #3f95d1 63%, #2d72b8 100%);
  box-shadow: 0 10px 20px rgba(18, 38, 54, 0.18);
  animation: buddyFreeFlow var(--duration, 26s) ease-in-out infinite;
  animation-delay: var(--delay);
}

.cartoon-buddy::before,
.cartoon-buddy::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 42%;
  height: 10%;
  border-radius: 999px;
  background: #ffe36b;
}

.cartoon-buddy::before {
  left: -28%;
  transform: rotate(-26deg);
}

.cartoon-buddy::after {
  right: -28%;
  transform: rotate(26deg);
}

.buddy-face {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 20%;
  height: 24%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 50%, #182c35 0 10%, transparent 11%),
    radial-gradient(circle at 66% 50%, #182c35 0 10%, transparent 11%),
    rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 3px rgba(58, 77, 88, 0.52);
}

.buddy-smile {
  position: absolute;
  left: 37%;
  top: 48%;
  width: 26%;
  height: 11%;
  border-bottom: 3px solid #78431f;
  border-radius: 0 0 999px 999px;
}

.buddy-badge {
  position: absolute;
  left: 36%;
  bottom: 10%;
  width: 28%;
  height: 8%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
}

.buddy-top-left {
  left: clamp(10px, 3vw, 42px);
  top: clamp(84px, 12vh, 120px);
}

.buddy-top-right {
  right: clamp(12px, 3.4vw, 48px);
  top: clamp(86px, 12vh, 124px);
}

.buddy-middle-left {
  left: clamp(4px, 1.2vw, 18px);
  top: 48%;
}

.buddy-middle-right {
  right: clamp(4px, 1.2vw, 18px);
  top: 48%;
}

.buddy-bottom-left {
  left: clamp(20px, 5vw, 78px);
  bottom: calc(var(--ticker-height) + clamp(12px, 3vh, 34px));
}

.buddy-bottom-right {
  right: clamp(20px, 5vw, 78px);
  bottom: calc(var(--ticker-height) + clamp(12px, 3vh, 34px));
}

.buddy-wave::before {
  animation: buddyWave 1.7s ease-in-out infinite;
  transform-origin: 100% 50%;
}

.buddy-peek {
  opacity: 0.86;
}

.buddy-bounce .buddy-badge {
  animation: buddyBadgeBounce 1.8s ease-in-out infinite;
}

.cartoon-confetti {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: clamp(6px, 0.9vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd84d;
  opacity: 0.62;
  animation: confettiDrift 7s ease-in-out infinite;
  animation-delay: var(--delay);
}

.confetti-1,
.confetti-4 {
  background: #3f95d1;
}

.confetti-2 {
  background: #ff8f6b;
}

.confetti-3 {
  background: #66c58f;
}

.confetti-5 {
  background: #fff3a8;
}

@keyframes buddyFreeFlow {
  0%, 100% {
    transform: translate(0, 0) rotate(-3deg) scale(0.98);
  }
  24% {
    transform: translate(var(--x1), var(--y1)) rotate(8deg) scale(1.02);
  }
  52% {
    transform: translate(var(--x2), var(--y2)) rotate(-7deg) scale(0.95);
  }
  78% {
    transform: translate(var(--x3), var(--y3)) rotate(6deg) scale(1);
  }
}

@keyframes july12BackdropDrift {
  0% { transform: translate3d(-1.4%, -0.8%, 0) scale(1); }
  100% { transform: translate3d(1.2%, 0.9%, 0) scale(1.02); }
}

@keyframes july12BackdropSlide {
  0% { background-position: 0 0; }
  100% { background-position: 96px 0; }
}

@keyframes buddyBadgeBounce {
  0%, 100% { transform: translateY(0); }
  46% { transform: translateY(-3px); }
}

@keyframes buddyWave {
  0%, 100% { transform: rotate(-26deg); }
  50% { transform: rotate(-54deg); }
}

@keyframes confettiDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(12px, -10px) rotate(35deg); }
}

.aug7-pride-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.inclusive-flag-backdrop {
  position: absolute;
  inset: -2%;
  z-index: 0;
  overflow: hidden;
  opacity: 0.2;
  background: linear-gradient(180deg,
    #e40303 0 16.66%,
    #ff8c00 16.66% 33.33%,
    #ffed00 33.33% 50%,
    #008026 50% 66.66%,
    #24408e 66.66% 83.33%,
    #732982 83.33% 100%);
  filter: saturate(0.92);
}

.inclusive-chevron {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.inclusive-chevron-black {
  width: 54%;
  background: #000000;
}

.inclusive-chevron-brown {
  width: 48%;
  background: #613915;
}

.inclusive-chevron-blue {
  width: 42%;
  background: #55cdfc;
}

.inclusive-chevron-pink {
  width: 36%;
  background: #f7a8b8;
}

.inclusive-chevron-white {
  width: 30%;
  background: #ffffff;
}

.inclusive-chevron-yellow {
  width: 24%;
  background: #ffd800;
}

.inclusive-intersex-ring {
  position: absolute;
  left: 5.2%;
  top: 50%;
  width: clamp(44px, 8vw, 92px);
  aspect-ratio: 1;
  border: clamp(5px, 0.7vw, 8px) solid #7902aa;
  border-radius: 50%;
  transform: translateY(-50%);
}

.pride-confetti {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(6px, 0.75vw, 11px);
  height: clamp(10px, 1.15vw, 17px);
  border-radius: 2px;
  opacity: 0.58;
  box-shadow: 0 2px 5px rgba(23, 32, 29, 0.12);
  animation: prideConfettiDrift 7.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.pride-symbol {
  position: absolute;
  left: var(--start-x, 0);
  top: var(--start-y, 0);
  z-index: 3;
  width: clamp(16px, 2.1vw, 34px);
  aspect-ratio: 1;
  color: var(--symbol-color, #732982);
  opacity: 0.64;
  animation: prideSymbolFlight var(--duration, 30s) ease-in-out infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 4px 8px rgba(23, 32, 29, 0.14));
}

.pride-symbol-ring {
  border: 3px solid currentColor;
  border-radius: 50%;
}

.pride-symbol-diamond::before,
.pride-symbol-spark::before,
.pride-symbol-spark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}

.pride-symbol-diamond::before {
  border-radius: 4px;
  transform: rotate(45deg) scale(0.78);
}

.pride-symbol-spark::before {
  left: 42%;
  right: 42%;
  border-radius: 999px;
}

.pride-symbol-spark::after {
  top: 42%;
  bottom: 42%;
  border-radius: 999px;
}

.pride-confetti-0 { background: #e40303; }
.pride-confetti-1 { background: #ff8c00; }
.pride-confetti-2 { background: #ffed00; }
.pride-confetti-3 { background: #008026; }
.pride-confetti-4 { background: #24408e; }
.pride-confetti-5 { background: #732982; }
.pride-confetti-6 {
  background: linear-gradient(180deg, #55cdfc 0 33%, #f7a8b8 33% 66%, #ffffff 66% 100%);
}
.pride-confetti-7 {
  background: linear-gradient(180deg, #613915 0 33%, #000000 33% 66%, #ffffff 66% 100%);
}

@keyframes prideConfettiDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(11px, -12px) rotate(24deg); }
}

@keyframes prideSymbolFlight {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(0.94);
  }
  26% {
    transform: translate(var(--x1), var(--y1)) rotate(120deg) scale(1.08);
  }
  54% {
    transform: translate(var(--x2), var(--y2)) rotate(230deg) scale(0.92);
  }
  82% {
    transform: translate(var(--x3), var(--y3)) rotate(320deg) scale(1.03);
  }
}

.screen {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--header-height) minmax(0, 1fr) var(--ticker-height);
  padding: var(--screen-pad-top) var(--screen-pad-x) 0;
  gap: var(--screen-gap);
}

.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: var(--layout-left) var(--layout-center) var(--layout-right);
  align-items: center;
  gap: var(--screen-gap);
  min-height: 0;
  border: 1px solid rgba(23, 32, 29, 0.12);
  border-radius: var(--panel-radius);
  background: rgba(255, 255, 255, 0.42);
  padding: clamp(8px, 1svh, 12px) 0;
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 28px rgba(25, 35, 31, 0.12);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.55);
}

.clock-left .topbar .time-block {
  order: -1;
  justify-items: start;
  text-align: left;
}

.clock-left .topbar .title-block {
  order: 1;
}

.hide-title .topbar {
  grid-template-columns: var(--layout-left) var(--layout-center) var(--layout-right);
}

.hide-title .title-block {
  display: none;
}

.hide-title .topbar .time-block {
  grid-column: 1;
  grid-row: 1;
  order: 0;
  justify-items: start;
  text-align: left;
  padding: 0 0 0 var(--edge-inset);
}

.hide-title .topbar .weather-strip {
  grid-column: 2;
  grid-row: 1;
  order: 0;
}

.hide-title .header-right {
  display: contents;
}

.hide-title .topbar-special {
  grid-column: 3;
  grid-row: 1;
}

.topbar-special {
  min-width: 0;
  width: 100%;
  align-self: stretch;
  display: grid;
  align-content: center;
  justify-items: end;
  padding: 0 var(--edge-inset) 0 0;
  box-shadow: none;
  text-align: right;
}

.topbar-special h2 {
  margin-bottom: 5px;
  font-size: clamp(0.74rem, 0.86rem, 1rem);
}

.topbar p {
  margin: 0 0 6px;
  color: #40504a;
  font-size: clamp(0.95rem, 1.15rem, 1.3rem);
  font-weight: 750;
}

.title-block {
  padding-left: var(--edge-inset);
}

.next-panel .monday-message {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 4px solid #16884a;
  background: rgba(22, 136, 74, 0.08);
  color: #116a4b;
  font-size: clamp(0.78rem, 0.92rem, 1.02rem);
  font-weight: 850;
  line-height: 1.2;
}

.next-panel .monday-message[hidden] {
  display: none;
}

.monday-active .next-panel {
  border-color: rgba(17, 106, 75, 0.28);
  box-shadow: 0 12px 28px rgba(25, 35, 31, 0.12), inset 4px 0 0 #16884a;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 3.2rem, 4rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  margin: 0 0 14px;
  color: #0d5c63;
  font-size: clamp(1.05rem, 1.35rem, 1.65rem);
  letter-spacing: 0;
}

.clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.2rem, 4rem);
  font-weight: 850;
  line-height: 1;
}

.time-block {
  display: grid;
  justify-items: end;
  text-align: right;
  align-content: center;
  gap: 2px;
  padding-right: var(--edge-inset);
}

.time-copy {
  display: grid;
  justify-items: inherit;
  align-content: center;
  gap: 2px;
  min-width: 0;
  text-align: inherit;
}

.header-right {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(188px, auto);
  align-items: center;
  gap: clamp(8px, 1svw, 14px);
}

.time-block #dateLabel {
  margin: 0;
  font-size: clamp(0.82rem, 1rem, 1.15rem);
  line-height: 1.1;
}

.weather-strip {
  min-width: 0;
  min-height: clamp(58px, 7.1svh, 76px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(4px, 0.55svw, 9px);
  justify-self: stretch;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(23, 32, 29, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: background 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}

.weather-strip.weather-warning-yellow {
  border-color: rgba(193, 143, 28, 0.38);
  background:
    linear-gradient(90deg, rgba(255, 214, 82, 0.44), rgba(255, 246, 192, 0.3) 48%, rgba(255, 255, 255, 0.34));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 180, 0.46),
    0 0 16px rgba(255, 205, 64, 0.16);
}

.weather-strip.weather-warning-orange {
  border-color: rgba(199, 99, 23, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 151, 66, 0.46), rgba(255, 218, 150, 0.28) 52%, rgba(255, 255, 255, 0.32));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 184, 0.42),
    0 0 18px rgba(255, 137, 44, 0.18);
}

.weather-strip.weather-warning-red {
  border-color: rgba(182, 42, 39, 0.48);
  background:
    linear-gradient(90deg, rgba(221, 66, 59, 0.46), rgba(255, 189, 170, 0.28) 52%, rgba(255, 255, 255, 0.32));
  box-shadow:
    inset 0 0 0 1px rgba(255, 217, 208, 0.4),
    0 0 20px rgba(215, 52, 48, 0.2);
}

.weather-location,
.weather-empty {
  color: #0d5c63;
  font-weight: 850;
  font-size: clamp(0.72rem, 0.86rem, 0.98rem);
  white-space: nowrap;
}

.weather-day {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  overflow: hidden;
}

.weather-date {
  display: grid;
  justify-items: start;
  line-height: 1.05;
}

.weather-meta {
  display: grid;
  justify-items: start;
  line-height: 1.05;
}

.weather-day-name,
.weather-date-label,
.weather-wind {
  color: #465851;
  font-size: clamp(0.62rem, 0.74rem, 0.88rem);
  font-weight: 500;
}

.weather-day-name {
  font-weight: 800;
  text-transform: uppercase;
}

.weather-icon {
  display: block;
  width: clamp(1.42rem, 1.76rem, 2.05rem);
  height: clamp(1.42rem, 1.76rem, 2.05rem);
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(13, 92, 99, 0.16));
  animation: weather-bob 7s ease-in-out infinite;
}

.weather-day:nth-child(2n) .weather-icon {
  animation-delay: -2.2s;
}

.weather-icon-special {
  width: clamp(1.55rem, 1.9rem, 2.18rem);
  height: clamp(1.55rem, 1.9rem, 2.18rem);
}

@keyframes weather-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}

.weather-temp {
  color: #17201d;
  font-size: clamp(0.64rem, 0.76rem, 0.9rem);
  font-weight: 500;
  white-space: nowrap;
}

.weather-wind {
  white-space: nowrap;
}

.main-grid {
  position: relative;
  z-index: 3;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--layout-left) var(--layout-center) var(--layout-right);
  gap: var(--screen-gap);
}

.glass-panel {
  min-height: 0;
  border: 1px solid rgba(23, 32, 29, 0.14);
  background: rgba(255, 255, 255, 0.48);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
  backdrop-filter: blur(5px);
  box-shadow: 0 14px 34px rgba(25, 35, 31, 0.16);
}

.side .glass-panel,
.left-stack .glass-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.left-stack,
.next-panel,
.week-panel,
.side {
  min-height: 0;
}

.left-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--screen-gap);
}

.hide-title .left-stack {
  grid-template-rows: minmax(0, 1fr);
}

.side {
  display: grid;
  grid-template-rows: minmax(0, 1.08fr) minmax(130px, 0.66fr);
  gap: var(--screen-gap);
}

.next-list,
.compact-list {
  display: grid;
  gap: 11px;
}

.next-list {
  gap: clamp(5px, 0.65svh, 8px);
}

#menu {
  min-height: 0;
  align-content: start;
  gap: clamp(5px, 0.7svh, 9px);
  grid-auto-rows: min-content;
  overflow: hidden;
}

#menu.menu-scroll {
  display: block;
  position: relative;
}

#menu .menu-item {
  grid-template-columns: clamp(48px, 3.25vw, 62px) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(10px, 0.9vw, 15px);
}

#menu .menu-meal-icon {
  display: block;
  width: clamp(48px, 3.25vw, 62px);
  height: clamp(48px, 3.25vw, 62px);
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(20, 31, 34, 0.16));
}

.menu-item-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.menu-scroll-track {
  display: grid;
  gap: clamp(5px, 0.7svh, 9px);
  animation: menu-scroll var(--menu-scroll-duration, 48s) linear infinite;
  will-change: transform;
}

@keyframes menu-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

#specialDays {
  position: relative;
  min-height: 0;
  height: auto;
  overflow: hidden;
  align-content: start;
  gap: clamp(4px, 0.55svh, 7px);
  grid-auto-rows: min-content;
}

.next-item,
.item,
.special-item {
  display: grid;
  gap: 5px;
  border-left: 5px solid #49a078;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 11px 12px 11px 13px;
}

.next-item {
  position: relative;
  gap: 3px;
  border-left-width: 4px;
  padding: clamp(7px, 0.84svh, 10px) 34px clamp(7px, 0.84svh, 10px) 11px;
  align-content: start;
}

.calendar-status-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.next-item strong,
.item strong,
.special-item strong {
  font-size: clamp(0.94rem, 1.02rem, 1.16rem);
}

.next-item strong {
  font-size: clamp(1.02rem, 1.16rem, 1.3rem);
  line-height: 1.08;
}

.next-item span,
.next-item small,
.item span,
.special-item span,
.special-item small {
  color: #465851;
  font-size: clamp(0.82rem, 0.9rem, 1rem);
}

.next-item span,
.next-item small {
  font-size: clamp(0.9rem, 1rem, 1.12rem);
  line-height: 1.12;
}

.item {
  align-content: start;
  padding: clamp(6px, 0.8svh, 9px) 10px;
}

.item strong {
  font-size: clamp(0.82rem, 0.92rem, 1.04rem);
  line-height: 1.12;
}

.item span {
  font-size: clamp(0.72rem, 0.8rem, 0.92rem);
  line-height: 1.18;
}

.week-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.week-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(5px, 0.7svh, 8px);
}

.week-title span {
  color: #465851;
  font-weight: 800;
  font-size: clamp(0.9rem, 1rem, 1.16rem);
}

.weeks-stack {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(7px, 0.9svh, 10px);
  overflow: hidden;
}

.week-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(4px, 0.55svh, 6px);
}

.week-label {
  color: #465851;
  font-size: clamp(0.75rem, 0.86rem, 0.98rem);
  font-weight: 700;
  line-height: 1;
}

.week-calendar {
  --calendar-day-header-height: 50px;
  --multi-day-lane-height: clamp(28px, 3.1svh, 36px);
  --multi-day-lane-gap: 4px;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(5px, 0.7svh, 8px);
  overflow: hidden;
}

.multi-day-layer {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--multi-day-lane-height);
  gap: var(--multi-day-lane-gap) clamp(5px, 0.7svh, 8px);
  align-self: start;
  z-index: 2;
  margin-top: calc(var(--calendar-day-header-height) + clamp(5px, 0.75svh, 8px) + 7px);
  overflow: hidden;
  pointer-events: none;
}

.week-calendar.has-multi-day .day-events {
  padding-top: var(--multi-day-space, 45px);
}

.day-column {
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 0;
  display: grid;
  align-content: start;
  border: 1px solid rgba(23, 32, 29, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  padding: clamp(5px, 0.75svh, 8px);
  overflow: hidden;
}

.week-header-spacer {
  grid-row: 1;
  min-height: calc(50px + clamp(5px, 0.75svh, 8px) + 8px);
  pointer-events: none;
}

.day-header {
  display: grid;
  gap: 2px;
  min-height: 50px;
  border-bottom: 1px solid rgba(23, 32, 29, 0.12);
  padding-bottom: 8px;
}

.day-header.today {
  color: #0d5c63;
}

.day-header strong {
  font-size: clamp(0.72rem, 0.84rem, 0.96rem);
  text-transform: capitalize;
}

.day-header.weekend strong {
  color: #c62828;
}



.day-header span {
  color: #465851;
  font-weight: 800;
  font-size: clamp(0.78rem, 0.88rem, 1rem);
}

.week-event {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  min-height: clamp(24px, 3.2svh, 38px);
  border-left: 4px solid #49a078;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.56);
  padding: 4px 6px 4px 8px;
  overflow: hidden;
}

.week-event.day-event {
  min-height: clamp(32px, 4.2svh, 48px);
}

.week-event.multi-day {
  min-width: 0;
  height: var(--multi-day-lane-height);
  min-height: 0;
  border-left-width: 5px;
  background: rgba(255, 255, 255, 0.68);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline: clamp(5px, 0.7svh, 8px);
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
}

.week-event.multi-day strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-event.multi-day .multi-day-range,
.week-event.multi-day small {
  flex: 0 0 auto;
  font-size: clamp(0.64rem, 0.72rem, 0.78rem);
}

.day-events {
  min-height: 0;
  display: grid;
  gap: clamp(4px, 0.55svh, 6px);
  padding-top: 5px;
  margin-top: 0;
  overflow: hidden;
}

.day-event-page {
  display: grid;
  gap: clamp(4px, 0.55svh, 6px);
}

.story-panel-shell {
  overflow: hidden;
}

.story-panel {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
}

.story-snippet {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  gap: clamp(8px, 1.1svh, 13px);
  padding: clamp(18px, 2.7svh, 30px) clamp(18px, 1.8svw, 28px);
  border: 1px solid rgba(13, 92, 99, 0.16);
  border-radius: 6px;
  background:
    radial-gradient(circle at 92% 8%, rgba(213, 188, 115, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(242, 244, 237, 0.68));
}

.story-kicker {
  color: #0d5c63;
  font-size: clamp(0.68rem, 0.78rem, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-text {
  margin: 0;
  color: #17201d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.25rem, 1.48rem);
  font-weight: 650;
  line-height: 1.28;
}

.story-source {
  color: #52625c;
  font-size: clamp(0.7rem, 0.8rem, 0.92rem);
  font-weight: 750;
}

.week-event span,
.week-event small {
  color: #465851;
  font-size: clamp(0.58rem, 0.68rem, 0.8rem);
  font-weight: 750;
  line-height: 1.05;
}

.week-event strong {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(0.66rem, 0.76rem, 0.9rem);
  line-height: 1.15;
}

.week-event.day-event strong {
  -webkit-line-clamp: 2;
  line-height: 1.12;
}

.day-empty,
.empty {
  color: #53645e;
  margin: 0;
}

.day-empty {
  padding: 8px;
  font-weight: 750;
  opacity: 0.68;
}

.special-item {
  border-left-color: #d92525;
  align-content: center;
  min-height: 0;
  max-height: 100%;
  padding: clamp(4px, 0.65svh, 7px) 10px;
  overflow: hidden;
}

.special-item strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(0.76rem, 0.86rem, 0.98rem);
  line-height: 1.12;
}

.special-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.7rem, 0.78rem, 0.9rem);
}

.special-item.birthday {
  border-left-color: #0d5c63;
  padding: clamp(7px, 0.95svh, 11px) 11px;
}

.special-item.birthday strong {
  font-size: clamp(0.92rem, 1.02rem, 1.16rem);
}

.special-item.birthday .birthday-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.98rem, 1.1rem, 1.24rem);
  line-height: 1.08;
}

.special-item.national {
  border-left-width: 4px;
  padding: clamp(2px, 0.35svh, 4px) 8px;
  gap: 2px;
}

.special-item.national strong {
  -webkit-line-clamp: 1;
  font-size: clamp(0.8rem, 0.9rem, 1.04rem);
  line-height: 1.08;
}

.special-item.national span {
  font-size: clamp(0.6rem, 0.68rem, 0.78rem);
}

.special-item.national-group {
  border-left-width: 5px;
  padding: clamp(6px, 0.85svh, 10px) 10px;
  gap: 5px;
}

.special-item.national-group strong {
  -webkit-line-clamp: 1;
  font-size: clamp(0.82rem, 0.94rem, 1.08rem);
}

.special-item.national-group .national-country {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(0.86rem, 0.98rem, 1.12rem);
  line-height: 1.12;
}

.special-item .national-label {
  color: #465851;
  font-weight: 500;
  font-size: clamp(0.86rem, 0.98rem, 1.12rem);
  line-height: 1.12;
}

.special-pager {
  position: absolute;
  right: 4px;
  bottom: 0;
  color: #68746f;
  font-weight: 800;
  opacity: 0.78;
}

.special-item,
.special-item.birthday,
.special-item.national,
.special-item.national-group {
  border-left-width: 0;
}

.topbar-special #specialDays {
  gap: 2px;
  justify-items: end;
  width: 100%;
}

.topbar-special .special-item {
  background: transparent;
  padding: 1px 0;
  gap: 1px;
  color: #24312d;
  justify-items: end;
  text-align: right;
  width: min(100%, 420px);
}

.topbar-special .special-item strong {
  -webkit-line-clamp: 1;
  font-size: clamp(0.64rem, 0.76rem, 0.9rem);
}

.topbar-special .special-item.playful strong {
  -webkit-line-clamp: 2;
  line-height: 1.08;
}

.topbar-special .special-item.birthday .birthday-line {
  font-size: clamp(0.82rem, 0.98rem, 1.12rem);
  font-weight: 900;
}

.topbar-special .special-item span {
  font-size: clamp(0.58rem, 0.68rem, 0.8rem);
}

.topbar-special .special-item .national-country {
  font-size: clamp(0.72rem, 0.84rem, 0.98rem);
  font-weight: 850;
}

.topbar-special .special-item .national-label {
  font-size: clamp(0.72rem, 0.84rem, 0.98rem);
  font-weight: 500;
}

.ticker {
  position: relative;
  z-index: 4;
  height: var(--ticker-height);
  margin: 0 calc(-1 * var(--screen-pad-x));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.48);
  color: #17201d;
  border-top: 1px solid rgba(23, 32, 29, 0.16);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: normal;
  font-weight: 850;
  font-size: clamp(0.78rem, 0.96rem, 1.12rem);
}

#announcementArea {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 0 8px 0 calc(var(--screen-pad-x) + var(--edge-inset));
  overflow: hidden;
}

.connection-status {
  flex: 0 0 clamp(34px, 3.2vw, 46px);
  align-self: stretch;
  display: grid;
  place-items: center;
  margin-right: var(--screen-pad-x);
  border-left: 1px solid rgba(23, 32, 29, 0.14);
}

.connection-status-light {
  width: clamp(11px, 1vw, 14px);
  height: clamp(11px, 1vw, 14px);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: #c62828;
  box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2), 0 0 10px rgba(198, 40, 40, 0.5);
}

.connection-status.is-online .connection-status-light {
  background: #16884a;
  box-shadow: 0 0 0 2px rgba(22, 136, 74, 0.2), 0 0 10px rgba(22, 136, 74, 0.52);
}

.copyright-footer {
  position: fixed;
  right: var(--screen-pad-x);
  bottom: calc(var(--ticker-height) + 5px);
  z-index: 7;
  color: #17201d;
  font-size: clamp(0.62rem, 0.74rem, 0.86rem);
  font-weight: 650;
  opacity: 0.3;
  pointer-events: none;
}

.ticker-source {
  display: inline-block;
  margin: 0 8px 0 0;
  border: 2px solid #d92525;
  border-radius: 5px;
  padding: 2px 8px;
  color: #0d5c63;
  line-height: 1.1;
}

.ticker-announcement {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.48);
  padding: 5px 10px;
}

.ticker-announcement.is-new {
  background: rgba(255, 235, 132, 0.72);
}

.ticker-announcement.is-breaking .ticker-source {
  background: #d92525;
  border-color: #d92525;
  color: #ffffff;
}

.ticker-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px), (max-height: 760px) {
  :root {
    --header-height: clamp(72px, 9svh, 92px);
    --ticker-height: 44px;
    --screen-gap: 10px;
    --panel-pad: 10px;
    --layout-left: minmax(190px, 0.74fr);
    --layout-center: minmax(440px, 1.62fr);
    --layout-right: minmax(230px, 0.84fr);
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    margin-bottom: 10px;
    font-size: 1.08rem;
  }

  .clock {
    font-size: 2.05rem;
  }

  .header-right {
    grid-template-columns: minmax(0, 1fr) minmax(108px, auto);
    gap: 6px;
  }

  .time-block #dateLabel {
    font-size: 0.76rem;
  }

  .weather-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .weather-wind {
    display: none;
  }

  .weather-location {
    display: none;
  }

  .next-item,
  .item,
  .special-item,
  .week-event {
    padding: 8px;
  }

  .day-header {
    min-height: 42px;
  }

  .week-calendar {
    --calendar-day-header-height: 42px;
  }
}

@media (orientation: portrait), (max-width: 980px) {
  body {
    overflow: auto;
  }

  .screen {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto var(--ticker-height);
  }

  .maintenance-banner {
    font-size: clamp(0.72rem, 3.6vw, 1rem);
    letter-spacing: 0.04em;
  }

  .maintenance-banner-visible .screen {
    padding-top: calc(var(--screen-pad-top) + var(--maintenance-banner-height) + 4px);
  }

  .topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .hide-title .topbar {
    grid-template-columns: 1fr;
  }



  .time-block {
    justify-items: start;
    text-align: left;
    padding-right: 0;
  }

  .header-right {
    grid-template-columns: 1fr;
  }

  .weather-strip {
    justify-self: stretch;
    width: 100%;
  }

  .main-grid {
    grid-template-columns: 1fr;
  }

  .left-stack,
  .side {
    display: contents;
  }

  .next-panel {
    order: 1;
  }

  .menu-panel {
    order: 2;
  }

  .week-panel {
    order: 3;
  }

  .story-panel-shell {
    order: 4;
    min-height: 260px;
  }

  .weeks-stack {
    grid-template-rows: none;
    height: auto;
  }

  .week-section {
    min-height: 520px;
  }

  .week-calendar {
    grid-template-columns: 1fr;
    grid-template-rows: none !important;
    height: auto;
  }

  .day-events {
    margin-top: 0;
  }

  .day-column,
  .week-event {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .multi-day-layer {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .week-calendar.has-multi-day .day-events {
    padding-top: 5px;
  }

  #specialDays {
    height: auto;
  }
}

@media (min-aspect-ratio: 21 / 9) {
  :root {
    --layout-left: minmax(280px, 0.62fr);
    --layout-center: minmax(760px, 2fr);
    --layout-right: minmax(340px, 0.78fr);
  }
}

/* Shared seasonal shell: seasons change atmosphere, never widget placement. */
body {
  color: var(--shell-text);
}

.background-photo {
  filter: var(--shell-photo-filter);
}

.background-shade {
  background: var(--shell-shade);
}

.topbar {
  align-items: stretch;
  border: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  box-shadow: none;
}

.title-block,
.weather-strip,
.header-right,
.hide-title .topbar .time-block,
.hide-title .topbar-special {
  min-height: 0;
  border: 1px solid var(--shell-border);
  border-radius: var(--panel-radius);
  background: var(--shell-surface);
  backdrop-filter: blur(6px);
  box-shadow: var(--shell-shadow);
}

.title-block {
  display: grid;
  align-content: center;
  padding: 12px var(--edge-inset);
}

.header-right {
  padding: 10px var(--edge-inset);
}

.hide-title .header-right {
  padding: 0;
}

.hide-title .topbar .time-block,
.hide-title .topbar-special {
  align-self: stretch;
  padding: 12px var(--edge-inset);
}

.hide-title .topbar .weather-strip {
  min-height: 100%;
  padding: 10px 14px;
}

.glass-panel {
  border: 1px solid var(--shell-border);
  border-top: 3px solid var(--shell-accent);
  background: var(--shell-surface);
  box-shadow: var(--shell-shadow);
}

.week-panel {
  border-top-color: var(--shell-accent-secondary);
  background: var(--shell-surface-strong);
}

.menu-panel {
  border-top-color: var(--shell-accent-secondary);
}

.story-panel-shell {
  border-top-color: var(--shell-heading);
}

h1,
h2,
.clock,
.story-text,
.weather-temp {
  color: var(--shell-text);
}

h2,
.weather-location,
.weather-empty,
.story-kicker {
  color: var(--shell-heading);
}

.topbar p,
.weather-day-name,
.weather-date-label,
.weather-wind,
.week-title span,
.week-label,
.day-header span,
.week-event span,
.week-event small,
.next-item span,
.next-item small,
.item span,
.special-item span,
.special-item small,
.special-item .national-label,
.story-source {
  color: var(--shell-muted);
}

.week-title {
  min-height: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--shell-border);
}

.day-column {
  border-color: var(--shell-border);
  background: var(--shell-surface-soft);
}

.day-header {
  border-bottom-color: var(--shell-border);
}

.next-item,
.item,
.special-item,
.week-event {
  background: var(--shell-item);
}

.next-item,
.item,
.week-event {
  border-left-color: var(--shell-accent);
}

.story-snippet {
  border: 0;
  background: transparent;
  padding: clamp(14px, 2svh, 22px) clamp(12px, 1.4svw, 22px);
}

.ticker {
  border-color: var(--shell-border);
  background: var(--shell-surface-strong);
  color: var(--shell-text);
}

.ticker-source {
  color: var(--shell-heading);
  border-color: var(--shell-accent-secondary);
}

.copyright-footer {
  color: var(--shell-text);
  background: transparent;
  box-shadow: none;
}

.season-spring {
  --shell-text: #18322b;
  --shell-muted: #4f655d;
  --shell-heading: #176a5b;
  --shell-accent: #3d8b61;
  --shell-accent-secondary: #d19b39;
  --shell-border: rgba(34, 83, 65, 0.18);
  --shell-surface: rgba(246, 250, 245, 0.8);
  --shell-surface-strong: rgba(252, 253, 249, 0.87);
  --shell-surface-soft: rgba(228, 240, 229, 0.78);
  --shell-item: rgba(255, 255, 252, 0.68);
  --shell-shadow: 0 14px 34px rgba(31, 65, 51, 0.15);
  --shell-photo-filter: brightness(0.84) saturate(0.8) contrast(0.98);
  --shell-shade: rgba(29, 52, 42, 0.08);
  background: #2e4238;
}

.season-summer {
  --shell-text: #183036;
  --shell-muted: #50666b;
  --shell-heading: #096a72;
  --shell-accent: #168f86;
  --shell-accent-secondary: #d59a25;
  --shell-border: rgba(19, 88, 91, 0.18);
  --shell-surface: rgba(245, 251, 248, 0.8);
  --shell-surface-strong: rgba(253, 253, 248, 0.87);
  --shell-surface-soft: rgba(225, 240, 234, 0.78);
  --shell-item: rgba(255, 255, 252, 0.68);
  --shell-shadow: 0 14px 34px rgba(21, 65, 67, 0.15);
  --shell-photo-filter: brightness(0.8) saturate(0.82) contrast(0.98);
  --shell-shade: rgba(24, 55, 50, 0.1);
  background: #28433d;
}

.season-autumn {
  --shell-text: #362920;
  --shell-muted: #65594e;
  --shell-heading: #77452d;
  --shell-accent: #68784c;
  --shell-accent-secondary: #b65e2e;
  --shell-border: rgba(101, 74, 53, 0.24);
  --shell-surface: rgba(244, 242, 233, 0.8);
  --shell-surface-strong: rgba(250, 248, 240, 0.87);
  --shell-surface-soft: rgba(225, 227, 211, 0.78);
  --shell-item: rgba(255, 252, 244, 0.68);
  --shell-shadow: 0 14px 34px rgba(52, 37, 25, 0.2);
  --shell-photo-filter: brightness(0.88) saturate(0.78) contrast(0.98);
  --shell-shade: rgba(35, 24, 18, 0.08);
  background: #302922;
}

.season-winter {
  --shell-text: #18303e;
  --shell-muted: #536875;
  --shell-heading: #246878;
  --shell-accent: #397f83;
  --shell-accent-secondary: #5f8fa0;
  --shell-border: rgba(76, 121, 142, 0.25);
  --shell-surface: rgba(238, 245, 244, 0.82);
  --shell-surface-strong: rgba(248, 250, 248, 0.89);
  --shell-surface-soft: rgba(218, 232, 234, 0.8);
  --shell-item: rgba(251, 253, 250, 0.68);
  --shell-shadow: 0 14px 34px rgba(21, 46, 59, 0.2);
  --shell-photo-filter: brightness(0.84) saturate(0.7) contrast(0.98);
  --shell-shade: linear-gradient(135deg, rgba(29, 52, 64, 0.14), rgba(210, 225, 228, 0.06));
  background: #28383e;
}

.seasonal-edge-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.seasonal-sprig,
.seasonal-bauble {
  display: none;
  position: absolute;
}

.season-spring .seasonal-sprig,
.season-summer .seasonal-sprig,
.season-winter:not(.advent-overlay) .seasonal-sprig {
  display: block;
  width: 132px;
  height: 78px;
}

.season-spring .seasonal-sprig {
  opacity: 0.72;
  background:
    radial-gradient(circle at 15% 50%, #d8e3c1 0 4%, transparent 5%),
    radial-gradient(ellipse at 31% 31%, #8fae69 0 9%, transparent 10%),
    radial-gradient(ellipse at 49% 60%, #bed18e 0 8%, transparent 9%),
    radial-gradient(ellipse at 69% 32%, #729653 0 9%, transparent 10%),
    radial-gradient(circle at 89% 55%, #edf0d7 0 4%, transparent 5%),
    linear-gradient(158deg, transparent 47%, rgba(72, 76, 50, 0.78) 48% 51%, transparent 52%);
  filter: drop-shadow(0 5px 7px rgba(26, 49, 38, 0.26));
}

.season-summer .seasonal-sprig {
  opacity: 0.74;
  background:
    radial-gradient(ellipse at 14% 54%, #2d7651 0 13%, transparent 14%),
    radial-gradient(circle at 32% 28%, #e8d572 0 5%, transparent 6%),
    radial-gradient(ellipse at 47% 59%, #4b8d59 0 14%, transparent 15%),
    radial-gradient(circle at 66% 29%, #f0e7b1 0 5%, transparent 6%),
    radial-gradient(ellipse at 85% 57%, #276b50 0 13%, transparent 14%),
    linear-gradient(158deg, transparent 47%, rgba(50, 87, 53, 0.8) 48% 51%, transparent 52%);
  filter: drop-shadow(0 5px 7px rgba(20, 55, 44, 0.28));
}

.season-winter:not(.advent-overlay) .seasonal-sprig {
  opacity: 0.7;
  background:
    radial-gradient(circle at 13% 52%, rgba(232, 244, 246, 0.92) 0 4%, transparent 5%),
    radial-gradient(circle at 29% 31%, rgba(174, 210, 220, 0.9) 0 4%, transparent 5%),
    radial-gradient(circle at 48% 59%, rgba(237, 246, 247, 0.94) 0 5%, transparent 6%),
    radial-gradient(circle at 68% 30%, rgba(164, 200, 211, 0.9) 0 4%, transparent 5%),
    radial-gradient(circle at 89% 55%, rgba(236, 245, 247, 0.94) 0 5%, transparent 6%),
    linear-gradient(158deg, transparent 47%, rgba(90, 119, 130, 0.86) 48% 51%, transparent 52%);
  filter: drop-shadow(0 4px 7px rgba(16, 35, 46, 0.34));
}

.season-autumn .seasonal-sprig {
  display: block;
  width: 132px;
  height: 78px;
  opacity: 0.68;
  background:
    radial-gradient(ellipse at 15% 54%, #873e26 0 13%, transparent 14%),
    radial-gradient(ellipse at 35% 28%, #b0612d 0 15%, transparent 16%),
    radial-gradient(ellipse at 55% 58%, #c18335 0 14%, transparent 15%),
    radial-gradient(ellipse at 76% 30%, #687344 0 14%, transparent 15%),
    radial-gradient(ellipse at 91% 60%, #8f4529 0 12%, transparent 13%),
    linear-gradient(158deg, transparent 47%, rgba(80, 51, 31, 0.78) 48% 51%, transparent 52%);
  filter: drop-shadow(0 5px 7px rgba(42, 25, 15, 0.3));
}

.seasonal-sprig-top-left { top: 2px; left: 2px; transform: rotate(-12deg); }
.seasonal-sprig-bottom-right { right: 2px; bottom: calc(var(--ticker-height) + 2px); transform: rotate(168deg); }

.advent-overlay .seasonal-sprig {
  display: block;
  width: 120px;
  height: 34px;
  opacity: 0.76;
  border-radius: 60% 12%;
  background: repeating-linear-gradient(12deg, transparent 0 8px, #163e2c 9px 13px, transparent 14px 19px), linear-gradient(#214b35, #173a2a);
}

.advent-overlay .seasonal-sprig-bottom-right { bottom: 18px; }

.advent-overlay .seasonal-bauble {
  display: block;
  width: 13px;
  height: 17px;
  border-top: 3px solid #c8a45c;
  border-radius: 50%;
  background: #9e2926;
  box-shadow: 0 2px 5px rgba(45, 12, 10, 0.28);
}

.seasonal-bauble-1 { top: 24px; left: 30px; }
.seasonal-bauble-2 { top: 14px; left: 78px; }
.seasonal-bauble-3 { right: 28px; bottom: 27px; }
.seasonal-bauble-4 { right: 72px; bottom: 14px; }
.seasonal-bauble-5 { right: 102px; bottom: 31px; }

body.brightness-night.season-autumn .screen { filter: brightness(0.44) saturate(0.76); }
body.brightness-night.season-winter .screen { filter: brightness(0.43) saturate(0.72); }

@media (prefers-reduced-motion: reduce) {
  .seasonal-edge-layer,
  .seasonal-edge-layer * {
    animation: none !important;
    transition: none !important;
  }
}