/* Public project and method pages: readable, bounded editorial sections. */
body { margin: 0; background: var(--color-bg-canvas); color: var(--color-ink-primary); font-family: var(--font-sans); }
.public-page { color: var(--color-ink-primary); background: var(--color-bg-canvas); font: 400 16px/1.7 var(--font-sans); }
.public-page * { box-sizing: border-box; }
.public-wrap { width: min(100% - 48px, 1160px); margin-inline: auto; }
.public-hero { border-bottom: 1px solid var(--color-border-medium); background: linear-gradient(145deg, var(--color-bg-canvas), var(--color-bg-card-subtle)); }
.public-hero-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); align-items: center; gap: clamp(24px, 5vw, 76px); min-height: 520px; padding-block: 64px; }
.public-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--color-accent-primary); font: 600 12px/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; }
.public-eyebrow .ui-icon { width: 18px; height: 18px; }
.public-page h1, .public-page h2, .public-page h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.025em; text-wrap: balance; }
.public-page h1 { font-size: clamp(46px, 5.5vw, 82px); line-height: 1.03; margin: 0 0 24px; }
.public-page h1 em { color: var(--color-accent-primary); }
.public-page h2 { font-size: clamp(32px, 3.5vw, 47px); line-height: 1.12; margin: 0 0 24px; }
.public-page h3 { font-size: 27px; line-height: 1.2; margin: 0 0 12px; }
.public-page p { color: var(--color-ink-secondary); margin: 0 0 18px; text-wrap: pretty; }
.public-lede { font-size: clamp(17px, 1.6vw, 20px); max-width: 620px; }
.public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.public-actions .c-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; }
.public-actions .ui-icon, .public-card a .ui-icon { width: 17px; height: 17px; }
.public-section { padding-block: clamp(64px, 8vw, 100px); border-bottom: 1px solid var(--color-border-medium); scroll-margin-top: 86px; }
.public-section > h2 { max-width: 650px; }
.public-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.public-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-card { display: flex; flex-direction: column; align-items: start; border: 1px solid var(--color-border-medium); border-radius: var(--radius-lg); padding: 26px; background: var(--color-bg-card); min-width: 0; }
.public-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-border-medium); border-radius: 14px; color: var(--color-accent-primary); margin-bottom: 28px; }
.public-card-icon .ui-icon { width: 24px; height: 24px; }
.public-card p { font-size: 15px; line-height: 1.7; }
.public-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; min-height: 44px; font-weight: 600; color: var(--color-accent-primary); text-decoration: none; }
.public-card a:hover { text-decoration: underline; text-underline-offset: 5px; }
.public-step { font: 500 11px var(--font-mono); color: var(--color-ink-muted); margin-bottom: 13px; }
.public-card-grid--four .public-card { padding: 23px; }
.public-card-grid--four .public-card h3 { font-size: 23px; }
.public-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 7vw, 100px); }
.public-split p { max-width: 620px; }
.public-cta { text-align: center; }
.public-cta p { max-width: 560px; margin-inline: auto; }
.public-cta .public-actions { justify-content: center; }
.public-cta > .c-btn { display: inline-flex; gap: 10px; min-height: 48px; align-items: center; }
.public-hero-art { aspect-ratio: 1; border: 1px solid var(--color-border-medium); border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle, var(--color-bg-card) 0 42%, transparent 43% 100%); overflow: hidden; }
.public-hero-ring { position: absolute; width: 70%; height: 70%; border: 2px solid var(--color-border-medium); border-radius: 50%; transform: rotateX(65deg) rotate(22deg); box-shadow: 0 13px 30px rgb(62 36 7 / 9%); }
.public-hero-core { display: grid; place-items: center; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--color-cta); color: var(--color-cta-ink); font: 400 clamp(55px, 9vw, 110px)/1 var(--font-serif); box-shadow: 0 24px 40px rgb(62 36 7 / 20%); }
.public-hero-core span { display: none; }
.public-hero-orbit { position: absolute; border: 1px solid var(--color-border-medium); border-radius: 50%; width: 88%; height: 55%; transform: rotate(-38deg); }
.public-hero-orbit--two { transform: rotate(48deg); width: 77%; height: 69%; }
.public-method-graphic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding:16px; min-width:0; }
.public-method-graphic span { display: grid; place-items: center; min-height: 150px; background: var(--color-bg-card); border: 1px solid var(--color-border-medium); border-radius: 22px; box-shadow: 0 16px 25px rgb(62 36 7 / 5%); }
.public-method-graphic span:nth-child(2), .public-method-graphic span:nth-child(3) { transform: translateY(18px); }
.public-method-graphic .ui-icon { width: 58px; height: 58px; color: var(--color-accent-primary); }
@media (max-width: 900px) { .public-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-hero-grid { min-height: 440px; } }
@media (max-width: 640px) { .public-wrap { width: calc(100% - 36px); } .public-hero-grid, .public-split { grid-template-columns: 1fr; } .public-hero-grid { padding-block: 50px 36px; gap: 20px; } .public-hero-art { width: min(68vw, 270px); margin: 0 auto; } .public-method-graphic { width: min(80vw, 300px); margin: 12px auto 0; gap: 10px; } .public-method-graphic span { min-height: 105px; } .public-method-graphic .ui-icon { width: 42px; height: 42px; } .public-card-grid { grid-template-columns: 1fr; } .public-card-grid--four { grid-template-columns: 1fr; } .public-card { padding: 24px; } .public-card-icon { margin-bottom: 20px; } .public-section { padding-block: 58px; } }
@media (max-width: 390px) { .public-page h1 { font-size: 43px; } .public-actions .c-btn { width: 100%; justify-content: center; } }
.public-atlas-art { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--color-border-medium); background: radial-gradient(circle at 55% 48%, var(--color-bg-card) 0 20%, var(--color-bg-card-subtle) 70%); overflow: hidden; }
.public-atlas-art::before, .public-atlas-art::after { content: ""; position: absolute; inset: 12%; border: 1px solid var(--color-border-medium); border-radius: 50%; transform: rotateX(60deg) rotate(28deg); }
.public-atlas-art::after { inset: 24%; transform: rotateX(30deg) rotate(-32deg); }
.public-atlas-line { position: absolute; left: 15%; right: 15%; top: 50%; height: 2px; background: var(--color-ink-subtle); transform: rotate(-27deg); }
.public-atlas-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent-primary); border: 3px solid var(--color-bg-card); box-shadow: 0 0 0 1px var(--color-border-medium); }
.public-atlas-dot:nth-of-type(2) { left: 22%; top: 58%; }.public-atlas-dot:nth-of-type(3) { left: 39%; top: 49%; }.public-atlas-dot:nth-of-type(4) { left: 60%; top: 39%; }.public-atlas-dot:nth-of-type(5) { left: 76%; top: 29%; }
.public-evidence-art { position: relative; aspect-ratio: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 30px; }
.public-evidence-art span { display: grid; place-items: center; background: var(--color-bg-card); border: 1px solid var(--color-border-medium); border-radius: 50%; box-shadow: 0 20px 30px rgb(62 36 7 / 7%); z-index: 1; }
.public-evidence-art span:nth-child(2), .public-evidence-art span:nth-child(3) { transform: translateY(12px); }
.public-evidence-art .ui-icon { width: 42px; height: 42px; color: var(--color-accent-primary); }
.public-evidence-art i { position: absolute; height: 1px; background: var(--color-border-medium); width: 54%; left: 23%; top: 50%; transform: rotate(45deg); }
.public-evidence-art i:nth-last-child(2) { transform: rotate(-45deg); }.public-evidence-art i:last-child { transform: rotate(0); }
@media (max-width: 640px) { .public-atlas-art, .public-evidence-art { width: min(68vw, 270px); margin: 0 auto; } .public-evidence-art { padding: 18px; gap: 12px; } .public-evidence-art .ui-icon { width: 32px; height: 32px; } }
/* The research library and guided reading use the same restrained editorial shell. */
.research-search { margin-top:28px; max-width:520px; }
.research-search label { display:block; font:500 13px var(--font-sans); margin-bottom:9px; color:var(--color-ink-secondary); }
.research-search > div { display:flex; border:1px solid var(--color-border-medium); border-radius:12px; background:var(--color-bg-card); overflow:hidden; }
.research-search input { width:100%; min-width:0; padding:15px; border:0; color:var(--color-ink-primary); background:transparent; font:15px var(--font-sans); }
.research-search button { display:grid; place-items:center; width:54px; min-height:50px; flex-shrink:0; border:0; background:var(--color-cta); color:var(--color-cta-ink); cursor:pointer; }
.research-quick-links { display:flex; gap:8px 17px; flex-wrap:wrap; margin-top:14px; }
.research-quick-links a { min-height:44px; display:inline-flex; align-items:center; color:var(--color-ink-secondary); font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.research-hub-art { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; gap:15px; overflow:clip; overflow-clip-margin:16px; background:radial-gradient(circle,var(--color-bg-card) 0 45%,transparent 46%); }
.hub-art-orbit { position:absolute; width:94%; height:60%; border:1px solid var(--color-border-medium); border-radius:50%; transform:rotate(-28deg); }
.hub-art-orbit::after { content:""; position:absolute; inset:-25% 18%; border:1px solid var(--color-border-medium); border-radius:50%; transform:rotate(50deg); }
.hub-art-node { display:grid; place-items:center; width:85px; height:85px; background:var(--color-bg-card); border:1px solid var(--color-border-medium); border-radius:18px; transform:rotate(-7deg); box-shadow:0 16px 30px rgb(62 36 7 / 8%); }
.hub-art-node:nth-of-type(4) { transform:translateY(-36px) rotate(7deg); }
.hub-art-node .ui-icon { width:37px; height:37px; color:var(--color-accent-primary); }
.hub-art-label,.hub-art-caption { position:absolute; top:12%; font:11px var(--font-mono); letter-spacing:.04em; color:var(--color-ink-muted); }
.hub-art-caption { top:auto; bottom:12%; font-family:var(--font-sans); letter-spacing:0; }
.public-guide-card .public-step { display:flex; justify-content:space-between; gap:10px; width:100%; }
.public-guide-card .public-card-icon { margin-bottom:20px; }
.public-guide-card h3 { font-size:28px; }
.public-guide-card .guide-source-caption { font-size:11px; color:var(--color-ink-muted); border-top:1px solid var(--color-border-subtle); padding-top:14px; width:100%; margin-top:auto; }
.public-guide-card a { margin-top:0; }
.reading-path-hero { padding-block:64px; }
.reading-path-hero h1 { max-width:750px; }
.path-shortcuts { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.path-shortcuts a { display:inline-flex; align-items:center; min-height:44px; padding:7px 14px; border:1px solid var(--color-border-medium); border-radius:999px; color:var(--color-ink-secondary); font-size:13px; text-decoration:none; background:var(--color-bg-card); }
.reading-path { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; padding-block:64px; border-bottom:1px solid var(--color-border-medium); scroll-margin-top:88px; }
.reading-path h2 { font-size:40px; }
.reading-path ol { list-style:none; padding:0; margin:0; }
.reading-path li { display:grid; grid-template-columns:28px 1fr; gap:14px; padding:20px 0; border-bottom:1px solid var(--color-border-subtle); }
.reading-path li:first-child { padding-top:0; }
.reading-path li:last-child { border:0; padding-bottom:0; }
.reading-path-number { font:11px var(--font-mono); color:var(--color-accent-primary); padding-top:6px; }
.reading-path h3 { font-size:26px; }
.reading-path li p { font-size:15px; margin-bottom:8px; }
.reading-path a { min-height:44px; display:inline-flex; align-items:center; gap:6px; color:var(--color-accent-primary); font-size:14px; font-weight:500; text-decoration:none; }
.reading-path a:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px) { .hub-art-node{width:67px;height:67px}.hub-art-node .ui-icon{width:29px;height:29px}.research-hub-art{gap:8px}.reading-path{grid-template-columns:1fr;gap:24px}.public-hero-grid{gap:24px}.reading-path h2{font-size:35px} }
@media(max-width:640px) { .research-hub-art{width:min(80vw,310px);margin:12px auto 0}.reading-path-hero{padding-block:48px}.reading-path{padding-block:48px}.reading-path li{gap:10px}.public-guide-card h3{font-size:28px} }
/* Switch at a readable card width, before the three-column grid becomes cramped. */
@media (min-width: 641px) and (max-width: 960px) {
  .public-card-grid:not(.public-card-grid--four) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-card-grid:not(.public-card-grid--four) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .public-card-grid:not(.public-card-grid--four) > :last-child:nth-child(odd) p { max-width: 600px; }
}
@media (min-width: 641px) and (max-width: 760px) {
  .public-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .public-page h1 { font-size: 46px; }
  .public-card { padding: 22px; }
}

/* Editorial illustrations share a material palette across project and study pages. */
.public-guide-art { width:100%; height:155px; margin-bottom:24px; background:var(--color-bg-card-subtle); border-radius:12px; }
.public-guide-art img { width:100%; height:100%; object-fit:contain; }
.research-hub-art--object { background:none; padding:30px 0; }
.research-hub-art--object > img { display:block; width:100%; height:auto; object-fit:contain; }
.research-hub-art--object .hub-art-label { top:0; }
.research-hub-art--object .hub-art-caption { bottom:0; }
.public-hero-art--object { background:none; border:0; box-shadow:none; }
.public-hero-art--object > img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:640px){.research-hub-art--object{width:min(80vw,300px)}.public-hero-art--object{width:min(80vw,290px)}}
