/* tokens, locked off the approved art + ui-ux-pro-max block-based/bold direction (overridden with the meme's own dusk-orange cel palette instead of the generic calendar-blue it suggested)
   sky-1 #d98d42  sky-2 #b6672c  paper #f2e5d1  ink #17130f  mustard #c9863f  accent (chain neon) #ccff00
   type: Bangers (cartoon display) + Red Hat Mono (CA / numbers / labels)
   radius: 0 everywhere but the calendar rings. shadow: hard offset only, never blurred. motion: cursor-follow head tilt + one load-time stagger */

@font-face {
  font-family: "Bangers";
  src: url("assets/fonts/bangers-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --sky-1: #dd9349;
  --sky-2: #b3672c;
  --paper: #f2e5d1;
  --paper-2: #e9d8bc;
  --ink: #17130f;
  --mustard: #c9863f;
  --accent: #ccff00;
  --font-display: "Bangers", "Arial Narrow", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.10), transparent 55%),
    linear-gradient(180deg, var(--sky-1), var(--sky-2));
  color: var(--ink);
  font-family: var(--font-mono);
  overflow-x: hidden;
}

.stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vh, 28px) clamp(10px, 3vw, 24px);
}

.wall {
  position: relative;
  width: min(560px, 100%);
  /* reserves real flow height for the vulture above the card, so the page's own vertical
     centering accounts for it and the head is never clipped off the top of short viewports */
  padding-top: clamp(80px, calc(22vw - 10px), 150px);
}

/* the vulture, perched on the calendar's top frame, its head tilts toward the pointer */
.vulture {
  position: absolute;
  top: 0;
  right: 4%;
  width: clamp(170px, 40vw, 300px);
  height: auto;
  z-index: 3;
  pointer-events: none;
  transform-origin: 58% 82%;
  transition: transform 260ms ease-out;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.18));
}

.rings {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  padding: 0 22px;
  z-index: 2;
}
.rings span {
  width: 18px; height: 18px;
  margin-bottom: -9px;
  border-radius: 50%;
  background: #8b8b8b;
  border: 3px solid var(--ink);
}

.card {
  position: relative;
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(23,19,15,0.5);
  padding: 26px clamp(14px, 4vw, 26px) 0;
  z-index: 1;
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.nav-btn {
  width: 34px; height: 34px;
  border: 3px solid var(--ink);
  background: var(--paper-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  flex: none;
}
.nav-btn:active { background: var(--mustard); }
.nav-btn .tri {
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.nav-btn.prev .tri { border-right: 10px solid var(--ink); }
.nav-btn.next .tri { border-left: 10px solid var(--ink); }

.month-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 38px);
  letter-spacing: 0.02em;
  text-align: center;
  flex: 1;
  line-height: 1;
}

.tagline {
  flex: 1;
  font-size: clamp(10px, 2.4vw, 13px);
  color: #4a4038;
  margin: 0;
  font-weight: 500;
  line-height: 1.3;
}
.tagline strong { color: var(--ink); font-weight: 700; }

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 700;
  color: #6b5f52;
  text-align: center;
  padding-bottom: 4px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.cell {
  position: relative;
  aspect-ratio: 1 / 0.82;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-size: clamp(9px, 2.2vw, 12px);
  padding: 3px 4px;
  overflow: hidden;
}
.cell.empty { background: rgba(23,19,15,0.04); }
.cell .num { position: relative; z-index: 1; opacity: 0.75; }
.cell.today .num { font-weight: 700; color: #7a1d10; }
.cell.today { background: rgba(204,255,0,0.16); }

.x-mark {
  position: absolute;
  inset: 8% 6% auto auto;
  left: 8%; right: 8%; top: 14%; bottom: 8%;
  pointer-events: none;
}
.x-mark span {
  position: absolute;
  top: 50%; left: 50%;
  width: 128%; height: 15%;
  background: var(--ink);
  transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  transform-origin: center;
}
.x-mark span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
.cell.crossed .x-mark span {
  animation: xpop 260ms cubic-bezier(.2,1.4,.4,1) forwards;
  animation-delay: var(--xd, 0ms);
}
.cell.crossed .x-mark span:nth-child(2) { animation-name: xpop2; }
@keyframes xpop { to { transform: translate(-50%, -50%) rotate(43deg) scaleX(1); } }
@keyframes xpop2 { to { transform: translate(-50%, -50%) rotate(-43deg) scaleX(1); } }

/* the head area: tagline on the left, the cliff note taped on the right - both in normal flow
   so nothing ever overlaps the grid or the nav buttons below it */
.head-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* the cliff note, always exactly CLIFF_OFFSET months past whatever month is showing */
.cliff {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff7e6;
  border: 3px solid var(--ink);
  padding: 5px 9px;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 rgba(23,19,15,0.4);
}
.cliff .tape {
  position: absolute;
  top: -9px; left: 50%;
  width: 34px; height: 14px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(242,229,209,0.8);
  border: 1px solid rgba(23,19,15,0.3);
}
.cliff-ring {
  width: 26px; height: 26px;
  flex: none;
}
.cliff-text { text-align: left; line-height: 1.15; }
.cliff-label {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b5f52;
  display: block;
}
.cliff-month {
  font-size: 12px;
  font-weight: 700;
}

.strip {
  position: relative;
  margin: 22px -1px 0;
  padding-top: 16px;
  border-top: 3px dashed var(--ink);
}
.strip::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 92%; height: 16px;
  background-image: radial-gradient(circle, var(--sky-2) 3px, transparent 3.5px);
  background-size: 16px 16px;
  background-position: 0 0;
  background-repeat: repeat-x;
  opacity: 0.55;
}

.chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 0 0 16px;
  font-size: clamp(10px, 2.4vw, 12px);
}

.ticker {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ca {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 13px);
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.ca:active { background: #3a2f24; }

.chrome a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.sep { color: #8a7b6a; }
.status { color: #4a4038; }
.canary { color: #4a4038; margin-left: auto; }

@media (max-width: 420px) {
  .head-info { flex-direction: column; align-items: stretch; gap: 8px; }
  .cliff { align-self: flex-start; }
  .canary { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vulture { transition: none; }
  .cell.crossed .x-mark span { animation: none; transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
  .cell.crossed .x-mark span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }
}