/*
 * HUAX editorial pages: Press, the Journal, Journal articles, About, Contact and the legal pages. Loaded after site.css.
 *
 * Press is external coverage: publication-led rows and an archive table (outline marker).
 * The Journal is HUAX's own analysis: articles, data points and evidence notes (teal marker).
 * Markers follow the evidence states used on the homepage:
 *   navy square = observed · gold = missing or uncertain · teal = interpretation · teal outline = reasoning
 */

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
figure, blockquote { margin: 0; }

/* ------------------------------------------------------------- page head */

.page-head { padding: clamp(44px, 6vw, 96px) 0 clamp(36px, 4.5vw, 64px); }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--teal); }
.page-press .eyebrow::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.page-contact .eyebrow::before { background: var(--navy); }
.page-title { max-width: 13em; margin-top: 18px; font-size: clamp(40px, 5vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.page-intro { max-width: 32em; margin-top: 20px; color: var(--ink-2); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; }
.page-cited { max-width: 44em; margin-top: 14px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.page-links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; color: var(--ink-3); font-size: 14.5px; }
.page-links a { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.page-links a:hover { color: var(--ink); text-decoration-color: var(--teal); }

/* -------------------------------------------------------------- sections */

.sec { padding-bottom: clamp(48px, 6vw, 88px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.sec-head h2 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.015em; }
.sec-head p { color: var(--ink-3); font-size: 14px; }
.sec-band { background: var(--paper-2); border-top: 1px solid var(--line); }
.sec-band .sec { padding-top: clamp(48px, 6vw, 80px); }

/* Two columns shared by the lead items: meta on the left, content on the right. */
.split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px clamp(32px, 4vw, 64px); }
.meta-col { display: flex; flex-direction: column; gap: 4px; color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.meta-col .cat { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.meta-col .cat::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }

/* =========================================================== Journal index */

.lead-story { padding-top: 28px; }
.lead-story h3 { max-width: 17em; font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.lead-story h3 a, .story h3 a, .index-list a { color: inherit; text-decoration: none; }
.lead-story h3 a:hover, .story h3 a:hover, .index-list a:hover .t { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lead-story .dek { max-width: 36em; margin-top: 16px; color: var(--ink-2); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.lead-story .datapoints { max-width: 46em; margin-top: 28px; }
.lead-story .text-link { margin-top: 24px; }

.story-list > li { padding: 28px 0; border-bottom: 1px solid var(--line); }
.story-list > li:last-child { border-bottom: 0; }
.story h3 { max-width: 30em; font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.story .dek { max-width: 42em; margin-top: 10px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.story .by { margin-top: 12px; color: var(--ink-3); font-size: 14px; }

.index-list { margin-top: 8px; }
.index-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 0.8fr); gap: 4px clamp(32px, 4vw, 64px); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.index-list li:last-child a { border-bottom: 0; }
.index-list time { color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.index-list .t { font-size: 17.5px; font-weight: 600; line-height: 1.35; }
.index-list .c { color: var(--ink-3); font-size: 14px; text-align: right; }

.ed-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 22px 0; border-top: 1px solid var(--line-strong); color: var(--ink-2); font-size: 15px; }
.ed-end a:not(.text-link) { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }

/* Block data points: a value with its label, in a ruled row. Values are HUAX observations. */
.datapoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.datapoints > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 16px 18px 16px 0; }
.datapoints > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.datapoints dd { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.datapoints dt { color: var(--ink-3); font-size: 13.5px; line-height: 1.35; }

/* ================================================================= Press */

/* Featured coverage: publication first, then the headline, the context and the HUAX contribution. */
.feat-lead { padding-top: 28px; }
.pub { color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.contrib { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-2); font-weight: 600; }
.contrib::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.feat h3 { max-width: 22em; font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
.feat h3 a { color: inherit; text-decoration: none; }
.feat h3 a:hover { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ext::after { content: "↗"; display: inline-block; margin-left: 0.25em; color: var(--ink-3); font-weight: 400; text-decoration: none; }
.feat .context { max-width: 38em; margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.quote { max-width: 36em; margin: 18px 0 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--line-strong); }
.quote p { color: var(--ink); font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.45; }
.quote footer { margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.feat .text-link { margin-top: 18px; font-size: 14.5px; }

.feat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--line); }
.feat-pair > article { padding: 26px 0 0; }
.feat-pair > article + article { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
.feat-pair > article:first-child { padding-right: clamp(24px, 3vw, 48px); }
.feat-pair .pub { font-size: 17px; }
.feat-pair .meta-line { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; color: var(--ink-3); font-size: 14px; }
.feat-pair .contrib { margin-top: 0; }
.feat-pair h3 { margin-top: 14px; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.2; letter-spacing: -0.02em; }
.feat-pair .context { font-size: 16px; }

/* Archive: one row per item, grouped by year. */
.filters { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; border-bottom: 1px solid var(--line); }
.filters button { padding: 10px 0; border: 0; background: none; color: var(--ink-3); font-size: 14.5px; cursor: pointer; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--teal); }
.filters .n { margin-left: 5px; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }

.archive { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.archive thead th { padding: 14px 16px 10px 0; border-bottom: 1px solid var(--line-strong); color: var(--ink-3); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.archive .yr th { padding: 30px 0 10px; border-bottom: 1px solid var(--line-strong); color: var(--ink); font-size: 17px; font-weight: 700; text-align: left; font-variant-numeric: tabular-nums; }
.archive td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.archive .d { width: 7.5em; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.archive .p { width: 13em; }
.archive .p b { display: block; font-weight: 700; }
.archive .p small { color: var(--ink-3); font-size: 13px; }
.archive .h { font-size: 16px; }
.archive .h a { text-decoration: none; }
.archive .h a:hover { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.archive .h .note { display: block; max-width: 46em; margin-top: 5px; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.archive .t { width: 8.5em; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.archive .s { width: 11em; padding-right: 0; color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.archive-note { margin-top: 18px; color: var(--ink-3); font-size: 14px; }
.archive-note p:first-child { color: var(--ink-2); }
.archive-note p + p { margin-top: 6px; }

/* Media inquiries */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px clamp(40px, 6vw, 96px); padding-top: 28px; }
.desk h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.desk .copy p { max-width: 30em; margin-top: 14px; color: var(--ink-2); }
.desk-facts > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.desk-facts > div:first-child { border-top: 1px solid var(--line-strong); }
.desk-facts dt { color: var(--ink-3); font-size: 14.5px; }
.desk-facts dd { font-weight: 600; }
.desk-facts dd span { display: block; color: var(--ink-3); font-size: 14px; font-weight: 400; }
.desk-facts a { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.desk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }

/* =============================================================== articles */

.art-head { padding: clamp(36px, 5vw, 80px) 0 clamp(30px, 3.5vw, 52px); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-3); font-size: 14.5px; }
.kicker a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.kicker a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.kicker .cat { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.kicker .cat::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
.art-title { max-width: 19em; margin-top: 18px; font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
.art-dek { max-width: 34em; margin-top: 22px; color: var(--ink-2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }

.art-layout { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 32px clamp(40px, 5vw, 96px); padding: clamp(28px, 3.5vw, 48px) 0 clamp(56px, 7vw, 104px); border-top: 1px solid var(--line-strong); }
.byline { margin-top: 24px; color: var(--ink-3); font-size: 15px; line-height: 1.6; }
.byline b { color: var(--ink); font-weight: 600; }
.byline .sep { margin: 0 8px; }
.byline a { color: var(--ink-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.art-rail { align-self: start; font-size: 14px; line-height: 1.45; }
.rail-toc p { color: var(--ink-3); font-size: 13px; }
.rail-toc ol { margin-top: 6px; border-left: 1px solid var(--line-strong); }
.rail-toc a { display: block; padding: 5px 0 5px 12px; color: var(--ink-2); text-decoration: none; }
.rail-toc a:hover { color: var(--ink); box-shadow: inset 2px 0 0 var(--teal); }

/* Reading column */
.prose { min-width: 0; font-size: 18.5px; line-height: 1.7; }
.prose > * + * { margin-top: 1.05em; }
.prose .lede { font-size: clamp(20px, 1.6vw, 22.5px); font-weight: 500; line-height: 1.55; }
.prose h2 { margin-top: 2.3em; font-size: clamp(23px, 2vw, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.prose h3 { margin-top: 1.9em; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose a { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.prose a:hover { color: var(--teal-ink); }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ol { padding-left: 1.4em; list-style: decimal; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--ink-3); }
.prose .mono { font-size: 0.86em; }
.prose > .datapoints, .prose > .module, .prose > .pull, .prose > .fig, .prose > .table-wrap, .prose > .vrec { margin-top: 2.1em; margin-bottom: 2.1em; }
.prose > .datapoints dd { font-size: clamp(24px, 2.2vw, 30px); }

.pull { padding: 4px 0 4px 22px; border-left: 3px solid var(--teal); font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; line-height: 1.34; letter-spacing: -0.015em; }
.pull em { font-style: normal; font-weight: 500; color: var(--ink-2); }

/* Evidence notes. The label names what kind of statement the note holds. */
.module { padding: 18px 22px 20px; border-left: 3px solid var(--navy); background: var(--paper-2); font-size: 16.5px; line-height: 1.6; }
.module > * + * { margin-top: 0.65em; }
.m-label { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.m-label::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--navy); }
.module ul { padding-left: 1.1em; list-style: disc; }
.module li + li { margin-top: 0.3em; }
.m-method { border-left-color: var(--teal-deep); }
.m-method .m-label::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--teal-deep); }
.m-data { border-left-color: var(--line-strong); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.m-data .m-label::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy); }
.m-limit { border-left-color: var(--gold); }
.m-limit .m-label::before { background: var(--gold); }
.m-market { border-left-color: var(--teal); }
.m-market .m-label::before { background: var(--teal); }

/* Figures, maps and charts */
.fig-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.fig-frame > img, .fig-frame > svg, .fig-frame > canvas { display: block; width: 100%; height: auto; }
.fig-empty { display: grid; place-items: center; min-height: 240px; padding: 24px; background: var(--paper-2); color: var(--ink-3); font-size: 14px; text-align: center; }
.fig figcaption { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.fig-num { display: block; color: var(--ink-3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fig-title { display: block; margin-top: 2px; color: var(--ink); font-size: 16.5px; font-weight: 700; }
.fig-source { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13.5px; }

/* Tables */
.table-wrap { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.data th { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line-strong); color: var(--ink-3); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
.data td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data .num { text-align: right; }

/* Evidence states, as in the homepage vessel record */
.st { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--navy); }
.st.m { color: var(--gold-ink); }
.st.m::before { background: var(--gold); }
.st.i { color: var(--teal-ink); }
.st.i::before { background: var(--teal); }
.st.r { color: var(--teal-ink); }
.st.r::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--teal-deep); }

/* Vessel record insert: the working window of the homepage, compact */
.vrec { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 14.5px; line-height: 1.45; }
.vrec-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 16px; background: var(--navy); color: #9FB6C7; font-size: 13px; }
.vrec-bar b { color: #FFFFFF; font-size: 13.5px; }
.vrec-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 4px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.vrec-facts > div { padding: 10px 12px 10px 0; }
.vrec-facts dt { color: var(--ink-3); font-size: 12.5px; }
.vrec-facts dd { font-weight: 600; }
.vrec .table-wrap { padding: 4px 16px 8px; }
.vrec .data { font-size: 14px; }
.vrec-foot { padding: 10px 16px; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink-3); font-size: 13px; }

/* Sources, methodology and limitations close the article. */
.notes { margin-top: 3em; padding-top: 18px; border-top: 1px solid var(--line-strong); font-size: 15.5px; line-height: 1.6; }
.notes h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.notes h3 { margin-top: 1.4em; font-size: 15.5px; font-weight: 700; }
.notes ol { margin-top: 10px; padding-left: 1.4em; list-style: decimal; color: var(--ink-2); }
.notes li + li { margin-top: 0.5em; }
.notes li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.notes p { margin-top: 8px; color: var(--ink-2); }
.notes a { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }

.pubinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 28px; margin-top: 2.6em; font-size: 14.5px; line-height: 1.5; }
.pubinfo > div { padding: 14px 0; border-top: 1px solid var(--line); }
.pubinfo dt { color: var(--ink-3); font-size: 13px; }
.pubinfo dd { margin-top: 3px; color: var(--ink-2); }
.pubinfo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }

/* More from the Journal */
.more-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); margin-top: 8px; }
.more-list a { display: block; padding: 20px 0; text-decoration: none; }
.more-list .dir { display: block; color: var(--ink-3); font-size: 13.5px; }
.more-list .t { display: block; margin-top: 6px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.more-list .m { display: block; margin-top: 6px; color: var(--ink-3); font-size: 14px; }
.more-list a:hover .t { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }

/* ================================================================== about */

.page-about .eyebrow::before { background: var(--navy); }

/* The people behind HUAX: portrait, name, role and a short note. The portraits are cut-outs on white;
   multiply sets them on the paper tone. Each image sets its own crop: --s scales, --x shifts sideways, --oy moves the scaling origin (the eye line). */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 96px); padding-top: 28px; }
.portrait { overflow: hidden; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 10px; background: var(--paper-2); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; mix-blend-mode: multiply; transform: translateX(var(--x, 0%)) scale(var(--s, 1)); transform-origin: 50% var(--oy, 16%); }
.person h3 { margin-top: 22px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; }
.person .role { margin-top: 6px; color: var(--ink-3); font-size: 14.5px; font-weight: 600; }
.person .bio { max-width: 30em; margin-top: 14px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.company { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }

.about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(40px, 6vw, 96px); padding-top: 28px; }
.about-cols .lead { max-width: 26em; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; }
.about-cols .side-h + .lead, .about-cols .side-h + .incl { margin-top: 12px; }
.about-cols .lead + p, .about-cols p + p { max-width: 36em; margin-top: 14px; color: var(--ink-2); }
.about-cols .pull { margin-top: 32px; }

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 96px); margin-top: 8px; }
.principles li { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.principles .n { display: block; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.principles h3 { margin-top: 8px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; }
.principles p { max-width: 34em; margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

.about-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.about-cta h2 { max-width: 18em; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* ================================================================ contact */

.page-sub { max-width: 22em; margin-top: 10px; color: var(--ink-2); font-size: clamp(21px, 2.1vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); padding-top: 28px; }
.req-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.req-types button { padding: 18px 20px 20px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; transition: box-shadow 0.2s; }
.req-types button:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.req-types b { display: block; font-size: 17px; }
.req-types span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.req-types button:hover b { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.req-types button[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--teal); }
.req-detail { margin-top: 24px; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 30px 60px -40px rgba(14, 42, 71, 0.4); }
.req-detail .k { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.req-detail .k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
.req-detail h3 { margin-top: 8px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.req-detail p { max-width: 36em; margin-top: 10px; color: var(--ink-2); }
.req-detail .subj { margin-top: 14px; color: var(--ink-3); font-size: 14px; }
.req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.side-h { font-size: 17px; font-weight: 700; }
.side-h + .desk-facts, .side-h + .incl { margin-top: 12px; }
* + .side-h { margin-top: 32px; }
.incl { border-top: 1px solid var(--line-strong); }
.incl li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.5; background: linear-gradient(var(--teal), var(--teal)) 0 1.15em / 12px 1.5px no-repeat; }

.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.places > div { padding: 22px 24px 0 0; }
.places > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.places h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.places .role { margin-top: 6px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.places p:not(.role) { max-width: 26em; margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }

/* ============================================================ legal pages */

.legal-hero { padding: clamp(44px, 6vw, 96px) 0 clamp(32px, 4vw, 56px); }
.legal-crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-3); font-size: 14.5px; }
.legal-crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.legal-crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.legal-kicker { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.legal-kicker::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--navy); }
.legal-hero h1 { max-width: 14em; margin-top: 14px; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.legal-intro { max-width: 36em; margin-top: 18px; color: var(--ink-2); font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.5; }
.legal-updated { display: block; margin-top: 16px; color: var(--ink-3); font-size: 14px; }

.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 32px clamp(40px, 5vw, 96px); padding: clamp(28px, 3.5vw, 48px) 0 clamp(56px, 7vw, 104px); border-top: 1px solid var(--line-strong); }
.legal-toc { align-self: start; font-size: 14px; line-height: 1.45; }
.legal-toc strong { display: block; margin-bottom: 6px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.legal-toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); box-shadow: inset 2px 0 0 var(--teal); }
.legal-copy { min-width: 0; }
.legal-section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.legal-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.legal-section h2 { margin-bottom: 14px; font-size: clamp(21px, 1.8vw, 25px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.legal-section h3 { margin: 22px 0 8px; font-size: 16.5px; font-weight: 700; }
.legal-section p, .legal-section li, .legal-table { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.legal-section p + p { margin-top: 12px; }
.legal-section ul { margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.legal-section li + li { margin-top: 6px; }
.legal-section li::marker { color: var(--ink-3); }
.legal-copy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.legal-copy a:hover { color: var(--teal-ink); }
.legal-card { padding: 18px 22px; border-left: 3px solid var(--navy); background: var(--paper-2); color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.legal-card strong { color: var(--ink); }
.legal-card h3 { margin-top: 0; }
.legal-card + p, p + .legal-card { margin-top: 14px; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table tr:first-child th, .legal-table tr:first-child td { border-top: 1px solid var(--line-strong); }
.legal-table th { width: 34%; color: var(--ink); font-size: 15px; font-weight: 600; }
.legal-status { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-ink); font-size: 15px; font-weight: 700; }
.legal-status::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--teal); }
.legal-note { margin-top: 18px; padding: 14px 18px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------- wide */

@media (min-width: 1360px) {
  /* Wide figures take the free space right of the reading column. */
  .prose > .fig-wide { width: calc(100% + 280px); }
}
@media (min-width: 960px) {
  .art-rail, .legal-toc { position: sticky; top: calc(var(--nav-h) + 28px); }
}
@media (min-width: 960px) and (max-width: 1179px) {
  /* The linked headline carries the source; its column gives way to the headline. */
  .archive thead th:nth-child(5), .archive td.s, .archive-note .legend { display: none; }
}

/* -------------------------------------------------------------- narrow */

@media (max-width: 959px) {
  .split-row { grid-template-columns: minmax(0, 1fr); }
  .meta-col { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
  .feat-pair { grid-template-columns: minmax(0, 1fr); }
  .feat-pair > article + article { margin-top: 26px; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .feat-pair > article:first-child { padding-right: 0; }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  .art-rail { display: none; }
  .more-list { grid-template-columns: minmax(0, 1fr); }
  .more-list li + li a { border-top: 1px solid var(--line); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .places { grid-template-columns: minmax(0, 1fr); }
  .places > div + div { margin-top: 22px; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .about-cols, .principles { grid-template-columns: minmax(0, 1fr); }

  /* The archive table becomes a list of stacked rows. */
  .archive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .archive, .archive tbody, .archive tr, .archive td, .archive th { display: block; width: auto; }
  .archive tbody[hidden] { display: none; }
  .archive tr[data-type] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .archive tr[data-type][hidden] { display: none; }
  .archive td { padding: 0; border: 0; }
  .archive .d, .archive .p, .archive .t, .archive .s { width: auto; }
  .archive .d { grid-area: 1 / 1; }
  .archive .t { grid-area: 1 / 2; text-align: right; }
  .archive .p, .archive .h, .archive .s { grid-column: 1 / -1; }
  .archive .p b { display: inline; }
  .archive .p small::before { content: " · "; }
  .archive .s:empty, .archive .s.none, .archive-note .legend { display: none; }
}

@media (max-width: 720px) {
  .index-list a { grid-template-columns: minmax(0, 1fr); }
  .index-list .c { text-align: left; }
  .desk-facts > div { grid-template-columns: minmax(0, 1fr); }
  .req-types { grid-template-columns: minmax(0, 1fr); }
  .req-types button:nth-child(even) { padding-left: 0; border-left: 0; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .people { grid-template-columns: minmax(0, 1fr); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table th { padding-bottom: 2px; border-bottom: 0; }
  .legal-table td { padding-top: 0; }
  .legal-table tr:first-child td { border-top: 0; }
  .prose { font-size: 17.5px; }
  /* Data points as a list: value on the left, label on the right. */
  .datapoints { grid-template-columns: minmax(0, 1fr); }
  .datapoints > div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; }
  .datapoints > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .datapoints dd, .prose > .datapoints dd { font-size: 22px; }
  .datapoints dt { text-align: right; }

}