/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--rd-header-bg);
	border-bottom: 1px solid var(--rd-header-border);
	/* The blur lives on a pseudo-element, not on .site-header itself.
	   A backdrop-filter other than `none` makes an element the containing block
	   for its position:fixed descendants, and the off-canvas menu is a fixed
	   descendant of this header: `inset: 76px 0 0 0` was resolving against the
	   77px-tall header instead of the viewport, so the open menu rendered as a
	   48px sliver tucked inside the header and never appeared. Present since
	   the first MVP commit — the mobile menu has never opened. Moving the blur
	   down one level keeps the effect and removes the containment. */
	isolation: isolate;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(12px);
	pointer-events: none;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--rd-space-4); min-height: var(--rd-header-height); }

/* Brand lockup. Renders the real custom logo when one is set; until then the
   wordmark is treated as a deliberate mark rather than fallback text. */
.brand { display: inline-flex; align-items: baseline; gap: 0.32rem; font-weight: 800; font-size: 1.16rem; letter-spacing: -0.025em; color: var(--rd-text); text-decoration: none; }
.brand:hover { color: var(--rd-text); }
.brand-mark { font-weight: 800; }
.brand-mark--accent { color: var(--rd-accent-ink); }
.brand-rule { display: inline-block; width: 1px; height: 1.05em; margin: 0 0.15rem; background: var(--rd-border); transform: translateY(0.12em); }
.brand-tag { font-size: 0.66rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rd-muted); }
.brand img { max-height: 44px; width: auto; }

/* Custom logo. The supplied horizontal lockup is a 4.91:1 tight crop, so it is
   sized by height and allowed to find its own width. Intrinsic width/height
   attributes stay on the <img>, so the box is reserved before load and the
   header does not shift.

   The link must not shrink: as a flex item it was being compressed between the
   nav and the CTA, and because base.css gives every img max-width:100% the
   picture narrowed while its fixed height stayed put — the mark rendered at
   3.47:1 instead of its true 4.92:1 at 901px. flex:0 0 auto plus object-fit
   makes squeezing impossible rather than merely unlikely. */
.custom-logo-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; flex: 0 0 auto; }
.custom-logo { height: 40px; width: auto; max-width: none; display: block; object-fit: contain; }
@media (max-width: 1024px) { .custom-logo { height: 36px; } }
@media (max-width: 900px)  { .custom-logo { height: 34px; } }
@media (max-width: 400px)  { .custom-logo { height: 30px; } }

/* Dark scheme. The logo's own navy is #011b36 — 1.04:1 against the dark header,
   effectively invisible — and recolouring someone's brand mark is not ours to
   do. Instead the mark keeps its real colours and sits on a restrained light
   plate: tight padding, small radius, hairline border. Deliberately not a card
   or a big white badge. */
:root[data-theme="dark"] .custom-logo-link {
	background: #f7f6f3;
	padding: 0.28rem 0.5rem;
	border-radius: 6px;
	border: 0;
}
@media (max-width: 560px) { .brand-rule, .brand-tag { display: none; } }

.main-nav ul { display: flex; gap: var(--rd-space-4); list-style: none; margin: 0; padding: 0; }
.main-nav a { font-weight: 650; font-size: 0.95rem; padding: 0.4rem 0; color: var(--rd-text); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--rd-ease), border-color var(--rd-ease); }
.main-nav a:hover { color: var(--rd-accent-ink); border-bottom-color: var(--rd-accent-ink); }
.main-nav a:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 3px; }
.main-nav a[aria-current="page"] { color: var(--rd-accent-ink); border-bottom-color: var(--rd-accent-ink); }
.main-nav .nav-cta { display: none; margin-top: var(--rd-space-3); }
.header-actions { display: flex; align-items: center; gap: var(--rd-space-3); }

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-sm);
	padding: 0.5rem 0.7rem;
	min-width: 44px; min-height: 44px;
	cursor: pointer;
}
/* The bars were painted --rd-navy, which is a fixed dark value: on the dark
   header they measured ~1.1:1 and the button read as an empty outline. --rd-text
   inverts with the scheme, so the control stays visible in both. */
