/* ============================================================================ docs/_assets/house.css — the house "Working Ledger" doc stylesheet. ---------------------------------------------------------------------------- The shared visual foundation for every HTML doc under docs/: the palette (via house-tokens.css), the base reset/typography, and the reusable chrome (masthead/seal, .wrap, section headings/kickers, tables, code, callouts, footer). Link this from a doc's ; never re-inline the :root token block. (adjust the relative depth to your doc, e.g. ../../_assets/house.css) Pair it with the Geist webfont link the templates show. Doc-type specifics (ticket chips, a prototype's app shell) live in their own sheet that builds on these tokens — they do not fork them. See docs/_assets/templates/ and the house-docs skill. ========================================================================== */ @import "./house-tokens.css"; * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--stone-paper); color: var(--ink-deep); font-family: var(--sans); font-size: 15px; line-height: 1.62; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; } header.mast { border-bottom: 1px solid var(--stone-rule); background: var(--side-bg); } .mast-inner { padding: 44px 0 34px; } .seal { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 18px; } .seal .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); } .seal a { color: var(--green); text-decoration: none; } .seal a:hover { text-decoration: underline; } h1 { font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; } .lede { font-size: 18px; color: var(--ink-soft); max-width: 74ch; margin: 0; } .mast-meta { display: flex; gap: 28px; margin-top: 26px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; } .mast-meta b { color: var(--ink-soft); font-weight: 500; } section { padding: 36px 0; border-bottom: 1px solid var(--stone-rule); } section:last-of-type { border-bottom: none; } .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin: 0 0 8px; } h2 { font-size: 25px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 16px; } h3 { font-size: 18px; font-weight: 600; margin: 26px 0 10px; letter-spacing: -0.01em; } h4.sub { font-size: 14px; font-weight: 600; margin: 20px 0 8px; color: var(--ink-deep); } p { margin: 0 0 14px; max-width: 78ch; } .muted { color: var(--ink-soft); } strong { font-weight: 600; } a { color: var(--green); } ul.clean { margin: 0 0 16px; padding-left: 0; list-style: none; } ul.clean li { position: relative; padding-left: 22px; margin-bottom: 9px; max-width: 78ch; } ul.clean li::before { content: "→"; position: absolute; left: 0; color: var(--green); font-family: var(--mono); } ol.steps { margin: 0 0 16px; padding-left: 22px; } ol.steps li { margin-bottom: 8px; max-width: 78ch; } pre { background: var(--ink-deep); color: oklch(94% 0.01 150); border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; margin: 0 0 18px; } pre .c { color: oklch(62% 0.02 150); font-style: italic; } pre .k { color: oklch(78% 0.10 200); } pre .s { color: oklch(80% 0.10 140); } pre .f { color: oklch(85% 0.11 90); } code.inl { font-family: var(--mono); font-size: 0.88em; background: var(--stone-tint); padding: 1.5px 6px; border-radius: 5px; color: var(--ink-deep); } .note { border-left: 3px solid var(--green); background: var(--green-soft); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0 0 18px; } .note .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-pressed); display: block; margin-bottom: 5px; } .warn { border-left: 3px solid var(--failed); background: var(--failed-soft); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0 0 18px; } .warn .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--failed); display: block; margin-bottom: 5px; } .defer { border-left: 3px solid var(--pending); background: var(--pending-soft); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0 0 18px; } .defer .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pending); display: block; margin-bottom: 5px; } .assume { border-left: 3px solid var(--amber); background: var(--amber-soft); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0 0 18px; } .assume .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 5px; } table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--stone-rule); vertical-align: top; } th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } td code, th code { font-family: var(--mono); font-size: 12.5px; } footer { padding: 36px 0 80px; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }