/* ─────────────────────────────────────────────
   ARC Lab (/lab and /lab/<piece>): the online edition of a newspaper.
   Oat Milk paper, Charcoal ink, Oxblood used sparingly, Slate Blue for sources and labels.
   Text is always left-aligned, never justified; lines stay under about 70 characters.
   One column on a phone, two or three on a desk. Builds on styles.css.
   ───────────────────────────────────────────── */
.page-lab {
  --paper: #DED8CC;                       /* Oat Milk */
  --ink: #2E2E2E;                         /* Charcoal */
  --ink-70: rgb(46 46 46 / .78);
  --ink-15: rgb(46 46 46 / .16);
  --ox: #4A0404;                          /* Oxblood */
  --slate: #44586C;                       /* Slate Blue, darkened from #8095AA for 4.5:1 on Oat Milk */
  --strong: #455A38;                      /* Deep Moss */
  --medium: #A95F49;                      /* Burnt Clay */
  --weak: #4A0404;                        /* Oxblood */
  --header-bg: rgb(222 216 204 / .96);
  --header-line: rgb(46 46 46 / .12);
  --measure: 68ch;
  background: var(--paper);
  color: var(--ink);
}

/* header and menu: ink on paper */
.page-lab .site-header { color: var(--ink); text-shadow: none; }
.page-lab .brand__mark { fill: currentColor; filter: none; }
.page-lab .menu-toggle { color: inherit; }
.page-lab .site-menu { background: var(--paper); color: var(--ink); }
.page-lab .site-menu__list a { color: var(--ink); }
.page-lab .site-menu__list a:hover, .page-lab .site-menu__list a[aria-current="page"] { color: var(--ox); }
.page-lab .site-menu__list .idx { color: var(--ox); opacity: .75; }
.page-lab .site-menu__foot { color: var(--ink-70); }
.page-lab .site-footer { background: var(--ink); }
.page-lab :focus-visible { outline-color: var(--ox); }
.page-lab .site-footer :focus-visible { outline-color: var(--oat); }

.lab { max-width: 1240px; margin: 0 auto; padding: clamp(96px, 14vh, 128px) var(--gutter) clamp(72px, 10vh, 112px); text-align: left; }
.lab p, .lab li { text-align: left; hyphens: manual; }
.lab a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lab a:hover { color: var(--ox); }

