/* ===================================================================== THE LEGAL STACK — "The Docket" redesign Single production stylesheet. Plain CSS, no build step required. This file is the source of truth; daily_publish.py copies it verbatim to site/assets/style.css on every rebuild. Sections: 1. Fonts (loaded via in ) 2. Design tokens (:root) 3. Base / reset 4. Layout primitives 5. Masthead + nav (site-wide) 6. Category labels & tags 7. Content card (reused everywhere) 8. Homepage — The Docket broadsheet front 9. Article page (long-form reading) 10. Research briefing (dossier format) 11. Footer 12. Responsive 13. Generator additions (real markdown content + secondary pages) ===================================================================== */ /* ---- 2. Design tokens -------------------------------------------- */ :root { --ink: #16140F; --text: #2A2723; --text-2: #46423B; --muted: #6E6A62; --faint: #A0936C; --paper: #F7F3EC; --paper-warm: #FBF7EE; --surface: #FFFFFF; --canvas: #E6E3DC; --gold: #92701E; --gilt: #C9A24E; --gilt-bright: #E8C97A; --bronze: #6E5212; --bronze-tint: rgba(110,82,18,.04); --rule-strong: #16140F; --rule: #D8CBA8; --rule-soft: #E7DEC6; --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Source Serif 4', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --fs-masthead: 52px; --fs-h1: 40px; --fs-h2: 26px; --fs-h3: 20px; --fs-lead: 19px; --fs-body: 17px; --fs-body-sm: 14px; --fs-meta: 11px; --fs-micro: 10px; --lh-tight: 1.06; --lh-snug: 1.2; --lh-body: 1.66; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 46px; --s-16: 64px; --measure: 680px; --radius: 4px; --ease: cubic-bezier(.2,.6,.2,1); } /* ---- 3. Base / reset --------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-5); font-family: var(--font-mono); font-size: var(--fs-meta); } .skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 100; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---- 4. Layout primitives ---------------------------------------- */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-12); } .section { padding-block: var(--s-10); } .rule-strong { border-top: 4px solid var(--rule-strong); } .hairline { height: 1px; background: var(--rule); border: 0; } /* ---- 5. Masthead + nav (site-wide) ------------------------------- */ .masthead { padding-top: var(--s-7); } .masthead__top { border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); } .edition-line { display: flex; justify-content: space-between; align-items: center; padding-block: var(--s-2); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: #7A6A3A; } .edition-line__center { color: var(--gold); } .masthead__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-masthead); line-height: 1; letter-spacing: -.015em; text-align: center; color: var(--ink); margin: var(--s-5) 0 var(--s-3); } .masthead__title a { display: block; } .mainnav { display: flex; justify-content: center; border-top: 1px solid var(--ink); border-bottom: 3px double var(--gold); padding-block: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .mainnav a { padding: 0 var(--s-5); border-right: 1px solid var(--rule); transition: color .15s var(--ease); } .mainnav a:last-child { border-right: 0; } .mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--gold); } /* ---- 6. Category labels & tags ----------------------------------- */ .kicker { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: var(--s-2); } .kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; } .kicker--research { color: var(--bronze); } .kicker--plain::before { display: none; } .kicker a { color: inherit; } .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; } .tag { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 5px 10px; } /* ---- 7. Content card (reused: feed, index, related) -------------- */ .card { border-top: 2px solid var(--ink); padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .card--research { border-top-color: var(--bronze); } .card__cat { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .card--research .card__cat { color: var(--bronze); } .card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -.01em; color: var(--ink); } .card a.card__title:hover { color: var(--gold); } .card__cat a { color: inherit; } .card__cat a:hover { text-decoration: underline; text-underline-offset: 2px; } .card__dek { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-2); margin: 0; } .card__meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-top: auto; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } /* ---- 8. Homepage — The Docket broadsheet front ------------------- */ .front { display: grid; grid-template-columns: 0.85fr 2.1fr 1fr; padding-block: var(--s-7) var(--s-12); } .front > * { padding-inline: var(--s-7); } .front__index { padding-left: 0; border-right: 1px solid var(--rule); } .front__lead { border-right: 1px solid var(--rule); } .front__aside { padding-right: 0; } .rail-head { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: var(--s-2); margin-bottom: var(--s-4); } .rail-head--research { color: var(--bronze); border-bottom-color: var(--bronze); } .index-list { display: flex; flex-direction: column; gap: var(--s-4); } .index-item { display: flex; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule-soft); } .index-item:last-child { border-bottom: 0; padding-bottom: 0; } .index-item__no { font-family: var(--font-mono); font-size: 12px; color: var(--gold); flex: none; } .index-item__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: var(--lh-snug); color: var(--text); } a.index-item__title:hover { color: var(--gold); } .index-item__meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 4px; } .lead__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--ink); margin: var(--s-3) 0 var(--s-2); } a.lead__title:hover { color: var(--gold); } .lead__dek { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); line-height: 1.35; color: #5A5240; margin: 0 0 var(--s-2); } .lead__byline { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-4); margin-bottom: var(--s-4); } .lead__cols { column-count: 2; column-gap: var(--s-7); column-rule: 1px solid var(--rule-soft); font-size: var(--fs-body-sm); line-height: 1.62; color: var(--text); text-align: justify; } .lead__cols p { margin: 0 0 var(--s-3); } .lead__cols p:last-child { margin-bottom: 0; } .dropcap::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: .8; padding: 4px 8px 0 0; color: var(--gold); } .research-box { border: 1px solid rgba(110,82,18,.25); border-radius: var(--radius); padding: var(--s-4); background: var(--surface); } .research-box__no { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; color: var(--bronze); margin-bottom: var(--s-2); } .research-box__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: var(--lh-snug); color: var(--ink); margin-bottom: var(--s-2); } a.research-box__title:hover { color: var(--bronze); } .research-box__dek { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-2); margin: var(--s-2) 0; } .stat-row { display: flex; gap: var(--s-4); margin: var(--s-3) 0; border-top: 1px solid var(--rule-soft); padding-top: var(--s-3); } .stat__fig { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1; color: var(--bronze); } .stat__label { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 3px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s-10) 0 var(--s-6); border-bottom: 2px solid var(--ink); padding-bottom: var(--s-3); } .section-head h1, .section-head h2 { font-size: var(--fs-h2); letter-spacing: -.01em; } .section-head a { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } .section-head--research { border-bottom-color: var(--bronze); } .section-head--research a { color: var(--bronze); } /* ---- 9. Article page (long-form reading) ------------------------- */ .progress { height: 3px; background: var(--rule); } .progress__bar { height: 3px; background: var(--gold); width: 0; } .article { padding-block: var(--s-12) var(--s-16); } .article__inner { max-width: var(--measure); margin: 0 auto; } .article__back { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-8); display: inline-block; } .article__back:hover { color: var(--gold); } .article__title { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: var(--s-5) 0 var(--s-6); } .article__standfirst { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.42; color: #5A5240; margin: 0 0 var(--s-7); } .byline { display: flex; align-items: center; gap: var(--s-4); border-block: 1px solid var(--rule); padding-block: var(--s-4); margin-bottom: var(--s-10); } .byline__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; flex: none; } .byline__meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); line-height: 1.6; } .byline__meta span { color: var(--faint); } .prose { counter-reset: section; } .prose > p { font-size: var(--fs-body); line-height: 1.72; color: var(--text); margin: 0 0 var(--s-6); } .prose > p.lede { font-size: 20px; } .prose > p.lede::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 72px; line-height: .78; padding: 6px 12px 0 0; color: var(--gold); } .prose h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.015em; margin: var(--s-12) 0 var(--s-5); } .prose h2::before { counter-increment: section; content: "§\00A0" counter(section, decimal-leading-zero) "\2003"; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--gold); letter-spacing: .04em; } .prose blockquote { margin: var(--s-8) 0; padding: 4px 0 4px var(--s-7); border-left: 3px solid var(--gold); } .prose blockquote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 25px; line-height: 1.4; color: var(--ink); margin: 0; } .prose blockquote cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: var(--s-3); } .callout { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-6) var(--s-7); margin: var(--s-8) 0; } .callout__label { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-3); } .callout p { font-size: var(--fs-body); line-height: 1.6; color: var(--text); margin: 0; } .codeblock { background: var(--ink); border-radius: var(--radius); padding: var(--s-5) var(--s-6); margin: var(--s-8) 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #C9C2B2; overflow-x: auto; } .codeblock .k { color: var(--gilt); } .codeblock .v { color: var(--gilt-bright); } .codeblock .c { color: #8D8675; } .share { border-top: 1px solid var(--rule); padding-top: var(--s-6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); } .share__label { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .share__links { display: flex; gap: var(--s-3); flex-wrap: wrap; } .share__links a { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 12px; transition: all .15s var(--ease); } .share__links a:hover { color: var(--gold); border-color: var(--gold); } .related { max-width: 880px; margin: var(--s-16) auto 0; border-top: 2px solid var(--ink); padding-top: var(--s-6); } .related__head { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-6); } .related .card { border-top-width: 1px; border-top-color: var(--rule); } /* ---- 10. Research briefing (dossier format) ---------------------- */ .dossier__hero { background: var(--ink); color: #EFE7D8; padding: var(--s-12) 0; } .dossier__bar { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; border-bottom: 1px solid #4A3F28; padding-bottom: var(--s-4); margin-bottom: var(--s-7); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: #BCA882; } .dossier__title { font-family: var(--font-display); font-weight: 600; font-size: 42px; line-height: 1.08; letter-spacing: -.02em; color: #F8F2E6; margin: var(--s-4) 0 var(--s-6); max-width: 760px; } .dossier__abstract { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.45; color: #D9CCB0; margin: 0; max-width: 680px; } .dossier__hero .kicker { color: var(--gilt); } .dossier__body { padding-block: var(--s-12); } .brief-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--s-10); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-10); margin-bottom: var(--s-10); } .brief-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .brief-row__label { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); } .finding { display: flex; gap: var(--s-5); align-items: baseline; border-top: 1px solid var(--rule-soft); padding-top: var(--s-6); } .finding:first-child { border-top: 0; padding-top: 0; } .finding__fig { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--bronze); flex: none; width: 84px; } .finding p { font-size: var(--fs-body); line-height: 1.55; color: var(--text); margin: 0; } .data-table { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; width: 100%; border-collapse: collapse; } .data-table thead { background: var(--ink); color: #CBB991; } .data-table th { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 12px 18px; } .data-table th + th, .data-table td + td { text-align: right; } .data-table td { font-family: var(--font-body); font-size: 15px; color: var(--text); padding: 14px 18px; border-top: 1px solid var(--rule-soft); } .data-table td.num { font-family: var(--font-mono); font-size: 13px; } .method { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.7; color: var(--faint); border-top: 1px solid var(--rule); padding-top: var(--s-4); margin-top: var(--s-8); } /* ---- 11. Footer -------------------------------------------------- */ .site-footer { border-top: 4px solid var(--ink); margin-top: var(--s-16); padding-block: var(--s-10); } .site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-10); } .site-footer h4 { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-4); } .site-footer__brand { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); } .site-footer a:hover { color: var(--gold); } .site-footer__legal { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: var(--s-10); } /* ---- 12. Responsive ---------------------------------------------- */ @media (max-width: 960px) { :root { --fs-masthead: 38px; --fs-h1: 32px; } .wrap { padding: 0 var(--s-6); } .front { grid-template-columns: 1fr; } .front > * { padding-inline: 0; border-right: 0 !important; } .front__index, .front__lead { border-bottom: 1px solid var(--rule); padding-bottom: var(--s-8); margin-bottom: var(--s-8); } .card-grid { grid-template-columns: 1fr 1fr; } .brief-row { grid-template-columns: 1fr; gap: var(--s-4); } .site-footer__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { :root { --fs-body: 17px; } .lead__cols { column-count: 1; } .card-grid { grid-template-columns: 1fr; } .article__title { font-size: 32px; } .prose blockquote p { font-size: 21px; } .mainnav { flex-wrap: wrap; } .dossier__hero, .dossier__body, .article { padding-inline: var(--s-6); } } /* ===================================================================== 13. Generator additions — cover real markdown content + the secondary pages (about/tools/search/contact/404/indexes/pagination) that the handoff says to "extend with the existing components". Same tokens. ===================================================================== */ /* Prose: elements the markdown pipeline emits beyond the curated mock */ .prose > h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: var(--s-8) 0 var(--s-3); } .prose a { color: var(--gold); border-bottom: 1px solid var(--rule); transition: border-color .15s var(--ease); } .prose a:hover { border-bottom-color: var(--gold); } .prose strong { font-weight: 600; color: var(--ink); } .prose em { font-style: italic; } .prose ul, .prose ol { font-size: var(--fs-body); line-height: 1.72; color: var(--text); margin: 0 0 var(--s-6); padding-left: var(--s-7); } .prose li { margin-bottom: var(--s-2); } .prose li::marker { color: var(--gold); } .prose hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-10) 0; } .prose code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-warm); border: 1px solid var(--rule-soft); border-radius: 3px; padding: 1px 5px; } .prose pre { background: var(--ink); color: #C9C2B2; border-radius: var(--radius); padding: var(--s-5) var(--s-6); margin: var(--s-8) 0; overflow-x: auto; } .prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 13px; } .prose img { margin: var(--s-6) 0; border-radius: var(--radius); } .prose table { width: 100%; border-collapse: collapse; margin: var(--s-8) 0; font-size: var(--fs-body-sm); } .prose table thead { background: var(--ink); color: #CBB991; } .prose table th { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 10px 14px; } .prose table td { padding: 12px 14px; border-top: 1px solid var(--rule-soft); color: var(--text); } .prose table tr:nth-child(even) td { background: var(--paper-warm); } /* Research dossier body: reuse .prose, recolor to bronze, drop the § folio */ .prose--research { counter-reset: none; } .prose--research h2::before { content: ""; counter-increment: none; } .prose--research a { color: var(--bronze); } .prose--research a:hover { border-bottom-color: var(--bronze); } .prose--research li::marker { color: var(--bronze); } .prose--research blockquote { border-left-color: var(--bronze); } /* Plain prose (About / static pages): reading styles without the § folios */ .prose--plain h2::before { content: ""; counter-increment: none; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-12) 0 var(--s-16); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; } .pagination a { color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 12px; transition: all .15s var(--ease); } .pagination a:hover { color: var(--gold); border-color: var(--gold); } .pagination .current { color: var(--gold); border-bottom: 2px solid var(--gold); padding-bottom: 5px; } .pagination .gap { color: var(--faint); } /* Tools index */ .tool-card { border-top: 2px solid var(--ink); padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } .tool-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); } .tool-card__dek { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-2); margin: 0; } /* Centered narrow page (tools coming-soon, 404) */ .page-narrow { max-width: var(--measure); margin: var(--s-16) auto; padding-inline: var(--s-6); text-align: center; } .page-narrow h1 { font-size: var(--fs-h1); margin: var(--s-4) 0 var(--s-5); } .page-narrow p { color: var(--text-2); margin: 0 auto var(--s-8); max-width: 52ch; } /* About / static long-form: reuse .prose but width a touch wider than article */ .static-page { max-width: 760px; margin: var(--s-12) auto var(--s-16); padding-inline: var(--s-6); } .static-page .article__title { font-size: var(--fs-h1); } /* Forms (contact) */ .form-page { max-width: 640px; margin: var(--s-12) auto var(--s-16); padding-inline: var(--s-6); } .form-page h1 { font-size: var(--fs-h1); margin: var(--s-4) 0 var(--s-3); } .form-page .sub { color: var(--text-2); margin-bottom: var(--s-8); } .field { margin-bottom: var(--s-5); } .field label { display: block; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); } .field input, .field select, .field textarea { width: 100%; padding: var(--s-3) var(--s-4); font-family: var(--font-body); font-size: var(--fs-body); color: var(--text); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .field textarea { min-height: 160px; resize: vertical; } .btn-primary { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius); padding: var(--s-4) var(--s-7); cursor: pointer; transition: background .15s var(--ease); } .btn-primary:hover { background: var(--gold); } .form-msg { display: none; margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-body-sm); } .form-msg.success { color: var(--bronze); } .form-msg.error { color: #8B1A1A; } /* Search */ .search-form { display: flex; gap: var(--s-3); margin: var(--s-6) 0 var(--s-8); } .search-form input { flex: 1; padding: var(--s-3) var(--s-4); font-family: var(--font-body); font-size: var(--fs-body); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--text); } .search-status { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-6); }