/* Agoramores — "october" theme overrides. Loaded after main.css.
   Every selector here is scoped to body[data-theme-id="october"]. */

/* October — 8-bit pumpkin patch. An NES-era harvest stage replaces the old wood line:
   banded night sky, square pixel stars, a tilled field of hard-edged furrows that widen
   toward the viewer, and pure-CSS pumpkin sprites. Every sprite tile is sixteen blocks
   wide and every gradient stop is a multiple of 6.25%, so each colour edge lands on a
   whole pixel and nothing anti-aliases. Pumpkin orange is the anchor and a four-step
   purple ramp co-leads it — twilight sky, pumpkin shading, content borders, links and
   half the heading spectrum — while the crimson holds the red anchor as an ember.
   No blurs, no soft shadows, no trees. */
body[data-theme-id="october"] {
  /* Nineteen flat colours, NES-style. No in-between shades anywhere in the theme.
     grape → plum → purple → violet → magenta is the purple ramp: the first two are
     structure/shadow, the last three all clear 3:1 on --oct-night so they can carry
     text, borders and heading stops without collapsing into the indigo ground. */
  --oct-void: #160904;
  --oct-night: #211108;
  --oct-dusk: #341c11;
  --oct-grape: #522311;
  --oct-plum: #673129;
  --oct-purple: #c26348;
  --oct-violet: #e4a493;
  --oct-magenta: #f85452;
  --oct-ember: #e82820;
  --oct-pumpkin: #f87800;
  --oct-pumpkin-deep: #c04c00;
  --oct-harvest: #f8b800;
  --oct-lime: #9cc020;
  --oct-vine: #3ca030;
  --oct-dirt: #8c5424;
  --oct-loam: #6b3e18;
  --oct-soil: #4c2c10;
  --oct-bone: #f6e6be;
  --oct-straw: #c0a070;

  /* Pixel grid. One furrow unit sets the field; three block sizes set the pumpkin
     rows. Whole-pixel multiples only — the mobile block below scales the same vars. */
  --oct-fu: 8px;
  --oct-field-h: calc(var(--oct-fu) * 22);
  --oct-pk-back: 3px;
  --oct-pk-mid: 5px;
  --oct-pk-front: 7px;

  --tt-bg: var(--oct-night);
  /* Link-hover paired to THIS block's ground (standing rule 2026-08-14),
     not the mode name — october's unmoded block is night, its own canonical
     lighting. #14102e is dark: #FF465A clears 5.49:1 here. */
  --link-hover: #FF4947;
  --tt-bg-alt: var(--oct-dusk);
  --tt-cyan: var(--oct-bone);
  --tt-cyan-soft: var(--oct-straw);
  --tt-yellow: var(--oct-harvest);
  --tt-orange: var(--oct-pumpkin);
  --tt-chartreuse: var(--oct-lime);
  --tt-green: var(--oct-vine);
  --tt-pink: var(--oct-magenta);
  --tt-purple: var(--oct-purple);
  --tt-blue: var(--oct-violet);
  --tt-teal: var(--oct-dirt);
  --tt-gray: var(--oct-straw);
  --tt-gold: var(--oct-harvest);
  --tt-red: var(--oct-ember);
  --tt-breadcrumb-text: var(--oct-harvest);
  /* 8-bit hardware had no bloom: every glow token resolves to nothing. */
  --tt-breadcrumb-glow: transparent;
  /* Hover/focus halo for the zodiac glyphs. This month's breadcrumb glow is
     too faint to trace a character, so the chips get their own value; the
     rule that uses it lives once in main.css. Never a border. */
  --zodiac-glow: rgba(248, 184, 0, 0.7);
  /* Structural border palette: hard stops, ember leads AND CLOSES. Magenta and
     purple take the two slots that used to be lime and dirt, so every rail, frame
     and section marker carries the purple ramp as loudly as it carries the
     pumpkin.

     Ember moved from the mid-cycle slot to the last one on 2026-08-18, and vine
     took the slot it left, so the cycle is red at both ends the way every other
     sheet's is. That is not a taste call: main.css's frame paints its head and
     foot with this token and its rails with the vertical one, and the two meet
     in each corner square. A ramp that opens ember and closes vine puts a green
     corner block against a run of red teeth at the top-right and the
     bottom-left — the one visible defect the roll-out to all fourteen sheets
     turned up. All eight hues are still here and ember still leads. */
  --tt-heading-rainbow: linear-gradient(
    90deg,
    var(--oct-ember) 0 12.5%,
    var(--oct-pumpkin) 12.5% 25%,
    var(--oct-harvest) 25% 37.5%,
    var(--oct-magenta) 37.5% 50%,
    var(--oct-vine) 50% 62.5%,
    var(--oct-purple) 62.5% 75%,
    var(--oct-lime) 75% 87.5%,
    var(--oct-ember) 87.5% 100%
  );
  --tt-heading-rainbow-vertical: linear-gradient(
    180deg,
    var(--oct-ember) 0 12.5%,
    var(--oct-pumpkin) 12.5% 25%,
    var(--oct-harvest) 25% 37.5%,
    var(--oct-magenta) 37.5% 50%,
    var(--oct-vine) 50% 62.5%,
    var(--oct-purple) 62.5% 75%,
    var(--oct-lime) 75% 87.5%,
    var(--oct-ember) 87.5% 100%
  );
  /* Two identical eight-colour cycles across a 200% background, so the stepped
     heading animation lands one whole colour block per frame and loops seamlessly.
     Violet and magenta replace the old straw and vine slots: both clear 4.3:1 and
     5.4:1 on --oct-night, so the purple reads as a heading colour rather than a
     smudge, and the cycle stays red-led with ember at stops one and six. */
  --tt-heading-text-rainbow: linear-gradient(
    90deg,
    var(--oct-ember) 0 6.25%,
    var(--oct-pumpkin) 6.25% 12.5%,
    var(--oct-harvest) 12.5% 18.75%,
    var(--oct-violet) 18.75% 25%,
    var(--oct-lime) 25% 31.25%,
    var(--oct-ember) 31.25% 37.5%,
    var(--oct-magenta) 37.5% 43.75%,
    var(--oct-bone) 43.75% 50%,
    var(--oct-ember) 50% 56.25%,
    var(--oct-pumpkin) 56.25% 62.5%,
    var(--oct-harvest) 62.5% 68.75%,
    var(--oct-violet) 68.75% 75%,
    var(--oct-lime) 75% 81.25%,
    var(--oct-ember) 81.25% 87.5%,
    var(--oct-magenta) 87.5% 93.75%,
    var(--oct-bone) 93.75% 100%
  );
  --font-heading: var(--font-mono);
  --bg: var(--oct-night);
  --surface: transparent;
  --text: var(--tt-cyan);
  --text-soft: var(--tt-cyan-soft);
  --muted: var(--tt-gray);
  /* Pumpkin keeps the loud structural frame; purple takes every quiet one, so the
     two colours split the theme's structure instead of purple hiding in a gradient. */
  --border: var(--oct-pumpkin);
  --border-dim: var(--oct-purple);
  --border-teal: var(--oct-purple);
  background: var(--oct-night);
  color: var(--tt-cyan);
  color-scheme: dark;
}

