/* site.css - every other rule, in original cascade order * * Lifted verbatim from Views/blogPost.cshtml (whose CSS was the superset of * Views/Home.cshtml's) during task group 4 of .kiro/specs/site-standardization. * Rule order is preserved deliberately: the article carries six separate * @media (max-width:760px) blocks and the trailing "mobile pass" overrides the * earlier ones, so merging or tidying duplicate media blocks is a regression. * * Load order matters and is tokens.css then site.css. */ body { margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--serif); font-size:18px; line-height:1.65; font-kerning:normal; text-rendering:optimizeLegibility; } /* Bottom padding is 56 rather than 96 because a site footer now follows: 56 is the gap the home page's copyright rule already sat at, so the rhythm is the one this design had, and the article stops trailing off into 96px of nothing. */ .wrap { max-width:65rem; margin:0 auto; padding:0 24px 56px; } /* Justified setting. At the full 992px measure the line is long enough that justification does not open rivers; the phone breakpoint reverts to left, where it would. */ .wrap > p:not(.sub), .apx > p:not(.sub), .lede, .aside p, .lesson p, figcaption, li { text-align:justify; -webkit-hyphens:auto; hyphens:auto; } /* Running text, code, tables and figures all share one full-width measure, by choice: a 118-character source line needs the room, and the column edges line up. --measure is that choice expressed as a switch, and it is currently `none`, so this rule resolves to `max-width:none; margin-inline:auto` and has no effect: every selector here is a block with auto width, for which auto inline margins compute to zero. Kept rather than deleted because it is the one knob that narrows the column without touching anything else - set --measure to e.g. 34rem in tokens.css and the running text pulls in while .wrap keeps its 65rem for tables and charts. Deliberate decision, task 4.4; do not "clean up" as dead code. */ .wrap > p, .wrap > h2, .wrap > h3, .wrap > .sub, .wrap > ul, .wrap > .aside, .wrap > .lesson, .apx > p, .apx > h2, .apx > h3, .apx > .sub, .apx > ul, .apx > .aside, .apx > .apx-tag, header.mast, footer, figcaption { max-width:var(--measure); margin-inline:auto; } /* --- site header: a folio line, not a navigation bar ------------------------------- These pages are documents, so the header is built from the same micro-type as .eyebrow, .byline and h2 + .sub - mono, uppercase, .12em, --ink-3 - and separated by the same 1px rule as everything else. A padded bar with a logo and pill buttons would read as a different website glued on top of this one. .topbar-in repeats .wrap's measure and gutter so the wordmark and the toggle sit on the same left and right edges as the text below them. Every other rule in this design is content-width, so this one is too; a full-bleed rule would be the odd voice out. Not sticky, deliberately: this is a reading site, and vertical space on a phone is worth more than a bar that follows you down the page. */ .topbar-in { max-width:65rem; margin:0 auto; padding:15px 24px; position:relative; display:flex; align-items:baseline; gap:16px; } /* The rule is drawn inset to the text column rather than on the padding box. A border on .topbar-in would run the full 65rem and overhang .byline's rule and .lesson's by the 24px gutter on each side - close enough to look like a mistake, which it would be. Same treatment on the footer, so all three rules share one left and right edge. */ .topbar-in::after, .sitefoot-in::before { content:""; position:absolute; left:24px; right:24px; border-top:1px solid var(--rule); } .topbar-in::after { bottom:0; } .sitefoot-in::before { top:0; } /* Lowercase, because it is a hostname and mono already says so. Slightly larger and darker than the links so it reads as identity rather than as another label. */ .brand { font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--ink); text-decoration:none; } .brand:hover { color:var(--accent); } /* Everything after the wordmark sits in one right-aligned group, so task 14.2 can drop a