/* Kronik: a film played by scrolling, drawn like a comic.

   Without script, without WebGL or under reduced motion this file lays the same words out as a plain
   article. With `html.film` (set by js/film.js) the canvas takes the screen, every beat becomes a
   stretch of scroll, and its caption stands in a narration box while that stretch passes the middle
   of the screen. Everything laid over the picture is a paper sticker with an ink line and a hard shadow. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-mono-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/shantell-sans-latin-full.woff2") format("woff2"); }

:root {
  --ink: #070b1d; --paper: #f5f7ff; --cream: #fff1d6; --night: #0a0e30; --indigo: #1d2a73;
  --peach: #ffd29a; --coral: #ff8a5b; --pink: #ff5c8a; --mint: #62e0a8; --violet: #6b4fd8;
  --soft: #c9cef0; --grey: #4b5275;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --hand: "Shantell Sans", "Comic Sans MS", "Chalkboard SE", cursive;
  --pad: clamp(16px, 5vw, 80px);
  --line: 3px;                              /* the ink line round every sticker */
  --drop: 6px 6px 0 var(--ink);             /* and its hard shadow */
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--paper); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, p, dl, dd, figure, table { margin: 0; }
a { color: inherit; text-decoration-color: var(--coral); text-underline-offset: .18em; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
code { font-family: var(--mono); font-size: .92em; }
.hand, .cap__tag, .lbl, .hud__act, .hud__hint { font-family: var(--hand); font-variation-settings: "BNCE" 18, "INFM" 45, "SPAC" 0; }

/* ---------------------------------------------------------------- the words */
.wordmark { display: block; font-weight: 600; font-size: clamp(4rem, 13.5vw, 10.5rem); line-height: .92; letter-spacing: -.045em; }
.cap__pitch { margin-top: .5em; font-size: clamp(1.25rem, .9rem + 1.5vw, 2rem); line-height: 1.2; letter-spacing: -.02em; }
.cap__tag { display: inline-block; margin-bottom: .5rem; font-weight: 700; font-size: .95rem; color: var(--coral); }
.cap__big { font-weight: 600; font-size: clamp(1.3rem, .98rem + 1.2vw, 1.95rem); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.cap__big mark { color: inherit; background: linear-gradient(transparent 58%, var(--peach) 58%, var(--peach) 94%, transparent 94%); padding-inline: .08em; }
.cap__small { margin-top: .65rem; font-size: clamp(.95rem, .9rem + .22vw, 1.08rem); line-height: 1.45; color: var(--fg2, var(--soft)); text-wrap: pretty; }
.cap__code { margin-top: .5rem; font-size: .9rem; color: var(--fg2, var(--soft)); }
.cap__lead { margin-top: .6em; font-size: clamp(1.1rem, .95rem + .9vw, 1.6rem); line-height: 1.3; letter-spacing: -.015em; }
.cap__huge { font-weight: 800; font-size: clamp(3.2rem, 1.9rem + 6vw, 6.4rem); line-height: .92; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.cap__huge + .cap__big { margin-top: .15em; }

.tally { display: grid; gap: .2rem; }
.tally > div { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.tally dd { font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.1vw, 3.5rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.tally dt { font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); color: var(--fg2, var(--soft)); }
.tally .is-warm dd { color: var(--pink); }
.tally .is-warm dt { color: inherit; font-weight: 600; }

/* paper cards: the behavior diff and the comparison */
.panel, .sheet { background: #fff; color: var(--ink); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: var(--drop); }
.panel { width: min(100%, 520px); overflow: hidden; font-size: .8125rem; line-height: 1.25rem; }
.panel__bar { display: flex; align-items: center; gap: .65rem; height: 42px; padding: 0 14px; border-bottom: var(--line) solid var(--ink); background: var(--cream); white-space: nowrap; }
.panel__bar b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.panel__bar code { margin-left: auto; color: var(--grey); font-size: .75rem; }
.panel__dots { display: flex; gap: 5px; } .panel__dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--coral); }
.panel__dots i:nth-child(2) { background: var(--peach); } .panel__dots i:nth-child(3) { background: var(--mint); }
.panel__body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.panel__h { font-weight: 600; } .panel__h span { margin-left: .5rem; font-weight: 400; color: var(--grey); }
.hunk { display: grid; border: 2px solid var(--ink); border-radius: 9px; overflow: hidden; font: .75rem/1.3rem var(--mono); margin-bottom: 4px; }
.hunk__head { padding: 3px 11px; background: var(--paper); border-bottom: 2px solid var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hunk__ln { position: relative; padding: 1px 11px 1px 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hunk__ln::before { position: absolute; left: 12px; font-weight: 700; }
.hunk__ln.is-del { background: #ffd6dc; } .hunk__ln.is-del::before { content: "-"; }
.hunk__ln.is-add { background: #c9f4de; } .hunk__ln.is-add::before { content: "+"; }
.verdict { display: flex; align-items: center; gap: .7rem; margin-top: 2px; padding: 9px 12px; border-radius: 9px; background: var(--peach); border: 2px solid var(--ink); }
.verdict i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); flex: none; }
.verdict code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verdict b { margin-left: auto; font-weight: 700; white-space: nowrap; }

.sheet { padding: clamp(14px, 2vw, 26px) clamp(14px, 2.2vw, 30px); }
.compare { width: 100%; border-collapse: collapse; font-size: clamp(.8rem, .74rem + .28vw, .97rem); line-height: 1.32; text-align: left; }
.compare caption { caption-side: top; text-align: left; padding-bottom: .7rem; font-weight: 600; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; }
.compare th, .compare td { padding: .58em .8em; vertical-align: top; border-bottom: 2px solid #dfe3f5; }
.compare thead th { font-weight: 700; font-size: 1.05em; border-bottom: var(--line) solid var(--ink); }
.compare tbody th { font-weight: 500; color: var(--grey); width: 17%; padding-left: 0; }
.compare td { width: 26%; }
.compare td.is-us { width: 31%; }
.compare .is-us { background: #ffe9cf; font-weight: 600; }
.compare thead .is-us { border-radius: 10px 10px 0 0; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare__src { margin-top: .7rem; font-size: .8125rem; color: var(--grey); }

.links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.btn { display: inline-flex; align-items: center; height: 50px; padding: 0 1.35rem; border-radius: 99px; border: var(--line) solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: 5px 5px 0 var(--ink); transition: translate .12s, box-shadow .12s; }
.btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); }
.btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--ink); }
.btn--main { background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--pink); }
.btn--main:hover { box-shadow: 7px 7px 0 var(--pink); } .btn--main:active { box-shadow: 2px 2px 0 var(--pink); }
.fine { margin-top: 1.6rem; font-size: .8125rem; opacity: .78; max-width: 62ch; }

/* ---------------------------------------------------------------- article mode (the default) */
#stage, #labels, .hud { display: none; }
#film { width: min(100% - 2 * var(--pad), 64rem); margin-inline: auto; padding-block: clamp(3rem, 10vh, 7rem); }
.beat { padding-block: clamp(1.3rem, 3.6vh, 2.6rem); }
.beat--title { padding-bottom: clamp(3rem, 10vh, 6rem); }
.cap--split { display: grid; gap: 1.6rem; }
.beat--end { padding-top: clamp(4rem, 12vh, 8rem); }
.cap__big { max-width: 30ch; } .cap__small { max-width: 56ch; }

/* ---------------------------------------------------------------- film mode */
@media (prefers-reduced-motion: no-preference) {
  html.film { scrollbar-width: none; }
  html.film::-webkit-scrollbar { display: none; }
  html.film #stage { display: block; position: fixed; inset: 0; width: 100%; height: 100lvh; touch-action: pan-y; }
  html.film #labels { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; contain: strict; font-size: 16px; }
  html.film .hud { display: block; }
  html.film #film { width: auto; margin: 0; padding: 0; position: relative; z-index: 2; pointer-events: none; }

  /* a beat is a stretch of scroll; its timeline runs while the beat crosses the middle of the screen */
  html.film .beat { height: var(--h, 56vh); padding: 0; view-timeline: --beat block; view-timeline-inset: 50%; }
  html.film .beat--title { height: 100svh; }
  html.film .beat--long { --h: 72vh; }
  html.film .beat--table { --h: 130vh; }
  html.film .beat--end { height: 100svh; }

  html.film .cap { position: fixed; left: var(--pad); bottom: clamp(44px, 9.5vh, 100px); width: min(31rem, 100vw - 2 * var(--pad)); opacity: 0; visibility: hidden; will-change: opacity, translate; }
  html.film .cap :is(a, .panel, .sheet) { pointer-events: auto; }
  html.film .box { position: relative; --fg2: var(--grey); background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 7px 7px 0 var(--ink);
    padding: clamp(.95rem, .7rem + .8vw, 1.35rem) clamp(1.05rem, .8rem + 1vw, 1.6rem) clamp(1.05rem, .8rem + .9vw, 1.45rem); rotate: -1.1deg; }
  html.film .beat:nth-of-type(even) .box { rotate: .8deg; }
  html.film .cap__big, html.film .cap__small { max-width: none; }
  html.film .cap__tag { position: absolute; top: -1.05rem; left: 1rem; margin: 0; padding: .02rem .75rem .1rem; background: var(--coral); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 99px; box-shadow: 3px 3px 0 var(--ink); rotate: -3deg; }
  html.film .cap__code { display: none; }

  html.film .cap--title { left: 0; right: 0; width: auto; bottom: auto; top: 43%; text-align: center; padding-inline: var(--pad); }
  html.film .cap--end { left: 0; right: 0; width: auto; bottom: auto; top: 43%; display: grid; justify-items: center; text-align: center; padding-inline: var(--pad); color: var(--ink); }
  html.film .cap--end .cap__big { max-width: 17ch; font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -.04em; }
  html.film .cap--end .links { justify-content: center; }
  html.film .cap--split { right: var(--pad); width: auto; display: grid; grid-template-columns: minmax(0, 31rem) minmax(0, 520px); justify-content: space-between; align-items: end; gap: clamp(1.2rem, 3vw, 3rem); }
  html.film .cap--split .panel { justify-self: end; rotate: 1.1deg; }
  html.film .cap--wide { right: var(--pad); width: auto; bottom: auto; top: 50%; translate: 0 -50%; max-width: 1160px; margin-inline: auto; }

  /* native scroll-driven captions: in as the beat reaches the middle, out as it leaves */
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    html.film:not(.no-sda) .cap {
      animation: cap-in linear both, cap-out linear forwards;
      animation-timeline: --beat, --beat;
      animation-range: cover 4% cover 18%, cover 82% cover 96%;
    }
    html.film:not(.no-sda) .cap--wide { animation-name: sheet-in, sheet-out; animation-range: cover 3% cover 11%, cover 89% cover 97%; }
    html.film:not(.no-sda) .cap--title { animation-range: cover 4% cover 18%, cover 60% cover 72%; }       /* gone before the mark comes forward */
    html.film:not(.no-sda) .cap--end { animation-range: cover 26% cover 42%, cover 96% cover 100%; }       /* after the mark has assembled */
    html.film:not(.no-sda) .hud__bar > i { animation: bar linear both; animation-timeline: scroll(root block); }
  }
  /* without them, the script marks the beat in hand and the caption comes and goes in time */
  html.film.no-sda .cap { translate: 0 30px; transition: opacity .3s ease, translate .45s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .3s; }
  html.film.no-sda .beat.is-on .cap { opacity: 1; visibility: visible; translate: 0 0; transition-delay: .1s, .1s, 0s; }
  html.film.no-sda .cap--wide, html.film.no-sda .beat.is-on .cap--wide { translate: 0 -50%; }

  @keyframes cap-in { from { opacity: 0; visibility: hidden; translate: 0 38px; rotate: -3deg; } to { opacity: 1; visibility: visible; translate: 0 0; rotate: 0deg; } }
  @keyframes cap-out { from { opacity: 1; visibility: visible; translate: 0 0; } to { opacity: 0; visibility: hidden; translate: 0 -24px; } }
  @keyframes sheet-in { from { opacity: 0; visibility: hidden; translate: 0 calc(-50% + 40px); rotate: -1.5deg; } to { opacity: 1; visibility: visible; translate: 0 -50%; rotate: 0deg; } }
  @keyframes sheet-out { from { opacity: 1; visibility: visible; translate: 0 -50%; } to { opacity: 0; visibility: hidden; translate: 0 calc(-50% - 26px); } }
  @keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------------------------------------------------------------- the frame round the film: a timeline, and the chapter in hand */
.hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.hud__act { position: absolute; right: var(--pad); bottom: 24px; display: flex; gap: .55rem; padding: .08rem .8rem .16rem; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 99px; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: .9rem; rotate: 2deg; transition: opacity .3s, translate .3s; }
.hud__num { color: var(--violet); }
.hud__hint { position: absolute; left: 0; right: 0; bottom: clamp(26px, 5.5vh, 54px); display: flex; flex-direction: column; align-items: center; gap: .2rem; font-weight: 700; font-size: 1.05rem; transition: opacity .3s; }
.hud__hint svg { width: 22px; height: 22px; }
.hud__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--ink); }
.hud__bar > i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--peach), var(--coral) 55%, var(--pink)); }
html[data-at="title"] .hud__act, html[data-at="end"] .hud__act { opacity: 0; translate: 0 20px; }
html:not([data-at="title"]) .hud__hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hud__hint svg { animation: nudge 1.4s cubic-bezier(.3, 0, .3, 1) infinite; }
  @keyframes nudge { 50% { transform: translateY(7px); } }
}