/* Chunkier CRT: two-on two-off scanlines in the sky's own darkest colour. Kept light
   enough that it reads as a screen artefact and not as banding over the sprites. */
body[data-theme-id="october"]::before {
  background: repeating-linear-gradient(0deg, rgba(22, 9, 4, 0.13) 0 2px, transparent 2px 4px);
}

/* The one element allowed its own background takes the deep grape, framed in pumpkin —
   the theme's two lead colours meeting on the most-looked-at strip of chrome. */
body[data-theme-id="october"] .breadcrumb-nav {
  border-radius: 0;
  background: var(--oct-grape);
  box-shadow: none;
}

/* The soft skewed sweep is a CRT-era luxury the palette can't afford. */
body[data-theme-id="october"] .breadcrumb-nav::before {
  display: none;
}

/* Sky in flat bands, plus a six-band sunset that sits directly on the field's
   horizon line so it never drifts away from the ground plane. Purple owns the whole
   descent — void, night, dusk, grape, plum — and the sunset strip below it opens on
   grape and plum, with magenta as the thin hot line where the twilight meets the
   ember. This is the theme's biggest purple surface and the main reason it now reads
   as a co-lead. Stop positions keep the lighter purples in the lower third, where a
   real twilight sits, so the reading column stays over the dark bands. */
body[data-theme-id="october"] .night-sky {
  background-color: var(--oct-void);
  background-image:
    linear-gradient(
      180deg,
      var(--oct-grape) 0 calc(var(--oct-fu) * 1.5),
      var(--oct-plum) calc(var(--oct-fu) * 1.5) calc(var(--oct-fu) * 3),
      var(--oct-magenta) calc(var(--oct-fu) * 3) calc(var(--oct-fu) * 3.5),
      var(--oct-ember) calc(var(--oct-fu) * 3.5) calc(var(--oct-fu) * 4.5),
      var(--oct-pumpkin) calc(var(--oct-fu) * 4.5) calc(var(--oct-fu) * 5.5),
      var(--oct-harvest) calc(var(--oct-fu) * 5.5) 100%
    ),
    linear-gradient(
      180deg,
      var(--oct-void) 0 30%,
      var(--oct-night) 30% 50%,
      var(--oct-dusk) 50% 64%,
      var(--oct-grape) 64% 76%,
      var(--oct-plum) 76% 100%
    );
  background-size: 100% calc(var(--oct-fu) * 7), 100% 100%;
  background-position: left 0px bottom var(--oct-field-h), left top;
  background-repeat: no-repeat, no-repeat;
}

/* Starfield sprites: conic quarter-turns cut exact axis-aligned squares, so the
   stars are hard pixel blocks instead of feathered circles. Drift and twinkle run
   on steps() so the field jumps frame to frame like sprite animation. Every depth now
   carries purple pixels, so the starfield agrees with the twilight underneath it. */
body[data-theme-id="october"] .night-sky::before {
  opacity: 1;
  background-image:
    conic-gradient(at 3px 3px, transparent 0 75%, var(--oct-bone) 0),
    conic-gradient(at 2px 2px, transparent 0 75%, var(--oct-harvest) 0),
    conic-gradient(at 2px 2px, transparent 0 75%, var(--oct-magenta) 0),
    conic-gradient(at 1px 1px, transparent 0 75%, var(--oct-violet) 0);
  background-size: 112px 128px, 152px 136px, 184px 168px, 88px 96px;
  background-position: 16px 24px, 64px 8px, 24px 88px, 40px 56px;
  animation: starDrift 36s steps(9, end) infinite alternate, starTwinkle 4.8s steps(2, end) infinite;
}

body[data-theme-id="october"] .night-sky__stars--far {
  opacity: 1;
  background-image:
    conic-gradient(at 2px 2px, transparent 0 75%, var(--oct-violet) 0),
    conic-gradient(at 2px 2px, transparent 0 75%, var(--oct-ember) 0),
    conic-gradient(at 1px 1px, transparent 0 75%, var(--oct-bone) 0);
  background-size: 72px 88px, 104px 120px, 56px 64px;
  background-position: 8px 16px, 48px 40px, 24px 8px;
  animation: farStarDrift 90s steps(14, end) infinite alternate, farStarTwinkle 7s steps(2, end) infinite;
}

body[data-theme-id="october"] .night-sky__stars--near {
  opacity: 1;
  background-image:
    conic-gradient(at 3px 3px, transparent 0 75%, var(--oct-bone) 0),
    conic-gradient(at 2px 2px, transparent 0 75%, var(--oct-magenta) 0),
    conic-gradient(at 2px 2px, transparent 0 75%, var(--oct-pumpkin) 0);
  background-size: 128px 144px, 176px 160px, 96px 112px;
  background-position: 32px 8px, 12px 72px, 60px 40px;
  animation: nearStarDrift 58s steps(11, end) infinite alternate, nearStarTwinkle 3.8s steps(2, end) infinite;
}

/* The constellations, put through the same sprite discipline as the starfield.
   Two changes and no more, because the geometry is real and this month does not
   get to move a star:

   `shape-rendering: crispEdges` turns the anti-aliasing off, so a line and a
   star dot land on hard pixels instead of feathered ones — the same reason the
   field above is built out of conic quarter-turns rather than radial fades.

   The turn goes on steps(). 360 of them across a sidereal day is one degree
   every four minutes, which is the sky jumping frame to frame like everything
   else in this month rather than sweeping. It is still the sidereal rate; only
   the sampling is October's. */
