/*
 * Darkroom v1 — the DigitalHeMan family design system.
 *
 * Hosted once at https://digitalheman.com/ds/darkroom/v1/darkroom.css and
 * linked by every site and app, so a change here reaches all of them on their
 * next page load with no rebuild. Rules, tones and the adoption guide live in
 * brand/darkroom/README.md in digitalheman-eng/digitalheman.
 *
 * Versioning: v1 changes IN PLACE only for changes that cannot break a
 * layout (a colour value, a font weight, a new class). Renaming or removing a
 * token or class, or changing a size enough to reflow pages, goes in v2/ and
 * each app moves across deliberately.
 *
 * Everything sits in cascade layers, so any unlayered rule in an app wins
 * over Darkroom. That is what lets an app adopt it gradually — but it also
 * means an app that still sets its OWN token values on :root will silently
 * override these. Adopting Darkroom means deleting those local values.
 *
 * Token names: the --color-* / --font-* / --text-* / --space-* names are the
 * existing DHM contract every repo already uses, now pointed at Darkroom
 * values. The --dr-* names are Darkroom's own.
 */

@layer darkroom.fonts, darkroom.tokens, darkroom.base, darkroom.components;

/* ------------------------------------------------------------------------ */
/* Fonts — self-hosted (SIL OFL 1.1, licences in fonts/)                     */
/* ------------------------------------------------------------------------ */

@layer darkroom.fonts {
  @font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/instrument-serif-latin-400-normal.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: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/instrument-serif-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/instrument-serif-latin-400-italic.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: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/instrument-serif-latin-ext-400-italic.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/inter-tight-latin-wght-normal.woff2) format('woff2-variations');
    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: 'Inter Tight';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/inter-tight-latin-ext-wght-normal.woff2) format('woff2-variations');
    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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
    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: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
    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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
}

/* ------------------------------------------------------------------------ */
/* Tokens                                                                   */
/* ------------------------------------------------------------------------ */

