/* watchout.click: a clear-line comic album (mockup C, "ligne claire"). One even black line,
   flat fills, no shadows; red only for what you click. No scripts anywhere: the clocks, the
   dwell counter and the clock hands are CSS animations started at server-computed offsets.
   Inline-direction properties are logical, so a right-to-left language mirrors the album. */

/* Patrick Hand and Patrick Hand SC (SIL OFL 1.1, see fonts/OFL.txt), served from this site:
   a font CDN would hand every visitor's address to a third party. */
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/patrick-hand-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/patrick-hand-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Patrick Hand SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/patrick-hand-sc-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Patrick Hand SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/patrick-hand-sc-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The fonts' straight apostrophe floats above the capitals (655-871 units, caps end at 661). A
   one-glyph cut of each font (same licence) takes over U+0027, the face defined last winning
   where unicode-ranges overlap: lowered 160 units to the ascenders in Patrick Hand, 210 to the
   capitals in the small-caps cut. */
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/patrick-hand-apostrophe.woff2?v=160") format("woff2"); unicode-range: U+0027; }
@font-face { font-family: "Patrick Hand SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/patrick-hand-sc-apostrophe.woff2?v=210") format("woff2"); unicode-range: U+0027; }

:root {
  --paper: #fffdf6; --ink: #111; --sky: #a7cbe6; --ochre: #e2c37a; --harb: #1e4a7a; --grn: #6fa36a;
  --red: #c62f21; --cap: #f6d85b; --line: 3px;
  --hand: "Patrick Hand", cursive;
  --hand-sc: "Patrick Hand SC", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
/* Patrick Hand SC draws its "fi"/"fl" ligatures in lower case, which breaks the small caps ("Case file").
   Set on every element and !important, because each `font:` shorthand resets ligatures to normal. */
*, *::before, *::after { font-variant-ligatures: no-common-ligatures !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--sky); color: var(--ink); font: 20px/1.4 var(--hand); }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--cap); color: #000; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 90; background: #fff; color: #111; padding: 10px 14px; border: var(--line) solid var(--ink); font: 400 18px/1 var(--hand-sc); }
.skip:focus { top: 12px; }

/* the album page */
.lc-album { max-width: 1240px; margin: 0 auto; padding: 22px 22px 96px; }
.lc-page { background: var(--paper); border: var(--line) solid var(--ink); padding: 18px; }
.lc-top { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; border-bottom: var(--line) solid var(--ink); padding-bottom: 10px; }
.lc-logo { font: 400 34px/1 var(--hand-sc); text-decoration: none; letter-spacing: .01em; }
.lc-logo em { font-style: normal; color: var(--red); }
.lc-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 21px/1.2 var(--hand-sc); }
.lc-nav a, .lc-nav .lc-off { text-decoration: none; border-bottom: var(--line) solid transparent; padding-bottom: 1px; }
.lc-nav a:hover { border-color: var(--ink); }
.lc-nav [aria-current="page"] { border-color: var(--red); }
.lc-nav .lc-off { color: #555; position: relative; cursor: help; }
/* Why page 2 and the case file are plain text here: a speech box on hover, or on focus, which a
   tap gives on a phone. No script, no title attribute (a tap never shows one). */
.lc-tip { display: none; position: absolute; inset-inline-start: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(300px, 80vw); background: var(--paper); border: var(--line) solid var(--ink); padding: 8px 12px; font: 400 18px/1.3 var(--hand); color: var(--ink); white-space: normal; }
.lc-off:hover .lc-tip, .lc-off:focus .lc-tip { display: block; }
/* Language menu: a native <details> disclosure (no script). The closed state is a globe and the
   current code; the open panel hangs from the header's end edge and lists every language in its
   own name, in up to four columns (two on phones), scrolling when there are more than fit. */
.lc-nav { margin-inline-start: auto; }
.lc-lang { font: 400 21px/1.2 var(--hand-sc); }
.lc-lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-bottom: var(--line) solid transparent; padding-bottom: 1px; }
.lc-lang summary::-webkit-details-marker { display: none; }
.lc-lang summary:hover, .lc-lang[open] summary { border-color: var(--ink); }
.lc-globe { width: 22px; height: 22px; }
.lc-flag { width: 28px; height: 21px; flex: none; border: 2px solid var(--ink); }
.lc-lang-menu a { display: inline-flex; align-items: center; gap: 10px; }
.lc-lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 12px 18px; list-style: none; background: var(--paper); border: var(--line) solid var(--ink); display: grid; grid-template-columns: repeat(var(--cols, 1), max-content); gap: 6px 22px; max-width: 100%; max-height: 60vh; overflow-y: auto; font-size: 20px; }
.lc-cols-2 { --cols: 2; } .lc-cols-3 { --cols: 3; } .lc-cols-4 { --cols: 4; }
.lc-lang-menu a { text-decoration: none; border-bottom: var(--line) solid transparent; padding-bottom: 1px; white-space: nowrap; }
.lc-lang-menu a:hover { border-color: var(--ink); }
.lc-lang-menu [aria-current] { border-color: var(--red); }
.lc-lang-help { grid-column: 1 / -1; border-top: 2px dashed var(--ink); padding-top: 8px; margin-top: 4px; font-size: 18px; }
.lc-lang-help a { white-space: normal; }
/* The translation page's download list: one line each, a flag beside the language. */
.lc-file .lc-text ul.lc-files { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.lc-files a { display: inline-flex; align-items: center; gap: 10px; }
.lc-files .lc-globe { width: 28px; height: 22px; flex: none; }

.lc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; margin: 22px 0 6px; }
.lc-head h1 { margin: 0; font: 400 clamp(40px, 5.2vw, 70px)/1 var(--hand-sc); letter-spacing: .005em; text-wrap: balance; }
.lc-tome { font: 400 22px/1.2 var(--hand-sc); white-space: nowrap; }
.lc-lead { display: inline-block; margin: 10px 0 4px; background: var(--cap); border: var(--line) solid var(--ink); padding: 8px 14px; font: 400 23px/1.3 var(--hand-sc); max-width: 62ch; }

