/* ═════ css/site.css ═════ */
/* RUNTIME COPY (2026-10-10): fonts switched to Michroma (display, nav, buttons, .idx, .tag — one weight) and Poppins
   (everything else; there is no mono face — "mono" below now means Poppins uppercase labels), and every font size,
   line height and spacing value made a whole px number: sizes and spacing come from the scales in tokens.css (--fs-*,
   --sp-*), stepped per breakpoint (desktop >= 1200 · laptop 901-1199 · tablet 600-900 · phone <= 599); rules set a
   line-height ratio in --lh and the universal rule under "base" rounds it to whole px. No clamp()/vw sizes; em appears
   only inside round() for units/marks set relative to a stepped figure (.num .unit = half the figure, on 8px steps).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   LABRA WEBSITE · "ACID CHROME" — one stylesheet shared by every page and by more-sections.html.
   Link it after the tokens:  <link rel="stylesheet" href="../../shared/tokens.css"><link rel="stylesheet" href="site.css">
   Colours, fonts, tracking come from tokens.css (--color-*, --font-*, --tracking-*) — never type a new hex.
   No gradients, no shadows, no rounded corners, no other hue than acid. Pages carry no <style> blocks.

   ── THE CLASS SYSTEM (build every page and library section from these) ─────────────────────────────────
   page frame
     .wrap                content column: 1312px max, side gutter var(--gut) (64px desktop → 16px phone)
     section.sec          a page section (128px vertical rhythm, 88px on phones). Add .tight (less padding),
                          .ruled (hairline on top), .flush-top (no top padding). Put a big object straight
                          inside the section as <img class="obj …"> and add .has-obj (position + clipping).
     .sec-head            section heading block: .idx label, then .h2, then optional .lead.
                          .sec-head.split = headline left, lead/actions right, aligned to the bottom.
     .idx                 section index label, mono: <span class="idx">02 <i>—</i> <b>The product</b></span>
                          (number muted, the name in acid). Use it on every section that has a headline.
   type
     .display             hero headline (largest; fluid, 2–3 lines of 1–2 words, uppercase by CSS)
     .h1                  inner-page headline (page-head), one step below .display
     .h2                  section headline        .h3  card/column/row title (display 800)
     .h4                  small display caps (plan names, list titles)
     .acid                the one accent phrase per section (also works on numbers/units/mono text)
     .lead                sans lead paragraph (muted, ~42ch)  .lead-mono = uppercase mono lead (hero/CTA)
     .label               mono uppercase meta text, muted; <b> inside turns acid. .label.ink = full white
     .muted .dim .ink     colour helpers        .mono = mono uppercase inline text
     .num + .unit         big display number with its unit in acid: <div class="num">8<span class="unit">ms</span></div>
   controls
     .btn .btn-primary    solid acid chip, black mono caps (ONE primary per view)  .btn-ghost = 1px outline
     .btn-sm              compact (nav, table rows)   .arrow = the → glyph   .ctas = row of buttons
     .chip                mono outline tag;  .chip.on = solid acid (one per view)
   structure / blocks
     .rule                1px hairline (div)          .grid-lines helpers: .cols / .col (vertical dividers)
     .cols.c2/.c3/.c4     feature columns divided by vertical hairlines, hairline on top. Each .col holds
                          .tag (mono acid "F/01"), .h3, <p>, optional .col-foot pinned to the bottom.
     .card                square hairline box (no fill);  .card.fill = surface fill;  .card.hl = acid top edge
     .rows > .row         data rows split by hairlines (schedule / venues / roles / changelog). Row cells:
                          .c-key (mono date/code) .c-name (display 800 title) .c-meta (mono) .c-stat (mono status,
                          add .acid for the live one) .c-act (button). Phone: cells restack automatically.
     .stats > .stat       stat cells in a hairline grid (.stats.s3 / .s4); .stat .num, .stat .k (mono caption);
                          .stat.is-acid = the ONE solid acid cell allowed per view.
     .track > .step       roadmap / how-it-works line: hairline track, square nodes (.step.on = solid acid).
     .plans > .plan       pricing columns (hairline boxes); .plan.hl = recommended (acid top edge + primary btn).
     .quote-block         testimonial: acid quote mark, display quote, hairline, mono name/role.
     .logos               client strip between hairlines (text wordmarks: .w-d display, .w-m mono, .w-s sans).
     .ph                  image/screenshot frame: <div class="ph" data-ph="screen"><img src="../../assets/images/…"
                          alt="…"><span class="hint">Screen</span></div>. Empty = on-palette grid + hint.
                          Shapes: .r16x9 .r4x3 .r1x1 .r4x5 .r9x16 (default 16:10). .ph-cap = caption row under it.
     .x                   acid crosshair "+" (max 3 per view). Absolutely placed: style="left:…;top:…" or the
                          corner helpers .x-tl .x-tr .x-bl .x-br (inside any position:relative box).
     .barcode             barcode stripe (decorative, aria-hidden). .spec = 2-line mono catalog/spec text.
     .meta-row            bottom row of a hero/CTA: barcode + .spec left, .spec right.
     .faq                 <details> list split by hairlines.     .field / .input = form controls (square).
   objects (.obj = the glass pebbles from assets/objects/labra-NN.webp)
     <img class="obj obj-… " src="../../assets/objects/labra-NN.webp" alt="" aria-hidden="true"> as a DIRECT
     child of a section.has-obj (or header.hero). Placement helpers (desktop size / phone size built in):
       .obj-hero   hero: huge, right, bleeding off the right edge; on phones it moves above the headline
       .obj-tr     top-right of a section, beside the headline (like the features reference)
       .obj-r      right, vertically centred, bleeding off the right edge
       .obj-l      left, vertically centred, bleeding off the left edge (quote / statement layouts)
       .obj-cta    big, centred-right above the CTA headline
     Phones: add .m-top to the section (it reserves an empty band above the content, height --m-pad, default
     300px) whenever the object would otherwise overlap the headline at 390px.
     Tune one instance with CSS vars on the img: style="--w:880px;--x:-140px;--y:40px" (desktop) and
     --mw/--mx/--my (phone). An object may cover the tail (last 1–2 letters) of a display headline, never body
     copy, labels, numbers or buttons. One object per section, never the same file twice on a page,
     many sections need none (tables, pricing, stats).
   nav / footer
     .nav (sticky chrome bar, hairline under): .logo wordmark, .nav-meta centre line, .nav-links, .end
     (phone <details class="menu"> + primary .btn-sm). aria-current="page" marks the current link (acid).
     footer.foot: .foot-cols (mono heads + links), .wordmark (giant LABRA), .legal (mono line).

   inner pages (blocks appended at the end of this file, one commented block per page — read their headers)
     shared: .page-head (+.short, .head-body, .head-stats) .split-layout > .side  .post-grid > .post  .who
     about: .manifesto .years/.year .team/.member .principles/.principle .cities/.city
     pricing: .bill .incl .ctable .addons/.addon .ent/.ent-list     case study: .story/.story-row .bars/.bar-row/.meter
              .gallery .credits .next-case     journal: .feat .byline .filter .ranked .nl/.nl-form
     article: .art-meta .article/.toc .prose (.intro .tag+h2 .pull .code .note) .author .banner
     contact: .form .opts .form-foot .reach .map-grid .ph.map/.pin .offices/.office .slots/.day/.slot .faq.c2

   Responsive: one breakpoint at 900px; every part keeps its phone rules in the @media block right after it,
   with the SAME selectors. Display sizes step per breakpoint (tokens.css, no clamp/vw) and are sized so the longest display line fits
   a 390px screen: keep display lines short (1–2 words) and break them with <br>.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

:root { --ink-2: rgba(237, 237, 237, .68); }   /* body copy: text colour at 68% (≈ #A9A9A9 on bg). Sizes, gutter, section padding: tokens.css */

/* ═════ base ═════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--color-bg); overflow-x: clip; scroll-padding-top: 80px; font-synthesis: none; }
/* whole-px line heights: every element rounds its --lh ratio x its own font size (rules set --lh, never a unitless line-height) */
*, *::before, *::after { line-height: round(nearest, calc(var(--lh) * 1em), 1px); }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-16); --lh: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, blockquote, figcaption, li, td, span, div { text-wrap: pretty; }
img { display: block; max-width: none; }
button, input, select, textarea { font-size: inherit; }   /* no UA 13.33px controls */
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.wrap { width: min(1312px, 100% - 2 * var(--gut)); margin-inline: auto; position: relative; }

/* ═════ type ═════ */
.display, .h1, .h2, .h3, .h4, .num { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; letter-spacing: var(--tracking-display); }
.display { font-size: var(--fs-display); --lh: 0.96; }
/* .display.long: a literal hero line of 9–12 characters ("Visuals that / follow the / music.") — one size step down so
   12 characters fit beside the hero object at 1440 and inside a 390px phone. 3 lines max. */
.display.long { font-size: var(--fs-32-128); --lh: 0.96; }
.h1 { font-size: var(--fs-h1); --lh: 0.96; }
.h2 { font-size: var(--fs-h2); --lh: 0.98; }
.h3 { font-size: var(--fs-h3); --lh: 1.15; font-weight: 400; letter-spacing: var(--tracking-heading); }
.h4 { font-size: var(--fs-h4); --lh: 1.15; font-weight: 400; letter-spacing: 0; }
.acid { color: var(--color-acid); }
.ink { color: var(--color-text); }
.muted { color: var(--color-muted); }
.dim { color: var(--color-dim); }
.lead { font-size: var(--fs-20); --lh: 1.5; color: var(--ink-2); max-width: 42ch; }
.lead-mono, .label, .mono { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.idx { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-nav); }
.lead-mono { font-size: var(--fs-14); --lh: 1.75; color: var(--color-muted); max-width: 44ch; }
.lead-mono b, .label b, .idx b { color: var(--color-acid); font-weight: 500; }
.label { display: inline-block; font-size: var(--fs-12); --lh: 1.5; color: var(--color-muted); }
.label.ink { color: var(--color-text); }
.mono { font-size: var(--fs-12); }
.idx { display: inline-block; font-size: var(--fs-12); --lh: 1; color: var(--color-muted); }
.idx i { font-style: normal; margin: 0 var(--sp-8); }
@media (max-width: 599px) { .idx { letter-spacing: var(--tracking-label); } }
p { color: var(--ink-2); }

/* big numbers: <div class="num">8<span class="unit">ms</span></div> */
.num { font-size: var(--fs-num); --lh: 0.96; white-space: nowrap; }
.num .unit { color: var(--color-acid); font-size: round(down, .5em, 8px); letter-spacing: 0; margin-left: var(--sp-4); }   /* half the figure, kept on the 8px steps of the type scale */

/* ═════ buttons & chips ═════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-12); height: 48px; padding: 0 var(--sp-24); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-14); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; white-space: nowrap; border-radius: var(--radius-none); transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--color-acid); color: var(--color-acid-ink); }
.btn-primary:hover { background: var(--color-text); }
.btn-ghost { border: 1px solid var(--color-line-strong); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-text); }
.btn-sm { height: 36px; padding: 0 var(--sp-16); font-size: var(--fs-12); gap: var(--sp-8); }
.arrow { font-family: var(--font-sans); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-12); border: 1px solid var(--color-line-strong); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); white-space: nowrap; }
.chip.on { background: var(--color-acid); border-color: var(--color-acid); color: var(--color-acid-ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
@media (max-width: 900px) {
  .btn { height: 46px; padding: 0 var(--sp-20); font-size: var(--fs-12); }
  .btn-sm { height: 34px; padding: 0 var(--sp-12); font-size: var(--fs-12); }
}

/* ═════ marks: crosshair, barcode, spec ═════ */
.x { position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2; }
.x::before, .x::after { content: ""; position: absolute; background: var(--color-acid); }
.x::before { left: 10px; top: 0; width: 2px; height: 22px; }
.x::after { top: 10px; left: 0; width: 22px; height: 2px; }
.x-tl { left: 0; top: 0; } .x-tr { right: 0; top: 0; } .x-bl { left: 0; bottom: 0; } .x-br { right: 0; bottom: 0; }
.barcode { display: inline-block; flex: none; width: 220px; height: 34px; background: repeating-linear-gradient(90deg, var(--color-text) 0 2px, transparent 2px 4px, var(--color-text) 4px 5px,
    transparent 5px 9px, var(--color-text) 9px 12px, transparent 12px 14px, var(--color-text) 14px 15px, transparent 15px 18px); }
.spec { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.55; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.spec.r { text-align: right; }
.meta-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-24); }
.meta-row .cat { display: flex; align-items: flex-end; gap: var(--sp-28); }
.rule { height: 1px; background: var(--color-line); }
@media (max-width: 900px) {
  .barcode { width: 96px; height: 28px; }
  .spec { font-size: var(--fs-12); }
  .meta-row { flex-direction: column; align-items: flex-start; gap: var(--sp-20); }
  .meta-row .cat { gap: var(--sp-16); }
  .spec { white-space: nowrap; }
  .spec.r { text-align: left; }
}

/* ═════ nav — chrome bar ═════ */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-bg); }
.nav .wrap { display: flex; align-items: center; gap: var(--sp-32); height: 80px; border-bottom: 1px solid var(--color-line); }
/* .logo: mono wordmark. Long names (≥ 11 characters incl. spaces, e.g. "Shard Supply Co.") add .long: tighter tracking,
   and on phones a smaller size with the ® dropped so the name never collides with Menu + the primary button at 390px.
   As a last resort the logo shrinks (min-width: 0) and clips instead of pushing the nav wider than the screen. */
.logo { display: inline-flex; align-items: flex-start; gap: var(--sp-8); min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-14); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-text); }
.logo sup { font-size: var(--fs-12); --lh: 1; color: var(--color-acid); }
.logo.long { letter-spacing: .1em; }
/* .nav-meta: a centred status line ("Drop 07 — Live"); it collides with 6 links — use it only on pages whose nav has ≤ 4 links */
.nav-meta { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.nav-meta b { color: var(--color-acid); font-weight: 500; }
.nav-links { display: flex; flex: 1; justify-content: flex-end; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-muted); }
.nav-links li + li::before { content: "·"; margin: 0 var(--sp-12); color: var(--color-dim); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-acid); }
.nav .end { display: flex; flex: none; align-items: center; gap: var(--sp-12); }
.nav .menu { display: none; position: relative; }
.nav .menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-12); height: 34px; padding: 0 var(--sp-12); border: 1px solid var(--color-line-strong); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-text); }
.nav .menu summary::-webkit-details-marker { display: none; }
.nav .menu summary::before { content: ""; width: 12px; height: 1px; background: var(--color-text); box-shadow: 0 -4px 0 var(--color-text), 0 4px 0 var(--color-text); }
.nav .menu ul { display: none; }
.nav .menu[open] ul { display: grid; position: absolute; right: 0; top: 46px; width: 260px; padding: var(--sp-8) var(--sp-20); background: var(--color-bg); border: 1px solid var(--color-line-strong); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; }
.nav .menu ul a { display: flex; justify-content: space-between; padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); color: var(--color-text); }
.nav .menu ul li:last-child a { border-bottom: 0; }
.nav .menu ul a[aria-current="page"] { color: var(--color-acid); }
.nav .menu ul a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; background: currentColor; align-self: center; }
@media (max-width: 1240px) { .nav-meta { display: none; } }
/* laptops and below: the six links (Michroma is wide) need ~1250px, so the Menu takes over under the desktop breakpoint */
@media (max-width: 1199px) {
  .nav-links { display: none; }
  .nav .wrap { justify-content: space-between; }
  .nav .menu { display: block; }
}
@media (max-width: 900px) {
  .nav .wrap { height: 64px; gap: var(--sp-12); }
  .logo { font-size: var(--fs-12); letter-spacing: var(--tracking-label); }
  .nav .menu summary { gap: var(--sp-8); padding: 0 var(--sp-8); letter-spacing: var(--tracking-label); }
  .nav .end .btn-sm { letter-spacing: var(--tracking-label); }
  .logo.long { font-size: var(--fs-12); letter-spacing: .06em; }
  .logo.long sup { display: none; }
}

/* ═════ sections & section heads ═════ */
.sec { position: relative; padding: var(--sec-pad) 0; }
.sec.tight { padding: var(--sp-88) 0; }
.sec.ruled { padding-top: var(--sp-64); }
.sec.ruled > .wrap { border-top: 1px solid var(--color-line); padding-top: var(--sp-64); }
.flush-top { padding-top: 0 !important; }
.has-obj { position: relative; overflow: clip; }
.has-obj > .wrap { z-index: 1; }
.sec-head { position: relative; margin-bottom: var(--sp-72); }
.sec-head .idx { display: block; margin-bottom: var(--sp-32); }
.sec-head .lead { margin-top: var(--sp-32); }
.sec-head.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-48); align-items: end; }
.sec-head.split .idx { grid-column: 1 / -1; margin-bottom: 0; }
.sec-head.split .lead { margin-top: 0; justify-self: end; }
/* Two more head styles, to break the split-head rhythm on long pages (never use the same style on 3 sections in a row):
   .sec-head.rail    full-width headline on ONE line (h2 ≤ 14 characters incl. spaces at 1440), then a mono rail between
                     hairlines: .idx left, .lead centre, a link/button right.
                     <div class="sec-head rail"><h2 class="h2">Finish the<br class="m"> <span class="acid">kit.</span></h2>
                     <div class="sec-rail"><span class="idx">…</span><p class="lead">…</p><a class="label" href="#">All <b>→</b></a></div></div>
                     br.m is a phone-only break: the line wraps on phones, so put the break before the acid word yourself.
   .sec-head.center  a centred head under a giant dim section number (.sec-no, decorative, aria-hidden):
                     <div class="sec-head center"><span class="sec-no" aria-hidden="true">20</span><span class="idx">…</span>
                     <h2 class="h2">…</h2><p class="lead">…</p></div>   — h2 lines ≤ 10 characters, lead ≤ 2 lines. */
.sec-head br.m { display: none; }
.sec-head.rail .h2 { white-space: nowrap; }
.sec-rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--sp-32); align-items: center; margin-top: var(--sp-40); padding: var(--sp-24) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.sec-head .sec-rail .idx { margin: 0; }
.sec-head .sec-rail .lead { margin: 0; max-width: 52ch; font-size: var(--fs-16); }
.sec-rail > :last-child { justify-self: end; }
.sec-head.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-head.center .sec-no { display: block; margin-bottom: var(--sp-28); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-96-224); --lh: 0.8; letter-spacing: var(--tracking-display); color: var(--color-dim); }
.sec-head.center .lead { align-self: center; }
@media (max-width: 900px) {
  .sec-head br.m { display: inline; }
  .sec-head.rail .h2 { white-space: normal; }
  .sec-rail { grid-template-columns: 1fr; gap: var(--sp-16); margin-top: var(--sp-24); padding: var(--sp-20) 0; }
  .sec-rail > :last-child { justify-self: start; }
  .sec-head .sec-rail .lead { font-size: var(--fs-16); }
  .sec-head.center .sec-no { margin-bottom: var(--sp-20); font-size: var(--fs-96); }
}
@media (max-width: 900px) {
  .sec.tight { padding: var(--sp-64) 0; }
  .sec.ruled { padding-top: var(--sp-40); }
  .sec.ruled > .wrap { padding-top: var(--sp-48); }
  .sec-head { margin-bottom: var(--sp-48); }
  .sec-head .idx { margin-bottom: var(--sp-24); }
  .sec-head .lead { margin-top: var(--sp-24); }
  .sec-head.split { grid-template-columns: 1fr; gap: var(--sp-24); }
  .sec-head.split .lead { justify-self: start; }
  .lead { font-size: var(--fs-16); }
}

/* ═════ objects ═════
   <img class="obj obj-tr" …> straight inside section.has-obj. Per-instance tuning: --w/--x/--y (desktop), --mw/--mx/--my (phone). */
.obj { position: absolute; z-index: 0; pointer-events: none; user-select: none; height: auto; }
/* .obj.front — a deliberate TUCK: the object paints over the tail (last 1–2 letters) of a display headline that carries
   class="tuck" (.display/.h1/.h2 tuck). Section text sits at z-index 1, so a plain .obj stays behind it; .front lifts the
   object to z-index 3, in front of the headline. Place it with scripts/tuck.py (gives --x/--y for the img); the checker
   then allows the overlap on the .tuck headline only — never over body copy, labels, numbers or buttons.
   (.obj-hero is already z-index 2 — in front of the hero/page-head text — so treat it as a tuck too, or keep it clear
   of the headline: see the page-head default below.) */
.obj.front { z-index: 3; }
.obj-hero { width: var(--w, 1000px); right: var(--x, -150px); top: var(--y, -40px); z-index: 2; }
.obj-tr   { width: var(--w, 620px); right: var(--x, -60px); top: var(--y, -10px); }
.obj-r    { width: var(--w, 760px); right: var(--x, -260px); top: 50%; transform: translateY(calc(-50% + var(--y, 0px))); }
.obj-l    { width: var(--w, 860px); left: var(--x, -300px); top: 50%; transform: translateY(calc(-50% + var(--y, 0px))); }
.obj-cta  { width: var(--w, 900px); right: var(--x, 0px); top: var(--y, -40px); }
/* laptops (901–1199px): the desktop placement may be retuned per instance with --lw/--lx/--ly (default: the desktop values) */
/* laptops (901–1199px): the desktop composition scaled to ~70% (type steps down about as much). An instance can be
   retuned with --lw/--lx/--ly. Object sizes and offsets are layout, not type or spacing: they may compute to fractions. */
@media (min-width: 901px) and (max-width: 1199px) {
  .obj-hero { width: var(--lw, calc(var(--w, 1000px) * .7)); right: var(--lx, calc(var(--x, -150px) * .7)); top: var(--ly, calc(var(--y, -40px) * .7)); }
  .obj-tr  { width: var(--lw, calc(var(--w, 620px) * .7)); right: var(--lx, calc(var(--x, -60px) * .7)); top: var(--ly, calc(var(--y, -10px) * .7)); }
  .obj-r   { width: var(--lw, calc(var(--w, 760px) * .7)); right: var(--lx, calc(var(--x, -260px) * .7)); }
  .obj-l   { width: var(--lw, calc(var(--w, 860px) * .7)); left: var(--lx, calc(var(--x, -300px) * .7)); }
  .obj-cta { width: var(--lw, calc(var(--w, 900px) * .7)); right: var(--lx, calc(var(--x, 0px) * .7)); top: var(--ly, calc(var(--y, -40px) * .7)); }
}
@media (max-width: 900px) {
  .obj-hero { width: var(--mw, 440px); right: var(--mx, -96px); top: var(--my, -60px); }
  .obj-tr   { width: var(--mw, 300px); right: var(--mx, -90px); top: var(--my, -20px); }
  .obj-r    { width: var(--mw, 340px); right: var(--mx, -120px); top: var(--my, 0px); transform: none; }
  .obj-l    { width: var(--mw, 380px); left: var(--mx, -150px); top: var(--my, 0px); transform: none; }
  .obj-cta  { width: var(--mw, 460px); right: var(--mx, -70px); top: var(--my, -10px); }
  /* .m-top on the section: on phones the object sits in an empty band above the content instead of beside it */
  .has-obj.m-top { padding-top: var(--m-pad, 300px); }
}

