/* Copyright (c) 2026 kosa8. All rights reserved. Proprietary; see LICENSE. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
.conf-band__back { color: inherit; text-decoration: none; }
.fig img { display: block; width: 100%; height: auto; }
/* Layout: a single 70ch reading column, kosa8 paper-and-ink with amber marks; figures and tables break out wider. */
:root {
  --paper: #faf8f3; --paper-2: #f3efe6; --card: #fffefb;
  --ink: #141414; --text: #1e1e20; --text-2: #46474b; --text-3: #6b6c70;
  --line: #e2ddd2; --line-2: #cfc8ba;
  --accent: #e8962f; --accent-ink: #8a5a12; --accent-2: #fbe7c8;
  --ok: #17866a; --warn: #c4512b; --conf: #c4512b;
  --display: "Bricolage Grotesque", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --col: 44rem; --wide: 60rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #151514; --paper-2: #1d1d1b; --card: #1a1a19; --ink: #f1ede4; --text: #e6e2d9; --text-2: #b9b5ac; --text-3: #8f8b83;
  --line: #2e2d2a; --line-2: #45433e; --accent: #f0a646; --accent-ink: #f3b665; --accent-2: #3a2a14; --ok: #3fb08e; --warn: #e2734d; --conf: #ec8a66; color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #151514; --paper-2: #1d1d1b; --card: #1a1a19; --ink: #f1ede4; --text: #e6e2d9; --text-2: #b9b5ac; --text-3: #8f8b83;
  --line: #2e2d2a; --line-2: #45433e; --accent: #f0a646; --accent-ink: #f3b665; --accent-2: #3a2a14; --ok: #3fb08e; --warn: #e2734d; --conf: #ec8a66; color-scheme: dark }

body { background: var(--paper); color: var(--text); font: 400 17px/1.62 var(--serif); margin: 0; }
.conf-band { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--ink); color: var(--paper);
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center;
  padding-block: 9px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }
.paper { max-width: var(--wide); margin: 0 auto; padding-block: 48px 80px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.paper > * , main > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
main > figure, main > .tbl, .cover { max-width: var(--wide); }

/* cover */
.cover { border-top: 3px solid var(--ink); padding-top: 18px; margin-bottom: 40px; }
.cover__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 56px; }
.brand { font: 800 26px/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.brand i { font-style: normal; font-weight: 500; color: var(--accent); }
.docid { font: 12px var(--mono); color: var(--text-3); }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 14px; }
.cover h1 { font: 760 clamp(30px, 5vw, 50px)/1.06 var(--display); letter-spacing: -.025em; color: var(--ink); margin: 0 0 16px; text-wrap: balance; max-width: 22ch; }
.subtitle { font: italic 400 21px/1.4 var(--serif); color: var(--text-2); margin: 0 0 28px; max-width: 46ch; }
.authors { font: 650 16px var(--display); margin: 0; color: var(--ink); }
.affil { font-size: 14px; color: var(--text-3); margin: 2px 0 36px; }
.abstract { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); padding-block: 16px 10px; max-width: var(--col); }
.abstract__h, .notice__h, .toc__h, .def__h { font: 600 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; color: var(--ink); }
.abstract p { font-size: 16px; text-align: justify; hyphens: auto; margin: 0 0 10px; }
.kw { font-size: 14px !important; color: var(--text-2); }
.kw b { font: 650 13px var(--display); color: var(--ink); margin-right: 6px; }
.notice { margin-top: 22px; background: var(--accent-2); border-left: 4px solid var(--accent); padding: 12px 16px; max-width: var(--col); }
.notice p { font-size: 13px; line-height: 1.5; margin: 0 0 4px; }

/* contents */
.toc { border-block: 1px solid var(--line-2); padding-block: 16px; margin-bottom: 40px; }
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 32px; }
.toc li { break-inside: avoid; }
.toc a { display: flex; gap: 10px; color: var(--text); text-decoration: none; padding: 2px 0; font-size: 14.5px; }
.toc a:hover { color: var(--accent-ink); }
.toc a span { font: 12.5px/1.9 var(--mono); color: var(--text-3); min-width: 2.6em; }
.toc li.h1 a { font: 650 14.5px/1.6 var(--display); color: var(--ink); margin-top: 6px; }

/* body */
main h2, .refs h2 { font: 720 27px/1.15 var(--display); letter-spacing: -.015em; color: var(--ink); margin: 56px auto 14px; text-wrap: balance;
  padding-top: 14px; border-top: 2px solid var(--ink); }
