/* Proposed whole-site field-guide direction; prototype only. */
body.homepage { --bg:#0d1323; --surface:#151e32; --surface-2:#1e2a43; --text:#edf2ff; --text-dim:#b4bfd6; --accent:#9ac1ff; --line:#33415c; --radius:12px; }
.homepage .wrap { max-width:78rem; padding-inline:2.5rem; }
.homepage .atlas-nav { display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:2rem; border-bottom:1px solid var(--line); }
.atlas-wordmark { font-size:1.125rem; font-weight:750; letter-spacing:.04em; text-decoration:none; color:var(--text); white-space:nowrap; }
.atlas-wordmark span { margin-left:.75rem; padding-left:.85rem; border-left:1px solid var(--line); font-weight:450; font-size:.875rem; letter-spacing:0; color:var(--text-dim); }
.atlas-nav-links { display:flex; gap:1.75rem; align-items:center; font-size:.875rem; }
.atlas-nav-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--text-dim); }
.atlas-nav-links a:first-child { color:var(--accent); border-bottom:2px solid var(--accent); }
.atlas-nav-links a:hover { color:var(--accent-strong); }
.atlas-planned { color:var(--text-dim); opacity:.65; }
.homepage .site-header { background:none; border-bottom:0; padding:3.75rem 0 2.75rem; }
.homepage .site-header>.wrap { display:block; }
.homepage .hero-copy { position:relative; padding-right:17rem; }
.homepage h1 { font-size:clamp(2.3rem,4vw,3.7rem); font-weight:700; line-height:1.08; letter-spacing:-.045em; max-width:18ch; }
.homepage .lede { max-width:66ch; font-size:1rem; margin-top:1.35rem; line-height:1.75; }
.homepage .scope-badge { position:absolute; right:0; top:.3rem; max-width:14rem; padding:1rem 0 1rem 1.25rem; border:0; border-radius:0; border-left:2px solid var(--line); background:none; line-height:1.8; font-size:.8rem; }
.homepage .tool-nav { margin-top:2rem; display:flex; gap:2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.homepage .tool-nav a { flex:1; background:none; border:0; border-radius:0; padding:1rem 0; min-height:64px; font-size:.95rem; }
.homepage .tool-nav a:first-child { border-right:1px solid var(--line); padding-right:2rem; }
.homepage .tool-nav a:hover { background:none; color:var(--accent-strong); }
.homepage main.wrap { padding-top:0; }
.homepage .home-workbench { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:3rem; padding:0 0 2rem; }
.homepage h2 { font-size:1.65rem; letter-spacing:-.03em; }
.homepage .home-workbench h2 { margin-bottom:1.25rem; }
.homepage .panel { border:0; border-radius:0; box-shadow:none; padding:0; background:none; }
.homepage fieldset { margin-bottom:1.5rem; }
.homepage legend { font-size:.75rem; letter-spacing:.04em; margin-bottom:.75rem; }
.homepage .choice-row { gap:.5rem; }
.homepage label.choice { background:transparent; border-color:var(--line); border-radius:6px; font-size:.85rem; padding:.5rem .8rem; }
.homepage label.choice:has(input:checked) { background:#233c60; border-color:var(--accent); }
.homepage .filter-actions { padding-top:1rem; }
.homepage .compare-controls { gap:.8rem 1rem; }
.homepage select { min-height:48px; background:var(--surface); }
.homepage .compare-controls button { background:var(--surface); }
.homepage .shortcuts { border-top:1px solid var(--line); padding-top:1rem; gap:0; }
.homepage .shortcuts button { background:transparent; border:0; border-radius:0; border-bottom:1px solid #33415c88; padding:.8rem 0; font-size:.82rem; }
.homepage .shortcuts button:hover { color:var(--accent); }
.homepage .advertising { margin:0 0 3.5rem; padding:1.15rem 1rem; background:#111a2b; border:1px solid #33415c88; border-radius:8px; }
.homepage .advertising-copy { font-size:.78rem; }
.homepage .advertising-actions button { font-size:.8rem; }
.homepage .atlas-roster { border-top:1px solid var(--line); padding-top:2rem; }
.homepage .atlas-roster>h2 { margin:0 0 2rem; }
.homepage .class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3.5rem; row-gap:0; }
.homepage .class-card { display:flex; flex-direction:column; border:0; border-radius:0; background:none; border-top:1px solid var(--line); padding:1.75rem 0 2rem; }
.homepage .class-card h3 { font-size:1.6rem; letter-spacing:-.025em; }
.homepage .class-card .identity { font-size:.85rem; }
.homepage .class-card .badge { padding:0; border:0; font-size:.75rem; background:none; }
.homepage .class-card .badges { gap:1rem; }
.homepage .class-card .card-links { margin-top:1rem; padding-top:1rem; }
.homepage .class-card .card-links a { min-height:44px; }
.homepage .class-card .note { color:var(--text-dim); font-size:.8rem; }
.homepage .sources, .homepage .faq, .homepage section[aria-labelledby='note-h'] { max-width:68ch; padding-top:2rem; margin-top:2rem; }
.homepage .sources h3 { font-size:1rem; }
.homepage .site-footer { border-color:var(--line); padding-block:2rem; }
.homepage button,.homepage a,.homepage label.choice { transition:background-color .18s,border-color .18s,color .18s; }
.homepage button:active { transform:translateY(1px); }
@media(max-width:62rem){
.homepage .hero-copy { padding-right:0; }
.homepage .scope-badge { position:static; max-width:none; border-left:0; padding:.25rem 0; }
.homepage .atlas-nav { flex-wrap:wrap; gap:.25rem; padding-block:.75rem; }
.atlas-nav-links { width:100%; justify-content:space-between; gap:1rem; }
.homepage .home-workbench { grid-template-columns:1fr; gap:2rem; }
}
@media(max-width:46rem){
.homepage .wrap { padding-inline:1rem; }
.homepage .atlas-nav { min-height:auto; }
.atlas-wordmark { font-size:1rem; }
.atlas-wordmark span { font-size:.8rem; }
.atlas-nav-links { font-size:.75rem; gap:.55rem; flex-wrap:wrap; }
.atlas-planned { font-size:.7rem; }
.homepage .site-header { padding:2rem 0 1.75rem; }
.homepage h1 { font-size:2.5rem; max-width:13ch; }
.homepage .lede { font-size:.9rem; margin-top:1rem; }
.homepage .scope-badge { font-size:.75rem; }
.homepage .tool-nav { margin-top:1.25rem; display:grid; grid-template-columns:1fr; gap:0; }
.homepage .tool-nav a { min-height:52px; font-size:.85rem; padding:.75rem 0; }
.homepage .tool-nav a:first-child { border-right:0; border-bottom:1px solid var(--line); padding-right:0; }
.homepage h2 { font-size:1.35rem; }
.homepage .home-workbench { gap:1.75rem; }
.homepage .home-workbench h2 { margin-bottom:1rem; }
.homepage label.choice { font-size:.8rem; padding-inline:.5rem; }
.homepage .advertising { padding:1rem .75rem; margin-bottom:2.5rem; }
.homepage .class-grid { grid-template-columns:1fr; }
.homepage .class-card { padding-block:1.5rem; }
.homepage .class-card h3 { font-size:1.5rem; }
}
@media(prefers-reduced-motion:reduce){.homepage *{transition:none!important;scroll-behavior:auto!important;}}

@media(max-width:46rem){
.homepage .atlas-nav { padding-block:.5rem; }
.atlas-nav-links { gap:.4rem; font-size:.7rem; }
.homepage .site-header { padding:1.25rem 0 1.5rem; }
.homepage h1 { font-size:2.1rem; max-width:none; }
.homepage .lede { line-height:1.6; margin-top:.75rem; }
.homepage .tool-nav { margin-top:1rem; }
.homepage fieldset { margin-bottom:.9rem; }
.homepage .home-workbench { gap:1.5rem; }
}

/* Expert P2: clearly actionable pair rows; readable real navigation only. */
.homepage .shortcuts button { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--accent); }
.homepage .shortcuts button::after { content:'→'; flex-shrink:0; }
.homepage .shortcuts button:hover { color:var(--accent-strong); }
@media(max-width:46rem){ .atlas-nav-links { font-size:.85rem; gap:.65rem; } }

/* V2: actual original landscape/portraits, responsive topic-first entry. */
.homepage .site-header { position:relative; isolation:isolate; overflow:hidden; padding:4.5rem 0 0; min-height:500px; border-bottom:1px solid var(--line); }
.atlas-hero-art { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(13,19,35,.97) 0%,rgba(13,19,35,.78) 35%,rgba(13,19,35,.08) 75%),linear-gradient(0deg,#0d1323 0%,transparent 40%),url('/assets/art/citadel.jpg') 68% 45%/cover; }
.homepage .hero-copy { padding:0 0 2.5rem; max-width:44rem; }
.homepage h1 { font-size:clamp(2.6rem,4.4vw,4.2rem); max-width:13ch; }
.homepage .lede { max-width:47ch; font-size:1rem; text-wrap:pretty; }
.homepage .scope-badge { position:static; margin:1.4rem 0; border:0; padding:0; max-width:none; font-size:.75rem; }
.hero-actions { display:flex; gap:.75rem; margin-top:1.5rem; }
.hero-actions a { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; min-height:48px; padding:.65rem 1rem; border-radius:6px; background:var(--accent); color:#0d1323; font-weight:650; text-decoration:none; }
.hero-actions a+ a { color:var(--text); background:#151e32bb; border:1px solid #7d94b5; }
.hero-actions a:hover { background:#c3a6ff; color:#0d1323; }
.homepage .tool-nav { margin-top:0; border-bottom:0; gap:0; background:#0d1323b3; }
.homepage .tool-nav a { font-size:.85rem; padding:1rem; min-height:60px; }
.homepage .tool-nav a:first-child { padding-right:1rem; }
.homepage main.wrap { padding-top:2rem; }
.atlas-class-rail { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.7rem; }
.atlas-class-tile { min-width:0; overflow:hidden; border-radius:6px; border:1px solid #33415c; background:#151e32; text-decoration:none; color:var(--text); }
.archetype { display:block; background-image:url('/assets/art/archetypes.jpg'); background-size:400% 200%; background-position:var(--portrait-x) var(--portrait-y); aspect-ratio:1; }
.atlas-class-tile>span:last-child { display:block; padding:.7rem .25rem; text-align:center; font-size:.78rem; }
.atlas-class-tile:hover { border-color:var(--accent); transform:translateY(-3px); }
.atlas-art-note { margin:.7rem 0 2.25rem; font-size:.7rem; color:var(--text-dim); }
.homepage .home-workbench { padding-top:1.5rem; border-top:1px solid var(--line); margin-bottom:2rem; gap:3rem; }
.homepage .class-card { display:block; min-height:285px; padding:1.75rem 0 2rem; }
.atlas-profile-art { width:138px; float:right; margin:0 0 .75rem 1.25rem; border-radius:6px; }
.homepage .class-card .card-links { clear:both; }
.homepage .advertising { margin:3rem 0; padding:1rem; background:transparent; border:1px solid var(--line); }
.homepage .advertising-copy { font-size:.75rem; margin-block:.35rem; }
.homepage .advertising-label { font-size:.7rem; }
.homepage .advertising-actions { margin:.5rem 0; }
.homepage .advertising-actions button { min-height:44px; padding:.45rem .8rem; }
@media(min-width:65rem) { .homepage .advertising { display:grid; grid-template-columns:1fr auto; column-gap:2rem; } .advertising-actions { grid-column:2; grid-row:1 / span 3; align-self:center; } .homepage .advertising>p { grid-column:1; } }
@media(max-width:62rem) { .homepage .site-header { min-height:470px; } .homepage .hero-copy { max-width:65%; } .homepage .scope-badge { max-width:none; } .atlas-class-rail { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:46rem) {
.homepage .site-header { padding:2rem 0 0; min-height:0; }
.atlas-hero-art { background:linear-gradient(0deg,#0d1323 2%,rgba(13,19,35,.9) 45%,rgba(13,19,35,.25) 100%),url('/assets/art/citadel.jpg') 72% 0 / auto 520px no-repeat; }
.homepage .hero-copy { max-width:none; padding-top:8.75rem; padding-bottom:1.1rem; }
.homepage h1 { font-size:2.25rem; max-width:14ch; }
.homepage .lede { font-size:.85rem; line-height:1.65; margin-top:.8rem; }
.homepage .scope-badge { margin:.85rem 0; font-size:.69rem; }
.hero-actions { gap:.5rem; margin-top:1rem; }
.hero-actions a { gap:.7rem; font-size:.8rem; flex:1; padding:.65rem .75rem; }
.homepage .tool-nav { grid-template-columns:1fr 1fr; }
.homepage .tool-nav a { font-size:.75rem; line-height:1.5; min-height:70px; padding:.65rem .65rem; }
.homepage .tool-nav a:first-child { border-right:1px solid var(--line); border-bottom:0; padding-right:.65rem; }
.homepage main.wrap { padding-top:1.25rem; }
.atlas-class-rail { gap:.5rem; }
.atlas-class-tile>span:last-child { font-size:.66rem; padding:.5rem .15rem; }
.atlas-art-note { font-size:.64rem; margin:.65rem 0 1.25rem; }
.homepage .home-workbench { padding-top:1.25rem; gap:1.5rem; }
.homepage .choice-row { gap:.35rem; }
.homepage label.choice { font-size:.75rem; padding:.5rem .4rem; }
.atlas-profile-art { width:112px; margin-left:1rem; }
.homepage .class-card { min-height:0; }
}
@media(prefers-reduced-motion:no-preference) { .atlas-class-tile { transition:transform .2s,border-color .2s; } .hero-copy { animation:atlas-reveal .55s ease-out both; } @keyframes atlas-reveal { from { opacity:.5; transform:translateY(8px); } to { opacity:1; transform:none; } } }

.atlas-class-tile[hidden], .atlas-class-rail[hidden] { display:none; }
/* Responsive first-screen art: explicit dimensions, media-specific preload. */
.atlas-hero-art { background:none; }
.atlas-hero-art picture,.atlas-hero-art img { display:block; width:100%; height:100%; }
.atlas-hero-art img { object-fit:cover; object-position:68% 45%; }
.atlas-hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,19,35,.97) 0%,rgba(13,19,35,.78) 35%,rgba(13,19,35,.08) 75%),linear-gradient(0deg,#0d1323 0%,transparent 40%); }
@media(max-width:46rem){
.atlas-hero-art img { height:520px; object-position:center top; }
.atlas-hero-art::after { background:linear-gradient(0deg,#0d1323 2%,rgba(13,19,35,.9) 45%,rgba(13,19,35,.25) 100%); }
}

/* A third existing-site tool; keep all prior labels/links intact. */
.homepage .tool-nav a:first-child { border-right:0; }
.homepage .tool-nav a + a { border-left:1px solid var(--line); }
@media(max-width:46rem){ .homepage .tool-nav { grid-template-columns:repeat(3,minmax(0,1fr)); } .homepage .tool-nav a { min-width:0; font-size:.73rem; gap:.35rem; } }
@media(max-width:46rem){
.homepage .tool-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
.homepage .tool-nav a { font-size:.85rem; gap:.4rem; }
.homepage .tool-nav .dps-tool-entry { grid-column:1/-1; border-left:0; border-top:1px solid var(--line); min-height:48px; }
}