@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; }
* { box-sizing: border-box; }
body { margin: 0; background: #EDE6DA; font: 14px/1.55 "Inter", system-ui, sans-serif; color: #142230; }
.toolbar { max-width: 816px; margin: 24px auto 12px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
.toolbar a { color: #0A2F47; font-weight: 600; }
.toolbar button { font: 600 14px "Inter", sans-serif; background: #A11F2E; color: #fff; border: 0; border-radius: 99px; padding: 12px 20px; cursor: pointer; }
.sheet { max-width: 816px; margin: 0 auto 48px; background: #fff; padding: 56px 64px; box-shadow: 0 20px 50px -20px rgba(7,35,53,.3); }
.sheet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid #0A2F47; margin-bottom: 8px; position: relative; }
.sheet__head::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 22%; height: 6px; background: #A11F2E; }
.sheet__brand img { height: 40px; width: auto; }
.sheet__brand { display: flex; align-items: center; gap: 10px; font: 500 18px/1 "Outfit", sans-serif; letter-spacing: .2em; color: #0A2F47; }
.sheet__brand b { font-weight: 700; }
.mark { width: 20px; height: 24px; background: #C73E4C; clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%); position: relative; }
.sheet__title { text-align: right; }
.sheet__title h1 { font: 600 24px/1.1 "Outfit", sans-serif; margin: 0; color: #0A2F47; }
.sheet__title p { margin: 4px 0 0; color: #5B6B78; font-size: 12.5px; }
h2 { font: 600 15px/1 "Outfit", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #A42E3B; margin: 28px 0 12px; }
ul { list-style: none; margin: 0; padding: 0; }
.boxes li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #E4DED4; }
.box { flex: none; width: 18px; height: 18px; border: 2px solid #0A2F47; border-radius: 3px; margin-top: 2px; }
.plain li { padding: 6px 0 6px 16px; position: relative; font-size: 13px; }
.plain li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; background: #C9AB85; }
.sheet__foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid #E4DED4; font-size: 12px; color: #5B6B78; }
.sheet__foot p { margin: 0 0 4px; }
.todo { font: 500 11.5px ui-monospace, monospace; color: #8A4B00; background: #FFF6E0; border: 1px dashed #E0A13A; border-radius: 3px; padding: 0 4px; }
@page { size: letter; margin: 0.5in; }
@media print { body { background: #fff; font-size: 12px; line-height: 1.45; } .toolbar { display: none; } .sheet { box-shadow: none; padding: 0; margin: 0; max-width: none; } h2 { margin: 18px 0 6px; font-size: 13px; } .boxes li { padding: 6px 0; } .plain li { padding: 3px 0 3px 16px; font-size: 11.5px; } .plain li::before { top: 9px; } .sheet__foot { margin-top: 18px; } }
/* Accessibility: visible focus + reflow at 320px */
:focus-visible { outline: 3px solid #0276BE; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 600px) { .sheet { padding: 28px 18px; } .sheet__head { flex-direction: column; align-items: flex-start; } .sheet__title { text-align: left; } .toolbar { flex-wrap: wrap; gap: 12px; } }