/* MBK v1 — base (read-only shared layer). Extend in your own sheet. */

/* ADOPT pass (2026-07-09, item 1): interactive type token — 13px, one step up from the
   11px --size-eyebrow. Applies ONLY to interactive targets (nav links, buttons, chips,
   CTA links, form labels) via the token, never to .eyebrow/.file-no/.timecode/footer-legal,
   which stay at --size-eyebrow. Lives in base.css (not tokens.css, which is read-only). */
:root {
  --size-ui: 0.8125rem; /* 13px */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--size-body);
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
}
img, iframe, video { max-width: 100%; display: block; border: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
a:hover { color: var(--red); }
/* ADOPT pass (item 2): baseline focus-visible/active for every plain link site-wide
   (nav-wordmark, footer/contact links, prose links, exits) — currentColor keeps the
   single-red-accent law intact; components below layer their own where a tighter
   pattern (e.g. the cuesheet chip's red ring, ported from cuesheet-v2.css) is called for. */
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
a:active { opacity: 0.7; }
::selection { background: var(--ink); color: var(--paper); }

/* grounds */
.room-dark { background: var(--ink); color: var(--paper); }
.room-dark ::selection { background: var(--paper); color: var(--ink); }
.room-paper { background: var(--paper); color: var(--ink); }

/* containers */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: 24px; }

/* type */
.didone { font-family: var(--font-didone); font-weight: 400; }
h1, h2, h3 { font-family: var(--font-didone); font-weight: 400; line-height: 1.08; }
h1 { font-size: var(--size-hero); }
h2 { font-size: var(--size-h2); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-eyebrow);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--grey-2);
}
.room-dark .eyebrow { color: var(--ecru-dim); }
.small { font-size: var(--size-small); color: var(--grey-2); }

/* the one red rule per page */
.rule-red { width: var(--rule-w); height: var(--rule-h); background: var(--red); border: 0; }

/* hairlines */
.hairline { border: 0; border-top: 1px solid var(--line-on-paper); }
.room-dark .hairline { border-top-color: var(--line-on-ink); }

/* nav */
.site-nav {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 28px 32px;
}
.nav-wordmark { font-family: var(--font-didone); font-size: 1.35rem; letter-spacing: 0.08em; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: var(--size-ui); letter-spacing: var(--track-wide);
  text-transform: uppercase; font-weight: 400;
}
.nav-cta { border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav-cta:hover { border-color: var(--red); }

/* buttons & fields */
.btn {
  display: inline-block; font-family: var(--font-sans);
  font-size: var(--size-ui); letter-spacing: var(--track-wide); text-transform: uppercase;
  padding: 14px 28px; border: 1px solid currentColor; background: transparent; color: inherit;
  cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { color: var(--red); border-color: var(--red); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn:active { opacity: 0.78; }
.field { display: block; width: 100%; margin-bottom: 20px; }
.field label {
  display: block; font-size: var(--size-ui); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--grey-2); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-sans); font-weight: 300; font-size: 1rem;
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--line-on-paper); padding: 8px 0; border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { border-bottom-color: var(--grey-1); }
/* input affordance (punch-list #3, option b): red caret + faint focus fill so the writing surface
   reads as a field the moment it's touched — resting minimalism unchanged */
.field input, .field textarea, .field select { caret-color: var(--red); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); background: rgba(10, 10, 10, 0.035); }
.room-dark .field input:focus, .room-dark .field textarea:focus, .room-dark .field select:focus { border-bottom-color: var(--paper); background: rgba(245, 241, 228, 0.05); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* the needle drop — selecting text drops the red in (wink #6, KOVAS 2026-07-10) */
::selection { background: var(--red); color: #fff; }

/* footer */
.site-footer { padding: 64px 32px 48px; border-top: 1px solid var(--line-on-paper); }
/* Room Time — the session clock (wink #2). JS-injected by motion.js; ticking is the point. */
.footer-roomtime { margin-top: 14px; font-variant-numeric: tabular-nums; font-size: var(--size-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--grey-1); cursor: default; }
.site-footer .footer-line { font-family: var(--font-didone); font-size: 1.1rem; margin-bottom: 12px; }
.site-footer .footer-contact { font-size: var(--size-small); margin-bottom: 6px; }
.site-footer .footer-legal { font-size: var(--size-eyebrow); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--grey-1); }

/* insider marks */
.file-no {
  font-size: var(--size-eyebrow); letter-spacing: var(--track-label);
  color: var(--grey-1); text-transform: uppercase;
}
.award-mark { color: var(--red); font-style: normal; }
.timecode { font-variant-numeric: tabular-nums; font-size: var(--size-eyebrow); letter-spacing: 0.12em; color: var(--grey-1); }

@media (max-width: 820px) {
  .site-nav { flex-wrap: wrap; row-gap: 10px; padding: 20px 20px; }
  .nav-wordmark { flex: 0 0 100%; }
  .nav-links { gap: 16px; flex-wrap: wrap; row-gap: 8px; }
  .nav-links a { white-space: nowrap; }
}
/* nav compaction (Premier note, 2026-07-10; tap-target fix per Codex review same day):
   one line on phones, 11px labels, invisible padding gives each link a ~40px tap area */
@media (max-width: 560px) {
  .site-nav { row-gap: 4px; padding: 14px 16px; }
  .nav-links { gap: 6px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.09em; padding: 12px 5px; display: inline-block; }
}