/* Three looks for the same markup. look-init.js picks one per visit unless the
   visitor chose one with the floating switcher. */

/* ===================== ops: the night-shift status board ===================== */
[data-theme="ops"] {
  color-scheme: dark;
  --bg: #0c1a28; --panel: #12263a; --line: #1f3d5a; --line-strong: #3a6286;
  --fg: #dce6ef; --muted: #8ea5ba; --accent: #f4b740; --accent-text: #f4b740; --link: #8cc8ff;
  --ok: #4cc38a; --focus: #f4b740; --chip-bg: #183049; --chip-fg: #cfe0ef;
  --button-bg: #f4b740; --button-fg: #0c1a28; --switch-bg: #f4b740; --switch-fg: #0c1a28; --menu-bg: #12263a;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
  --font-display: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --font-ticket: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --display-weight: 600; --display-tracking: -0.01em;
  --h1-size: clamp(2.2rem, 1.3rem + 3.8vw, 3.8rem);
  --card-radius: 4px; --button-radius: 4px; --chip-radius: 3px; --ticket-radius: 4px; --bullet-radius: 1px;
  --ticket-bg: #0a1622; --ticket-border: 1px solid #3a6286; --ticket-divider: 1px solid #1f3d5a;
  --portrait-radius: 6px; --portrait-border: 2px solid #4cc38a; --portrait-shadow: 0 0 0 4px #0c1a28, 0 0 0 5px #3a6286;
  --media-bg: #0a1622; --stat-size: 1.9rem;
}
[data-theme="ops"] body {
  background-image: linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}
