@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Caslon+Display&family=Manrope:wght@400;600;700&display=swap');

:root { --ink: #18211d; --paper: #eee9dc; --red: #a6352a; --gold: #b4975a; --line: #c8c0ad; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, sans-serif; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .18em; font: 500 11px DM Mono, monospace; color: var(--red); }
h1 { margin: 0; font: 400 clamp(42px, 6vw, 78px)/.9 "Libre Caslon Display", serif; }
.login-page { display: grid; place-items: center; background: #15201b; padding: 24px; }
.login-card { position: relative; width: min(620px, 100%); padding: clamp(34px, 8vw, 72px); background: var(--paper); border: 1px solid var(--gold); box-shadow: 18px 18px 0 #0c1511; }
.seal { display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid var(--red); border-radius: 50%; color: var(--red); font: 500 22px DM Mono, monospace; transform: rotate(-7deg); margin-bottom: 40px; }
.seal::after { content: "DOSSIER"; position: absolute; font: 500 7px DM Mono, monospace; letter-spacing: .16em; transform: translateY(19px); }
.seal.small { width: 54px; height: 54px; font-size: 16px; margin-bottom: 30px; }
.lede { font: 400 20px/1.55 "Libre Caslon Display", serif; max-width: 470px; }
.notice { margin: 28px 0; padding: 16px; border-left: 3px solid var(--red); background: #e4dece; font-size: 12px; line-height: 1.6; }
.slack-button, .question-form button { display: inline-block; border: 0; background: var(--red); color: white; padding: 15px 22px; font-weight: 700; text-decoration: none; cursor: pointer; }
.masthead { position: relative; display: flex; align-items: end; justify-content: space-between; padding: 32px 5vw 24px; border-bottom: 1px solid var(--line); }
.masthead h1 { font-size: 48px; }
.text-button { border: 0; background: none; color: var(--red); font: 500 11px DM Mono, monospace; text-transform: uppercase; cursor: pointer; }
.workspace { position: relative; display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 130px); }
aside { padding: 48px 32px 40px 5vw; border-right: 1px solid var(--line); }
.operator { font-size: 12px; line-height: 1.6; }
.stats { margin: 40px 0; }
.stats div { padding: 13px 0; border-top: 1px solid var(--line); }
.stats dt { font: 400 24px "Libre Caslon Display", serif; }
.stats dd { margin: 2px 0 0; text-transform: uppercase; letter-spacing: .12em; font: 10px DM Mono, monospace; }
.classification { color: var(--red); font: 10px/1.6 DM Mono, monospace; text-transform: uppercase; }
.search-room { padding: clamp(36px, 6vw, 74px); max-width: 1100px; }
.question-form label { display: block; margin-bottom: 18px; font: 400 clamp(26px, 4vw, 44px) "Libre Caslon Display", serif; }
.question-row { display: flex; align-items: stretch; border-bottom: 2px solid var(--ink); }
.question-row textarea { flex: 1; min-height: 68px; resize: vertical; border: 0; background: transparent; padding: 16px 10px 12px 0; color: var(--ink); font: 16px/1.5 Manrope, sans-serif; outline: none; }
.question-row button { align-self: end; margin-bottom: 8px; white-space: nowrap; }
.empty-state { margin-top: 90px; max-width: 510px; color: #696b62; }
.empty-state span { color: var(--gold); font: 400 58px/1 "Libre Caslon Display", serif; }
.answer-card { margin-top: 48px; border-top: 1px solid var(--gold); padding-top: 24px; }
.answer-meta { display: flex; justify-content: space-between; color: var(--red); text-transform: uppercase; letter-spacing: .12em; font: 10px DM Mono, monospace; }
.answer { font: 400 clamp(21px, 3vw, 30px)/1.55 "Libre Caslon Display", serif; white-space: pre-wrap; }
.answer-card h2 { margin-top: 44px; text-transform: uppercase; letter-spacing: .14em; font: 500 11px DM Mono, monospace; }
.sources { list-style: none; padding: 0; counter-reset: source; }
.sources li { counter-increment: source; border-top: 1px solid var(--line); }
.sources a { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 28px; padding: 17px 0; color: inherit; text-decoration: none; }
.sources a::before { content: counter(source, decimal-leading-zero); color: var(--red); font: 10px DM Mono, monospace; position: absolute; transform: translateX(-28px); }
.source-location { font: 500 11px/1.5 DM Mono, monospace; }
.source-text { font-size: 13px; line-height: 1.55; color: #555a52; }
@media (max-width: 720px) {
  .workspace { grid-template-columns: 1fr; }
  aside { display: none; }
  .masthead { padding: 24px; }
  .search-room { padding: 36px 24px; }
  .question-row { display: block; }
  .question-row button { width: 100%; margin: 8px 0; }
  .sources a { grid-template-columns: 1fr; gap: 6px; }
  .sources a::before { display: none; }
}