@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600&display=swap");
:root { --paper: #f5efe5; --ink: #171717; --muted: #6f6a63; --signal: #ff5a3c; --focus: #1e6cff; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 500 .8rem/1.5 "DM Mono", monospace; }
.docket { max-width: 1100px; margin: 0 auto; padding: var(--space-5); }
.masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 2px solid var(--ink); }
.mark { width: 42px; height: 42px; }
.eyebrow, .folio, .side-label { margin: 0; color: var(--signal); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
h1, h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 500; }
h1 { font-size: clamp(1.4rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1; }
.network { padding: .4rem .6rem; border: 1px solid var(--ink); font-size: .65rem; }
.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem 0; border-bottom: 1px solid var(--ink); }
.brief > p { max-width: 32rem; margin: 0; color: var(--muted); line-height: 1.8; }
.seam { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 3rem 0; }
ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
li { padding: 1rem 0; border-bottom: 1px solid rgba(23,23,23,.2); color: var(--muted); }
li span { display: inline-block; width: 3rem; color: var(--signal); }
li.complete { color: var(--ink); background: rgba(255,90,60,.09); }
dl { margin: 1rem 0 0; border-top: 1px solid var(--ink); }
dl div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(23,23,23,.2); }
dt { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
dd { margin: 0; overflow-wrap: anywhere; font-size: .68rem; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-top: 2px solid var(--ink); }
button { min-height: 48px; padding: .8rem 1rem; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); font: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .5; }
.error { color: var(--signal); }
@media (max-width: 720px) { .docket { padding: var(--space-3); } .brief, .seam { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; } .action-row { align-items: stretch; flex-direction: column; } button { width: 100%; } }