@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --cinema-ink: #090a0a;
  --cinema-velvet: #141312;
  --cinema-ivory: #eeeae1;
  --cinema-gold: #b5a47d;
  --cinema-wine: #7d3f49;
  --cinema-sage: #819187;
  --ink: var(--cinema-ivory);
  --muted: #aaa49b;
  --dim: #746f68;
  --void: var(--cinema-ink);
  --night: #10100f;
  --panel: rgba(22, 21, 19, .9);
  --panel-strong: #191816;
  --line: rgba(235, 228, 215, .12);
  --line-strong: rgba(235, 228, 215, .24);
  --cyan: var(--cinema-gold);
  --cyan-soft: #85795e;
  --amber: var(--cinema-gold);
  --coral: var(--cinema-wine);
  --violet: #948b82;
  --ok: var(--cinema-sage);
  --ink-strong: #f3efe7;
  --muted-ink: #aaa49b;
  --faint-ink: #746f68;
  --evidence: var(--cinema-gold);
  --uncertainty: var(--cinema-gold);
  --conflict: var(--cinema-wine);
  --success: var(--cinema-sage);
  --mono: "IBM Plex Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --radius: 10px;
  --shadow: 0 34px 100px rgba(0, 0, 0, .38);
  --display-serif-latin: "Instrument Serif", Georgia, "Times New Roman", serif;
  --display-serif-cjk: "Songti SC", "Noto Serif SC", "Source Han Serif SC", STSong, SimSun, serif;
  font-family: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--void);
  font-synthesis: none;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 72% -12%, rgba(181, 164, 125, .08), transparent 34rem),
    radial-gradient(circle at 8% 72%, rgba(125, 63, 73, .05), transparent 30rem),
    var(--void);
  color: var(--ink);
}
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select { min-height: 44px; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }
p { color: var(--muted); line-height: 1.75; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; background: var(--cinema-ivory); color: var(--cinema-ink); padding: .75rem 1rem; border-radius: 6px; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { color: var(--cinema-gold); font-size: .78rem; font-weight: 620; letter-spacing: .09em; text-transform: none; }

.brand { display: inline-flex; align-items: center; gap: .72rem; min-height: 44px; }
.brand > span:last-child { display: grid; gap: .1rem; }
.brand strong { font-size: .93rem; letter-spacing: -.02em; }
.brand small { color: var(--dim); font: 600 .55rem/1.2 var(--mono); letter-spacing: .12em; }
.brand-mark { position: relative; width: 34px; height: 34px; border: 1px solid rgba(181, 164, 125, .42); border-radius: 7px; display: grid; place-items: center; overflow: hidden; }
.brand-mark::before { content: "TC"; color: var(--cinema-gold); font: 400 .64rem/1 var(--display-serif-latin); letter-spacing: .06em; }
.brand-mark::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(235, 228, 215, .08); }
.brand-mark i { display: none; }
.brand-mark i:nth-child(1) { transform: rotate(90deg); }
.brand-mark i:nth-child(2) { transform: rotate(30deg); }
.brand-mark i:nth-child(3) { transform: rotate(-30deg); }

.primary-button, .quiet-button, .nav-cta { border: 1px solid transparent; border-radius: 7px; padding: .72rem 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; transition: transform .24s ease, background .24s ease, border-color .24s ease, color .24s ease; }
.primary-button { background: var(--cinema-ivory); color: var(--cinema-ink); font-weight: 690; }
.quiet-button, .nav-cta { background: rgba(255, 255, 255, .045); border-color: var(--line); }
.primary-button:hover { background: #fffdf8; transform: translateY(-1px); }
.nav-cta:hover, .quiet-button:hover { color: var(--cinema-gold); border-color: rgba(181, 164, 125, .35); transform: translateY(-1px); }
.primary-button:disabled { opacity: .5; cursor: wait; }
.primary-button:focus-visible, .quiet-button:focus-visible, .nav-cta:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cinema-gold); outline-offset: 3px; }

input, select, textarea { width: 100%; border: 1px solid var(--line); background: rgba(8, 8, 7, .76); border-radius: 7px; padding: .8rem .9rem; }
textarea { resize: vertical; }
label { display: grid; gap: .5rem; color: #c8c1b6; font-size: .875rem; }

::selection { color: var(--cinema-ink); background: var(--cinema-gold); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #0b0b0a; }
::-webkit-scrollbar-thumb { background: #35312c; border-radius: 9px; border: 2px solid #0b0b0a; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}