/* small mono labels (dates, numbers, kickers) */
.lab-kicker, .lab-meta, .lab-num {
  margin: 0;
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ── 1 · masthead ── */
.lab-mast { padding-bottom: 18px; border-bottom: 3px double var(--ink); text-align: center; }
.lab-mast__title { margin: 0; font-size: clamp(3.4rem, 14vw, 9.5rem); font-weight: 600; line-height: .9; letter-spacing: -.04em; text-align: center; }
.lab-mast__bar {
  margin-top: 16px; padding: 8px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
}
.lab-mast__bar p { margin: 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.lab-mast__sub { margin: 14px 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); font-style: italic; text-align: center; color: var(--ink-70); }

/* ── 2 · front page piece ── */
.lab-front { display: grid; gap: 18px 48px; padding: 36px 0 40px; border-bottom: 1px solid var(--ink); }
@media (min-width: 900px) { .lab-front { grid-template-columns: 7fr 5fr; align-items: end; } }
.lab-front__h { margin: 6px 0 0; font-size: clamp(2.2rem, 5.6vw, 4.6rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.lab-front__h a { text-decoration: none; }
.lab-front__lede { margin: 0 0 14px; max-width: var(--measure); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; }
.lab-more { font: 700 13px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ox) !important; }

/* ── 3 · the other pieces ── */
.lab-sec { padding: 32px 0 36px; border-bottom: 1px solid var(--ink); }
.lab-sec__h { margin: 0 0 18px; font: 700 13px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
/* any number of pieces (an issue can hold six or more): 1, 2 or 3 columns, a thin rule above each card */
.lab-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 0 32px; }
@media (min-width: 700px) { .lab-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .lab-cards { grid-template-columns: repeat(3, 1fr); } }
.lab-card { padding: 16px 0 22px; border-top: 1px solid var(--ink-15); min-width: 0; }
.lab-card h3 { margin: 6px 0 8px; font-size: 1.45rem; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.lab-card h3 a { text-decoration: none; }
.lab-card p { margin: 0; max-width: var(--measure); line-height: 1.5; color: var(--ink-70); }

/* ── 4 · The Premise Check (boxed) ── */
.lab-cols { display: grid; gap: 0 48px; }
@media (min-width: 900px) { .lab-cols { grid-template-columns: repeat(3, 1fr); } }
.lab-box { margin: 32px 0 0; padding: 20px 22px; border: 2px solid var(--ink); }
.lab-box__claim { margin: 8px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.lab-box__verdict { margin: 0; font: 700 14px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ox); }
.lab-box__src { margin: 10px 0 0; font-size: .92rem; line-height: 1.5; color: var(--slate); }

/* ── 5 · colophon, 6 · print edition, 7 · products ── */
.lab-colo { margin: 32px 0 0; }
.lab-colo ul { margin: 0; padding: 0; list-style: none; }
.lab-colo li { padding: 8px 0; border-top: 1px solid var(--ink-15); line-height: 1.45; }
.lab-print { margin: 32px 0 0; padding-top: 12px; border-top: 3px double var(--ink); }
.lab-print p { margin: 4px 0 0; line-height: 1.5; }
.lab-print__h { font-weight: 600; }
.lab-bridge { margin: 0; padding: 24px 0 0; max-width: var(--measure); font-size: 1.1rem; line-height: 1.55; }

/* ── strength labels: a dot plus the word, never colour alone ── */
.strength { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 700 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.strength svg { width: 10px; height: 10px; flex: none; }
.strength--strong svg { fill: var(--strong); }
.strength--medium svg { fill: var(--medium); }
.strength--weak svg { fill: var(--weak); }
.strength em { font-style: normal; font-weight: 400; color: var(--slate); }

/* ── a piece: /lab/<piece> ── */
.lab-piece { max-width: 760px; margin: 0 auto; }
.lab-piece__top { padding-bottom: 12px; border-bottom: 3px double var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.lab-piece__top a { text-decoration: none; font-weight: 700; }
.lab-piece__h { margin: 26px 0 8px; font-size: clamp(2.2rem, 6.4vw, 4rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.lab-piece__meta { margin-bottom: 26px; }
.lab-piece h2 { margin: 30px 0 8px; padding-top: 10px; border-top: 1px solid var(--ink); font: 700 13px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ox); }
.lab-piece p { margin: 0 0 14px; max-width: var(--measure); font-size: 1.1rem; line-height: 1.65; }
.lab-piece .own { padding-left: 14px; border-left: 2px solid var(--slate); }
.lab-q { margin: 0 0 14px; padding: 0 0 0 1.2em; max-width: var(--measure); }
.lab-q li { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.55; }
.lab-notes { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.lab-notes li { position: relative; margin: 0; padding: 10px 0 10px 2.2em; border-top: 1px solid var(--ink-15); font-size: .95rem; line-height: 1.5; counter-increment: n; }
.lab-notes li::before { content: counter(n); position: absolute; left: 0; top: 10px; font: 700 12px/1.6 var(--font-mono); color: var(--slate); }
.lab-notes .src { display: block; color: var(--ink); }
.lab-notes .src-meta { display: block; color: var(--slate); }
.lab-notes a { overflow-wrap: anywhere; }
.lab-notes .strength { margin-top: 4px; }
.lab-pass { margin: 30px 0 0; padding-top: 14px; border-top: 3px double var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lab-pass button {
  padding: 10px 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
  font: 700 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
}
.lab-pass button:hover { background: var(--ink); color: var(--paper); }
.lab-pass__ok { margin: 0; font: 400 12px var(--font-mono); letter-spacing: .1em; color: var(--slate); }
.lab-product { margin: 22px 0 0; }
.lab-box__txt { margin: 10px 0 12px; max-width: var(--measure); line-height: 1.55; }
.lab-box__notes li { font-size: .88rem; }
.lab-cols > * { min-width: 0; }
.strength { flex-wrap: wrap; white-space: normal; }

/* ═════════════ Motion and the three parts (05-11-2026) ═════════════
   A = Anomaly: Oxblood, a crack and a short flash.  R = Reframe: Slate Blue, a frame that turns.
   C = Create: Deep Moss, blocks that stack.  Colour is never the only signal: each part also has
   its own letter, shape and name. prefers-reduced-motion: everything is shown at rest (WCAG 2.3.3). */
.page-lab { --a: #4A0404; --r: #44586C; --c: #455A38; --ease: cubic-bezier(.16, 1, .3, 1); }

/* masthead: the letters drop in, the rules draw open, a slow ticker under the bar */
.lab-mast__title span { display: inline-block; animation: mastIn 1s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.lab-mast__title .sp { width: .28em; }
@keyframes mastIn { from { opacity: 0; transform: translateY(.45em) rotate(-4deg); filter: blur(6px); } }
.lab-mast__bar { animation: ruleIn 1.1s .35s var(--ease) both; transform-origin: 50% 50%; }
@keyframes ruleIn { from { transform: scaleX(0); opacity: 0; } }
.lab-ticker { margin-top: 14px; overflow: hidden; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.lab-ticker p { display: flex; width: max-content; margin: 0; padding: 7px 0; animation: tick 48s linear infinite; }
.lab-ticker span { padding: 0 28px; font: 400 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.lab-ticker span::before { content: "\25CF"; margin-right: 28px; color: var(--a); }
.lab-ticker:hover p { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* front page: the latest piece in three steps */
.tri { grid-column: 1 / -1; margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 760px) { .tri { grid-template-columns: repeat(3, 1fr); } }
.tri li { position: relative; padding: 18px 18px 18px 74px; min-height: 96px; border-top: 4px solid; background: rgb(255 255 255 / .22); }
.tri__a { border-color: var(--a) !important; } .tri__r { border-color: var(--r) !important; } .tri__c { border-color: var(--c) !important; }
.tri b { position: absolute; left: 16px; top: 8px; font-size: 3.6rem; font-weight: 600; line-height: 1; }
.tri__a b { color: var(--a); } .tri__r b { color: var(--r); } .tri__c b { color: var(--c); }
.tri__k { font: 700 11px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.tri p { margin: 4px 0 0; line-height: 1.45; }

/* a piece: the rail shows where you are (A, R or C) */
.arc-rail { position: sticky; top: 76px; z-index: 5; margin: 0 0 6px; padding: 8px 0; display: flex; gap: 8px; background: var(--paper); border-bottom: 1px solid var(--ink-15); }
.arc-rail a { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; text-decoration: none !important; font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.arc-rail b { display: grid; place-items: center; width: 26px; height: 26px; color: var(--paper); font-weight: 700; }
.arc-rail [data-rail="a"] b { background: var(--a); } .arc-rail [data-rail="r"] b { background: var(--r); } .arc-rail [data-rail="c"] b { background: var(--c); }
.arc-rail a.is-on { border-color: var(--ink); background: rgb(255 255 255 / .35); }
@media (max-width: 420px) { .arc-rail span { display: none; } .arc-rail a { padding-right: 4px; } }

/* the three parts */
.arc { position: relative; display: grid; grid-template-columns: 1fr; gap: 0 22px; margin: 22px 0 0; padding: 18px 18px 6px; border-left: 6px solid; }
@media (min-width: 640px) { .arc { grid-template-columns: 96px 1fr; padding: 22px 26px 8px 18px; } }
.arc--a { border-color: var(--a); background: rgb(74 4 4 / .06); }
.arc--r { border-color: var(--r); background: rgb(68 88 108 / .08); }
.arc--c { border-color: var(--c); background: rgb(69 90 56 / .08); }
.lab-piece .arc h2 { margin: 0 0 10px; padding: 0; border: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.arc__tag { display: grid; place-items: center; width: 24px; height: 24px; color: var(--paper); }
.arc--a .arc__tag { background: var(--a); } .arc--r .arc__tag { background: var(--r); } .arc--c .arc__tag { background: var(--c); }
.arc__mark { position: relative; width: 96px; height: 96px; display: none; }
@media (min-width: 640px) { .arc__mark { display: block; } }
.arc__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc__letter { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.6rem; font-weight: 600; line-height: 1; }
.arc--a .arc__letter { color: var(--a); } .arc--r .arc__letter { color: var(--r); } .arc--c .arc__letter { color: var(--c); }
.arc__crack { fill: none; stroke: var(--a); stroke-width: 3; stroke-dasharray: 140; stroke-dashoffset: 0; }
.arc__frame { fill: none; stroke: var(--r); stroke-width: 3; transform-origin: 50px 50px; }
.arc__block { fill: var(--c); opacity: .22; }
.lab-src-h { margin-top: 34px !important; }

/* motion, only when the part scrolls into view (lab.js adds .is-in) */
@media (prefers-reduced-motion: no-preference) {
  .js-lab [data-arc]:not(.is-in) { opacity: 0; transform: translateY(28px); }
  .js-lab [data-arc] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  /* A: a flash and a crack */
  .js-lab .arc--a.is-in { animation: flash .9s ease-out; }
  @keyframes flash { 0% { background: rgb(74 4 4 / .34); } 100% { background: rgb(74 4 4 / .06); } }
  .js-lab .arc--a.is-in .arc__crack { animation: crack .8s .15s steps(6) both; }
  @keyframes crack { from { stroke-dashoffset: 140; } }
  .js-lab .arc--a.is-in .arc__letter { animation: jolt .5s .1s both; }
  @keyframes jolt { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px) skewX(-8deg); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-2px, 1px) skewX(6deg); } }
  /* R: the picture turns */
  .js-lab .arc--r.is-in .arc__letter { animation: turn 1.1s .1s var(--ease) both; }
  @keyframes turn { from { transform: perspective(300px) rotateY(180deg); opacity: .2; } }
  .js-lab .arc--r.is-in .arc__frame { animation: spin 1.2s .1s var(--ease) both; }
  @keyframes spin { from { transform: rotate(-90deg) scale(.6); } }
  /* C: something gets built */
  .js-lab .arc--c.is-in .arc__block { animation: build .6s var(--ease) both; }
  .js-lab .arc--c.is-in .arc__block:nth-child(2) { animation-delay: .15s; }
  .js-lab .arc--c.is-in .arc__block:nth-child(3) { animation-delay: .3s; }
  @keyframes build { from { transform: translateY(40px); opacity: 0; } }
  .js-lab .arc--c.is-in .arc__letter { animation: rise .8s .35s var(--ease) both; }
  @keyframes rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  /* front page steps follow one after another */
  .js-lab .tri li:nth-child(2) { transition-delay: .15s; } .js-lab .tri li:nth-child(3) { transition-delay: .3s; }
  .js-lab .tri__a.is-in b { animation: jolt .5s .2s both; }
  .js-lab .tri__r.is-in b { animation: turn 1s .3s var(--ease) both; }
  .js-lab .tri__c.is-in b { animation: rise .8s .45s var(--ease) both; }
  .lab-card { transition: transform .4s var(--ease); } .lab-card:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .lab-mast__title span, .lab-mast__bar { animation: none; }
  .lab-ticker p { animation: none; flex-wrap: wrap; width: auto; }
}

/* EN / NL switch (only on pages that exist in both languages) */
.lab-lang { display: inline-flex; border: 1px solid var(--ink); text-decoration: none !important; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; }
.lab-lang b { padding: 6px 9px; color: var(--ink); }
.lab-lang b.is-on { background: var(--ink); color: var(--paper); }
.lab-lang:hover b:not(.is-on), .lab-lang:focus-visible b:not(.is-on) { color: var(--ox); }
.lab-mast__bar .lab-lang { margin-left: auto; }
.lab-piece__top .lab-lang { align-self: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* two layers: the short piece first, "Go deeper" opens the full piece and every source on the same page */
.lab-layer { margin: 22px 0 0; font: 700 12px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); }
.lab-deeper { margin: 30px 0 0; border-top: 3px double var(--ink); }
.lab-deeper > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px 0; }
.lab-deeper > summary::-webkit-details-marker { display: none; }
.lab-deeper__b { display: inline-flex; gap: 8px; padding: 12px 18px; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; transition: background .3s; }
.lab-deeper > summary:hover .lab-deeper__b, .lab-deeper > summary:focus-visible .lab-deeper__b { background: var(--ox); }
.lab-deeper__b span { display: inline-block; transition: transform .3s; }
.lab-deeper[open] .lab-deeper__b span { transform: rotate(180deg); }
.lab-deeper__s { font-size: .95rem; color: var(--ink-70); }