/* Case pages on the D1 shell (after dennissnellenberg.com case pages). The page structure still comes
   from v3, v5 and v13; this file points their tokens at the D1 palette and restyles the shared parts:
   title, facts row, spreads, figures, counters, decisions and the door to the next project. */

/* Every older token now reads from the finish. Doubled class so it outranks the per-project worlds. */
.c13.c13 {
  --pp: var(--bg); --ik: var(--ink); --dm: var(--ink-2); --ac: var(--accent); --ln: var(--rule-2);
  --paper: var(--bg); --paper-2: var(--bg-2); --paper-3: var(--bg-3); --white: var(--bg-2); --ink-3: var(--ink-3);
  --rule: var(--rule-2); --signal: var(--accent); --sans: var(--font); --mono: var(--font);
  background: transparent; color: var(--ink);
}
body:has(.c13) { background: var(--bg); color: var(--ink); display: flex; flex-direction: column; min-height: 100vh; }
body:has(.c13) main { padding-top: clamp(120px, 13vw, 190px); }
.c13 ::selection { background: var(--accent); color: var(--accent-ink); }

/* Title: plain dark type at the reference's case-title size, set on the 16vw line. */
.ct, .ct-banner { position: relative; height: auto; margin: 0; padding: 0 var(--pad-2); }
.ct canvas { display: none; }
.ct-t { position: static; display: block; margin: 0; padding: 0; font: 400 clamp(48px, 7vw, 112px)/1 var(--font); letter-spacing: -.04em;
  text-transform: none; background: none; color: var(--dark); -webkit-text-fill-color: currentColor; }
.ct-banner .ct-t { font-size: clamp(14px, .9vw, 15px); letter-spacing: .05em; text-transform: uppercase; opacity: .5; }

/* Opening: the reference's facts row, label over a hairline over the value. */
.op13 { display: block; padding: clamp(30px, 3.4vw, 50px) var(--pad-2) 0; margin: 0; border: 0; }
.back13 { font-size: 15px; color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 18px; }
.back13:hover { color: var(--blue); }
.c13 .lb { font: 450 clamp(10px, .72vw, 12px)/1.4 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.c13 .lb b { color: var(--ink); font-weight: 500; margin-right: .6em; }
.op13 > .lb { display: none; }
.op13-say, .nt13-say, .ar13-say { font: 400 clamp(22px, 2.3vw, 36px)/1.4 var(--font); letter-spacing: -.02em; color: var(--ink); max-width: 30ch; }
.op13-say { margin-top: 0; }
.op13-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(50px, 6vw, 90px); }
.op13-facts div { border: 0 !important; padding: 0 !important; display: block !important; }
.op13-facts dt, .dc13 dt { font: 450 clamp(10px, .72vw, 12px)/1.4 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.op13-facts dt { padding-bottom: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--stripe); }
.op13-facts dd { margin: clamp(18px, 2vw, 28px) 0 0 !important; font: 400 clamp(15px, 1.2vw, 18px)/1.5 var(--font); color: var(--ink); }
.op13-facts a, .tx13 a, .c13 p a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.op13-facts a:hover, .tx13 a:hover, .c13 p a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* Index-page headings */
.nt13 { border-top: 0; margin: 0; padding-left: var(--pad-2); padding-right: var(--pad-2); }
.nt13-t, .ar13-head h1 { font: 400 clamp(40px, 5.25vw, 80px)/1.07 var(--font) !important; letter-spacing: -.035em; text-transform: none; color: var(--ink); max-width: 18ch; }

/* Spreads */
.s13 { padding-top: clamp(64px, 8vw, 140px); }
.say13 { font: 400 clamp(28px, 3.75vw, 56px)/1.1 var(--font); letter-spacing: -.03em; color: var(--ink); max-width: 20ch; }
h2.say13 { max-width: 20ch; }
.tx13 { font: 400 clamp(15px, 1.2vw, 18px)/1.66 var(--font); color: var(--ink-2); max-width: 58ch; }
.tx13 b, .tx13 strong { color: var(--ink); font-weight: 620; }
.dim13 { color: var(--ink-3); }

/* Counters read as chrome. */
.n13 b, .fl13 b { font-weight: 400; letter-spacing: -.04em; }
.n13 b { font-size: clamp(36px, 5.25vw, 80px); color: var(--ink); padding-bottom: .06em; }
.n13 span, .fl13 span { color: var(--ink-2); }

/* Figures sit on a quiet plate and open through the ribs as they arrive. */
.c13 figure img, .c13 figure video { background: var(--bg-2); }
.pl13 > figcaption, .duo13 figcaption, .ov13-works figcaption { color: var(--ink-3); font-family: var(--sans); }
.js:not(.rm) .rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js:not(.rm) .rv.is-in { opacity: 1; transform: none; }