body[data-theme-id="october"] .night-sky__constellations {
  animation: skyTurn 86164s steps(360, end) infinite;
  --constellation-strength: 0.5;
  /* Magenta, not violet: the ground this month is violet twilight, and a
     violet line on it is a line nobody can see. */
  --constellation-line: rgba(248, 84, 82, 0.3);
  --constellation-star: var(--oct-bone);
  --constellation-star-bright: var(--oct-harvest);
  --constellation-star-faint: var(--oct-violet);
  --constellation-halo: rgba(248, 84, 82, 0.3);
  --constellation-emblem: var(--oct-harvest);
}

body[data-theme-id="october"] .constellations__chart {
  shape-rendering: crispEdges;
}

/* The ground plane. Five furrow bands, each a hard two-tone repeating stripe whose
   period widens toward the bottom of the screen so the tilled field reads as
   receding. The deciduous wood line that used to live on this element is gone. */
body[data-theme-id="october"] .night-sky__aurora {
  display: block;
  z-index: 2;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  inset-block-start: auto;
  height: var(--oct-field-h);
  clip-path: none;
  box-shadow: none;
  image-rendering: pixelated;
  background-color: var(--oct-loam);
  background-image:
    /* vine line along the horizon lip */
    linear-gradient(var(--oct-vine), var(--oct-vine)),
    /* Far → near furrows. Each band is a broad ridge with one narrow dark groove cut
       into it — 50/50 stripes read as a plank fence, a thin groove reads as tilled
       ground. Perspective comes from the groove spacing and width growing toward the
       viewer; the two far bands also lift to hazy dirt for atmospheric depth. */
    repeating-linear-gradient(
      90deg,
      var(--oct-loam) 0 calc(var(--oct-fu) * 0.5),
      var(--oct-dirt) calc(var(--oct-fu) * 0.5) var(--oct-fu)
    ),
    repeating-linear-gradient(
      90deg,
      var(--oct-loam) 0 calc(var(--oct-fu) * 0.5),
      var(--oct-dirt) calc(var(--oct-fu) * 0.5) calc(var(--oct-fu) * 2)
    ),
    repeating-linear-gradient(
      90deg,
      var(--oct-soil) 0 var(--oct-fu),
      var(--oct-loam) var(--oct-fu) calc(var(--oct-fu) * 3)
    ),
    repeating-linear-gradient(
      90deg,
      var(--oct-soil) 0 var(--oct-fu),
      var(--oct-loam) var(--oct-fu) calc(var(--oct-fu) * 4)
    ),
    repeating-linear-gradient(
      90deg,
      var(--oct-soil) 0 calc(var(--oct-fu) * 1.5),
      var(--oct-loam) calc(var(--oct-fu) * 1.5) calc(var(--oct-fu) * 5)
    );
  background-size:
    100% 2px,
    100% calc(var(--oct-fu) * 3),
    100% calc(var(--oct-fu) * 3),
    100% calc(var(--oct-fu) * 4),
    100% calc(var(--oct-fu) * 5),
    100% calc(var(--oct-fu) * 7);
  background-position:
    left 0px bottom calc(var(--oct-field-h) - 2px),
    left 0px bottom calc(var(--oct-fu) * 19),
    left 0px bottom calc(var(--oct-fu) * 16),
    left 0px bottom calc(var(--oct-fu) * 12),
    left 0px bottom calc(var(--oct-fu) * 7),
    left 0px bottom 0px;
  background-repeat: repeat-x;
}

body[data-theme-id="october"] .night-sky__aurora::before,
body[data-theme-id="october"] .night-sky__aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  image-rendering: pixelated;
  background-repeat: repeat-x;
}

/* Pumpkin sprite. Each row is one repeating tile; the sprite is nine blocks wide and
   eight tall, drawn as pixel rows stacked from the tile's bottom:
     base(1) lower(1) belly(3) crown(1) stem(2), with a rib layer over the body and a
     harvest highlight block on the crown's upper left.
   Twilight shading is purple, not a darker orange. The harvest highlight sits on the
   upper left, so the shade goes on the right: the rightmost block of the crown and belly
   rows is plum, the lower row's is grape, and the whole base row is grape and one block
   wider on that side, so each gourd sits in its own cast shadow with a single light
   direction across all three rows.
   Each row uses a different tile length AND a different offset of the sprite inside
   that tile, so the three rows never line up into wallpaper. Tile lengths are 32, 25
   and 25 blocks, which keeps every stop an exact percentage and every edge on a whole
   pixel. Back row (32 blocks, sprite at block 13) and mid row (25 blocks, block 11). */