/* ═════ image frame (.ph) ═════ */
.ph { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background-color: var(--color-surface); background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; outline: 1px solid var(--color-line); outline-offset: -1px; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .hint { position: absolute; left: 18px; bottom: 16px; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ph .hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-12); background: var(--color-acid); vertical-align: 0; }
.ph:has(> img) { background-image: none; }
.ph:has(> img) .hint, .ph.map .hint, .ph:has(> .ini) .hint { display: none; }   /* drawn frames (map, initials) never show the hint */
.ph.r16x9 { aspect-ratio: 16 / 9; } .ph.r4x3 { aspect-ratio: 4 / 3; } .ph.r1x1 { aspect-ratio: 1; }
.ph.r4x5 { aspect-ratio: 4 / 5; } .ph.r9x16 { aspect-ratio: 9 / 16; }
.ph-cap { display: flex; justify-content: space-between; gap: var(--sp-24); padding-top: var(--sp-16); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ph-cap b { color: var(--color-text); font-weight: 500; }
@media (max-width: 900px) {
  .ph { background-size: 40px 40px; }
  .ph-cap { font-size: var(--fs-12); }
}

/* ═════ feature columns with vertical dividers ═════ */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* columns are as tall as the tallest one (no fixed min-height → no empty band under short copy). Give every column the
   same ending — a .col-foot with a button, a mono .label figure or a crosshair — so the bottoms read as one line. */
.col { display: flex; flex-direction: column; padding: var(--sp-48) var(--sp-40) 0; }
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; }
.col + .col { border-left: 1px solid var(--color-line); }
.tag { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-acid); margin-bottom: var(--sp-28); }
@media (min-width: 901px) and (max-width: 1199px) { .tag { letter-spacing: 0; } }   /* laptop columns are narrow */
.col .h3 { margin-bottom: var(--sp-20); }
.col p { font-size: var(--fs-16); max-width: 34ch; }
.col-foot { margin-top: auto; padding-top: var(--sp-48); position: relative; min-height: 96px; display: flex; align-items: flex-end; }
.col-foot .label { --lh: 1.6; }
@media (max-width: 900px) {
  .cols, .cols.c2, .cols.c4 { grid-template-columns: 1fr; }
  .col { padding: var(--sp-32) 0; min-height: 0; }
  .col + .col { border-left: 0; border-top: 1px solid var(--color-line); }
  .col-foot { padding-top: var(--sp-28); min-height: 50px; }
}

/* ═════ cards ═════ */
.card { position: relative; border: 1px solid var(--color-line); padding: var(--sp-32); display: flex; flex-direction: column; }
.card.fill { background: var(--color-surface); }
.card.hl { border-top: 2px solid var(--color-acid); }
.card p { font-size: var(--fs-16); margin-top: var(--sp-12); }
.grid2, .grid3, .grid4 { display: grid; gap: var(--sp-16); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .card { padding: var(--sp-24); }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
}

/* ═════ data rows (schedule / venues / roles) ═════
   <ul class="rows"><li class="row"><span class="c-key">03.11</span><span class="c-name h3">Berlin</span>
   <span class="c-meta">Halfmoon Club</span><span class="c-stat">Sold out</span><span class="c-act"><a class="btn btn-ghost btn-sm">…</a></span></li></ul> */
.rows { border-top: 1px solid var(--color-line); }
.row { display: grid; grid-template-columns: 128px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr) 170px; gap: var(--sp-24); align-items: center; min-height: 92px; padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); }
.row .c-key, .row .c-meta, .row .c-stat { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.row .c-meta { color: var(--ink-2); }
.row .c-stat.acid { color: var(--color-acid); }
.row .c-name { font-size: var(--fs-row); }
.row .c-act { justify-self: end; }
.row .c-act .btn { width: 170px; }
.rows-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-24); margin-top: var(--sp-56); }
@media (max-width: 900px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-16); min-height: 0; padding: var(--sp-24) 0; }
  .row .c-key { grid-column: 1; grid-row: 1; font-size: var(--fs-12); }
  .row .c-stat { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--fs-12); }
  .row .c-name { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-row); margin-top: var(--sp-8); }
  .row .c-meta { grid-column: 1; grid-row: 3; font-size: var(--fs-12); }
  .row .c-act { grid-column: 2; grid-row: 3; }
  .row .c-act .btn { width: auto; }
  .rows-foot { margin-top: var(--sp-40); }
}

/* ═════ stats ═════ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.stats.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-56); min-height: 270px; padding: var(--sp-32) var(--sp-28) var(--sp-32); }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--color-line); }
.stat .k { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); max-width: 24ch; }
.stat .k b { color: var(--color-text); font-weight: 500; }
.stat.is-acid { background: var(--color-acid); padding-left: var(--sp-28); }
.stat.is-acid .num, .stat.is-acid .num .unit, .stat.is-acid .k, .stat.is-acid .k b { color: var(--color-acid-ink); }
@media (max-width: 900px) {
  .stats, .stats.s3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 190px; gap: var(--sp-28); padding: var(--sp-24) var(--sp-16) var(--sp-24); }
  .stat:first-child { padding-left: 0; }
  .stat:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .stat.is-acid { padding-left: var(--sp-16); }
  .stat .k { font-size: var(--fs-12); }
  .stats.s3 .stat:last-child { grid-column: 1 / -1; }
}

/* ═════ track (how it works / roadmap) ═════ */
.track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.track.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: var(--color-acid); }
.step { position: relative; padding-right: var(--sp-40); }
.step .node { display: block; width: 22px; height: 22px; border: 1px solid var(--color-acid); background: var(--color-bg); margin-bottom: var(--sp-40); position: relative; top: 11px; }
.step.on .node { background: var(--color-acid); }
.step .tag { margin-bottom: var(--sp-20); }
.step .h3 { margin-bottom: var(--sp-16); }
.step p { font-size: var(--fs-16); max-width: 30ch; }
@media (max-width: 900px) {
  .track, .track.t3 { grid-template-columns: 1fr; gap: var(--sp-40); padding-left: var(--sp-48); }
  .track::before { left: 10px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .step { padding-right: 0; }
  .step .node { position: absolute; left: -44px; top: 0; margin: 0; }
}

/* ═════ pricing ═════ */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--sp-40) var(--sp-40) var(--sp-40); }
.plan:first-child { padding-left: 0; }
.plan:last-child { padding-right: 0; }
.plan + .plan { border-left: 1px solid var(--color-line); }
.plan.hl { background: var(--color-surface); padding-left: var(--sp-40); padding-right: var(--sp-40); box-shadow: inset 0 2px 0 var(--color-acid); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); min-height: 30px; }
.plan .price { display: flex; align-items: baseline; gap: var(--sp-12); margin: var(--sp-40) 0 var(--sp-12); }
.plan .price .num { font-size: var(--fs-48-72); }
.plan .price small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.plan > p { font-size: var(--fs-16); min-height: calc(1.55em * 2); }
.plan ul { margin: var(--sp-32) 0 var(--sp-40); display: grid; gap: var(--sp-12); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.plan li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-12); }
.plan .btn { margin-top: auto; width: 100%; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; border-bottom: 0; }
  .plan, .plan:first-child, .plan:last-child { padding: var(--sp-32) 0; border-bottom: 1px solid var(--color-line); }
  .plan + .plan { border-left: 0; }
  .plan.hl { padding: var(--sp-32) var(--sp-20); }
  .plan .price { margin-top: var(--sp-28); }
}

/* ═════ quote ═════ */
.quote-block { position: relative; max-width: 820px; margin-left: auto; }
.quote-block .qmark { display: block; width: 84px; height: 64px; margin-bottom: var(--sp-56); }   /* inline SVG, fill set on the path */
.quote-block blockquote { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24-48); --lh: 1.02; text-transform: uppercase; letter-spacing: var(--tracking-heading); color: var(--color-text); }
.quote-block figcaption { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-24); margin-top: var(--sp-56); padding-top: var(--sp-32); border-top: 1px solid var(--color-line); }
.quote-block figcaption .label { --lh: 1.8; }
/* .who — a person credited by NAME (testimonials, sign-offs, bylines): name in display caps over a mono role line.
   <span class="who"><span class="h4 name">Marta Kovač</span><span class="label">Role, Company</span></span>
   Never an initials tile or avatar in its place. Name ≤ 24 characters on one line. */
.who { display: grid; gap: var(--sp-8); }
.who .name { font-size: var(--fs-20-24); }
.who .label { --lh: 1.5; }
.quote-block .x { position: static; display: block; position: relative; flex: none; }
@media (max-width: 900px) {
  .quote-block .qmark { width: 60px; height: 46px; margin-bottom: var(--sp-32); }
  .quote-block figcaption { margin-top: var(--sp-40); padding-top: var(--sp-24); }
}

/* ═════ logos strip ═════ */
.logos { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.logos .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-32); min-height: 112px; }
.logos .label { flex: none; }
.logos ul { display: flex; flex: 1; justify-content: space-between; align-items: center; gap: var(--sp-28); color: var(--color-muted); }
.logos li { white-space: nowrap; }
.w-d { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-18); --lh: 1; text-transform: uppercase; letter-spacing: -.01em; }
.w-m { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-16); --lh: 1; text-transform: uppercase; letter-spacing: .18em; }
.w-s { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-20); --lh: 1; letter-spacing: -.03em; }
@media (max-width: 1100px) { .logos li:nth-child(n+6) { display: none; } }
@media (max-width: 900px) {
  .logos .wrap { flex-direction: column; align-items: flex-start; gap: var(--sp-24); padding: var(--sp-32) 0; }
  .logos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-16); width: 100%; }
  .logos li:nth-child(n+6) { display: block; }
  .w-d { font-size: var(--fs-12); } .w-m { font-size: var(--fs-12); } .w-s { font-size: var(--fs-16); }
}

/* ═════ faq & form controls (inner pages, library) ═════ */
.faq { border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); padding: var(--sp-28) 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-24); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-20); --lh: 1.4; color: var(--color-text); }   /* FAQ questions: Poppins, sentence case */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-24); --lh: 1; color: var(--color-acid); }
.faq details[open] summary::after { rotate: 45deg; }   /* + turns into × (animated in runtime.css) */
.faq p { margin-top: var(--sp-16); max-width: 64ch; }
.field { display: grid; gap: var(--sp-12); }
.field > span { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.input { width: 100%; height: 52px; padding: 0 var(--sp-16); background: transparent; border: 1px solid var(--color-line-strong); border-radius: 0; color: var(--color-text); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-16); --lh: 1.2; outline: none; }
textarea.input { height: 140px; padding: var(--sp-16) var(--sp-16); resize: vertical; }
.input:focus { border-color: var(--color-acid); }
@media (max-width: 900px) { .faq summary { font-size: var(--fs-18); } }

/* ═════════════════ HOME PAGE BLOCKS (index.html) ═════════════════ */

/* hero */
.hero { position: relative; overflow: clip; }
.hero .wrap { display: flex; flex-direction: column; min-height: calc(100svh - 80px); min-height: max(820px, calc(100svh - 80px)); padding: var(--sp-88) 0 var(--sp-48); }
.hero .display { position: relative; z-index: 1; }
.hero-body { display: grid; gap: var(--sp-40); margin-top: var(--sp-72); margin-bottom: var(--sp-72); max-width: 560px; }
.hero-body .lead-mono { max-width: 40ch; }
.hero-body .ctas { margin-top: 0; }
.hero .meta-row { margin-top: auto; }
.hero .x { position: absolute; }
@media (max-width: 900px) {
  .hero .wrap { min-height: 0; padding: 328px 0 var(--sp-32); }
  .hero-body { gap: var(--sp-28); margin-top: var(--sp-40); margin-bottom: var(--sp-56); }
  .hero .x:not(:last-of-type) { display: none; }   /* phones: only the bottom-right crosshair; the others would sit on the object */
}

/* showcase: big screen + spec rail.
   .spec-rail .v values never wrap by themselves (nowrap): a single token ("200+", "8 ms") or two short tokens per line,
   ≤ 10 characters per line (26px in the 288px rail; 18px in a ~170px phone cell). A longer value is split with <br>
   ("MIDI · OSC<br>DMX · NDI") — that keeps the checker's orphan test quiet and the rail even. */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; border-top: 1px solid var(--color-line); }
.showcase .ph { aspect-ratio: 16 / 10; }
.showcase .shot { padding: var(--sp-32) var(--sp-40) 0 0; border-right: 1px solid var(--color-line); }
.spec-rail { display: flex; flex-direction: column; }
.spec-rail > div { padding: var(--sp-28) 0 var(--sp-28) var(--sp-32); border-bottom: 1px solid var(--color-line); }
.spec-rail > div:last-child { border-bottom: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.spec-rail .k { display: block; margin-bottom: var(--sp-12); }
.spec-rail .v { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1.05; text-transform: uppercase; white-space: nowrap; }
.spec-rail .v .acid { font-size: var(--fs-16); letter-spacing: 0; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase .shot { padding: var(--sp-24) 0 0; border-right: 0; }
  .spec-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-32); border-top: 1px solid var(--color-line); }
  .spec-rail > div { padding: var(--sp-20) var(--sp-12) var(--sp-20) 0; }
  .spec-rail > div:nth-child(2n) { padding-left: var(--sp-16); border-left: 1px solid var(--color-line); }
  .spec-rail > div:last-child { display: block; }
  .spec-rail .v { font-size: var(--fs-18); }
}

/* cta */
.cta { position: relative; overflow: clip; }
.cta .wrap { display: flex; flex-direction: column; min-height: 960px; padding: 660px 0 var(--sp-56); }
.cta .ctas { margin-top: var(--sp-56); }
.cta .meta-row { margin-top: auto; padding-top: var(--sp-96); }
@media (max-width: 900px) {
  .cta .wrap { min-height: 0; padding: 328px 0 var(--sp-40); }
  .cta .ctas { margin-top: var(--sp-40); }
  .cta .meta-row { padding-top: var(--sp-64); }
}

/* footer */
.foot { border-top: 1px solid var(--color-line); padding: var(--sp-64) 0 var(--sp-40); overflow: clip; }
.foot-cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--sp-32); }
.foot-cols h4 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-24); }
.foot-cols ul { display: grid; gap: var(--sp-12); font-size: var(--fs-16); color: var(--ink-2); }
.foot-cols a:hover { color: var(--color-acid); }
.foot-cols p { font-size: var(--fs-16); max-width: 32ch; margin-top: var(--sp-20); }
.wordmark { display: block; margin: var(--sp-88) 0 var(--sp-40); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-80-288); --lh: 0.8; letter-spacing: -0.035em; text-transform: uppercase; color: var(--color-text); white-space: nowrap; }
.wordmark sup { font-size: var(--fs-24); vertical-align: top; position: relative; top: .1em; margin-left: var(--sp-8); letter-spacing: 0; color: var(--color-acid); }
/* .wordmark.long — brand names over 6 letters: the size is computed from the letter count so the word spans the column
   without spilling. Count letters + spaces into --chars: <span class="wordmark long" style="--chars:11">Shard Supply</span>
   (default 9). Over ~14 characters, use the short form of the name (or a monogram) instead. */
.wordmark.long { font-size: var(--fs-wordmark); letter-spacing: -.03em; }   /* stepped per breakpoint in tokens.css (sized for "Runtime 27") */
.legal { display: flex; justify-content: space-between; gap: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
@media (max-width: 900px) {
  .foot { padding: var(--sp-48) 0 var(--sp-28); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-16); }
  .foot-cols > div:first-child { grid-column: 1 / -1; }
  .wordmark { margin: var(--sp-56) 0 var(--sp-24); }
  .legal { flex-direction: column; gap: var(--sp-8); font-size: var(--fs-12); }
}

/* ═════════════════ INNER PAGES · SHARED (about, pricing, case-study, blog, article, contact) ═════════════════
   .page-head      opening screen of an inner page (shorter than the home hero): .idx, .h1 (2–3 lines ≤ 9 chars),
                   .head-body (lead + ctas/chips), optional .head-stats row, .meta-row at the bottom. One .obj-hero
                   may sit straight inside it; on phones the object gets a band above the text (--m-pad, 300px).
   .head-stats     4 key figures in a hairline row inside a page-head (case study) — .num + .label each.
   .split-layout   two columns 5/7: a sticky .side (head, notes) left, content right (faq, form, article).
   .post-grid > .post   journal cards: .ph (4:3), .post-meta (acid category + muted meta), .h3 title, <p> excerpt.
   .ph .ini        LEGACY — big initials in an empty frame. Do not use for people (owner rule: credit people by NAME in
                   display type — .who, .member .name, .ls-team-name, .ls-spk-name); kept only so old pages don't break. */
.page-head { position: relative; overflow: clip; }
.page-head .wrap { display: flex; flex-direction: column; min-height: 780px; padding: var(--sp-96) 0 var(--sp-48); }
.page-head .idx { margin-bottom: var(--sp-48); }
.page-head .h1 { position: relative; z-index: 1; }
/* page-head object default: bottom-right, BELOW the headline, so a 2-line .h1 (ends ~410px down) is never covered — the
   object's z-index is 2 (in front of the h1), so it must not touch the headline unless you mean a tuck (.h1.tuck + checker).
   Visible pebble top ≈ --y + 5–20% of --w. With a 3-line .h1 keep the last line ≤ 6 characters or raise --y to ≥ 520px.
   In this position the object owns the bottom-right corner: give the .meta-row only its left part (no .spec.r) and put
   crosshairs at the object's left edge (left:58–60%), not at right:var(--gut).
   Pages that tune the object set --w/--x/--y on the img and override this. */
.page-head .obj-hero { width: var(--w, 700px); right: var(--x, -180px); top: var(--y, 400px); }
@media (min-width: 901px) and (max-width: 1199px) {   /* laptops: see the object block above */
  .page-head .obj-hero { width: var(--lw, calc(var(--w, 700px) * .7)); right: var(--lx, calc(var(--x, -180px) * .7)); top: var(--ly, calc(var(--y, 400px) * .7)); }
}
.head-body { display: grid; gap: var(--sp-32); max-width: 560px; margin: var(--sp-64) 0 var(--sp-80); }
.head-body .lead { max-width: 40ch; }
.head-body .lead-mono { max-width: 42ch; }
.page-head .meta-row { margin-top: auto; }
.page-head .x { position: absolute; }
.head-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); margin: 0 0 var(--sp-64); }
.head-stats > div { padding: var(--sp-28) var(--sp-24) 0; }
.head-stats > div:first-child { padding-left: 0; }
.head-stats > div + div { border-left: 1px solid var(--color-line); }
.head-stats .num { font-size: var(--fs-40-64); }
.head-stats .label { display: block; margin-top: var(--sp-16); }
@media (max-width: 900px) {
  .page-head .wrap { min-height: 0; padding: var(--sp-56) 0 var(--sp-32); }
  .page-head:has(> .obj) .wrap { padding-top: var(--m-pad, 300px); }
  .page-head .obj-hero { width: var(--mw, 420px); right: var(--mx, -110px); top: var(--my, -40px); }
  .page-head .idx { margin-bottom: var(--sp-28); }
  .head-body { gap: var(--sp-28); margin: var(--sp-40) 0 var(--sp-56); }
  .page-head .x:not(:last-of-type) { display: none; }
  .head-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-48); }
  .head-stats > div { padding: var(--sp-20) var(--sp-16) var(--sp-24); }
  .head-stats > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .head-stats > div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .head-stats .label { font-size: var(--fs-12); margin-top: var(--sp-12); }
}

.split-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: start; }
.split-layout > .side { position: sticky; top: 120px; }
.split-layout > .side .h2 { margin-bottom: 0; font-size: var(--fs-side); }
.split-layout > .side .lead { margin-top: var(--sp-28); }
.split-layout > .side .ctas { margin-top: var(--sp-40); }
@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; gap: var(--sp-48); }
  .split-layout > .side { position: static; }
  .split-layout > .side .lead { margin-top: var(--sp-24); }
}

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-64) var(--sp-32); }
.post { display: flex; flex-direction: column; }
.post .ph { aspect-ratio: 4 / 3; }
.post-meta { display: flex; justify-content: space-between; gap: var(--sp-16); margin-top: var(--sp-24); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.post-meta > :first-child { color: var(--color-acid); }
.post .h3 { margin-top: var(--sp-20); font-size: var(--fs-20-24); --lh: 1.06; }
.post p { margin-top: var(--sp-16); font-size: var(--fs-16); max-width: 38ch; }
.post a:hover .h3, a.post:hover .h3 { color: var(--color-acid); }
@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr; gap: var(--sp-48); }
}

.ph .ini { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-48-72); --lh: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-muted); }
.ph:has(> img) .ini { display: none; }

/* ═════════════════ ABOUT PAGE (about.html) ═════════════════
   .manifesto      idx left, one big sans statement right (sentence case, one acid phrase), .sign row under it.
   .years > .year  story timeline rows: .y (display year), .h3, <p>, .tag; .year.now = the current year in acid.
   .team > .member type-only people grid (vertical hairlines): .tag, .h3.name (first<br>last in display caps), .label role,
                   <p> credential; optional .ph.r4x5 photo first (real photos only, never initials); .team-foot strip under it.
   .principles > .principle   2×2 hairline grid of values: .tag, bigger .h3, <p>.
   .cities > .city            5 studio cells with vertical hairlines: code .label, .h3 city, <p>, .spec at the bottom. */
.manifesto { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-48); }
.manifesto .statement { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-28-48); --lh: 1.16; letter-spacing: -.018em; color: var(--color-text); max-width: 30ch; }
.manifesto .sign { grid-column: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-24); margin-top: var(--sp-72); padding-top: var(--sp-28); border-top: 1px solid var(--color-line); }
@media (max-width: 900px) {
  .manifesto { grid-template-columns: 1fr; gap: var(--sp-28); }
  .manifesto .sign { grid-column: auto; flex-direction: column; align-items: flex-start; gap: var(--sp-20); margin-top: var(--sp-48); }
}

.years { border-top: 1px solid var(--color-line); }
.year { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1.25fr) 110px; gap: var(--sp-32); align-items: baseline; padding: var(--sp-40) 0; border-bottom: 1px solid var(--color-line); }
.year .y { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-40-64); --lh: 0.9; letter-spacing: var(--tracking-display); }
.year p { font-size: var(--fs-16); max-width: 46ch; }
.year .tag { margin: 0; justify-self: end; color: var(--color-muted); }
.year.now .tag { color: var(--color-acid); }
.year.now .y::after { content: ""; display: inline-block; width: .22em; height: .22em; margin-left: var(--sp-8); background: var(--color-acid); vertical-align: .05em; }
@media (max-width: 900px) {
  .year { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-16) var(--sp-16); padding: var(--sp-28) 0; }
  .year .y { grid-column: 1; grid-row: 1; }
  .year .tag { grid-column: 2; grid-row: 1; }
  .year .h3, .year p { grid-column: 1 / -1; }
  .year .h3 { margin-top: var(--sp-8); }
}

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.member { display: flex; flex-direction: column; min-height: 340px; padding: var(--sp-32) var(--sp-24) var(--sp-32); }
.member:first-child { padding-left: 0; }
.member:last-child { padding-right: 0; }
.member + .member { border-left: 1px solid var(--color-line); }
.member .ph { margin-bottom: var(--sp-24); }
.member .h3.name { margin-top: var(--sp-56); font-size: var(--fs-28-40); --lh: 0.96; font-weight: 400; letter-spacing: var(--tracking-display); }
.member .label { display: block; margin-top: var(--sp-20); }
.member p { font-size: var(--fs-16); margin-top: auto; padding-top: var(--sp-32); max-width: 30ch; }
.team-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); padding-top: var(--sp-28); border-top: 1px solid var(--color-line); }   /* closes the team grid */
@media (max-width: 900px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member, .member:first-child, .member:last-child { min-height: 0; padding: var(--sp-24) var(--sp-16) var(--sp-24); }
  .member:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .member:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .member .h3.name { margin-top: var(--sp-28); font-size: var(--fs-20); }
  .member .label { font-size: var(--fs-12); }
  .member p { font-size: var(--fs-14); }
  .team-foot { flex-direction: column; align-items: flex-start; }
}

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.principle { display: flex; flex-direction: column; min-height: 290px; padding: var(--sp-48) var(--sp-56) var(--sp-56) 0; border-bottom: 1px solid var(--color-line); }
.principle:nth-child(2n) { padding: var(--sp-48) 0 var(--sp-56) var(--sp-56); border-left: 1px solid var(--color-line); }
.principle .h3 { font-size: var(--fs-24-32); margin-bottom: var(--sp-20); }
.principle p { max-width: 42ch; }
@media (max-width: 900px) {
  .principles { grid-template-columns: 1fr; }
  .principle, .principle:nth-child(2n) { min-height: 0; padding: var(--sp-32) 0; border-left: 0; }
}

.cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.city { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: var(--sp-32) var(--sp-24) var(--sp-32); }
.city:first-child { padding-left: 0; }
.city:last-child { padding-right: 0; }
.city + .city { border-left: 1px solid var(--color-line); }
.city .top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); min-height: 30px; }
.city .h3 { margin-top: var(--sp-64); }
.city p { font-size: var(--fs-16); margin-top: var(--sp-16); }
.city .spec { margin-top: auto; padding-top: var(--sp-32); }
@media (max-width: 900px) {
  .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city, .city:first-child, .city:last-child { min-height: 0; padding: var(--sp-24) var(--sp-16) var(--sp-24); }
  .city:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .city:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .city:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
  .city .h3 { margin-top: var(--sp-28); font-size: var(--fs-20); }
  .city p { font-size: var(--fs-14); }
}

/* ═════════════════ PRICING PAGE (pricing.html) ═════════════════
   .bill           billing switch row above .plans: .label + .chips (one .chip.on).
   .incl           "in every plan" band: .h3 + <p> left, 2-column list of mono items with + marks right.
   .ctable         full comparison table: <thead> plan heads (.h4 + mono price), .grp rows (group title), feature rows;
                   cells hold mono values, .ck (yes square) or .no (dash). The recommended column carries .hl on every
                   cell (surface fill; acid edge on the head, acid squares). Values ≤ 6 characters so it fits 390px.
   .addons > .addon   add-on cards: .tag, .h3, <p>, .addon-price (display number + mono unit) at the bottom.
   .ent            enterprise block beside an .obj-r: lead, .ent-list (mono + items), .ctas, .meta-row. */
.bill { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-bottom: var(--sp-32); }
@media (max-width: 900px) { .bill { flex-direction: column; align-items: flex-start; gap: var(--sp-16); } }

.incl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-64); align-items: start; }
.incl .h3 { margin-top: var(--sp-28); }
.incl > div > p { margin-top: var(--sp-16); font-size: var(--fs-16); max-width: 32ch; }
.incl ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-40); border-top: 1px solid var(--color-line); }
.incl li { padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.incl li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-16); }
@media (max-width: 900px) {
  .incl { grid-template-columns: 1fr; gap: var(--sp-40); }
  .incl ul { grid-template-columns: 1fr; }
  .incl li { padding: var(--sp-16) 0; font-size: var(--fs-12); }
}

.ctable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ctable col.f { width: 37%; }
.ctable th, .ctable td { padding: var(--sp-20) var(--sp-24); border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: middle; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.ctable th:first-child, .ctable td:first-child { padding-left: 0; }
.ctable tbody td:first-child { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-16); --lh: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.ctable thead th { vertical-align: bottom; padding-top: var(--sp-28); padding-bottom: var(--sp-24); border-bottom-color: var(--color-line-strong); }
.ctable thead th .h4 { display: block; font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-label); }   /* tables are Poppins: plan / column names too */
.ctable thead th small { display: block; margin-top: var(--sp-12); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.ctable .grp th { padding-top: var(--sp-48); padding-bottom: var(--sp-16); color: var(--color-muted); font-size: var(--fs-12); }
.ctable .grp th b { color: var(--color-acid); font-weight: 500; margin-right: var(--sp-12); }
.ctable .hl { background: var(--color-surface); }
.ctable thead .hl { box-shadow: inset 0 2px 0 var(--color-acid); }
.ctable .ck { display: inline-block; width: 10px; height: 10px; background: var(--color-text); }
.ctable .hl .ck { background: var(--color-acid); }
.ctable .no { color: var(--color-dim); }
.ctable .hl.no { color: var(--color-muted); }
.ctable-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-top: var(--sp-40); }
@media (max-width: 900px) {
  .ctable col.f { width: 34%; }
  .ctable th, .ctable td { padding: var(--sp-16) var(--sp-4); font-size: var(--fs-12); letter-spacing: .04em; }
  .ctable tbody td:first-child { font-size: var(--fs-12); --lh: 1.35; padding-right: var(--sp-8); }
  .ctable thead th .h4 { font-size: var(--fs-12); letter-spacing: 0; }
  .ctable thead th small { font-size: var(--fs-12); letter-spacing: 0; }
  .ctable .grp th { padding-top: var(--sp-40); font-size: var(--fs-12); }
  .ctable .ck { width: 8px; height: 8px; }
  .ctable-foot { flex-direction: column; align-items: flex-start; }
}

.addons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
.addon { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: var(--sp-32) var(--sp-28) var(--sp-28); border: 1px solid var(--color-line); }
.addon .tag { margin-bottom: var(--sp-48); }
.addon .h3 { margin-bottom: var(--sp-16); font-size: var(--fs-20-24); }
.addon p { font-size: var(--fs-16); }
.addon-price { display: flex; align-items: baseline; gap: var(--sp-12); margin-top: auto; padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.addon-price .num { font-size: var(--fs-32-48); }
.addon-price small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.addon .x { right: 18px; top: 18px; }
@media (max-width: 900px) {
  .addons { grid-template-columns: 1fr; }
  .addon { min-height: 0; padding: var(--sp-28) var(--sp-24) var(--sp-24); }
  .addon .tag { margin-bottom: var(--sp-28); }
  .addon-price { margin-top: var(--sp-28); }
}

.ent { max-width: 660px; }
.ent .lead { margin-top: var(--sp-32); }
.ent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-32); margin-top: var(--sp-48); border-top: 1px solid var(--color-line); }
.ent-list li { padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.ent-list li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-12); }
.ent .ctas { margin-top: var(--sp-48); }
.ent .meta-row { margin-top: var(--sp-96); }
@media (max-width: 900px) {
  .ent .lead { margin-top: var(--sp-24); }
  .ent-list { grid-template-columns: 1fr; margin-top: var(--sp-40); }
  .ent-list li { padding: var(--sp-16) 0; font-size: var(--fs-12); }
  .ent .ctas { margin-top: var(--sp-40); }
  .ent .meta-row { margin-top: var(--sp-64); }
}
/* phones: crosshairs placed straight inside an object section would land on the object — hide them */
@media (max-width: 900px) { .sec.has-obj > .x { display: none; } }

/* ═════════════════ CASE STUDY PAGE (case-study.html) ═════════════════
   .story > .story-row   challenge / approach / result rows: .side (.tag + .h3) left, body right (<p class="big"> +
                         <p>, optional .facts mono list).
   .bars > .bar-row      before/after metric rows: .h3 name, two tracks (.meter > i, width via style="--v:40%"; .meter.was =
                         before, muted), .val delta in display. ONE row may be .on (acid fill + acid value).
   .gallery              2 image frames side by side (7/5): a 16:10 screen and a 4:5 phone/portrait, each with .ph-cap.
   .credits              4 hairline columns of mono heads + lists (client, rig, crew, software).
   .next-case            closing link to the next case: idx, big .h1 link, mono meta + button; pairs with an .obj-r. */
.story { border-top: 1px solid var(--color-line); }
.story-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-64); padding: var(--sp-56) 0; border-bottom: 1px solid var(--color-line); }
.story-row .tag { display: block; }
.story-row .h3 { font-size: var(--fs-24-32); }
.story-row .big { font-size: var(--fs-20-24); --lh: 1.45; color: var(--color-text); max-width: 46ch; }
.story-row .big + p { margin-top: var(--sp-20); max-width: 58ch; }
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-32); }
@media (max-width: 900px) {
  .story-row { grid-template-columns: 1fr; gap: var(--sp-20); padding: var(--sp-40) 0; }
  .story-row .big { font-size: var(--fs-20); }
  .facts { margin-top: var(--sp-24); }
}

.bars { border-top: 1px solid var(--color-line); }
.bar-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--sp-48); align-items: center; padding: var(--sp-40) 0; border-bottom: 1px solid var(--color-line); }
.bar-row .label { display: block; margin-top: var(--sp-12); }
.bar-row .tracks { display: grid; gap: var(--sp-16); }
.meter { position: relative; height: 14px; background: var(--color-bar); }
.meter > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 50%); background: var(--color-text); }
.meter.was > i { background: var(--color-muted); }
.meter-k { display: flex; justify-content: space-between; margin-bottom: var(--sp-8); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.meter-k b { color: var(--color-text); font-weight: 500; }
.bar-row .val { justify-self: end; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-32-48); --lh: 0.9; letter-spacing: var(--tracking-display); white-space: nowrap; }
.bar-row.on .meter:not(.was) > i { background: var(--color-acid); }
.bar-row.on .val { color: var(--color-acid); }
@media (max-width: 900px) {
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-20) var(--sp-16); padding: var(--sp-28) 0; }
  .bar-row .tracks { grid-column: 1 / -1; grid-row: 2; }
  .bar-row .val { grid-column: 2; grid-row: 1; align-self: start; font-size: var(--fs-32); }
}

.gallery { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-24); align-items: end; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr; gap: var(--sp-40); } }

.credits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.credits > div { padding: var(--sp-32) var(--sp-28) var(--sp-8); }
.credits > div:first-child { padding-left: 0; }
.credits > div + div { border-left: 1px solid var(--color-line); }
.credits h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-acid); margin-bottom: var(--sp-24); }
.credits li { padding: var(--sp-12) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.45; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.credits li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits > div { padding: var(--sp-24) var(--sp-16) var(--sp-8); }
  .credits > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .credits > div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .credits li { font-size: var(--fs-12); }
}

.next-case .h1 a:hover { color: var(--color-acid); }
.next-case .next-meta { display: flex; align-items: center; gap: var(--sp-32); margin-top: var(--sp-56); }
@media (max-width: 900px) { .next-case .next-meta { flex-direction: column; align-items: flex-start; gap: var(--sp-20); margin-top: var(--sp-40); } }

/* ═════════════════ JOURNAL INDEX (blog.html) ═════════════════
   .feat           featured post: big .ph left (7/12), text right: .post-meta, .feat-title (display, ≤ 4 lines), <p>,
                   .byline.who (author name in display caps + mono role/date), button.
   .filter         chip row above a .post-grid: .chips left (one .chip.on), mono count right.
   .ranked > li    "most read" list: big display rank, .h3 title + mono meta, arrow; hairlines between.
   .nl / .nl-form  newsletter block beside an .obj-r: headline, lead, inline email .input + primary button, small print. */
.feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-56); align-items: center; padding-top: var(--sp-40); border-top: 1px solid var(--color-line); }
.feat .post-meta { margin-top: 0; }
.feat-title { margin-top: var(--sp-28); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-28-48); --lh: 0.94; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.feat-title a:hover { color: var(--color-acid); }
.feat p { margin-top: var(--sp-24); max-width: 40ch; }
.byline { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.byline.who { display: grid; gap: var(--sp-8); }
.byline.who .name { color: var(--color-text); }   /* author credited by name: <div class="byline who"><span class="h4 name">…</span><span class="label">…</span></div> */
.byline b { color: var(--color-text); font-weight: 500; }
.feat .ctas { margin-top: var(--sp-32); }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; gap: var(--sp-28); padding-top: var(--sp-28); }
  .feat-title { margin-top: var(--sp-20); }
}

.filter { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-bottom: var(--sp-48); padding-bottom: var(--sp-28); border-bottom: 1px solid var(--color-line); }
@media (max-width: 900px) { .filter { flex-direction: column; align-items: flex-start; gap: var(--sp-20); margin-bottom: var(--sp-40); } }

.ranked { list-style: none; border-top: 1px solid var(--color-line); }
.ranked li { border-bottom: 1px solid var(--color-line); }
.ranked a { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--sp-24); align-items: center; padding: var(--sp-28) 0; }
.ranked .n { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-32-48); --lh: 0.9; letter-spacing: var(--tracking-display); color: var(--color-muted); }
.ranked li:first-child .n { color: var(--color-acid); }
.ranked .h3 { display: block; }
.ranked .label { display: block; margin-top: var(--sp-12); }
.ranked .go { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-18); --lh: 1; color: var(--color-muted); }
.ranked a:hover .h3, .ranked a:hover .go { color: var(--color-acid); }
@media (max-width: 900px) {
  .ranked a { grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-16); padding: var(--sp-24) 0; align-items: start; }
  .ranked .n { font-size: var(--fs-28); }
  .ranked .h3 { font-size: var(--fs-18); --lh: 1.1; }
  .ranked .label { font-size: var(--fs-12); }
  .ranked .go { display: none; }
}

.nl { max-width: 640px; }
.nl .lead { margin-top: var(--sp-28); }
.nl-form { display: flex; gap: 0; margin-top: var(--sp-48); max-width: 560px; }
.nl-form .input { flex: 1; min-width: 0; height: 56px; border-right: 0; }
.nl-form .btn { height: 56px; }
.nl .label { margin-top: var(--sp-20); }
@media (max-width: 900px) {
  .nl-form { flex-direction: column; gap: var(--sp-12); margin-top: var(--sp-32); }
  .nl-form .input { flex: none; border-right: 1px solid var(--color-line-strong); }
}

/* ═════════════════ ARTICLE (article.html) ═════════════════
   .page-head.short   compact head (no full-screen height) for articles: crumbs .idx, .h2-size title, .art-meta row.
   .art-meta          4 mono cells in a hairline row: author, date, read time, topic (each .label + value).
   .article           body grid: .toc rail (sticky, mono list, share chips) + .prose column.
   .prose             long-form typography: <p class="intro">, p, .tag + h2 (acid mono number, display title), h3 (display 800), ul/ol (acid markers),
                      blockquote.pull (display pull quote), figure (.ph + .ph-cap), pre.code (mono spec block; .k acid,
                      .c muted), .note (acid-edged callout).
   .author            author box, type-only: .idx + .h3.name (first<br>last, display caps) + .label role | bio, .cred figure, buttons.
   .banner            closing CTA column beside an .obj-r: .idx, .h2, .lead, .ctas (buttons stay left, off the object). */
.page-head.short .wrap { min-height: 0; padding-bottom: var(--sp-56); }
.page-head.short .h2 { position: relative; z-index: 1; }
.page-head.short .head-body { margin-bottom: 0; }
.art-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sp-88); border-top: 1px solid var(--color-line); }
.art-meta > div { padding: var(--sp-24) var(--sp-24) 0; }
.art-meta > div:first-child { padding-left: 0; }
.art-meta > div + div { border-left: 1px solid var(--color-line); }
.art-meta .label { display: block; }
.art-meta .v { display: block; margin-top: var(--sp-12); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
@media (max-width: 900px) {
  .page-head.short .wrap { padding-bottom: var(--sp-40); }
  .page-head.short .x { display: none; }
  .art-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-48); }
  .art-meta > div { padding: var(--sp-20) var(--sp-16) var(--sp-20); }
  .art-meta > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .art-meta > div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .art-meta .label { font-size: var(--fs-12); }
  .art-meta .v { font-size: var(--fs-12); }
}

.article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-64); align-items: start; }
.toc { position: sticky; top: 120px; }
.toc ol { margin-top: var(--sp-20); border-top: 1px solid var(--color-line); list-style: none; }
.toc li { border-bottom: 1px solid var(--color-line); }
.toc li a { display: flex; gap: var(--sp-12); padding: var(--sp-16) 0; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.toc li a b { color: var(--color-dim); font-weight: 400; }
.toc li a[aria-current="true"], .toc li a:hover { color: var(--color-acid); }
.toc .chips { margin-top: var(--sp-28); }
@media (max-width: 900px) {
  .article { grid-template-columns: 1fr; gap: var(--sp-40); }
  .toc { position: static; }
}

.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--sp-24); }
.prose p { font-size: var(--fs-18); --lh: 1.7; }
.prose .intro { font-size: var(--fs-20-24); --lh: 1.5; color: var(--color-text); }
.prose h2 { margin-top: var(--sp-72); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-28-40); --lh: 0.95; letter-spacing: var(--tracking-display); text-transform: uppercase; scroll-margin-top: 100px; }
.prose > .tag { display: block; margin: var(--sp-72) 0 0; }   /* mono acid number above an h2 */
.prose > .tag + h2 { margin-top: var(--sp-16); }
.prose h3 { margin-top: var(--sp-48); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-18-24); --lh: 1.1; letter-spacing: var(--tracking-heading); text-transform: uppercase; }
.prose h2 + p, .prose h3 + p { margin-top: var(--sp-20); }
.prose a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-acid); text-underline-offset: 3px; }
.prose ul, .prose ol { display: grid; gap: var(--sp-16); padding-left: 0; list-style: none; counter-reset: li; }
.prose li { position: relative; padding-left: var(--sp-40); font-size: var(--fs-18); --lh: 1.6; color: var(--ink-2); }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; background: var(--color-acid); }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1.4; color: var(--color-acid); }
.prose li b, .prose p b { color: var(--color-text); font-weight: 600; }
.prose blockquote.pull { margin: var(--sp-64) 0; padding: var(--sp-40) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24-32); --lh: 1.08; letter-spacing: var(--tracking-heading); text-transform: uppercase; color: var(--color-text); }
.prose blockquote.pull cite { display: block; margin-top: var(--sp-24); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); color: var(--color-muted); font-style: normal; }
.prose figure { margin: var(--sp-48) 0; }
.prose pre.code { margin: var(--sp-40) 0; padding: var(--sp-28) var(--sp-28) var(--sp-24); background: var(--color-surface); border: 1px solid var(--color-line); overflow-x: auto; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.75; color: var(--color-text); white-space: pre; }
.prose pre.code span { white-space: pre; }   /* the global text-wrap: pretty would re-enable wrapping inside <pre> */
.prose pre.code .k { color: var(--color-acid); }
.prose pre.code .c { color: var(--color-muted); }
.code-head { display: flex; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-20); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.prose .note { padding: var(--sp-24) var(--sp-28); border: 1px solid var(--color-line); box-shadow: inset 2px 0 0 var(--color-acid); }
.prose .note .label { display: block; margin-bottom: var(--sp-12); }
.prose .note p { font-size: var(--fs-16); }
@media (max-width: 900px) {
  .prose p, .prose li { font-size: var(--fs-16); }
  .prose .intro { font-size: var(--fs-20); }
  .prose h2 { margin-top: var(--sp-56); }
  .prose li { padding-left: var(--sp-32); }
  .prose blockquote.pull { margin: var(--sp-48) 0; padding: var(--sp-28) 0; font-size: var(--fs-20); }
  .prose pre.code { padding: var(--sp-20) var(--sp-16); font-size: var(--fs-12); }
  .prose .note { padding: var(--sp-20); }
}

.author { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-48); padding: var(--sp-40); border: 1px solid var(--color-line); }
.author .name { margin-top: var(--sp-24); font-size: var(--fs-author); --lh: 0.96; font-weight: 400; letter-spacing: var(--tracking-display); }
.author .label { display: block; margin-top: var(--sp-16); }
.author p { max-width: 52ch; font-size: var(--fs-16); }
.author .cred { display: flex; align-items: baseline; gap: var(--sp-20); margin-top: var(--sp-28); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.author .cred .num { font-size: var(--fs-32-48); }
.author .cred .label { margin-top: 0; }
.author .ctas { margin-top: var(--sp-28); }
@media (max-width: 900px) {
  .author { grid-template-columns: 1fr; gap: var(--sp-28); padding: var(--sp-24); }
  .author .name { margin-top: var(--sp-20); font-size: var(--fs-author); }
}

.banner { max-width: 760px; }
.banner .h2 { margin-top: var(--sp-32); }
.banner .lead { margin-top: var(--sp-28); }
.banner .ctas { margin-top: var(--sp-40); }
@media (max-width: 900px) { .banner .ctas { margin-top: var(--sp-32); } }
/* short multi-word display titles (cards, lists) balance their lines so no word is left alone */
.post .h3, .feat-title, .ranked .h3, .story-row .h3, .member .h3, .prose h2, .prose h3, .principle .h3, .addon .h3 { text-wrap: balance; }

/* ═════════════════ CONTACT PAGE (contact.html) ═════════════════
   .form           contact form grid (2 columns): .field > span + .input; .field.full spans both. select.input gets a mono
                   chevron. .opts = radio chips (<label><input type="radio"><span>…</span></label>, checked = acid).
                   .form-foot = consent .label + the primary submit button.
   .reach          mono key/value list under the form's side text (reply time, hours, languages).
   .map            designed map frame (.ph.map): hairline grid + .pin markers placed with style="left:x%;top:y%"
                   (.pin.l puts the label on the left, .pin.hq = acid label). Swap for a map image when one exists.
   .offices        office rows next to the map: .h3 city, <p> address, mono phone/hours.
   .slots > .day   demo booking grid: 5 day columns with hairlines; .slot buttons (mono outline), ONE .slot.on (acid).
   .faq.c2         FAQ in two columns of <details>. */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-28) var(--sp-24); }
.form .full { grid-column: 1 / -1; }
button.btn { border: 0; cursor: pointer; }   /* <button> elements: drop the UA border (ghost buttons get theirs back) */
button.btn-ghost { border: 1px solid var(--color-line-strong); }
select.input { appearance: none; -webkit-appearance: none; padding-right: var(--sp-48); cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-acid) 50%), linear-gradient(135deg, var(--color-acid) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select.input option { background: var(--color-surface); color: var(--color-text); }
.input::placeholder { color: var(--color-muted); }
.opts { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opts span { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-16); border: 1px solid var(--color-line-strong); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.opts input:checked + span { background: var(--color-acid); border-color: var(--color-acid); color: var(--color-acid-ink); }
.opts input:focus-visible + span { outline: 1px solid var(--color-acid); outline-offset: 2px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); padding-top: var(--sp-28); border-top: 1px solid var(--color-line); }
.form-foot .label { max-width: 40ch; }
.reach { margin-top: var(--sp-48); border-top: 1px solid var(--color-line); }
.reach div { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.reach b { color: var(--color-text); font-weight: 500; text-align: right; }
@media (max-width: 900px) {
  .form { grid-template-columns: 1fr; gap: var(--sp-24); }
  .form-foot { flex-direction: column; align-items: flex-start; }
  .reach { margin-top: var(--sp-40); }
  .reach div { font-size: var(--fs-12); }
}

.map-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-48); align-items: start; }
.ph.map { aspect-ratio: 4 / 3; background-size: 48px 48px; }
.pin { position: absolute; display: flex; align-items: center; gap: var(--sp-12); transform: translate(-6px, -50%); white-space: nowrap; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.pin::before { content: ""; flex: none; width: 12px; height: 12px; border: 1px solid var(--color-text); background: var(--color-bg); }
.pin.l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.pin > span { white-space: nowrap; text-wrap: nowrap; }   /* number + name kept on one line (the global span text-wrap would re-enable wrapping) */
.pin.hq { color: var(--color-acid); }
.pin.hq::before { background: var(--color-acid); border-color: var(--color-acid); }
.map .scale { position: absolute; right: 18px; bottom: 16px; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
/* drawn-map furniture (all optional, all inside .ph.map — no .hint in a drawn map):
   .pin.sub      context city: small dim dot + dim label (not one of yours) — 4–8 of them stop the grid looking empty
   svg.map-lines dashed links / routes: <svg class="map-lines" viewBox="0 0 100 75" preserveAspectRatio="none"> with
                 <path d="M x y L x y" vector-effect="non-scaling-stroke"/>; x = left %, y = top % × .75 (4:3 frame)
   .map-legend   key in the top-left corner: <div class="map-legend"><span><i class="k-hq"></i>HQ</span>
                 <span><i class="k-pin"></i>Studio</span><span><i class="k-sub"></i>City</span><span><i class="k-line"></i>Link</span></div>
                 (.map-legend.desk hides it on phones — use it when a pin label would run under the legend at 390px)
   .map-title    mono line in the top-right corner ("Studios — 5 cities")
   Place pins with an equirectangular projection: left% = (lon − lonMin) / (lonMax − lonMin) × 100,
   top% = (latMax − lat) / (latMax − latMin) × 100, and print the range in .scale. */
.pin.sub { gap: var(--sp-8); transform: translate(-3px, -50%); font-size: var(--fs-12); font-weight: 400; color: var(--color-muted); }
.pin.sub::before { width: 6px; height: 6px; border: 0; background: var(--color-dim); }
.pin.sub.l { transform: translate(calc(-100% + 3px), -50%); }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-lines path, .map-lines polyline { fill: none; stroke: var(--color-line-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.map-lines .solid { stroke: var(--color-text); stroke-dasharray: none; }
.map-lines .acid { stroke: var(--color-acid); stroke-dasharray: none; stroke-width: 2; }
.map-legend { position: absolute; left: 16px; top: 16px; display: grid; gap: var(--sp-8); padding: var(--sp-16) var(--sp-16); background: var(--color-bg); border: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.map-legend span { display: flex; align-items: center; gap: var(--sp-12); white-space: nowrap; }
.map-legend i { flex: none; display: block; width: 10px; height: 10px; }
.map-legend .k-hq { background: var(--color-acid); }
.map-legend .k-pin { border: 1px solid var(--color-text); }
.map-legend .k-sub { width: 6px; height: 6px; margin: 0 2px; background: var(--color-dim); }
.map-legend .k-line { width: 18px; height: 0; border-top: 1px dashed var(--color-line-strong); }
.map-legend .k-solid { width: 18px; height: 0; border-top: 1px solid var(--color-text); }
.map-title { position: absolute; right: 18px; top: 18px; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.map-title b { color: var(--color-text); font-weight: 500; }
.offices { border-top: 1px solid var(--color-line); }
.office { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-16); padding: var(--sp-24) 0; border-bottom: 1px solid var(--color-line); }
.office .h3 { font-size: var(--fs-20-24); }
.office p { grid-column: 1 / -1; font-size: var(--fs-16); }
.office .label { align-self: center; }
@media (max-width: 900px) {
  .map-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .ph.map { background-size: 32px 32px; }
  .pin { font-size: var(--fs-12); letter-spacing: 0; gap: var(--sp-8); transform: translate(-5px, -50%); }
  .pin::before { width: 10px; height: 10px; }
  .pin.l { transform: translate(calc(-100% + 5px), -50%); }
  .pin.sub { font-size: var(--fs-12); gap: var(--sp-4); transform: translate(-3px, -50%); }
  .pin.sub.l { transform: translate(calc(-100% + 3px), -50%); }
  .map-legend { left: 8px; top: 8px; gap: var(--sp-8); padding: var(--sp-8) var(--sp-8); font-size: var(--fs-12); }
  .map-legend span { gap: var(--sp-8); }
  .map-legend i { width: 8px; height: 8px; }
  .map-legend .k-line, .map-legend .k-solid { width: 14px; height: 0; }
  .map .scale { right: 8px; bottom: 8px; font-size: var(--fs-12); }
  .map-title { display: none; }
  .map-legend.desk { display: none; }   /* .desk: legend only on desktop (when phone pins would run under it) */
  .office { padding: var(--sp-20) 0; }
}

.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.day { padding: var(--sp-28) var(--sp-20) var(--sp-32); }
.day:first-child { padding-left: 0; }
.day:last-child { padding-right: 0; }
.day + .day { border-left: 1px solid var(--color-line); }
.day .h3 { margin: var(--sp-12) 0 var(--sp-24); }
.day ul { display: grid; gap: var(--sp-8); }
.slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border: 1px solid var(--color-line-strong); background: none; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); color: var(--color-text); cursor: pointer; }
.slot.on { background: var(--color-acid); border-color: var(--color-acid); color: var(--color-acid-ink); }
.slot:disabled { color: var(--color-muted); border-color: var(--color-line); text-decoration: line-through; cursor: default; }
.slots-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-top: var(--sp-40); }
@media (max-width: 900px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day, .day:first-child, .day:last-child { padding: var(--sp-24) var(--sp-12) var(--sp-24); }
  .day:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .day:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .day:last-child:nth-child(2n+1) { grid-column: 1 / -1; padding-right: 0; }
  .day:last-child:nth-child(2n+1) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slots-foot { flex-direction: column; align-items: flex-start; }
}

.faq.c2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-56); border-top: 0; }
.faq.c2 details:nth-child(-n+2) { border-top: 1px solid var(--color-line); }
@media (max-width: 900px) {
  .faq.c2 { grid-template-columns: 1fr; }
  .faq.c2 details:nth-child(2) { border-top: 0; }
}

/* ==========================================================================
   SECTION LIBRARY (more-sections.html) — every class prefixed .ls-
   ========================================================================== */
/* ═════════════════ SECTION LIBRARY BLOCKS (more-sections.html) ═════════════════
   Every class here starts with .ls- (library section) so it never collides with page classes. Built on the site.css system:
   tokens only, no gradients (the ruler ticks are hard-stop stripes like .barcode), no shadows, no radius, acid as the only hue.
   One breakpoint at 900px; each block keeps its phone rules right after it.
   People are always credited by NAME in display caps (hero-personal .ls-hp-name, team-names .ls-team-name, speaker-cards
   .ls-spk-name, quotes .who) — never an initials tile or a portrait stand-in; real photos go in optional .ph frames.
   speaker-cards (.ls-spk-*) and ticket-table (.rows.ls-tt .c-price) live at the END of this file (PEOPLE + TICKETS). */

/* ── hero-launch ── */
.ls-hl { position: relative; overflow: clip; border-bottom: 1px solid var(--color-line); }
.ls-hl > .wrap { padding-top: var(--sp-56); }
.ls-hl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-24); }
.ls-hl-new { display: inline-flex; align-items: center; gap: var(--sp-16); }
.ls-hl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--sp-48); align-items: end; margin-top: var(--sp-64); }
/* the headline column is ~880px wide at 1440, so the display size steps down here: ≤ 8 characters per line fit */
.ls-hl-head .display { font-size: var(--fs-48-128); --lh: 0.96; }
.ls-hl-side { display: grid; gap: var(--sp-32); padding-bottom: var(--sp-8); }
.ls-hl-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sp-72); border-top: 1px solid var(--color-line); }
.ls-hl-bar > div { display: grid; gap: var(--sp-12); padding: var(--sp-24) var(--sp-24) var(--sp-28); }
.ls-hl-bar > div:first-child { padding-left: 0; }
.ls-hl-bar > div + div { border-left: 1px solid var(--color-line); }
.ls-hl-bar b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1.05; text-transform: uppercase; letter-spacing: var(--tracking-heading); }
.ls-hl-shot { position: relative; height: 600px; margin-top: var(--sp-8); }
.ls-hl-shot .ph { position: absolute; inset: 0 0 auto 0; overflow: hidden; }
.ls-hl-shot { overflow: visible; clip-path: inset(-12px -12px 0 -12px); }
@media (max-width: 900px) {
  .ls-hl > .wrap { padding-top: var(--sp-32); }
  .ls-hl-top { flex-direction: column; gap: var(--sp-20); }
  .ls-hl-head { grid-template-columns: 1fr; gap: var(--sp-28); margin-top: var(--sp-48); }
  .ls-hl-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-48); }
  .ls-hl-bar > div { padding: var(--sp-20) var(--sp-12) var(--sp-20) 0; }
  .ls-hl-bar > div:nth-child(2n) { padding-left: var(--sp-16); }
  .ls-hl-bar > div:nth-child(2n+1) { border-left: 0; }
  .ls-hl-bar > div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .ls-hl-bar b { font-size: var(--fs-16); }
  .ls-hl-shot { height: 190px; }
}

/* ── hero-personal ── */
.ls-hp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-72); align-items: start; }
.ls-hp-card { position: relative; display: flex; flex-direction: column; min-height: 680px; padding: var(--sp-28) var(--sp-32) var(--sp-32); border: 1px solid var(--color-line); }
.ls-hp-card > .ph { margin: -28px -32px var(--sp-28); }
.ls-hp-card-top { display: flex; justify-content: space-between; gap: var(--sp-16); }
.ls-hp-name { margin-top: auto; padding-top: var(--sp-48); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-40-80); --lh: 0.96; text-transform: uppercase; letter-spacing: var(--tracking-display); }
.ls-hp-card > .label.ink { margin-top: var(--sp-24); }
.ls-hp-cred { margin-top: var(--sp-32); border-top: 1px solid var(--color-line); }
.ls-hp-cred li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-16); align-items: baseline; padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); }
.ls-hp-cred b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1; letter-spacing: var(--tracking-heading); }
.ls-hp-cred span { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-hp-card .x { top: 28px; right: 32px; }
.ls-hp-card-top .label:last-child { margin-right: var(--sp-48); }
.ls-hp-copy { display: flex; flex-direction: column; gap: var(--sp-40); padding-top: var(--sp-8); }
.ls-hp-copy .h1 { margin-top: -8px; font-size: var(--fs-40-96); }
.ls-hp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-hp-facts > div { display: grid; gap: var(--sp-16); padding: var(--sp-24) var(--sp-20); }
.ls-hp-facts > div:first-child { padding-left: 0; }
.ls-hp-facts > div + div { border-left: 1px solid var(--color-line); }
.ls-hp-facts .num { font-size: var(--fs-32-48); }
.ls-hp-copy .meta-row { margin-top: var(--sp-4); }
@media (max-width: 900px) {
  .ls-hp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .ls-hp-card { min-height: 0; padding: var(--sp-24) var(--sp-20) var(--sp-24); }
  .ls-hp-card > .ph { margin: -24px -20px var(--sp-24); }
  .ls-hp-name { padding-top: var(--sp-56); font-size: var(--fs-48); }
  .ls-hp-cred li { grid-template-columns: 84px minmax(0, 1fr); }
  .ls-hp-cred b { font-size: var(--fs-20); }
  .ls-hp-cred span { font-size: var(--fs-12); }
  .ls-hp-card .x { top: 22px; right: 20px; }
  .ls-hp-copy { gap: var(--sp-28); }
  .ls-hp-facts > div { padding: var(--sp-20) var(--sp-12); }
  .ls-hp-facts .num { font-size: var(--fs-28); }
}

/* ── hero-event ── */
.ls-he { position: relative; overflow: clip; }
.ls-he > .wrap { padding: var(--sp-64) 0 var(--sp-72); }
.ls-he-top { display: flex; justify-content: space-between; gap: var(--sp-24); padding-bottom: var(--sp-24); border-bottom: 1px solid var(--color-line); margin-bottom: var(--sp-72); max-width: 760px; }
.ls-he .display { position: relative; z-index: 1; }
.ls-he-next { display: grid; grid-template-columns: minmax(0, 1.2fr) auto auto; gap: var(--sp-48); align-items: end; margin-top: var(--sp-88); padding-top: var(--sp-32); border-top: 1px solid var(--color-line); }
.ls-he-show { display: grid; gap: var(--sp-12); }
.ls-he-count { display: flex; }
.ls-he-count > div { display: grid; gap: var(--sp-8); padding: 0 var(--sp-28); border-left: 1px solid var(--color-line); }
.ls-he-count b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-48); --lh: 0.9; letter-spacing: var(--tracking-display); }
.ls-he-count span { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-he-tick { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); position: relative; z-index: 1; background: var(--color-bg); }
.ls-he-tick ul { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ls-he-tick li { display: grid; gap: var(--sp-8); padding: var(--sp-24) 0 var(--sp-24) var(--sp-20); }
.ls-he-tick li:first-child { padding-left: 0; }
.ls-he-tick li + li { border-left: 1px solid var(--color-line); }
.ls-he-tick span { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.ls-he-tick b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-16); --lh: 1; text-transform: uppercase; letter-spacing: var(--tracking-heading); }
.ls-he-tick li.on span { color: var(--color-acid); }
@media (min-width: 901px) and (max-width: 1199px) {   /* laptops: when/where + figures on one row, buttons under them */
  .ls-he-next { grid-template-columns: minmax(0, 1fr) auto; }
  .ls-he-next .ctas { grid-column: 1 / -1; }
  .sec-head.split { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .ls-he-tick ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ls-he-tick li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .ls-he-tick li:nth-child(n+5) { border-top: 1px solid var(--color-line); }
}
@media (max-width: 900px) {
  .ls-he > .wrap { padding: 0 0 var(--sp-48); }
  .ls-he-top { flex-direction: column; gap: var(--sp-12); margin-bottom: var(--sp-40); }
  .ls-he-next { grid-template-columns: 1fr; gap: var(--sp-28); margin-top: var(--sp-48); }
  .ls-he-count > div { padding: 0 var(--sp-24); }
  .ls-he-count > div:first-child { padding-left: 0; border-left: 0; }
  .ls-he-count b { font-size: var(--fs-40); }
  .ls-he-tick ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-he-tick li, .ls-he-tick li:first-child { padding: var(--sp-16) 0 var(--sp-16) var(--sp-16); }
  .ls-he-tick li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .ls-he-tick li:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .ls-he-tick b { font-size: var(--fs-16); }
  .ls-he .x { display: none; }
}

/* ── stats-band ── */
.ls-sb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: end; padding-bottom: var(--sp-56); }
.ls-sb-big { display: grid; gap: var(--sp-28); }
.ls-sb-big .num { font-size: var(--fs-96-192); --lh: 0.8; }
.ls-sb-chart { position: relative; }
.ls-sb-bars { display: flex; align-items: flex-end; gap: var(--sp-12); height: 300px; padding-top: var(--sp-32); }
.ls-sb-bars i { position: relative; flex: 1; height: var(--h); background: var(--color-bar); }
.ls-sb-bars i.on { background: var(--color-acid); }
.ls-sb-bars .tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-acid); }
.ls-sb-axis { display: flex; justify-content: space-between; padding-top: var(--sp-16); border-top: 1px solid var(--color-line); margin-top: 0; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-sb-row .stat { min-height: 200px; }
@media (max-width: 900px) {
  .ls-sb { grid-template-columns: 1fr; gap: var(--sp-40); padding-bottom: var(--sp-40); }
  .ls-sb-big .num { font-size: var(--fs-112); }
  .ls-sb-bars { gap: var(--sp-8); height: 190px; }
  .ls-sb-row .stat { min-height: 150px; }
}

/* ── logo-strip ── */
.ls-strip { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-strip ul { display: grid; grid-template-columns: 1.2fr repeat(6, minmax(0, 1fr)); }
.ls-strip li { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-24); min-height: 128px; padding: var(--sp-20) var(--sp-20); color: var(--color-muted); }
.ls-strip li:first-child { padding-left: 0; }
.ls-strip li + li { border-left: 1px solid var(--color-line); }
.ls-strip li .mono { font-size: var(--fs-12); color: var(--color-dim); }
.ls-strip li b { font-weight: inherit; white-space: nowrap; color: var(--color-text); }
.ls-strip .w-d { font-size: var(--fs-16); } .ls-strip .w-m { font-size: var(--fs-12); } .ls-strip .w-s { font-size: var(--fs-20); }
@media (max-width: 900px) {
  .ls-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-strip li { min-height: 96px; padding: var(--sp-16) 0 var(--sp-16) var(--sp-16); }
  .ls-strip li.ls-strip-k { grid-column: 1 / -1; min-height: 0; flex-direction: row; padding-left: 0; border-bottom: 1px solid var(--color-line); }
  .ls-strip li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .ls-strip li:nth-child(n+4) { border-top: 1px solid var(--color-line); }
  .ls-strip .w-d { font-size: var(--fs-12); } .ls-strip .w-m { font-size: var(--fs-12); } .ls-strip .w-s { font-size: var(--fs-16); }
}

/* ── logo-grid ── */
.ls-lg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.ls-lg > div { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-20); min-height: 168px; padding: var(--sp-24); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); color: var(--color-text); }
.ls-lg > div .mono { color: var(--color-muted); font-size: var(--fs-12); }
.ls-lg > div b { font-weight: inherit; }
.ls-lg .w-d { font-size: var(--fs-18); } .ls-lg .w-m { font-size: var(--fs-14); } .ls-lg .w-s { font-size: var(--fs-24); }
.ls-lg .ls-lg-count { grid-column: span 2; grid-row: span 2; background: var(--color-surface); padding: var(--sp-32); }
.ls-lg-count .num { font-size: var(--fs-80-128); }
.ls-lg-count .num .unit { font-size: round(down, .4em, 8px); }   /* stays under the 56px acid-display size: the h2 keeps the section's acid phrase */
.ls-lg-count p { margin-top: var(--sp-20); max-width: 34ch; font-size: var(--fs-16); }
.ls-lg .x-br { right: 14px; bottom: 14px; }
@media (max-width: 900px) {
  .ls-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-lg > div { min-height: 118px; padding: var(--sp-16) var(--sp-16); }
  .ls-lg .ls-lg-count { grid-row: auto; padding: var(--sp-24) var(--sp-16); min-height: 0; }
  .ls-lg-count .num { font-size: var(--fs-72); }
  .ls-lg .w-d { font-size: var(--fs-12); } .ls-lg .w-m { font-size: var(--fs-12); } .ls-lg .w-s { font-size: var(--fs-16); }
}

/* ── quote-big ── */
.ls-qb blockquote { margin-top: var(--sp-40); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-28-72); --lh: 0.95; text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-text); max-width: 15em; }
.ls-qb-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-32); align-items: center; margin-top: var(--sp-64); padding-top: var(--sp-28); border-top: 1px solid var(--color-line); }
.ls-qb-foot .label { --lh: 1.8; }
.ls-qb-fig { display: grid; gap: var(--sp-8); padding: 0 var(--sp-32); border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line); }
.ls-qb-fig b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-40); --lh: 0.9; text-transform: uppercase; letter-spacing: var(--tracking-display); white-space: nowrap; }
@media (max-width: 900px) {
  .ls-qb blockquote { margin-top: var(--sp-28); }
  .ls-qb-foot { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20) var(--sp-16); margin-top: var(--sp-40); }
  .ls-qb-fig { grid-column: 1 / -1; padding: var(--sp-16) 0; border: 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); grid-template-columns: 1fr auto; align-items: center; }
  .ls-qb-foot .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ── quotes-3 ── */
.ls-q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-q3 figure { display: flex; flex-direction: column; gap: var(--sp-32); padding: var(--sp-40) var(--sp-40) var(--sp-40); min-height: 440px; }
.ls-q3 figure:first-child { padding-left: 0; }
.ls-q3 figure:last-child { padding-right: 0; }
.ls-q3 figure + figure { border-left: 1px solid var(--color-line); }
.ls-q3 figure.on { background: var(--color-surface); padding-left: var(--sp-40); padding-right: var(--sp-40); }
.ls-q3-m { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-40-64); --lh: 0.9; text-transform: uppercase; letter-spacing: var(--tracking-display); }
.ls-q3-m .acid { font-size: round(down, .55em, 8px); letter-spacing: 0; margin-left: var(--sp-4); }
.ls-q3 blockquote { font-size: var(--fs-20); --lh: 1.45; color: var(--color-text); }
.ls-q3 figcaption { margin-top: auto; }   /* .who: name in display caps + mono role */
@media (max-width: 900px) {
  .ls-q3 { grid-template-columns: 1fr; border-bottom: 0; }
  .ls-q3 figure, .ls-q3 figure:first-child, .ls-q3 figure:last-child { padding: var(--sp-32) 0; min-height: 0; gap: var(--sp-24); border-bottom: 1px solid var(--color-line); }
  .ls-q3 figure + figure { border-left: 0; }
  .ls-q3 figure.on { padding: var(--sp-32) var(--sp-20); }
  .ls-q3 blockquote { font-size: var(--fs-18); }
}

/* ── bento-product: a hairline grid (1px gaps over the line colour) ── */
.ls-bp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.ls-bp > div { background: var(--color-bg); padding: var(--sp-32); display: flex; flex-direction: column; min-width: 0; }
.ls-bp .tag { margin-bottom: var(--sp-20); }
.ls-bp .h3 { margin-bottom: var(--sp-16); }
.ls-bp-screen { grid-column: span 8; grid-row: span 2; }
.ls-bp-screen .ph { margin-top: auto; }
.ls-bp-screen .h3 { margin-bottom: var(--sp-32); }
.ls-bp-stat, .ls-bp-in { grid-column: span 4; }
.ls-bp-stat .num { margin: var(--sp-8) 0 var(--sp-28); }
.ls-bp-meter { height: 8px; background: var(--color-bar); margin-bottom: var(--sp-20); }
.ls-bp-meter i { display: block; height: 100%; background: var(--color-acid); }
.ls-bp-stat p { font-size: var(--fs-12); --lh: 1.6; margin-top: auto; }
.ls-bp-in .chips { margin-top: auto; padding-top: var(--sp-24); }
.ls-bp-wave { grid-column: span 5; }
.ls-bp-bars { display: flex; align-items: flex-end; gap: var(--sp-8); height: 140px; margin-top: auto; padding-top: var(--sp-24); }
.ls-bp-bars i { flex: 1; height: var(--h); background: var(--color-bar); }
.ls-bp-bars i.on { background: var(--color-acid); }
.ls-bp-remote { grid-column: span 7; display: grid !important; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--sp-32); padding-bottom: 0 !important; overflow: hidden; }
.ls-bp-remote p { font-size: var(--fs-16); padding-bottom: var(--sp-32); }
.ls-bp-remote .ph { aspect-ratio: auto; height: 250px; align-self: end; }
.ls-bp-remote .ph img { object-position: 50% 0; }
@media (max-width: 900px) {
  .ls-bp { grid-template-columns: 1fr; }
  .ls-bp > div { padding: var(--sp-24) var(--sp-20); grid-column: auto !important; grid-row: auto !important; }
  .ls-bp-screen .h3 { margin-bottom: var(--sp-24); }
  .ls-bp-bars { height: 100px; gap: var(--sp-4); }
  .ls-bp-remote { grid-template-columns: minmax(0, 1fr) 120px; gap: var(--sp-16); }
  .ls-bp-remote p { font-size: var(--fs-16); padding-bottom: var(--sp-24); }
  .ls-bp-remote .ph { height: 210px; }
}

/* ── bento-4 ── */
.ls-b4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.ls-b4-cell { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 400px; padding: var(--sp-40); background: var(--color-bg); }
.ls-b4-cell .tag { margin-bottom: 0; }
.ls-b4-art { width: 240px; height: 120px; margin: var(--sp-40) 0 auto; }
.ls-b4-cell .h3 { margin: var(--sp-48) 0 var(--sp-16); }
.ls-b4-cell p { font-size: var(--fs-16); max-width: 36ch; position: relative; }
.ls-b4-obj .h3 { margin-top: auto; }
.ls-b4-obj .obj { width: 420px; right: -90px; top: -110px; }
@media (max-width: 900px) {
  .ls-b4 { grid-template-columns: 1fr; }
  .ls-b4-cell { min-height: 0; padding: var(--sp-24) var(--sp-20) var(--sp-28); }
  .ls-b4-art { width: 200px; height: 100px; margin-top: var(--sp-28); }
  .ls-b4-cell .h3 { margin-top: var(--sp-32); }
  .ls-b4-obj { padding-top: 200px; }
  .ls-b4-obj .obj { width: 280px; right: -50px; top: -60px; }
}

