/* ============================================================
   dinsdag — aggressive Odoo chrome reset
   ============================================================
   Run this BEFORE all other CSS. Strips backgrounds, hero images,
   the Odoo "Powered by" promo, the default footer, navbar overlays,
   bootstrap container backgrounds, fontawesome leftovers — anything
   that fights the terminal aesthetic. Selectors err on the side of
   over-broad with !important; we own the visual layer now.
   ============================================================ */

/* 1. Nuke all background images — Odoo themes ship hero/section
      backgrounds we don't want on a terminal page.
      EXCLUDE body from the kill so our texture.scss dotted pattern
      can paint the page backdrop. */
*:not(body), *::before, *::after {
  background-image: none !important;
}

/* 2. Hide Odoo's default header chrome we don't want to see. */
.o_header_overlay,
.o_main_navbar:not(#nothing),
.o_navbar,
header.o_header_standard,
header.o_header_overlay,
.o_skip_to_content,
.s_dynamic_snippet_carousel,
.o_modal_split_features,
.s_carousel,
.s_banner,
.s_picture {
  display: none !important;
}

/* 3. Nuke Odoo's default footer + brand promotion completely */
footer.o_footer,
footer#bottom,
.o_footer,
.o_footer_copyright,
.o_footer_copyright_powered_by,
.o_brand_promotion,
.o_powered_by,
.o_powered_by_odoo,
[class*="o_footer"],
[class*="brand_promotion"] {
  display: none !important;
}

/* 4. Strip bootstrap container backgrounds + Odoo theme paddings */
#wrapwrap,
.oe_structure,
main.o_main,
.container, .container-fluid,
.row, [class^="col-"], [class*=" col-"],
.s_text_block, .s_image_text {
  background: transparent !important;
  box-shadow: none !important;
}

/* 5. Reset typography that themes might have customised */
body, html {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--fg) !important;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace !important;
}

/* 6. Hide the cookie banner / language banner / install prompts */
.o_cookies_bar, .o_language_selector_dropdown,
.s_dialog, .o_install_prompt {
  display: none !important;
}

/* 7. Nuke fontawesome stars, hearts, default icons that themes drop in */
.fa, .fas, .far, .fab {
  /* keep fontawesome usable but kill any decorative use we didn't ask for */
  display: inline-block;
}
.s_share .fa, .o_social_links .fa {
  display: none !important;
}


/* ============================================================
   dinsdag — design tokens
   Slightly warmer light, slightly lifted dark — neither pure white
   nor pure black. Adds a faint grey accent variable for subtle
   ornament (faint grid, secondary borders, etc.).
   ============================================================ */
:root[data-theme="light"] {
  --bg: #EFEFEC;       /* soft off-white, slight warm grey */
  --bg-alt: #E6E6E2;   /* one step deeper, for subtle bands */
  --fg: #1A1A1A;       /* not full black — easier on eyes */
  --muted: #6E6E6E;
  --rule: #D6D6D2;
  --rule-strong: #A8A8A4;
  --grey-accent: #C4C4C0;
  --selection-bg: var(--accent-print, #F4D000);
  --selection-fg: #1A1A1A;
}
:root[data-theme="dark"] {
  --bg: #161616;       /* lifted black */
  --bg-alt: #1E1E1E;
  --fg: #E0E0DD;       /* slightly warm off-white */
  --muted: #8E8E8B;
  --rule: #2E2E2C;
  --rule-strong: #4A4A48;
  --grey-accent: #3A3A38;
  --selection-bg: var(--accent, #FFEB3B);
  --selection-fg: #1A1A1A;
}

/* Accent hues — yellows-only palette (per user pivot).
   Nine shades from palest cream through schoolbus to deep ochre.
   Lives next to B&W photography without competing for attention.
   --accent renders on dark bg (loud); --accent-print on light bg
   (slightly deeper so it stays legible at body-text size). */
:root[data-accent="cream"]     { --accent: #FFF6C2; --accent-print: #C9B85A; } /* pale cream */
:root[data-accent="butter"]    { --accent: #FFF24A; --accent-print: #D9C800; } /* soft butter */
:root[data-accent="lemon"]     { --accent: #EAFF00; --accent-print: #B8C800; } /* fluo lemon */
:root[data-accent="canary"]    { --accent: #FFEB47; --accent-print: #D9BF00; } /* canary */
:root[data-accent="marker"]    { --accent: #FFE500; --accent-print: #E8A100; } /* marker chrome */
:root[data-accent="school"]    { --accent: #FFD800; --accent-print: #C29900; } /* schoolbus */
:root[data-accent="amber"]     { --accent: #FFB300; --accent-print: #B37D00; } /* amber */
:root[data-accent="mustard"]   { --accent: #D4A017; --accent-print: #9C7000; } /* mustard */
:root[data-accent="ochre"]     { --accent: #B8860B; --accent-print: #7A5800; } /* deep ochre */
/* Backward-compat alias so old `data-accent="yellow"` cookies still resolve */
:root[data-accent="yellow"]    { --accent: #FFE500; --accent-print: #E8A100; }

/* Default fallbacks (no attributes set yet) */
:root {
  --bg: #EFEFEC; --fg: #1A1A1A; --muted: #6E6E6E; --rule: #D6D6D2;
  --rule-strong: #A8A8A4; --grey-accent: #C4C4C0;
  --accent: #FFE500; --accent-print: #E8A100;
  --selection-bg: #E8A100; --selection-fg: #1A1A1A;
}

/* Spacing tokens (ch units lock to monospace cell width) */
:root {
  --ch: 1ch;
  --gutter: 24px;
  --line: 1px;
  --line-strong: 2px;
}


/* ============================================================
   dinsdag — base typography + layout primitives
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-transform: lowercase;
  font-feature-settings: "ss01" on, "ss02" on; /* preferred mono variants */
  /* Pin the outermost containers to viewport width. Without this, a
     descendant like <main> with `max-width: 76ch` (≈593px) is allowed
     to take its full cap value even on a 375px phone — because the
     default block-level behavior is "fill the parent up to your
     max-width", and the parent (#wrapwrap) had no upper cap of its
     own. Result was content drifting 50–90px past the right edge on
     phones. Pinning to 100vw forces every descendant to respect the
     viewport, while overflow-x: clip catches any sub-pixel bleed
     from the full-bleed photo grid sections. */
  max-width: 100vw;
  overflow-x: clip;
}
#wrapwrap { max-width: 100vw; }
@media (max-width: 640px) { html, body { font-size: 13px; } }
@media (max-width: 640px) {
  main { padding: 20px 16px 32px; }
}

/* Selection — yellow highlighter sweep */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Custom scrollbar (terminal feel) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-print); }

/* ============================================================
   Links — slight yellow underline default; full marker fill on hover
   ============================================================ */
a {
  color: var(--fg);
  background: transparent;
  padding: 0 0.15ch;
  text-decoration: underline;
  text-decoration-color: var(--accent-print);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background 100ms, color 100ms,
              text-decoration-color 100ms;
}
:root[data-theme="dark"] a {
  text-decoration-color: var(--accent);
}
a:hover {
  background: var(--accent-print);
  color: var(--fg);
  text-decoration-color: transparent;
}
:root[data-theme="dark"] a:hover {
  background: var(--accent);
  color: #0A0A0A;
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  text-decoration-color: transparent;
}

/* Inline code-style link inside <pre> stays terminal-mono — no marker */
pre a, .figlet a, .ascii-light a, .ascii-dark a, .crack a {
  background: transparent !important;
  color: var(--fg) !important;
  padding: 0 !important;
  text-decoration: underline !important;
}

/* Skip-to-content / utility links — no marker */
a.bare {
  background: transparent;
  color: var(--muted);
  padding: 0;
  text-decoration: none;
}
a.bare:hover {
  color: var(--fg);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--accent-print);
}

/* ============================================================
   Headings — manuscript-style numbered, with cursor blink on h1
   ============================================================ */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.5em 0 0.5em;
  font-feature-settings: "ss01" on;
}
h1 { font-size: 24px; position: relative; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

h1::after {
  content: "_";
  display: inline-block;
  margin-left: 0.25ch;
  color: var(--accent-print);
  animation: dinsdag-blink 1s steps(2, start) infinite;
}
:root[data-theme="dark"] h1::after { color: var(--accent); }

@keyframes dinsdag-blink {
  to { opacity: 0; }
}

/* h2 prompt prefix `$ ` shows up if the content already starts with $ */
h2 { color: var(--fg); }

/* ============================================================
   Layout
   ============================================================ */
main {
  /* min(76ch, 100%) ensures main never exceeds its parent's width
     even when 76ch would. With just `max-width: 76ch`, a `<main>`
     inside a wider/loose parent could still expand to 76ch (~593px)
     on a 375px viewport — the cause of the prior mobile overflow. */
  max-width: min(76ch, 100%);
  margin: 0 auto;
  padding: 48px 24px 64px;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  main { padding: 28px 20px 40px; }
}

p { margin: 0.5em 0; }
h1, h2, h3 { margin: 1.1em 0 0.35em; }
ul.project-list, ul.story-list, ul.bare-list {
  margin: 0.4em 0 0.8em;
}

/* Lists — replace bullet with ASCII pointer */
ul.project-list, ul.story-list, ul.bare-list {
  list-style: none;
  padding: 0;
}
ul.project-list li,
ul.story-list li {
  padding: 4px 0 4px 3ch;
  position: relative;
}
ul.project-list li::before,
ul.story-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent-print);
  font-size: 12px;
  top: 6px;
}
:root[data-theme="dark"] ul.project-list li::before,
:root[data-theme="dark"] ul.story-list li::before {
  color: var(--accent);
}

.post-tag {
  color: var(--muted);
  margin-right: 6px;
  font-size: 12px;
}
.post-date {
  color: var(--muted);
  margin-left: 6px;
  font-size: 12px;
}

/* Pre-formatted blocks — terminal listing feel */
pre.term {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 12px 16px;
  margin: 24px 0;
  overflow-x: auto;
  font-size: 13px;
  text-transform: none;
  white-space: pre;
}


/* ============================================================
   dinsdag — subtle texture backgrounds
   per "less is more" inspiration: depth without clutter.
   A faint dotted print-grain backdrop, only barely visible.
   ============================================================ */

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, var(--grey-accent) 0.5px, transparent 0.5px);
  background-size: 18px 18px;
  background-position: 0 0;
}

/* on dark, the dots fade further (less contrast against bg) */
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(circle, var(--grey-accent) 0.4px, transparent 0.4px);
  background-size: 24px 24px;
}

/* main content sits on a subtle "page" — slightly different bg-alt */
main {
  background: transparent;  /* keep the dots showing through */
}

/* Optional: a film-grain noise overlay (very faint) — opt-in via class */
.has-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.05;
  mix-blend-mode: multiply;
  z-index: 100;
}

/* Very subtle horizontal grid behind specific blocks (registration "ladder") */
.dinsdag-ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 21px,
    var(--rule) 21px, var(--rule) 22px
  );
  padding: 24px;
}