.menu-toggle .bar { display: block; width: 22px; height: 2px; background: var(--rd-text); margin: 4px 0; transition: transform var(--rd-ease), opacity var(--rd-ease); }
/* The close state never rendered as an X: the bars sit on a 10px pitch (2px
   tall, 4px margins, no collapsing inside the flex column) but were being
   moved 6px, so the two strokes stopped 4px short of meeting and read as a
   slash. Only ever visible with the menu open, which until now it never was. */
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* 901–1100px. The nav is still a desktop row here but the row is tight, and the
   header CTA was wrapping onto a second line — which grew the header from 77px
   to 84px in that band only. Tightened before the wrap can happen; under 900px
   the mobile rules take over. */
@media (min-width: 901px) and (max-width: 1100px) {
	.main-nav ul { gap: var(--rd-space-3); }
	.main-nav a { font-size: 0.9rem; }
	.header-actions .btn { padding: 0.75rem 1rem; font-size: 0.9rem; white-space: nowrap; }
}
/* Once the logo stopped shrinking, the un-wrapped CTA ran past the viewport
   twice in this band: ~26px at 901px, and again just above 1024px where the
   logo steps back up to 40px tall. The row's own gaps absorb both, rather than
   the brand mark absorbing them. */
@media (min-width: 901px) and (max-width: 1100px) {
	.header-inner { gap: var(--rd-space-2); }
	.main-nav ul { gap: var(--rd-space-2); }
}

@media (max-width: 900px) {
	/* Off-canvas nav. Being fixed, it cannot be clipped by an ancestor's
	   overflow, so parking it at translateX(100%) left a 375px-wide box sitting
	   outside the viewport that Chrome still counted in document scrollWidth —
	   a phantom horizontal scrollbar at 375px and 768px. Neither overflow-x on
	   <html> nor visibility:hidden removes it; only taking the box out of
	   layout does. Closing is therefore display-based, which also fixes a real
	   accessibility bug (links in a closed menu were keyboard-focusable). The
	   slide is kept as an entry animation. */
	.main-nav { display: none; position: fixed; inset: var(--rd-header-height) 0 0 0; background: var(--rd-bg); padding: var(--rd-space-4); overflow-y: auto; }
	.main-nav.is-open { display: block; animation: rd-nav-in var(--rd-ease); }
	@keyframes rd-nav-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav li { border-bottom: 1px solid var(--rd-border); }
	.main-nav a { display: block; padding: var(--rd-space-3) 0; font-size: 1.05rem; }
	.menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
	.header-actions .btn-primary { padding: 0.7rem 0.9rem; font-size: 0.88rem; }
	/* The nav CTA is an <a> inside .main-nav, so `.main-nav a { color: var(--rd-text) }`
	   out-specifies `.btn-primary { color: #fff }` and painted dark text on the
	   burgundy fill — 1.54:1. Present since the CTA was added; it was never seen
	   because the off-canvas menu did not open until the navigation hotfix. */
	.main-nav .nav-cta { display: inline-flex; width: 100%; color: #fff; }
}
body.nav-open { overflow: hidden; }

/* Hero */
.hero { padding: var(--rd-space-8) 0 var(--rd-space-7); background: linear-gradient(160deg, var(--rd-hero-top) 0%, var(--rd-bg) 62%); border-bottom: 1px solid var(--rd-border); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--rd-space-6); align-items: center; }
.hero .lead { color: var(--rd-muted); font-size: var(--rd-fs-lead); margin-bottom: var(--rd-space-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--rd-space-2); margin-bottom: var(--rd-space-4); }
.hero-card { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-lg); padding: var(--rd-space-4); box-shadow: var(--rd-shadow); }
.check-list { list-style: none; padding: 0; margin: var(--rd-space-3) 0 0; }
.check-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--rd-border); padding-left: 1.6rem; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--rd-accent-ink); font-weight: 800; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* Mobile hero. The desktop top padding (6.5rem) sat under a 76px sticky
   header, pushing the eyebrow ~120px down the screen and spending the most
   valuable part of the first view on empty space. Reduced to bring the
   header→eyebrow gap into the 48–72px band; desktop spacing is untouched. */