/* ── integrations ── */
.ls-int-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.ls-int-grid > div { position: relative; display: flex; flex-direction: column; gap: var(--sp-8); min-height: 176px; padding: var(--sp-24); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-int-grid b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1; text-transform: uppercase; letter-spacing: var(--tracking-heading); margin-bottom: var(--sp-4); }
.ls-int-grid span { font-size: var(--fs-16); --lh: 1.4; color: var(--ink-2); }
.ls-int-grid em { margin-top: auto; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; font-style: normal; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-int-grid .new { box-shadow: inset 0 2px 0 var(--color-acid); }
.ls-int-grid .new .chip { position: absolute; top: 18px; right: 18px; height: 24px; padding: 0 var(--sp-8); font-size: var(--fs-12); color: var(--color-acid-ink); }
@media (max-width: 900px) {
  .ls-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-int-grid > div { min-height: 136px; padding: var(--sp-16) var(--sp-16); }
  .ls-int-grid b { font-size: var(--fs-18); }
  .ls-int-grid span { font-size: var(--fs-14); }
  .ls-int-grid em { font-size: var(--fs-12); }
}

/* ── comparison ── */
.ls-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ls-cmp th, .ls-cmp td { text-align: left; vertical-align: middle; padding: var(--sp-24) var(--sp-28); border-bottom: 1px solid var(--color-line); }
.ls-cmp th:first-child, .ls-cmp td:first-child { padding-left: 0; width: 34%; }
.ls-cmp thead th { border-top: 1px solid var(--color-line); padding-top: var(--sp-28); padding-bottom: var(--sp-28); vertical-align: bottom; }
.ls-cmp thead small { display: block; margin-top: var(--sp-12); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-cmp td { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-cmp td:first-child { color: var(--color-text); }
.ls-cmp td b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1; letter-spacing: var(--tracking-heading); color: var(--color-muted); margin-right: var(--sp-8); }
.ls-cmp .hl { background: var(--color-surface); color: var(--color-text); }
.ls-cmp thead .hl { box-shadow: inset 0 2px 0 var(--color-acid); }
.ls-cmp td.hl b { color: var(--color-acid); }
@media (max-width: 900px) {
  .ls-cmp th, .ls-cmp td { padding: var(--sp-16) var(--sp-12); }
  .ls-cmp th:first-child, .ls-cmp td:first-child { width: 32%; padding-right: var(--sp-8); }
  .ls-cmp td { font-size: var(--fs-12); }
  .ls-cmp td b { display: block; font-size: var(--fs-18); margin: 0 0 var(--sp-4); }
  .ls-cmp thead .h4 { font-size: var(--fs-16); }
  .ls-cmp thead small { font-size: var(--fs-12); }
}

/* ── pricing-columns ── */
.ls-pc { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); }
.ls-pc-col { display: grid; grid-template-rows: 250px repeat(6, 64px) 112px; }
.ls-pc-col > div { display: flex; align-items: center; padding: 0 var(--sp-28); border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.ls-pc-col + .ls-pc-col { border-left: 1px solid var(--color-line); }
.ls-pc-keys > div { padding-left: 0; color: var(--color-muted); }
.ls-pc .ls-pc-top { color: var(--color-text); flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--sp-16); padding-bottom: var(--sp-28); position: relative; }
.ls-pc-top .chip { position: absolute; top: 28px; left: 28px; }
.ls-pc .price { display: flex; flex-direction: column; gap: var(--sp-12); color: var(--color-text); }
.ls-pc .price .num { font-size: var(--fs-40-56); }
.ls-pc .price small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-pc .yes { color: var(--color-acid); }
.ls-pc .no { color: var(--color-dim); }
.ls-pc .ls-pc-act { border-bottom: 0; }
.ls-pc-act .btn { width: 100%; }
.ls-pc-col.hl { background: var(--color-surface); box-shadow: inset 0 2px 0 var(--color-acid); }
.ls-pc-col.hl > div { color: var(--color-text); }
.ls-pc-col.hl .yes { color: var(--color-acid); }
@media (max-width: 900px) {
  .ls-pc { grid-template-columns: 1fr; }
  .ls-pc-keys { display: none !important; }
  .ls-pc-col { grid-template-rows: none; padding: var(--sp-8) 0 var(--sp-28); border-bottom: 1px solid var(--color-line); }
  .ls-pc-col + .ls-pc-col { border-left: 0; }
  .ls-pc-col.hl { padding: var(--sp-8) var(--sp-20) var(--sp-28); }
  .ls-pc-col > div { padding: var(--sp-12) 0; justify-content: space-between; gap: var(--sp-16); font-size: var(--fs-12); }
  .ls-pc-col > div[data-k]::before { content: attr(data-k); color: var(--color-muted); }
  .ls-pc .ls-pc-top { padding: var(--sp-24) 0 var(--sp-24); }
  .ls-pc-top .chip { top: 24px; left: auto; right: 0; }
  .ls-pc .ls-pc-act { padding-top: var(--sp-24); }
}

/* ── pricing-toggle ── */
.ls-pt-switch { display: inline-flex; justify-self: end; border: 1px solid var(--color-line-strong); }
.ls-pt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ls-pt-switch label { display: inline-flex; align-items: center; height: 46px; padding: 0 var(--sp-20); cursor: pointer; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.ls-pt-switch input:checked + label { background: var(--color-text); color: var(--color-bg); }
.ls-pt-switch input:focus-visible + label { outline: 1px solid var(--color-acid); outline-offset: 2px; }
.ls-pt .y, .ls-pt:has(#ls-bill-m:checked) .m { display: inline; }
.ls-pt .m, .ls-pt:has(#ls-bill-m:checked) .y { display: none; }
.ls-pt:has(#ls-bill-y:checked) .y { display: inline; }
.ls-pt-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-pt-plan { display: flex; flex-direction: column; padding: var(--sp-48) var(--sp-48) var(--sp-48) 0; }
.ls-pt-plan + .ls-pt-plan { border-left: 1px solid var(--color-line); padding-left: var(--sp-48); padding-right: var(--sp-48); }
.ls-pt-plan.hl { background: var(--color-surface); box-shadow: inset 0 2px 0 var(--color-acid); }
.ls-pt-plan .price { display: flex; align-items: baseline; gap: var(--sp-16); margin: var(--sp-48) 0 var(--sp-40); }
.ls-pt-plan .price .num { font-size: var(--fs-56-96); }
.ls-pt-plan .price small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); max-width: 22ch; }
.ls-pt-plan ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); margin-bottom: var(--sp-48); padding-top: var(--sp-28); border-top: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.ls-pt-plan li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-12); }
.ls-pt-plan .btn { margin-top: auto; align-self: flex-start; min-width: 220px; }
.ls-pt-deal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-40); align-items: center; padding: var(--sp-32) 0; border-bottom: 1px solid var(--color-line); }
.ls-pt-deal p { font-size: var(--fs-16); max-width: 56ch; }
@media (max-width: 900px) {
  .ls-pt-switch { justify-self: start; }
  .ls-pt-switch label { height: 42px; padding: 0 var(--sp-16); font-size: var(--fs-12); }
  .ls-pt-plans { grid-template-columns: 1fr; border-bottom: 0; }
  .ls-pt-plan { padding: var(--sp-32) 0; border-bottom: 1px solid var(--color-line); }
  .ls-pt-plan + .ls-pt-plan { border-left: 0; padding: var(--sp-32) var(--sp-20); }
  .ls-pt-plan .price { flex-wrap: wrap; margin: var(--sp-28) 0 var(--sp-28); gap: var(--sp-8) var(--sp-12); }
  .ls-pt-plan ul { grid-template-columns: 1fr; gap: var(--sp-12); margin-bottom: var(--sp-32); }
  .ls-pt-plan .btn { width: 100%; }
  .ls-pt-deal { grid-template-columns: 1fr; gap: var(--sp-16); }
  .ls-pt-deal .btn { justify-self: start; }
}

/* ── pricing-single ── */
.ls-ps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--color-line); }
.ls-ps-plan { display: flex; flex-direction: column; padding: var(--sp-48); }
.ls-ps-price { display: flex; align-items: flex-end; gap: var(--sp-20); margin: var(--sp-48) 0 var(--sp-40); }
.ls-ps-price .num { font-size: var(--fs-80-160); --lh: 0.8; }
.ls-ps-price .label { padding-bottom: var(--sp-8); }
.ls-ps-plan ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); padding-top: var(--sp-28); margin-bottom: var(--sp-48); border-top: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.ls-ps-plan li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-12); }
.ls-ps-plan .btn { align-self: flex-start; min-width: 240px; margin-top: auto; }
.ls-ps-add { display: flex; flex-direction: column; border-left: 1px solid var(--color-line); padding: var(--sp-48) 0 0; }
.ls-ps-add > .label { padding: 0 var(--sp-40) var(--sp-24); }
.ls-ps-add ul { border-top: 1px solid var(--color-line); }
.ls-ps-add li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--sp-20); align-items: center; padding: var(--sp-24) var(--sp-40); border-bottom: 1px solid var(--color-line); }
.ls-ps-add li i { width: 18px; height: 18px; border: 1px solid var(--color-line-strong); }
.ls-ps-add li.on i { background: var(--color-acid); border-color: var(--color-acid); }
.ls-ps-add li b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-16); --lh: 1.1; text-transform: uppercase; letter-spacing: 0; }
.ls-ps-add li span { display: block; margin-top: var(--sp-8); font-size: var(--fs-14); color: var(--ink-2); }
.ls-ps-add li em { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14); --lh: 1; font-style: normal; letter-spacing: var(--tracking-label); color: var(--color-text); }
.ls-ps-total { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-16); margin-top: auto; min-height: 120px; padding: var(--sp-24) var(--sp-40); background: var(--color-acid); color: var(--color-acid-ink); }
.ls-ps-total span { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ls-ps-total b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-56); --lh: 0.85; letter-spacing: var(--tracking-display); }
@media (max-width: 900px) {
  .ls-ps { grid-template-columns: minmax(0, 1fr); }
  .ls-ps-price { flex-wrap: wrap; gap: var(--sp-12) var(--sp-16); }
  .ls-ps-plan { padding: var(--sp-28) var(--sp-20) var(--sp-32); }
  .ls-ps-price { margin: var(--sp-32) 0 var(--sp-28); }
  .ls-ps-price .num { font-size: var(--fs-80); }
  .ls-ps-plan ul { grid-template-columns: 1fr; gap: var(--sp-12); margin-bottom: var(--sp-32); }
  .ls-ps-plan .btn { width: 100%; }
  .ls-ps-add { border-left: 0; border-top: 1px solid var(--color-line); padding-top: var(--sp-28); }
  .ls-ps-add > .label { padding: 0 var(--sp-20) var(--sp-20); }
  .ls-ps-add li { padding: var(--sp-20); gap: var(--sp-16); }
  .ls-ps-total { padding: var(--sp-20) var(--sp-20); min-height: 104px; }
  .ls-ps-total { flex-direction: column; align-items: flex-start; }
  .ls-ps-total b { font-size: var(--fs-40); }
  .ls-ps-plan .plan-top { flex-direction: column; align-items: flex-start; }
}

/* ── team-names: type-only people list (no portraits, no initials) ──
   <ol class="ls-team"><li><span class="mono">01</span><h3 class="ls-team-name">Ada Morrow</h3><span class="label ink">Role</span>
   <p>Credential</p><span class="label">City</span></li></ol>
   name ≤ 14 characters on one line (40px at 1440 in a ~480px cell); role ≤ 24; credential ≤ 70; 4–8 rows. */
.ls-team { border-top: 1px solid var(--color-line); }
.ls-team li { display: grid; grid-template-columns: 56px minmax(0, 1.8fr) minmax(0, .9fr) minmax(0, 1.2fr) 120px; gap: var(--sp-28); align-items: baseline; padding: var(--sp-32) 0; border-bottom: 1px solid var(--color-line); }
.ls-team li > .mono { color: var(--color-acid); }
.ls-team-name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24-32); --lh: 0.95; text-transform: uppercase; letter-spacing: var(--tracking-display); white-space: nowrap; }
.ls-team li p { font-size: var(--fs-16); max-width: 40ch; }
.ls-team li > .label:last-child { justify-self: end; }
.ls-team-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-top: var(--sp-40); }
@media (max-width: 900px) {
  .ls-team li { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-12) var(--sp-16); padding: var(--sp-24) 0; }
  .ls-team li > .mono { grid-column: 1; grid-row: 1; }
  .ls-team li > .label:last-child { grid-column: 2; grid-row: 1; }
  .ls-team-name { grid-column: 1 / -1; font-size: var(--fs-28); white-space: normal; margin-top: var(--sp-4); }
  .ls-team li > .label.ink, .ls-team li p { grid-column: 1 / -1; }
  .ls-team li p { font-size: var(--fs-16); }
  .ls-team-foot { flex-direction: column; align-items: flex-start; margin-top: var(--sp-32); }
}

/* ── timeline: ruler with ticks ── */
.ls-tl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; padding-top: var(--sp-48); list-style: none; }
.ls-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-bottom: 1px solid var(--color-line-strong); background: repeating-linear-gradient(90deg, var(--color-line) 0 1px, transparent 1px 24px); background-size: 100% 10px; background-repeat: no-repeat; background-position: 0 100%; }
.ls-tl li { position: relative; padding-right: var(--sp-28); }
.ls-tl li::before { content: ""; position: absolute; left: 0; top: -48px; width: 1px; height: 22px; background: var(--color-text); }
.ls-tl-y { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-28-40); --lh: 0.9; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-28); }
.ls-tl .h3 { font-size: var(--fs-18); margin-bottom: var(--sp-12); }
.ls-tl p { font-size: var(--fs-16); max-width: 24ch; }
.ls-tl-now { position: absolute; left: 12px; top: -48px; padding: 0 var(--sp-8); background: var(--color-bg); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); line-height: 22px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-acid); }
.ls-tl li.now::before { width: 3px; height: 30px; top: -56px; background: var(--color-acid); }
.ls-tl li.now .ls-tl-y { color: var(--color-text); }
.ls-tl li.next .ls-tl-y, .ls-tl li.next .h3 { color: var(--color-dim); }
.ls-tl li.next p { color: var(--color-muted); }
@media (max-width: 900px) {
  .ls-tl { grid-template-columns: 1fr; padding-top: 0; padding-left: var(--sp-40); gap: 0; }
  .ls-tl::before { top: 0; bottom: 0; left: 0; right: auto; width: 22px; height: auto; border-bottom: 0; border-right: 1px solid var(--color-line-strong); background: repeating-linear-gradient(180deg, var(--color-line) 0 1px, transparent 1px 24px); background-size: 10px 100%; background-position: 100% 0; }
  .ls-tl li { padding: 0 0 var(--sp-40); }
  .ls-tl li::before { left: -18px; top: 6px; width: 18px; height: 1px; }
  .ls-tl li.now::before { left: -22px; top: 5px; width: 22px; height: 3px; }
  .ls-tl-y { font-size: var(--fs-28); margin-bottom: var(--sp-16); }
  .ls-tl-now { left: auto; right: 0; top: 4px; }
  .ls-tl .h3 { font-size: var(--fs-20); }
}

/* ── agenda ── */
.ls-ag-days { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-bottom: var(--sp-32); }
.ls-ag-days .chip { height: 40px; padding: 0 var(--sp-20); cursor: pointer; background: transparent; font-size: var(--fs-12); }
.ls-ag-days .chip.on { background: var(--color-acid); }
.ls-ag { border-top: 1px solid var(--color-line); list-style: none; }
.ls-ag li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 180px 120px; gap: var(--sp-32); align-items: center; padding: var(--sp-24) 0; border-bottom: 1px solid var(--color-line); }
.ls-ag li[hidden] { display: none; }
.ls-ag-t { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-32); --lh: 1; letter-spacing: var(--tracking-display); }
.ls-ag-act .h3 { margin-bottom: var(--sp-16); }
.ls-ag-act i { display: block; height: 4px; width: var(--d); background: var(--color-bar); }
.ls-ag li.live .ls-ag-act i { background: var(--color-acid); }
.ls-ag li.live .ls-ag-t { color: var(--color-acid); }
.ls-ag .mono { color: var(--color-muted); font-size: var(--fs-12); }
.ls-ag li > .mono:last-child { justify-self: end; color: var(--ink-2); }
.ls-ag .ls-ag-now { color: var(--color-acid); }
@media (max-width: 900px) {
  .ls-ag-days { flex-direction: column; align-items: flex-start; gap: var(--sp-16); margin-bottom: var(--sp-24); }
  .ls-ag-days .chip { height: 36px; padding: 0 var(--sp-12); font-size: var(--fs-12); }
  .ls-ag li { grid-template-columns: 84px minmax(0, 1fr) auto; gap: var(--sp-12) var(--sp-16); padding: var(--sp-20) 0; }
  .ls-ag-t { font-size: var(--fs-20); grid-row: span 2; align-self: start; }
  .ls-ag-act { grid-column: 2 / -1; }
  .ls-ag-act .h3 { font-size: var(--fs-18); margin-bottom: var(--sp-12); }
  .ls-ag .mono { font-size: var(--fs-12); }
}

/* ── lineup: typographic poster ── */
.ls-lu { border-top: 1px solid var(--color-line); }
.ls-lu-tier { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-32); align-items: baseline; padding: var(--sp-32) 0; border-bottom: 1px solid var(--color-line); }
.ls-lu-tier p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) 0; color: var(--color-text); }
.ls-lu-tier b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); white-space: nowrap; }
.ls-lu-tier i { font-family: var(--font-sans); font-weight: 400; font-size: max(var(--fs-12), round(down, .5em, 8px)); --lh: 1; font-style: normal; color: var(--color-acid); padding: 0 var(--sp-8); vertical-align: .3em; }
.ls-lu-tier.t1 i { padding: 0 var(--sp-24); } .ls-lu-tier.t2 i { padding: 0 var(--sp-16); }
.ls-lu-tier.t1 p { font-size: var(--fs-32-72); --lh: 0.95; }
.ls-lu-tier.t2 p { font-size: var(--fs-24-40); --lh: 1; }
.ls-lu-tier.t2 b { font-weight: 400; }
.ls-lu-tier.t3 p { font-size: var(--fs-16-24); --lh: 1.1; color: var(--ink-2); }
.ls-lu-tier.t3 b { font-weight: 400; }
.ls-lu-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--sp-32); align-items: end; padding-top: var(--sp-32); }
.ls-lu-info > div { display: grid; gap: var(--sp-12); }
@media (max-width: 900px) {
  .ls-lu-tier { grid-template-columns: 1fr; gap: var(--sp-16); padding: var(--sp-24) 0; }
  .ls-lu-tier.t1 p { font-size: var(--fs-32); }
  .ls-lu-tier.t1 i { padding: 0 var(--sp-12); } .ls-lu-tier.t2 i { padding: 0 var(--sp-8); }
  .ls-lu-tier.t2 p { font-size: var(--fs-20); }
  .ls-lu-tier.t3 p { font-size: var(--fs-16); }
  .ls-lu-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-16); }
  .ls-lu-info .h4 { font-size: var(--fs-16); }
  .ls-lu-info .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ── use-cases ── */
/* grid: list | photo on row 1 (stretched to one height), foot | figures on row 2 (their hairlines line up) */
.ls-uc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "list view" "foot figs"; gap: 0 var(--sp-56); align-items: stretch; }
.ls-uc-list { grid-area: list; align-self: start; }
.ls-uc-view { grid-area: view; display: flex; flex-direction: column; }
.ls-uc-view .ph { flex: 1 0 auto; }
.ls-uc-foot { grid-area: foot; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--sp-20); margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.ls-uc-foot .label { --lh: 1.7; }
.ls-uc-list { border-top: 1px solid var(--color-line); list-style: none; }
.ls-uc-list li { position: relative; border-bottom: 1px solid var(--color-line); }
.ls-uc-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-16); align-items: center; padding: var(--sp-32) 0; }
.ls-uc-list .mono { color: var(--color-muted); }
.ls-uc-list .h3 { font-size: var(--fs-24-32); color: var(--color-muted); }
.ls-uc-list .arrow { color: var(--color-dim); font-size: var(--fs-18); }
.ls-uc-list li.on { padding-left: var(--sp-24); }
.ls-uc-list li.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-acid); }
.ls-uc-list li.on .h3 { color: var(--color-text); }
.ls-uc-list li.on .mono, .ls-uc-list li.on .arrow { color: var(--color-acid); }
.ls-uc-list li.on p { margin: -8px 0 var(--sp-32) var(--sp-64); font-size: var(--fs-16); max-width: 36ch; }
.ls-uc-figs { grid-area: figs; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.ls-uc-figs > div { display: grid; gap: var(--sp-16); padding: var(--sp-24) var(--sp-24) 0 0; }
.ls-uc-figs > div + div { border-left: 1px solid var(--color-line); padding-left: var(--sp-24); }
.ls-uc-figs .num { font-size: var(--fs-40-64); }
@media (max-width: 900px) {
  .ls-uc { grid-template-columns: 1fr; grid-template-areas: "list" "view" "figs" "foot"; gap: 0; }
  .ls-uc-view { margin-top: var(--sp-40); }
  .ls-uc-foot { margin-top: var(--sp-32); padding-top: var(--sp-20); }
  .ls-uc-list a { padding: var(--sp-24) 0; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .ls-uc-list .h3 { font-size: var(--fs-20); }
  .ls-uc-list li.on { padding-left: var(--sp-16); }
  .ls-uc-list li.on p { margin: -8px 0 var(--sp-24) var(--sp-56); font-size: var(--fs-16); }
  .ls-uc-figs .num { font-size: var(--fs-40); }
  .ls-uc-figs > div { padding: var(--sp-20) var(--sp-12) 0 0; }
  .ls-uc-figs > div + div { padding-left: var(--sp-16); }
}

/* ── gallery: masonry columns ── */
.ls-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); align-items: stretch; }
.ls-gal-col { display: flex; flex-direction: column; gap: var(--sp-28); }
.ls-gal-note { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-24); padding: var(--sp-28); border: 1px solid var(--color-line); }
.ls-gal-note p { font-size: var(--fs-12); --lh: 1.6; }
/* level bottoms: the tallest column sets the height; in the others the last frame grows (object-fit: cover crops it)
   and the note cell stretches, so all three columns end on the same line whatever the mix of shapes */
.ls-gal-col > figure:last-child { flex: 1 0 auto; display: flex; flex-direction: column; }
.ls-gal-col > figure:last-child > .ph { flex: 1 0 auto; }
@media (max-width: 900px) {
  .ls-gal { display: block; columns: 2; column-gap: var(--sp-12); }
  .ls-gal-col { display: contents; }
  .ls-gal-col > * { break-inside: avoid; margin-bottom: var(--sp-20); }
  .ls-gal-note, .ls-gal-col > figure:last-child, .ls-gal-col > figure:last-child > .ph { flex: none; }
  .ls-gal .ph-cap { flex-direction: column; gap: 2px; padding-top: var(--sp-12); font-size: var(--fs-12); }
  .ls-gal-note { padding: var(--sp-16) var(--sp-16); gap: var(--sp-16); }
  .ls-gal-note .num { font-size: var(--fs-40); }
  .ls-gal-note p { font-size: var(--fs-12); }
}