/* Decisions */
.dc13 li { border-top-color: var(--rule-2); }
.dc13 li:last-child { border-bottom-color: var(--rule-2); }
.dc13 li::before { font: 450 12px/1.9 var(--font); color: var(--ink-3); letter-spacing: .05em; }
.dc13 h3 { font: 400 clamp(22px, 2.3vw, 36px)/1.15 var(--font); letter-spacing: -.02em; }
.dc13 dd { color: var(--ink-2); }

/* Code plates sit one step off the ground in every finish. */
.c13 .co13, .c13 .src13 pre, .c13 .ar13-body pre, .c13 .qa13 code, .c13 .msg { background: var(--bg-2) !important; color: var(--ink) !important; border: 1px solid var(--rule); }
.c13 .co13 i, .c13 .ar13-body pre i, .c13 .src13 pre i { color: var(--ink-3) !important; }
.c13 .co13 b { color: var(--accent) !important; }

/* Status colours for every finish: each hue is pulled toward the ink, so it darkens on a light ground and lightens on a dark one. */
.c13 { --st-ok: color-mix(in oklab, #2fa866 60%, var(--ink)); --st-bad: color-mix(in oklab, #e0533a 60%, var(--ink)); --st-hold: color-mix(in oklab, #d49a1f 60%, var(--ink)); }
.c13 .qa13 code .ok { color: var(--st-ok); }
.c13 .msg p.kick { color: var(--ink-3); }
.c13 .msg .v { color: var(--ink); border-bottom-color: var(--accent); }

/* Panels that were cream cards on paper now sit one step off the ground. */
.c13 .atlas-plate .pl-in { background: var(--bg-2); border-color: var(--rule-2); }
.c13 .rp13 { --card: var(--bg-2); --ok: var(--st-ok); --bad: var(--st-bad); --hold: var(--st-hold); border-color: var(--rule-2); }
.c13 .rp-b:hover { color: var(--accent-ink); }
.c13 .ov13-path li.k .n, .c13 .ov13-path li.k small { color: color-mix(in oklab, var(--bg) 74%, var(--ink)); }

/* Tables and small light chips inherited from the paper days. */
.c13 .tb13 td { border-bottom-color: var(--rule); }
.c13 .tb13 .red { background: var(--rule-2); }
.c13 .tb13 .st.f { background: var(--bg-3); color: var(--ink); }
.c13 .tb13 .st.s { background: var(--ink); color: var(--bg); }
.c13 .tb13 .st.b { background: var(--accent); color: var(--accent-ink); }
.c13 .wv-win { background: var(--bg-2); box-shadow: 0 0 0 1px var(--rule); }
.c13 .cr-item img, .c13 .cr-sys img { box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.28); }

/* End and the door to the next project: the reference's "Next case", centred. */
.c13 .end13 { background: transparent; color: var(--ink); --ik: var(--ink); --dm: var(--ink-2); --ln: var(--rule-2); }
.c13 .end13 a:hover { color: var(--blue); }
.end13 { border-top: 1px solid var(--rule); margin: clamp(64px, 8vw, 140px) var(--pad-2) 0; padding-left: 0; padding-right: 0; }
.c13 a.nx13 { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2vw, 30px); text-align: center;
  margin-top: clamp(90px, 11vw, 170px); padding: clamp(60px, 7vw, 110px) var(--pad) clamp(90px, 10vw, 150px); background: transparent; color: var(--ink); border-top: 1px solid var(--stripe); }
.nx13 .lb { color: var(--ink-3) !important; opacity: 1 !important; font-size: clamp(13px, 1.05vw, 16px) !important; text-transform: none !important; letter-spacing: 0 !important; }
.nx13 b { font: 400 clamp(44px, 7vw, 112px)/1 var(--font); letter-spacing: -.04em; text-transform: none; transition: color .4s var(--ease-out); }
.c13 a.nx13:hover b { color: var(--blue); }
.nx13 .ar { display: grid; place-items: center; width: clamp(110px, 9vw, 140px); aspect-ratio: 1; border-radius: 50%; background: var(--dark); color: #fff;
  font: 400 clamp(14px, 1.2vw, 18px)/1 var(--font); transition: background .4s var(--ease-out); }
.nx13 .ar::before { content: "Next case"; }
.nx13 .ar { font-size: 0; }
.nx13 .ar::before { font-size: clamp(14px, 1.2vw, 17px); }
.c13 a.nx13:hover .ar { background: var(--blue); }

/* Old per-page bits that assumed a paper ground. */
.c13 .um13-play, .c13 .um6-play { border-color: var(--rule-2); background: rgba(8, 9, 10, .7); color: #f1f2f4; font-family: var(--mono); }

@media (max-width: 760px) {
  .op13-facts { grid-template-columns: minmax(0, 1fr); }
  .ct-t { font-size: clamp(40px, 12vw, 64px); }
  .nx13 b { font-size: 11vw; }
}
/* The material grid keeps its desktop rows otherwise, and two pieces land in one cell. */
@media (max-width: 900px) { .ua-id figure { grid-row: auto !important; } }