@media (max-width: 640px) {
	.hero { padding: var(--rd-space-6) 0 var(--rd-space-6); }
	.hero h1 { font-size: clamp(1.8rem, 1.35rem + 2.2vw, 2.4rem); line-height: 1.12; }
	.hero .lead { font-size: 1.02rem; margin-bottom: var(--rd-space-3); }
	/* Both actions go full width and both stay buttons.
	   The secondary was previously stripped to an underlined text link here —
	   that removed ~120px of stacked fill from the first view, but it also left
	   the mobile hero speaking a different language from the desktop one, where
	   the pair reads as two members of the same family. Hierarchy does not come
	   from width; it comes from fill. A solid burgundy button next to a bordered
	   transparent one says which is primary without needing to be wider, which
	   is exactly how the desktop pair already works.
	   Everything else is inherited from .btn-light, so this is the desktop
	   control at mobile width rather than a second design. */
	.hero-actions { gap: var(--rd-space-2) var(--rd-space-3); align-items: stretch; margin-bottom: var(--rd-space-3); }
	.hero-actions .btn { width: 100%; }
	.hero-scope { margin-bottom: var(--rd-space-2); }
	.check-list li { padding-top: 0.45rem; padding-bottom: 0.45rem; }
	.hero-card { padding: var(--rd-space-3); }
}

/* Content article (single templates) */
.content-wrap { padding: var(--rd-space-6) 0 var(--rd-space-7); }
.content-wrap article { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-lg); padding: var(--rd-space-5); max-width: var(--rd-max-prose); }
.content-wrap .article-meta { color: var(--rd-muted); font-size: var(--rd-fs-small); margin-bottom: var(--rd-space-4); }

/* Empty state (admin/editor visible fallback, no fake content) */
.empty-state { border: 1px dashed var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-space-5); color: var(--rd-muted); text-align: center; }

