:root {
    --navy: #111c35;
    --navy-2: #1d2d50;
    --cream: #f5efe4;
    --cream-2: #fbf8f2;
    --gold: #bd8433;
    --rust: #a44d37;
    --plum: #745681;
    --blue: #366ba3;
    --teal: #2f7c7a;
    --ink: #18202f;
    --muted: #5e6878;
    --line: #d5d9e0;
    --white: #ffffff;
    --max: 1320px;
    --wide: 1180px;
    --reading: 760px;
    --radius: 18px;
    --shadow: 0 18px 60px rgba(17, 28, 53, .10);
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Inter, Aptos, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.65;
    background: var(--cream-2);
    text-rendering: optimizeLegibility;
}
body::selection { background: #f1d7a6; color: var(--ink); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .75rem 1rem; z-index: 999; border: 2px solid var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: .98; letter-spacing: -.045em; }
h1 { font-size: clamp(3rem, 7vw, 7rem); margin: 0; }
h2 { font-size: clamp(2rem, 4.5vw, 4.6rem); margin: 0; }
h3 { font-size: clamp(1.35rem, 2.3vw, 2.25rem); margin: 0; }

.eyebrow {
    margin: 0 0 1rem;
    color: var(--gold);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .17em;
    line-height: 1.3;
    text-transform: uppercase;
}
.eyebrow.light { color: #efc37d; }
.text-link {
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: .15rem;
}
.light-link { color: #fff; }

.site-ribbon { background: var(--navy); color: #fff; font-size: .78rem; }
.site-ribbon-inner {
    max-width: var(--max);
    margin: auto;
    min-height: 34px;
    padding: .45rem 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    letter-spacing: .035em;
}
.site-ribbon a { color: #fff; text-decoration: none; font-weight: 800; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(251, 248, 242, .94);
    border-bottom: 1px solid rgba(17, 28, 53, .14);
    backdrop-filter: blur(16px);
}
.header-core {
    max-width: var(--max);
    margin: auto;
    min-height: 86px;
    padding: .85rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--navy);
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    font-weight: 800;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.09);
}
.brand-copy { display: grid; line-height: 1.15; }
.brand-name { font-size: 1rem; font-weight: 900; letter-spacing: -.015em; }
.brand-description { margin-top: .3rem; color: var(--muted); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.header-utilities { display: flex; align-items: center; gap: 1rem; }
.header-search { width: min(36vw, 440px); position: relative; }
.header-search input {
    width: 100%;
    min-height: 48px;
    padding: .75rem 3.3rem .75rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255,255,255,.72);
    outline: none;
}
.header-search input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17,28,53,.09); }
.header-search button {
    position: absolute;
    right: .3rem;
    top: .3rem;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--navy);
}
.account-nav { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.account-nav a { text-decoration-thickness: 1px; text-underline-offset: .25rem; }
.account-nav a.active { font-weight: 900; }
.admin-link { color: var(--rust); font-weight: 800; }
.menu-toggle { display: none; }

.main-nav-shell { border-top: 1px solid rgba(17, 28, 53, .08); }
.main-nav {
    max-width: var(--max);
    margin: auto;
    padding: .1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
    position: relative;
    padding: .78rem .75rem .85rem;
    color: #283247;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .25rem;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--navy); font-weight: 900; }

.button, .small-button, button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .8rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    background: var(--navy);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover, .small-button:hover, button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,28,53,.16); }
.small-button { min-height: 38px; padding: .45rem .85rem; font-size: .82rem; }
.secondary { color: var(--navy); background: transparent; border-color: var(--navy); }
.light-button { color: var(--navy); background: #fff; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 2.2rem; }

.flash { max-width: var(--max); margin: 1rem auto; padding: 1rem 1.25rem; border-radius: 12px; }
.flash.success { background: #e3f5e9; color: #18552d; }
.flash.error { background: #fde7e7; color: #831f1f; }

/* Homepage */
.home-hero {
    max-width: var(--max);
    margin: auto;
    min-height: 720px;
    padding: clamp(4rem, 8vw, 8rem) 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}
.home-hero-copy h1 { max-width: 13ch; font-size: clamp(3.4rem, 6.4vw, 6.9rem); }
.home-hero-lead { max-width: 760px; margin: 2rem 0 0; color: #465165; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55; }
.identity-stage {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 42px 42px 160px 42px;
    color: #fff;
    background: var(--navy);
    box-shadow: 28px 32px 0 var(--gold), var(--shadow);
}
.identity-stage::before {
    content: '';
    position: absolute;
    width: 330px;
    height: 330px;
    right: -90px;
    top: -90px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 76px rgba(255,255,255,.018);
}
.identity-stage-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: 42px 42px;
}
.identity-monogram {
    position: absolute;
    left: 8%;
    bottom: 5%;
    color: rgba(255,255,255,.08);
    font-family: var(--serif);
    font-size: clamp(11rem, 25vw, 23rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.12em;
    line-height: .7;
}
.identity-note {
    position: absolute;
    z-index: 2;
    max-width: 190px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255,255,255,.2);
    color: #dce4f3;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    font-size: .82rem;
    line-height: 1.35;
    transform: rotate(-2deg);
}
.identity-note span { display: block; margin-bottom: .25rem; color: #fff; font-size: 1.08rem; font-weight: 900; }
.identity-note-one { left: 8%; top: 10%; }
.identity-note-two { right: 8%; top: 37%; transform: rotate(2deg); }
.identity-note-three { left: 20%; bottom: 10%; transform: rotate(1deg); }
.identity-stamp {
    position: absolute;
    right: 10%;
    bottom: 10%;
    z-index: 3;
    max-width: 210px;
    color: #efc37d;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.35;
    text-align: right;
}
.home-intro-band {
    padding: clamp(3rem, 6vw, 6rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 130px 1.35fr .8fr;
    gap: 2.5rem;
    align-items: start;
    color: #fff;
    background: var(--navy);
}
.home-intro-number { color: rgba(255,255,255,.13); font-family: var(--serif); font-size: 8rem; font-style: italic; line-height: .75; }
.home-intro-band h2 { max-width: 17ch; font-size: clamp(2.3rem, 4.2vw, 4.6rem); }
.home-intro-band > p { margin: .3rem 0 0; color: #c5cede; font-family: var(--serif); font-size: 1.15rem; }

.editorial-section { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 9rem) 1.5rem; }
.editorial-heading { margin-bottom: 3.5rem; display: flex; justify-content: space-between; gap: 3rem; align-items: end; }
.editorial-heading > div { max-width: 900px; }
.editorial-heading h2 { max-width: 18ch; }
.heading-note { max-width: 340px; color: var(--muted); font-family: var(--serif); }
.pathway-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.pathway-card {
    position: relative;
    min-height: 390px;
    padding: 1.7rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hub-primary) 25%, transparent);
    border-radius: 28px;
    color: var(--hub-text);
    background: var(--hub-bg);
    text-decoration: none;
    box-shadow: 0 14px 44px rgba(17,28,53,.08);
    transition: transform .22s ease, box-shadow .22s ease;
}
.pathway-card:nth-child(1), .pathway-card:nth-child(4) { grid-column: span 7; }
.pathway-card:nth-child(2), .pathway-card:nth-child(3) { grid-column: span 5; }
.pathway-card:nth-child(5), .pathway-card:nth-child(6) { grid-column: span 6; }
.pathway-card:hover { transform: translateY(-7px) rotate(-.25deg); box-shadow: 0 24px 60px rgba(17,28,53,.14); }
.pathway-card::before {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    right: -90px;
    bottom: -90px;
    border: 2px solid var(--hub-accent);
    border-radius: 50%;
    opacity: .35;
}
.pathway-number { color: var(--hub-label); font-family: var(--serif); font-size: 3.5rem; font-style: italic; line-height: 1; }
.pathway-hub { margin-top: 1.6rem; color: var(--hub-label); font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.pathway-card h3 { max-width: 17ch; margin-top: .8rem; color: var(--hub-heading); }
.pathway-card p { max-width: 620px; margin: auto 0 0; padding-top: 1.8rem; color: var(--hub-muted); }
.pathway-arrow { position: absolute; right: 1.5rem; top: 1.5rem; color: var(--hub-label); font-size: 1.6rem; }

.home-spotlight {
    position: relative;
    min-height: 620px;
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: .42fr 1fr;
    gap: 4rem;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--rust);
}
.home-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .16;
    background: repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.2) 39px 40px);
}
.spotlight-label, .spotlight-story { position: relative; z-index: 2; }
.spotlight-label { align-self: start; padding-top: .8rem; }
.spotlight-label span { color: #f6dccd; font-family: var(--serif); font-size: 1.1rem; }
.spotlight-story { max-width: 930px; }
.spotlight-story h2 { max-width: 15ch; font-size: clamp(3rem, 6vw, 6.5rem); }
.spotlight-story h2 a { text-decoration: none; }
.spotlight-story p { max-width: 760px; margin: 2rem 0 0; color: #f8e7de; font-family: var(--serif); font-size: 1.2rem; }
.spotlight-meta { color: #ffd4a2 !important; font-family: var(--sans) !important; font-size: .76rem !important; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.spotlight-mark { position: absolute; right: 2%; bottom: -30%; color: rgba(255,255,255,.08); font-family: var(--serif); font-size: 40rem; line-height: 1; }

.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.story-card { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }
.story-card:nth-child(2n) { border-right: 0; }
.story-card-link { position: relative; min-height: 340px; height: 100%; padding: 2rem; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; transition: background .2s ease; }
.story-card-link:hover { background: #fff; }
.story-card-topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .76rem; }
.card-meta { color: var(--blue); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.story-card h2 { max-width: 17ch; margin-top: 2.4rem; font-size: clamp(1.9rem, 3.3vw, 3.25rem); }
.story-card p { max-width: 630px; margin: auto 0 0; padding-top: 2rem; color: var(--muted); font-family: var(--serif); font-size: 1.04rem; }
.story-card-arrow { position: absolute; right: 2rem; bottom: 2rem; font-size: 1.4rem; }
.story-card--wide { grid-column: 1 / -1; }
.story-card--wide .story-card-link { min-height: 440px; }
.story-card--wide h2 { max-width: 18ch; font-size: clamp(2.7rem, 5vw, 5.4rem); }
.story-card--wide p { max-width: 820px; }

.home-about-band {
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
    color: #fff;
    background: var(--navy-2);
}
.home-about-copy h2 { max-width: 16ch; }
.home-about-copy > p:not(.eyebrow) { max-width: 760px; color: #ccd5e5; font-family: var(--serif); font-size: 1.12rem; }
.home-about-ledger { border-top: 1px solid rgba(255,255,255,.25); }
.home-about-ledger div { padding: 1.25rem 0; display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.home-about-ledger strong { color: #efc37d; }
.home-about-ledger span { color: #d6deeb; }

.hub-index { border-top: 1px solid var(--line); }
.hub-index a {
    min-height: 104px;
    padding: 1.2rem .4rem;
    display: grid;
    grid-template-columns: 80px 180px 1fr 40px;
    gap: 1.5rem;
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: padding .2s ease, background .2s ease;
}
.hub-index a:hover { padding-left: 1.2rem; background: #fff; }
.hub-index-number { color: var(--hub-primary); font-family: var(--serif); font-size: 1.6rem; font-style: italic; }
.hub-index-name { font-weight: 900; }
.hub-index-promise { color: var(--muted); font-family: var(--serif); font-size: 1.02rem; }
.hub-index-arrow { color: var(--hub-primary); font-size: 1.3rem; text-align: right; }

.home-closing {
    min-height: 550px;
    padding: clamp(5rem, 10vw, 10rem) 1.5rem;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #0b1428, #202e50);
}
.home-closing h2 { max-width: 20ch; margin: 0 auto 2.5rem; }

/* Start Here */
.start-hero {
    position: relative;
    min-height: 650px;
    padding: clamp(5rem, 10vw, 10rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 1fr .35fr;
    gap: 4rem;
    align-items: end;
    overflow: hidden;
    color: #fff;
    background: var(--navy);
}
.start-hero-index { position: absolute; left: -2%; top: -18%; color: rgba(255,255,255,.045); font-family: var(--serif); font-size: 35rem; font-style: italic; line-height: 1; }
.start-hero-copy { position: relative; z-index: 2; }
.start-hero-copy h1 { max-width: 14ch; }
.start-hero-copy > p:not(.eyebrow) { max-width: 760px; color: #cbd4e3; font-family: var(--serif); font-size: 1.2rem; }
.start-hero-note { position: relative; z-index: 2; padding: 1.4rem; border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.06); }
.start-hero-note span { display: block; margin-bottom: .6rem; color: #efc37d; font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.start-hero-note strong { font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; }
.route-list { border-top: 1px solid var(--line); }
.route-list > a {
    position: relative;
    min-height: 220px;
    padding: 2rem 5rem 2rem 1rem;
    display: grid;
    grid-template-columns: 80px 170px 1.2fr .8fr;
    gap: 2rem;
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: background .2s ease, padding .2s ease;
}
.route-list > a:hover { padding-left: 2rem; background: var(--hub-bg); }
.route-number { color: var(--hub-primary); font-family: var(--serif); font-size: 2.3rem; font-style: italic; }
.route-hub { color: var(--hub-primary); font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.route-list h2 { color: var(--ink); font-size: clamp(1.7rem, 3vw, 3.2rem); }
.route-list p { color: var(--muted); font-family: var(--serif); }
.route-arrow { position: absolute; right: 1.5rem; top: 50%; color: var(--hub-primary); font-size: 1.5rem; transform: translateY(-50%); }
.start-secondary {
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 5rem;
    color: #fff;
    background: var(--rust);
}
.start-secondary h2 { max-width: 13ch; }
.start-secondary-links { border-top: 1px solid rgba(255,255,255,.3); }
.start-secondary-links a { padding: 1.3rem 0; display: grid; grid-template-columns: 140px 1fr 30px; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; }
.start-secondary-links span { color: #ffd5a1; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.start-secondary-links strong { font-family: var(--serif); font-size: 1.08rem; }
.start-secondary-links i { font-style: normal; }

/* Hub pages */
.hub-shell { color: var(--hub-text); background: var(--hub-bg); }
.hub-masthead {
    position: relative;
    min-height: 720px;
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 1fr .34fr;
    gap: 4rem;
    align-items: end;
    overflow: hidden;
    color: var(--hub-text);
    background: var(--hub-bg);
}
.hub-masthead::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    right: -170px;
    top: -180px;
    border: 2px solid var(--hub-accent);
    border-radius: 50%;
    opacity: .25;
    box-shadow: 0 0 0 55px color-mix(in srgb, var(--hub-accent) 8%, transparent), 0 0 0 110px color-mix(in srgb, var(--hub-accent) 5%, transparent);
}
.hub-masthead-number {
    position: absolute;
    left: max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    bottom: 1.25rem;
    color: color-mix(in srgb, var(--hub-heading) 7%, transparent);
    font-family: var(--serif);
    font-size: clamp(15rem, 31vw, 30rem);
    font-style: italic;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: .78;
    pointer-events: none;
}
.hub-masthead-copy { position: relative; z-index: 2; }
.hub-masthead .eyebrow { color: var(--hub-label); }
.hub-masthead h1 {
    max-width: 100%;
    color: var(--hub-heading);
    font-size: clamp(3.75rem, 7.5vw, 7.75rem);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.hub-masthead h2 { max-width: 14ch; margin-top: 1.5rem; color: var(--hub-heading); font-size: clamp(2rem, 4.2vw, 4.5rem); }
.hub-masthead-copy > p:not(.eyebrow) { max-width: 800px; color: var(--hub-muted); font-family: var(--serif); font-size: 1.18rem; }
.hub-jump { display: inline-flex; gap: .5rem; margin-top: 2rem; color: var(--hub-heading); font-weight: 900; text-decoration: none; border-bottom: 1px solid currentColor; }
.hub-edition-note { position: relative; z-index: 2; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--hub-text) 23%, transparent); background: color-mix(in srgb, var(--hub-bg) 78%, transparent); backdrop-filter: blur(8px); }
.hub-edition-note span { display: block; margin-bottom: .7rem; color: var(--hub-label); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hub-edition-note strong { display: block; color: var(--hub-heading); font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; }
.hub-edition-note small { display: block; margin-top: 1.3rem; color: var(--hub-muted); }
.hub-stories { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 9rem) 1.5rem; }
.hub-stories-heading { margin-bottom: 3rem; display: flex; justify-content: space-between; gap: 2rem; align-items: end; color: var(--hub-text); }
.hub-stories-heading h2 { max-width: 16ch; color: var(--hub-heading); }
.hub-stories-heading > span { color: var(--hub-muted); font-family: var(--serif); font-style: italic; }
.hub-lead-story {
    position: relative;
    min-height: 520px;
    padding: clamp(2rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 36px;
    color: #fff;
    background: var(--hub-primary);
    box-shadow: var(--shadow);
}
.hub-lead-story::before { content: ''; position: absolute; inset: 0; opacity: .2; background: repeating-radial-gradient(circle at 100% 0, rgba(255,255,255,.5) 0 1px, transparent 2px 24px); }
.hub-lead-story > * { position: relative; z-index: 2; }
.hub-lead-meta { display: flex; gap: .7rem; flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hub-lead-story h2 { max-width: 16ch; margin-top: 1.2rem; font-size: clamp(3rem, 6vw, 6rem); }
.hub-lead-story h2 a { text-decoration: none; }
.hub-lead-story p { max-width: 780px; color: rgba(255,255,255,.82); font-family: var(--serif); font-size: 1.18rem; }
.hub-lead-link { display: inline-flex; gap: .5rem; width: fit-content; margin-top: 1rem; color: #fff; font-weight: 900; text-decoration: none; border-bottom: 1px solid currentColor; }
.hub-story-grid { margin-top: 4rem; border-color: color-mix(in srgb, var(--hub-primary) 25%, transparent); }
.hub-shell .story-card { border-color: color-mix(in srgb, var(--hub-primary) 25%, transparent); }
.hub-shell .story-card-link { color: var(--hub-text); }
.hub-shell .story-card-link:hover { background: color-mix(in srgb, var(--hub-bg) 70%, #fff); }
.hub-shell .story-card h2 { color: var(--hub-heading); }
.hub-shell .story-card p, .hub-shell .story-card-topline { color: var(--hub-muted); }
.hub-shell .card-meta { color: var(--hub-label); }
.hub-empty-live {
    min-height: 500px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    border: 1px solid color-mix(in srgb, var(--hub-primary) 30%, transparent);
    border-radius: 36px;
    overflow: hidden;
    color: var(--hub-text);
    background: color-mix(in srgb, var(--hub-bg) 82%, #fff);
    box-shadow: var(--shadow);
}
.hub-empty-live-copy {
    padding: clamp(2.25rem, 6vw, 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hub-empty-live-copy .eyebrow { margin: 0 0 1.2rem; color: var(--hub-label); }
.hub-empty-live-copy h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--hub-heading);
    font-size: clamp(2.6rem, 5.4vw, 5.4rem);
}
.hub-empty-live-copy > p:not(.eyebrow) {
    max-width: 700px;
    margin: 1.5rem 0 0;
    color: var(--hub-muted);
    font-family: var(--serif);
    font-size: 1.14rem;
}
.hub-empty-live-copy .text-link {
    width: fit-content;
    margin-top: 2rem;
    color: var(--hub-heading);
}
.hub-topic-list {
    display: grid;
    align-content: stretch;
    border-left: 1px solid color-mix(in srgb, var(--hub-primary) 24%, transparent);
    background: color-mix(in srgb, var(--hub-primary) 6%, transparent);
}
.hub-topic-list > div {
    min-height: 150px;
    padding: 2rem;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--hub-primary) 24%, transparent);
}
.hub-topic-list > div:last-child { border-bottom: 0; }
.hub-topic-list span {
    color: var(--hub-label);
    font-family: var(--serif);
    font-size: 1.8rem;
    font-style: italic;
}
.hub-topic-list strong {
    color: var(--hub-heading);
    font-size: 1.05rem;
    line-height: 1.35;
}
.hub-crossing { padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem)); color: #fff; background: var(--navy); }
.hub-crossing h2 { max-width: 17ch; }
.hub-crossing > p:not(.eyebrow) { max-width: 760px; color: #cbd4e3; font-family: var(--serif); font-size: 1.1rem; }
.hub-crossing .text-link { color: #fff; }

/* About */
.about-hero {
    min-height: 720px;
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 1.15fr .55fr;
    gap: 5rem;
    align-items: center;
    color: #fff;
    background: var(--navy);
}
.about-hero-copy h1 { max-width: 14ch; }
.about-hero-copy > p:not(.eyebrow) { max-width: 760px; color: #cbd4e3; font-family: var(--serif); font-size: 1.18rem; }
.about-identity-board { position: relative; min-height: 480px; padding: 2rem; overflow: hidden; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.055); }
.about-initials { position: absolute; left: -10%; bottom: -10%; color: rgba(255,255,255,.08); font-family: var(--serif); font-size: 18rem; font-style: italic; font-weight: 900; line-height: .7; }
.about-role-list { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .55rem; }
.about-role-list span { padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #e5ebf5; font-size: .76rem; }
.about-identity-board p { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; color: #efc37d; font-family: var(--serif); font-style: italic; text-align: right; }
.about-origin { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 9rem) 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.section-number { color: var(--gold); font-family: var(--serif); font-size: 5rem; font-style: italic; line-height: 1; }
.about-origin-title h2 { max-width: 15ch; }
.about-origin-copy { padding-top: 5rem; color: var(--muted); font-family: var(--serif); font-size: 1.15rem; }
.about-ledger-section { max-width: var(--max); margin: auto; padding: 0 1.5rem clamp(5rem, 9vw, 9rem); }
.about-ledger { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.about-ledger article { min-height: 330px; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-ledger article:nth-child(2n) { border-right: 0; }
.about-ledger span { color: var(--gold); font-family: var(--serif); font-size: 2rem; font-style: italic; }
.about-ledger h3 { margin-top: 3rem; }
.about-ledger p { color: var(--muted); font-family: var(--serif); }
.about-principles { padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem)); display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; color: #fff; background: var(--rust); }
.about-principles-copy h2 { max-width: 14ch; }
.about-principles-list { border-top: 1px solid rgba(255,255,255,.3); }
.about-principles-list div { padding: 1.3rem 0; display: grid; gap: .35rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.about-principles-list strong { font-size: 1.05rem; }
.about-principles-list span { color: #f5d9cf; font-family: var(--serif); }
.about-principles-intro { max-width: 640px; color: #f5d9cf; font-family: var(--serif); font-size: 1.05rem; }
.about-principles-list div { position: relative; padding-left: 4.2rem; }
.about-principles-list .principle-number {
    position: absolute;
    left: 0;
    top: 1.25rem;
    color: #efc37d;
    font-family: var(--serif);
    font-size: 1.65rem;
    font-style: italic;
    font-weight: 800;
    line-height: 1;
}
.about-current { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 9rem) 1.5rem; display: grid; grid-template-columns: 1fr .8fr; gap: 5rem; }
.about-current h2 { max-width: 15ch; }
.about-current > div > p:not(.eyebrow) { max-width: 720px; color: var(--muted); font-family: var(--serif); }
.about-current-links { border-top: 1px solid var(--line); }
.about-current-links a { padding: 1.3rem 0; display: grid; grid-template-columns: 130px 1fr 30px; gap: 1rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.about-current-links span { color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.about-current-links strong { font-family: var(--serif); }
.about-current-links i { font-style: normal; }

/* Article */
.article { background: #fff; }
.article-masthead {
    position: relative;
    min-height: 760px;
    padding: clamp(4rem, 8vw, 8rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
    overflow: hidden;
    color: var(--hub-text);
    background: var(--hub-bg);
}
.article-masthead::before { content: ''; position: absolute; width: 430px; height: 430px; right: -140px; top: -160px; border: 2px solid var(--hub-accent); border-radius: 50%; opacity: .3; }
.article-masthead-main { position: relative; z-index: 2; }
.breadcrumb { margin-bottom: 3rem; display: flex; gap: .6rem; color: var(--hub-muted); font-size: .78rem; }
.breadcrumb a { color: inherit; }
.article-masthead .eyebrow { color: var(--hub-label); }
.article-masthead h1 { max-width: 14ch; color: var(--hub-heading); font-size: clamp(3.2rem, 7vw, 7.6rem); }
.article-subtitle { max-width: 850px; margin: 1.8rem 0 0; color: var(--hub-heading); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem); font-style: italic; }
.article-summary { max-width: 820px; margin: 1.4rem 0 0; color: var(--hub-muted); font-family: var(--serif); font-size: 1.2rem; }
.article-facts { position: relative; z-index: 2; border-top: 1px solid color-mix(in srgb, var(--hub-text) 25%, transparent); }
.article-facts div { padding: 1rem 0; display: grid; gap: .2rem; border-bottom: 1px solid color-mix(in srgb, var(--hub-text) 20%, transparent); }
.article-facts span { color: var(--hub-muted); font-size: .69rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-facts strong { color: var(--hub-heading); font-family: var(--serif); font-size: .98rem; }
.article-hub-stamp { position: absolute; right: 2%; bottom: -20%; color: color-mix(in srgb, var(--hub-heading) 7%, transparent); font-family: var(--serif); font-size: 28rem; font-style: italic; font-weight: 900; line-height: 1; }
.article-layout {
    width: min(100%, var(--wide));
    margin: auto;
    padding: clamp(3.5rem, 7vw, 6.5rem) 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.75rem, 5vw, 4.5rem);
    align-items: start;
}
.article-rail {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--cream-2);
    box-shadow: 0 12px 32px rgba(17,28,53,.055);
}
.article-rail > a,
.article-rail > div {
    min-width: 0;
    min-height: 96px;
    padding: 1.15rem 1.3rem;
    display: grid;
    align-content: center;
    gap: .28rem;
    border-right: 1px solid var(--line);
    text-decoration: none;
}
.article-rail > :last-child { border-right: 0; }
.article-rail span { color: var(--muted); font-size: .67rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-rail strong { font-family: var(--serif); font-size: .98rem; line-height: 1.35; }
.article-body {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    color: #252d3c;
    font-family: var(--serif);
    font-size: clamp(1.08rem, 1.55vw, 1.18rem);
    line-height: 1.76;
}
.article-body > :first-child { margin-top: 0; }
.article-body h2, .article-body h3, .article-body h4 { margin: 2.6em 0 .8em; color: var(--ink); font-family: var(--sans); line-height: 1.08; }
.article-body h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); }
.article-body h3 { font-size: clamp(1.55rem, 2.6vw, 2.35rem); }
.article-body a { color: #265f9b; text-decoration-thickness: 1px; text-underline-offset: .2rem; }
.article-body blockquote { margin: 2.5rem 0; padding: .5rem 0 .5rem 1.6rem; border-left: 5px solid var(--hub-accent, var(--gold)); color: #333d50; font-size: 1.35rem; font-style: italic; }
.article-body pre, .article-body code { font-family: Consolas, Monaco, monospace; }
.article-body pre { overflow-x: auto; padding: 1.25rem; color: #e6edf7; background: #101827; border-radius: 14px; }
.article-body img { border-radius: 18px; box-shadow: var(--shadow); }

/* Reusable editorial blocks for database-managed posts */
.article-body .article-kicker {
    margin: 0 0 .65rem;
    color: var(--hub-primary, var(--blue));
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.article-body .article-lead {
    margin: 0 0 2.4rem;
    color: #202a3b;
    font-family: var(--sans);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 760;
    letter-spacing: -.025em;
    line-height: 1.35;
}
.article-body .editorial-callout,
.article-body .evidence-note {
    margin: 2.8rem 0;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border: 1px solid color-mix(in srgb, var(--hub-primary, var(--blue)) 28%, var(--line));
    border-top: 7px solid var(--hub-primary, var(--blue));
    border-radius: 22px;
    background: color-mix(in srgb, var(--hub-bg, var(--cream)) 72%, #fff);
    box-shadow: 0 18px 45px rgba(17,28,53,.08);
}
.article-body .editorial-callout > :first-child,
.article-body .evidence-note > :first-child { margin-top: 0; }
.article-body .editorial-callout > :last-child,
.article-body .evidence-note > :last-child { margin-bottom: 0; }
.article-body .editorial-callout h3 {
    margin: 0 0 .75rem;
    font-size: clamp(1.65rem, 3vw, 2.6rem);
}
.article-body .editorial-callout.is-blue { --block-accent: #355c8a; border-top-color: var(--block-accent); background: #eef4fb; }
.article-body .editorial-callout.is-gold { --block-accent: #b78a3d; border-top-color: var(--block-accent); background: #fbf5e8; }
.article-body .editorial-callout.is-rust { --block-accent: #9e4d37; border-top-color: var(--block-accent); background: #fbefeb; }
.article-body .editorial-callout.is-green { --block-accent: #48745b; border-top-color: var(--block-accent); background: #eef6f0; }
.article-body .editorial-callout.is-plum { --block-accent: #69527f; border-top-color: var(--block-accent); background: #f5eff8; }
.article-body .pull-quote {
    position: relative;
    margin: clamp(3rem, 7vw, 5.5rem) 0;
    padding: 1.4rem 0 1.4rem clamp(2rem, 6vw, 4rem);
    border: 0;
    color: var(--hub-primary, var(--blue));
    font-family: var(--sans);
    font-size: clamp(1.75rem, 4.5vw, 3.45rem);
    font-style: normal;
    font-weight: 820;
    letter-spacing: -.04em;
    line-height: 1.08;
}
.article-body .pull-quote::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -.25em;
    color: var(--hub-accent, var(--gold));
    font-family: var(--serif);
    font-size: 4.2rem;
    font-style: italic;
    line-height: 1;
}
.article-body .key-points {
    margin: 2.8rem 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.article-body .key-points li {
    position: relative;
    margin: 0;
    padding: 1.25rem 1rem 1.25rem 3rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
}
.article-body .key-points li::before {
    content: '→';
    position: absolute;
    left: .4rem;
    color: var(--hub-accent, var(--gold));
    font-size: 1.35rem;
    font-weight: 900;
}
.article-body .evidence-note {
    border-top-width: 1px;
    border-left: 6px solid var(--hub-accent, var(--gold));
    border-radius: 0 18px 18px 0;
    background: #f6f7f9;
    box-shadow: none;
}
.article-body .section-break {
    width: min(220px, 45%);
    height: 10px;
    margin: clamp(4rem, 9vw, 7rem) auto;
    border: 0;
    background: repeating-linear-gradient(90deg, var(--hub-accent, var(--gold)) 0 32px, transparent 32px 44px);
}
.article-body .full-width {
    width: min(1040px, calc(100vw - 3rem));
    margin-left: 50%;
    transform: translateX(-50%);
}
.article-body .comparison-table {
    margin: 2.8rem 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.article-body .comparison-table thead { color: #fff; background: var(--hub-primary, var(--navy)); }
.article-body .comparison-table tbody tr:nth-child(even) { background: #f7f8fa; }
.article-body table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .92rem; }
.article-body th, .article-body td { padding: .8rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-documentation, .article-related, .comments { padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem)); }
.article-documentation { color: #fff; background: var(--navy); }
.article-documentation > header { max-width: 800px; margin-bottom: 3rem; }
.article-documentation h2 { max-width: 14ch; }
.article-documentation header > p:not(.eyebrow) { color: #cbd4e3; font-family: var(--serif); }
.source-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.source-list li { padding: 1.4rem 0; display: grid; grid-template-columns: 70px 1fr 30px; gap: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.source-number { color: #efc37d; font-family: var(--serif); font-size: 1.7rem; font-style: italic; }
.source-list a { color: #fff; font-size: 1.08rem; font-weight: 850; text-decoration: none; }
.source-list p { margin: .35rem 0; color: #cbd4e3; font-size: .82rem; }
.source-list small { color: #aebbd0; }
.article-related { max-width: var(--max); margin: auto; }
.article-save { max-width: var(--wide); margin: 0 auto 5rem; padding: 1.5rem; display: flex; justify-content: space-between; gap: 2rem; align-items: center; border: 1px solid var(--line); background: var(--cream); }
.article-save div { display: grid; }
.article-save span { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-save strong { font-family: var(--serif); font-size: 1.15rem; }
.comments { color: var(--ink); background: var(--cream); }
.comments-heading { max-width: 790px; margin-bottom: 2.5rem; }
.comments-heading h2 { max-width: 15ch; }
.comments-heading > p:not(.eyebrow) { color: var(--muted); font-family: var(--serif); }
.comment-notice { max-width: 760px; padding: 1.2rem; border-left: 4px solid var(--gold); background: #fff; }
.comment-form { max-width: 760px; }
.comment-form textarea, textarea, input, select { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; outline: none; }
.comment-form textarea:focus, textarea:focus, input:focus, select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17,28,53,.08); }
label { display: grid; gap: .4rem; margin-bottom: 1rem; font-weight: 750; }
.checkbox { display: flex; align-items: flex-start; gap: .6rem; }
.checkbox input { width: auto; margin-top: .4rem; }
.comment-list { max-width: 900px; margin-top: 3rem; }
.comment { padding: 1.5rem 0; border-top: 1px solid #cdd1d8; }
.comment.reply { margin-left: 3rem; }
.comment header { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.comment time { color: var(--muted); font-size: .8rem; }
.comment p { font-family: var(--serif); }
.staff-badge { padding: .18rem .5rem; border-radius: 999px; color: #fff; background: var(--navy); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Existing account, auth, search, and general pages */
.page-hero { padding: clamp(4rem, 8vw, 8rem) 1.5rem; color: #fff; background: var(--navy); }
.reading-width { max-width: var(--reading); margin: auto; }
.page-hero h1 { max-width: 14ch; }
.page-hero p:not(.eyebrow) { color: #cbd4e3; font-family: var(--serif); font-size: 1.15rem; }
.section { max-width: var(--max); margin: auto; padding: clamp(4rem, 8vw, 8rem) 1.5rem; }
.section-heading { max-width: 900px; margin-bottom: 3rem; }
.route-grid, .post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.route-grid > a, .post-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(17,28,53,.07); text-decoration: none; }
.post-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.empty-state { padding: 4rem; border: 1px dashed var(--line); border-radius: 20px; text-align: center; }
.search-page div { display: flex; gap: .5rem; }
.auth-card {
    max-width: 600px;
    margin: 5rem auto;
    padding: clamp(1.6rem, 5vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--shadow);
}
.auth-card h1 { max-width: 100%; font-size: clamp(2.6rem, 7vw, 4.8rem); }
.account-hero { padding-top: 4rem; padding-bottom: 4rem; }
.account-hero h1 { max-width: none; font-size: clamp(2.8rem, 5vw, 5rem); }
.account-grid { max-width: var(--max); margin: auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; }
.panel { padding: 1.6rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(17,28,53,.06); }
.panel.full { grid-column: 1 / -1; }
.account-status dl { margin: 0 0 1.5rem; }
.account-status dl div { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.account-status dt { color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.account-status dd { margin: .25rem 0 0; }
.panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.saved-list { display: grid; gap: .75rem; margin-top: 1.25rem; }
.saved-list a { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.saved-list a:hover { border-color: var(--navy); }
.saved-list span { color: var(--muted); font-size: .85rem; }
.inline-notice { padding: 1rem; border-radius: 10px; }
.error-notice { color: #7f1d1d; background: #fdecec; }

/* Footer */
.site-footer { color: #fff; background: #0c1529; }
.footer-statement { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 9rem) 1.5rem 4rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.footer-statement h2 { max-width: 19ch; }
.footer-actions { margin-top: 2.2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.footer-grid { max-width: var(--max); margin: auto; padding: 4rem 1.5rem; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 3rem; }
.footer-grid h2 { margin-bottom: 1rem; color: #efc37d; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid a { display: block; margin: .45rem 0; color: #dce4f2; text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2rem; }
.footer-identity p { max-width: 260px; color: #aebbd0; font-family: var(--serif); }
.footer-monogram { color: rgba(255,255,255,.12); font-family: var(--serif); font-size: 6rem; font-style: italic; font-weight: 900; line-height: .8; }
.footer-bottom { max-width: var(--max); margin: auto; padding: 1.2rem 1.5rem 2rem; display: flex; justify-content: space-between; gap: 1rem; color: #8592a8; border-top: 1px solid rgba(255,255,255,.1); font-size: .74rem; }

/* Motion
   Content is visible by default. JavaScript marks only safe, reasonably sized
   elements as pending so a failed observer can never hide an entire article. */
[data-reveal] {
    opacity: 1;
    transform: none;
}
.reveal-ready [data-reveal] {
    transition: opacity .65s ease, transform .65s ease;
}
.reveal-ready [data-reveal].reveal-pending {
    opacity: 0;
    transform: translateY(24px);
}
.reveal-ready [data-reveal].reveal-pending.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1080px) {
    .home-hero { grid-template-columns: 1fr; }
    .identity-stage { min-height: 480px; }
    .home-intro-band { grid-template-columns: 90px 1fr; }
    .home-intro-band > p { grid-column: 2; }
    .pathway-card:nth-child(n) { grid-column: span 6; }
    .home-about-band, .about-principles, .about-current { grid-template-columns: 1fr; }
    .hub-masthead, .article-masthead, .about-hero { grid-template-columns: 1fr; }
    .hub-edition-note, .article-facts { max-width: 520px; }
    .article-layout { grid-template-columns: minmax(0, 1fr); }
    .route-list > a { grid-template-columns: 70px 130px 1fr; }
    .route-list p { grid-column: 3; }
    .start-secondary { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .site-ribbon-inner { justify-content: center; text-align: center; }
    .site-ribbon-inner > span { display: none; }
    .site-header { position: relative; }
    .header-core { min-height: 74px; }
    .header-search { display: none; }
    .account-nav { display: none; }
    .menu-toggle {
        min-height: 42px;
        padding: .55rem .8rem;
        display: inline-flex;
        gap: .6rem;
        color: var(--navy);
        background: transparent;
        border: 1px solid var(--line);
        box-shadow: none;
    }
    .menu-toggle:hover { transform: none; box-shadow: none; }
    .menu-toggle-lines { width: 18px; display: grid; gap: 5px; }
    .menu-toggle-lines i { display: block; height: 2px; background: currentColor; transition: transform .2s ease; }
    .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .main-nav-shell { display: none; }
    .main-nav-shell.is-open { display: block; }
    .main-nav { padding: .6rem 1.5rem 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); }
    .main-nav a { border-bottom: 1px solid var(--line); }
    .home-hero { min-height: auto; padding-top: 4rem; }
    .home-hero-copy h1 { font-size: clamp(3.2rem, 12vw, 5.8rem); }
    .home-intro-band { grid-template-columns: 1fr; }
    .home-intro-number { font-size: 5rem; }
    .home-intro-band > p { grid-column: auto; }
    .editorial-heading { align-items: flex-start; flex-direction: column; }
    .pathway-card:nth-child(n) { grid-column: 1 / -1; }
    .home-spotlight { grid-template-columns: 1fr; }
    .story-grid, .story-grid-home, .about-ledger { grid-template-columns: 1fr; }
    .story-card, .story-card:nth-child(2n), .about-ledger article, .about-ledger article:nth-child(2n) { border-right: 0; }
    .story-card--wide { grid-column: auto; }
    .hub-index a { grid-template-columns: 55px 120px 1fr 28px; gap: 1rem; }
    .route-list > a { grid-template-columns: 55px 1fr; gap: 1rem; }
    .route-hub { align-self: center; }
    .route-list h2, .route-list p { grid-column: 2; }
    .route-arrow { top: 1.8rem; transform: none; }
    .start-hero { grid-template-columns: 1fr; align-items: end; }
    .start-hero-note { max-width: 520px; }
    .article-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-rail > a,
    .article-rail > div { border-bottom: 1px solid var(--line); }
    .article-rail > :nth-child(2n) { border-right: 0; }
    .article-rail > :nth-last-child(-n + 2) { border-bottom: 0; }
    .about-origin { grid-template-columns: 1fr; gap: 1rem; }
    .about-origin-copy { padding-top: 0; }
    .source-list li { grid-template-columns: 50px 1fr 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    h1 { font-size: clamp(3rem, 14vw, 5rem); }
    h2 { font-size: clamp(2rem, 10vw, 3.5rem); }
    .brand-description { display: none; }
    .brand-mark { width: 44px; height: 44px; }
    .home-hero { padding-left: 1rem; padding-right: 1rem; }
    .identity-stage { min-height: 420px; border-radius: 28px 28px 100px 28px; box-shadow: 14px 16px 0 var(--gold); }
    .identity-note { max-width: 150px; padding: .8rem; font-size: .7rem; }
    .identity-note-one { left: 5%; }
    .identity-note-two { right: 5%; }
    .identity-note-three { display: none; }
    .identity-stamp { right: 7%; max-width: 165px; font-size: .9rem; }
    .home-intro-band, .home-spotlight, .home-about-band, .start-hero, .start-secondary, .hub-masthead, .hub-crossing, .about-hero, .about-principles, .article-masthead, .article-documentation, .comments { padding-left: 1rem; padding-right: 1rem; }
    .editorial-section, .hub-stories, .article-related, .about-origin, .about-ledger-section, .about-current { padding-left: 1rem; padding-right: 1rem; }
    .pathway-card { min-height: 350px; padding: 1.25rem; }
    .spotlight-story h2, .hub-lead-story h2 { font-size: clamp(2.8rem, 13vw, 4.7rem); }
    .hub-index a { min-height: 125px; grid-template-columns: 45px 1fr 28px; }
    .hub-index-promise { grid-column: 2; }
    .hub-index-arrow { grid-column: 3; grid-row: 1 / 3; }
    .route-list > a { padding: 1.5rem 3.5rem 1.5rem .3rem; }
    .route-number { font-size: 1.7rem; }
    .start-secondary-links a, .about-current-links a { grid-template-columns: 1fr 24px; }
    .start-secondary-links span, .about-current-links span { grid-column: 1; }
    .start-secondary-links strong, .about-current-links strong { grid-column: 1; }
    .start-secondary-links i, .about-current-links i { grid-column: 2; grid-row: 1 / 3; }
    .hub-masthead { min-height: 650px; }
    .hub-masthead h1 { font-size: clamp(2.8rem, 13vw, 4.6rem); }
    .hub-lead-story { min-height: 460px; padding: 1.5rem; border-radius: 24px; }
    .hub-empty-live { grid-template-columns: 1fr; border-radius: 24px; }
    .hub-empty-live-copy { padding: 2rem 1.5rem; }
    .hub-topic-list { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--hub-primary) 24%, transparent); }
    .hub-topic-list > div { min-height: 105px; padding: 1.25rem 1.5rem; }
    .article-masthead { min-height: 680px; }
    .article-masthead h1 { font-size: clamp(3rem, 15vw, 5.3rem); }
    .article-facts { max-width: none; }
    .article-layout { padding-left: 1rem; padding-right: 1rem; }
    .article-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
    .article-rail > a,
    .article-rail > div { min-height: 86px; padding: .9rem .85rem; }
    .source-list li { grid-template-columns: 40px 1fr; }
    .source-list li > span:last-child { display: none; }
    .article-save { margin-left: 1rem; margin-right: 1rem; align-items: flex-start; flex-direction: column; }
    .comment.reply { margin-left: 1rem; }
    .account-grid, .route-grid, .post-grid, .post-grid.small { grid-template-columns: 1fr; }
    .panel.full { grid-column: auto; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
    [data-reveal],
    .reveal-ready [data-reveal],
    .reveal-ready [data-reveal].reveal-pending {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 640px) {
    .about-principles-list div { padding-left: 3.25rem; }
    .about-principles-list .principle-number { font-size: 1.3rem; }
    .article-body .full-width { width: calc(100vw - 2rem); }
}


/* Update 011: live post visibility and launch policy pages */
.hub-admin-visibility-note {
    margin: 0 0 2rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid #d2a24f;
    border-radius: 16px;
    color: #3d2b0e;
    background: #fff6df;
    font-size: .94rem;
}
.hub-admin-visibility-note > strong { display: block; font-size: 1.05rem; }
.hub-admin-visibility-note p { max-width: 780px; margin: .4rem 0 .8rem; }
.hub-admin-visibility-note div { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.hub-admin-visibility-note div span { padding: .3rem .65rem; border-radius: 999px; background: rgba(61,43,14,.08); font-weight: 750; }
.hub-admin-visibility-note a { color: inherit; font-weight: 850; }

.policy-hero .reading-width { width: min(100%, var(--reading)); }
.policy-layout {
    width: min(100%, var(--wide));
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 6rem) 1.5rem;
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.policy-navigation {
    position: sticky;
    top: 150px;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
}
.policy-navigation nav { display: grid; }
.policy-navigation a {
    padding: .65rem .7rem;
    border-top: 1px solid rgba(17,28,53,.09);
    color: #3d4759;
    font-size: .88rem;
    font-weight: 720;
    text-decoration: none;
}
.policy-navigation a:first-child { border-top: 0; }
.policy-navigation a:hover,
.policy-navigation a.active { color: #fff; background: var(--navy); border-radius: 8px; }
.policy-document { min-width: 0; }
.policy-document-meta {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .7rem 1.5rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.policy-content.article-body {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.policy-content h2 { margin-top: 2.15em; }
.policy-content h2:first-child { margin-top: 0; }
.policy-content ul,
.policy-content ol { padding-left: 1.35rem; }
.policy-content li + li { margin-top: .45rem; }
.policy-content .policy-effective {
    margin: 0 0 2rem;
    padding: .85rem 1rem;
    border-left: 4px solid var(--gold);
    color: #485367;
    background: #f5efe2;
    font-family: var(--sans);
    font-size: .9rem;
}
.policy-content .policy-note {
    margin: 2rem 0;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8f9fb;
    font-family: var(--sans);
    font-size: .96rem;
}
.policy-document-contact {
    margin-top: 3.5rem;
    padding: 1.4rem 1.5rem;
    border-radius: 16px;
    color: #fff;
    background: var(--navy);
}
.policy-document-contact p { margin: .25rem 0; }
.policy-document-contact a { color: #f1cb89; font-weight: 850; }

@media (max-width: 900px) {
    .policy-layout { grid-template-columns: 1fr; }
    .policy-navigation { position: static; }
    .policy-navigation nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
    .policy-navigation a { border: 0; }
}
@media (max-width: 560px) {
    .policy-layout { padding-left: 1rem; padding-right: 1rem; }
    .policy-navigation nav { grid-template-columns: 1fr; }
    .policy-document-meta { display: grid; }
}

/* Update 012: guest comments, soft promotion, and cooldown UX */
.comment-identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.comment-identity-note {
    max-width: 760px;
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.7);
}
.optional-label {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}
.comment-form label small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
}
.comment-submit-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.comment-submit-row button:disabled {
    cursor: not-allowed;
    opacity: .5;
}
.comment-cooldown {
    margin: 0;
    color: #7a4d00;
    font-size: .9rem;
}
.comment-form-note {
    max-width: 700px;
    margin-top: 1rem;
    color: var(--muted);
    font-size: .82rem;
}
.comment-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.comment-website-link {
    color: var(--hub-primary, var(--navy));
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}
.comment-website-link:hover,
.comment-website-link:focus-visible { text-decoration: underline; }

@media (max-width: 640px) {
    .comment-identity-grid { grid-template-columns: 1fr; }
}


/* Update 016: dynamic public life timeline */
.timeline-page { background: #f8f4ec; }
.timeline-hero {
    position: relative;
    min-height: 650px;
    padding: clamp(5rem, 9vw, 9rem) max(1.5rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .55fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #101b34 0%, #1c3159 62%, #24496f 100%);
}
.timeline-hero::before {
    content: '';
    position: absolute;
    width: 620px;
    height: 620px;
    right: -210px;
    top: -250px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
}
.timeline-hero-copy,
.timeline-hero-ledger { position: relative; z-index: 2; }
.timeline-hero h1 { max-width: 12ch; }
.timeline-hero-copy > p:not(.eyebrow) { max-width: 780px; color: #d1dbea; font-family: var(--serif); font-size: 1.2rem; }
.timeline-hero-ledger { border-top: 1px solid rgba(255,255,255,.3); }
.timeline-hero-ledger div { padding: 1.1rem 0; display: grid; gap: .2rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.timeline-hero-ledger span { color: #aebed4; font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.timeline-hero-ledger strong { color: #fff; font-family: var(--serif); font-size: 1.12rem; }
.timeline-hero-mark { position: absolute; left: 2%; bottom: -31%; color: rgba(255,255,255,.055); font-family: var(--serif); font-size: clamp(18rem, 42vw, 42rem); font-style: italic; font-weight: 900; line-height: 1; }
.timeline-year-navigation {
    position: sticky;
    top: 139px;
    z-index: 20;
    padding: .75rem max(1rem, calc((100vw - var(--max)) / 2 + 1.5rem));
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: rgba(248,244,236,.94);
    backdrop-filter: blur(12px);
}
.timeline-year-navigation a {
    flex: 0 0 auto;
    padding: .45rem .75rem;
    border: 1px solid #c9d0d9;
    border-radius: 999px;
    color: #25334a;
    background: rgba(255,255,255,.72);
    font-size: .8rem;
    font-weight: 850;
    text-decoration: none;
}
.timeline-year-navigation a:hover,
.timeline-year-navigation a:focus-visible { color: #fff; background: var(--navy); border-color: var(--navy); }
.timeline-main { max-width: var(--max); margin: auto; padding: clamp(5rem, 9vw, 9rem) 1.5rem; }
.timeline-introduction { max-width: 880px; margin-bottom: clamp(4rem, 8vw, 7rem); }
.timeline-introduction h2 { max-width: 15ch; }
.timeline-introduction > p:not(.eyebrow) { color: var(--muted); font-family: var(--serif); font-size: 1.12rem; }
.timeline-group { position: relative; padding-bottom: clamp(4rem, 8vw, 7rem); }
.timeline-year-heading {
    position: relative;
    z-index: 3;
    width: fit-content;
    margin: 0 auto 2.5rem;
    padding: .55rem 1.1rem;
    border: 1px solid #bfc9d7;
    border-radius: 999px;
    color: #fff;
    background: var(--navy);
    font-family: var(--serif);
    font-size: 1.2rem;
    font-style: italic;
    box-shadow: 0 8px 24px rgba(17,28,53,.14);
}
.timeline-year-events { position: relative; display: grid; gap: 2.2rem; }
.timeline-year-events::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -2.6rem;
    bottom: -4rem;
    width: 2px;
    background: linear-gradient(#b9c4d1, #d3c5ad);
    transform: translateX(-50%);
}
.timeline-event {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    align-items: center;
}
.timeline-event-marker {
    position: relative;
    z-index: 4;
    grid-column: 2;
    width: 18px;
    height: 18px;
    margin: auto;
    border: 4px solid #f8f4ec;
    border-radius: 50%;
    background: var(--hub-primary, var(--blue));
    box-shadow: 0 0 0 2px var(--hub-primary, var(--blue)), 0 7px 18px rgba(17,28,53,.16);
}
.timeline-event-card {
    position: relative;
    min-height: 245px;
    padding: clamp(1.5rem, 3.5vw, 2.35rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--hub-primary) 26%, #cbd2dc);
    border-radius: 24px;
    color: var(--hub-text);
    background: color-mix(in srgb, var(--hub-bg) 82%, #fff);
    box-shadow: 0 18px 46px rgba(17,28,53,.08);
}
.timeline-event:nth-child(odd) .timeline-event-card { grid-column: 1; grid-row: 1; text-align: right; }
.timeline-event:nth-child(even) .timeline-event-card { grid-column: 3; grid-row: 1; }
.timeline-event-card::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -75px;
    bottom: -75px;
    border: 2px solid var(--hub-accent);
    border-radius: 50%;
    opacity: .28;
}
.timeline-event:nth-child(odd) .timeline-event-card::after { right: auto; left: -75px; }
.timeline-event.is-major .timeline-event-card { border-top: 8px solid var(--hub-primary); }
.timeline-event-meta { position: relative; z-index: 2; display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.timeline-event:nth-child(odd) .timeline-event-meta { justify-content: flex-end; }
.timeline-event-meta span {
    padding: .28rem .55rem;
    border-radius: 999px;
    color: var(--hub-heading);
    background: color-mix(in srgb, var(--hub-primary) 9%, transparent);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.timeline-event-card h2 { position: relative; z-index: 2; margin-top: 1.15rem; color: var(--hub-heading); font-size: clamp(1.8rem, 3.2vw, 3.1rem); }
.timeline-event-card h2 a { text-decoration: none; }
.timeline-event-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.timeline-event-summary { position: relative; z-index: 2; margin: 1rem 0 0; color: var(--hub-muted); font-family: var(--serif); font-size: 1.02rem; }
.timeline-event-location { position: relative; z-index: 2; margin: 1rem 0 0; color: var(--hub-label); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.timeline-event-link { position: relative; z-index: 2; margin-top: 1.2rem; display: inline-flex; gap: .45rem; color: var(--hub-heading); font-weight: 900; text-decoration: none; border-bottom: 1px solid currentColor; }
.timeline-empty {
    padding: clamp(3rem, 7vw, 6rem);
    border: 1px solid #ccd3dd;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(135deg, #15233e, #2d4565);
}
.timeline-empty h2 { max-width: 13ch; }
.timeline-empty p { max-width: 700px; color: #d2dbe8; font-family: var(--serif); font-size: 1.08rem; }
.timeline-admin-note { margin-bottom: 2rem; padding: 1rem 1.2rem; border: 1px solid #d4a957; border-radius: 14px; color: #4b350e; background: #fff4d9; }
@media(max-width:900px){
    .timeline-hero { grid-template-columns: 1fr; min-height: 600px; }
    .timeline-hero-ledger { max-width: 560px; }
    .timeline-year-navigation { top: 0; }
}
@media(max-width:760px){
    .timeline-main { padding-left: 1rem; padding-right: 1rem; }
    .timeline-year-heading { margin-left: 0; }
    .timeline-year-events::before { left: 14px; transform: none; }
    .timeline-event { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
    .timeline-event-marker { grid-column: 1; margin: 2rem 0 0 5px; }
    .timeline-event:nth-child(odd) .timeline-event-card,
    .timeline-event:nth-child(even) .timeline-event-card { grid-column: 2; grid-row: 1; text-align: left; }
    .timeline-event:nth-child(odd) .timeline-event-meta { justify-content: flex-start; }
    .timeline-event:nth-child(odd) .timeline-event-card::after { left: auto; right: -75px; }
}
@media(max-width:560px){
    .timeline-hero { padding-left: 1rem; padding-right: 1rem; }
    .timeline-event-card { min-height: 0; padding: 1.35rem; border-radius: 18px; }
}