/* 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; }
}