body[data-theme-id="october"] .night-sky__aurora::before {
  background-image:
    /* back row — stem, ribs, crown, belly, lower, base */
    linear-gradient(90deg, transparent 0 50%, var(--oct-vine) 50% 59.375%, transparent 59.375%),
    linear-gradient(
      90deg,
      transparent 0 50%,
      var(--oct-pumpkin-deep) 50% 53.125%,
      transparent 53.125% 56.25%,
      var(--oct-pumpkin-deep) 56.25% 59.375%,
      transparent 59.375%
    ),
    linear-gradient(90deg, transparent 0 43.75%, var(--oct-pumpkin) 43.75% 65.625%, transparent 65.625%),
    linear-gradient(
      90deg,
      transparent 0 40.625%,
      var(--oct-pumpkin) 40.625% 65.625%,
      var(--oct-plum) 65.625% 68.75%,
      transparent 68.75%
    ),
    linear-gradient(
      90deg,
      transparent 0 43.75%,
      var(--oct-pumpkin) 43.75% 62.5%,
      var(--oct-plum) 62.5% 65.625%,
      transparent 65.625%
    ),
    linear-gradient(90deg, transparent 0 46.875%, var(--oct-grape) 46.875% 65.625%, transparent 65.625%),
    /* mid row — highlight, stem, ribs, crown, belly, lower, base */
    linear-gradient(90deg, transparent 0 48%, var(--oct-harvest) 48% 52%, transparent 52%),
    linear-gradient(90deg, transparent 0 56%, var(--oct-vine) 56% 68%, transparent 68%),
    linear-gradient(
      90deg,
      transparent 0 56%,
      var(--oct-pumpkin-deep) 56% 60%,
      transparent 60% 64%,
      var(--oct-pumpkin-deep) 64% 68%,
      transparent 68%
    ),
    linear-gradient(
      90deg,
      transparent 0 48%,
      var(--oct-pumpkin) 48% 72%,
      var(--oct-plum) 72% 76%,
      transparent 76%
    ),
    linear-gradient(
      90deg,
      transparent 0 44%,
      var(--oct-pumpkin) 44% 76%,
      var(--oct-plum) 76% 80%,
      transparent 80%
    ),
    linear-gradient(
      90deg,
      transparent 0 48%,
      var(--oct-pumpkin) 48% 72%,
      var(--oct-grape) 72% 76%,
      transparent 76%
    ),
    linear-gradient(90deg, transparent 0 52%, var(--oct-grape) 52% 76%, transparent 76%);
  background-size:
    calc(var(--oct-pk-back) * 32) calc(var(--oct-pk-back) * 2),
    calc(var(--oct-pk-back) * 32) calc(var(--oct-pk-back) * 6),
    calc(var(--oct-pk-back) * 32) var(--oct-pk-back),
    calc(var(--oct-pk-back) * 32) calc(var(--oct-pk-back) * 3),
    calc(var(--oct-pk-back) * 32) var(--oct-pk-back),
    calc(var(--oct-pk-back) * 32) var(--oct-pk-back),
    calc(var(--oct-pk-mid) * 25) var(--oct-pk-mid),
    calc(var(--oct-pk-mid) * 25) calc(var(--oct-pk-mid) * 2),
    calc(var(--oct-pk-mid) * 25) calc(var(--oct-pk-mid) * 6),
    calc(var(--oct-pk-mid) * 25) var(--oct-pk-mid),
    calc(var(--oct-pk-mid) * 25) calc(var(--oct-pk-mid) * 3),
    calc(var(--oct-pk-mid) * 25) var(--oct-pk-mid),
    calc(var(--oct-pk-mid) * 25) var(--oct-pk-mid);
  background-position:
    left 0px bottom calc(var(--oct-fu) * 12 + var(--oct-pk-back) * 6),
    left 0px bottom calc(var(--oct-fu) * 12),
    left 0px bottom calc(var(--oct-fu) * 12 + var(--oct-pk-back) * 5),
    left 0px bottom calc(var(--oct-fu) * 12 + var(--oct-pk-back) * 2),
    left 0px bottom calc(var(--oct-fu) * 12 + var(--oct-pk-back)),
    left 0px bottom calc(var(--oct-fu) * 12),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7 + var(--oct-pk-mid) * 4),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7 + var(--oct-pk-mid) * 6),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7 + var(--oct-pk-mid) * 5),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7 + var(--oct-pk-mid) * 2),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7 + var(--oct-pk-mid)),
    left calc(var(--oct-pk-mid) * 3) bottom calc(var(--oct-fu) * 7);
}

/* Front row: the big pumpkins, 25 blocks to a tile with the sprite at block 6, sitting
   on a dashed vine that runs along the nearest furrow. */
body[data-theme-id="october"] .night-sky__aurora::after {
  background-image:
    linear-gradient(90deg, transparent 0 28%, var(--oct-harvest) 28% 32%, transparent 32%),
    linear-gradient(90deg, transparent 0 36%, var(--oct-vine) 36% 48%, transparent 48%),
    linear-gradient(
      90deg,
      transparent 0 36%,
      var(--oct-pumpkin-deep) 36% 40%,
      transparent 40% 44%,
      var(--oct-pumpkin-deep) 44% 48%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      transparent 0 28%,
      var(--oct-pumpkin) 28% 52%,
      var(--oct-plum) 52% 56%,
      transparent 56%
    ),
    linear-gradient(
      90deg,
      transparent 0 24%,
      var(--oct-pumpkin) 24% 56%,
      var(--oct-plum) 56% 60%,
      transparent 60%
    ),
    linear-gradient(
      90deg,
      transparent 0 28%,
      var(--oct-pumpkin) 28% 52%,
      var(--oct-grape) 52% 56%,
      transparent 56%
    ),
    linear-gradient(90deg, transparent 0 32%, var(--oct-grape) 32% 56%, transparent 56%),
    repeating-linear-gradient(
      90deg,
      var(--oct-vine) 0 calc(var(--oct-pk-front) * 4),
      transparent calc(var(--oct-pk-front) * 4) calc(var(--oct-pk-front) * 7)
    );
  background-size:
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 25) calc(var(--oct-pk-front) * 2),
    calc(var(--oct-pk-front) * 25) calc(var(--oct-pk-front) * 6),
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 25) calc(var(--oct-pk-front) * 3),
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front),
    100% var(--oct-pk-front);
  background-position:
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5 + var(--oct-pk-front) * 4),
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5 + var(--oct-pk-front) * 6),
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5),
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5 + var(--oct-pk-front) * 5),
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5 + var(--oct-pk-front) * 2),
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5 + var(--oct-pk-front)),
    left calc(var(--oct-pk-front) * 2) bottom calc(var(--oct-fu) * 0.5),
    left 0px bottom 0px;
}

body[data-theme-id="october"] .brand a {
  color: var(--oct-harvest);
  text-shadow: 3px 3px 0 var(--oct-pumpkin-deep);
  animation: brandFloat 3.2s steps(2, end) infinite;
}

body[data-theme-id="october"] .brand a:hover {
  color: var(--oct-pumpkin);
  text-shadow: 3px 3px 0 var(--oct-ember);
}

/* Headings go monospace, uppercase and hard-shadowed. The rainbow still flows, but
   steps(8) advances it exactly one flat colour block per frame — sprite animation,
   not a smooth ramp.
   The drop shadow has to be a filter, not a text-shadow: these headings are painted
   with background-clip:text, and a text-shadow renders in the text phase — on top of
   the clipped background — which buries the gradient under a flat block. A zero-blur
   drop-shadow() reads the composited alpha instead, so it lands behind the letters. */
body[data-theme-id="october"] main h1,
body[data-theme-id="october"] .page-title,
body[data-theme-id="october"] main h2,
body[data-theme-id="october"] main h3,
body[data-theme-id="october"] main h4,
body[data-theme-id="october"] main h5,
body[data-theme-id="october"] main h6,
body[data-theme-id="october"] .markdown-page .heading-section__trigger {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-shadow: none;
  /* `var(--heading-tint)` first: it is the site-wide per-level heading ladder
     from main.css, and `filter` replaces rather than accumulates, so a rule
     that omits it drops the ladder for this whole sheet. The plate follows it
     so the void stays void rather than being hue-rotated with the letters. */
  filter: var(--heading-tint) drop-shadow(3px 3px 0 var(--oct-void));
  animation-duration: 4.8s;
  animation-timing-function: steps(8, end);
}

/* Uppercase monospace sets far wider than the cursive it replaces, so the display
   sizes come down to keep long headings off a third line at mobile widths. */