main h3 { font: 680 20px/1.25 var(--display); color: var(--ink); margin: 34px auto 8px; text-wrap: balance; }
main h4 { font: 650 16.5px/1.3 var(--display); color: var(--text-2); margin: 24px auto 6px; }
.n { font: 500 .78em var(--mono); color: var(--accent-ink); margin-right: .7em; }
main p { margin-block: 0 14px; text-align: justify; hyphens: auto; }
main ul, main ol { padding-left: 1.4em; margin-block: 0 16px; }
main li { margin-bottom: 6px; }
main li::marker { color: var(--accent-ink); }
strong { font-weight: 650; color: var(--ink); }
code { font: .84em var(--mono); background: var(--paper-2); padding: 1px 5px; border: 1px solid var(--line); }
a.cite { color: var(--accent-ink); text-decoration: none; font-size: .92em; }
a.cite:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code { font: 13px/1.55 var(--mono); background: var(--card); border: 1px solid var(--line-2); padding: 14px 16px; overflow-x: auto; color: var(--text); margin-block: 0 18px; }
.eq { display: flex; justify-content: center; align-items: baseline; gap: 24px; margin: 6px auto 18px; font-size: 17px; }
.eq > span:first-child { flex: 1; text-align: center; min-width: 0; overflow-x: auto; }
.eq__n { font: 13px var(--mono); color: var(--text-3); }
.def { background: var(--card); border: 1px solid var(--line-2); border-left: 4px solid var(--accent); padding: 12px 16px 4px; margin-block: 4px 20px; }
.def p { font-size: 15.5px; text-align: left; }

/* figures */
figure { margin: 28px auto 30px; }
.fig { background: #fffefb; border: 1px solid var(--line-2); padding: 14px; overflow-x: auto; }
.fig svg { display: block; width: 100%; height: auto; min-width: 560px; }
figcaption { font: 14px/1.5 var(--serif); color: var(--text-2); margin-top: 10px; max-width: var(--col); }
figcaption b { font: 650 13.5px var(--display); color: var(--ink); }
.tbl figcaption { margin: 0 0 10px; }
.tw { overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
table { border-collapse: collapse; width: 100%; font: 13.5px/1.4 var(--serif); font-variant-numeric: tabular-nums; }
table.dense { font-size: 12.5px; }
th { font: 650 12px/1.3 var(--display); text-align: left; color: var(--ink); padding: 9px 10px; border-bottom: 1px solid var(--ink); vertical-align: bottom; background: var(--paper-2); }
td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.rh { font-weight: 600; color: var(--ink); background: var(--paper-2); min-width: 9em; }
.tnote { font-size: 13px !important; color: var(--text-3); margin-top: 8px; text-align: left !important; }
.mk { font-size: 14px; }
.mk--full { color: var(--ok); } .mk--part { color: var(--accent-ink); } .mk--none { color: var(--warn); }

/* references + colophon */
.refs ol { list-style: none; padding: 0; margin: 0; }
.refs li { display: grid; grid-template-columns: 3.2em 1fr; gap: 4px; font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.refs li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.rn { font: 12.5px/1.7 var(--mono); color: var(--text-3); }
.colophon { margin-top: 56px; border-top: 3px solid var(--ink); padding-top: 14px; font-size: 12.5px; color: var(--text-3); }
.colophon p:first-child { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--conf); }
.pb { height: 0; }

@media (max-width: 640px) { body { font-size: 16px; } main h2 { font-size: 23px; } .cover__top { margin-bottom: 32px; } }

/* print (PDF) */
@page { size: Letter; margin: 0.85in 0.8in 0.8in;
  @top-left { content: "kosa8 Labs · Research Report"; font: 8pt "Bricolage Grotesque", Helvetica, sans-serif; color: #6b6c70; }
  @top-right { content: "© 2026 KOSA8 LABS · ALL RIGHTS RESERVED"; font: 600 7.5pt "JetBrains Mono", Menlo, monospace; letter-spacing: .1em; color: #c4512b; }
  @bottom-left { content: "© 2026 kosa8 Labs. All rights reserved."; font: 7.5pt "Source Serif 4", Georgia, serif; color: #6b6c70; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 8pt "JetBrains Mono", Menlo, monospace; color: #141414; } }
@page :first { @top-left { content: none; } @top-right { content: none; } }
body.print { background: #fff; font-size: 10.6pt; line-height: 1.5; }
body.print .conf-band { display: none; }
body.print .paper { padding: 0; max-width: none; }
body.print .paper > *, body.print main > * { max-width: none; }
body.print .cover { break-after: page; min-height: 9.1in; display: flex; flex-direction: column; }
body.print .cover h1 { font-size: 34pt; }
body.print .abstract p { font-size: 10.2pt; }
body.print .toc { break-after: page; border: 0; }
body.print .toc ol { columns: 1; }
body.print main h2 { break-before: page; font-size: 19pt; margin-top: 0; }
body.print main h3 { font-size: 13.5pt; break-after: avoid; }
body.print main h4 { break-after: avoid; }
body.print figure { break-inside: avoid; margin: 14pt 0; }
body.print .tbl { break-inside: auto; }
body.print tr { break-inside: avoid; }
body.print .fig { padding: 6pt; border-color: #cfc8ba; }
body.print .fig svg { min-width: 0; max-height: 7.4in; }
body.print table { font-size: 8.4pt; }
body.print table.dense { font-size: 7pt; table-layout: fixed; width: 100%; }
body.print table.dense td, body.print table.dense th { padding-left: 3px; padding-right: 3px; overflow-wrap: anywhere; }
body.print .tw { overflow: visible; }
body.print td.rh, body.print th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.print .notice, body.print .def, body.print code { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.print .refs { break-before: page; }
body.print .refs li { font-size: 8.8pt; }
body.print .colophon { break-inside: avoid; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }