/* =====================================================================
   Paper and Ink · essays/the-date-was-a-wish.css
   "The Date Was a Wish. The Math Was the Answer.": the figure only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; one paper object breaks out to 860px:
   a rollout board on taped graph paper, eight weeks across (Figure 1). Each site is a bar:
   two hatched weeks of preparation, an ink tick where it is switched on, two weeks of support.
   The blue board starts one site a week, the gold board three; a pencil line marks week 5.
   Gold = the date they asked for; blue = the date the math allows; labels are plain ink. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the rollout board ------------------------------------------ */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.boardfig { overflow-x: clip; overflow-clip-margin: 14px; padding-top: 14px; }
.boardfig .board {
  position: relative; width: min(100%, 720px); color: var(--slip-ink); padding: 1.5rem 1.4rem 1.1rem;
  transform: rotate(.5deg); font-family: var(--mono); font-size: .74rem; line-height: 1.4;
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep); animation: fade .6s ease .1s both;
}
.boardfig .board::before, .boardfig .board::after { content: ""; position: absolute; top: -11px; width: 88px; height: 24px; background: var(--noise), var(--tape); }
.boardfig .board::before { left: 28px; transform: rotate(-4deg); }
.boardfig .board::after { right: 28px; transform: rotate(5deg); }

/* board headings: the concept in its ink, the pace in muted ink */
.boardfig .bh { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .5rem; }
.boardfig .bh span { font-weight: 400; color: var(--graphite); }
.boardfig .bh-life { color: var(--slip-life); }
.boardfig .bh-once { color: var(--slip-once); margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1.5px dashed color-mix(in srgb, var(--slip-ink) 40%, transparent); }

/* the week grid: a row-label column, then eight equal weeks */
.boardfig .grid { --lc: 5.4rem; position: relative; display: grid; grid-template-columns: var(--lc) repeat(8, minmax(0, 1fr)); column-gap: 0; row-gap: 6px; align-items: center; }
.boardfig .wk { text-align: center; color: var(--graphite); font-size: .66rem; padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 30%, transparent); }
.boardfig .wk.lbl { border-bottom-color: transparent; }
/* every row is placed by hand: the notes sit in row 1 of the blue board, so its weeks drop to row 2 */
.boardfig .g-life .wk { grid-row: 2; }
.boardfig .g-once .wk { grid-row: 1; }
.boardfig .g-life .rl:has(+ .c1), .boardfig .g-life .c1 { grid-row: 3; }
.boardfig .g-life .rl:has(+ .c2), .boardfig .g-life .c2 { grid-row: 4; }
.boardfig .g-life .rl:has(+ .c3), .boardfig .g-life .c3 { grid-row: 5; }
.boardfig .g-life .rl:has(+ .c4), .boardfig .g-life .c4 { grid-row: 6; }
.boardfig .g-life .rl:has(+ .c5), .boardfig .g-life .c5 { grid-row: 7; }
.boardfig .g-once .rl:has(+ .c1), .boardfig .g-once .c1 { grid-row: 2; }
.boardfig .g-once .rl:has(+ .c2), .boardfig .g-once .c2 { grid-row: 3; }
.boardfig .g-once .rl:has(+ .c3), .boardfig .g-once .c3 { grid-row: 4; }
.boardfig .g-once .rl:has(+ .c4), .boardfig .g-once .c4 { grid-row: 5; }
.boardfig .g-once .rl:has(+ .c5), .boardfig .g-once .c5 { grid-row: 6; }
.boardfig .w-now { color: var(--slip-ink); font-weight: 600; }
.boardfig .rl { grid-column: 1; color: var(--graphite); font-size: .68rem; white-space: nowrap; }
.boardfig .rl b { font-weight: 500; color: var(--slip-ink); }