/* ── app-showcase ── */
.ls-app { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: end; }
.ls-app-copy { display: grid; gap: var(--sp-40); justify-items: start; align-self: center; }
.ls-app-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-top: 1px solid var(--color-line); }
.ls-app-figs > div { display: grid; gap: var(--sp-16); padding: var(--sp-24) var(--sp-24) 0 0; }
.ls-app-figs > div + div { padding-left: var(--sp-24); border-left: 1px solid var(--color-line); }
.ls-app-figs .num { font-size: var(--fs-40-64); }
.ls-app-ticks { display: grid; gap: var(--sp-16); padding: 0 0 var(--sp-24); width: 100%; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.ls-app-ticks li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-16); }
.ls-app-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); align-items: start; }
.ls-app-phones figure { padding-top: var(--sp-64); }
.ls-app-phones figure:nth-child(2) { padding-top: 0; }
.ls-app-phones .ph { aspect-ratio: 1170 / 2532; outline-color: var(--color-line-strong); }
@media (max-width: 900px) {
  .ls-app { grid-template-columns: 1fr; gap: var(--sp-48); }
  .ls-app-copy { gap: var(--sp-24); }
  .ls-app-ticks { font-size: var(--fs-12); }
  .ls-app-figs .num { font-size: var(--fs-40); }
  .ls-app-figs > div { padding: var(--sp-20) var(--sp-12) 0 0; }
  .ls-app-figs > div + div { padding-left: var(--sp-16); }
  .ls-app-phones { gap: var(--sp-8); }
  .ls-app-phones figure { padding-top: var(--sp-40); }
  .ls-app-phones .ph-cap { font-size: var(--fs-12); padding-top: var(--sp-12); }
}

/* ── newsletter ── */
.ls-nl { display: flex; flex-direction: column; align-items: flex-start; }
.ls-nl > * { max-width: 680px; width: 100%; }
.ls-nl .idx { margin-bottom: var(--sp-32); width: auto; }
.ls-nl .lead { margin-top: var(--sp-32); }
.ls-nl-form { display: flex; margin-top: var(--sp-48); }
.ls-nl-form .input { flex: 1; min-width: 0; height: 56px; border-right: 0; }
.ls-nl-form .btn { height: 56px; }
.ls-nl-note { margin-top: var(--sp-16); font-size: var(--fs-12); }
.ls-nl-list { margin-top: var(--sp-56); border-top: 1px solid var(--color-line); }
.ls-nl-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-16); align-items: center; padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); }
.ls-nl-list .mono { color: var(--color-acid); }
.ls-nl-list b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-18); --lh: 1.15; text-transform: uppercase; }
.ls-nl-list .arrow { color: var(--color-muted); }
@media (max-width: 900px) {
  .ls-nl .idx { margin-bottom: var(--sp-24); }
  .ls-nl .lead { margin-top: var(--sp-24); }
  .ls-nl-form { margin-top: var(--sp-32); }
  .ls-nl-form .input, .ls-nl-form .btn { height: 50px; }
  .ls-nl-form .btn { padding: 0 var(--sp-16); }
  .ls-nl-note { font-size: var(--fs-12); }
  .ls-nl-list { margin-top: var(--sp-40); }
  .ls-nl-list a { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .ls-nl-list b { font-size: var(--fs-16); }
}

/* ── contact-form ── */
.ls-cf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: start; }
.ls-cf-ch { border-top: 1px solid var(--color-line); }
.ls-cf-ch li { display: grid; gap: var(--sp-8); padding: var(--sp-24) 0; border-bottom: 1px solid var(--color-line); }
.ls-cf-ch .h4 { font-size: var(--fs-20); }
.ls-cf-ch .h4:hover { color: var(--color-acid); }
.ls-cf-ch p { font-size: var(--fs-16); }
.ls-cf-map { margin-top: var(--sp-40); }
.ls-nl-form .btn, .ls-cf-send .btn { border: 0; cursor: pointer; }
.ls-cf-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-20); padding: var(--sp-40); border: 1px solid var(--color-line); }
.ls-cf-form .full { grid-column: 1 / -1; }
.ls-cf-form select.input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-acid) 50%), linear-gradient(-45deg, transparent 50%, var(--color-acid) 50%); background-size: 6px 6px; background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-repeat: no-repeat; }
.ls-cf-form select.input option { background: var(--color-bg); }
.ls-cf-pick .chip { cursor: pointer; height: 38px; padding: 0 var(--sp-16); }
.ls-cf-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ls-cf-pick .chip:has(input:checked) { background: var(--color-acid); border-color: var(--color-acid); color: var(--color-acid-ink); }
.ls-cf-send { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-20); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.ls-cf-send .mono { font-size: var(--fs-12); }
@media (max-width: 900px) {
  .ls-cf { grid-template-columns: 1fr; gap: var(--sp-48); }
  .ls-cf-ch .h4 { font-size: var(--fs-16); }
  .ls-cf-form { grid-template-columns: 1fr; padding: var(--sp-24) var(--sp-20); gap: var(--sp-20); }
  .ls-cf-pick .chip { height: 34px; padding: 0 var(--sp-12); }
  .ls-cf-send { flex-direction: column; align-items: flex-start; }
  .ls-cf-send .btn { width: 100%; }
  .ls-cf-send .mono { font-size: var(--fs-12); }
}

/* ── cta-banner ── */
.ls-cta { position: relative; overflow: clip; padding: var(--sp-72) var(--sp-64) var(--sp-48); border: 1px solid var(--color-line); }
.ls-cta .obj { width: 680px; right: -160px; top: 50%; transform: translateY(-50%); }
@media (min-width: 901px) and (max-width: 1199px) { .ls-cta .obj { width: 480px; right: -180px; } }
.ls-cta .x-tl { left: 16px; top: 16px; } .ls-cta .x-br { right: 16px; bottom: 16px; }
.ls-cta .idx { display: block; margin-bottom: var(--sp-32); position: relative; }
.ls-cta .h2, .ls-cta .lead, .ls-cta .ctas, .ls-cta .meta-row { position: relative; z-index: 1; }
.ls-cta .lead { margin-top: var(--sp-32); max-width: 36ch; }
.ls-cta .ctas { margin-top: var(--sp-40); }
.ls-cta .meta-row { margin-top: var(--sp-72); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); max-width: 560px; }
@media (max-width: 900px) {
  .ls-cta { padding: 248px var(--sp-20) var(--sp-28); }
  .ls-cta .obj { width: 320px; right: -70px; top: -40px; transform: none; }
  .ls-cta .x-br { display: none; }
  .ls-cta .lead { margin-top: var(--sp-24); }
  .ls-cta .ctas { margin-top: var(--sp-28); }
  .ls-cta .meta-row { margin-top: var(--sp-48); }
}

/* ── faq ── */
.ls-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: start; }
.ls-faq-head { position: sticky; top: 112px; }
.ls-faq-head .idx { display: block; margin-bottom: var(--sp-32); }
.ls-faq-head .h2 { font-size: var(--fs-side); }   /* 5/12 column: lines ≤ 7 characters */
.ls-faq-ask { display: grid; gap: var(--sp-16); justify-items: start; margin-top: var(--sp-56); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); max-width: 360px; }
.ls-faq-ask p { font-size: var(--fs-16); }
@media (max-width: 900px) {
  .ls-faq { grid-template-columns: 1fr; gap: var(--sp-40); }
  .ls-faq-head { position: static; }
  .ls-faq-head .idx { margin-bottom: var(--sp-24); }
  .ls-faq-ask { margin-top: var(--sp-32); }
}

/* ═════════════════ SHOP BLOCKS (streetwear / merch drop recipe) — library: product-hero, product-details,
   product-grid, lookbook-band ═════════════════
   Product renders: assets/images/product-*.webp (garment specimens with a glass print, 4:5; looks 4:5 and 16:10).
   A product gallery may repeat ITS product's object (front + back of one piece); never put a page .obj beside a render
   that shows the same labra-NN.
   .ls-pdp            product page opener: .ls-pdp-gallery left (vertical .ls-pdp-thumbs rail + main 4:5 .ph + .ph-cap),
                      .ls-pdp-buy right (sticky): .crumbs, title, lead, .ls-pdp-price, .ls-pdp-stock (meter), .ls-pdp-opt
                      blocks (colour squares .ls-pdp-swatch, size buttons .ls-pdp-sizes — one .chip.on, [disabled] = sold
                      out), .ctas, .ls-pdp-ship key/value rows.
   .ls-pd             spec sheet: .ls-pd-spec (<dl> rows) left, .ls-pd-size table right (.hl column = the selected size).
   .ls-pg > .ls-pg-card   product cards in one hairline grid (3 columns; .ls-pg.c4 = 4; phones 2): 4:5 .ph, code + run
                      size, h3 name, one line, stock meter + "n left", price + size boxes (li.out = sold out).
                      .ls-pg-card.sold = the whole piece sold out (render dimmed, price struck).
                      .ls-pg-more = a type-only cell (big figure + button) that squares the grid off.
   .ls-lb             lookbook band: 4:5 · 16:10 · 4:5 frames in one row, captions, foot rail (phones: wide frame first). */
.ls-pdp { padding: var(--sp-56) 0 var(--sec-pad); }
.ls-pdp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-64); align-items: start; }
.ls-pdp-gallery { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-16); }
.ls-pdp-rail { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-24); padding-bottom: var(--sp-40); }
.ls-pdp-thumbs { display: grid; gap: var(--sp-12); align-content: start; }
.ls-pdp-spec { position: relative; display: grid; gap: var(--sp-12); padding-top: var(--sp-16); border-top: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.ls-pdp-spec span:first-child { color: var(--color-text); }
.ls-pdp-spec .x { position: relative; margin-top: var(--sp-16); }
.ls-pdp-thumbs .ph { cursor: pointer; }
.ls-pdp-thumbs .ph.on { outline: 2px solid var(--color-acid); outline-offset: 3px; }
.ls-pdp-main .ph-cap { padding-top: var(--sp-16); }
.ls-pdp-buy { position: sticky; top: 112px; }
.ls-pdp-buy .crumbs { display: block; margin-bottom: var(--sp-28); }
.ls-pdp-buy .h2 { font-size: var(--fs-40-72); }
.ls-pdp-buy .lead { margin-top: var(--sp-24); font-size: var(--fs-16); }
.ls-pdp-price { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-16); margin-top: var(--sp-32); padding: var(--sp-20) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-pdp-price .num { font-size: var(--fs-40-64); }
.ls-pdp-price .label { text-align: right; }
.ls-pdp-stock { display: grid; gap: var(--sp-12); margin-top: var(--sp-24); }
.ls-pdp-stock .k, .ls-pdp-opt .k { display: flex; justify-content: space-between; gap: var(--sp-16); }
.ls-meter { height: 4px; background: var(--color-bar); }
.ls-meter i { display: block; height: 100%; width: var(--v, 50%); background: var(--color-text); }
.ls-meter.low i { background: var(--color-acid); }           /* last units: the meter is the acid element of the panel */
.ls-pdp-opt { display: grid; gap: var(--sp-16); margin-top: var(--sp-28); }
.ls-pdp-swatch { display: flex; gap: var(--sp-12); }
.ls-pdp-swatch span { width: 44px; height: 44px; border: 1px solid var(--color-line-strong); }
.ls-pdp-swatch span.on { outline: 2px solid var(--color-text); outline-offset: 3px; }
.ls-pdp-sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-8); }
.ls-pdp-sizes .chip { justify-content: center; height: 46px; padding: 0; background: transparent; cursor: pointer; }
.ls-pdp-sizes .chip.on { background: var(--color-acid); color: var(--color-acid-ink); }
.ls-pdp-sizes .chip:disabled { border-color: var(--color-line); color: var(--color-dim); text-decoration: line-through; cursor: not-allowed; }
.ls-pdp-buy .ctas { margin-top: var(--sp-28); }
.ls-pdp-buy .ctas .btn { flex: 1 1 auto; }
.ls-pdp-buy button.btn-primary { border: 0; cursor: pointer; }
.ls-pdp-ship { margin-top: var(--sp-32); border-top: 1px solid var(--color-line); }
.ls-pdp-ship div { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-pdp-ship b { font-weight: 500; color: var(--color-text); text-align: right; }
@media (max-width: 900px) {
  .ls-pdp { padding: var(--sp-24) 0 var(--sp-88); }
  .ls-pdp-grid { grid-template-columns: 1fr; gap: var(--sp-40); }
  .ls-pdp-gallery { grid-template-columns: 1fr; gap: var(--sp-12); }
  .ls-pdp-rail { grid-row: 2; padding: 0; }
  .ls-pdp-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .ls-pdp-spec { display: none; }
  .ls-pdp-buy { position: static; }
  .ls-pdp-buy .crumbs { margin-bottom: var(--sp-20); }
  .ls-pdp-buy .h2 { font-size: var(--fs-48-72); }
  .ls-pdp-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ls-pdp-buy .ctas .btn { flex: 1 1 100%; }
}

.ls-pd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-64); align-items: start; }
.ls-pd-spec { border-top: 1px solid var(--color-line); }
.ls-pd-spec div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); }
.ls-pd-spec dt { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.6; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-pd-spec dd { font-size: var(--fs-16); color: var(--color-text); }
.ls-pd-size { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ls-pd-size caption { caption-side: top; text-align: left; padding-bottom: var(--sp-20); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.ls-pd-size th, .ls-pd-size td { padding: var(--sp-20) var(--sp-12); text-align: right; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.ls-pd-size thead th { color: var(--color-muted); font-weight: 400; border-top: 1px solid var(--color-line); }
.ls-pd-size th:first-child, .ls-pd-size td:first-child { text-align: left; padding-left: 0; color: var(--color-muted); }
.ls-pd-size td { color: var(--color-text); }
.ls-pd-size .hl { background: var(--color-surface); }
.ls-pd-size thead .hl { color: var(--color-acid); box-shadow: inset 0 2px 0 var(--color-acid); }
.ls-pd-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-28); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-pd-fit > div { display: grid; gap: var(--sp-12); padding: var(--sp-20) var(--sp-20); }
.ls-pd-fit > div:first-child { padding-left: 0; }
.ls-pd-fit > div + div { border-left: 1px solid var(--color-line); }
.ls-pd-fit b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-20); --lh: 1; text-transform: uppercase; letter-spacing: var(--tracking-heading); }
@media (max-width: 900px) {
  .ls-pd { grid-template-columns: 1fr; gap: var(--sp-48); }
  .ls-pd-spec div { grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-16); }
  .ls-pd-size { font-size: var(--fs-12); letter-spacing: .02em; }
  .ls-pd-size th, .ls-pd-size td { padding: var(--sp-16) var(--sp-4); }
  .ls-pd-fit > div { padding: var(--sp-16) var(--sp-12); }
  .ls-pd-fit b { font-size: var(--fs-14); }
  .ls-pd-fit .label { font-size: var(--fs-12); }
}

.ls-pg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.ls-pg.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-pg-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-20) var(--sp-20) var(--sp-28); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-pg-card .ph { margin-bottom: var(--sp-24); }
.ls-pg-meta { display: flex; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-16); }
.ls-pg-meta .label { font-size: var(--fs-12); }
.ls-pg-card .h3 { margin-bottom: var(--sp-12); }
.ls-pg-card p { font-size: var(--fs-16); max-width: 34ch; }
.ls-pg-stock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-16); align-items: center; margin-top: var(--sp-24); }
.ls-pg-stock .label { font-size: var(--fs-12); }
.ls-pg-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-16); margin-top: auto; padding-top: var(--sp-24); }
.ls-pg-price { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24-32); --lh: 1; letter-spacing: var(--tracking-heading); white-space: nowrap; }
.ls-pg-sizes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-4); }
.ls-pg-sizes li { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 var(--sp-8); border: 1px solid var(--color-line-strong); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); }
.ls-pg-sizes li.out { border-color: var(--color-line); color: var(--color-dim); text-decoration: line-through; }
.ls-pg-card:hover .h3 { color: var(--color-acid); }
.ls-pg-card.sold .ph > img { opacity: .38; }
.ls-pg-card.sold .ls-pg-price { color: var(--color-dim); text-decoration: line-through; text-decoration-thickness: 2px; }
.ls-pg-card.sold .ph::after { content: "Sold out"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: var(--sp-12) var(--sp-16); background: var(--color-bg); border: 1px solid var(--color-line-strong); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.ls-pg-more { justify-content: space-between; padding: var(--sp-32) var(--sp-28) var(--sp-28); }
.ls-pg-more .num { font-size: var(--fs-80-128); }
.ls-pg-more .h3 { margin: var(--sp-28) 0 var(--sp-12); text-wrap: balance; }
.ls-pg-more .btn { align-self: flex-start; margin-top: var(--sp-28); }
.ls-pg-kit { margin-top: var(--sp-28); border-top: 1px solid var(--color-line); }
.ls-pg-kit li { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-12) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ls-pg-kit b { font-weight: 500; color: var(--color-text); }
.ls-pg-kit li.sum { color: var(--color-text); border-bottom-color: var(--color-line-strong); }
.ls-pg-kit li.sum b { color: var(--color-acid); }
.ls-pg-more .x { right: 16px; bottom: 16px; }
.ls-pg.c4 .ls-pg-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
.ls-pg.c4 .ls-pg-sizes { justify-content: flex-start; }
@media (max-width: 900px) {
  .ls-pg, .ls-pg.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-pg-card { padding: var(--sp-12) var(--sp-12) var(--sp-16); }
  .ls-pg-card .ph { margin-bottom: var(--sp-16); }
  .ls-pg-meta { flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-12); }
  .ls-pg-meta .label { font-size: var(--fs-12); }
  .ls-pg-card .h3 { font-size: var(--fs-14); letter-spacing: -.01em; margin-bottom: 0; }
  .ls-pg-card p { display: none; }
  .ls-pg-stock { grid-template-columns: 1fr; gap: var(--sp-8); margin-top: var(--sp-16); }
  .ls-pg-stock .label { font-size: var(--fs-12); }
  .ls-pg-foot, .ls-pg.c4 .ls-pg-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-12); padding-top: var(--sp-16); }
  .ls-pg-price { font-size: var(--fs-24); }
  .ls-pg-sizes { justify-content: flex-start; gap: var(--sp-4); }
  .ls-pg-sizes li { min-width: 24px; height: 24px; padding: 0 var(--sp-4); font-size: var(--fs-12); }
  .ls-pg-card.sold .ph::after { padding: var(--sp-8) var(--sp-8); font-size: var(--fs-12); }
  .ls-pg-more { padding: var(--sp-16) var(--sp-12) var(--sp-16); justify-content: flex-start; }
  .ls-pg-more .num { margin-top: var(--sp-20); font-size: var(--fs-48); }
  .ls-pg-more .h3 { margin: var(--sp-16) 0 0; font-size: var(--fs-16); }
  .ls-pg-kit { display: none; }
  .ls-pg-more .btn { margin-top: auto; height: 32px; padding: 0 var(--sp-12); font-size: var(--fs-12); }
  .ls-pg-more .x { display: none; }
}

.ls-lb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-16); align-items: end; }
.ls-lb-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-top: var(--sp-48); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
@media (max-width: 900px) {
  .ls-lb { grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-12); }
  .ls-lb figure:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .ls-lb .ph-cap { flex-direction: column; gap: 2px; padding-top: var(--sp-12); font-size: var(--fs-12); }
  .ls-lb-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-16); margin-top: var(--sp-32); }
}

/* ═════════════════ ROUTE MAP (tour recipe) — library: route-map ═════════════════
   .ls-rm             map frame (7/12) + legs list (5/12), a 4-cell totals strip under the map.
   .ls-rm-map         a drawn .ph.map: hairline grid, svg.map-lines route (driven legs .solid, the leg to the next show .acid,
                      the rest dashed), numbered stops (<span class="pin"><span><b>NN</b> City</span></span> — the inner span keeps
                      number + name in one piece, so .l pins read "03 Prague ■"; the next show .pin.hq), context cities
                      (.pin.sub), .map-legend top-left, .scale bottom-right. Stops: 4–10 (more gets crowded on phones).
                      Coordinates: left% = (lon − lonMin)/(lonMax − lonMin) × 100, top% = (latMax − lat)/(latMax − latMin)
                      × 100; in the svg (viewBox 0 0 100 75) use x = left, y = top × .75.
   .ls-rm-legs > li   legs: .tag (mono leg code; the current leg acid), .h3 name, .label dates, mono stop list, km figure. */
.ls-rm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-48); align-items: start; }
.ls-rm-map .pin b { font-weight: 500; color: var(--color-muted); margin-right: 2px; }
.ls-rm-map .pin.hq b { color: var(--color-acid); }
.ls-rm-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); }
.ls-rm-sum > div { display: grid; gap: var(--sp-12); padding: var(--sp-20) var(--sp-20) var(--sp-24); }
.ls-rm-sum > div:first-child { padding-left: 0; }
.ls-rm-sum > div + div { border-left: 1px solid var(--color-line); }
.ls-rm-sum b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-28-40); --lh: 0.9; letter-spacing: var(--tracking-display); text-transform: uppercase; white-space: nowrap; }
.ls-rm-legs { border-top: 1px solid var(--color-line); list-style: none; }
.ls-rm-legs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-12) var(--sp-20); padding: var(--sp-24) 0; border-bottom: 1px solid var(--color-line); }
.ls-rm-legs .tag { grid-column: 1 / -1; margin: 0; color: var(--color-muted); }
.ls-rm-legs li.on .tag { color: var(--color-acid); }
.ls-rm-legs .h3 { font-size: var(--fs-20-24); }
.ls-rm-legs .km { align-self: start; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-20); --lh: 1; letter-spacing: var(--tracking-heading); white-space: nowrap; }
.ls-rm-legs .km small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); color: var(--color-muted); margin-left: var(--sp-4); }
.ls-rm-legs .mono { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--fs-12); --lh: 1.6; }
.ls-rm-legs li.done .h3, .ls-rm-legs li.done .km { color: var(--color-muted); }
.ls-rm-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-20); margin-top: var(--sp-28); }
@media (max-width: 900px) {
  .ls-rm { grid-template-columns: 1fr; gap: var(--sp-40); }
  .ls-rm-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-rm-sum > div { padding: var(--sp-16) var(--sp-12) var(--sp-20); }
  .ls-rm-sum > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .ls-rm-sum > div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .ls-rm-sum b { font-size: var(--fs-24); }
  .ls-rm-legs li { padding: var(--sp-20) 0; }
  .ls-rm-legs .km { font-size: var(--fs-16); }
  .ls-rm-foot { flex-direction: column; align-items: flex-start; }
}

/* ═════════════════ PEOPLE + TICKETS (event / conference recipe) — library: speaker-cards, ticket-table ═════════════════
   ── speaker-cards (.ls-spk-*) ──
   Type-only people cards: no portraits, no initials. A hairline grid of 3 columns (1 on phones); each .ls-spk card holds
   .ls-spk-top (mono tag + slot), the person's NAME in display caps on two lines (h3.ls-spk-name.name — first<br>last,
   ≤ 9 characters per line; the "name" class tells the checker the 2-line split is deliberate), the role line
   "Role @ Company" (.label.ink, ≤ 34 characters) and, pinned to the foot over a hairline, .ls-spk-talk (mono label + talk
   title or credential in sans, ≤ 60 characters). .ls-spk.more = the type-only closing cell (figure + line + button) that
   squares the grid off. No object, no acid panel. Works for speakers, mentors, jury, hosts. */
