/* story-figs.css (r10): the held figure frames (.fh), the map's language for the story's figures.
   s6 "Inside" (gifts: one gold dot splits into 169 gifts) on every width; s7's phone frames "The chains"
   and "The year line". Markup: index.html (the shell) + the spans between the fig:NAME markers; the
   figures themselves are drawn by story-figs.js into svg.fh-svg (and the year's HTML date line).
   Held = like the map: the frame (copy + figure) is position: sticky, centred in the SMALL viewport
   (--fh-top, from story-figs.js), and only the figure follows the scroll through the room after it.
   The text never moves. Reduced motion, no sticky, a short screen: no hold, the final state in the flow.
   Colours: grey text --ink-dim (#686E7A, 4.77:1 on slate-50), gold text --gold-lo, never --gold. */

.fh {
  --fh-ink: var(--ink-dim, #686E7A);
  position: relative;
}
.fh-pin > * { margin: 0; }

.fh-kick {
  margin: 0 0 10px;
  font: 500 11px/20px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fh-ink);
}
.fh-line {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.32;
  letter-spacing: -.002em;
  color: var(--slate-900);
  text-wrap: pretty;
}
.fh-fig {
  margin: 24px 0 0;
  width: var(--fh-size, 100%);
  max-width: min(100%, 620px);   /* phone; the cap keeps a no-JS desktop sane */
}
.fh-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.fh-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.fh-foot {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 0;
  font: 500 11px/11px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fh-ink);
}
.fh:not(.is-built) .fh-stage { visibility: hidden; }
/* Without the script there is no figure: no empty square, no legend for it (the caption still names it). */
html:not(.has-figs) .fh-stage,
html:not(.has-figs) .fh-foot { display: none; }

/* ---------- The hold ---------- */
.fh-room { display: none; }
.fh.is-held > .fh-pin {
  position: -webkit-sticky;
  position: sticky;
  top: var(--fh-top, 14px);
}
.fh.is-held > .fh-room { display: block; height: var(--fh-room); }
/* After the release the next block starts at the bottom of the small viewport, never inside the still frame. */
.fh.is-held { margin-bottom: var(--fh-after, 0px); }
/* In the flow (reduced motion, a short screen): a little air around the figure. */
.fh:not(.is-held) { padding: 64px 0; }

.fh[data-fig="gifts"] { --fh-room: max(130vh, 980px); }
.fh[data-fig="chains"],
.fh[data-fig="year"] { --fh-room: max(110vh, 860px); }
@supports (height: 1svh) {
  .fh[data-fig="gifts"] { --fh-room: max(130svh, 980px); }
  .fh[data-fig="chains"],
  .fh[data-fig="year"] { --fh-room: max(110svh, 860px); }
}

@media (min-width: 768px) {
  .fh[data-fig="gifts"] { --fh-room: max(150vh, 1200px); }
  @supports (height: 1svh) { .fh[data-fig="gifts"] { --fh-room: max(150svh, 1200px); } }
  .fh-kick { margin-bottom: 12px; font-size: 12px; }
  .fh-line { font-size: 21px; line-height: 1.32; }
  .fh-fig { margin-top: 26px; }
  .fh-foot { margin-top: 16px; }
  /* Columns: the square centred on the page (where the map's square sits), the copy right of it. */
  .fh.is-cols > .fh-pin {
    display: grid;
    grid-template-columns: var(--fh-x) var(--fh-size) 32px var(--fh-col) minmax(0, 1fr);
    align-items: start;
  }
  .fh.is-cols .fh-fig { grid-column: 2; grid-row: 1; margin-top: 0; max-width: none; }
  .fh.is-cols .fh-copy { grid-column: 4; grid-row: 1; margin-top: 6px; }
  .fh:not(.is-cols) .fh-copy { max-width: 620px; }   /* stacked (768-1023, short screens): the square's measure */
}
@media (min-width: 1280px) {
  .fh-line { font-size: 25px; line-height: 1.3; }
}

/* ---------- Inside the square (story-figs.js draws; sizes are SVG user units set there) ---------- */
.fh-svg text { font-kerning: normal; }
.fh-svg .mn { font-family: var(--mono); font-weight: 500; }
.fh-svg .ri { font-family: var(--serif); font-style: italic; font-weight: 400; }
.fh-svg .t-dim { fill: var(--fh-ink); }
.fh-svg .t-mid { fill: var(--slate-800); }
.fh-svg .t-ink { fill: var(--slate-900); }
.fh-svg .t-gold { fill: var(--gold-lo); }

/* gifts */
.fh-svg .g-dot { fill: var(--slate-700); }
.fh-svg .g-dot.is-gold { fill: var(--gold); }
.fh-svg .g-big { fill: var(--tile-gold); stroke: var(--gold); }
.fh-svg .g-halo { fill: var(--tile-gold); }

/* chains */
.fh-svg .c-axis { stroke: var(--slate-300); fill: none; }
.fh-svg .c-tick { stroke: var(--slate-500); fill: none; }
.fh-svg .c-dot { fill: var(--slate-700); }
.fh-svg .c-dot.is-gold { fill: var(--gold); }
.fh-svg .c-ghost { fill: none; stroke: var(--tile-pale); }
.fh-svg .c-curve { fill: none; stroke: var(--gold); }

/* year */
.fh-svg .y-axis, .fh-svg .y-ticks { stroke: var(--slate-300); fill: none; }
.fh-svg .y-line { stroke: var(--slate-500); fill: none; }
.fh-svg .y-pair { stroke: var(--slate-500); fill: none; stroke-linecap: round; }
.fh-svg .y-dash { stroke: var(--tile-pale); fill: none; }
.fh-svg .y-trail { stroke: var(--gold); fill: none; }
.fh-svg .y-start { fill: var(--slate-50); stroke: var(--gold); }
.fh-svg .y-stem { stroke: var(--gold); fill: none; stroke-linecap: round; }
.fh-svg .y-halo { fill: var(--tile-gold); opacity: .13; }
.fh-svg .y-ringc { fill: none; stroke: var(--gold); }
.fh-svg .y-dot { fill: var(--gold); }
.fh-svg .y-amt { stroke: var(--slate-50); stroke-linejoin: round; paint-order: stroke fill; }

/* The year's date line over the square (HTML, so it sets like the page's type). */
.fh-big {
  position: absolute;
  left: 0;
  right: 0;
  top: 9%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: .45em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--fh-size, 354px) * .0819);
  color: var(--slate-900);
  white-space: nowrap;
  pointer-events: none;
}
.fh-big-t { display: flex; flex-direction: column; align-items: flex-start; }
.fh-big-l {
  margin-bottom: 8px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fh-ink);
}
.fh-big-l.is-gold { color: var(--gold-lo); }
.fh-big-v { line-height: 1; font-variant-numeric: lining-nums; }
.fh-big-op { line-height: 1.15; color: var(--fh-ink); }

@media print {
  .fh.is-held > .fh-pin { position: static; }
  .fh-room, .fh.is-held > .fh-room { display: none; }
  .fh.is-held { margin-bottom: 0; }
  .fh { break-inside: avoid; }
}

@media (forced-colors: active) {
  .fh-svg .g-dot, .fh-svg .c-dot, .fh-svg .y-dot { fill: CanvasText; }
  .fh-svg text { fill: CanvasText; }
  .fh-svg .y-amt { stroke: Canvas; }
}