/* ============================================================
   dinsdag — print-shop registration motifs + ASCII markup
   ============================================================ */

/* ----- registration crosses at viewport corners — more prominent ----- */
html::before, html::after, body::before, body::after {
  position: fixed;
  color: var(--fg);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 22px;
  line-height: 1;
  content: "+";
  z-index: 10;
  pointer-events: none;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.85;
}
html::before { top: 18px;    left: 18px; }
html::after  { top: 18px;    right: 18px; }
body::before { bottom: 18px; left: 18px; }
body::after  { bottom: 18px; right: 18px; }
@media (max-width: 640px) {
  html::before, html::after, body::before, body::after { font-size: 18px; }
  html::before { top: 12px; left: 12px; }
  html::after  { top: 12px; right: 12px; }
  body::before { bottom: 12px; left: 12px; }
  body::after  { bottom: 12px; right: 12px; }
}

/* Corner flourishes intentionally removed — kept the four `+`
   registration crosses on body/html as the only fixed page-corner
   decoration. Per the "less is more" principle, the rest reads as
   wallpaper. The flourishes can come back as a hover-revealed
   detail later. */
.dinsdag-flourish-tl, .dinsdag-flourish-tr,
.dinsdag-flourish-bl, .dinsdag-flourish-br {
  display: none !important;
}

/* ----- section dividers — softer + ASCII-leaning ----- */
.trim-mark, .trim-mark--double, .trim-mark--dotted,
.trim-mark--cross {
  display: flex; align-items: center; gap: 14px;
  color: var(--rule-strong);
  margin: 56px 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
/* Default: a single hand-drawn-feel dotted line of `·` glyphs.
   Replaces the loud `border-top: dashed`. */
.trim-mark::before, .trim-mark::after {
  content: "· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·";
  flex: 1; overflow: hidden; white-space: nowrap;
  color: var(--rule);
  letter-spacing: 4px;
  font-size: 10px;
}
.trim-mark--double::before, .trim-mark--double::after {
  content: "= = = = = = = = = = = = = = = = = = = = = = = = = = = =";
  flex: 1; overflow: hidden; white-space: nowrap;
  color: var(--rule);
  letter-spacing: 2px;
  font-size: 10px;
}
.trim-mark--dotted::before, .trim-mark--dotted::after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  flex: 1; overflow: hidden; white-space: nowrap;
  color: var(--rule);
  letter-spacing: 4px;
  font-size: 10px;
}
.trim-mark--cross::before, .trim-mark--cross::after {
  content: "+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +";
  flex: 1; overflow: hidden; white-space: nowrap;
  color: var(--rule);
  letter-spacing: 4px;
  font-size: 10px;
}
.trim-mark > span,
.trim-mark--double > span,
.trim-mark--dotted > span,
.trim-mark--cross > span {
  white-space: nowrap;
}
.trim-mark > span::before { content: "─ "; }
.trim-mark > span::after  { content: " ─"; }
.trim-mark--double > span::before { content: "═ "; }
.trim-mark--double > span::after  { content: " ═"; }

/* ----- box-drawing borders (Unicode U+2500–U+257F) ----- */
.dinsdag-box {
  border: 1px solid var(--rule);
  padding: 16px 20px;
  margin: 24px 0;
  position: relative;
}
.dinsdag-box--heavy { border: 2px solid var(--rule-strong); }
.dinsdag-box--dashed { border: 1px dashed var(--rule); }
.dinsdag-box--double { border: 3px double var(--rule); }

/* + corners on every dinsdag-box, mimicking trim marks */
.dinsdag-box::before, .dinsdag-box::after,
.dinsdag-box > .corner-tl, .dinsdag-box > .corner-bl {
  position: absolute;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  content: "+";
  background: var(--bg);
  padding: 0 2px;
}
.dinsdag-box::before  { top: -6px;    right: -6px; }
.dinsdag-box::after   { bottom: -6px; right: -6px; }
.dinsdag-box > .corner-tl { top: -6px;    left: -6px; }
.dinsdag-box > .corner-bl { bottom: -6px; left: -6px; }

/* ----- print-shop calibration bar (footer) ----- */
.cal-bar {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--muted);
  padding: 16px 0;
  flex-wrap: wrap;
}
.swatch {
  display: inline-block; width: 22px; height: 14px;
  border: 1px solid var(--rule); cursor: pointer;
  background-clip: padding-box;
  transition: transform 80ms;
}
.swatch:hover { transform: translateY(-1px); }