body[data-theme-id="october"] main h1,
body[data-theme-id="october"] .page-title,
body[data-theme-id="october"] .heading-section--level-1 > .heading-section__summary > .heading-section__trigger {
  font-size: clamp(1.85rem, 5vw, 3.3rem);
}

body[data-theme-id="october"] main h2,
body[data-theme-id="october"] .heading-section--level-2 > .heading-section__summary > .heading-section__trigger {
  font-size: clamp(1.35rem, 3.2vw, 1.95rem);
}

/* Section rails become solid colour blocks, not glowing threads. */
body[data-theme-id="october"] .heading-section::before,
body[data-theme-id="october"] .page-toc::before {
  width: 4px;
  box-shadow: none;
}

/* Content links rest in light violet — 8.6:1 on the night ground, well clear of the
   bone body copy — and light up harvest on hover, so purple owns the resting state and
   the pumpkin family owns the interaction. Scoped to main so the brand, breadcrumbs and
   theme picker keep their own colours. */
body[data-theme-id="october"] main a {
  color: var(--oct-violet);
}

/* Hover colour is --link-hover, standing user rule 2026-08-14: #FF465A on
   every theme, not --oct-harvest any more. The hard-edged drop shadow below
   (--oct-void, not a blur) is independent art and is left as it was. */
body[data-theme-id="october"] a:hover,
body[data-theme-id="october"] a:focus-visible {
  color: var(--link-hover);
  text-shadow: 2px 2px 0 var(--oct-void);
  animation: none;
}

body[data-theme-id="october"] a:visited {
  color: var(--oct-straw);
  text-shadow: none;
}

body[data-theme-id="october"] mark {
  background: var(--oct-harvest);
  color: var(--oct-void);
  text-shadow: none;
}

/* Chrome: flat fills, hard 2px edges, square corners everywhere. Every content-level
   frame is drawn in purple rather than the old dirt brown — the dirt is now only ever
   ground, and purple lines the whole reading surface. */
body[data-theme-id="october"] input,
body[data-theme-id="october"] textarea,
body[data-theme-id="october"] select,
body[data-theme-id="october"] code,
body[data-theme-id="october"] pre {
  border-radius: 0;
  border: 2px solid var(--oct-purple);
  background: var(--oct-dusk);
  color: var(--oct-bone);
}

body[data-theme-id="october"] pre code {
  border: 0;
  background: transparent;
}

body[data-theme-id="october"] button,
body[data-theme-id="october"] .sitemap-link,
body[data-theme-id="october"] .time-bar {
  border-radius: 0;
  border-width: 2px;
  border-color: var(--oct-pumpkin);
}

body[data-theme-id="october"] button:hover,
body[data-theme-id="october"] .sitemap-link:hover {
  border-color: var(--oct-harvest);
  color: var(--oct-harvest);
  box-shadow: none;
  transform: none;
}

/* The zodiac chips are <a href>s now, so the `button` rule above no longer
   reaches them — and this stays exactly as written anyway. They carry no frame
   on ANY theme (see the permanent note on .celestial-chip in main.css), the
   element they are cut from has already changed once, and a single `a` added to
   the chrome list above would put the boxes straight back. The frame in the
   breadcrumb bar belongs to the card, never to the individual chips, and their
   hover/focus affordance is a halo drawn on the glyph, not a box. */
body[data-theme-id="october"] .celestial-chip,
body[data-theme-id="october"] .celestial-chip:hover,
body[data-theme-id="october"] .celestial-chip:focus-visible {
  border: 0;
  box-shadow: none;
  outline: none;
}

/* October's chrome does not move: `button:hover` above cancelled the chip lift
   for as long as the chips were buttons, which is how this month has always
   looked. Restated here so the switch to anchors does not quietly hand the lift
   back. Keyboard focus keeps its lift — it had one under the button too, since
   that rule was :hover only and never touched :focus-visible. */
body[data-theme-id="october"] .celestial-chip:hover {
  transform: none;
}

body[data-theme-id="october"] .hero-card,
body[data-theme-id="october"] .folder-section {
  border-radius: 0;
  box-shadow: none;
  border-width: 2px;
  border-color: var(--oct-pumpkin);
}

body[data-theme-id="october"] .hero-card:hover,
body[data-theme-id="october"] .folder-section:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--oct-harvest);
}

/* No left rule on quotes — left borders are reserved for list anchors. */
body[data-theme-id="october"] blockquote {
  border-radius: 0;
  box-shadow: none;
  color: var(--oct-bone);
}

body[data-theme-id="october"] hr {
  border-top: 2px solid var(--oct-purple);
}

/* The footer sits over the field, so it takes the body text colour rather than the
   muted straw — straw on loam only reaches about 3.6:1. */
body[data-theme-id="october"] footer {
  color: var(--oct-bone);
}

body[data-theme-id="october"] th {
  background: var(--oct-pumpkin);
  color: var(--oct-void);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-theme-id="october"] th,
body[data-theme-id="october"] td {
  border-bottom: 2px solid var(--oct-purple);
}

body[data-theme-id="october"]::-webkit-scrollbar-thumb,
body[data-theme-id="october"] ::-webkit-scrollbar-thumb {
  border-radius: 0;
}

