@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --stock: #edd41e;        /* sulfur almanac stock */
  --stock-deep: #dcc110;
  --ink: #16130e;          /* the one press ink */
  --ink-soft: #3d3418;     /* ink thinned on yellow, 8.2:1 */
  --paper: #fff7d6;        /* lit face of the moon */
  --indigo: #2430a8;       /* tonight, and only tonight */

  --rule: 1px solid var(--ink);
  --rule-heavy: 3px solid var(--ink);
  --gutter: clamp(16px, 3vw, 48px);
  --gap: clamp(12px, 1.6vw, 24px);

  --table: 600 0.8125rem/1.2 "Archivo", system-ui, sans-serif;
  --stretch-table: 78%;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

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

html {
  background: var(--stock);
  color: var(--ink);
  scrollbar-color: var(--ink) var(--stock-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font: var(--table);
  font-stretch: var(--stretch-table);
  font-variant-numeric: tabular-nums;
  background-color: var(--stock);
  /* paper fibre: a whisper of grain so the yellow reads as stock, not screen */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .03 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

::selection { background: var(--indigo); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

.defs { position: absolute; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ink { fill: var(--ink); }
.paper { fill: var(--paper); }

/* ── Sheet ─────────────────────────────────────────────── */

.sheet {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas:
    "head head head head head head head head head head head head"
    "mark mark mark mark mark mark mark mark mark mark mark mark"
    "cycl cycl cycl cycl cycl cycl cycl cycl cycl cycl cycl cycl"
    "stmt stmt stmt stmt stmt stmt stmt plat plat plat plat plat"
    "foot foot foot foot foot foot foot foot foot foot foot foot";
  column-gap: var(--gap);
  padding-inline: var(--gutter);
  max-width: 1920px;
  margin-inline: auto;
}

/* ── Running head ─────────────────────────────────────── */

.runhead {
  grid-area: head;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  padding-block: 14px 10px;
  border-bottom: var(--rule-heavy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.runhead__date { text-align: center; }
.runhead__lunation { text-align: right; }

/* ── Wordmark: the largest voice on the sheet ─────────── */

.mark {
  grid-area: mark;
  margin: 0;
  padding-block: clamp(6px, 0.8vw, 12px) 0;
  border-bottom: var(--rule);
  display: flex;
  line-height: 1;
  overflow: hidden;
}
.mark__word {
  display: inline-block;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 900;
  font-stretch: 62%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  padding-right: 0.02em; /* the last letter keeps its full foot */
  white-space: nowrap;
  /* fallback size; app.js fits the word to the measure exactly */
  font-size: 27vw;
  line-height: 0.76;
  margin-bottom: -0.03em;
}

/* ── The cycle row ────────────────────────────────────── */

.cycle {
  grid-area: cycl;
  padding-block: 10px 0;
  border-bottom: var(--rule-heavy);
}
.cycle__legend {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
}
.cycle__hint { color: var(--ink-soft); }

.cycle__row {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  border-top: var(--rule);
}

.day {
  all: unset;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: 6px;
  padding: 8px 0 10px;
  border-right: var(--rule);
  cursor: pointer;
  font: var(--table);
  font-stretch: var(--stretch-table);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s var(--ease-out);
}
.day:first-child { border-left: var(--rule); }
.day__month {
  height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
  color: var(--ink-soft);
}
.day__disc { width: min(26px, 70%); aspect-ratio: 1; display: block; }
.day__num { line-height: 1; }

.day:hover,
.day[aria-pressed="true"]:not(.day--tonight) { background: var(--stock-deep); }
.day:focus-visible { outline-offset: -4px; }

.day--tonight {
  background: var(--indigo);
  color: var(--paper);
}
.day--tonight .day__month { color: var(--paper); }
.day--tonight:focus-visible { outline-color: var(--paper); }

.day__tara {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 24px; height: 24px;
  translate: -50% 0;
  fill: var(--indigo);
  stroke: var(--stock);
  stroke-width: 2.5px;
  paint-order: stroke;
  overflow: visible;
  z-index: 1;
}

.day--next::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--ink);
  pointer-events: none;
}

/* ── Statement ────────────────────────────────────────── */

.statement {
  grid-area: stmt;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 24px);
  padding-block: clamp(20px, 2vw, 32px);
}
.statement .statement__line { margin-top: auto; }
.statement .key { margin-top: clamp(8px, 1vw, 16px); margin-right: calc(-1 * var(--gap)); }
.statement__line,
.statement__soon {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(2.125rem, 3.7vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
.statement__soon {
  padding-top: clamp(10px, 1.2vw, 18px);
  border-top: var(--rule-heavy);
  align-self: flex-start;
}

.key {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: var(--rule);
}
.statement__contact {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.statement__contact-label { color: var(--ink-soft); }
.statement__contact a {
  color: var(--ink);
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: background-color 0.2s var(--ease-out);
}
.statement__contact a:hover { background: var(--stock-deep); text-decoration-thickness: 3px; }

.key { min-height: 2.75rem; }
.key__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.key__row { padding-bottom: 0; padding-top: 2px; }
.key__row + .key__row { padding-left: 20px; border-left: var(--rule); }
.key__row { padding-right: 20px; }
.key__swatch { width: 18px; height: 18px; flex: none; }
.key__swatch--tonight { background: var(--indigo); }
.key__swatch--next { border: 1px dashed var(--ink); }
.key dt { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.key dd { margin: 0; color: var(--ink-soft); }
.key dd::before { content: "= "; }
.key__glyph { width: 18px; height: 18px; flex: none; }

/* ── The plate ────────────────────────────────────────── */

.plate {
  grid-area: plat;
  margin: 0;
  padding-block: clamp(20px, 2vw, 32px);
  padding-left: var(--gap);
  border-left: var(--rule);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  justify-items: center;
  align-items: center;
}
.plate__moon {
  width: clamp(220px, calc(100svh - 620px), 440px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  overflow: visible;
}
/* earthshine: the dark side keeps a ghost of the real map, barely */
.earthshine { opacity: 0.1; }
.limb { fill: none; stroke: var(--ink); stroke-width: 1.5; }

.plate__caption {
  width: calc(100% + var(--gap));
  margin-left: calc(-1 * var(--gap));
  padding-left: var(--gap);
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap);
  padding-top: 2px;
  border-top: var(--rule);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plate__when { font-weight: 800; }
.plate__phase { text-align: center; }
.plate__lit { text-align: right; }

/* ── Colophon ─────────────────────────────────────────── */

.colophon {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 10px 16px;
  border-top: var(--rule-heavy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.colophon__note { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); text-align: right; text-transform: none; letter-spacing: 0.02em; }
.colophon__tara { width: 12px; height: 12px; fill: var(--ink); flex: none; }

/* ── Narrower sheets ──────────────────────────────────── */

@media (max-width: 1100px) {
  .cycle__row { grid-template-columns: repeat(15, minmax(0, 1fr)); }
  .day:nth-child(15n + 1) { border-left: var(--rule); }
  .day:nth-child(n + 16) { border-top: var(--rule); }
}

@media (max-width: 760px) {
  .sheet {
    grid-template-rows: none;
    grid-template-areas:
      "head head head head head head head head head head head head"
      "mark mark mark mark mark mark mark mark mark mark mark mark"
      "stmt stmt stmt stmt stmt stmt stmt stmt stmt stmt stmt stmt"
      "plat plat plat plat plat plat plat plat plat plat plat plat"
      "cycl cycl cycl cycl cycl cycl cycl cycl cycl cycl cycl cycl"
      "foot foot foot foot foot foot foot foot foot foot foot foot";
  }
  .runhead { flex-wrap: wrap; row-gap: 4px; }
  .runhead__title { flex-basis: 100%; }
  .runhead__date { text-align: left; }
  .plate {
    border-left: 0;
    padding-left: 0;
    padding-block: 24px 12px;
  }
  .plate__moon { width: min(62vw, 260px); }
  .plate__caption { width: 100%; margin-left: 0; padding-left: 0; gap: 12px; }
  .statement { padding-block: 20px 16px; gap: 16px; }
  .statement .statement__line { margin-top: 0; }
  .statement .key { margin-right: 0; }
  .plate { border-top: var(--rule-heavy); }
  .cycle { padding-top: 12px; border-bottom: var(--rule-heavy); }
  .cycle__row { border-bottom: var(--rule); }
  .cycle__row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .day:nth-child(15n + 1) { border-left: 0; }
  .day:nth-child(10n + 1) { border-left: var(--rule); }
  .day:nth-child(n + 11) { border-top: var(--rule); }
  .cycle__hint { display: none; }
  .key { display: grid; grid-template-columns: 1fr 1fr; }
  .key__row + .key__row { border-left: 0; padding-left: 0; }
  .key__row:nth-child(even) { border-left: var(--rule); padding-left: 16px; }
  .colophon { flex-direction: column; gap: 6px; }
  .colophon__note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .day { transition: none; }
}