@font-face { font-family: "Jost"; src: url("fonts/Jost.ttf") format("truetype"); font-weight: 300 700; }
:root { --paper: #EFEBE3; --ink: #141414; --cobalt: #2340D8; --orange: #FF5A1F; --mute: #5B5955; --hair: rgba(20,20,20,.18); }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Jost", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--paper); font-size: 11pt; line-height: 1.45; }
h1, h2, p, ul, ol { margin: 0; }
.noprint { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 14px; font-size: 15px; }
.noprint a { color: var(--ink); }
.noprint button { font: inherit; padding: 8px 16px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; }
.noprint button:focus-visible, .noprint a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.hint { color: var(--mute); }
.tag { font-size: 8pt; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.sheet { width: 210mm; min-height: 297mm; margin: 0 auto 24px; padding: 14mm 16mm; background: #fff; display: grid; gap: 5mm; align-content: start; }
.sheet header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid var(--ink); padding-bottom: 3mm; }
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; } .brand img { height: 18px; width: auto; }
.meta { font-size: 9pt; color: var(--mute); }
.sheet h1 { font-size: 30pt; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.thesis { font-size: 13pt; }
.rec { background: var(--cobalt); color: #fff; padding: 5mm 6mm; } .rec .tag { color: rgba(255,255,255,.8); }
.rec h2 { font-size: 16pt; font-weight: 600; line-height: 1.15; margin-bottom: 2mm; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
.sheet ol, .sheet ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 1.6mm; }
.sheet ol li { display: grid; grid-template-columns: 6mm 1fr; gap: 2mm; align-items: baseline; }
.sheet ol .k { display: inline-grid; place-items: center; width: 5.5mm; height: 5.5mm; background: var(--ink); color: #fff; font-size: 8pt; font-weight: 600; }
.sheet ul li::before { content: ""; display: inline-block; width: 2.4mm; height: 2.4mm; background: var(--cobalt); margin-right: 2mm; }
.sheet ul.plain li::before { background: var(--orange); }
.go, .stop { margin-top: 2mm; padding-left: 3mm; border-left: 3px solid var(--cobalt); } .stop { border-color: var(--ink); }
.obj { padding-left: 3mm; border-left: 3px solid var(--orange); }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.who p { display: grid; gap: 1mm; } .who span { font-size: 8pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.who b { display: block; min-height: 8mm; border-bottom: 1.5px solid var(--ink); font-weight: 500; padding-top: 2mm; }
table { width: 100%; border-collapse: collapse; font-size: 9.5pt; } th, td { text-align: left; vertical-align: top; padding: 1.6mm 2mm 1.6mm 0; border-bottom: 1px solid var(--hair); }
thead th { font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border-bottom: 1.5px solid var(--ink); }
.cards .card { width: 180mm; margin: 0 auto 10mm; display: grid; grid-template-columns: 1fr 1fr; break-inside: avoid; }
.face { height: 110mm; padding: 8mm; border: 1.5px dashed var(--ink); display: grid; gap: 3mm; align-content: start; background: #fff; }
.front { border-top: 6mm solid var(--ink); }
.cobalt .front { border-top-color: var(--cobalt); } .orange .front { border-top-color: var(--orange); }
.front h2 { font-size: 18pt; font-weight: 600; line-height: 1.1; }
.back .tag { margin-top: 2mm; color: var(--cobalt); }
.blank { letter-spacing: .05em; color: var(--mute); }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; } .noprint { display: none; }
  .sheet { margin: 0; min-height: auto; height: 297mm; }
  .cards .card { margin: 10mm auto; }
  .rec, .front, .k { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 760px) {
  .sheet { width: auto; padding: 24px 16px; } .cols, .who { grid-template-columns: 1fr; }
  .cards .card { width: auto; margin: 0 16px 24px; grid-template-columns: 1fr; } .face { height: auto; }
}