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

: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; }
/* 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-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-attr { margin-top: 12px; font-size: 16px; }

/* 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; }
.lc-log li { border-bottom: 2px dashed var(--ink); padding-bottom: 4px; }
.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) .lc-empty { display: none; }

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