[data-theme="ops"] .mark::before { content: "● "; content: "● " / ""; color: var(--ok); }
[data-theme="ops"] h2::before { content: "$ "; content: "$ " / ""; color: var(--accent); }
[data-theme="ops"] .ticket::before { content: "LIVE"; content: "LIVE" / ""; position: absolute; top: -0.7rem; left: 1.2rem; padding: 0 0.45rem; background: var(--bg); color: var(--ok); font-size: 0.75rem; letter-spacing: 0.08em; }
[data-theme="ops"] .ticket .status-dot { animation: ops-pulse 2.4s ease-in-out infinite; }
@keyframes ops-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(76 195 138 / 0.55); } 50% { box-shadow: 0 0 0 6px rgb(76 195 138 / 0); } }
[data-theme="ops"] .ticket .scan svg { color: #0a1622; background: #ffffff; padding: 6px; }
[data-theme="ops"] .stat { border-left: 3px solid var(--ok); }
[data-theme="ops"] .card { border-top: 3px solid var(--ok); }
[data-theme="ops"] .card:hover { border-top-color: var(--accent); }
[data-theme="ops"] .card-cat, [data-theme="ops"] .crumbs { font-family: var(--font-display); }
[data-theme="ops"] .card-media img, [data-theme="ops"] .project-hero-media img, [data-theme="ops"] .gear-strip img { filter: saturate(0.85) contrast(1.05); }

/* ===================== editorial: a calm reading page ===================== */
[data-theme="editorial"] {
  color-scheme: light;
  --bg: #ffffff; --panel: #f2f6f8; --line: #d6dee4; --line-strong: #9fb0bd;
  --fg: #1b2532; --muted: #5a6776; --accent: #00729c; --accent-text: #00729c; --link: #00729c;
  --ok: #2e8b57; --chip-bg: #e6eef3; --chip-fg: #1b2532;
  --button-bg: #00729c; --button-fg: #ffffff; --switch-bg: #1b2532; --switch-fg: #ffffff; --menu-bg: #ffffff;
  --font-body: "Literata", "Literata Fallback", Georgia, serif; --font-display: "Literata", "Literata Fallback", Georgia, serif;
  --font-role: "Literata", "Literata Fallback", Georgia, serif;
  --body-size: 1.1rem; --body-leading: 1.68;
  --display-weight: 560; --display-variation: "opsz" 72; --display-tracking: -0.015em;
  --h1-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem);
  --card-radius: 12px; --ticket-radius: 6px;
  --ticket-bg: #ffffff; --ticket-border: 1px solid #c9d4dc; --ticket-tilt: rotate(-1.2deg);
  --ticket-shadow: 0 1px 0 #c9d4dc, 0 18px 40px -22px rgb(27 37 50 / 0.45);
  --portrait-border: 0; --portrait-shadow: 0 14px 30px -14px rgb(27 37 50 / 0.5);
  --media-bg: #e9eff3; --stat-size: 2.3rem;
}
[data-theme="editorial"] .role { font-style: italic; font-weight: 400; color: var(--muted); }
[data-theme="editorial"] .card, [data-theme="editorial"] .tile, [data-theme="editorial"] .stat { background: #ffffff; }
[data-theme="editorial"] .card { box-shadow: 0 1px 0 var(--line); }
[data-theme="editorial"] .tags li, [data-theme="editorial"] .filters button, [data-theme="editorial"] .card-cat { font-family: system-ui, sans-serif; }
[data-theme="editorial"] .section-head h2 { padding-top: 1.1rem; border-top: 2px solid var(--fg); }

/* ===================== print: the shop floor ===================== */
[data-theme="print"] {
  color-scheme: light;
  --c: #00a0dc; --m: #e6007e; --y: #ffd400; --k: #000000;
  --bg: #eceef0; --panel: #ffffff; --line: #c3c8cd; --line-strong: #000000;
  --fg: #000000; --muted: #4b5157; --accent: #e6007e; --accent-text: #b8005f; --link: #b8005f;
  --ok: #00a0dc; --chip-bg: #fff3b0; --chip-fg: #000000;
  --button-bg: #000000; --button-fg: #ffffff; --switch-bg: #000000; --switch-fg: #ffffff; --menu-bg: #ffffff;
  --font-body: "Archivo", "Archivo Fallback", system-ui, sans-serif; --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --display-weight: 800; --display-variation: "wdth" 125; --display-tracking: -0.01em;
  --h1-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.6rem);
  --card-radius: 0; --button-radius: 0; --chip-radius: 0; --ticket-radius: 0; --bullet-radius: 0;
  --ticket-bg: #ffd6e7; --ticket-fg: #2a0016; --ticket-muted: #7a3a57; --ticket-border: 0; --ticket-divider: 1px dashed #b8005f;
  --ticket-code: #000000; --ticket-code-bg: #ffffff; --ticket-code-pad: 6px;
  --card-border: 0; --portrait-radius: 0; --portrait-border: 0; --stat-color: #000000; --media-bg: #ffffff;
}
[data-theme="print"] .site-header { border-bottom: 0; }
[data-theme="print"] .site-header::after { content: ""; display: block; height: 10px; background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, var(--k) 75% 100%); }
[data-theme="print"] .nav a[aria-current="page"] { border-bottom-color: var(--m); }
/* crop marks: the work order is printed on pink, like the shop's work orders */
[data-theme="print"] .ticket { margin: 14px; }
[data-theme="print"] .ticket::before, [data-theme="print"] .ticket::after,
[data-theme="print"] .portrait-wrap::before, [data-theme="print"] .portrait-wrap::after { content: ""; content: "" / ""; position: absolute; width: 20px; height: 20px; pointer-events: none; }
[data-theme="print"] .ticket::before { top: -16px; left: -16px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; }
[data-theme="print"] .ticket::after { bottom: -16px; right: -16px; border-left: 1.5px solid #000; border-top: 1.5px solid #000; }
/* the portrait's marks: the wrap hugs the photo with a 14px margin, and each mark is an L whose
   corner meets the photo's corner, so its two strokes carry on the photo's edges */
[data-theme="print"] .portrait-wrap { position: relative; display: block; width: fit-content; max-width: 100%; padding: 14px; }
[data-theme="print"] .portrait-wrap::before, [data-theme="print"] .portrait-wrap::after { width: 15.5px; height: 15.5px; }
[data-theme="print"] .portrait-wrap::before { top: 0; left: 0; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; }
[data-theme="print"] .portrait-wrap::after { bottom: 0; right: 0; border-left: 1.5px solid #000; border-top: 1.5px solid #000; }
/* cards outlined with a dashed CutContour line: the spot color cutters follow */
[data-theme="print"] .card, [data-theme="print"] .tile, [data-theme="print"] .glance, [data-theme="print"] .figure,
[data-theme="print"] .cta-band > div, [data-theme="print"] .toolbox section, [data-theme="print"] .principles li, [data-theme="print"] .hero-figure {
  outline: 2px dashed var(--m); outline-offset: 5px; margin: 7px;
}
[data-theme="print"] .card:hover, [data-theme="print"] .tile:hover { outline-color: #000; }
[data-theme="print"] .card-grid, [data-theme="print"] .tiles { gap: 1.6rem; }
/* stats ruled like a form: each cell draws its own 2px frame, which double up into the 2px gaps,
   so a part-filled last row leaves empty space instead of black blocks */
[data-theme="print"] .stats { gap: 2px; }
[data-theme="print"] .stat { box-shadow: 0 0 0 2px #000; }
[data-theme="print"] .stat:nth-child(4n+1) strong { color: #00749f; }
[data-theme="print"] .stat:nth-child(4n+2) strong { color: var(--accent-text); }
[data-theme="print"] .stat:nth-child(4n+3) strong { background: linear-gradient(transparent 62%, var(--y) 62%); display: inline; }
[data-theme="print"] .section + .section, [data-theme="print"] .project-hero { border-top: 2px solid #000; }
[data-theme="print"] .button.secondary { border-color: #000; }
[data-theme="print"] .path li { border-top-color: var(--m); }
[data-theme="print"] .path li:nth-child(2) { border-top-color: var(--c); }
[data-theme="print"] .path li:nth-child(3) { border-top-color: var(--y); }
[data-theme="print"] .path li:nth-child(4) { border-top-color: #000; }
[data-theme="print"] .site-footer .wrap::before { content: ""; display: block; flex-basis: 100%; width: 28px; max-width: 28px; height: 28px; margin-bottom: 0.6rem; border-radius: 50%;
  background: linear-gradient(#000, #000) center / 100% 1.5px no-repeat, linear-gradient(#000, #000) center / 1.5px 100% no-repeat;
  box-shadow: inset 0 0 0 1.5px #000, inset 0 0 0 7px var(--bg), inset 0 0 0 8.5px #000; }
/* the dashed CutContour outline sits outside the box, so give the next section room */
[data-theme="print"] .project-body > .figure { margin-bottom: 2.8rem; }