/* a cohort is one row: the sites that start preparing in the same week, four weeks long */
.boardfig .cohort { display: flex; flex-direction: column; gap: 3px; padding-inline: 2px; animation: wipe 1s ease both; }
.boardfig .c1 { grid-column: 2 / span 4; }
.boardfig .c2 { grid-column: 3 / span 4; }
.boardfig .c3 { grid-column: 4 / span 4; }
.boardfig .c4 { grid-column: 5 / span 4; }
.boardfig .c5 { grid-column: 6 / span 4; }
.boardfig .b { display: grid; grid-template-columns: 1fr 1fr; height: 12px; }
.boardfig .g-once .b { height: 7px; }
/* preparation is pencil-hatched in the concept's ink; support is a soft wash with an ink edge */
.boardfig .prep { border: 1.25px solid currentColor; border-right: 0; background: repeating-linear-gradient(38deg, color-mix(in srgb, currentColor 70%, transparent) 0 1px, transparent 1px 5px); }
.boardfig .sup { border: 1.25px solid currentColor; border-left: 3px solid var(--slip-ink); background: color-mix(in srgb, currentColor 18%, transparent); }
.boardfig .g-life .cohort { color: var(--slip-life); }
.boardfig .g-once .cohort { color: var(--slip-once); }

/* the pencil line down week 5 */
.boardfig .now { position: absolute; top: 0; bottom: -3px; left: calc(var(--lc) + (100% - var(--lc)) / 2); width: calc((100% - var(--lc)) / 8); pointer-events: none; border-inline: 1.5px dashed var(--graphite); background: color-mix(in srgb, var(--graphite) 7%, transparent); animation: fade .5s ease 2.7s both; }
.boardfig .g-life .now { top: 2.6rem; }

/* handwritten notes above the blue board, placed by week */
.boardfig .ann { font-family: var(--serif); font-style: italic; font-size: .95rem; line-height: 1.15; color: var(--slip-ink); grid-row: 1; align-self: end; padding-bottom: 4px; animation: fade .5s ease .3s both; }
.boardfig .a-prep { grid-column: 2 / span 2; }
.boardfig .a-on { grid-column: 3 / span 2; text-align: center; padding-bottom: 1.35rem; }
.boardfig .a-sup { grid-column: 4 / span 2; padding-left: 4px; }
.boardfig .a-now { grid-column: 6 / span 3; padding-left: 4px; animation-delay: 2.9s; }

/* the count under each board, and its stamp */
.boardfig .ft { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; }
.boardfig .cnt { color: var(--graphite); animation: fade .5s ease 3s both; }
.boardfig .cnt b { font-weight: 500; color: var(--slip-ink); }
.boardfig .stamp.s1 { color: var(--slip-life); transform: rotate(-6deg); animation-delay: 3.1s; }
.boardfig .stamp.s2 { color: var(--slip-once); transform: rotate(5deg); animation-delay: 3.5s; }
#fig1 + figcaption .btn { margin-left: 4px; }

/* Phone mode: the board loses its tilt, row labels narrow to the site numbers, the notes stack
   above the weeks, and the count sits above its stamp. Small text stays 11px or more. */
@media (max-width: 560px) {
  .boardfig .board { padding: 1.2rem .8rem 1rem; transform: none; font-size: .72rem; }
  .boardfig .bh { font-size: .7rem; letter-spacing: .08em; }
  .boardfig .bh span { display: block; }
  .boardfig .grid { --lc: 2.7rem; }
  .boardfig .wk, .boardfig .rl { font-size: .69rem; }
  .boardfig .wk { letter-spacing: -.03em; }
  .boardfig .ann { font-size: .9rem; }
  .boardfig .a-prep { grid-column: 1 / span 4; text-align: left; padding-bottom: 2.5rem; }
  .boardfig .a-on { grid-column: 1 / span 5; text-align: left; padding-bottom: 1.25rem; }
  .boardfig .a-sup { grid-column: 1 / span 5; text-align: left; padding-left: 0; }
  .boardfig .a-now { grid-column: 6 / span 4; text-align: right; padding-left: 0; }
  .boardfig .rl { white-space: normal; line-height: 1.15; }
  .boardfig .ft { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .boardfig .ft .stamp { align-self: flex-end; }
}