/* style.css — company-in-italy.com * Layout and components. Every value comes from tokens.css; nothing is hardcoded here. * Rebuilt 2026-09-13. Archetype A7 (card-dense advisory) with a banded section rhythm, from the * lawstrust.com design harvest. * * TWO PAGE TEMPLATES, selected by a class on : * .t-commercial — a service page that sells: dark hero band, offer cards, process, CTA bands, * no table of contents, the byline demoted to a trust strip at the foot. * .t-guide — an informational page that explains: sticky contents rail, article column, * byline at the top, the evidence layer (citations, definitions) foregrounded. * .t-utility — short legal/service pages: single narrow column, no furniture. */ /* ── layout shell ─────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--w-content); margin-inline: auto; padding-inline: var(--p-space-5); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--c-accent); color: var(--c-on-accent); padding: var(--p-space-3) var(--p-space-4); font-weight: var(--w-black); } .skip-link:focus { left: 0; } /* ── header: two tier, dark ───────────────────────────────── */ .site-header { background: var(--header-bg); color: var(--header-fg); } .header-util { background: var(--header-util-bg); font-size: var(--t-kicker); letter-spacing: 0.04em; } .header-util-inner { display: flex; align-items: center; gap: var(--p-space-5); flex-wrap: wrap; padding-block: var(--p-space-2); min-height: 36px; } .header-util p, .header-util a { margin: 0; color: var(--c-on-dark-dim); max-width: none; text-decoration: none; text-transform: uppercase; font-weight: var(--w-medium); } .header-util a:hover { color: var(--c-accent); } .header-util .util-right { margin-left: auto; display: flex; gap: var(--p-space-5); } .header-inner { display: flex; align-items: center; gap: var(--p-space-5); padding-block: var(--p-space-4); } .brand { display: inline-flex; align-items: center; gap: var(--p-space-3); color: var(--header-fg); text-decoration: none; flex: 0 0 auto; } .brand-mark { color: var(--c-accent); } .brand-name { font-size: 1.125rem; font-weight: var(--w-black); letter-spacing: -0.015em; } .site-nav { flex: 1 1 auto; } .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--p-space-5); list-style: none; margin: 0; padding: 0; } .site-nav li { max-width: none; } .site-nav a { color: var(--c-on-dark-soft); text-decoration: none; font-size: var(--t-small); font-weight: var(--w-semibold); padding-block: var(--p-space-2); border-bottom: var(--rule-thick) solid transparent; transition: color var(--motion), border-color var(--motion); } .site-nav a:hover { color: var(--c-accent); } .site-nav a[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-accent); } .nav-toggle { display: none; background: none; border: 2px solid rgba(255, 255, 255, 0.5); padding: var(--p-space-2) var(--p-space-3); font: inherit; font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--header-fg); cursor: pointer; } .nav-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); } /* ── buttons: square, uppercase, heavy ────────────────────── */ .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-fg); padding: var(--btn-pad); text-decoration: none; font-size: var(--t-kicker); line-height: 1.2; letter-spacing: var(--btn-ls); text-transform: uppercase; font-weight: var(--w-black); border: 2px solid var(--btn-bg); border-radius: var(--radius); transition: background var(--motion), border-color var(--motion), color var(--motion); } .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); } .btn-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); } .btn-secondary:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); } .btn-header { flex: 0 0 auto; } /* on a dark ground the outline button inverts */ .site-header .btn-secondary, .hero .btn-secondary, .cta-band .btn-secondary, .cta-full .btn-secondary, .band-dark .btn-secondary, .consent .btn-secondary { color: var(--c-on-dark); border-color: rgba(255, 255, 255, 0.65); } .site-header .btn-secondary:hover, .hero .btn-secondary:hover, .cta-band .btn-secondary:hover, .cta-full .btn-secondary:hover, .band-dark .btn-secondary:hover, .consent .btn-secondary:hover { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-ink); } /* ── hero band (commercial pages) ─────────────────────────── */ .hero { background: var(--c-band-deep); color: var(--c-on-dark); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--rule-thick); background: var(--c-accent); } .hero-inner { padding-block: var(--p-space-9); position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--p-space-8) var(--p-space-9); align-items: start; } .hero-copy { min-width: 0; } /* the second column: what the page covers, as links rather than a contents rail */ .hero-links { min-width: 0; padding-top: var(--p-space-2); } .hero-links .kicker { color: var(--c-accent); margin: 0 0 var(--p-space-4); } .hero-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--p-space-3); } .hero-links li { max-width: none; } .hero-links a { color: var(--c-on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 5px; font-size: var(--t-small); font-weight: var(--w-semibold); transition: color var(--motion), text-decoration-color var(--motion); } .hero-links a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); } .hero .kicker { color: var(--c-accent); } .hero h1 { color: var(--c-on-dark); margin-bottom: var(--p-space-5); max-width: 20ch; } .hero .lede { color: var(--c-on-dark-soft); font-size: 1.25rem; max-width: 58ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-4); margin-top: var(--p-space-6); } .hero-points { list-style: none; margin: var(--p-space-6) 0 0; padding: 0; display: grid; gap: var(--p-space-3); } .hero-points li { max-width: 56ch; color: var(--c-on-dark-soft); font-size: var(--t-small); padding-left: var(--p-space-5); position: relative; } .hero-points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 14px; height: var(--rule-thick); background: var(--c-accent); } /* ── page grid ────────────────────────────────────────────── */ .page-grid { display: grid; grid-template-columns: var(--w-sidebar) minmax(0, 1fr); gap: var(--p-space-8); align-items: start; } .wrap > .page-grid:first-child, .wrap > .breadcrumb:first-child { margin-top: var(--p-space-6); } .page-main { min-width: 0; } /* a commercial page has no contents rail: the grid collapses to one column */ .t-commercial .page-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .t-commercial .toc { display: none; } /* ── contents rail (guide pages) ──────────────────────────── */ .toc { position: sticky; top: var(--p-space-5); max-height: calc(100vh - var(--p-space-8)); overflow-y: auto; background: var(--sidebar-bg); padding: var(--p-space-5) var(--p-space-4); border-radius: var(--radius-card); } .toc > p, .toc-toggle { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-ink); margin: 0 0 var(--p-space-4); } .toc-toggle { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: default; font-family: inherit; } .toc[data-collapsible="true"] .toc-toggle { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-3); } .toc[data-collapsible="true"] .toc-toggle::after { content: "+"; font-size: 1.25rem; line-height: 1; } .toc[data-collapsible="true"] .toc-toggle[aria-expanded="true"]::after { content: "\2212"; } .toc ul { list-style: none; margin: 0; padding: 0; } .toc li { max-width: none; margin-bottom: var(--p-space-2); } .toc a { display: block; font-size: var(--t-small); line-height: 1.4; color: var(--c-body); text-decoration: none; padding-left: var(--p-space-3); border-left: var(--rule-thick) solid transparent; } .toc a:hover { color: var(--c-ink); } .toc a[aria-current="true"] { color: var(--c-ink); font-weight: var(--w-semibold); border-left: var(--sidebar-active-bar); } .toc .toc-h3 { padding-left: var(--p-space-5); font-size: 0.875rem; } /* ── content typography ───────────────────────────────────── */ .page-main > section { padding-block: var(--p-space-6); } .lede { font-size: 1.1875rem; line-height: 1.6; color: var(--c-ink); font-weight: var(--w-regular); } .byline { font-size: var(--t-small); color: var(--c-body); border-block: var(--hairline); padding-block: var(--p-space-4); margin-block: var(--p-space-5); display: flex; align-items: center; gap: var(--p-space-4); flex-wrap: wrap; } .byline img { width: var(--byline-avatar); height: var(--byline-avatar); border-radius: var(--radius-round); } .byline .updated { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-muted); } /* on a commercial page the byline is a quiet trust strip, not a masthead */ .t-commercial .byline { border-top: 0; margin-top: var(--p-space-8); font-size: var(--t-kicker); letter-spacing: 0.02em; color: var(--c-muted); } .t-commercial .byline img { width: 32px; height: 32px; } /* ── evidence layer: citations and definitions ────────────── */ .definition { background: var(--definition-bg); border-left: var(--definition-rule); padding: var(--p-space-5); margin-block: var(--p-space-5); border-radius: 0 var(--radius-card) var(--radius-card) 0; } .definition p { max-width: none; margin: 0; } .cite { font-family: var(--citation-font); font-size: var(--t-kicker); color: var(--c-evidence); } .source-note { border-left: var(--citation-rule); padding-left: var(--p-space-4); font-size: var(--t-small); color: var(--c-body); margin-block: var(--p-space-4); } /* ── tables ───────────────────────────────────────────────── */ .table-scroll { border-radius: var(--radius-card); } .table-scroll caption { text-align: left; font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-ink); padding-bottom: var(--p-space-3); } /* ── infographics ─────────────────────────────────────────── */ figure.infographic { margin: var(--p-space-7) 0; border: var(--hairline); border-radius: var(--radius-card); padding: var(--p-space-5); position: relative; background: var(--c-paper); } figure.infographic svg { display: block; width: 100%; height: auto; } figure.infographic figcaption { font-size: var(--t-small); color: var(--c-body); margin-top: var(--p-space-4); } figure.infographic .sr-restate { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── process axis ─────────────────────────────────────────── */ .axis { list-style: none; margin: var(--p-space-7) 0; padding: 0 0 0 var(--p-space-8); border-left: var(--axis-line); } .axis > li { position: relative; max-width: none; padding-bottom: var(--p-space-7); } .axis > li::before { content: attr(data-step); position: absolute; left: calc(-1 * var(--p-space-8) - 1px); width: var(--axis-node-size); height: var(--axis-node-size); transform: translateX(-50%); display: grid; place-items: center; background: var(--c-accent); border-radius: var(--radius-round); font-size: var(--t-kicker); font-weight: var(--w-black); color: var(--c-on-accent); } .axis .deadline { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-warning); } /* ── cards ────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--p-space-5); margin-block: var(--p-space-6); } .card { border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad); background: var(--c-paper); transition: box-shadow var(--motion), transform var(--motion), border-color var(--motion); } .card h3 { margin-top: 0; font-size: 1.125rem; } .card p { max-width: none; font-size: var(--t-small); color: var(--c-body); } .card a { text-decoration: none; font-weight: var(--w-semibold); } .card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); } /* a numbered card, for "what you get" and process grids on commercial pages */ .card-num { counter-increment: cardnum; } .card-grid-numbered { counter-reset: cardnum; } .card-num::before { content: counter(cardnum, decimal-leading-zero); display: inline-block; font-size: var(--t-kicker); font-weight: var(--w-black); letter-spacing: var(--t-kicker-ls); color: var(--c-on-accent); background: var(--c-accent); padding: var(--p-space-1) var(--p-space-2); margin-bottom: var(--p-space-3); } /* ── banded sections ──────────────────────────────────────── */ .band { padding-block: var(--section-y); } .band-alt { background: var(--c-paper-alt); } .band-dark { background: var(--c-band); color: var(--c-on-dark); } .band-dark h2, .band-dark h3 { color: var(--c-on-dark); } .band-dark p, .band-dark li { color: var(--c-on-dark-soft); } .band-dark .kicker { color: var(--c-accent); } .band-dark a { color: var(--c-accent); } /* ── CTA band ─────────────────────────────────────────────── */ .cta-band { background: var(--cta-band-bg); color: var(--cta-band-fg); padding: var(--p-space-7) var(--p-space-6); margin-block: var(--p-space-8); border-radius: var(--radius-card); border-left: 6px solid var(--c-accent); } .cta-band p { max-width: 62ch; margin: 0 0 var(--p-space-5); color: var(--c-on-dark-soft); } .cta-band h2, .cta-band h3 { color: var(--c-on-dark); margin-top: 0; } .cta-band .kicker { color: var(--c-accent); } /* the full-bleed variant closes a commercial page */ .cta-full { background: var(--c-band-deep); color: var(--c-on-dark); padding-block: var(--section-y); margin: 0; border-radius: 0; border-left: 0; border-top: var(--rule-thick) solid var(--c-accent); } .cta-full h2 { color: var(--c-on-dark); margin-top: 0; } .cta-full p { color: var(--c-on-dark-soft); } /* ── FAQ ──────────────────────────────────────────────────── */ .faq { margin-block: var(--p-space-6); } .faq details { border-bottom: var(--hairline); padding-block: var(--p-space-4); } .faq summary { font-weight: var(--w-semibold); color: var(--c-ink); cursor: pointer; font-size: 1.0625rem; } .faq summary::marker { color: var(--c-accent-dark); } .faq details p { margin: var(--p-space-3) 0 0; } /* ── related links (cron-managed region) ──────────────────── */ .interlinks { border-top: var(--rule-thick) solid var(--c-accent); padding-top: var(--p-space-5); margin-top: var(--p-space-8); } .interlinks ul, .related-links__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--p-space-6); } .interlinks li, .related-links__list li { max-width: none; margin-bottom: var(--p-space-3); break-inside: avoid; } .related-links__title { font-size: var(--t-kicker); line-height: var(--t-kicker-lh); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-ink); margin: 0 0 var(--p-space-4); } /* ── breadcrumb ───────────────────────────────────────────── */ .breadcrumb { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-medium); color: var(--c-muted); padding-block: var(--p-space-4); margin-bottom: var(--p-space-4); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--p-space-2); margin: 0; padding: 0; } .breadcrumb li { max-width: none; } .breadcrumb a { color: var(--c-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--c-ink); } /* on a commercial page the breadcrumb sits on the dark hero */ .t-commercial .hero .breadcrumb { color: var(--c-on-dark-dim); border: 0; padding-top: 0; margin-bottom: var(--p-space-5); } .t-commercial .hero .breadcrumb a { color: var(--c-on-dark-dim); } .t-commercial .hero .breadcrumb a:hover { color: var(--c-accent); } /* ── forms ────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--p-space-7); align-items: start; } .field { margin-bottom: var(--p-space-4); } .field label { display: block; font-size: var(--t-small); font-weight: var(--w-semibold); color: var(--c-ink); margin-bottom: var(--p-space-2); } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--t-table); padding: var(--form-field-pad); border: var(--form-field-border); background: var(--c-paper); color: var(--c-ink); border-radius: 6px; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .form-rail { background: var(--form-rail-bg); padding: var(--p-space-5); position: sticky; top: var(--p-space-5); border-radius: var(--radius-card); } .visually-hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .table-scroll { position: relative; } [hidden] { display: none !important; } .form-block { border: 0; padding: 0; margin: 0 0 var(--p-space-7); min-width: 0; } .form-block legend { font-size: var(--t-h3); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: var(--w-black); color: var(--c-ink); padding: 0; margin-bottom: var(--p-space-3); } .form-grid form { max-width: var(--w-measure); } .form-note { font-size: var(--t-small); color: var(--c-body); margin: 0 0 var(--p-space-5); } .field .hint { display: block; max-width: var(--w-measure); font-size: var(--t-small); color: var(--c-body); margin-top: var(--p-space-2); } .field-mono input { font-family: var(--p-font-mono); background: var(--c-paper-alt); } .required { color: var(--c-evidence); } .field-check { display: flex; align-items: flex-start; gap: var(--p-space-3); margin-bottom: var(--p-space-3); } .field-check input { width: var(--p-space-5); height: var(--p-space-5); flex: 0 0 auto; margin: 0; accent-color: var(--c-accent-dark); } .field-check label { display: inline; max-width: var(--w-measure); font-size: var(--t-small); font-weight: var(--w-regular); color: var(--c-body); margin: 0; } .check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--p-space-5); } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--p-space-4); } .form-actions { display: flex; flex-wrap: wrap; gap: var(--p-space-4); align-items: center; margin-top: var(--p-space-5); } .form-actions button.btn { font-family: inherit; cursor: pointer; } .cf-turnstile { margin-block: var(--p-space-5); } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-rail p { max-width: none; } .form-rail > p:first-child { margin-top: 0; } .form-rail ul { list-style: none; margin: 0 0 var(--p-space-4); padding: 0; } .form-rail li { max-width: none; font-size: var(--t-small); color: var(--c-body); margin-bottom: var(--p-space-3); padding-left: var(--p-space-4); border-left: var(--rule-thick) solid var(--c-accent); } .form-rail .rail-note { font-size: var(--t-small); color: var(--c-body); margin-bottom: 0; } /* ── people (team and about) ──────────────────────────────── */ .person { border-top: var(--hairline); padding-top: var(--p-space-5); margin-top: var(--p-space-6); } .person > :first-child { margin-top: 0; } .person-meta { list-style: none; margin: 0 0 var(--p-space-4); padding: 0; } .person-meta li { max-width: none; font-size: var(--t-small); color: var(--c-body); margin-bottom: var(--p-space-1); } .person-meta .label { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-muted); margin-right: var(--p-space-2); } .person-photo { display: block; width: min(240px, 100%); height: auto; border-radius: var(--radius-card); margin: 0 0 var(--p-space-5); } /* ── short utility pages ──────────────────────────────────── */ .page-plain { max-width: var(--w-measure); margin-block: var(--p-space-7) var(--p-space-9); } /* ── footer ───────────────────────────────────────────────── */ .cta-full + .site-footer, .cta-full ~ .site-footer { margin-top: 0; } .site-footer { background: var(--c-band-deep); color: var(--c-on-dark); margin-top: var(--p-space-9); padding-block: var(--p-space-8) var(--p-space-5); border-top: var(--rule-thick) solid var(--c-accent); } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--p-space-6); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { max-width: none; margin-bottom: var(--p-space-3); } .footer-col a { color: var(--c-on-dark-dim); text-decoration: none; font-size: var(--t-small); } .footer-col a:hover { color: var(--c-accent); } .footer-head { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-accent); margin: 0 0 var(--p-space-4); } .footer-name { font-size: 1.125rem; font-weight: var(--w-black); color: var(--c-on-dark); margin: 0 0 var(--p-space-3); } .footer-line { font-size: var(--t-small); color: var(--c-on-dark-dim); margin: 0 0 var(--p-space-3); max-width: 42ch; } .footer-line a { color: var(--c-accent); } .footer-legal { border-top: 1px solid var(--c-on-dark-rule); margin-top: var(--p-space-6); padding-top: var(--p-space-5); display: flex; justify-content: space-between; gap: var(--p-space-4); flex-wrap: wrap; } .footer-legal p { font-size: var(--t-small); color: var(--c-on-dark-dim); margin: 0; max-width: 70ch; } .footer-legal a { color: var(--c-on-dark-dim); } /* ── consent banner ───────────────────────────────────────── */ .consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; background: var(--consent-bg); color: var(--consent-fg); padding: var(--p-space-4) var(--p-space-5); display: none; border-top: var(--rule-thick) solid var(--c-accent); } .consent[data-open="true"] { display: block; } .consent-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-4); flex-wrap: wrap; } .consent p { max-width: none; margin: 0; font-size: var(--t-small); color: var(--c-on-dark-soft); } .consent a { color: var(--c-accent); } /* ── unconfirmed data marker and the wide comparison table ─── */ .not-confirmed { display: inline-block; font-size: var(--t-kicker); line-height: var(--t-kicker-lh); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-warning); background: var(--c-paper-alt); border-left: var(--rule-thick) solid var(--c-warning); padding: var(--p-space-2) var(--p-space-3); margin-bottom: var(--p-space-3); } .table-sticky th[scope="row"] { position: sticky; left: 0; z-index: 1; } .definition > p + p { margin-top: var(--p-space-3); } /* ── ready-made inventory (client R11) ────────────────────── */ .shelf-updated { font-size: var(--t-kicker); letter-spacing: var(--t-kicker-ls); text-transform: uppercase; font-weight: var(--w-black); color: var(--c-muted); margin: 0 0 var(--p-space-3); } .shelf-table tr[data-status="reserved"] td { color: var(--c-muted); } .shelf-table tr[data-status="reserved"] td:nth-child(7) { color: var(--c-warning); font-weight: var(--w-semibold); } .shelf-table td:nth-child(5), .shelf-table td:nth-child(6) { text-align: var(--table-num-align); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── responsive ───────────────────────────────────────────── */ @media (max-width: 1279px) { :root { --w-sidebar: 220px; } } @media (max-width: 1023px) { .page-grid { grid-template-columns: minmax(0, 1fr); gap: var(--p-space-5); } .toc { position: static; max-height: none; } .toc ul { columns: 2; column-gap: var(--p-space-5); } .toc .toc-h3 { display: none; } .header-util-inner { font-size: 0.6875rem; gap: var(--p-space-4); } .header-util .util-right { gap: var(--p-space-4); } .header-inner { flex-wrap: wrap; } .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; order: 2; } :root { --t-kicker: 0.8125rem; --t-small: 1rem; } .brand, .nav-toggle, .btn { min-height: 44px; } .brand { padding-block: var(--p-space-2); } .btn { display: inline-flex; align-items: center; } .btn-header { order: 3; } .site-nav { order: 4; flex-basis: 100%; display: none; } .site-nav[data-open="true"] { display: block; } .site-nav ul { flex-direction: column; gap: var(--p-space-3); } .site-nav a { border-bottom: 0; border-left: var(--rule-thick) solid transparent; padding-left: var(--p-space-3); } .site-nav a[aria-current="page"] { border-bottom-color: transparent; border-left-color: var(--c-accent); } .form-grid { grid-template-columns: minmax(0, 1fr); } .form-rail { position: static; } .footer-inner { grid-template-columns: 1fr 1fr; } .hero-inner { padding-block: var(--p-space-7); grid-template-columns: minmax(0, 1fr); gap: var(--p-space-6); } .hero-links { border-top: 1px solid var(--c-on-dark-rule); padding-top: var(--p-space-5); } } @media (max-width: 767px) { .interlinks ul { columns: 1; } .toc ul { columns: 1; } .axis { padding-left: var(--p-space-7); } .header-util .util-right { margin-left: 0; } } @media (max-width: 479px) { .footer-inner { grid-template-columns: 1fr; } .wrap { padding-inline: var(--p-space-4); } .card-grid { grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; justify-content: center; } } @media print { .site-header, .site-footer, .toc, .cta-band, .cta-full, .consent, .nav-toggle, .hero-actions { display: none; } .hero { background: none; color: #000; } .hero h1, .hero .lede { color: #000; } body { font-size: 11pt; } }