@media (max-width: 800px) {
  body[data-theme-id="october"] {
    --oct-fu: 6px;
    --oct-pk-back: 2px;
    --oct-pk-mid: 3px;
    --oct-pk-front: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme-id="october"] .night-sky::before,
  body[data-theme-id="october"] .night-sky__stars--far,
  body[data-theme-id="october"] .night-sky__stars--near,
  body[data-theme-id="october"] .brand a,
  body[data-theme-id="october"] main h1,
  body[data-theme-id="october"] .page-title,
  body[data-theme-id="october"] main h2,
  body[data-theme-id="october"] main h3,
  body[data-theme-id="october"] main h4,
  body[data-theme-id="october"] main h5,
  body[data-theme-id="october"] main h6,
  body[data-theme-id="october"] .markdown-page .heading-section__trigger {
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  body[data-theme-id="october"] .night-sky::before,
  body[data-theme-id="october"] .night-sky__stars--far,
  body[data-theme-id="october"] .night-sky__stars--near,
  body[data-theme-id="october"] .brand a,
  body[data-theme-id="october"] main h1,
  body[data-theme-id="october"] .page-title,
  body[data-theme-id="october"] main h2,
  body[data-theme-id="october"] main h3,
  body[data-theme-id="october"] main h4,
  body[data-theme-id="october"] main h5,
  body[data-theme-id="october"] main h6,
  body[data-theme-id="october"] .markdown-page .heading-section__trigger {
    animation: none;
    transform: none;
  }
}

/* Fireworks are Independence Day furniture: July theme only. The JS also refuses to
   spawn them off-July, so this is belt-and-braces for any burst already on screen. */
body[data-theme-id="october"] .night-sky__fireworks {
  display: none;
}

@media (prefers-reduced-data: reduce) {
  /* Month themes set ambient motion on higher-specificity selectors; stop those too. */
  body[data-theme-id="october"] .night-sky::before,
  body[data-theme-id="october"] .night-sky__stars {
    animation: none;
    transform: none;
  }
}

/* ===========================================================================
   OCTOBER BY DAY.

   Everything above this banner is October's canonical lighting — the harvest
   stage at night — and it stays exactly as it is. A body with no [data-mode]
   is what the server sends and what a reader with JS off keeps for good. This
   block set supplies the OTHER lighting, so base plus counterpart covers both
   modes and nothing is written twice.

   Selectors carry both attributes, body[data-theme-id="october"][data-mode="day"]
   at (0,2,1) over the base block's (0,1,1), so the counterpart wins on
   specificity rather than on source order — which matters, because every theme
   sheet is loaded on every page.

   THE CONCEPT. The same NES harvest stage at three in the afternoon. Not a
   generic light mode and not a different theme: the field, the furrows, the
   three rows of gourds and every whole-pixel edge are untouched. What changes
   is the light. The banded twilight becomes a banded pale blue-white sky, and
   the pumpkins get MORE pigment, not less — daylight is what a harvest orange
   is FOR, so --oct-pumpkin goes down the value axis at full saturation until it
   holds a 2px edge and a heading stop on a pale ground, which the night's
   brighter, thinner orange cannot do. The stars go, because stars are the
   night; one depth stays behind as cloud.

   HOW LITTLE OF THIS IS ACTUAL WORK. Nearly every rule in this sheet reads the
   --oct-* ramp rather than a literal, which is why the whole tilled field,
   both sprite pseudo-elements and all three gourd rows re-light from the token
   block below without a single one of those ~200 lines being restated. Only
   five things in the sheet are painted with a literal, and only those five need
   a rule of their own down here. */
body[data-theme-id="october"][data-mode="day"] {
  /* ---- Six colours the night ramp has no counterpart for ------------------
     Everything else below is an existing ramp entry moved along the value
     axis. These six have nothing to move FROM: the night sky is built out of
     the purple ramp, and at three in the afternoon that ramp is all shadow.

     --oct-day-gold is the second half of a deliberate split. --oct-harvest has
     to stay a BRIGHT gold in daylight because it is the highlight pixel on
     every pumpkin crown and the fill behind <mark> — so it cannot also be the
     gold that has to read as TYPE on a pale sky, where it measures 1.35:1.
     One token per job is cheaper than overriding the sprite rules. */
  --oct-day-zenith: #ded7c8;
  --oct-day-sky: #e7e3d8;
  --oct-day-haze: #f1e7d1;
  --oct-day-glare: #f0e7d2;
  --oct-day-gold: #7a5200;
  --oct-day-card: #e8d5aa;

  /* ---- The ramp, re-lit --------------------------------------------------
     Same nineteen flat colours, same hue relationships, same roles. Contrast
     is measured against --oct-day-zenith (#c3dbef), which is the DARKEST band
     any text can land on — .night-sky is fixed, so scrolled body copy crosses
     every band, and the top one is the constraint:

       bone        10.44 : 1   body copy
       violet       7.66 : 1   content links
       purple       5.46 : 1   every quiet frame, hr, table rule
       vine         5.03 : 1   tags, blockquote
       day-gold     4.84 : 1   the gold that carries type
       magenta      4.83 : 1   code tags
       lime         4.71 : 1   bold text
       ember        4.70 : 1   ANCHOR RED
       straw        4.65 : 1   muted copy, visited links
       pumpkin      3.23 : 1   borders and display-size gradient stops only

     Every one clears 4.5:1 except pumpkin, which is never body copy — it is
     --border, the th band and a heading stop, all of which sit at the 3:1 bar.

     The direction of the check is the opposite of the night block's. There the
     danger was a colour collapsing INTO the indigo ground; here it is a colour
     being too PALE to read on paper-white. That is why the purple ramp inverts
     its own value order: at night --oct-violet is the light end of the ramp
     and carries links against the dark; by day it is the DARK end and carries
     them against the light. Same hue, opposite job. */
  --oct-void: #170d09;
  /* Still the deepest colour in the ramp, because it is the pen — the hard
     zero-blur outline behind every heading and every hovered link. It is only
     ever the sky at night, and .night-sky repaints below. */
  --oct-night: #f2e6d2;
  /* Link-hover re-paired to THIS block's ground (standing rule 2026-08-14).
     #e6eef6 is light: #FF465A only measures 2.86:1 here, so day takes the
     same-hue dark variant, #BD0014 — 5.65:1. */
  --link-hover: #BC0900;
  --oct-dusk: #eee1de;
  /* Grape and plum barely move: they are the gourds' cast shadow and their
     shaded side, and a shadow in sunlight is still a shadow. Plum warms toward
     the orange it shades, the way a fill light does. */
  --oct-grape: #63342b;
  --oct-plum: #7d3b3b;
  --oct-purple: #923b18;
  --oct-violet: #6e2b07;
  --oct-magenta: #b21e1b;
  --oct-ember: #b81208;
  /* 100% saturation in both modes — daylight is read as MORE pigment, not
     less, so the orange goes deeper and redder rather than lighter. A pale
     orange would have neither held a 2px frame on cream nor survived as a
     gradient stop. */
  --oct-pumpkin: #cc4a00;
  --oct-pumpkin-deep: #8f3200;
  --oct-harvest: #f5ad00;
  --oct-lime: #4a6410;
  --oct-vine: #276418;
  /* The tilled field lit from above instead of by a sunset: the ridges take
     the light, the grooves keep the shade, and the whole plane comes up far
     enough that the footer sitting on it clears 4.96:1 in --oct-bone. */
  --oct-dirt: #d8a468;
  --oct-loam: #c08a4e;
  --oct-soil: #8a5a2c;
  /* Body ink. Kept in the indigo family rather than going neutral black, so
     the reading colour still belongs to the same palette as the shadows. */
  --oct-bone: #38221c;
  --oct-straw: #6b5a40;

  /* --border, --border-dim and --border-teal are declared in the base block as
     var(--oct-pumpkin) / var(--oct-purple), so they re-derive from the two
     lines above and need no restatement here. Same for --tt-bg, --bg, --text
     and every other alias. --tt-breadcrumb-glow stays `transparent`: 8-bit
     hardware had no bloom in either lighting. */

  /* The three gradient tokens are restated for one reason only: --oct-harvest
     appears in all three and, at 1.35:1 on this ground, would leave an
     invisible slot in every rail, frame and heading. --oct-day-gold takes
     those slots and everything else re-derives. Red still leads, and since
     2026-08-18 it closes the cycle as well — see the note in the base block
     for why the frame's corners need that. */
  --tt-heading-rainbow: linear-gradient(
    90deg,
    var(--oct-ember) 0 12.5%,
    var(--oct-pumpkin) 12.5% 25%,
    var(--oct-day-gold) 25% 37.5%,
    var(--oct-magenta) 37.5% 50%,
    var(--oct-vine) 50% 62.5%,
    var(--oct-purple) 62.5% 75%,
    var(--oct-lime) 75% 87.5%,
    var(--oct-ember) 87.5% 100%
  );
  --tt-heading-rainbow-vertical: linear-gradient(
    180deg,
    var(--oct-ember) 0 12.5%,
    var(--oct-pumpkin) 12.5% 25%,
    var(--oct-day-gold) 25% 37.5%,
    var(--oct-magenta) 37.5% 50%,
    var(--oct-vine) 50% 62.5%,
    var(--oct-purple) 62.5% 75%,
    var(--oct-lime) 75% 87.5%,
    var(--oct-ember) 87.5% 100%
  );
  /* Still two identical eight-colour cycles across a 200% background, so
     steps(8) lands one whole block per frame and the loop has no reset. The
     --oct-bone slot inverts with the theme: at night it was the white in the
     spectrum, by day it is the ink. The eight stops sit in a narrow VALUE band
     — they have to, on a pale ground — but they are spread across red, orange,
     gold, violet, green, magenta and ink, so the separation is carried by hue.
     That is the difference between this and the flat-black August gradient:
     eight dark colours are fine, eight dark colours of the same hue are not. */
  --tt-heading-text-rainbow: linear-gradient(
    90deg,
    var(--oct-ember) 0 6.25%,
    var(--oct-pumpkin) 6.25% 12.5%,
    var(--oct-day-gold) 12.5% 18.75%,
    var(--oct-violet) 18.75% 25%,
    var(--oct-lime) 25% 31.25%,
    var(--oct-ember) 31.25% 37.5%,
    var(--oct-magenta) 37.5% 43.75%,
    var(--oct-bone) 43.75% 50%,
    var(--oct-ember) 50% 56.25%,
    var(--oct-pumpkin) 56.25% 62.5%,
    var(--oct-day-gold) 62.5% 68.75%,
    var(--oct-violet) 68.75% 75%,
    var(--oct-lime) 75% 81.25%,
    var(--oct-ember) 81.25% 87.5%,
    var(--oct-magenta) 87.5% 93.75%,
    var(--oct-bone) 93.75% 100%
  );

  /* The tarot card is the one element allowed its own background, and in
     daylight it takes one too: everything seated in it — the astrolabe's gold
     rings, the zodiac glyphs in --tt-cyan-soft, the numeral in --tt-red —
     resolves from the ramp above, which is now ink-weight, so a card left in
     its night grape would have hidden the entire dial. Card stock rather than
     sky, so it still reads as an object laid on the page. */
  --tt-breadcrumb-text: var(--oct-day-gold);
  --tt-gold: var(--oct-day-gold);
  /* Checked against the card, not the page: this is the chips' whole
     hover/focus affordance and it is cast from the glyph's own outline, never
     from a box. The night value is a bright gold tracing a glyph on deep
     grape; on straw card stock that is invisible, so the day value inverts to
     the theme's own shadow purple soaking outward from a gold character. */
  --zodiac-glow: rgba(99, 52, 43, 0.62);
  /* Cut the other way. On a pale card the lit lip of an engraved stroke is
     white below the glyph, not black. */
  --tt-engrave: 0 1px 0 rgba(242, 230, 210, 0.75);

  background: var(--oct-night);
  color-scheme: light;
}

/* The scanline is the CRT and survives the flip; it only changes weight. A 13%
   dark hatch that reads as a screen artefact over an indigo sky reads as dirt
   over paper-white, so the alpha comes down to where it is felt and not seen. */
body[data-theme-id="october"][data-mode="day"]::before {
  background: repeating-linear-gradient(0deg, rgba(23, 13, 9, 0.07) 0 2px, transparent 2px 4px);
}

/* Sky in flat bands, same structure as the night: one long descent across the
   viewport, and a short strip pinned to the field's horizon line so it can
   never drift off the ground plane. The descent runs cool at the zenith to
   warm at the horizon, which is the direction afternoon air actually goes, and
   --oct-night takes the middle band on purpose so the band the reading column
   mostly sits on is the same colour the browser painted before this element
   existed. The strip keeps its thin hot line, in --oct-harvest rather than
   magenta: four pixels of sun glare off the field, too narrow for a line of
   type to land on, which is why it is allowed to be that bright. */
body[data-theme-id="october"][data-mode="day"] .night-sky {
  background-color: var(--oct-day-sky);
  background-image:
    linear-gradient(
      180deg,
      var(--oct-day-sky) 0 calc(var(--oct-fu) * 1.5),
      var(--oct-day-haze) calc(var(--oct-fu) * 1.5) calc(var(--oct-fu) * 3),
      var(--oct-harvest) calc(var(--oct-fu) * 3) calc(var(--oct-fu) * 3.5),
      var(--oct-day-haze) calc(var(--oct-fu) * 3.5) calc(var(--oct-fu) * 5),
      var(--oct-day-glare) calc(var(--oct-fu) * 5) 100%
    ),
    linear-gradient(
      180deg,
      var(--oct-day-zenith) 0 30%,
      var(--oct-day-sky) 30% 50%,
      var(--oct-night) 50% 64%,
      var(--oct-day-haze) 64% 76%,
      var(--oct-day-glare) 76% 100%
    );
}

/* Two of the three star depths stop existing rather than fading. A daylight sky
   with faint stars in it is a mistake, not a subtlety — and `display: none` is
   also the cheapest thing this switch can do to a low-end machine, since it
   takes four stepped animations off the compositor outright. */
body[data-theme-id="october"][data-mode="day"] .night-sky::before,
body[data-theme-id="october"][data-mode="day"] .night-sky__stars--far {
  display: none;
}

/* The third depth is kept and re-lit rather than hidden, because a side-
   scroller's daytime sky is defined by its clouds the way its night sky is
   defined by its stars. Two sprites drawn in the sheet's own idiom: three
   stacked pixel rows on tiles of 40 and 25 blocks, so the two rows never line
   up into wallpaper, every stop a multiple of 2.5% / 4% so no edge
   anti-aliases, and both parked in the upper band where the sky is bluest.

   The contrast is deliberately soft — warm white on pale blue measures about
   1.3:1. That is not an oversight and it cannot be fixed by picking a whiter
   white: a sky pale enough for ink-weight accents to clear 4.5:1 has nowhere
   left above it for a cloud to go. High afternoon cloud reading as a hue edge
   rather than a value edge is the honest version of that constraint.

   This ADDS no animation: it inherits the layer's existing nearStarDrift and
   drops the twinkle, because cloud does not blink, and stretches the duration
   so the sprite creeps instead of scudding. One ambient layer where the night
   runs three. */
body[data-theme-id="october"][data-mode="day"] .night-sky__stars--near {
  background-image:
    linear-gradient(90deg, transparent 0 17.5%, var(--oct-day-glare) 17.5% 32.5%, transparent 32.5%),
    linear-gradient(90deg, transparent 0 12.5%, var(--oct-day-glare) 12.5% 37.5%, transparent 37.5%),
    linear-gradient(90deg, transparent 0 10%, var(--oct-day-haze) 10% 40%, transparent 40%),
    linear-gradient(90deg, transparent 0 60%, var(--oct-day-glare) 60% 88%, transparent 88%),
    linear-gradient(90deg, transparent 0 56%, var(--oct-day-glare) 56% 92%, transparent 92%),
    linear-gradient(90deg, transparent 0 52%, var(--oct-day-haze) 52% 96%, transparent 96%);
  background-size:
    calc(var(--oct-pk-front) * 40) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 40) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 40) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front),
    calc(var(--oct-pk-front) * 25) var(--oct-pk-front);
  /* The layer is inset -4rem, so these offsets are measured from 4rem above
     the viewport: the two sprites sit roughly 5rem and 11rem down the screen. */
  background-position:
    left 0px top calc(9rem - var(--oct-pk-front) * 2),
    left 0px top calc(9rem - var(--oct-pk-front)),
    left 0px top 9rem,
    left calc(var(--oct-pk-front) * 6) top calc(15rem - var(--oct-pk-front) * 2),
    left calc(var(--oct-pk-front) * 6) top calc(15rem - var(--oct-pk-front)),
    left calc(var(--oct-pk-front) * 6) top 15rem;
  background-repeat: repeat-x;
  animation: nearStarDrift 96s steps(11, end) infinite alternate;
}