/* Footer */
.site-footer { background: var(--rd-navy); color: #cfd8e0; padding: var(--rd-space-7) 0 var(--rd-space-4); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--rd-space-5); }
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0.5rem 0; }
.site-footer a:hover { color: var(--rd-accent); }
.footer-bottom { border-top: 1px solid var(--rd-navy-700); margin-top: var(--rd-space-5); padding-top: var(--rd-space-3); color: #8fa0ac; font-size: var(--rd-fs-small); display: flex; flex-wrap: wrap; gap: var(--rd-space-3); justify-content: space-between; align-items: center; }
.footer-legal-list { display: flex; flex-wrap: wrap; gap: var(--rd-space-3); margin: 0; }
.footer-legal-list li { margin: 0; }
.footer-legal-list a { color: #8fa0ac; }
.footer-legal-list a:hover { color: var(--rd-accent); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* Footer brand. Larger than the header lockup — there is space here and it
   closes the page on the mark — but capped so it never outweighs the four
   footer columns. The footer is dark in both schemes, so the logo gets the
   same restrained light plate as the dark header. */
.footer-brand { display: inline-flex; background: #f7f6f3; padding: 0.45rem 0.7rem; border-radius: 8px; margin-bottom: var(--rd-space-3); }
.footer-logo { height: 46px; width: auto; max-width: 100%; display: block; }
@media (max-width: 640px) { .footer-logo { height: 40px; } }

/* Footer conversion row. Compact by design — the final CTA band sits directly
   above it, so this is a last catch for the visitor who scrolled past it, not
   a second hero. */
.footer-convert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3) var(--rd-space-5);
	padding-bottom: var(--rd-space-5);
	margin-bottom: var(--rd-space-5);
	border-bottom: 1px solid var(--rd-navy-700);
}
.footer-convert p { margin: 0; color: #cfd8e0; max-width: 52ch; font-weight: 600; }
.footer-convert .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
	.footer-convert { display: block; }
	.footer-convert p { margin-bottom: var(--rd-space-3); }
	.footer-convert .btn { width: 100%; }
}

/* Footer contact column. The phone is the highest-intent item in the footer, so
   it is the one line given real weight. */
.footer-contact-strong { font-weight: 750; font-size: 1.05rem; color: #fff; }
.footer-contact-muted { color: #8fa0ac; font-size: var(--rd-fs-small); }

/* --- Authority page shell (Sprint #006) -----------------------------------
   The article carried `max-width: 68ch`, which is a paragraph measure applied
   to a whole document: at 1440px it left 625px of viewport — 495px of it
   inside the 1180px container — completely unused, and a 10.845px page with
   12 headings and 7 sources looked like an ordinary 685px column. The measure
   moves back to where it belongs (base.css already caps `p` at 68ch, so body
   text stays readable at any column width) and the freed space becomes a
   contextual rail. */
.authority-shell { display: block; }
.content-wrap .authority-main {
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
	padding: var(--rd-space-5);
	max-width: none;
}
.authority-main > h1 { max-width: none; }

@media (min-width: 1024px) {
	.authority-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 310px;
		gap: var(--rd-space-6);
		align-items: start;
	}
	/* Structured content — tables, decision blocks, checklists — is not prose
	   and should use the column it is given rather than a reading measure. */
	.authority-main .atlas-decision,
	.authority-main .atlas-checklist,
	.authority-main table { max-width: none; }
	/* The rail carries the assessment CTA in the same fold, so the inline one
	   would be the same action twice in one viewport. */
	.authority-main .authority-hero-cta { display: none; }
}

/* Contextual rail. Sticky under the fixed header, and capped so a long rail
   scrolls inside itself instead of running past the footer. */
.authority-rail { display: none; }
@media (min-width: 1024px) {
	.authority-rail { display: block; }
	.rail-sticky {
		position: sticky;
		top: calc(var(--rd-header-height) + var(--rd-space-3));
		max-height: calc(100vh - var(--rd-header-height) - var(--rd-space-5));
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: var(--rd-space-3);
	}
}
.rail-panel {
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius);
	padding: var(--rd-space-4);
}
.rail-assess { border-top: 3px solid var(--rd-primary); }
.rail-title { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--rd-space-2); }
.rail-text { font-size: var(--rd-fs-small); color: var(--rd-muted); margin: 0 0 var(--rd-space-3); max-width: none; }
.rail-cta { width: 100%; justify-content: center; text-align: center; }
.rail-links, .toc-list { margin: 0; padding: 0 0 0 1.1em; }
.rail-links { list-style: disc; }
.rail-links li, .toc-list li { margin: 0.35rem 0; }
.rail-links a, .toc-list a { color: var(--rd-text); font-size: var(--rd-fs-small); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.rail-links a:hover, .toc-list a:hover,
.rail-links a:focus-visible, .toc-list a:focus-visible { color: var(--rd-accent-ink); border-bottom-color: var(--rd-accent-ink); }
.rail-note { font-size: 0.78rem; color: var(--rd-muted); margin: var(--rd-space-2) 0 0; max-width: none; }
.toc-more { margin-top: var(--rd-space-2); }
.toc-more summary { cursor: pointer; font-size: var(--rd-fs-small); font-weight: 700; color: var(--rd-accent-ink); }
.toc-more summary:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 3px; border-radius: 3px; }
.toc-more .toc-list { margin-top: var(--rd-space-2); }
.rail-sources-line { font-size: var(--rd-fs-small); color: var(--rd-muted); margin: 0 0 var(--rd-space-2); max-width: none; }
.rail-route { font-size: var(--rd-fs-small); font-weight: 700; color: var(--rd-accent-ink); text-decoration: none; }
.rail-route:hover, .rail-route:focus-visible { text-decoration: underline; }

/* Narrow-viewport table of contents, inside the article. Mutually exclusive
   with the rail's copy — never both at once. */
.authority-toc--inline {
	margin: var(--rd-space-4) 0;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-sm);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface-2);
}
.authority-toc--inline > summary { cursor: pointer; font-weight: 800; font-size: 0.95rem; }
.authority-toc--inline > summary:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 3px; border-radius: 3px; }
.authority-toc--inline .toc-list { margin-top: var(--rd-space-3); }
@media (min-width: 1024px) { .authority-toc--inline { display: none; } }

/* Anchor landing offset — the header is sticky, so a jump would otherwise put
   the heading underneath it. */
.authority-main h2[id] { scroll-margin-top: calc(var(--rd-header-height) + var(--rd-space-3)); }
.authority-meta { color: var(--rd-muted); font-size: var(--rd-fs-small); margin: calc(var(--rd-space-3) * -1) 0 var(--rd-space-3); }