/* ============================================================
   Noche — the second cut. Black and white, no gold; the field can turn to paper.
   ============================================================ */
body.noir { transition: color .6s ease, background-color .6s ease; }
body.noir.is-light { --bg: #ece8df; --ink: #0b0c12; --ink-dim: #5d6170; --ink-faint: #d3cec3; }
body.noir .bar { transition: background .6s ease, border-color .6s 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 .frame__corner i, body.noir .row, body.noir .index, body.noir .person, body.noir .card__media { transition: border-color .6s ease; }
body.noir .close__meta a { text-decoration: none; color: var(--accent-soft); }

/* 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 sections alternate their heads: left, right, centre */
body.noir .block__head { justify-items: start; text-align: left; }
body.noir .block--cards .block__head { justify-items: end; text-align: right; }
body.noir .block--index .block__head { justify-items: center; text-align: center; }
body.noir .block--team .block__head { justify-items: end; text-align: right; }
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); }
body.noir .hud--cap1 { left: auto; right: calc(var(--frame) + 40px); bottom: 26vh; text-align: right; align-items: flex-end; }
body.noir .hud--cap2 { right: auto; left: var(--frame); top: 30vh; }

@media (max-width: 900px) {
  body.noir .hero { align-content: end; padding-bottom: calc(var(--frame) + 64px); }
  body.noir .hero__meta { display: none; }
  body.noir .hud--tl { display: none; }
  body.noir .hud--cap1 { right: var(--frame); }
}

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


/* the act (01 — the studio): the faces come up bright and coloured under this copy, so the words carry their own shadow */
body.noir #studio .lead, body.noir #studio .body, body.noir #studio .block__label, body.noir #studio .mono-tag,
body.noir .hero__tagline, body.noir .hero__meta, body.noir .hero__tags {
  text-shadow: 0 0 2px #05060a, 0 0 10px #05060a, 0 0 26px rgba(5, 6, 10, .95), 0 2px 4px rgba(0, 0, 0, .9);
}
body.noir #studio .body { opacity: .94; }
body.noir .close__ask, body.noir .close__big, body.noir .close__line, body.noir .close__meta, body.noir .close__mark {
  text-shadow: 0 0 2px #05060a, 0 0 10px #05060a, 0 0 26px rgba(5, 6, 10, .95), 0 2px 4px rgba(0, 0, 0, .9);
}
/* the ending: a quiet pool of dark behind the words, so they read over her light */
body.noir .close { position: relative; isolation: isolate; }
body.noir .close::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(5, 6, 10, .62), rgba(5, 6, 10, .30) 55%, transparent 100%);
}
/* on paper the ink bleeds under the words: a white halo keeps the dark type crisp */
body.noir.is-light #work .block__label, body.noir.is-light #work .block__sub, body.noir.is-light #work .mono-tag,
body.noir.is-light #index .block__label, body.noir.is-light #index .rowx__title, body.noir.is-light #index .rowx__num, body.noir.is-light #index .mono-tag, body.noir.is-light #index .say {
  text-shadow: 0 0 2px #f4f3ef, 0 0 10px #f4f3ef, 0 0 24px rgba(244, 243, 239, .9);
}
/* the people: the copy sits on paper that is burning into night — dark type with a paper halo while the paper holds, light type with a night halo once it has burned */
body.noir .block--team .block__label, body.noir .block--team .block__num, body.noir .block--team .team {
  text-shadow: 0 0 2px #05060a, 0 0 10px #05060a, 0 0 26px rgba(5, 6, 10, .95), 0 2px 4px rgba(0, 0, 0, .9);
}
body.noir.is-light .block--team .block__label, body.noir.is-light .block--team .block__num, body.noir.is-light .block--team .team {
  text-shadow: 0 0 2px #f4f3ef, 0 0 10px #f4f3ef, 0 0 24px rgba(244, 243, 239, .95);
}
body.noir .block--team .block__label, body.noir .block--team .team { transition: color .6s ease, text-shadow .6s ease; }
