/* ---------- 12 · year ---------- */
/* The sky here is bright by day: a soft scrim and a shadow keep the copy readable. */
#ch12 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; inset: -16% -24% -16% -10%; border-radius: 40%;
  background: radial-gradient(ellipse at 40% 50%, rgba(5, 7, 14, 0.5), rgba(5, 7, 14, 0) 70%);
  pointer-events: none;
}
#ch12 .ch-copy h2 { text-shadow: 0 2px 18px rgba(5, 7, 14, 0.55), 0 1px 2px rgba(5, 7, 14, 0.4); }
#ch12 .ch-copy .lede { color: var(--paper); opacity: 0.92; text-shadow: 0 1px 12px rgba(5, 7, 14, 0.55); }
#ch12 .ch-copy .note { color: var(--paper); opacity: 0; text-shadow: 0 1px 10px rgba(5, 7, 14, 0.6); transition: opacity 0.3s; }

/* The tree, fence and hill: the SVG inlined; the hill itself is drawn by the shader. */
#ch12 .scene { --tree-ink: #1A1410; --branch-snow: 0; }
#ch12 .tree-wrap { position: absolute; inset: 0; color: var(--tree-ink); pointer-events: none; }
#ch12 .tree-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
#ch12 .tree-wrap #hill { display: none; }
/* The trunk rises out of the hill before the first branches draw from its top. */
#ch12 .tree-wrap #trunk { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
#ch12 .tree-wrap #branches path, #ch12 .tree-wrap #fence path { will-change: stroke-dashoffset; }
/* Snow settling on the branches: a pale second stroke over the first, faded in by winter. */
#ch12 .tree-wrap #branches { filter: drop-shadow(0 -1px 0 rgba(235, 242, 255, calc(var(--branch-snow) * 0.9))); }

/* The dial's month labels, gold while the year runs. */
html[data-chapter="ch12"] .dial-labels { color: rgba(255, 180, 61, 0.7); }

@media (max-width: 900px) {
  #ch12 .ch-copy::before { inset: -14% -10%; }
}

/* Real rows of the app's 14-day list (crops of the phone's screenshot).
   Width comes from the chapter's layout (--yc-w), so a row is never cut off. */
#ch12 .ycards { position: absolute; inset: 0; pointer-events: none; --yc-w: 280px; }
#ch12 .yc-row {
  position: absolute; left: 50%; top: 50%;
  width: var(--yc-w);
  border-radius: 12px; background-color: #1c1f26; background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 34px -16px rgba(0, 0, 0, 0.85);
  will-change: transform, opacity; opacity: 0;
}
@media (max-width: 900px) { #ch12 .yc-row { border-radius: 10px; } }

/* Static tier: the note is revealed by the chapter script, which does not run there. */
html.is-static #ch12 .ch-copy .note { opacity: 1; }