/* ============================================================
   Noche — the second cut. Black and white, no gold; the field can turn to paper.
   Design plan, batch 1 (2026-09-18): the field is tamed in the shader under every line that sits on it (uTame, noir.js);
   body copy sits on solid ink / paper panels (material B); work and index are flat paper; the phone hero is an ink band.
   No text-shadows and no blurred pools — those were the symptom the jury kept naming.
   ============================================================ */
body.noir { transition: color .45s ease, background-color .45s ease; }
body.noir.is-light { --bg: var(--paper, #ece8df); --ink: #0b0c12; --ink-dim: #5d6170; --ink-faint: #d3cec3; }   /* --paper: dwell-to-light — noir.js sets it from the light gathered on her face (#bdbab2 for a visitor who never lingered → #ece8df for one who did); the field's uPaperCol is the same value, so panels and field stay one surface */
body.noir .bar { transition: background .45s ease, border-color .45s ease; }
body.noir.is-light .bar { background: rgba(236,232,223,.55); border-color: rgba(11,12,18,.14); }
body.noir.is-light .bar__cta { color: #ece8df; }
body.noir .row, body.noir .index, body.noir .person, body.noir .card__media { transition: border-color .45s ease; }
body.noir .close__meta a { text-decoration: none; color: var(--accent-soft); }

/* ---- the seam (craft pass, 2026-09-23 — MOVEMENT): one fade per act change, 300–500 ms. noir.js flips `is-on` when the act
   changes (dark face → white → colour end); the sheet dips to black over 160 ms and lifts over 260 ms, one dip per change,
   under the chrome and the cursor. Every act-change transition above is .45 s to match. Reduced motion: no sheet, no
   transitions — the acts cut. */
.seam { position: fixed; inset: 0; z-index: 5; background: #05060a; opacity: 0; pointer-events: none; transition: opacity .25s ease-out; }
.seam.is-on { opacity: .92; transition-duration: .15s; transition-timing-function: ease-in; }
@media (prefers-reduced-motion: reduce) {
  .seam { display: none; }
  body.noir, body.noir .bar, body.noir .row, body.noir .index, body.noir .person, body.noir .card__media,
  body.noir #studio .col--body, body.noir .founder figcaption, body.noir .block--team .person, body.noir .close__meta, body.noir .close__foot,
  body.noir .frags--work .box[data-cel="site"] .box__media::before { transition: none; }
}
/* the index status on paper: ink, like the tag */
body.noir.is-light .rowx__status { color: #5d6170; }
body.noir.is-light .rowx:hover .rowx__status { color: #0b0c12; }

/* hero: the name sits in the black to the left of her profile */
body.noir .hero { align-content: center; padding-bottom: 0; }
body.noir .hero__title { font-size: clamp(56px, 7.4vw, 124px); }
body.noir .hero__tagline { max-width: 20ch; }
body.noir .hero__meta { right: auto; left: 0; bottom: calc(-1 * var(--frame) - 4vh); justify-items: start; }

/* the section heads */
body.noir .block__head { justify-items: start; text-align: left; }
body.noir .block--cards .block__head, body.noir .block--index .block__head, body.noir .block--team .block__head { justify-items: start; text-align: left; }   /* one rhythm (2026-09-23): every head sits left with its number, like one studio site */
body.noir .statement__stack { width: min(100%, 12ch); }
body.noir .statement__line--small { font-style: normal; letter-spacing: .04em; font-family: var(--mono); font-size: .16em; text-transform: uppercase; }

/* the HUD reads on the right, vertically, in this cut */
body.noir .hud--tl { left: auto; right: var(--frame); top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
body.noir .hud--tr { right: auto; left: var(--frame); }

/* the phone hero: her face in the top of the screen, nothing over it; the name and the line on a solid ink band below */
@media (max-width: 900px) {
  body.noir .hero { align-content: end; padding: 0; height: 100svh; min-height: 0; }
  body.noir .hero__title {
    width: 100%; box-sizing: border-box; min-height: 40svh; align-content: start; gap: 12px;
    background: var(--bg); border-top: 1px solid var(--ink-faint);
    padding: 24px var(--frame) calc(96px + env(safe-area-inset-bottom, 0px));
    font-size: 44px;
  }
  body.noir .hero__tagline { font-size: 20px; line-height: 1.2; max-width: 18ch; }
  body.noir .hero__meta { display: none; }
  body.noir .hud--tl { display: none; }
}

body.noir .card__media { background: #ece8df; border-color: #d3cec3; }

/* ---- material B: the panel. Body copy never sits on the field. It sits on solid ink — or on solid paper once the page has turned —
   with a hairline, and the field stays alive around it. */
body.noir #studio .col--body,
body.noir .founder figcaption,
body.noir .block--team .person,
body.noir .close__meta,
body.noir .close__foot {
  position: relative; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--ink-faint);
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}
body.noir #studio .col--body { margin-top: 4.5em; padding: clamp(18px, 2.4vw, 36px); }
body.noir #studio .body { opacity: 1; }
body.noir .founder { gap: 0; }                                                     /* portrait and plate are one object */
body.noir .founder figcaption { border-top: 0; padding: clamp(18px, 2vw, 24px); }
body.noir .founder__bio { opacity: 1; }
body.noir .block--team .person { padding: clamp(18px, 2vw, 24px); }
body.noir .block--team .person__role { opacity: 1; }
body.noir .close__meta { padding: 18px 24px; width: min(720px, 100%); }
body.noir .close__foot { margin-top: -18px; border-top: 0; padding: 12px 24px 18px; opacity: 1; }   /* stacked flush under the meta plate */
@media (max-width: 900px) {
  body.noir #studio .col--body { margin-top: 0; }
  body.noir .close__meta, body.noir .close__foot { padding-left: 18px; padding-right: 18px; }
}

/* on the paper the brand and the links are ink */
body.noir.is-light .bar__brand-name { color: #0b0c12; }
body.noir.is-light .bar__brand-name .dot { color: var(--accent); }
body.noir.is-light .bar__links a, body.noir.is-light .bar__status, body.noir.is-light .snd__btn { color: #0b0c12; }

/* the index on paper: the row lines in ink */
body.noir.is-light .rowx__tag { color: var(--paper-ink, #1a1b22); }

/* paper captions in ink, AA on the cream */
body.noir.is-light #work .mono-tag, body.noir.is-light #work .box__kind { color: #2a2c38; }

/* ============================================================
   Design plan, batch 2 (2026-09-18) — frames, type roles, colour discipline.
   ============================================================ */

/* ---- 6. work framed as objects: one cel per medium, inside the same 16:10 box ---- */
body.noir .frags--work .box__media { border: 1px solid var(--ink-faint); background: #05060a; }
body.noir .frags--work .box[data-cel="site"] .box__media { background: var(--ink-faint); }
body.noir .frags--work .box[data-cel="site"] .box__media::before {            /* the browser cel: a slim chrome strip with three lights */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 2;
  background: var(--ink-faint);
  background-image: radial-gradient(circle 3px at 12px 11px, var(--ink-dim) 98%, transparent), radial-gradient(circle 3px at 24px 11px, var(--ink-dim) 98%, transparent), radial-gradient(circle 3px at 36px 11px, var(--ink-dim) 98%, transparent);
  transition: background-color .45s ease;
}
body.noir .frags--work .box[data-cel="site"] .box__poster { top: 22px; height: calc(100% - 22px); object-position: top; }   /* the capture starts under the chrome, cropped from the top, never a scroll */
body.noir .frags--work .box[data-cel="app"] .box__media { background: #05060a; }                                             /* the device board: the phones on ink, uncropped */
body.noir .frags--work .box[data-cel="app"] .box__poster { object-fit: cover; }
body.noir .frags--work .box:hover .box__poster { transform: scale(1.03); }
/* one caption style: the name in Archivo, the kind as a mono eyebrow; no chip, no blue */
body.noir .frags--work .box figcaption { border-top: 1px solid var(--ink-faint); padding-top: 12px; align-items: baseline; }
body.noir .frags--work .box figcaption .box__name { display: inline-block; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .01em; color: var(--ink); background: none; padding: 0; margin: 0; text-transform: none; }
body.noir .frags--work .box figcaption .box__kind { background: none; padding: 0; margin: 0; color: var(--ink-dim); }
body.noir.is-light .frags--work .box figcaption .mono-tag, body.noir.is-light .frags--work .box figcaption .box__name { background: none; }
body.noir.is-light #work .box__kind { color: var(--ink-dim); }

/* ---- 7. one job per typeface: Ibarra for display only (≥ 40px); Archivo for every paragraph, label and caption; Mono for HUD, eyebrows, pricing, timecode ---- */
body.noir .lead { font-family: var(--sans); font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -.005em; }
body.noir .body, body.noir .card__body, body.noir .row__desc { font-family: var(--sans); font-weight: 300; font-size: var(--t-body); line-height: 1.5; }
body.noir .founder__bio { font-family: var(--sans); font-weight: 300; font-size: var(--t-body); line-height: 1.55; }
body.noir .founder__name { font-family: var(--sans); font-weight: 400; font-size: clamp(20px, 1.6vw, 24px); letter-spacing: 0; }
body.noir .person__role { font-family: var(--sans); font-weight: 300; font-size: var(--t-body); line-height: 1.5; }
body.noir .hud--cap p em { font-family: var(--sans); font-style: normal; font-size: 1em; color: var(--ink); }
body.noir .bar__cta-roll span + span { font-family: var(--sans); font-style: normal; font-weight: 500; }
body.noir .close__line { font-family: var(--sans); font-weight: 300; font-style: normal; font-size: var(--t-lead); opacity: 1; }
body.noir .close__mail { font-family: var(--sans); font-weight: 400; font-size: var(--t-lead); letter-spacing: .01em; }
body.noir .talk__done { font-family: var(--sans); }

/* ---- 8. colour discipline: blue means "this responds to you" — the CTA, the cursor, active and hover states, focus, progress; nowhere else ---- */
body.noir .block__num { color: var(--ink-dim); }
body.noir .manifesto__line em { color: var(--ink); }
body.noir .block__label--xl em { color: var(--ink); }
body.noir .box__kind { color: var(--ink-dim); }
body.noir .person__num { color: var(--ink-dim); }
body.noir .veil__num { color: var(--ink-dim); }
body.noir .filters .chip::before { color: var(--ink-dim); }
body.noir .hud--reticle i { border-color: var(--ink-dim); }
body.noir .close__open { color: var(--ink); }                                  /* the pulse stays blue: it is the live status */
body.noir .dc.is-x { color: var(--ink-dim); }
body.noir .veil__meta a, body.noir .close__meta a { color: var(--ink); }

/* ============================================================
   Design plan, batch 3 (2026-09-18) — the reset frame, the index input, the founder field hook.
   ============================================================ */

/* ---- 9. one field-free frame between the statement and the work: raw film on flat black, letterboxed, held for a screen ---- */
body.noir .still { position: relative; z-index: 1; padding: 0; min-height: 100vh; display: grid; align-content: center; background: #05060a; }
body.noir .still__fig { margin: 0; position: relative; width: 100%; aspect-ratio: 2.39 / 1; overflow: visible; background: #000; }   /* the image is inset 0 and clips itself; the caption hangs below */
body.noir .still__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
body.noir .still__cap { position: absolute; left: var(--frame); top: 100%; margin-top: 18px; display: flex; gap: 24px; color: var(--ink); opacity: .85; }   /* in the black band under the frame — never over her */
body.noir .still__cap span + span::before { content: '·'; margin-right: 24px; color: var(--ink-dim); }
@media (max-width: 900px) {
  body.noir .still { min-height: 0; padding: 10vh 0 14vh; }
  body.noir .still__fig { aspect-ratio: 4 / 5; }                                   /* on a phone the frame stands: her face, not a strip */
  body.noir .still__img { object-position: 50% 30%; }
  body.noir .still__cap { flex-wrap: wrap; gap: 6px 18px; right: var(--frame); margin-top: 12px; }
  body.noir .still__cap span + span::before { margin-right: 18px; }
}

/* ---- 10. the index: rows that read on paper — a name and one line (2026-09-23) ---- */
body.noir .rowx__tag { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); }
body.noir.is-light .rowx__tag { color: #1a1b22; }

/* ---- 11. the founder through the field (needs a raw portrait; see the note in index.html) ---- */
body.noir .founder .box__media .case__field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.noir .founder .box__media.has-field .box__poster { visibility: hidden; }

/* ---- jury pass (2026-09-18, late): legibility of the small chrome and the spelled lines ---- */
body.noir .manifesto__caption { color: var(--ink); opacity: 1; font-size: 12px; text-shadow: none; }      /* the line said plainly; the tamer quiets the field under it */
body.noir .hud { color: var(--ink); font-size: 12px; }                                                    /* no opacity here: the captions fade themselves in and out */
body.noir .hud__num { color: var(--ink); }
@media (max-width: 1500px) { body.noir .bar__status-txt { display: none; } }                              /* the pill keeps its dot, not its sentence, until there is room */

/* ---- ninth-run follow-ups ---- */
@media (max-width: 900px) { .case__hint { display: none; } }                                        /* the phone-width hint clipped at the frame's edge */
body.noir .bar__cta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent-soft); }   /* one ring, not two */
body.noir .bar__cta:focus-visible:not(:hover) .bar__cta-roll span:first-child { transform: none; }
body.noir .bar__cta:focus-visible:not(:hover) .bar__cta-roll span + span { transform: translateY(1.2em); }   /* the label rolls to Spanish on hover only; focus returning after the talk closes does not flip it */