.ls-spk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.ls-spk { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: var(--sp-28) var(--sp-32) var(--sp-32); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.ls-spk-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); margin-bottom: var(--sp-64); }
.ls-spk-top .tag { margin-bottom: 0; }
.ls-spk-name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-28-48); --lh: 0.9; text-transform: uppercase; letter-spacing: var(--tracking-display); margin-bottom: var(--sp-20); }
.ls-spk-talk { display: grid; gap: var(--sp-12); margin-top: auto; padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.ls-spk-talk p { font-size: var(--fs-20); --lh: 1.35; color: var(--color-text); max-width: 26ch; }
.ls-spk.more .num { margin-bottom: var(--sp-20); }
.ls-spk.more p { max-width: 26ch; }
.ls-spk.more .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) {
  .ls-spk-grid { grid-template-columns: 1fr; }
  .ls-spk { min-height: 0; padding: var(--sp-24) var(--sp-20) var(--sp-28); }
  .ls-spk-top { margin-bottom: var(--sp-40); }
  .ls-spk-name { font-size: var(--fs-32); }
  .ls-spk.more .btn { margin-top: var(--sp-28); }
  .ls-spk-talk { margin-top: var(--sp-28); }
}

/* ── ticket-table (.rows.ls-tt + .c-price) ──
   The core .rows table with a display-type price column in place of the mono status cell:
   <ul class="rows ls-tt"><li class="row"><span class="c-key">T/01</span><span class="c-name h3">Early bird</span>
   <span class="c-meta">Until 1 March</span><span class="c-price acid">€149</span><span class="c-act"><a class="btn …">Buy</a></span></li></ul>
   Price ≤ 7 characters ("€1,190", "+€90", "Free") — it never wraps; the best-value price takes .acid (that row's button is
   the one primary). Phones: code + price share the top line, the name below, then condition + button. */
.ls-tt .row .c-price { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-20-28); --lh: 1; text-transform: uppercase; letter-spacing: var(--tracking-heading); color: var(--color-text); white-space: nowrap; }
.ls-tt .row .c-price.acid { color: var(--color-acid); }
@media (max-width: 900px) {
  .ls-tt .row .c-price { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; font-size: var(--fs-24); }
  .ls-tt .row .c-name { grid-column: 1; font-size: var(--fs-18); }
}


/* ═════ css/runtime.css ═════ */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   RUNTIME CONF 2027 — shared additions on top of the Labra site.css (which stays untouched).
   Everything here is prefixed rt-; page-group styles live in css/pages/<group>.css with the group prefix.
   One breakpoint at 900px, phone rules right after each block with the same selectors.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* skip link: hidden until focused */
.rt-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: var(--sp-12) var(--sp-16); background: var(--color-acid); color: var(--color-acid-ink); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.rt-skip:focus { top: 12px; }

/* nav: a section's link stays acid on its child pages (speakers/…, talks/…, workshops/…) */
.nav-links a[aria-current="true"], .nav .menu ul a[aria-current="true"] { color: var(--color-acid); }

/* footer: brand column + 4 sitemap columns */
.rt-foot-cols { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
.rt-foot-mail { font-family: var(--font-sans); font-size: var(--fs-12) !important; letter-spacing: .04em; }
.rt-foot-mail a:hover, .rt-legal-links a:hover { color: var(--color-acid); }
@media (max-width: 900px) {
  .rt-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* links inside display / card titles: inherit colour, acid on hover */
.h3 a, .h4 a, .ls-spk-name a, .rt-person-name a, .author .name a, .c-name a, .ls-lu-tier a, .ls-spk-talk a, .rt-person-foot a { color: inherit; }
.h3 a:hover, .h4 a:hover, .ls-spk-name a:hover, .rt-person-name a:hover, .author .name a:hover, .c-name a:hover,
.ls-lu-tier a:hover, .ls-spk-talk a:hover, .rt-person-foot a:hover { color: var(--color-acid); }

/* ── rt-title: display titles of generated pages (talks, workshops, news) in three size tiers.
   build.py breaks the title into lines and picks the biggest tier that fits:
   .l ≤ 9 characters per line (h1 size) · .m ≤ 12 · .s ≤ 15. The last line is the acid phrase. */
.rt-title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); --lh: 0.96; }
/* desktop caps keep the longest line (9 / 12 / 15 chars) under ~900px, clear of the head object on the right */
.rt-title.l { font-size: var(--fs-title-l); }
.rt-title.m { font-size: var(--fs-title-m); }
.rt-title.s { font-size: var(--fs-title-s); --lh: 0.9; }

/* ── rt-head: page head for generated detail pages (talk, workshop, news). Based on .page-head.short:
   crumbs idx, rt-title, lead + buttons, .art-meta facts row; object top-right. */
.rt-head .wrap { min-height: 0; padding-bottom: var(--sp-56); }
.rt-head .head-body { margin-top: var(--sp-48); margin-bottom: 0; }
.rt-head .idx a:hover { color: var(--color-acid); }
.rt-head .art-meta { margin-top: var(--sp-72); }
@media (max-width: 900px) {
  .rt-head .wrap { padding-bottom: var(--sp-40); }
  .rt-head .head-body { margin-top: var(--sp-28); }
  .rt-head .art-meta { margin-top: var(--sp-48); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── rt-logo: header wordmark "RUNTIME / 27" — bigger and tighter than the nav links so it reads as the brand,
   acid slash between the name and the edition (also used in the footer wordmark) */
.rt-logo { font-size: var(--fs-20); letter-spacing: var(--tracking-display); gap: 0; align-items: center; }
.rt-slash { color: var(--color-acid); margin: 0 var(--sp-8); }
.wordmark .rt-slash { margin: 0 -2px; }
@media (max-width: 900px) {
  .rt-logo { font-size: var(--fs-16); letter-spacing: var(--tracking-display); }
  .rt-logo .rt-slash { margin: 0 var(--sp-4); }
}
@media (max-width: 599px) { .rt-logo { font-size: var(--fs-14); } }
/* footer wordmark: each step is sized for the widest screen of its band, so the narrow end of a band takes one step down */
@media (min-width: 600px) and (max-width: 767px) { .wordmark.long { font-size: var(--fs-56); } }
@media (min-width: 1200px) and (max-width: 1399px) { .wordmark.long { font-size: var(--fs-112); } }
@media (min-width: 901px) and (max-width: 959px) { .wordmark.long { font-size: var(--fs-80); } }
@media (max-width: 389px) { .wordmark.long { font-size: var(--fs-32); } .rt-logo { font-size: var(--fs-12); } .rt-logo .rt-slash { margin: 0 2px; } .nav .wrap { gap: var(--sp-8); } .nav .end { gap: var(--sp-8); } }
/* narrow desktops 1200-1399: the six nav links + logo + button need a slightly tighter bar */
@media (min-width: 1200px) and (max-width: 1399px) {
  .nav .wrap { gap: var(--sp-24); }
  .nav-links { letter-spacing: 1px; }
  .nav-links li + li::before { margin: 0 var(--sp-8); }
  .rt-logo { font-size: var(--fs-16); }
}

/* ── rt-people: type-only name grid (speakers page groups). 4 columns → 2 → 1. Name on two display lines (.name). */
.rt-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.rt-person { display: flex; flex-direction: column; min-height: 300px; padding: var(--sp-24) var(--sp-24) var(--sp-24); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.rt-person-name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24-28); --lh: 1.1; text-transform: uppercase; letter-spacing: var(--tracking-display); margin-bottom: var(--sp-16); }
.rt-person > .label.ink { font-size: var(--fs-12); }
.rt-person-foot { display: grid; gap: var(--sp-12); margin-top: auto; padding-top: var(--sp-20); border-top: 1px solid var(--color-line); }
.rt-person-foot p { font-size: var(--fs-16); --lh: 1.35; color: var(--color-text); }
.rt-person-foot .label { font-size: var(--fs-12); }
.rt-people-note { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-24); padding: var(--sp-24); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.rt-people-note .num { font-size: var(--fs-48-72); }
.rt-people-note.w2 { grid-column: span 2; }
@media (max-width: 1100px) {
  .rt-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-people-note.w2 { grid-column: span 1; }
}
@media (max-width: 900px) {
  .rt-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-person { min-height: 0; padding: var(--sp-20) var(--sp-16) var(--sp-16); }
  .rt-person-name { font-size: var(--fs-20); }
  .rt-person-foot p { font-size: var(--fs-14); }
  .rt-people-note, .rt-people-note.w2 { grid-column: 1 / -1; padding: var(--sp-20) var(--sp-16); }
}
@media (max-width: 560px) {
  .rt-people { grid-template-columns: minmax(0, 1fr); }
  .rt-person-name { font-size: var(--fs-28); }
}

/* ── person photos: portrait frames (.ph.r4x5) on speaker cards, people grid and speaker pages. Files live in
   src/assets/people/<slug>.webp|jpg|png; without a file the frame stays empty (grid + "Photo" hint). */
.ls-spk:has(> .ls-spk-photo) .ls-spk-top { margin-bottom: var(--sp-24); }
.ls-spk-photo { margin-bottom: var(--sp-28); }
.rt-person-photo { margin-bottom: var(--sp-20); }
.rt-side-photo { width: 100%; max-width: 360px; }
/* one look for all stock photos: CSS keeps every photo black and white;
   the acid tint fades in only on hover — over the photo itself or over the card that holds it */
.ph[data-ph="portrait"] > img, .ph[data-ph="photo"] > img { filter: grayscale(1); }
.ph[data-ph="portrait"]:has(> img)::after, .ph[data-ph="photo"]:has(> img)::after { content: ""; position: absolute; inset: 0; background: var(--color-acid); mix-blend-mode: color; opacity: 0; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.ph[data-ph="portrait"]:hover::after, .ph[data-ph="photo"]:hover::after,
.ls-spk:hover .ph[data-ph="portrait"]::after, .rt-person:hover .ph[data-ph="portrait"]::after, .rt-author:hover .ph[data-ph="portrait"]::after { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .ph[data-ph]::after { transition: none; } }
.ls-lu-tier.t1:has(.ls-lu-faces) { grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; }
.ls-lu-faces { display: flex; gap: var(--sp-16); }
.ls-lu-faces > .ph { width: 160px; }
.ls-lu-faces > .ph .hint { left: 12px; bottom: 12px; }
@media (max-width: 1100px) { .ls-lu-faces > .ph { width: 120px; } }
@media (max-width: 900px) {
  .ls-lu-tier.t1:has(.ls-lu-faces) { grid-template-columns: 1fr; }
  .ls-lu-faces > .ph { width: calc(50% - var(--sp-8)); max-width: 180px; }
  .ls-spk-photo { margin-bottom: var(--sp-20); }
  .rt-person-photo { margin-bottom: var(--sp-16); }
}

/* ── live Google Map on the venue page: the embed is light, so CSS turns it into a dark map that sits with the theme */
.ph.map.gmap { background-image: none; }
.ph.map.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9) brightness(.9); }
.ph.map.gmap .pin { pointer-events: none; z-index: 1; }
.ph.map.gmap .pin.hq > :not(:first-child), .ph.map.gmap .pin.hq { text-shadow: 0 0 8px var(--color-bg), 0 0 2px var(--color-bg); }
.ph.map.gmap .map-title { pointer-events: none; z-index: 1; background: var(--color-bg); padding: var(--sp-8) var(--sp-12); }
.map-col .ph-cap a { color: var(--color-text); white-space: nowrap; }
.map-col .ph-cap a:hover, .map-col .ph-cap a:hover b { color: var(--color-acid); }

/* ── rt-author: speaker / instructor box on talk and workshop pages (the Labra .author block) */
.rt-author-photo { width: 200px; margin-bottom: var(--sp-28); }
@media (max-width: 900px) { .rt-author-photo { width: 160px; margin-bottom: var(--sp-20); } }
.rt-author + .rt-author { margin-top: var(--sp-24); }
.rt-author .ctas { flex-wrap: wrap; }

/* ── rt-split: side column (idx, h2, facts) + .prose main column on detail pages */
.rt-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-64); align-items: start; }
.rt-split .side { position: sticky; top: 120px; display: grid; gap: var(--sp-28); }
.rt-split .side .h2 { font-size: var(--fs-side-s); }
.rt-facts { border-top: 1px solid var(--color-line); }
.rt-facts > div { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); }
.rt-facts .v { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); text-align: right; }
.prose .rt-learn-h { margin-top: var(--sp-56) !important; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24-32); --lh: 0.95; letter-spacing: var(--tracking-display); text-transform: uppercase; }
@media (max-width: 900px) {
  .rt-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
  .rt-split .side { position: static; }
  .prose .rt-learn-h { margin-top: var(--sp-40) !important; }
}

/* agenda rows: phone-only break (from the approved example) */
.ls-ag br.m { display: none; }
@media (max-width: 900px) { .ls-ag br.m { display: inline; } }

/* placeholder bodies (wave 2 replaces them) */
.rt-ph .lead { margin-top: var(--sp-32); }

/* ── rt-cred: one big credential figure in a side column (speaker pages) */
.rt-cred { display: grid; gap: var(--sp-12); padding-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.rt-cred .num { font-size: var(--fs-56-80); }

/* an e-mail address set as a card title: one step smaller, the domain is a long unbreakable line */
.h3.rt-mail { font-size: var(--fs-mail); }

/* hyphenated words never split across lines (build.py wraps them) */
.rt-nw { white-space: nowrap; }

/* titles broken per breakpoint by build.py (rbr): desktop copy / phone copy */
.rt-m { display: none; }
@media (max-width: 900px) {
  .rt-d { display: none; }
  .rt-m { display: inline; }
}

/* speaker page h1: a 9-letter first or last name (KOWALCZYK, LINDQVIST) steps down on phones */
@media (max-width: 900px) {
  .page-head .h1.rt-name-long { font-size: var(--fs-name-long); }
  .prose .rt-learn-h { font-size: var(--fs-20); }
}

/* names with accented capitals on the second line (Í, É, Ć): more line-height so the accent clears the line above */
.ls-spk-name { --lh: 0.98; }
.page-head .h1.rt-acc { --lh: 0.98; }

/* names with a 9-letter part in narrow cards / author boxes */
.ls-spk-name.rt-long { font-size: var(--fs-28-40); }
.author .name.rt-long { font-size: var(--fs-author-long); }

/* rt-xd: head crosshair shown on desktop only (on phones the head object sits under it) */
@media (max-width: 900px) {
  .page-head .x.rt-xd { display: none; }
}

/* rt-cta: CTA banner on generated pages (object picked from the slug). The object's left edge is pinned at 72% so its
   visible part stays right of the 2-line headline ("Tickets from €349.") whatever object the slug picks. */
.ls-cta.rt-cta .obj { left: 72%; }
@media (max-width: 900px) {
  .ls-cta.rt-cta .obj { left: auto; }
}

/* ── laptops (901–1199px): the desktop grids keep their columns in a 928–1103px content width, so the narrowest cells
   (4–6 columns) and the rows step their type down one more notch than the tokens do */
@media (min-width: 901px) and (max-width: 1199px) {   /* html prefix: these must beat the page-group files loaded after this one */
  html .row { grid-template-columns: 112px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .7fr) 140px; }
  html .row .c-act .btn, html .news-rows .row .c-act .btn { width: 140px; }
  html .row .c-name { font-size: var(--fs-18); }
  html .row .c-key, html .row .c-meta, html .row .c-stat { font-size: var(--fs-12); }
  html .info-hotels .h3, html .org-ib .h3, html .org-ed-c b, html .org-wm-s { font-size: var(--fs-16); }
  html .ls-tl .h3 { font-size: var(--fs-12); }
  html .info-topics .h4 { font-size: var(--fs-12); }
  html .ls-strip li { padding-left: var(--sp-12); padding-right: var(--sp-12); }
  html .org-wm:not(.org-wm-s):not(.org-wm-xs) { font-size: var(--fs-32); }
  html .org-wm-xs { font-size: var(--fs-14); }
  html .ls-strip .w-d { font-size: var(--fs-12); }
  html .ls-tl-y, html .community-tl .ls-tl-y { font-size: var(--fs-16); }
  html .org-brand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html .ls-spk-name.rt-long { font-size: var(--fs-24); }
  html .info-code-v { font-size: var(--fs-48); }
  html .author .name { font-size: var(--fs-32); }
  html .step p { overflow-wrap: anywhere; }
}

/* ===== motion (js/motion.js) — page curtain, Lenis smooth scroll, reveal. Off for prefers-reduced-motion. ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

.rt-curtain { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; padding: var(--sp-40) var(--sp-40); background: var(--color-bg); border-top: 2px solid var(--color-acid); pointer-events: none; transform: translateY(102%); visibility: hidden; }
.rt-curtain-label { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-56); --lh: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-text); white-space: nowrap; overflow: hidden; max-width: 100%; }
.rt-curtain-label::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--sp-24); vertical-align: middle; background: var(--color-acid); }
@media (max-width: 599px) { .rt-curtain { padding: var(--sp-24) var(--sp-16); } .rt-curtain-label { font-size: var(--fs-28); } .rt-curtain-label::before { width: 8px; height: 8px; margin-right: var(--sp-16); } }

html.rt-leaving .rt-curtain { visibility: visible; pointer-events: auto; animation: rt-cover .56s cubic-bezier(.76, 0, .24, 1) both; }
html.rt-leaving .rt-curtain-label { animation: rt-label-in .56s cubic-bezier(.22, 1, .36, 1) .12s both; }
html.rt-leaving main { animation: rt-push .56s cubic-bezier(.76, 0, .24, 1) both; }
html.rt-enter .rt-curtain { visibility: visible; transform: none; animation: rt-uncover .7s cubic-bezier(.76, 0, .24, 1) .12s both; }
html.rt-enter main { animation: rt-arrive .9s cubic-bezier(.22, 1, .36, 1) .2s both; }
@keyframes rt-cover { from { transform: translateY(102%); } to { transform: none; } }
@keyframes rt-uncover { from { transform: none; } to { transform: translateY(-102%); visibility: hidden; } }
@keyframes rt-label-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: none; } }
@keyframes rt-push { to { translate: 0 -64px; opacity: .4; } }
@keyframes rt-arrive { from { translate: 0 96px; } to { translate: none; } }

html.motion .rv { opacity: 0; translate: 0 48px; transition: opacity .9s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 0ms), translate 1.1s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 0ms); }
html.motion .rv.rv-in { opacity: 1; translate: none; }
html.motion .obj { will-change: translate, rotate; }

@media (prefers-reduced-motion: reduce) { .rt-curtain { display: none; } }
/* preloader: only on a fresh landing (head script adds html.rt-preload; internal links use the curtain instead).
   motion.js waits for the fonts and the first glass object (900 ms min, 2.4 s max), then lifts it and reveals the
   first screen. The CSS animation is the safety net if the script never runs. */
.rt-preloader { display: none; }
html.rt-preload .rt-preloader { display: flex; position: fixed; inset: 0; z-index: 210; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-24); background: var(--color-bg); animation: rt-pl-out .7s cubic-bezier(.76, 0, .24, 1) 3.2s both; }
.rt-pl-logo { font-family: var(--font-display); font-size: var(--fs-32); --lh: 1; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-text); animation: rt-pl-in .8s cubic-bezier(.22, 1, .36, 1) both; }
.rt-pl-bar { width: 160px; height: 2px; background: var(--color-line); overflow: hidden; }
.rt-pl-bar i { display: block; width: 100%; height: 100%; background: var(--color-acid); transform-origin: left; animation: rt-pl-bar 1.6s cubic-bezier(.22, 1, .36, 1) both; }
html.rt-loaded .rt-preloader { animation: rt-pl-out .7s cubic-bezier(.76, 0, .24, 1) both; }
html.rt-loaded .rt-pl-bar i { animation: none; transform: none; }
@keyframes rt-pl-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: none; } }
@keyframes rt-pl-bar { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@keyframes rt-pl-out { to { transform: translateY(-102%); visibility: hidden; } }
/* first-screen glass object grows in as the preloader lifts */
html.rt-preload main > :first-child .obj { opacity: 0; scale: .9; transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1) .25s, scale 1.6s cubic-bezier(.22, 1, .36, 1) .25s; }
html.rt-preload.rt-loaded main > :first-child .obj { opacity: 1; scale: 1; }
@media (max-width: 599px) { .rt-pl-logo { font-size: var(--fs-20); } .rt-pl-bar { width: 120px; } }


/* FAQ accordions: an acid hairline grows under the hovered / open question, the + turns into × and the question
   nudges right on hover; motion.js animates the answer's height (without JS the <details> opens instantly) */
.faq details { position: relative; }
.faq details::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-acid); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.faq details:hover::after, .faq details[open]:not(.closing)::after { transform: scaleX(1); }
.faq summary { transition: translate .45s cubic-bezier(.22, 1, .36, 1); }
.faq summary:hover { translate: 8px 0; }
.faq summary::after { display: inline-block; flex: none; transition: rotate .5s cubic-bezier(.22, 1, .36, 1); }
.faq details.closing summary::after { rotate: 0deg; }
.faq .faq-body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .faq details::after, .faq summary, .faq summary::after { transition: none; } .faq summary:hover { translate: none; } }



/* ═════ css/pages/community.css ═════ */
/* ═════ community pages (sponsors, speak, livestream, scholarships, volunteer) — group prefix "community-" ═════
   .community-open      open-spot cell in the sponsors logo grid (muted wordmark)
   .community-pc        pricing-columns with 4 package columns and 9 rows
   .community-roles     audience by role: label + horizontal bars (--v = share) + value; .on = the acid bar */
.ls-lg .community-open b { color: var(--color-muted); }

.community-pc { grid-template-columns: minmax(0, .9fr) repeat(4, minmax(0, 1fr)); }
.community-pc .ls-pc-col { grid-template-rows: 210px repeat(9, 60px) 104px; }
.community-pc .ls-pc-top { padding-bottom: var(--sp-28); }
.community-pc .price .num { font-size: var(--fs-40-48); }
.community-pc .ls-pc-col > div { padding: 0 var(--sp-24); font-size: var(--fs-12); }
.community-pc .ls-pc-keys > div { padding-left: 0; }
.community-pc .ls-pc-top .chip { left: 22px; }
.community-pc .ls-pc-act .label { padding: 0; }
@media (max-width: 900px) {
  .community-pc { grid-template-columns: minmax(0, 1fr); }
  .community-pc .ls-pc-col { grid-template-rows: none; }
  .community-pc .ls-pc-col > div { padding: var(--sp-12) 0; font-size: var(--fs-12); }
  .community-pc .ls-pc-col.hl > div { padding-left: 0; padding-right: 0; }
  .community-pc .ls-pc-top .chip { left: auto; }
  .community-pc .ls-pc-top { padding-bottom: var(--sp-24); }
}

.community-roles { margin-top: var(--sp-64); border-top: 1px solid var(--color-line); }
.community-roles-k { display: block; padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); }
.community-role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 88px; gap: var(--sp-32); align-items: center; padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); }
.community-role-n { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.community-role-bar { display: block; height: 10px; background: var(--color-line); }
.community-role-bar i { display: block; height: 100%; width: var(--v); background: var(--color-muted); }
.community-role-bar.on i { background: var(--color-acid); }
.community-role b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1; letter-spacing: var(--tracking-heading); text-align: right; }
@media (max-width: 900px) {
  .community-roles { margin-top: var(--sp-40); }
  .community-role { grid-template-columns: minmax(0, 1fr) 56px; gap: var(--sp-12) var(--sp-16); padding: var(--sp-16) 0; }
  .community-role-n { font-size: var(--fs-12); }
  .community-role-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .community-role b { font-size: var(--fs-18); }
}

/* .community-tl: timeline whose ticks are day dates ("30 Sep") instead of years — one step smaller so they fit a column */
.community-tl .ls-tl-y { font-size: var(--fs-20-28); white-space: nowrap; }
@media (max-width: 900px) {
  .community-tl .ls-tl-y { font-size: var(--fs-24); }
}

/* .community-facts: the "what to write" list inside the volunteer page's prose column */
.prose .community-facts { margin: var(--sp-40) 0; }
.prose .community-facts .label { font-size: var(--fs-12); }
@media (max-width: 900px) {
  .prose .community-facts { margin: var(--sp-28) 0; }
  .prose .community-facts .label { font-size: var(--fs-12); }
}