/* Card stock rather than deep grape — see the token block for why the whole
   dial depends on it. The 2px pumpkin frame and the squared corners come from
   the base rule and are untouched. */
body[data-theme-id="october"][data-mode="day"] .breadcrumb-nav {
  background: var(--oct-day-card);
}

/* The wordmark cannot stay in bright harvest on paper-white, and the obvious
   replacement is the anchor red: October is red-anchored in both lightings and
   this is the largest piece of type on the page. The hard 3px offset stays —
   it is the sprite shadow every heading here carries — and moves to the deep
   gold so the two plates still separate. :hover already resolves to pumpkin
   over ember, both of which re-derive, so it needs no rule. */
body[data-theme-id="october"][data-mode="day"] .brand a {
  color: var(--oct-ember);
  text-shadow: 3px 3px 0 var(--oct-day-gold);
}

/* Interaction colour. Three rules that reach for --oct-harvest by name and so
   cannot re-derive; all three take the anchor red instead, which is both
   readable here and the right escalation from a resting violet link.

   :not(.celestial-chip) IS LOAD BEARING ON THE FIRST TWO. Adding [data-mode]
   raises `body[…] a:hover` from (0,2,2) to (0,3,2), which overtakes the
   doubled `.celestial-chip.celestial-chip:hover` block in main.css at (0,3,0)
   — the block that exists precisely to keep generic link and button rules off
   the chips. Every chip on the strip is an <a href> now, the moon included, so
   without this the whole row would take October's link hover instead of its
   own. Narrowing the selector keeps the chips out of reach;
   it does not widen the button rule, which stays exactly as the base wrote it. */