/* Full-width color grid — like a strip of marker caps. Lives in the
   footer; each swatch flexes to equal width and sits flush against
   its neighbours. The 9 colors form a single tonal sweep. */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  width: 100%;
  margin: 24px 0 12px;
  border: 1px solid var(--rule);
}
.swatch-grid .swatch {
  width: auto;
  height: 36px;
  border: 0;
  border-right: 1px solid rgba(0,0,0,0.12);
}
.swatch-grid .swatch:last-child { border-right: 0; }
.swatch-grid .swatch:hover { transform: none; filter: brightness(1.06); }

/* 9 yellow-shade swatches — pale → deep */
.swatch.cream    { background-color: #FFF6C2; }
.swatch.butter   { background-color: #FFF24A; }
.swatch.lemon    { background-color: #EAFF00; }
.swatch.canary   { background-color: #FFEB47; }
.swatch.marker   { background-color: #FFE500; }
.swatch.school   { background-color: #FFD800; }
.swatch.amber    { background-color: #FFB300; }
.swatch.mustard  { background-color: #D4A017; }
.swatch.ochre    { background-color: #B8860B; }

/* Active-state outline for the new yellow palette */
:root[data-accent="cream"]   .swatch.cream,
:root[data-accent="butter"]  .swatch.butter,
:root[data-accent="lemon"]   .swatch.lemon,
:root[data-accent="canary"]  .swatch.canary,
:root[data-accent="marker"]  .swatch.marker,
:root[data-accent="school"]  .swatch.school,
:root[data-accent="amber"]   .swatch.amber,
:root[data-accent="mustard"] .swatch.mustard,
:root[data-accent="ochre"]   .swatch.ochre {
  outline: 2px solid var(--fg); outline-offset: 1px;
}
.swatch-grid :root[data-accent="cream"]   .swatch.cream,
.swatch-grid :root[data-accent="butter"]  .swatch.butter,
.swatch-grid :root[data-accent="lemon"]   .swatch.lemon,
.swatch-grid :root[data-accent="canary"]  .swatch.canary,
.swatch-grid :root[data-accent="marker"]  .swatch.marker,
.swatch-grid :root[data-accent="school"]  .swatch.school,
.swatch-grid :root[data-accent="amber"]   .swatch.amber,
.swatch-grid :root[data-accent="mustard"] .swatch.mustard,
.swatch-grid :root[data-accent="ochre"]   .swatch.ochre {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--fg);
}

/* registration ladder — a tiny print-feel ruler */
.cal-ladder {
  font-size: 9px; color: var(--muted);
  letter-spacing: 1.5ch;
  margin-top: 4px;
  font-family: inherit;
}

/* ----- footer ----- */
footer.dinsdag-footer {
  border-top: none;
  padding: 16px 24px 32px;
  margin-top: 56px;            /* halved from 128px */
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  text-transform: none;
}
footer.dinsdag-footer::before {
  content: "· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·";
  display: block;
  color: var(--rule);
  font-size: 10px;
  letter-spacing: 4px;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 12px;
}
footer.dinsdag-footer .term-line {
  font-family: inherit;
  margin: 4px 0;
  white-space: pre;
}
footer.dinsdag-footer a {
  /* Footer links keep highlighter style for consistency */
}

/* ----- nav ----- */
nav.dinsdag-nav {
  display: flex; gap: 16px; align-items: center;
  padding: 8px 0 16px;
  font-size: 13px;
  flex-wrap: wrap;
  max-width: 100%;
}
@media (max-width: 640px) {
  nav.dinsdag-nav {
    gap: 4px 10px;
    font-size: 12px;
    row-gap: 4px;
  }
  /* On phones, drop the 01/02/03 numeric markers — they spend horizontal
     budget on chrome instead of menu names. Same for the arrow ▸. */
  nav.dinsdag-nav .nav-num,
  nav.dinsdag-nav .nav-arrow { display: none; }
  nav.dinsdag-nav .nav-item { line-height: 1.2; }
  nav.dinsdag-nav a { padding: 2px 4px; }
  /* Push the lang+theme cluster to its own row so it doesn't fight the
     menu items for width. */
  nav.dinsdag-nav .lang-switch {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
  }
}
@media (max-width: 380px) {
  nav.dinsdag-nav { font-size: 11px; gap: 2px 8px; }
}
/* All nav children share the universal hover (yellow fill, dark text).
   The links here are bare-styled by default — no permanent underline,
   no border — so the hover IS the affordance. */
nav.dinsdag-nav a {
  background: transparent;
  color: var(--fg);
  padding: 4px 6px;
  text-decoration: none;
  border: none;
}
nav.dinsdag-nav a:hover {
  background: var(--accent-print);
  color: var(--fg);
}
:root[data-theme="dark"] nav.dinsdag-nav a:hover {
  background: var(--accent);
  color: #1A1A1A;
}

nav.dinsdag-nav .lang-switch {
  margin-left: auto;
  color: var(--muted);
  display: flex; gap: 0;
  font-size: 11px;
}
nav.dinsdag-nav .lang-switch a {
  color: var(--muted);
  padding: 4px 6px;
}
nav.dinsdag-nav .lang-switch a.active { color: var(--fg); font-weight: 600; }

/* No-border toggle buttons — hover is the affordance */
nav.dinsdag-nav button[data-toggle] {
  background: transparent;
  border: none;
  color: var(--fg);
  cursor: pointer;
  width: 24px; height: 24px;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  transition: background 100ms, color 100ms;
}
nav.dinsdag-nav button[data-toggle]:hover {
  background: var(--accent-print);
  color: var(--fg);
}
:root[data-theme="dark"] nav.dinsdag-nav button[data-toggle]:hover {
  background: var(--accent);
  color: #1A1A1A;
}


/* ============================================================
   dinsdag — minimal masthead (FIGlet removed; just small text + menu)
   ============================================================ */
.figlet-masthead {
  padding: 32px 0 16px !important;
  position: relative;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.figlet-masthead .site-mark {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0;
  text-transform: lowercase;
}
.figlet-masthead .site-mark .tld {
  background: var(--accent-print);
  color: var(--fg);
  padding: 0 0.3ch;
  margin-left: 1px;
}
:root[data-theme="dark"] .figlet-masthead .site-mark .tld {
  background: var(--accent);
  color: #1A1A1A;
}
/* Hide the legacy FIGlet pre block whenever it appears */
.figlet-masthead .figlet { display: none !important; }
.figlet-masthead::before {
  /* tiny terminal-prompt strip above the FIGlet */
  content: "$ ~/dinsdag --site=";
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}
.figlet-masthead.is-ooo::before { content: "$ ~/dinsdag --site=ooo"; }
.figlet-masthead.is-xyz::before { content: "$ ~/dinsdag --site=xyz"; }

.figlet {
  font-size: 13px;            /* up from 10px — more presence */
  line-height: 1.0;
  margin: 0;
  white-space: pre;
  color: var(--fg);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: none;
  overflow-x: auto;
  font-weight: 600;            /* bold-up for weight */
  letter-spacing: 0;
  background: transparent !important;
  border: none !important;
  /* Subtle entrance — fades in with a slight slide */
  animation: figlet-in 400ms ease-out;
}

@keyframes figlet-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.figlet-tld {
  display: inline-block;
  font-size: 18px;             /* up from 14px */
  color: var(--bg);
  background: var(--accent-print);
  letter-spacing: 0.05em;
  vertical-align: bottom;
  padding: 2px 0.6ch 1px;
  margin-left: 6px;
  text-transform: none;
  font-weight: 700;
  /* The TLD sits like a marker stamp on the wordmark */
  transform: translateY(-2px);
  box-shadow: 2px 2px 0 var(--rule);  /* tiny print-shop offset */
}
:root[data-theme="dark"] .figlet-tld {
  background: var(--accent);
  color: #0A0A0A;
  box-shadow: 2px 2px 0 var(--rule-strong);
}

/* blinking cursor at the very end of the FIGlet */
.figlet-cursor {
  display: inline-block;
  margin-left: 0.5ch;
  color: var(--accent-print);
  animation: dinsdag-blink 1s steps(2, start) infinite;
  font-size: 18px;
  vertical-align: bottom;
  font-weight: 700;
}
:root[data-theme="dark"] .figlet-cursor { color: var(--accent); }

/* Mobile: collapse FIGlet to a plain wordmark, accentuated */
@media (max-width: 640px) {
  .figlet { display: none; }
  .figlet-masthead {
    padding: 32px 0 16px !important;
  }
  .figlet-masthead::after {
    content: "dinsdag";
    color: var(--fg);
    font-size: 28px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.02em;
  }
  .figlet-tld { font-size: 16px; }
  .figlet-cursor { font-size: 16px; }
}

/* Belt-and-braces: header element itself never has background/border */
header { background: transparent !important; border: none !important; }
header.figlet-masthead, header.figlet-masthead * {
  background-image: none !important;
}


/* ============================================================
   dinsdag — asymmetric photo grid + lightbox
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* dense flow lets the browser pull a later cell forward to fill a
     gap that a wider neighbour would otherwise leave behind — e.g. two
     base cells (4 cols) followed by a full-width (6 cols) would leave
     2 empty cols at the row end without dense; with dense, the next
     base cell slides up to fill that 2-col slot. */
  grid-auto-flow: dense;
  gap: 16px;
  padding: 16px 0;
}
.photo-cell {
  position: relative;
  grid-column: span 2;
  aspect-ratio: 4/5;
  border: none;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms;
  padding: 0;
}
.photo-cell img {
  border: none;
  background: transparent;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter 300ms ease;
  /* Touch hardening: kill iOS long-press "save image" menu,
     kill drag-to-save, kill text-selection on captions, and route
     all clicks to the parent .photo-cell so the lightbox handler
     wins. */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.photo-cell:hover img {
  /* a touch of colour returns on hover — keeps the gallery quiet but
     rewards attention */
  filter: grayscale(0) contrast(1.05) saturate(0.85);
}
/* Global color toggle — flipped by vertical swipe inside the lightbox.
   When :root has .gallery-color, every thumbnail AND the open lightbox
   image drop the grayscale filter at once. Persisted via localStorage
   so reloads remember the choice. */
:root.gallery-color .photo-cell img {
  filter: grayscale(0) contrast(1.05) saturate(0.9);
}
/* Allowed sizes:
 *   span=1  → base cell (1/3 grid width, 4/5 aspect — one row)
 *   span=2  → 2×2 block (2× base width AND 2× base height + gap)
 *   span=3  → full-width hero (6 cols, height = image's natural ratio)
 *
 * Anything else (e.g. "wide but only one row tall") is intentionally
 * not supported — it would break the row-height rhythm.
 */
.photo-cell[data-span="1"] { grid-column: span 2; }
.photo-cell[data-span="2"] {
  grid-column: span 4;
  grid-row: span 2;
}
.photo-cell[data-span="3"] {
  grid-column: span 6;
  /* No aspect-ratio override → the cell takes its height from the
     image inside (img height: auto). Tall portraits get tall cells,
     wide landscapes stay wide. */
  aspect-ratio: auto;
  height: auto;
}
.photo-cell[data-span="3"] img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* contain so we never crop a hero shot — full image visible. */
}
.photo-cell:hover { border-color: var(--accent-print); }
:root[data-theme="dark"] .photo-cell:hover { border-color: var(--accent); }

/* (image filter rules above already cover the b&w → color hover) */

/* Tiny `+` registration crosses on every photo cell, no white bg */
.photo-cell::before, .photo-cell::after,
.photo-cell > .corner-tl, .photo-cell > .corner-bl {
  position: absolute;
  color: var(--bg);
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  z-index: 2;
  background: transparent;
  padding: 0;
  transition: color 100ms;
  font-weight: 700;
  text-shadow:
    0 0 3px rgba(0,0,0,0.6),
    0 0 6px rgba(0,0,0,0.4);
}
.photo-cell::before  { content: "+"; top: 4px;    right: 6px; }
.photo-cell::after   { content: "+"; bottom: 4px; right: 6px; }
.photo-cell > .corner-tl { content: "+"; top: 4px; left: 6px; }
.photo-cell > .corner-bl { content: "+"; bottom: 4px; left: 6px; }
.photo-cell > .corner-tl::before { content: "┌"; }
.photo-cell > .corner-bl::before { content: "└"; }
.photo-cell:hover::before,
.photo-cell:hover::after,
.photo-cell:hover > .corner-tl,
.photo-cell:hover > .corner-bl {
  color: var(--accent-print);
}
:root[data-theme="dark"] .photo-cell:hover::before,
:root[data-theme="dark"] .photo-cell:hover::after,
:root[data-theme="dark"] .photo-cell:hover > .corner-tl,
:root[data-theme="dark"] .photo-cell:hover > .corner-bl {
  color: var(--accent);
}

/* Replace the .corner-tl/.corner-bl span content via CSS:
   We use real spans in the markup but the content is set by CSS for
   cleaner template authoring. */
.photo-cell > .corner-tl,
.photo-cell > .corner-bl {
  width: auto; height: auto;
}

.photo-serial {
  position: absolute; bottom: 4px; right: 6px;
  font-size: 9px; color: var(--muted);
  z-index: 2;
  background: transparent;
  padding: 0;
  border: none;
  letter-spacing: 0.04em;
  text-shadow: 0 0 4px var(--bg);
}

/* lightbox modal */
.lightbox {
  position: fixed; inset: 0;
  background: var(--bg);
  display: none;
  z-index: 100;
  padding: 64px;
  cursor: zoom-out;
}
.lightbox.open {
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
}

/* The frame shrink-wraps the image so the corner spans can hang just
   outside its actual rendered bounding box (not the lightbox padding).
   inline-block + line-height: 0 strips trailing whitespace, and
   max-width/height match the image rules below. */
.lightbox-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  max-height: calc(100% - 60px);
}
.lightbox-frame img {
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(1) contrast(1.05);
  transition: filter 250ms ease;
  cursor: zoom-out;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* Hover anywhere over the frame restores full color. The transition
   makes the colour bleed in instead of snapping. */
.lightbox-frame:hover img,
:root.gallery-color .lightbox-frame img {
  filter: none;
}
/* Lightbox-level touch hygiene: lock pinch-zoom + over-scroll so the
   swipe gestures (horizontal=nav, vertical=color toggle) get the full
   gesture stream and never accidentally pull-to-refresh. */
.lightbox { touch-action: none; overscroll-behavior: contain; }

/* ASCII registration corners — sit ~12px outside each image corner.
   Use the same ┌ ┐ └ ┘ glyphs as the photo grid, in an accent so the
   marks read as fixture rather than image. */
.lightbox-frame .lb-corner {
  position: absolute;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 22px;
  line-height: 1;
  color: var(--rule-strong);
  pointer-events: none;
  user-select: none;
  transition: color 250ms ease;
}
.lightbox-frame .lb-corner-tl { top:    -14px; left:  -14px; }
.lightbox-frame .lb-corner-tr { top:    -14px; right: -14px; }
.lightbox-frame .lb-corner-bl { bottom: -14px; left:  -14px; }
.lightbox-frame .lb-corner-br { bottom: -14px; right: -14px; }
.lightbox-frame .lb-corner-tl::before { content: "┌"; }
.lightbox-frame .lb-corner-tr::before { content: "┐"; }
.lightbox-frame .lb-corner-bl::before { content: "└"; }
.lightbox-frame .lb-corner-br::before { content: "┘"; }
/* Corners take on the accent when the image is showing color */
.lightbox-frame:hover .lb-corner {
  color: var(--accent-print);
}
:root[data-theme="dark"] .lightbox-frame:hover .lb-corner {
  color: var(--accent);
}
.lightbox-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: lowercase;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 80ch;
  cursor: default;
}
.lightbox-meta .lb-title    { color: var(--fg); }
.lightbox-meta .lb-date     { color: var(--muted); }
.lightbox-meta .lb-location { color: var(--muted); }
.lightbox-meta .lb-sep      { color: var(--rule-strong); opacity: 0.7; }

/* ============================================================
   Filter pills (replaces the old "categorieën: a · b · c" footnote
   on /photos). Buttons toggle .is-active and dispatch a hash change;
   the JS hides any .photo-cell whose data-cat doesn't match.
   ============================================================ */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
}
.filter-pill {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 120ms, color 120ms, border-color 120ms;
  /* finger-friendly hit area without bulking up the visual size */
  min-height: 32px;
  -webkit-tap-highlight-color: transparent;
}
.filter-pill:hover {
  border-color: var(--rule-strong);
  color: var(--fg);
}
.filter-pill.is-active {
  background: var(--accent-print);
  color: var(--fg);
  border-color: var(--accent-print);
}
:root[data-theme="dark"] .filter-pill.is-active {
  background: var(--accent);
  color: #0A0A0A;
  border-color: var(--accent);
}
/* When a filter is applied (JS sets is-hidden on non-matching cells)
   the cell is removed from layout — `display:none` lets grid-auto-flow
   fill the gap so the dense packing stays coherent. */
.photo-cell.is-hidden { display: none; }

/* ============================================================
   Responsive grid — three tiers below desktop.
   Desktop (>960px): the asymmetric 6-col rhythm (data-span aware).
   Tablet (641–960px): 3 equal columns, single-row cells.
   Phone  (361–640px): 2 columns.
   Tiny   (≤360px): 1 column, immersive full-width.
   ============================================================ */
@media (max-width: 960px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .photo-cell,
  .photo-cell[data-span="1"],
  .photo-cell[data-span="2"],
  .photo-cell[data-span="3"] {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 4/5;
  }
  .photo-cell[data-span="3"] img { object-fit: cover; }
}
@media (max-width: 640px) {
  /* Break the photo grid out of <main>'s padding so it spans the
     full viewport width on phones — the surrounding text (back-link,
     kicker, h-display, footnote, now-bar) stays padded as before.
     The 50%-50vw trick is parent-padding-agnostic: it works whether
     main is centered, has weird padding, or sits inside an Odoo
     wrapper, so we don't have to keep the magic numbers in sync. */
  .contact-sheet {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
  }
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding: 0;
  }
  .photo-cell,
  .photo-cell[data-span="1"],
  .photo-cell[data-span="2"],
  .photo-cell[data-span="3"] {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 4/5;
  }
  /* Move the +/┌/└ corner marks slightly inward so they're visible on
     an edge-to-edge cell (no gutter to bleed into). */
  .photo-cell::before,
  .photo-cell > .corner-tl { top: 6px; }
  .photo-cell::after,
  .photo-cell > .corner-bl { bottom: 6px; }
  .lightbox { padding: 20px; }
  .lightbox-frame { max-height: calc(100% - 80px); }
  .lightbox-meta { font-size: 11px; gap: 6px; }
}
@media (max-width: 360px) {
  .photo-grid { grid-template-columns: 1fr; gap: 2px; }
  .photo-cell,
  .photo-cell[data-span="1"],
  .photo-cell[data-span="2"],
  .photo-cell[data-span="3"] {
    grid-column: span 1;
    aspect-ratio: 1/1;     /* square on tiny screens reads as a feed */
  }
}


/* ============================================================
   dinsdag — landing page styles (.ooo small-man, .xyz wall-crack)
   ============================================================ */

/* Landing pages override the chrome — pure illustration + corners */
body.dinsdag-landing header,
body.dinsdag-landing footer {
  display: none !important;
}
body.dinsdag-landing main { padding: 0; max-width: none; }
body.dinsdag-landing { overflow: hidden; }

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

.landing pre,
.landing pre.crack {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.0;
  white-space: pre;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  color: var(--fg);
  letter-spacing: 0;
}

.landing pre .accent { color: var(--accent-print); }
:root[data-theme="dark"] .landing pre .accent { color: var(--accent); }

/* Light shows -light, hides -dark; dark flips */
.landing-ooo .ascii-light { display: block; }
.landing-ooo .ascii-dark  { display: none; }
:root[data-theme="dark"] .landing-ooo .ascii-light { display: none; }
:root[data-theme="dark"] .landing-ooo .ascii-dark  { display: block; }

/* The yellow accent strip below the figure — full marker sweep */
.landing-accent {
  display: block;
  margin-top: 24px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-print);
  opacity: 0.7;
  font-size: 12px;
  line-height: 1;
}
:root[data-theme="dark"] .landing-accent { color: var(--accent); }

/* Entry cue — small typed prompt */
.landing-cue {
  display: block;
  margin-top: 32px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  background: transparent;
  padding: 0;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 4px;
}
.landing-cue:hover {
  color: var(--bg);
  background: var(--accent-print);
  padding: 0 0.5ch 4px;
  border-bottom-color: transparent;
}
:root[data-theme="dark"] .landing-cue:hover {
  background: var(--accent);
  color: #0A0A0A;
}

/* tiny terminal hint for keyboard — `[enter]` */
.landing-cue::before {
  content: "[ ";
  color: var(--muted);
}
.landing-cue::after {
  content: " ]";
  color: var(--muted);
}

@media (max-width: 640px) {
  .landing pre { font-size: 8px; }
}

/* Landing meta line above the illustration — terminal feel */
.landing-meta {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 32px;
  letter-spacing: 0.08em;
  text-transform: none;
}
.landing-meta::before { content: "─ "; }
.landing-meta::after  { content: " ─"; }

/* Blinking terminal cursor next to "enter" */
@keyframes lc-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.blink-cursor {
  display: inline-block;
  animation: lc-blink 1.1s steps(1, end) infinite;
  font-family: var(--mono, ui-monospace, monospace);
  margin-left: 0.2ch;
}


/* ============================================================
   dinsdag — extra ASCII markup helpers
   ============================================================ */

/* Manuscript-style numbered headings: <h2 class="num" data-n="01">
   The numerals are hover-revealed — minimalist by default; the
   structure shows only when you ask for it (per the "minimal vs
   lazy" principle: discoverable, not omitted). */
h2.num, h3.num {
  position: relative;
  padding-left: 4ch;
}
h2.num::before, h3.num::before {
  content: attr(data-n);
  position: absolute;
  left: 0; top: 0;
  color: var(--rule-strong);
  font-weight: 400;
  transition: color 100ms;
}
h2.num:hover::before, h3.num:hover::before { color: var(--accent-print); }
:root[data-theme="dark"] h2.num:hover::before,
:root[data-theme="dark"] h3.num:hover::before { color: var(--accent); }

/* Inline ASCII window controls: [─][□][×] */
.win-controls {
  font-family: inherit;
  color: var(--muted);
  letter-spacing: 0.5px;
  font-size: 12px;
}
.win-controls::before { content: "[─][□][×]"; }

/* Strike-through using yellow — playful "this thing is done" */
.done {
  text-decoration: line-through;
  text-decoration-color: var(--accent-print);
  text-decoration-thickness: 2px;
  color: var(--muted);
}
:root[data-theme="dark"] .done { text-decoration-color: var(--accent); }

/* Section number stamp (e.g., #001, #042) */
.stamp {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Inline keyword highlight (yellow background, like marker pen) */
.hl {
  background: var(--accent-print);
  color: var(--fg);
  padding: 0 0.25ch;
}
:root[data-theme="dark"] .hl {
  background: var(--accent);
  color: #0A0A0A;
}

/* Asterisk-emphasis pre-prompt */
.prompt {
  color: var(--muted);
  font-family: inherit;
}
.prompt::before { content: "$ "; color: var(--accent-print); }
:root[data-theme="dark"] .prompt::before { color: var(--accent); }

/* Inline arrow pointer (for cross-site links) */
.arrow::after { content: " →"; color: var(--muted); }

/* Ruled-out content (gridded out) */
.gridded {
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 4px,
    var(--rule) 4px, var(--rule) 5px
  );
  padding: 8px 12px;
  border: 1px solid var(--rule);
}

/* Empty-state — bigger, sadder, friendlier */
.empty-state {
  margin: 48px 0;
  padding: 32px;
  border: 1px dashed var(--rule);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.empty-state::before {
  content: "( )";
  display: block;
  font-size: 24px;
  color: var(--rule-strong);
  margin-bottom: 12px;
  font-family: inherit;
}

/* "Last updated" / footnote-style text */
.footnote {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 32px;
}

/* Cross-site terminal-command link — universal yellow hover */
.term-link {
  display: inline-block;
  background: transparent;
  color: var(--fg);
  padding: 4px 8px;
  border: none;
  font-family: inherit;
  margin: 4px 4px 4px 0;
  text-decoration: none;
  transition: background 100ms, color 100ms;
}
.term-link::before { content: "$ "; color: var(--muted); }
.term-link:hover {
  background: var(--accent-print);
  color: var(--fg);
}
:root[data-theme="dark"] .term-link:hover {
  background: var(--accent);
  color: #1A1A1A;
}
.term-link:hover::before { color: var(--fg); }
:root[data-theme="dark"] .term-link:hover::before { color: #1A1A1A; }

/* Word streams — used on /about. Loose airy paragraphs of dot-spaced
   identity tokens. Reads more like a poem than a bio. */
.word-stream {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--fg);
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 24px 0;
  font-size: 15px;
  /* Long monospaced phrases like "fast learner · chronic tinkerer …"
     used to push past the viewport on phones because the <br/>s in the
     markup are hard breaks but the inline text between them couldn't
     soft-wrap. `overflow-wrap: anywhere` lets the browser break inside
     a phrase if it has to, keeping the poem readable on a 320px screen
     without changing the desktop rhythm. */
  overflow-wrap: anywhere;
}
.word-stream br + * { display: inline; }
.word-stream.small-stream {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
}
@media (max-width: 480px) {
  .word-stream { font-size: 13px; line-height: 1.7; letter-spacing: 0; }
  .word-stream.small-stream { font-size: 12px; }
}


/* Landing — ASCII scene card. Mirrors the lightbox-frame look so the
   landing and the open photo "rhyme" visually: same ┌ ┐ └ ┘ corners,
   same hover-lights-up-the-corners behaviour. */
.ascii-card {
  position: relative;
  display: inline-block;
  padding: 28px 36px;
  margin: 24px auto;
  text-align: left;
  max-width: 100%;
}
.ascii-card .lb-corner {
  position: absolute;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 22px;
  line-height: 1;
  color: var(--rule-strong);
  pointer-events: none;
  user-select: none;
  transition: color 250ms ease;
}
.ascii-card .lb-corner-tl { top:    -2px; left:  -2px; }
.ascii-card .lb-corner-tr { top:    -2px; right: -2px; }
.ascii-card .lb-corner-bl { bottom: -2px; left:  -2px; }
.ascii-card .lb-corner-br { bottom: -2px; right: -2px; }
.ascii-card .lb-corner-tl::before { content: "\250C"; }
.ascii-card .lb-corner-tr::before { content: "\2510"; }
.ascii-card .lb-corner-bl::before { content: "\2514"; }
.ascii-card .lb-corner-br::before { content: "\2518"; }
.ascii-card:hover .lb-corner { color: var(--accent-print); }
:root[data-theme="dark"] .ascii-card:hover .lb-corner { color: var(--accent); }

.ascii-scene {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.15;
  margin: 0;
  white-space: pre;
  letter-spacing: 0.5px;
}
.ascii-caption {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-align: center;
  margin: 16px 0 0;
}

/* /about — framed personal photo with the same yellow corners as
   the lightbox + landing card. shrink-wraps the image so corners
   hug the actual photo, not the page width. */
.about-photo-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 16px 0 32px;
  max-width: 320px;
}
@media (max-width: 640px) {
  /* Cap to viewport minus the registration-corner outset (14px each
     side) so the ┌ ┐ └ ┘ glyphs don't poke past the right edge of the
     screen and trigger horizontal scroll. Use the wider 640 breakpoint
     so iPad-mini-ish widths get the same containment, and set width
     explicitly (not fit-content) so the image-driven intrinsic width
     of the frame stops dragging the layout wider than its parent. */
  .about-photo-frame {
    max-width: calc(100% - 28px) !important;
    width: 100%;
    margin: 12px auto 28px !important;
    display: block;
  }
  .about-photo-frame img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
.about-photo-frame img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter 250ms ease;
}
.about-photo-frame:hover img { filter: none; }
.about-photo-frame .lb-corner {
  position: absolute;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 22px;
  line-height: 1;
  color: var(--rule-strong);
  pointer-events: none;
  user-select: none;
  transition: color 250ms ease;
}
.about-photo-frame .lb-corner-tl { top:    -14px; left:  -14px; }
.about-photo-frame .lb-corner-tr { top:    -14px; right: -14px; }
.about-photo-frame .lb-corner-bl { bottom: -14px; left:  -14px; }
.about-photo-frame .lb-corner-br { bottom: -14px; right: -14px; }
.about-photo-frame .lb-corner-tl::before { content: "\250C"; }
.about-photo-frame .lb-corner-tr::before { content: "\2510"; }
.about-photo-frame .lb-corner-bl::before { content: "\2514"; }
.about-photo-frame .lb-corner-br::before { content: "\2518"; }
.about-photo-frame:hover .lb-corner { color: var(--accent-print); }
:root[data-theme="dark"] .about-photo-frame:hover .lb-corner { color: var(--accent); }

/* Inline keycap — small terminal-ish key visual used in titles like
   "port [enter] folio". Brackets via ::before/::after so the inner
   span carries just the label. Sits at ~0.45× the surrounding font
   so it doesn't blow up display headings. */
.keycap {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--accent-print);
  display: inline-block;
  padding: 0.15em 0.35em;
  margin: 0 0.25em;
  vertical-align: 0.45em;
  border: 1px solid var(--accent-print);
  border-radius: 3px;
  line-height: 1;
}
.keycap::before { content: ""; }
.keycap::after  { content: " ⏎"; }
:root[data-theme="dark"] .keycap { color: var(--accent); border-color: var(--accent); }

/* Defensive override: legacy `.landing pre` rule from landing.scss
   has specificity (0,1,1) and forced font-size 11px + cursor:pointer
   on every <pre> inside .landing. The new .ascii-scene needs to
   actually show its 14px size; bump specificity with double class. */
.ascii-card .ascii-scene {
  font-size: 14px !important;
  line-height: 1.18 !important;
  color: var(--fg) !important;
  cursor: default !important;
  display: block !important;
  visibility: visible !important;
  white-space: pre !important;
  margin: 0 !important;
}
.ascii-card .ascii-caption {
  display: block !important;
  visibility: visible !important;
  color: var(--muted);
}

/* Terminal-style site mark in the masthead — clicks to /.
   Visually a console prompt: `$~/dinsdag --site=.ooo`. */
.term-mark {
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
}
.term-mark:hover { color: var(--accent-print); }
:root[data-theme="dark"] .term-mark:hover { color: var(--accent); }
.term-prompt { color: var(--muted); margin-right: 0.2ch; }
.term-mark .term-prompt::before { content: ""; }
.term-flag { color: var(--accent-print); }
:root[data-theme="dark"] .term-flag { color: var(--accent); }
.term-mark .tld { color: var(--fg); }


/* ============================================================
   dinsdag — navigation patterns (back, breadcrumbs, prev/next)
   ============================================================ */

/* Back link — small, top-of-page, reads like a terminal cd command */
.back-link {
  display: inline-block;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin: 16px 0 8px;
  background: transparent;
  padding: 0;
  text-transform: none;
  border-bottom: 1px dotted var(--rule);
}
.back-link::before { content: "$ cd .. "; color: var(--muted); }
.back-link:hover { color: var(--fg); border-bottom-color: var(--accent-print); background: transparent; }
:root[data-theme="dark"] .back-link:hover { border-bottom-color: var(--accent); }

/* Breadcrumb — chevron-separated path */
.breadcrumb {
  font-size: 11px;
  color: var(--muted);
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  text-transform: none;
}
.breadcrumb a {
  background: transparent;
  color: var(--muted);
  padding: 0;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.breadcrumb a:hover { color: var(--fg); border-bottom-color: var(--accent-print); background: transparent; }
.breadcrumb-sep::before { content: " › "; color: var(--rule-strong); }

/* Prev / next navigation strip */
.prev-next {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 48px 0 32px;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  font-size: 12px;
}
.prev-next > a, .prev-next > span {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  border-right: 1px dashed var(--rule);
  text-transform: none;
}
.prev-next > :last-child { border-right: none; text-align: right; }
.prev-next > a:hover {
  background: var(--accent-print);
  color: var(--fg);
}
:root[data-theme="dark"] .prev-next > a:hover {
  background: var(--accent);
  color: #0A0A0A;
}
.prev-next .label {
  display: block;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.prev-next .prev::before { content: "← "; color: var(--muted); }
.prev-next .next::after  { content: " →"; color: var(--muted); }
.prev-next > .disabled {
  color: var(--rule-strong); cursor: not-allowed;
}
.prev-next > .disabled::before { content: "—"; color: var(--rule-strong); }

/* Pagination dots — for photo lightbox / stories list */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 32px 0;
  font-size: 12px;
}
.pagination a, .pagination span {
  background: transparent;
  color: var(--muted);
  padding: 2px 6px;
  border: 1px solid var(--rule);
  text-decoration: none;
  font-family: inherit;
  text-transform: none;
}
.pagination .current {
  background: var(--accent-print);
  color: var(--fg);
  border-color: var(--accent-print);
}
:root[data-theme="dark"] .pagination .current {
  background: var(--accent); color: #0A0A0A; border-color: var(--accent);
}

/* Instagram + external badges — small inline social marker */
.ig-badge, .ext-badge {
  display: inline-block;
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  margin-left: 8px;
  text-decoration: none;
  background: transparent;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: middle;
}
.ig-badge::before { content: "[ig] "; color: var(--accent-print); font-weight: 600; }
:root[data-theme="dark"] .ig-badge::before { color: var(--accent); }
.ig-badge:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ext-badge::before { content: "[↗] "; color: var(--muted); }

/* Cover image area for blog posts (with empty state) */
.post-cover {
  margin: 16px 0 32px;
  border: 1px solid var(--rule);
  aspect-ratio: 16/9;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.post-cover img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  display: block;
}
.post-cover.empty::before {
  content: "+ no cover image set +";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rule-strong);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 8px,
    var(--rule) 8px, var(--rule) 9px
  );
}
.post-cover::before, .post-cover::after,
.post-cover > .corner-tl, .post-cover > .corner-bl {
  position: absolute;
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
  padding: 0 2px;
  z-index: 2;
  line-height: 1;
}
.post-cover > .corner-tl { content: "+"; top: -8px; left: -8px; }
.post-cover > .corner-bl { content: "+"; bottom: -8px; left: -8px; }
.post-cover.no-image::before, .post-cover.no-image::after { /* keep `+` corners visible */ }


/* ============================================================
   dinsdag — artistic / creative pass
   Small, deliberate moves: drop caps, numbered nav, contact-sheet
   photo edges, scan-line overlay (subtle), animated TLD, photo
   metadata reveal, signature stamps per page.
   ============================================================ */

/* ----- Numbered navigation ----- */
nav.dinsdag-nav .nav-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
nav.dinsdag-nav .nav-num {
  color: var(--rule-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
nav.dinsdag-nav .nav-arrow {
  color: var(--accent-print);
  margin-right: 2px;
}
:root[data-theme="dark"] nav.dinsdag-nav .nav-arrow { color: var(--accent); }

/* ----- Theme/accent toggle icons ----- */
.toggle-icon { display: inline-block; line-height: 1; }
.toggle-icon::before { content: "◐"; }
:root[data-theme="dark"] .toggle-icon::before { content: "◑"; }

/* The yellow swatch toggles in the footer get a clearer hover state */
.cal-bar .swatch:hover {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

/* ----- Per-page signature stamp ----- */
.page-stamp {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.2;
  white-space: pre;
  color: var(--muted);
  text-align: center;
  margin: 16px 0 32px;
  text-transform: none;
  letter-spacing: 0;
}
.page-stamp .accent { color: var(--accent-print); }
:root[data-theme="dark"] .page-stamp .accent { color: var(--accent); }

/* ----- Drop cap ----- */
.drop p:first-of-type::first-letter,
.drop-here::first-letter {
  float: left;
  font-size: 56px;
  line-height: 0.9;
  padding: 6px 12px 4px 0;
  margin: 4px 8px 0 0;
  font-weight: 700;
  background: var(--accent-print);
  color: var(--fg);
  font-family: inherit;
}
:root[data-theme="dark"] .drop p:first-of-type::first-letter,
:root[data-theme="dark"] .drop-here::first-letter {
  background: var(--accent);
  color: #1A1A1A;
}

/* ----- Scan-line overlay (very subtle, dark mode only) ----- */
:root[data-theme="dark"] body::after {
  /* don't conflict with the existing body::after registration cross —
     the scan lines paint via a secondary fixed div in the layout */
}
.scan-lines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px
  );
  display: none;
}
:root[data-theme="dark"] .scan-lines { display: block; }

/* ----- Animated typing for the FIGlet TLD on first load ----- */
@keyframes tld-type {
  0%   { width: 0; }
  60%  { width: 0; }
  100% { width: var(--tld-w, 5ch); }
}
.figlet-tld.animated {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: tld-type 1200ms ease-out forwards;
}

/* ----- Photo grid: contact-sheet film perforations on edges ----- */
.contact-sheet {
  position: relative;
  padding: 20px 0;
  margin: 32px 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.contact-sheet::before, .contact-sheet::after {
  content: "▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪";
  position: absolute;
  left: 0; right: 0;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 4px;
  text-align: center;
  line-height: 0.8;
  text-transform: none;
  overflow: hidden;
}
.contact-sheet::before { top: 4px; }
.contact-sheet::after  { bottom: 4px; }

/* photo-cell metadata overlay — revealed on hover */
.photo-cell .meta-overlay {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: #FAFAFA;
  padding: 24px 12px 8px;
  font-size: 11px;
  text-transform: none;
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
  z-index: 3;
}
.photo-cell:hover .meta-overlay { pointer-events: auto; }
/* "order print →" link inside the overlay */
.photo-cell .order-print {
  display: inline-block;
  margin-top: 6px;
  background: var(--accent-print);
  color: #1A1A1A;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-decoration: none;
  font-weight: 600;
}
:root[data-theme="dark"] .photo-cell .order-print {
  background: var(--accent); color: #1A1A1A;
}
.photo-cell .order-print:hover {
  background: #FAFAFA;
  color: #1A1A1A;
}
.photo-cell:hover .meta-overlay { opacity: 1; }
.photo-cell .meta-overlay .caption { font-weight: 600; display: block; }
.photo-cell .meta-overlay .meta-line {
  display: block;
  color: rgba(250,250,250,0.7);
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.photo-cell .meta-overlay .ig-mini::before {
  content: "[ig] ";
  color: var(--accent);
}

/* ----- Lightbox keyboard hint ----- */
.lightbox::after {
  content: "[esc] close   [←] prev   [→] next";
  position: absolute;
  bottom: 24px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: none;
}

/* ----- Generative-looking ASCII signature blocks per route ----- */
.sig-photos {
  font-family: inherit; white-space: pre; font-size: 10px; line-height: 1;
  color: var(--muted); margin: 16px 0 32px; text-align: center;
}
.sig-about {
  font-family: inherit; white-space: pre; font-size: 10px; line-height: 1;
  color: var(--muted); margin: 16px 0 32px; text-align: center;
}

/* ----- Big quiet 'now' marker (when relevant) ----- */
.now-bar {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--rule-strong);
  padding: 4px 10px;
  font-size: 11px;
  text-transform: none;
  margin: 8px 0 24px;
}
.now-bar::before {
  content: "●";
  color: var(--accent-print);
  font-size: 8px;
  animation: dinsdag-blink 1.5s ease-in-out infinite;
}
:root[data-theme="dark"] .now-bar::before { color: var(--accent); }

/* ----- Big bold initial paragraph for the about page ----- */
.lead-p {
  font-size: 18px;
  line-height: 1.4;
  color: var(--fg);
  margin: 24px 0 32px;
  font-weight: 400;
  text-transform: none;
}
@media (max-width: 640px) { .lead-p { font-size: 16px; } }

/* ----- 'film roll' ASCII strip used on /photos hero ----- */
.film-strip {
  font-family: inherit; white-space: pre; font-size: 10px; line-height: 1;
  color: var(--muted); margin: 24px 0; text-align: center;
  letter-spacing: 0;
}

/* ----- the footer's 'made with ascii' line is bigger now ----- */
footer.dinsdag-footer .footnote {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--rule-strong);
  margin-top: 24px;
}

/* ----- subtle wiggle on hover for project / story list items ----- */
ul.project-list li:hover,
ul.story-list li:hover { transform: translateX(2px); transition: transform 80ms; }

/* ----- Photo cell year stamp in the corner (top-left) ----- */
.photo-cell .photo-year {
  position: absolute;
  top: 8px; left: 14px;
  font-size: 9px;
  color: var(--bg);
  background: var(--accent-print);
  padding: 1px 6px;
  z-index: 2;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-family: inherit;
}
:root[data-theme="dark"] .photo-cell .photo-year {
  background: var(--accent);
  color: #1A1A1A;
}


/* ============================================================
   dinsdag — display typography (text-as-art moments)
   Inspired by designshack 'text-only homepages' principles:
   bold typography as primary element, mixed typeface accents,
   high contrast, generous space around lettering.
   ============================================================ */

/* The 'display' headline — used once per page max */
.h-display {
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 64px 0 32px;
  text-transform: lowercase;
  color: var(--fg);
  /* Long words ("portfolio", "photography") at 56px+ used to push past
     a 320px viewport. Allow the browser to break inside the word when
     there's no other choice — display headlines are decorative, so a
     mid-word break is a smaller sin than a horizontal scrollbar. */
  overflow-wrap: anywhere;
}
.h-display::after {
  content: ".";
  color: var(--accent-print);
}
:root[data-theme="dark"] .h-display::after { color: var(--accent); }

@media (max-width: 640px) {
  .h-display { font-size: clamp(36px, 14vw, 56px); margin: 32px 0 24px; }
}
@media (max-width: 380px) {
  .h-display { font-size: clamp(28px, 12vw, 44px); }
}

/* Kickers contain long phrases punctuated with " · " — combining
   overflow-wrap with explicit word-break ensures the browser breaks
   the run when it has to, regardless of how the punctuation sits in
   the line. max-width: 100% blocks the rare case where a parent
   flex/inline-block layout sets a wider intrinsic size. */
.kicker, .kicker--after, .pull-quote {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
/* On phones we trade aesthetic line-break placement for "never escapes
   the viewport". break-word is gentler than break-all and only kicks
   in for runs that wouldn't otherwise wrap. !important is the belt
   for the braces — some Odoo layout CSS occasionally beats us on
   specificity for these selectors. */
@media (max-width: 640px) {
  .kicker, .kicker--after, .pull-quote, .word-stream, .h-display,
  .lead-p, .footnote, .now-bar, .now-bar span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .pull-quote { font-size: 18px; padding-left: 14px; }
  .kicker--after { font-size: 11px; letter-spacing: 0; }
}

/* Mixed-typeface "serif word" — one word in serif inside a mono headline */
.serif-word {
  font-family: 'EB Garamond', 'Georgia', 'Charter', 'Cambria', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
}

/* Sub-display (kicker / subhead) — sits above or below the h-display */
.kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
  font-weight: 600;
}
.kicker::before { content: "▸ "; color: var(--accent-print); }
:root[data-theme="dark"] .kicker::before { color: var(--accent); }

.kicker--after {
  margin: -16px 0 32px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.kicker--after::before { content: "" !important; }

/* Massive route name — used as the main "/photos" or "/about" mark */
.route-mark {
  font-size: clamp(64px, 16vw, 144px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.85;
  margin: 32px 0 8px;
  text-transform: lowercase;
  color: var(--fg);
}
.route-mark .slash { color: var(--accent-print); }
:root[data-theme="dark"] .route-mark .slash { color: var(--accent); }

/* Editorial quote — pulled paragraph in serif italic */
.pull-quote {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: 24px;
  line-height: 1.35;
  font-style: italic;
  font-weight: 400;
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--accent-print);
  color: var(--fg);
  text-transform: none;
}
:root[data-theme="dark"] .pull-quote { border-left-color: var(--accent); }

/* Editorial-style large initial — different from the drop cap (which is yellow) */
.initial {
  font-size: 96px;
  line-height: 0.8;
  font-weight: 700;
  float: left;
  margin: 8px 16px 0 0;
  font-family: inherit;
  color: var(--fg);
}

/* Asymmetric grid — text-half + photo-half */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 64px 0;
  align-items: start;
}
.split--photo-right { grid-template-columns: 1fr 1fr; }
.split > * { min-width: 0; }
@media (max-width: 640px) {
  .split { grid-template-columns: 1fr; gap: 32px; margin: 32px 0; }
}

/* Full-bleed photo block (escape the main max-width) */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.full-bleed img {
  width: 100%; display: block;
  filter: grayscale(1) contrast(1.05);
}

/* Oversized quote-marks treatment */
.shout {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 32px 0;
  text-transform: lowercase;
}
.shout::before { content: "« "; color: var(--accent-print); font-weight: 400; }
.shout::after  { content: " »"; color: var(--accent-print); font-weight: 400; }
:root[data-theme="dark"] .shout::before,
:root[data-theme="dark"] .shout::after { color: var(--accent); }


/* ============================================================
   dinsdag — code-block treatment for /code page
   ============================================================ */
.code-title {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.55;
  margin: 32px 0;
  padding: 24px 28px;
  white-space: pre;
  text-transform: none;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent-print);
  overflow-x: auto;
  color: var(--fg);
}
:root[data-theme="dark"] .code-title {
  border-left-color: var(--accent);
}
.code-title .code-comment { color: var(--muted); }
.code-title .code-keyword { color: var(--accent-print); font-weight: 600; }
:root[data-theme="dark"] .code-title .code-keyword { color: var(--accent); }
.code-title .code-name    { color: var(--fg); font-weight: 600; }
.code-title .code-string  { color: var(--fg); font-style: italic; }
.code-title .code-key     { color: var(--muted); }

/* Footer contact list — label + value rows aligned on a colon */
ul.footer-contact { margin: 16px 0; padding: 0; list-style: none; }
ul.footer-contact li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 0;
  text-transform: none;
}
.footer-label {
  display: inline-block;
  min-width: 8ch;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
ul.footer-contact a {
  text-decoration: underline;
  text-decoration-color: var(--accent-print);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background: transparent;
  padding: 0;
}
:root[data-theme="dark"] ul.footer-contact a {
  text-decoration-color: var(--accent);
}
ul.footer-contact a:hover {
  background: var(--accent-print);
  color: var(--fg);
  padding: 0 0.25ch;
  text-decoration: none;
}
:root[data-theme="dark"] ul.footer-contact a:hover {
  background: var(--accent); color: #1A1A1A;
}