/* ---------------------------------------------------------------- lettering pinned to the picture (js/film.js places it) */
.lbl { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; color: var(--ink); font-weight: 700; white-space: nowrap; }
.lbl--tag { padding: .12em .7em .2em; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 99px; box-shadow: 3px 3px 0 var(--ink); font-size: 1em; }
.lbl--tag.is-hot { background: var(--coral); }
.lbl--tag.is-dim { background: #d9ddf2; color: var(--grey); }
.lbl--tag.is-ghost { background: transparent; border-style: dashed; border-color: var(--paper); color: var(--paper); box-shadow: none; }
.lbl--bubble, .lbl--yes { padding: .4em .85em .5em; background: #fff; border: 3px solid var(--ink); border-radius: 1.3em; box-shadow: 4px 4px 0 var(--ink); font-size: 1.4em; font-weight: 800; }
.lbl--bubble::after, .lbl--yes::after { content: ""; position: absolute; left: 1.1em; bottom: -.52em; width: .9em; height: .9em; background: #fff; border: solid var(--ink); border-width: 0 3px 3px 0; transform: skewX(18deg) rotate(45deg); }
.lbl--yes { font-size: 1em; padding: .15em .6em .25em; background: var(--mint); }
.lbl--yes::after { left: calc(50% - .4em); bottom: -.42em; width: .7em; height: .7em; background: var(--mint); }
.lbl--card { display: grid; gap: .05em; padding: .32em .75em .42em; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 9px; box-shadow: 4px 4px 0 var(--ink); }
.lbl--card i { font-style: normal; font-size: .82em; color: var(--violet); }
.lbl--card code { font: 600 .9em/1.3 var(--mono); }
.lbl--ok, .lbl--bang { display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); }
.lbl--ok { background: var(--mint); } .lbl--ok svg { width: 1.1em; height: 1.1em; }
.lbl--bang { background: var(--pink); font-size: 1.15em; font-weight: 800; }
.lbl--bang.is-big { font-size: 2.3em; background: transparent; border: 0; box-shadow: none; }
.lbl--stamped { padding: .02em .5em .1em; border: 5px solid var(--pink); border-radius: 12px; color: var(--pink); font-size: 2.2em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html.day .lbl--tag.is-ghost { border-color: var(--ink); color: var(--ink); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 760px) {
  .compare thead { display: none; }
  .compare tr { display: grid; padding: .5rem 0; border-bottom: 2px solid #dfe3f5; }
  .compare th, .compare td { display: block; width: auto; border: 0; padding: .08rem 0; }
  .compare tbody th { color: var(--ink); font-weight: 700; }
  .compare td { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .5rem; }
  .compare td::before { content: attr(data-col); color: var(--grey); font-weight: 500; }
  .compare .is-us, .compare td.is-us { background: none; width: auto; }
  .compare .is-us::before { color: var(--ink); font-weight: 700; }
  .compare .m-hide { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    html.film #labels { font-size: 12px; }
    html.film .lbl--card code { font-size: .84em; }
    html.film .lbl--stamped { font-size: 1.7em; border-width: 4px; }
    html.film .cap { left: 14px; width: calc(100vw - 28px); bottom: clamp(34px, 6.5svh, 64px); }
    html.film .box { box-shadow: 5px 5px 0 var(--ink); }
    html.film .cap--title, html.film .cap--end { left: 0; width: auto; }
    html.film .cap--split { right: 14px; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
    html.film .cap--split .panel { justify-self: stretch; width: auto; rotate: .6deg; }
    html.film .cap--split .cap__small, html.film .cap--split .panel__dots { display: none; }
    html.film .cap--wide { right: 14px; }
    html.film .beat--table { --h: 150vh; }
    html.film .sheet { padding: 10px 14px; max-height: 84svh; overflow: hidden; }
    html.film .compare { font-size: .74rem; line-height: 1.25; }
    html.film .compare caption { font-size: 1.05rem; padding-bottom: .3rem; }
    html.film .compare tr { padding: .3rem 0; }
    html.film .compare__src { display: none; }
    html.film .hud__act { right: 14px; bottom: 14px; font-size: .78rem; }
    html.film .fine { font-size: .75rem; margin-top: 1.1rem; }
    html.film .btn { height: 44px; padding: 0 1.05rem; font-size: .95rem; }
  }
}