body[data-theme-id="october"][data-mode="day"] a:hover:not(.celestial-chip),
body[data-theme-id="october"][data-mode="day"] a:focus-visible:not(.celestial-chip) {
  color: var(--oct-ember);
}

body[data-theme-id="october"][data-mode="day"] button:hover:not(.celestial-chip),
body[data-theme-id="october"][data-mode="day"] .sitemap-link:hover {
  border-color: var(--oct-ember);
  color: var(--oct-ember);
}

body[data-theme-id="october"][data-mode="day"] .hero-card:hover,
body[data-theme-id="october"][data-mode="day"] .folder-section:hover {
  border-color: var(--oct-ember);
}

/* The header band goes to sunlight gold. --oct-void on the day pumpkin is
   4.15:1 — a table header is bold but not large text, so that is a miss; on
   harvest the same ink reads 9.92:1, and a gold band over a harvest field is
   where the colour wanted to be anyway. The ink itself re-derives. */
body[data-theme-id="october"][data-mode="day"] th {
  background: var(--oct-harvest);
}

/* main.css hangs a 45%-black halo off the tooltip, which is a drop shadow on a
   dark page and a bruise on a pale one. Same shape, warm and a third of the
   weight. */
body[data-theme-id="october"][data-mode="day"] .celestial-tooltip {
  box-shadow: 0 0 24px rgba(23, 13, 9, 0.22);
}

/* Reduced data has to be restated for the cloud layer and not for anything
   else. The base reduced-motion block already carries `animation: none
   !important`, which beats any specificity this counterpart can reach; the
   base reduced-data block does not use !important, so its (0,1,2) selector
   loses to the (0,2,2) rule above and the clouds would keep drifting. */
@media (prefers-reduced-data: reduce) {
  body[data-theme-id="october"][data-mode="day"] .night-sky__stars--near {
    animation: none;
    transform: none;
  }
}