/* the panel grid */
.lc-tier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin-top: 14px; }
@media (min-width: 901px) { .lc-pan.fill-2 { grid-column: span 2; } .lc-pan.fill-3 { grid-column: 1 / -1; } }
.lc-pan { position: relative; border: var(--line) solid var(--ink); background: #fff; display: flex; flex-direction: column; min-width: 0; }
.lc-pan.wide { grid-column: span 2; }
.lc-pan.full { grid-column: 1 / -1; }
.lc-art { position: relative; overflow: hidden; border-bottom: var(--line) solid var(--ink); }
.lc-art svg { width: 100%; height: 168px; }
.lc-pan.wide .lc-art svg { height: 200px; }
.lc-art svg * { vector-effect: non-scaling-stroke; }
.lc-capt { position: absolute; inset-inline-start: -3px; top: -3px; max-width: 86%; margin: 0; background: var(--cap); border: var(--line) solid var(--ink); padding: 6px 10px; font: 400 21px/1.15 var(--hand-sc); z-index: 1; overflow-wrap: anywhere; }
.lc-text { padding: 10px 14px 12px; display: grid; gap: 6px; flex: 1; align-content: start; background: var(--paper); }
.lc-text p { margin: 0; line-height: 1.35; }
.lc-meta { display: flex; align-items: center; gap: 10px; font: 400 17px/1 var(--hand-sc); margin-top: auto; padding-top: 4px; }
.lc-dots { display: inline-flex; gap: 3px; }
.lc-dots i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; }
.lc-dots i.on { background: var(--ink); }
.lc-meta time { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
/* The alarm sits in the art's top corner, opposite the caption (which leaves it room), so
   it never covers the words drawn over a scene. */
.lc-pan.hot .lc-capt { background: #fff; max-width: calc(100% - 130px); }
.lc-alarm { position: absolute; inset-inline-end: 10px; top: 10px; background: var(--red); color: #fff; border: var(--line) solid var(--ink); font: 400 19px/1 var(--hand-sc); padding: 5px 9px; z-index: 1; }

/* words drawn over a scene: catalog text laid out in the drawing's own coordinates, so it
   crops and scales exactly like the drawing under it */
.lc-art .lc-words { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lc-word { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--hand-sc); line-height: 1; color: var(--ink); }
.lc-word.paper { color: var(--paper); }

/* the clock hands in the "time" scene: one endless rotation each, started at the right angle */
.hand { transform-box: view-box; animation: wo-spin linear infinite; }
.hand-h { animation-duration: 43200s; animation-delay: var(--h, 0s); }
.hand-m { animation-duration: 3600s; animation-delay: var(--m, 0s); }
@keyframes wo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hand { animation-play-state: paused; } }

/* the visitor's clock (HH:MM:SS) and the dwell counter: registered integers animated in steps,
   printed by CSS counters; the server sets how far into each cycle they start */
@property --wo-h { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --wo-m { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --wo-s { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --wo-dm { syntax: "<integer>"; inherits: false; initial-value: 0; }
@keyframes wo-h { from { --wo-h: 0; } to { --wo-h: 24; } }
@keyframes wo-m { from { --wo-m: 0; } to { --wo-m: 60; } }
@keyframes wo-s { from { --wo-s: 0; } to { --wo-s: 60; } }
@keyframes wo-dm { from { --wo-dm: 0; } to { --wo-dm: 1000; } }
.lc-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-clock-static { display: none; } /* the text a page without its stylesheet still shows */
.lc-clock::before {
  content: counter(wo-h, decimal-leading-zero) ":" counter(wo-m, decimal-leading-zero) ":" counter(wo-s, decimal-leading-zero);
  counter-reset: wo-h var(--wo-h) wo-m var(--wo-m) wo-s var(--wo-s);
  animation: wo-h 86400s steps(24, end) infinite, wo-m 3600s steps(60, end) infinite, wo-s 60s steps(60, end) infinite;
  animation-delay: var(--ch, 0s), var(--cm, 0s), var(--cs, 0s);
}
.lc-dm::before { content: counter(wo-dm); counter-reset: wo-dm var(--wo-dm); animation: wo-dm 60000s steps(1000, end) forwards; animation-delay: var(--dm, 0s); }
.lc-ds::before { content: counter(wo-s, decimal-leading-zero); counter-reset: wo-s var(--wo-s); animation: wo-s 60s steps(60, end) infinite; animation-delay: var(--ds, 0s); }

/* the watcher's closing panel */
.lc-watch { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 20px; align-items: end; background: var(--sky); padding: 16px 18px 18px; }
.lc-watch svg { width: 150px; height: 190px; }
.lc-balloon { position: relative; align-self: center; margin: 0; background: #fff; border: var(--line) solid var(--ink); border-radius: 46% / 38%; padding: 20px 34px; font: 400 25px/1.25 var(--hand-sc); text-align: center; max-width: 620px; }
.lc-balloon:has(.lc-kept) { padding: 26px 56px; }
.lc-balloon::after { content: ""; position: absolute; inset-inline-start: -22px; bottom: 26px; width: 30px; height: 24px; background: #fff; border-inline-start: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); transform: skewY(-28deg); }
[dir="rtl"] .lc-balloon::after { transform: skewY(28deg); }
.lc-act { display: grid; gap: 10px; justify-items: end; text-align: end; }
.lc-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--red); color: #fff; border: var(--line) solid var(--ink); padding: 13px 20px; font: 400 27px/1 var(--hand-sc); text-decoration: none; white-space: nowrap; }
.lc-btn:hover { background: #a3241a; }
/* the arrow keeps its size: the watcher drawing's sizes must not reach it */
.lc-btn .lc-arrow { width: 26px; height: 18px; }
[dir="rtl"] .lc-btn .lc-arrow { transform: scaleX(-1); }
.lc-link { font: 400 20px/1.2 var(--hand-sc); }
.lc-fine { margin: 0; font: 400 18px/1.25 var(--hand-sc); }

.lc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 16px; border-top: var(--line) solid var(--ink); padding-top: 10px; font: 400 19px/1.3 var(--hand-sc); }
.lc-foot .num { flex: 1; text-align: center; min-width: 80px; }
.lc-credit { flex-basis: 100%; text-align: center; font-size: 15px; color: #555; }
.lc-credit a { color: inherit; }

/* page 2: the page-turning panel is shown until the composed panels stream in (no script) */
/* The turning panel has a fixed height and the composed tier, when it streams in, is pulled
   up over it on an opaque sheet. No selector has to notice the late arrival (a :has() rule
   is not re-checked reliably while a document is still streaming). */
.lc-turning { margin-top: 14px; max-width: 420px; height: 260px; overflow: hidden; }
.lc-turning + .lc-tier-2 { position: relative; z-index: 1; margin-top: -260px; background: var(--paper); }
/* page 2 streams its notebook last (the hover log keeps it open), so the cells after it in
   the story come earlier in the markup and are put back in place by order */
.lc-tier-2 > .lc-notes { order: 1; }
.lc-tier-2 > .lc-watch { order: 2; }
.lc-tier-2 > .lc-series { order: 3; }
.lc-tier-2 > .lc-foot { order: 4; grid-column: 1 / -1; margin-top: 4px; }

/* stage C: the watcher's notebook */
.lc-notes { background: #fff; }
.lc-notes .lc-text { gap: 10px; }
.lc-dwell { font: 400 26px/1.2 var(--hand-sc); }
.lc-dwell b { font-weight: 400; color: var(--red); font-variant-numeric: tabular-nums; }
.lc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* Five ruled lines from the start, one line each: a new entry streams in at the bottom and the
   oldest drops out of sight, so the notebook never grows. A line with five lines after it is
   hidden; :nth-last-child would not do, as browsers hold it back while the list is still being
   parsed, and this one stays open for the whole stream. */
.lc-log li { height: calc(1.4em + 6px); padding-bottom: 4px; border-bottom: 2px dashed var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-log li:has(~ li ~ li ~ li ~ li ~ li) { display: none; }
.lc-log time { font-family: var(--hand-sc); font-variant-numeric: tabular-nums; margin-inline-end: 8px; }
.lc-empty { margin: 0; color: #2b2b2b; }
.lc-notes:has(.lc-log li:not(.lc-slot)) .lc-empty { visibility: hidden; }

/* the series: sibling sites as album covers */
.lc-series { grid-column: 1 / -1; }
.lc-series h2 { margin: 6px 0 8px; font: 400 26px/1.1 var(--hand-sc); }
.lc-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lc-cover { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 230px; border: var(--line) solid var(--ink); padding: 12px 14px; text-decoration: none; color: var(--ink); }
.lc-cover b { font: 400 30px/1 var(--hand-sc); }
.lc-coverart { position: relative; flex: 1; min-height: 150px; }
.lc-coverart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-coverart svg * { vector-effect: non-scaling-stroke; }
.lc-cover small { font: 400 19px/1.1 var(--hand-sc); }
a.lc-cover:hover { outline: var(--line) solid var(--ink); outline-offset: 3px; }
.lc-cover .here { position: absolute; inset-inline-end: -3px; top: -3px; background: var(--ink); color: #fff; font: 400 17px/1 var(--hand-sc); padding: 5px 8px; }
.lc-cover.c1 { background: var(--sky); }
.lc-cover.c2 { background: var(--ochre); }
.lc-cover.c3 { background: var(--red); color: #fff; }

/* case file (technical) */
.lc-file { grid-column: 1 / -1; background: #fff; }
.lc-file .lc-text { padding: 16px 18px 18px; }
.lc-file h2 { justify-self: start; margin: 0 0 6px; display: inline-block; background: var(--cap); border: var(--line) solid var(--ink); padding: 4px 10px; font: 400 23px/1.1 var(--hand-sc); }
.lc-file h3 { margin: 10px 0 2px; font: 400 21px/1.1 var(--hand-sc); }
.lc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 18px; margin: 0; }
.lc-dl dt, .lc-dl dd { margin: 0; padding: 6px 0; border-bottom: 2px solid var(--ink); }
.lc-dl dt { font-family: var(--hand-sc); }
.lc-dl dd { overflow-wrap: anywhere; }
.lc-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-ev li { display: grid; gap: 2px; border-bottom: 2px dashed var(--ink); padding-bottom: 8px; }
.lc-ev .lc-dl { margin: 4px 0 2px; font-size: 18px; }
.lc-ev .lc-dl dt, .lc-ev .lc-dl dd { padding: 3px 0; border-bottom-width: 1px; }
.lc-ev code, .lc-dl code, .lc-csp code, .lc-file code { font: 400 18px/1.35 var(--hand); overflow-wrap: anywhere; background: var(--sky); padding: 0 4px; }
.lc-csp { margin: 6px 0; white-space: pre-wrap; }
.lc-file ul:not(.lc-ev) { margin: 0; padding-inline-start: 22px; }
.lc-note { margin: 4px 0 0; max-width: 80ch; }

/* what I cannot know */
.lc-q { min-height: 220px; }
.lc-q .lc-text p:first-child { font: 400 24px/1.15 var(--hand-sc); }
.lc-kept { list-style: none; margin: 0; padding: 0; text-align: start; display: grid; gap: 4px; font: 400 21px/1.25 var(--hand-sc); }

/* sibling cover page */
.lc-tomepage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; margin-top: 16px; }
.lc-bigcover { border: var(--line) solid var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 460px; }
.lc-bigcover.c2 { background: var(--ochre); }
.lc-bigcover.c3 { background: var(--red); color: #fff; }
.lc-bigcover b { font: 400 54px/1 var(--hand-sc); }
.lc-bigcover .lc-coverart { min-height: 200px; }
.lc-bigcover small { font: 400 24px/1 var(--hand-sc); }
.lc-stamp { align-self: flex-start; transform: rotate(-6deg); border: var(--line) solid var(--ink); background: #fff; color: var(--red); font: 400 30px/1 var(--hand-sc); padding: 6px 14px; }
.lc-blurb { display: grid; gap: 12px; align-content: start; }
.lc-blurb ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lc-blurb li { background: #fff; border: var(--line) solid var(--ink); padding: 10px 14px; font: 400 22px/1.25 var(--hand-sc); }

@media (max-width: 900px) {
  .lc-tier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-watch { grid-template-columns: 110px minmax(0, 1fr); }
  .lc-watch > svg { width: 110px; height: 150px; }
  .lc-act { grid-column: 1 / -1; justify-items: start; text-align: start; }
  .lc-tomepage { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 19px; }
  .lc-album { padding: 10px 10px 78px; }
  .lc-page { padding: 10px; }
  .lc-logo { font-size: 26px; }
  .lc-nav { font-size: 19px; gap: 2px 14px; }
  .lc-lang { margin-inline-start: auto; }
  .lc-cols-3, .lc-cols-4 { --cols: 2; }
  .lc-head { grid-template-columns: 1fr; margin-top: 14px; }
  .lc-head h1 { font-size: 40px; }
  .lc-lead { font-size: 20px; }
  .lc-tier, .lc-covers { grid-template-columns: 1fr; }
  .lc-pan.wide { grid-column: auto; }
  .lc-art svg, .lc-pan.wide .lc-art svg { height: 150px; }
  .lc-capt { font-size: 19px; }
  .lc-watch { grid-template-columns: 1fr; padding: 12px; }
  .lc-watch > svg { display: none; }
  .lc-balloon { font-size: 21px; padding: 16px 20px; border-radius: 30% / 26%; }
  .lc-balloon::after { display: none; }
  .lc-btn { font-size: 24px; width: 100%; justify-content: center; }
  .lc-cover { min-height: 170px; }
  .lc-dl { grid-template-columns: 1fr; }
  .lc-dl dt { border-bottom: 0; padding-bottom: 0; }
  .lc-bigcover { min-height: 320px; }
  .lc-bigcover b { font-size: 40px; }
}

/* volume 2 (cookies.watchout.click): the server's first panel, the consent banner and the
   install block, the cookie card, history panels and the goodbye; the same album, layered
   after volume 1's rules (and after its media queries, which these override) */
/* --- the server's first panel: the watcher steps forward before any finding --------------- */
.lc-intro { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px 30px; align-items: end; background: var(--sky); padding: 56px 22px 18px 18px; }
.lc-intro > svg { width: 150px; height: 190px; }
.lc-says { display: grid; gap: 16px; justify-items: start; align-self: center; padding-inline-start: 22px; }
.lc-says .lc-balloon { max-width: 860px; padding: 22px 46px; }
/* the visit counter, stamped in the corner like a page number in a ledger */
.lc-visits { position: absolute; inset-inline-end: 16px; top: 12px; transform: rotate(4deg); background: #fff; border: var(--line) solid var(--ink); color: var(--red); font: 400 24px/1 var(--hand-sc); padding: 6px 12px; }

/* --- a taste of what the cookie unlocks: findings with the answer blacked out ------------- */
.lc-locked .lc-lock { position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 1; transform: rotate(-4deg); background: var(--ochre); border: var(--line) solid var(--ink); font: 400 19px/1 var(--hand-sc); padding: 5px 9px; }
.lc-redact { display: inline-block; width: var(--w, 4ch); height: .9em; vertical-align: -.08em; background: var(--ink); }
.lc-dots i.none { background: transparent; }

/* --- the banner and the install block: the watcher's closing panel asking for the cookie -- */
.lc-watch.lc-banner { grid-template-columns: 150px minmax(0, 1fr) minmax(250px, 300px); grid-template-rows: auto auto; gap: 16px 24px; align-items: center; }
.lc-banner > svg { grid-row: 1 / span 2; align-self: end; }
.lc-banner > .lc-balloon { grid-column: 2; justify-self: start; }
.lc-banner > .lc-terms { grid-column: 2; }
.lc-banner > .lc-act { grid-column: 3; grid-row: 1 / span 2; justify-items: stretch; text-align: start; }
.lc-banner .lc-btn { justify-content: center; white-space: normal; text-align: center; line-height: 1.1; }
/* both answers look the same: refusing must not be harder than accepting */
.lc-choice { display: grid; gap: 10px; }
.lc-terms { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--paper); border: var(--line) solid var(--ink); padding: 12px 16px 14px; }
.lc-terms > svg { width: 104px; height: 104px; border: var(--line) solid var(--ink); }
.lc-terms > div { display: grid; gap: 8px; min-width: 0; }
.lc-terms p { margin: 0; line-height: 1.35; }
.lc-terms .lc-clause { border-top: 2px dashed var(--ink); padding-top: 8px; }
.lc-terms code { font: 400 19px/1.3 var(--hand); background: var(--sky); padding: 0 4px; overflow-wrap: anywhere; }
.lc-terms h2 { margin: 0; font: 400 21px/1.1 var(--hand-sc); }

/* --- the cookie card: the Set-Cookie line verbatim, every part explained ------------------ */
.lc-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); background: #fff; }
/* the cookie is drawn whole (fitted) on its own ochre ground, however tall the card grows */
.lc-card > .lc-art { border-bottom: 0; border-inline-end: var(--line) solid var(--ink); background: var(--ochre); }
.lc-card > .lc-art svg { height: 100%; min-height: 300px; }
.lc-card .lc-death span { white-space: nowrap; }
.lc-card .lc-text { gap: 12px; padding: 16px 20px 18px; }
.lc-card .lc-death { position: absolute; inset-inline: 14px; bottom: 18px; z-index: 1; text-align: center; transform: rotate(-4deg); background: #fff; border: var(--line) solid var(--ink); color: var(--red); font: 400 24px/1.1 var(--hand-sc); padding: 8px 10px; }
.lc-setcookie { margin: 0; background: var(--sky); border: var(--line) solid var(--ink); padding: 10px 14px; font: 400 21px/1.4 var(--hand); overflow-wrap: anywhere; }
.lc-setcookie .lc-hdr { font-family: var(--hand-sc); }
.lc-setcookie .lc-tbd { font-style: italic; }
.lc-card .lc-dl { font-size: 19px; }
.lc-card .lc-dl dt code { font: 400 19px/1.35 var(--hand); background: var(--sky); padding: 0 4px; overflow-wrap: anywhere; }
.lc-card .lc-dl dd { line-height: 1.3; }
.lc-promise { justify-self: start; margin: 2px 0 0; background: var(--cap); border: var(--line) solid var(--ink); padding: 8px 14px; font: 400 22px/1.25 var(--hand-sc); max-width: 60ch; }
.lc-card .lc-link { justify-self: start; }

/* --- history panels: two moments side by side in one panel (then | now) ------------------- */
.lc-art.lc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lc-half { position: relative; overflow: hidden; min-width: 0; }
.lc-half + .lc-half { border-inline-start: var(--line) solid var(--ink); }
.lc-tag { position: absolute; inset-inline-end: 8px; bottom: 8px; z-index: 1; background: #fff; border: var(--line) solid var(--ink); font: 400 17px/1 var(--hand-sc); padding: 4px 7px; white-space: nowrap; }

/* rhythm: one column per weekday, a dot per visit, placed by its hour (midnight at the top) */
.lc-week { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 2px solid var(--ink); background: #fff; }
.lc-week li { position: relative; display: grid; grid-template-rows: auto 56px; justify-items: center; gap: 2px; padding: 4px 0 6px; font: 400 16px/1 var(--hand-sc); }
.lc-week li + li { border-inline-start: 2px solid var(--ink); }
.lc-week li.today { background: var(--cap); }
.lc-week .lc-hours { position: relative; width: 100%; }
.lc-week .lc-hours i { position: absolute; inset-inline-start: calc(50% - 6px + var(--dx, 0px)); top: calc(var(--t) * (100% - 12px)); width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.lc-week-legend { margin: 0; font: 400 15px/1 var(--hand-sc); }

/* page 2: the lead is chosen once the outcome is known, so it opens the composed sheet */
.lc-tier-2 > .lc-lead { grid-column: 1 / -1; justify-self: start; margin: 0; }

/* the reveal: traits matched, as filled boxes; never a place, a network or an hour */
.lc-traits { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 2px 0; }
.lc-traits i { width: 22px; height: 22px; border: var(--line) solid var(--ink); background: #fff; }
.lc-traits i.on { background: var(--ink); }
.lc-traits span { margin-inline-start: 8px; font: 400 21px/1 var(--hand-sc); }

/* --- "your cookie": the goodbye ------------------------------------------------------------ */
.lc-bye { grid-column: 1 / -1; background: #fff; }
.lc-bye > .lc-text { gap: 14px; padding: 16px 18px 18px; }
.lc-bye h2 { justify-self: start; margin: 0; background: var(--cap); border: var(--line) solid var(--ink); padding: 4px 10px; font: 400 23px/1.1 var(--hand-sc); }
.lc-forget { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; align-items: center; }
.lc-forget p { margin: 0; }
.lc-warn { margin: 0; border: var(--line) solid var(--ink); background: var(--paper); padding: 10px 14px; max-width: 90ch; }
.lc-warn b { font-weight: 400; font-family: var(--hand-sc); }
.lc-browsers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lc-browser { border: var(--line) solid var(--ink); background: var(--paper); padding: 10px 14px 12px; }
.lc-browser h3 { margin: 0 0 6px; font: 400 22px/1.1 var(--hand-sc); }
.lc-browser h3 small { font-size: 17px; }
.lc-browser ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 4px; font-size: 18px; line-height: 1.35; }
/* a menu item exactly as the browser labels it */
.lc-ui { font: 400 17px/1.5 var(--hand-sc); background: #fff; border: 2px solid var(--ink); padding: 0 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* --- forgotten: what was deleted --------------------------------------------------------- */
.lc-gone { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-gone li { position: relative; padding-inline-start: 34px; padding-bottom: 8px; border-bottom: 2px dashed var(--ink); }
.lc-gone li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .25em; width: 18px; height: 9px; border-inline-start: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); transform: rotate(-45deg); }
.lc-gone code { font: 400 18px/1.35 var(--hand); background: var(--sky); padding: 0 4px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .lc-intro { grid-template-columns: 110px minmax(0, 1fr); }
  .lc-intro > svg { width: 110px; height: 150px; }
  .lc-watch.lc-banner { grid-template-columns: 110px minmax(0, 1fr); }
  .lc-banner > .lc-act { grid-column: 1 / -1; grid-row: auto; }
  .lc-choice { grid-template-columns: 1fr 1fr; }
  .lc-browsers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* the balloons take the whole width; the server stands small in the corner, by the caption */
  .lc-intro { grid-template-columns: 1fr; padding: 70px 10px 12px; }
  .lc-intro > svg { position: absolute; inset-inline-end: 12px; top: 8px; width: 42px; height: 53px; }
  .lc-intro:has(.lc-visits) { padding-bottom: 56px; }
  .lc-says { padding-inline-start: 0; gap: 10px; }
  .lc-says .lc-balloon { padding: 14px 18px; }
  .lc-says .lc-balloon::after { display: block; inset-inline-start: auto; inset-inline-end: 34px; bottom: auto; top: -16px; width: 22px; height: 18px; border-inline-start: 0; border-bottom: 0; border-top: var(--line) solid var(--ink); border-inline-end: var(--line) solid var(--ink); transform: skewX(-28deg); }
  .lc-says .lc-balloon + .lc-balloon::after { display: none; }
  .lc-visits { font-size: 19px; top: auto; bottom: 12px; inset-inline-end: 12px; }
  .lc-watch.lc-banner { grid-template-columns: 1fr; }
  .lc-banner > .lc-balloon, .lc-banner > .lc-terms { grid-column: 1; }
  .lc-choice { grid-template-columns: 1fr; }
  .lc-terms { grid-template-columns: 1fr; }
  .lc-terms > svg { display: none; }
  .lc-card { grid-template-columns: 1fr; }
  .lc-card > .lc-art { border-inline-end: 0; border-bottom: var(--line) solid var(--ink); }
  .lc-card > .lc-art svg { min-height: 0; height: 150px; }
  .lc-card .lc-death { position: static; margin: 0 14px 16px; font-size: 20px; }
  .lc-setcookie { font-size: 19px; }
  .lc-art.lc-split svg { height: 150px; }
  /* two narrow halves leave no corner for the caption: it becomes a strip above them, so it
     never covers the words drawn in a half */
  .lc-art.lc-split .lc-capt { position: static; grid-column: 1 / -1; grid-row: 1; justify-self: start; margin: -3px 0 0; margin-inline-start: -3px; }
  .lc-forget { grid-template-columns: 1fr; }
  .lc-browsers { grid-template-columns: 1fr; }
}

/* volume 3 (js.watchout.click): page 1's promises, page 2's acts, praised readings, the
   picture the visitor's browser drew, the demo field and the live log, page 3's replay, typed
   line and defences, the honest page's two policies and the case file's moves; the same album,
   layered after volumes 1 and 2. A rule whose selector
   could also match their markup is scoped to .lc-js, the album of volume 3's page 2. */
/* --- a panel with its drawing beside the words (the promises, the refused script) -------- */
.lc-beside { display: grid; grid-template-columns: minmax(170px, var(--art, 230px)) minmax(0, 1fr); }
.lc-beside > .lc-art { min-height: 200px; border-bottom: 0; border-inline-end: var(--line) solid var(--ink); }
/* the drawing and its words fill the art however tall the text makes it */
.lc-pan.lc-beside > .lc-art svg { position: absolute; inset: 0; height: 100%; }
.lc-beside .lc-text { gap: 12px; padding: 14px 18px 16px; }
.lc-refused { --art: 420px; }

/* --- page 1: the script's promises, written on the script's own page --------------------- */
.lc-vows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-vows li { position: relative; padding-inline-start: 36px; font: 400 23px/1.25 var(--hand-sc); }
.lc-vows li::before { content: ""; position: absolute; inset-inline-start: 5px; top: .22em; width: 19px; height: 10px; border-inline-start: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); transform: rotate(-45deg); }
.lc-beside .lc-link { justify-self: start; }
/* a sticker on a stage-A finding: the script will check it on page 2 */
.lc-later { position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 1; transform: rotate(-4deg); background: var(--ochre); border: var(--line) solid var(--ink); font: 400 19px/1 var(--hand-sc); padding: 5px 9px; }

/* --- page 2: each act opens with a narrator's strip --------------------------------------- */
.lc-chapter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 10px; }
.lc-chapter h2 { margin: 0; display: flex; align-items: center; gap: 12px; font: 400 36px/1.05 var(--hand-sc); }
.lc-chapter h2 b { font-weight: 400; font-size: 23px; background: var(--ink); color: var(--paper); padding: 5px 11px 4px; }
.lc-chapter p { margin: 0; font: 400 21px/1.25 var(--hand-sc); }
.lc-js .lc-tier + .lc-tier { margin-top: 22px; }
/* the sheet starts a little above the page-turning panel it covers, so no sliver of that
   panel's top border shows at a fractional pixel offset; the padding keeps the acts in place */
.lc-js .lc-turning + .lc-tier-2 { margin-top: -264px; padding-top: 4px; }

/* --- the hidden state is praised: a green stamp where the alarm would be ------------------ */
.lc-praise { position: absolute; inset-inline-end: 10px; top: 10px; z-index: 1; transform: rotate(3deg); background: var(--grn); color: var(--ink); border: var(--line) solid var(--ink); font: 400 20px/1 var(--hand-sc); padding: 5px 10px; }
.lc-pan.praised .lc-capt { max-width: calc(100% - 112px); }

/* --- your drawing: the PNG the browser just drew, pinned on paper ------------------------- */
.lc-art.lc-png { display: grid; place-items: center; height: 168px; padding: 48px 14px 40px; background: var(--paper); }
.lc-pan.wide .lc-art.lc-png { height: 200px; }
.lc-png img { display: block; width: min(100%, 300px); height: auto; max-height: 100%; object-fit: contain; border: var(--line) solid var(--ink); background: #fff; transform: rotate(-2deg); }
.lc-js .lc-art.lc-split .lc-half > svg { height: 168px; }

/* --- act 3: the demo field and the live log ----------------------------------------------- */
.lc-field > .lc-art { overflow: visible; display: grid; gap: 10px; padding: 64px 14px 14px; background: var(--sky); }
.lc-field textarea { display: block; width: 100%; min-height: 150px; margin: 0; resize: vertical; background: #fff; color: var(--ink); border: var(--line) solid var(--ink); border-radius: 0; padding: 10px 12px; font: 400 24px/1.35 var(--hand); }
.lc-field textarea::placeholder { color: #666; }
.lc-nosend { justify-self: start; margin: 0; background: #fff; border: var(--line) solid var(--ink); padding: 5px 10px; font: 400 18px/1.2 var(--hand-sc); }
.lc-field .lc-warn { font-size: 19px; line-height: 1.3; }
.lc-anchor { margin: 0; border-top: 2px dashed var(--ink); padding-top: 8px; font-size: 18px; line-height: 1.35; }
.lc-anchor b { font-weight: 400; font-family: var(--hand-sc); }
/* the live log keeps the notebook's ruled lines, but a line may wrap and twelve stay in sight */
.lc-live .lc-log li { height: auto; min-height: calc(1.4em + 6px); white-space: normal; overflow: visible; }
.lc-live .lc-log li:has(~ li ~ li ~ li ~ li ~ li) { display: block; }
.lc-live .lc-log li:has(~ li ~ li ~ li ~ li ~ li ~ li ~ li ~ li ~ li ~ li ~ li ~ li) { display: none; }
.lc-live .lc-dwell { font-size: 23px; }
.lc-live.wide .lc-art svg { height: 140px; }
.lc-live .lc-fine { margin-top: -4px; }
/* what the visitor typed, pasted or copied: always quoted on a chip, never as page text */
.lc-said { font: 400 19px/1.35 var(--hand); background: var(--sky); padding: 0 5px; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
del.lc-said { background: #fff; text-decoration: line-through var(--red) 2px; }
/* act 3 streams its notebook last (the live log keeps it open), so the watcher and the foot
   come earlier in the markup and are put back after it by order */
.lc-live-tier > .lc-live { order: 1; }
.lc-live-tier > .lc-watch { order: 2; margin-top: 10px; }
.lc-live-tier > .lc-foot { order: 3; grid-column: 1 / -1; margin-top: 4px; }

/* --- page 3: the policy in the lead, the replay over a miniature of page 2 ---------------- */
.lc-lead code { font: inherit; background: #fff; border: 2px solid var(--ink); padding: 0 5px; }
.lc-replay { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); background: #fff; }
.lc-replay > .lc-art { border-bottom: 0; border-inline-end: var(--line) solid var(--ink); background: var(--sky); padding: 66px 16px 16px; }
.lc-replay > .lc-art svg { height: auto; border: 2px solid var(--ink); }
.lc-replay .lc-text { gap: 12px; padding: 16px 20px 18px; }
.lc-rests { margin: 0; padding-inline-start: 26px; display: grid; gap: 2px; }
.lc-rests b { font-weight: 400; font-family: var(--hand-sc); font-variant-numeric: tabular-nums; }
.lc-legend { list-style: none; margin: 0; padding: 8px 0 0; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: 6px 22px; font: 400 18px/1.2 var(--hand-sc); }
.lc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lc-legend svg { width: 24px; height: 24px; flex: none; }

/* --- page 3: what you typed, as an edited line -------------------------------------------- */
.lc-art.lc-sheet { padding: 64px 18px 20px; background: var(--paper); }
.lc-history { margin: 0; background: #fff; border: var(--line) solid var(--ink); padding: 10px 16px; font: 400 27px/1.5 var(--hand); overflow-wrap: anywhere; }
/* a struck piece keeps a little air after it, so the text written after it reads apart */
.lc-history del { color: #444; text-decoration: line-through var(--red) 2px; margin-inline-end: .25em; }

/* --- page 3: defences, each tied to the panel it answers ---------------------------------- */
.lc-defend { grid-column: 1 / -1; background: #fff; }
.lc-defend > .lc-text { gap: 12px; padding: 16px 18px 18px; }
.lc-defend h2 { justify-self: start; margin: 0; background: var(--cap); border: var(--line) solid var(--ink); padding: 4px 10px; font: 400 23px/1.1 var(--hand-sc); }
.lc-defs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lc-defs li { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 6px 20px; align-items: start; padding-bottom: 10px; border-bottom: 2px dashed var(--ink); }
.lc-defs li:last-child { border-bottom: 0; padding-bottom: 0; }
.lc-defs p { margin: 0; line-height: 1.35; }
.lc-for { display: flex; flex-wrap: wrap; gap: 6px; align-self: start; }
.lc-for span { font: 400 17px/1.5 var(--hand-sc); background: var(--cap); border: 2px solid var(--ink); padding: 0 6px; }

/* --- the honest page: two policies side by side, and what the script never does ---------- */
.lc-csps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lc-csps > div { position: relative; display: grid; gap: 8px; align-content: start; border: var(--line) solid var(--ink); background: var(--paper); padding: 12px 14px 14px; }
.lc-csps h3 { margin: 0; padding-inline-end: 120px; font: 400 22px/1.15 var(--hand-sc); }
.lc-csps p { margin: 0; line-height: 1.35; }
.lc-csps .here { position: absolute; inset-inline-end: -3px; top: -3px; background: var(--ink); color: #fff; font: 400 17px/1 var(--hand-sc); padding: 5px 8px; }
.lc-never { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 96ch; }
.lc-never li { position: relative; padding-inline-start: 36px; padding-bottom: 8px; border-bottom: 2px dashed var(--ink); line-height: 1.35; }
.lc-never li:last-child { border-bottom: 0; }
.lc-never li::before, .lc-never li::after { content: ""; position: absolute; inset-inline-start: 4px; top: .62em; width: 20px; height: var(--line); background: var(--red); transform: rotate(45deg); }
.lc-never li::after { transform: rotate(-45deg); }
.lc-never b { font-weight: 400; font-family: var(--hand-sc); }

/* --- the case file: the picture as the browser drew it, and one move per line ------------ */
.lc-ev .lc-drawn { justify-self: start; display: block; max-width: 100%; height: auto; border: 2px solid var(--ink); background: #fff; }
.lc-moves li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-bottom: 4px; }
.lc-moves .lc-fine { margin-inline-start: auto; }

@media (max-width: 900px) {
  .lc-replay { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .lc-defs li { grid-template-columns: 1fr; }
  .lc-csps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lc-beside { grid-template-columns: 1fr; }
  .lc-beside > .lc-art { min-height: 150px; border-inline-end: 0; border-bottom: var(--line) solid var(--ink); }
  .lc-vows li { font-size: 21px; }
  .lc-chapter h2 { font-size: 30px; }
  .lc-chapter p { font-size: 19px; }
  .lc-art.lc-png, .lc-pan.wide .lc-art.lc-png { height: 150px; padding: 48px 10px 30px; }
  .lc-js .lc-art.lc-split .lc-half > svg { height: 150px; }
  .lc-field > .lc-art { padding-top: 60px; }
  .lc-field textarea { font-size: 22px; min-height: 120px; }
  .lc-replay { grid-template-columns: 1fr; }
  .lc-replay > .lc-art { border-inline-end: 0; border-bottom: var(--line) solid var(--ink); padding: 60px 12px 12px; }
  .lc-art.lc-sheet { padding: 60px 10px 14px; }
  .lc-history { font-size: 23px; padding: 8px 12px; }
  .lc-csps h3 { padding-inline-end: 0; }
  .lc-csps > div:has(.here) h3 { padding-top: 22px; }
}