@layer darkroom.tokens {
  :root {
    color-scheme: dark;

    /* ---- Darkroom palette ---- */
    --dr-void: #000000;          /* the page; always behind images */
    --dr-ground: #0a0a0a;        /* bars, inputs, cards */
    --dr-raised: #151515;        /* selected card, open panel */
    --dr-ink: #f3f0ea;           /* 19.0:1 on void */
    --dr-ink-muted: #a39f98;     /*  7.9:1 */
    --dr-ink-faint: #85817a;     /*  5.1:1 — still body-text safe */
    --dr-line: rgba(255, 255, 255, 0.12);
    --dr-line-strong: rgba(255, 255, 255, 0.28);

    /* Safelight: the one family signal. Only for what you can act on next —
       links, the primary button, the active nav mark, focus, overdue/urgent,
       errors. Never a fill behind photographs. 6.7:1 on void. */
    --dr-safelight: #ff5a1f;
    --dr-safelight-hover: #ff7a47;
    --dr-safelight-dim: rgba(255, 90, 31, 0.14);
    --dr-safelight-line: rgba(255, 90, 31, 0.45);
    --dr-on-safelight: #000000;

    /* Tone: the site's or app's own colour. Public sites tint headings,
       rules and hover lines with it; apps use it on their NAME only. Set by
       <html data-darkroom="…"> below; defaults to muted ink. */
    --dr-tone: var(--dr-ink-muted);

    /* Categorical colours for things that must be told apart (Tasks lanes,
       Budget series). They differ in lightness as well as hue, and none of
       them is close to the safelight. */
    --dr-cat-1: #e3b34f;  /* ochre */
    --dr-cat-2: #7fa6e0;  /* blue  */
    --dr-cat-3: #6fc2a0;  /* green */
    --dr-cat-4: #c9a0dc;  /* lilac */
    --dr-cat-5: #b4c6d8;  /* silver */

    --dr-positive: #7cc29b;
    --dr-warning: #e8c46a;
    --dr-danger: var(--dr-safelight);

    /* ---- Type ---- */
    --dr-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --dr-font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --dr-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --dr-tracking-label: 0.14em;
    --dr-text-hero: clamp(3.5rem, 9vw + 1rem, 10.5rem);
    --dr-text-section: clamp(2.25rem, 3.6vw + 1rem, 4rem);

    /* ---- Motion ---- */
    --dr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dr-dur-frame: 240ms;
    --dr-dur-light: 520ms;
    --dr-dur-develop: 900ms;

    /* ---- The DHM contract names, pointed at Darkroom ---- */
    --color-bg: var(--dr-void);
    --color-bg-raised: var(--dr-ground);
    --color-bg-sunken: var(--dr-void);
    --color-bg-tint: rgba(243, 240, 234, 0.04);
    --color-text: var(--dr-ink);
    --color-text-muted: var(--dr-ink-muted);
    --color-text-faint: var(--dr-ink-faint);
    --color-surface: #ece9e4;
    --color-surface-ink: #131313;

    --color-accent: var(--dr-safelight);
    --color-accent-hover: var(--dr-safelight-hover);
    --color-accent-dim: var(--dr-safelight-dim);
    --color-accent-line: var(--dr-safelight-line);
    --color-accent-ink: var(--dr-on-safelight);
    --color-brand: var(--dr-safelight);
    --color-brand-hover: var(--dr-safelight-hover);
    --color-on-brand: var(--dr-on-safelight);

    --color-border: var(--dr-line);
    --color-border-strong: var(--dr-line-strong);
    --color-muted: #2a2a2a;

    --color-positive: var(--dr-positive);
    --color-warning: var(--dr-warning);
    --color-warning-dim: rgba(232, 196, 106, 0.14);
    --color-danger: var(--dr-danger);
    --color-danger-dim: var(--dr-safelight-dim);

    --font-display: var(--dr-font-display);
    --font-heading-alt: var(--dr-font-mono); /* was Cinzel caps labels */
    --font-body: var(--dr-font-body);
    --font-mono: var(--dr-font-mono);

    /* Type scale — 1.333, fluid between ~380px and ~1200px viewports. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
    --text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.8vw + 1.25rem, 2.375rem);
    --text-3xl: clamp(2.25rem, 3vw + 1.25rem, 3.5rem);
    --text-4xl: clamp(3rem, 5vw + 1.25rem, 5.5rem);

    --leading-tight: 1.05;
    --leading-normal: 1.6;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.14em;

    --space-unit: 0.5rem;
    --space-1: var(--space-unit);
    --space-2: calc(var(--space-unit) * 2);
    --space-3: calc(var(--space-unit) * 3);
    --space-4: calc(var(--space-unit) * 4);
    --space-6: calc(var(--space-unit) * 6);
    --space-8: calc(var(--space-unit) * 8);
    --space-12: calc(var(--space-unit) * 12);
    --space-16: calc(var(--space-unit) * 16);

    --measure: 62ch;
    --content-max: 60rem;
    --page-max: 90rem;
    --radius: 0;
    --radius-sm: 0;
    --transition: 180ms var(--dr-ease);
  }

  /* ---- Tones, one per site or app. Normally on <html>; works on any
     element, so a page can show another site's tone in a subtree. ---- */
  [data-darkroom='hub'] { --dr-tone: var(--dr-safelight); }
  [data-darkroom='photography'] { --dr-tone: #b4c6d8; }  /* silver */
  [data-darkroom='leathercraft'] { --dr-tone: #c98b4e; } /* saddle */
  /* Apps: a grey tone of their old accent, on the app's name only. */
  [data-darkroom='tasks'] { --dr-tone: #b5aec4; }
  [data-darkroom='mail'] { --dr-tone: #a7b8b3; }
  [data-darkroom='budget'] { --dr-tone: #a9b2c0; }
  [data-darkroom='vinyl'] { --dr-tone: #bbb0a6; }
  [data-darkroom='photoopp'] { --dr-tone: #c4aba7; }
  [data-darkroom='exchange'] { --dr-tone: #b7b9a4; }
  [data-darkroom='identity'] { --dr-tone: #b0b4b8; }
  [data-darkroom='pension'] { --dr-tone: #c2b59b; }
  [data-darkroom='deploy'] { --dr-tone: #9db0bd; }   /* ovh-mcp dashboard */
  [data-darkroom='soc'] { --dr-tone: #a4a6c6; }      /* AgentiSOC dashboard */
  [data-darkroom='bakery'] { --dr-tone: #cbb98a; }   /* wheat; recipes, /bakery */
  [data-darkroom='assess'] { --dr-tone: #9cc4a8; }   /* sage; DHM 360 / Born Merry, /assess */
}

/* ------------------------------------------------------------------------ */
/* Base — deliberately small; anything an app might style differently is a */
/* class below instead.                                                      */
/* ------------------------------------------------------------------------ */

@layer darkroom.base {
  html {
    background: var(--dr-void);
    color: var(--dr-ink);
    font-family: var(--dr-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scrollbar-color: #2a2a2a var(--dr-void);
  }

  ::selection {
    background: var(--dr-safelight);
    color: var(--dr-on-safelight);
  }

  :focus-visible {
    outline: 2px solid var(--dr-safelight);
    outline-offset: 3px;
  }
}

/* ------------------------------------------------------------------------ */
/* Components — all opt-in, all prefixed dr-                               */
/* ------------------------------------------------------------------------ */

@layer darkroom.components {
  /* ---- Type ---- */
  .dr-display {
    font-family: var(--dr-font-display);
    font-weight: 400;
    font-size: var(--dr-text-hero);
    line-height: 0.86;
    letter-spacing: -0.035em;
  }
  .dr-section-title {
    font-family: var(--dr-font-display);
    font-weight: 400;
    font-size: var(--dr-text-section);
    line-height: 0.95;
    letter-spacing: -0.015em;
  }
  .dr-title {
    font-family: var(--dr-font-display);
    font-weight: 400;
    font-size: clamp(1.625rem, 1vw + 1.25rem, 2rem);
    line-height: 1.05;
  }
  .dr-label {
    font-family: var(--dr-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--dr-tracking-label);
    text-transform: uppercase;
    color: var(--dr-ink-muted);
  }
  .dr-italic { font-style: italic; }
  .dr-tone { color: var(--dr-tone); }
  .dr-stop { color: var(--dr-safelight); }

  /* ---- Wordmark: Name + toned italic + safelight full stop ----
     <span class="dr-wordmark">DHM <i class="dr-wordmark__tone">Tasks</i><span class="dr-stop">.</span></span> */
  .dr-wordmark {
    font-family: var(--dr-font-display);
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--dr-ink);
    text-decoration: none;
  }
  .dr-wordmark__tone { font-style: italic; color: var(--dr-tone); }

  /* ---- Family / app bar: a thin strip above every site and app ---- */
  .dr-appbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    padding: 0.625rem clamp(1rem, 3vw, 2.5rem);
    background: var(--dr-ground);
    border-bottom: 1px solid var(--dr-line);
    font-family: var(--dr-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .dr-appbar a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    color: var(--dr-ink-muted);
    text-decoration: none;
    transition: color var(--transition);
  }
  .dr-appbar a:hover { color: var(--dr-ink); }
  .dr-appbar a[aria-current] { color: var(--dr-ink); }
  .dr-appbar a[aria-current]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dr-safelight);
    box-shadow: 0 0 8px var(--dr-safelight);
  }
  .dr-appbar__divider { width: 1px; height: 0.75rem; background: var(--dr-line-strong); }
  .dr-appbar__spacer { flex-grow: 1; }
  .dr-appbar__note { color: var(--dr-ink-faint); }

  /* ---- Site / app navigation ---- */
  .dr-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
  .dr-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--dr-ink-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
  }
  .dr-nav a:hover { color: var(--dr-ink); }
  .dr-nav a[aria-current] { color: var(--dr-ink); border-bottom-color: var(--dr-safelight); }

  /* ---- Links: a rule that warms from underneath ---- */
  .dr-link {
    color: var(--dr-ink);
    text-decoration: none;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--dr-safelight);
    transition: box-shadow var(--dr-dur-light) var(--dr-ease), color var(--transition);
  }
  .dr-link:hover {
    color: var(--dr-ink);
    box-shadow: 0 10px 24px -12px var(--dr-safelight);
  }
  .dr-link--tone { border-bottom-color: var(--dr-tone); }

  /* ---- Buttons ---- */
  .dr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0 1.5rem;
    border: 1px solid var(--dr-line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--dr-ink);
    font-family: var(--dr-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  .dr-btn:hover { border-color: var(--dr-ink-muted); }
  /* One per screen. */
  .dr-btn--primary {
    background: var(--dr-safelight);
    border-color: var(--dr-safelight);
    color: var(--dr-on-safelight);
    font-weight: 600;
  }
  .dr-btn--primary:hover { background: var(--dr-safelight-hover); border-color: var(--dr-safelight-hover); color: var(--dr-on-safelight); }
  /* The curiosity button: shuffle, random, "show me something". */
  .dr-btn--shuffle {
    border-style: dashed;
    font-family: var(--dr-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .dr-btn--icon { width: 3rem; padding: 0; }
  .dr-btn[disabled], .dr-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

  /* ---- Segmented control ---- */
  .dr-segmented { display: inline-flex; border: 1px solid var(--dr-line-strong); }
  .dr-segmented > * {
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dr-ink-muted);
    font-family: var(--dr-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .dr-segmented > [aria-pressed='true'], .dr-segmented > [aria-current] { background: var(--dr-ink); color: var(--dr-void); }

  /* ---- Inputs ---- */
  .dr-input {
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--dr-line);
    border-radius: 0;
    background: var(--dr-ground);
    color: var(--dr-ink);
    font-family: var(--dr-font-body);
    font-size: 0.9375rem;
  }
  .dr-input::placeholder { color: var(--dr-ink-faint); }
  .dr-input:focus { border-color: var(--dr-line-strong); }
  .dr-input--quick {
    min-height: 3.5rem;
    border-style: dashed;
    border-color: var(--dr-line-strong);
    font-family: var(--dr-font-mono);
    font-size: 0.875rem;
  }

  /* ---- Frame lines: rangefinder corners on hover / focus / selection ----
     Put .dr-frame on any positioned box (image wrapper, card). The corners
     appear on hover, keyboard focus inside it, or with .is-framed. */
  .dr-frame { position: relative; }
  .dr-frame::after {
    --l: 1.625rem;
    --c: var(--dr-ink);
    content: '';
    position: absolute;
    inset: var(--dr-frame-inset, 0.875rem);
    pointer-events: none;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity var(--dr-dur-frame) var(--dr-ease), transform var(--dr-dur-frame) var(--dr-ease);
    background:
      linear-gradient(var(--c), var(--c)) top left / var(--l) 2px no-repeat,
      linear-gradient(var(--c), var(--c)) top left / 2px var(--l) no-repeat,
      linear-gradient(var(--c), var(--c)) top right / var(--l) 2px no-repeat,
      linear-gradient(var(--c), var(--c)) top right / 2px var(--l) no-repeat,
      linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px no-repeat,
      linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l) no-repeat,
      linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px no-repeat,
      linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l) no-repeat;
  }
  .dr-frame:hover::after,
  .dr-frame:focus-visible::after,
  .dr-frame:focus-within::after,
  .dr-frame.is-framed::after { opacity: 1; transform: scale(1); }
  /* Cards are small: corners sit just outside the edge. */
  .dr-frame--tight::after { --l: 0.875rem; inset: -5px; }

  /* ---- Image with data plate rising on hover ---- */
  .dr-photo { position: relative; overflow: hidden; background: var(--dr-void); }
  .dr-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dr-dur-light) var(--dr-ease);
  }
  .dr-photo:hover img, .dr-photo:focus-within img { transform: scale(1.03); }
  .dr-photo .dr-plate--overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3rem 1.25rem 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: var(--dr-ink);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dr-dur-frame) var(--dr-ease), transform var(--dr-dur-frame) var(--dr-ease);
  }
  .dr-photo:hover .dr-plate--overlay,
  .dr-photo:focus-within .dr-plate--overlay,
  .dr-photo .dr-plate--overlay.is-shown { opacity: 1; transform: none; }

  /* ---- Data plate: how a thing was made ---- */
  .dr-plate {
    font-family: var(--dr-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dr-ink-muted);
  }
  .dr-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.625rem 1rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
  }
  .dr-specs dt {
    font-family: var(--dr-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dr-ink-faint);
  }
  .dr-specs dd { margin: 0.125rem 0 0; font-size: 0.875rem; }

  /* ---- Tags ---- */
  .dr-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--dr-line-strong);
    color: var(--dr-ink-muted);
    font-family: var(--dr-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .dr-tag--tone { border-color: var(--dr-tone); color: var(--dr-tone); }
  .dr-tag--alert { border-color: var(--dr-safelight); color: var(--dr-safelight); }

  /* ---- Cards ---- */
  .dr-card {
    padding: 0.875rem;
    background: var(--dr-ground);
    border: 1px solid var(--dr-line);
  }
  .dr-card.is-selected, .dr-card[aria-selected='true'] { background: var(--dr-raised); }
  .dr-card.is-done { opacity: 0.55; }

  /* ---- Square check ---- */
  .dr-check {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--dr-ink-faint);
    border-radius: 0;
    background: transparent;
    color: var(--dr-void);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
  }
  .dr-check[aria-pressed='true'], .dr-check:checked {
    border-color: var(--dr-check-colour, var(--dr-ink));
    background: var(--dr-check-colour, var(--dr-ink));
  }

  /* ---- Frame counter: 07 / 36 ---- */
  .dr-counter { display: inline-flex; align-items: baseline; gap: 0.625rem; }
  .dr-counter__now {
    font-family: var(--dr-font-display);
    font-size: clamp(4rem, 6vw + 1rem, 7.5rem);
    line-height: 0.82;
    letter-spacing: -0.03em;
  }
  .dr-counter__of {
    font-family: var(--dr-font-mono);
    font-size: 0.8125rem;
    color: var(--dr-ink-faint);
  }

  /* ---- Dividers ---- */
  /* Numbered hairline: <div class="dr-rule"><span>03</span></div> */
  .dr-rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--dr-font-mono);
    font-size: 0.75rem;
    color: var(--dr-safelight);
  }
  .dr-rule::after { content: ''; flex-grow: 1; height: 1px; background: var(--dr-line-strong); }
  /* Film rebate (photography): fill with <span>▸ 24</span><span>24A</span>… */
  .dr-rebate {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    height: 1.5rem;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    white-space: nowrap;
    background: var(--dr-ground);
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
    font-family: var(--dr-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--dr-tone);
  }
  /* Saddle stitch (leathercraft). */
  .dr-stitch { border: 0; border-top: 2px dashed var(--dr-tone); margin: 0; }

  /* ---- Progress roll: a row of frames that fill as work gets done ---- */
  .dr-roll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .dr-roll > * { height: 0.875rem; border: 1px solid var(--dr-line); }
  .dr-roll > .is-filled { background: var(--dr-ink); border-color: var(--dr-ink); }

  /* ---- Behind the frame: a story disclosure ---- */
  .dr-story { border-top: 1px solid var(--dr-line-strong); border-bottom: 1px solid var(--dr-line); padding: 1rem 0; }
  .dr-story > summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    min-height: 2.75rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--dr-font-display);
    font-size: 1.625rem;
  }
  .dr-story > summary::-webkit-details-marker { display: none; }
  .dr-story > summary::after { content: '+'; font-family: var(--dr-font-mono); font-size: 1.125rem; color: var(--dr-safelight); }
  .dr-story[open] > summary::after { content: '−'; }

  /* ---- Next frame: every page ends with somewhere to go ---- */
  .dr-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 3rem;
    padding: 3.5rem 0;
    border-top: 1px solid var(--dr-line-strong);
    color: var(--dr-ink);
    text-decoration: none;
  }
  /* The destination line. Sized as an invitation, not a section heading:
     at full section size it out-shouted every heading above it. The
     .dr-section-title selector is kept because that is what the specimen
     originally showed, so pages built from it shrink too. */
  .dr-next__title,
  .dr-next .dr-section-title {
    font-family: var(--dr-font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* ---- Develop: images rise out of black as they scroll in ----
     Pure CSS (scroll-driven animation); browsers without support simply
     show the image. */
  @supports (animation-timeline: view()) {
    .dr-develop {
      animation: dr-develop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
  @keyframes dr-develop {
    from { opacity: 0; filter: brightness(0.4); }
    to { opacity: 1; filter: brightness(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .dr-develop { animation: none; }
    .dr-frame::after, .dr-photo img, .dr-photo .dr-plate--overlay, .dr-link { transition: none; }
    .dr-photo:hover img, .dr-photo:focus-within img { transform: none; }
  }

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