/* GeoDataVision: shared styles for every page. Brand navy/gold, ink and Source Sans 3 follow the Claude Design brand palette used on the reports.
   Square corners, one 1px rule weight, navy ink on survey paper,
   gold kept for the one action per view and for LOW-income tracts (as on GDV's own maps). */

@font-face { font-family: "Big Shoulders"; src: url(fonts/big-shoulders.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --navy: #00266E;
  --navy-deep: #011A4D;
  --ink: #1E2636;
  --ink-soft: #3A4566;
  --paper: #F4F3EE;
  --paper-2: #E9E8E1;
  --white: #FFFFFF;
  --gold: #FAC327;
  --on-navy: #C9D3EA;
  --line: rgba(1, 38, 109, .18);
  --line-strong: rgba(1, 38, 109, .45);
  --line-dark: rgba(255, 255, 255, .18);
  /* tract income classes, from GDV's assessment-area maps */
  --low: #F8D217; --moderate: #F2A383; --middle: #CFE3A1; --upper: #8FC49A;

  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 3vw, 40px);
  --section: clamp(64px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--text); font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.005em; margin: 0 0 .5em; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 92px); }
h2 { font-size: clamp(34px, 4vw, 58px); }
h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--gold); color: var(--navy); padding: 10px 16px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Labels and small type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--gold); outline: 1px solid var(--navy); outline-offset: -1px; }
.on-navy .eyebrow { color: var(--on-navy); }
.lede { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.meta { font-size: 14px; color: var(--ink-soft); }
.placeholder { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(248, 210, 23, .25) 6px 12px); outline: 1px dashed var(--navy); padding: 0 .2em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border: 1px solid var(--navy);
  font: 700 15px/1.2 var(--text); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--navy); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--ink); }
.btn-line { background: transparent; color: var(--navy); }
.btn-line:hover { background: var(--navy); color: var(--white); }
.on-navy .btn-line { color: var(--white); border-color: var(--white); }
.on-navy .btn-line:hover { background: var(--white); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow-link { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.arrow-link::after { content: "→"; transition: transform .15s; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.utility { background: var(--navy-deep); color: var(--on-navy); font-size: 13px; }
.utility .wrap { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; }
.utility a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.utility a:hover { text-decoration: underline; }
.utility ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { flex: none; display: flex; align-items: center; min-height: 48px; }
.brand img { width: 220px; }
#site-nav { margin-left: auto; }
#site-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
#site-nav > ul > li > a, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; background: none; border: 0;
  font: 600 15px/1.2 var(--text); color: var(--ink); text-decoration: none; cursor: pointer; }
#site-nav > ul > li > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
#site-nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); }
.nav-trigger::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-cta { margin-left: 10px; }
.nav-cta a.btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.panel { display: none; }
.nav-trigger[aria-expanded="true"] + .panel { display: block; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); border-bottom: 3px solid var(--navy); box-shadow: 0 24px 40px -24px rgba(11, 22, 56, .35); }
.mega .wrap { display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap: 0; padding-top: 28px; padding-bottom: 32px; }
.mega section { padding: 0 24px; border-left: 1px solid var(--line); }
.mega section:first-child { border-left: 0; padding-left: 0; }
.mega h2 { font-size: 22px; margin-bottom: 12px; }
.mega h2 a { text-decoration: none; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: 6px 0; font-size: 15px; color: var(--ink); text-decoration: none; line-height: 1.35; }
.mega li a:hover { color: var(--navy); text-decoration: underline; }
.mega .feature { background: var(--navy); color: var(--white); padding: 22px; align-self: start; }
.mega .feature h2 { color: var(--white); font-size: 26px; }
.mega .feature p { color: var(--on-navy); font-size: 14px; }
.mega .feature a { color: var(--gold); font-weight: 700; }
.menu-toggle { display: none; }

@media (max-width: 1100px) {
  .utility ul li:not(:first-child) { display: none; }
  .brand img { width: 180px; }
  .menu-toggle { display: inline-flex; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--navy); background: none;
    font: 700 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); cursor: pointer; }
  .menu-toggle::before { content: ""; width: 18px; height: 12px; background: linear-gradient(currentColor 0 0) top/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat; }
  .menu-toggle[aria-expanded="true"] { background: var(--navy); color: var(--white); }
  .js #site-nav { display: none; }
  .js #site-nav.open { display: block; }
  #site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 3px solid var(--navy); max-height: calc(100vh - 76px); overflow-y: auto; margin: 0; }
  #site-nav > ul { flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 24px; gap: 0; }
  #site-nav > ul > li { border-bottom: 1px solid var(--line); }
  #site-nav > ul > li > a, .nav-trigger { width: 100%; justify-content: space-between; min-height: 52px; font-size: 17px; padding: 8px 0; }
  .mega { position: static; box-shadow: none; border: 0; }
  .mega .wrap { grid-template-columns: 1fr; padding: 0 0 16px; }
  .mega section { border: 0; padding: 0 0 12px; }
  .mega li a { padding: 10px 0; min-height: 44px; }
  .mega .feature { margin-top: 8px; }
  .nav-cta { margin: 16px 0 0; border: 0 !important; }
  .nav-cta a.btn { width: 100%; min-height: 52px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section-tight { padding: calc(var(--section) * .6) 0; }
.on-navy { background: var(--navy); color: var(--white); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--white); }
.on-navy p, .on-navy .lede { color: var(--on-navy); }
.on-navy a:not(.btn) { color: var(--white); }
.on-white { background: var(--white); }
.rule-top { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; margin-bottom: 32px; } }