/* ═════ css/pages/info.css ═════ */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   INFO pages — travel, faq, code-of-conduct, accessibility, privacy, imprint, terms, 404.
   Every class is prefixed info-. Tokens only; one breakpoint at 900px, phone rules right after each block.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── info-code: hotel booking code row (travel) — code in display caps left, conditions right */
.info-code { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-48); align-items: end; margin-top: var(--sp-64); padding: var(--sp-32) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.info-code .label { display: block; margin-bottom: var(--sp-20); }
.info-code-v { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-32-80); --lh: 0.9; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-text); }
.info-code ul { display: grid; gap: var(--sp-12); }
.info-code li { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.info-code li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-12); }
@media (max-width: 900px) {
  .info-code { grid-template-columns: minmax(0, 1fr); gap: var(--sp-28); margin-top: var(--sp-40); padding: var(--sp-24) 0; }
  .info-code-v { font-size: var(--fs-32); }
  .info-code li { font-size: var(--fs-12); }
}

/* ── info-hotels: partner hotel columns — names up to 11 letters need a smaller h3 */
.info-hotels .h3 { font-size: var(--fs-18-24); }
.info-hotels .col { padding-left: var(--sp-28); padding-right: var(--sp-28); }
.info-hotels .col:first-child { padding-left: 0; }
.info-hotels .col:last-child { padding-right: 0; }
@media (max-width: 900px) {
  .info-hotels .h3 { font-size: var(--fs-20); }
  .info-hotels .col, .info-hotels .col:first-child { padding-left: 0; padding-right: 0; }
}

/* ── info-hotel: facts list at the foot of a hotel column */
.info-hotel { display: grid; gap: 0; margin-top: var(--sp-24); border-top: 1px solid var(--color-line); }
.info-hotel > div { display: flex; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-12) 0; border-bottom: 1px solid var(--color-line); }
.info-hotel .label { font-size: var(--fs-12); }
.info-hotel .v { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); text-align: right; }
@media (max-width: 900px) {
  .info-hotel { margin-top: var(--sp-20); }
  .info-hotel .label, .info-hotel .v { font-size: var(--fs-12); }
}

/* ── info-topics: FAQ topic index — 5 × 2 hairline cells linking to the groups */
.info-topics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.info-topics a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-40); min-height: 168px; padding: var(--sp-24) var(--sp-24) var(--sp-20); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.info-topics .tag { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); color: var(--color-acid); }
.info-topics .h4 { font-size: var(--fs-16-18); }
.info-topics .label { font-size: var(--fs-12); }
.info-topics a:hover .h4 { color: var(--color-acid); }
@media (max-width: 900px) {
  .info-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-topics a { min-height: 128px; gap: var(--sp-24); padding: var(--sp-16) var(--sp-16); }
  .info-topics .h4 { font-size: var(--fs-14); }
}

/* ── info-group: topic label above a .faq list (anchor target) */
.info-group { display: block; padding: 0 0 var(--sp-16); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); scroll-margin-top: 100px; }
.info-group b { color: var(--color-acid); font-weight: 500; margin-right: var(--sp-12); }
.faq + .info-group { margin-top: var(--sp-56); }
@media (max-width: 900px) {
  .info-group { font-size: var(--fs-12); }
  .faq + .info-group { margin-top: var(--sp-40); }
}

/* ── info-faq2: two topic columns side by side, each its own .faq list */
.info-faq2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-56); align-items: start; }
@media (max-width: 900px) {
  .info-faq2 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
}

/* ── info-dl: label / text rows (accessibility venue facts, imprint company details) */
.info-dl { border-top: 1px solid var(--color-line); }
.info-dl > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-48); padding: var(--sp-28) 0; border-bottom: 1px solid var(--color-line); }
.info-dl dt { display: grid; gap: var(--sp-12); align-content: start; }
.info-dl dt .h3 { font-size: var(--fs-20-24); }
.info-dl dd { font-size: var(--fs-16); --lh: 1.6; color: var(--ink-2); max-width: 62ch; }
.info-dl dd b { color: var(--color-text); font-weight: 600; }
.info-dl dd .mono { font-size: var(--fs-14); color: var(--color-text); }
@media (max-width: 900px) {
  .info-dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); padding: var(--sp-20) 0; }
  .info-dl dd { font-size: var(--fs-16); }
}

/* ── info-table: plain hairline table inside .prose (privacy retention, terms deadlines) */
.prose .info-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--color-line); }
.prose .info-table th, .prose .info-table td { padding: var(--sp-16) var(--sp-16) var(--sp-16) 0; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.prose .info-table th { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.prose .info-table td { font-size: var(--fs-16); --lh: 1.5; color: var(--ink-2); }
.prose .info-table td:first-child { color: var(--color-text); }
@media (max-width: 900px) {
  .prose .info-table th, .prose .info-table td { padding: var(--sp-12) var(--sp-12) var(--sp-12) 0; }
  .prose .info-table td { font-size: var(--fs-14); }
}

/* ── info-legal: legal long-read heads — the head h1 sits at h2 size, like the article head */
.page-head.short .info-updated { margin-top: var(--sp-20); }
.prose .info-addr { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.75; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
@media (max-width: 900px) {
  .prose .info-addr { font-size: var(--fs-12); }
}

/* ── info-legend-bl: map legend moved to the bottom-left corner (travel city map: the top-left holds stations) */
.ph.map .map-legend.info-legend-bl { top: auto; bottom: 16px; }

/* ── info-xd: head crosshair shown on desktop only (on phones the head object moves to the top right, under it) */
@media (max-width: 900px) {
  .page-head .x.info-xd { display: none; }
}

/* ── info-link: inline link in body copy outside .prose (FAQ answers, info rows) */
.info-link { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-acid); text-underline-offset: 3px; }
.info-link:hover { color: var(--color-acid); }


/* ═════ css/pages/news.css ═════ */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   NEWS — news.html (index) and news/<slug>.html (src/templates/article.html).
   Every class is prefixed news-. Tokens only; one breakpoint at 900px, phone rules right after each block.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── news-feat: latest post — text column left, the announcement's figures in a 2×2 hairline grid right */
.news-feat-idx { display: block; margin-bottom: var(--sp-40); }
.news-feat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-72); align-items: stretch; }
.news-feat-text { display: flex; flex-direction: column; }
.news-feat-text p { margin-top: var(--sp-24); max-width: 42ch; }
.news-feat-text .ctas { margin-top: var(--sp-32); }
.news-feat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; }
.news-feat-stats .stat { min-height: 220px; gap: var(--sp-40); }
.news-feat-stats .stat:nth-child(3) { padding-left: 0; border-left: 0; }
.news-feat-stats .stat:nth-child(n+3) { border-top: 1px solid var(--color-line); }
@media (max-width: 900px) {
  .news-feat-idx { margin-bottom: var(--sp-28); }
  .news-feat { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .news-feat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; }
  .news-feat-stats .stat { min-height: 160px; gap: var(--sp-28); }
  .news-feat-stats .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .news-feat-stats .stat:nth-child(n+3) { border-top: 1px solid var(--color-line); }
}

/* ── news-rows: post list — the date key needs a little more room than the default 128px */
.news-rows .row { grid-template-columns: 150px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) 140px; }
.news-rows .row .c-act .btn { width: 140px; }
@media (max-width: 900px) {
  .news-rows .row { grid-template-columns: minmax(0, 1fr) auto; }
  .news-rows .row .c-act .btn { width: auto; }
}

/* ── article page: contents rail foot + prose details */
.news-toc-foot { display: grid; justify-items: start; gap: var(--sp-20); margin-top: var(--sp-28); }
.news-toc-foot .label b { color: var(--color-acid); font-weight: 500; }
.news-prose > .note:first-child { margin-bottom: var(--sp-40); }
.news-prose .note a { color: var(--color-text); }
@media (max-width: 900px) {
  .news-toc-foot { margin-top: var(--sp-24); }
  .news-prose > .note:first-child { margin-bottom: var(--sp-28); }
}

/* ── news-article: the body grid never grows past the screen (long glued phrases, e-mail addresses) */
.news-article { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.news-prose { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 900px) {
  .news-article { grid-template-columns: minmax(0, 1fr); }
  .news-prose { min-width: 0; overflow-wrap: break-word; }
}


/* ═════ css/pages/org.css ═════ */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   ORG pages — about.html, archive-2026.html, press.html, contact.html. Every class prefixed org-.
   Tokens only; one breakpoint at 900px with the phone rules right after each block.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── about: 5-column history ruler (ls-tl is built for 6) */
.org-tl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .org-tl { grid-template-columns: minmax(0, 1fr); }
}

/* ── about: editions table. Desktop = header row + 3 rows of figures; phones = one card per edition. */
.org-ed { border-top: 1px solid var(--color-line); }
.org-ed-row { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.4fr) repeat(3, minmax(0, .6fr)) minmax(0, .7fr) minmax(0, 1fr); gap: var(--sp-24); align-items: baseline; padding: var(--sp-32) 0; border-bottom: 1px solid var(--color-line); }
.org-ed-head { padding: var(--sp-20) 0; }
.org-ed-head span { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.org-ed-name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-20-28); --lh: 0.95; letter-spacing: var(--tracking-display); text-transform: uppercase; white-space: nowrap; }
.org-ed-c b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-20-24); --lh: 1; letter-spacing: var(--tracking-heading); text-transform: uppercase; white-space: nowrap; }
.org-ed-t { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); --lh: 1.4; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.org-ed-k { display: none; }
.org-ed-row:not(.now) .org-ed-c b { color: var(--color-muted); }
.org-ed-row.now { box-shadow: inset 0 2px 0 var(--color-acid); background: var(--color-surface); padding-left: var(--sp-20); padding-right: var(--sp-20); margin: 0 -20px; }
@media (max-width: 900px) {
  .org-ed-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-16); padding: var(--sp-24) 0; }
  .org-ed-head { display: none; }
  .org-ed-name { grid-column: 1 / -1; font-size: var(--fs-28); margin-bottom: var(--sp-4); }
  .org-ed-c { display: grid; gap: var(--sp-8); }
  .org-ed-k { display: block; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
  .org-ed-c b { font-size: var(--fs-24); }
  .org-ed-t { font-size: var(--fs-12); }
  .org-ed-row.now { padding-left: var(--sp-16); padding-right: var(--sp-16); margin: 0 -16px; }
}

/* ── about: talk selection funnel — 4 hairline cells, a display figure each; the last cell .on gets the acid edge */
.org-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); list-style: none; }
.org-funnel li { display: flex; flex-direction: column; padding: var(--sp-40) var(--sp-32) var(--sp-48); border-bottom: 1px solid var(--color-line); }
.org-funnel li:first-child { padding-left: 0; }
.org-funnel li + li { border-left: 1px solid var(--color-line); }
.org-funnel li.on { box-shadow: inset 0 2px 0 var(--color-acid); }
.org-funnel .tag { margin-bottom: var(--sp-40); }
.org-funnel-n { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-40-64); --lh: 0.85; letter-spacing: var(--tracking-display); color: var(--color-text); margin-bottom: var(--sp-32); }
.org-funnel .h3 { font-size: var(--fs-20-24); margin-bottom: var(--sp-16); }
.org-funnel p { font-size: var(--fs-16); max-width: 30ch; }
@media (max-width: 1199px) {   /* laptops and tablets: 2 × 2 */
  .org-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-funnel li { padding: var(--sp-24) var(--sp-16) var(--sp-28); }
  .org-funnel li:first-child { padding-left: var(--sp-16); }
  .org-funnel li + li { border-left: 0; }
  .org-funnel li:nth-child(2n) { border-left: 1px solid var(--color-line); }
  .org-funnel li:nth-child(2n+1) { padding-left: 0; }
  .org-funnel .tag { margin-bottom: var(--sp-24); font-size: var(--fs-12); }
  .org-funnel-n { font-size: var(--fs-32); margin-bottom: var(--sp-20); }
  .org-funnel .h3 { font-size: var(--fs-18); }
  .org-funnel p { font-size: var(--fs-14); }
}
@media (max-width: 599px) {   /* phones: one stage per row — Michroma tags and titles need the full width */
  .org-funnel { grid-template-columns: minmax(0, 1fr); }
  .org-funnel li, .org-funnel li:first-child, .org-funnel li:nth-child(2n+1) { padding: var(--sp-24) 0 var(--sp-28); }
  .org-funnel li.on { padding-left: var(--sp-16); padding-right: var(--sp-16); }
  .org-funnel li:nth-child(2n) { border-left: 0; }
  .org-funnel .h3 { font-size: var(--fs-24); }
  .org-funnel p { font-size: var(--fs-16); }
}

/* ── press: fact sheet — key / value rows on hairlines */
.org-sheet { border-top: 1px solid var(--color-line); }
.org-sheet > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-20) 0; border-bottom: 1px solid var(--color-line); }
.org-sheet dt { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.6; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.org-sheet dd { font-size: var(--fs-18); --lh: 1.5; color: var(--color-text); }
@media (max-width: 900px) {
  .org-sheet > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-16) 0; }
  .org-sheet dt { font-size: var(--fs-12); }
  .org-sheet dd { font-size: var(--fs-16); }
}

/* ── press: boilerplate columns — the copy itself, wider measure */
.org-boiler .col p { max-width: 58ch; font-size: var(--fs-18); --lh: 1.6; color: var(--color-text); }
.org-boiler .col:first-child { padding-left: 0; }
@media (max-width: 900px) {
  .org-boiler .col p { font-size: var(--fs-16); }
  .org-boiler .col:first-child { padding-left: 0; }
}

/* ── press: wordmark specimens (live type), colour swatches, do / don't lists */
.org-brand { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.org-brand-cell { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-48); min-height: 360px; padding: var(--sp-40) var(--sp-32) var(--sp-32); }
.org-brand-cell:first-child { padding-left: 0; }
.org-brand-cell + .org-brand-cell { border-left: 1px solid var(--color-line); }
.org-wm { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-32-64); --lh: 0.9; letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-text); }
.org-wm-s { font-size: var(--fs-18-24); white-space: nowrap; }
.org-wm-xs { font-size: var(--fs-14-16); white-space: nowrap; }
.org-clear { align-self: flex-start; padding: var(--sp-24); border: 1px dashed var(--color-line-strong); }
.org-brand-cap { display: grid; gap: var(--sp-12); }
.org-brand-cap .label { font-size: var(--fs-12); }
@media (max-width: 900px) {
  .org-brand { grid-template-columns: minmax(0, 1fr); }
  .org-brand-cell, .org-brand-cell:first-child { min-height: 0; gap: var(--sp-32); padding: var(--sp-28) 0; }
  .org-brand-cell + .org-brand-cell { border-left: 0; border-top: 1px solid var(--color-line); }
  .org-wm { font-size: var(--fs-40-144); }
  .org-wm-s { font-size: var(--fs-24); }
  .org-wm-xs { font-size: var(--fs-18); }
}
.org-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); }
.org-swatches > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-16); align-items: center; padding: var(--sp-20) var(--sp-24) var(--sp-20) 0; }
.org-swatches > div + div { padding-left: var(--sp-24); border-left: 1px solid var(--color-line); }
.org-sw { display: block; width: 28px; height: 28px; border: 1px solid var(--color-line-strong); }
.org-sw-bg { background: var(--color-bg); }
.org-sw-tx { background: var(--color-text); }
.org-sw-ac { background: var(--color-acid); }
.org-sw-mu { background: var(--color-muted); }
@media (max-width: 900px) {
  .org-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-swatches > div, .org-swatches > div + div { grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-4) var(--sp-12); padding: var(--sp-16) 0; border-left: 0; }
  .org-swatches > div:nth-child(2n) { padding-left: var(--sp-16); border-left: 1px solid var(--color-line); }
  .org-swatches > div:nth-child(-n+2) { border-bottom: 1px solid var(--color-line); }
  .org-sw { width: 24px; height: 24px; grid-row: span 2; }
  .org-swatches .label { font-size: var(--fs-12); }
}
.org-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-64); margin-top: var(--sp-56); }
.org-rules .h3 { font-size: var(--fs-20-28); margin-bottom: var(--sp-20); }
.org-rules ul { border-top: 1px solid var(--color-line); }
.org-rules li { padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.org-rules li::before { content: "+"; color: var(--color-acid); margin-right: var(--sp-16); }
.org-rules .org-dont li { color: var(--color-muted); }
.org-rules .org-dont li::before { content: "–"; color: var(--color-muted); }
@media (max-width: 900px) {
  .org-rules { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); margin-top: var(--sp-40); }
  .org-rules li { font-size: var(--fs-12); padding: var(--sp-16) 0; }
}

/* ── contact: inbox grid — 4 × 2 hairline cells, address + reply time pinned to the foot */
.org-inbox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.org-ib { display: flex; flex-direction: column; min-height: 330px; padding: var(--sp-28) var(--sp-24) var(--sp-24); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.org-ib .tag { margin-bottom: var(--sp-28); }
.org-ib .h3 { font-size: var(--fs-20-28); margin-bottom: var(--sp-16); }
.org-ib p { font-size: var(--fs-16); --lh: 1.45; }
.org-ib-foot { display: grid; gap: var(--sp-8); margin-top: auto; padding-top: var(--sp-20); border-top: 1px solid var(--color-line); }
.org-ib-foot .label { font-size: var(--fs-12); overflow-wrap: anywhere; }
.org-ib-foot a.label:hover { color: var(--color-acid); }
@media (max-width: 900px) {
  .org-inbox { grid-template-columns: minmax(0, 1fr); border-left: 0; }
  .org-ib { min-height: 0; padding: var(--sp-24) 0 var(--sp-20); border-right: 0; }
  .org-ib .tag { margin-bottom: var(--sp-16); }
  .org-ib .h3 { font-size: var(--fs-24); margin-bottom: var(--sp-12); }
  .org-ib p { font-size: var(--fs-16); }
  .org-ib-foot { margin-top: var(--sp-20); padding-top: var(--sp-16); }
}

/* ── contact: section label above a headline-less stats row; addresses */
.org-idx { margin-bottom: var(--sp-32); }
.org-addr { font-size: var(--fs-18); --lh: 1.55; color: var(--color-text); }
@media (max-width: 900px) {
  .org-idx { margin-bottom: var(--sp-24); }
  .org-addr { font-size: var(--fs-16); }
}

/* ── rows with a label instead of a button in the action cell (archive talks, contact on-site) */
.org-talks .row .c-act, .org-onsite .row .c-act { text-align: right; }
.org-talks .row .c-act .label, .org-onsite .row .c-act .label { font-size: var(--fs-12); }
@media (max-width: 900px) {
  .org-talks .row .c-act, .org-onsite .row .c-act { text-align: right; }
  .org-talks .row .c-act .label, .org-onsite .row .c-act .label { font-size: var(--fs-12); }
}


/* ═════ css/pages/sched.css ═════ */
/* ═════ schedule page (schedule.html): the 3-day timetable — group prefix "sched-" ═════
   .sched-day panel per day (id + data-day-panel = wed/thu/tue), .sched-dayhead, .sched-cols (stage labels),
   ol.sched-list > li.sched-row: time | Main cell | Deep-dive cell; .is-break / .is-solo rows span both stages;
   workshop day rows hold .sched-ws (4 rooms). Day tabs (.sched-tabs) only show when JS runs (html.js). */
.sched-tabs { display: none; }
.js .sched-tabs { display: flex; }
.sched-tabs .chip { height: 40px; padding: 0 var(--sp-20); cursor: pointer; background: transparent; font-size: var(--fs-12); }
.sched-tabs .chip.on { background: var(--color-acid); }
.sched-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); flex-wrap: wrap; margin-bottom: var(--sp-40); }
.sched-day { display: block; }
.sched-day[hidden] { display: none; }
.sched-day + .sched-day { margin-top: var(--sp-88); }
.sched-dayhead { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--sp-24); align-items: baseline; padding: var(--sp-20) 0; border-top: 1px solid var(--color-line-strong); }
.sched-dayhead .tag { margin: 0; }
.sched-dayhead .h3 { font-size: var(--fs-20-32); }
.sched-cols { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--color-line); }
.sched-cols .label { padding: var(--sp-12) var(--sp-24); border-left: 1px solid var(--color-line); font-size: var(--fs-12); }
.sched-list { list-style: none; border-top: 1px solid var(--color-line); }
.sched-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--color-line); }
.sched-t { padding: var(--sp-24) 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-24); --lh: 1; letter-spacing: var(--tracking-heading); }
.sched-t small { display: inline-block; margin-top: var(--sp-8); font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.sched-cell { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-24) var(--sp-24) var(--sp-24); border-left: 1px solid var(--color-line); }
.sched-cell .h3 { font-size: var(--fs-18-20); --lh: 1.15; }
.sched-cell .mono { color: var(--color-muted); font-size: var(--fs-12); }
.sched-meta { display: flex; gap: var(--sp-12); align-items: center; flex-wrap: wrap; }
.sched-meta .label { font-size: var(--fs-12); }
.sched-meta .chip { height: 20px; padding: 0 var(--sp-8); font-size: var(--fs-12); }
.sched-stage { display: none; padding: var(--sp-4) var(--sp-8); border: 1px solid var(--color-line-strong); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); --lh: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.sched-span { grid-column: 2 / -1; border-left: 1px solid var(--color-line); }
.sched-span > .sched-cell { border-left: 0; }
.is-break .sched-span { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-24); padding: var(--sp-24) var(--sp-24); }
.is-break .h3 { font-size: var(--fs-16); color: var(--color-muted); }
.is-break .mono { font-size: var(--fs-12); color: var(--color-muted); }
.is-break .sched-t { color: var(--color-muted); }
.is-key .sched-t { color: var(--color-acid); }
.is-key .sched-cell .h3 { font-size: var(--fs-24-32); }
.is-party .h3 { color: var(--color-text); }
.sched-ws { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sched-ws .sched-stage { display: inline-block; }
.sched-day[data-day-panel="tue"] .sched-row { grid-template-columns: 120px minmax(0, 1fr); }
.sched-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); margin-top: var(--sp-40); }
@media (max-width: 900px) {
  .sched-day + .sched-day { margin-top: var(--sp-64); }
  .sched-dayhead { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
  .sched-cols { display: none; }
  .sched-row, .sched-day[data-day-panel="tue"] .sched-row { grid-template-columns: 62px minmax(0, 1fr); }
  .sched-t { padding: var(--sp-20) 0; font-size: var(--fs-16); }
  .sched-t small { font-size: var(--fs-12); }
  .sched-cell { grid-column: 2; padding: var(--sp-20) 0 var(--sp-20) var(--sp-16); }
  .sched-row > .sched-cell + .sched-cell { border-top: 1px solid var(--color-line); }
  .sched-row > .sched-cell + .sched-cell { grid-row: 2; }
  .sched-cell.is-empty { display: none; }
  .sched-stage { display: inline-block; }
  .sched-span { grid-column: 2; }
  .is-break .sched-span { flex-direction: column; gap: var(--sp-8); padding: var(--sp-20) 0 var(--sp-20) var(--sp-16); }
  .is-break .h3 { font-size: var(--fs-14); }
  .is-key .sched-cell .h3 { font-size: var(--fs-20); }
  .sched-ws { grid-column: 2; grid-template-columns: minmax(0, 1fr); }
  .sched-ws .sched-cell + .sched-cell { border-top: 1px solid var(--color-line); }
  .sched-foot { flex-direction: column; align-items: flex-start; }
  .sched-tabs .chip { height: 36px; padding: 0 var(--sp-12); font-size: var(--fs-12); }
  .sched-row > .sched-t { grid-row: 1 / span 2; }
}