/* Page hero (inner pages) */
.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 16ch; }
.crumbs { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); }

/* ---------- Home ---------- */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--navy-deep); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(1, 26, 77, .96) 0%, rgba(1, 26, 77, .86) 38%, rgba(1, 26, 77, .35) 70%, rgba(1, 26, 77, .15) 100%),
              linear-gradient(0deg, rgba(1, 26, 77, .7), transparent 40%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: end; padding-top: clamp(64px, 9vw, 140px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero h1 { color: var(--white); font-size: clamp(48px, 7vw, 104px); max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede { color: var(--on-navy); }
.hero .eyebrow { color: var(--on-navy); }
.release-card { background: var(--paper); color: var(--ink); padding: 28px; border-top: 6px solid var(--gold); }
.release-card .tag { font: 700 12px/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.release-card h2 { font-size: clamp(30px, 2.6vw, 40px); margin: 10px 0 6px; }
.release-card .sub { font-weight: 600; margin-bottom: 18px; }
.release-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.release-card dl div { padding: 14px 10px 12px 0; }
.release-card dl div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.release-card dt { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.release-card dd { margin: 0; font: 800 clamp(30px, 2.6vw, 38px)/1 var(--display); color: var(--navy); order: -1; }
.release-card dl div { display: flex; flex-direction: column; gap: 6px; }
.release-card .source { font-size: 12px; color: var(--ink-soft); margin: 14px 0 0; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 32px; } .hero::before { background: linear-gradient(0deg, rgba(1, 26, 77, .97) 30%, rgba(1, 26, 77, .7) 70%, rgba(1, 26, 77, .45)); } }

.proof-strip { border-bottom: 1px solid var(--line); background: var(--white); }
.proof-strip ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.proof-strip li { padding: 26px 24px 24px; border-left: 1px solid var(--line); }
.proof-strip li:first-child { border-left: 0; padding-left: 0; }
.proof-strip strong { display: block; font: 800 clamp(36px, 3.4vw, 52px)/1 var(--display); color: var(--navy); }
.proof-strip span { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 800px) { .proof-strip ul { grid-template-columns: 1fr 1fr; } .proof-strip li { padding: 20px 12px 18px 0; border-left: 0; border-top: 1px solid var(--line); } .proof-strip li:nth-child(-n+2) { border-top: 0; } .proof-strip li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); } }

.practices { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.practice { padding: 32px 32px 36px 0; display: flex; flex-direction: column; }
.practice + .practice { border-left: 1px solid var(--line); padding-left: 32px; }
.practice .num { font: 700 13px/1 var(--text); letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 28px; }
.practice h3 { font-size: clamp(30px, 2.6vw, 40px); }
.practice p { color: var(--ink-soft); }
.practice ul { list-style: none; margin: 8px 0 24px; padding: 0; border-top: 1px solid var(--line); }
.practice li { border-bottom: 1px solid var(--line); }
.practice li a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.practice li a::after { content: "→"; color: var(--navy); opacity: .5; }
.practice li a:hover { color: var(--navy); }
.practice li a:hover::after { opacity: 1; }
.practice .arrow-link { margin-top: auto; }
@media (max-width: 900px) { .practices { grid-template-columns: 1fr; } .practice, .practice + .practice { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }

.map-figure { margin: 0; position: relative; background: var(--white); border: 1px solid var(--line); }
.map-figure img { width: 100%; }
.map-figure figcaption { font-size: 13px; color: var(--ink-soft); padding: 12px 16px; border-top: 1px solid var(--line); background: var(--white); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 20px 0 0; padding: 0; font-size: 14px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; outline: 1px solid rgba(11, 22, 56, .35); outline-offset: -1px; }

.experts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-dark); }
.expert { padding: 36px 40px 8px 0; }
.expert + .expert { border-left: 1px solid var(--line-dark); padding-left: 40px; }
.expert .name { font: 800 clamp(48px, 6vw, 88px)/.9 var(--display); color: var(--white); margin: 0 0 6px; text-transform: uppercase; }
.expert .role { font: 700 13px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.expert-portrait { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.expert-portrait img { width: 88px; height: 88px; object-fit: cover; object-position: top; filter: grayscale(.15); }
.expert-portrait .initials { width: 88px; height: 88px; display: grid; place-items: center; border: 1px dashed var(--on-navy); font: 800 34px/1 var(--display); color: var(--on-navy); }
@media (max-width: 800px) { .experts { grid-template-columns: 1fr; } .expert, .expert + .expert { padding: 28px 0; border-left: 0; } .expert + .expert { border-top: 1px solid var(--line-dark); } }

.quotes { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.quotes figure { margin: 0; padding: 32px 32px 8px 0; }
.quotes figure + figure { border-left: 1px solid var(--line); padding-left: 32px; }
.quotes blockquote { margin: 0 0 20px; font-size: 18px; line-height: 1.55; }
.quotes figure:first-child blockquote { font: 400 clamp(20px, 1.8vw, 26px)/1.45 var(--text); color: var(--navy); }
.quotes blockquote::before { content: "“"; display: block; font: 800 64px/.6 var(--display); color: var(--gold); -webkit-text-stroke: 1px var(--navy); margin-bottom: 8px; }
.quotes figcaption { font-size: 14px; color: var(--ink-soft); }
.quotes figcaption strong { color: var(--ink); display: block; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } .quotes figure, .quotes figure + figure { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); } }

.cta-band { background: var(--gold); color: var(--navy); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.cta-band h2 { margin: 0; }
.cta-band .phone { display: block; font: 800 clamp(40px, 4.4vw, 64px)/1 var(--display); color: var(--navy); text-decoration: none; margin-bottom: 16px; padding: 4px 0; }
.cta-band .phone:hover { text-decoration: underline; }
@media (max-width: 800px) { .cta-band .wrap { grid-template-columns: 1fr; } }

.photo-band { position: relative; min-height: 420px; display: grid; align-items: end; isolation: isolate; color: var(--white); }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(1, 26, 77, .92), rgba(1, 26, 77, .2) 70%); }

/* ---------- Cards: news + reports ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
@media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; gap: 32px; } }
.card { display: flex; flex-direction: column; position: relative; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.card .thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); margin-bottom: 18px; border: 1px solid var(--line); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .thumb img { transform: scale(1.03); }
.card h3 { font-size: clamp(24px, 1.9vw, 28px); line-height: 1.02; margin-bottom: 10px; }
.card h3 a { text-decoration: none; color: var(--navy); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.card .meta { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.tag { display: inline-block; font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px 5px; border: 1px solid var(--navy); color: var(--navy); }
.tag-gold { background: var(--gold); border-color: var(--gold); }
.tag-navy { background: var(--navy); color: var(--white); }

.featured-post { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; position: relative; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line-strong); }
.featured-post .thumb { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); }
.featured-post .thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-post h2 { font-size: clamp(34px, 3.6vw, 52px); }
.featured-post h2 a { color: var(--navy); text-decoration: none; }
.featured-post h2 a::after { content: ""; position: absolute; inset: 0; }
.featured-post h2 a:hover { text-decoration: underline; }
@media (max-width: 800px) { .featured-post { grid-template-columns: 1fr; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; }
.filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.filters a:hover { border-color: var(--navy); color: var(--navy); }
.filters a[aria-current] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pager { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); text-decoration: none; font-weight: 600; }
.pager [aria-current] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pager .next { margin-left: auto; }

/* ---------- Article ---------- */
.article-hero { padding: clamp(40px, 6vw, 80px) 0 40px; }
.article-hero h1 { font-size: clamp(40px, 5vw, 72px); max-width: 20ch; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; }
.byline img { width: 52px; height: 52px; object-fit: cover; object-position: top; }
.byline strong { display: block; }
.byline span { color: var(--ink-soft); font-size: 14px; }
.article-cover { margin: 0 0 clamp(40px, 5vw, 64px); }
.article-cover img { width: 100%; border: 1px solid var(--line); }
.article-cover figcaption, .prose figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr; } }
.prose { max-width: 70ch; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: clamp(30px, 3vw, 42px); margin: 1.6em 0 .5em; }
.prose h3 { margin: 1.6em 0 .5em; }
.prose figure { margin: 2em 0; }
.prose figure img { border: 1px solid var(--line); background: var(--white); }
.prose .pull { font: 400 clamp(22px, 2vw, 28px)/1.4 var(--text); color: var(--navy); border-left: 4px solid var(--gold); padding: 4px 0 4px 24px; margin: 1.6em 0; }
.prose ol.reports { list-style: none; counter-reset: r; padding: 0; margin: 1.5em 0; border-top: 1px solid var(--line); }
.prose ol.reports li { counter-increment: r; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.prose ol.reports li::before { content: counter(r, decimal-leading-zero); font: 800 40px/1 var(--display); color: var(--navy); }
.notice { border: 1px solid var(--navy); border-left: 6px solid var(--gold); background: var(--white); padding: 18px 22px; font-size: 16px; margin: 1.5em 0; }
.notice strong { color: var(--navy); }
.aside-stack { position: sticky; top: 100px; display: grid; gap: 24px; }
.aside-card { background: var(--white); border: 1px solid var(--line); padding: 24px; }
.aside-card h2 { font-size: 26px; }
.aside-card.on-navy { border: 0; }
.aside-card .price { font: 800 44px/1 var(--display); color: var(--navy); }
.aside-card .price s { font-size: 24px; color: var(--ink-soft); font-weight: 600; margin-left: 6px; }
.aside-card img { margin-bottom: 18px; border: 1px solid var(--line); }
.aside-card .btn { width: 100%; }
.podcast { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; background: var(--white); border: 1px solid var(--line); padding: 28px; margin-top: 64px; }
.podcast img { width: 100%; }
.podcast h2 { font-size: clamp(26px, 2.4vw, 34px); }
.podcast .platforms { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; list-style: none; padding: 0; margin: 16px 0 0; }
.podcast .platforms a { display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 700px) { .podcast { grid-template-columns: 1fr; } .podcast img { max-width: 240px; } }
.contact-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.contact-list span { display: block; font-size: 13px; color: var(--ink-soft); }
.contact-list a { display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Store ---------- */
.product-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; background: var(--white); border: 1px solid var(--line); padding: clamp(24px, 4vw, 48px); }
@media (max-width: 900px) { .product-feature { grid-template-columns: 1fr; } }
.cover-slot { position: relative; background: var(--paper-2); border: 1px solid var(--line); }
.cover-slot img { width: 100%; }
.price-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 24px; }
.price-line .now { font: 800 clamp(40px, 4vw, 56px)/1 var(--display); color: var(--navy); }
.price-line .unit { color: var(--ink-soft); }
.included { list-style: none; padding: 0; margin: 0 0 28px; border-top: 1px solid var(--line); counter-reset: r; }
.included li { counter-increment: r; display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.included li::before { content: counter(r, decimal-leading-zero); font: 800 26px/1 var(--display); color: var(--navy); }
.report-card .thumb { aspect-ratio: 4 / 3; }
.report-card .thumb img { object-position: top; }
.price-tag { font: 800 26px/1 var(--display); color: var(--navy); }

.buy-box { background: var(--white); border: 1px solid var(--navy); padding: 28px; }
.buy-box label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.buy-box select { width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--paper); font: 400 17px var(--text); color: var(--ink); margin-bottom: 18px; }
.buy-box .btn { width: 100%; }
.buy-box .fine { font-size: 13px; color: var(--ink-soft); margin: 14px 0 0; }
.form-note { margin: 12px 0 0; padding: 12px 14px; background: var(--paper); border-left: 4px solid var(--gold); font-size: 14px; }
.gallery-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 700px) { .gallery-strip { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 18px; color: var(--navy); list-style: none; padding: 12px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 28px/1 var(--text); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); max-width: 70ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy); padding: 72px 0 28px; font-size: 15px; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
.footer-grid h2 { font: 700 12px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); margin: 0 0 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-brand img { width: 220px; margin-bottom: 20px; }
.footer-brand address { font-style: normal; line-height: 1.7; }
.newsletter p { margin-bottom: 14px; }
.newsletter form { display: flex; flex-wrap: wrap; border: 1px solid var(--line-dark); }
.newsletter form .form-note { flex-basis: 100%; margin: 0; }
.newsletter input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; border: 0; background: rgba(255, 255, 255, .06); color: var(--white); font: 400 16px var(--text); border-radius: 0; }
.newsletter input::placeholder { color: var(--on-navy); }
.newsletter button { min-height: 52px; }
.newsletter .form-note { background: rgba(255, 255, 255, .08); color: var(--white); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 13px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand, .newsletter { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* The nav CTA keeps its button fill over the plain nav-link rule above. */
#site-nav > ul > li.nav-cta > a.btn { background: var(--navy); color: var(--white); box-shadow: none; padding: 10px 18px; }
#site-nav > ul > li.nav-cta > a.btn:hover { background: var(--ink); }
.on-navy .placeholder { background: none; outline-color: var(--gold); color: var(--white); }