/* Draft Atlas — reading, navigation and small moments of motion. */
:root {
  --atlas-paper: #fffefa;
  --atlas-ink: #2e2539;
  --atlas-secondary: #62576d;
  --atlas-rule: #dfd8e6;
  --atlas-ease: cubic-bezier(.2,.75,.25,1);
}
html { scrollbar-gutter: stable; }
body {
  color: var(--atlas-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { color: #2c203c; background: #d9c9ee; }
main { max-width: 1440px; padding-inline: clamp(22px,5vw,72px); }
h1,h2,h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 220ms var(--atlas-ease);
}
button:disabled { transform: none; }
textarea:focus-visible { outline: 3px solid #7652b3; outline-offset: 3px; }
.topbar { background: #35254d; border-bottom-color: #ffffff12; box-shadow: 0 2px 12px #261a3608; }
.topbar .nav { position: relative; letter-spacing: .03em; font-weight: 550; }
.topbar .nav.active, .topbar .nav[aria-current=page] { border-bottom-color: transparent; }
.topbar .nav::after {
  content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px;
  background: #c6e5d3; transform: scaleX(0); transform-origin: left;
  transition: transform 230ms var(--atlas-ease);
}
.topbar .nav.active::after, .topbar .nav[aria-current=page]::after { transform: scaleX(1); }
.brand-symbol { transition: transform 600ms var(--atlas-ease); }
.brand:is(:hover,:focus-visible) .brand-symbol { transform: rotate(90deg); }
.eyebrow { color: #73617f; font-size: 10px; line-height: 1.65; letter-spacing: .16em; }

/* The existing homepage, given an editorial rhythm. */
.home-page { gap: 48px 64px; align-items: center; padding-block: 68px 36px; }
.home-copy { min-width: 0; }
.home-copy h1 { font-size: clamp(46px,4.8vw,69px); line-height: 1.08; letter-spacing: -.045em; margin: 21px 0 24px; }
.home-copy h1 em { color: #7555a3; font-weight: 450; }
.home-copy > p { max-width: 35em; font-size: 16px; line-height: 1.85; color: #62536f; }
.home-flow { gap: 0; margin: 31px 0 32px; counter-reset: steps; }
.home-flow > div { counter-increment: steps; background: none; border: 0; border-radius: 0; padding: 0 16px; }
.home-flow > div:first-child { padding-left: 0; }
.home-flow > div + div { border-left: 1px solid #ddd3e6; }
.home-flow .flow-icon { font-size: 0; height: 24px; margin-bottom: 9px; }
.home-flow .flow-icon::before { content: '0' counter(steps); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #8a769a; }
.home-flow b { font-size: 12px; font-weight: 650; }
.home-flow small { font-size: 11px; line-height: 1.65; color: #6b5d76; margin-top: 6px; }
.home-data-cta { background: #65479a; border-radius: 7px; font-size: 14px; font-weight: 600; min-height: 50px; box-shadow: 0 3px 5px #3b24470a; }
.home-data-cta > span { display: inline-block; transition: transform 250ms var(--atlas-ease); }
.home-data-cta:is(:hover,:focus-visible) { background: #51377e; box-shadow: 0 6px 16px #3b244719; }
.home-data-cta:is(:hover,:focus-visible) > span { transform: translate(3px,-3px); }
.home-data-cta:active { transform: translateY(1px) scale(.99); }
.home-secondary-link { margin-left: 14px; font-size: 12px; font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.home-copy .home-fineprint { color: #71647b; font-size: 11px; margin-top: 21px; }
.home-copy .home-founder { font-size: 12px; margin-top: 14px; }
.home-founder a { font-weight: 600; }
.home-graphic { isolation: isolate; padding: 24px 26px 20px; max-width: 420px; border-radius: 18px; background: #eee8f4; border: 1px solid #e0d6e8; box-shadow: none; }
.home-graphic-top { font-size: 9px; letter-spacing: .17em; color: #7e6b8b; }
.home-graphic-top .live-dot { width: 5px; height: 5px; background: #78638b; box-shadow: 0 0 0 4px #78638b0a; }
.ajani-scene { position: relative; height: 296px; margin-top: 6px; display: grid; place-items: center; perspective: 1000px; }
.ajani-orbit { position: absolute; width: 280px; height: 280px; border: 1px solid #b7a3ca70; border-radius: 50%; pointer-events: none; }
.ajani-orbit::before { content: ''; position: absolute; inset: 16px; border: 1px solid #b7a3ca35; border-radius: 50%; }
.ajani-orbit::after { content: ''; position: absolute; inset: -7px; border: 1px solid #b7a3ca25; border-radius: 50%; border-inline-color: transparent; transform: rotate(30deg); }
.ajani-orbit span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #9c84b2; }
.ajani-orbit span:nth-child(1) { top: -3px; left: calc(50% - 2px); }
.ajani-orbit span:nth-child(2) { top: calc(50% - 2px); right: -3px; }
.ajani-orbit span:nth-child(3) { bottom: -3px; left: calc(50% - 2px); }
.ajani-orbit span:nth-child(4) { top: calc(50% - 2px); left: -3px; }
.ajani-stage { display: block; position: relative; width: 195px; height: 272px; padding: 0; border: 0; border-radius: 11px; background: transparent; perspective: 900px; z-index: 1; cursor: pointer; }
.ajani-card { position: absolute; inset: 0; display: block; border-radius: inherit; transform-style: preserve-3d; transform: rotateX(var(--tilt-x,2deg)) rotateY(var(--tilt-y,-5deg)) rotateZ(-5deg); box-shadow: 9px 22px 24px -13px #2a1a4260, 0 1px 2px #28163435; transition: transform 450ms var(--atlas-ease), box-shadow 400ms ease; }
.ajani-stage.is-tracking .ajani-card { transition: transform 90ms linear; box-shadow: 12px 26px 32px -13px #2a1a4260; }
.home-card-art { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transform: none; border-radius: inherit; box-shadow: none; }
.ajani-foil { position: absolute; inset: 0; display: block; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(110deg,transparent 24%,#d6eaff0e 35%,#fff9ed85 45%,#eee0ff28 52%,transparent 63%); background-size: 250% 100%; background-position: 100% 50%; mix-blend-mode: screen; }
.ajani-stage:is(:hover,:focus-visible) .ajani-foil, .ajani-stage.is-glinting .ajani-foil { animation: atlas-foil 1150ms var(--atlas-ease) 1; }
.home-sample { z-index: 2; margin: -13px -6px 0 26px; padding: 20px 23px; border-radius: 10px; border-color: #dfd4e8; background: #fffefa; box-shadow: 0 8px 16px #45305209; }
.home-sample > span { font-size: 15px; font-weight: 600; color: #483453; }
.home-sample > strong { font-size: 53px; font-weight: 550; letter-spacing: -.05em; color: #745491; font-variant-numeric: tabular-nums; }
.home-sample > p { max-width: 21em; line-height: 1.6; color: #6e5e79; font-size: 11px; }
.home-sample-meta { border-top: 1px solid #ebe5ef; padding-top: 13px; font-size: 9px; }
.home-sample-meta > b { padding: 4px 7px; border-radius: 4px; background: #e8f0e9; font-size: 10px; }
.home-sample-meta > span { color: #73617f; }
.home-sample-date { font-size: 10px; line-height: 1.65; color: #766481; margin: 17px 2px 0; }
.home-directory { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr repeat(3,1.15fr); align-items: stretch; padding-top: 36px; margin-top: 10px; border-top: 1px solid var(--atlas-rule); }
.directory-intro { padding-right: 26px; }
.directory-intro h2 { font-size: 25px; line-height: 1.15; font-weight: 500; letter-spacing: -.04em; margin: 10px 0 0; }
.directory-link { display: grid; grid-template-columns: 1fr 18px; gap: 13px 10px; padding: 4px 23px; border-left: 1px solid var(--atlas-rule); color: var(--atlas-ink); text-decoration: none; }
.directory-number { grid-column: 1 / -1; font-size: 10px; color: #84718f; font-variant-numeric: tabular-nums; }
.directory-link h3 { font-size: 14px; letter-spacing: -.01em; font-weight: 600; margin: 0 0 8px; }
.directory-link p { font-size: 12px; color: #706079; line-height: 1.75; margin: 0; max-width: 20em; }
.directory-arrow { color: #796189; align-self: center; transition: transform 250ms var(--atlas-ease); }
.directory-link:is(:hover,:focus-visible) h3 { color: #6c4798; }
.directory-link:is(:hover,:focus-visible) .directory-arrow { transform: translate(3px,-3px); }

/* A quieter database: headings, figures, controls, then reading. */
#live { padding-bottom: 18px; }
.live-heading { padding: 42px 0 25px; gap: 24px; }
.live-heading h1 { margin: 8px 0; font-size: 36px; letter-spacing: -.04em; font-weight: 600; }
.live-heading h1 em { font-size: 25px; font-style: normal; color: #897495; font-weight: 400; }
.live-heading p { font-size: 14px; color: #6b5d76; }
.live-heading > .outline { font-size: 11px; border-color: #d6cbe1; background: transparent; padding: 12px 14px; }
.live-status-bar { border-radius: 7px; border-color: #e0d6e8; background: #f0ebf6; padding: 14px 18px; }
.live-status-bar span { color: #6b5b79; font-size: 11px; line-height: 1.7; }
.live-status-bar b { font-size: 12px; line-height: 1.65; }
.live-summary { margin: 28px 0 12px; gap: 24px; }
.live-summary > div { border-left-width: 1px; border-color: #d0c3dd; padding: 2px 18px; }
.live-summary span { font-size: 9px; letter-spacing: .09em; color: #74657e; }
.live-summary strong { font-size: clamp(22px,2.2vw,29px); line-height: 1.5; letter-spacing: -.035em; font-variant-numeric: tabular-nums; font-weight: 500; }
.live-range { color: #75677d; line-height: 1.7; margin: 0 0 27px; font-size: 11px; }
.control-panel { border-radius: 10px; border-color: #dcd3e4; box-shadow: 0 4px 12px #37204704; }
.search-row { padding: 18px 21px; gap: 15px; }
.search-wrap { gap: 14px; }
.search-wrap:focus-within { color: #68468b; }
.search-wrap:focus-within input { box-shadow: 0 2px 0 #8e70b0; }
.search-wrap input { color: #372a44; padding-block: 9px; border-radius: 0; transition: box-shadow 180ms ease; }
.search-wrap input::placeholder { color: #82748c; }
.shortlist { border-radius: 7px; font-size: 12px; background: #faf8fc; min-height: 44px; }
.reset { color: #705d81; font-size: 12px; min-height: 44px; }
.filters { gap: 24px; }
.filters label { font-size: 9px; letter-spacing: .1em; color: #75627f; }
.live-filters { padding: 18px 21px; }
.filters select { font-size: 13px; line-height: 1.7; color: #463650; padding-block: 7px; }
.advanced-filters { padding-inline: 21px; }
.advanced-filters > summary { font-size: 12px; color: #715881; }
.outline { border-radius: 6px; color: #624c74; }
.outline:hover { background: #f0eaf7; border-color: #bda8d0; }
.quick-bands { gap: 7px; margin-block: 21px 12px; }
.quick-band { padding: 9px 13px; min-height: 40px; border-radius: 6px; background: transparent; border-color: #ded3e7; color: #64516f; font-size: 11px; }
.quick-band b { margin-left: 7px; font-size: 10px; font-variant-numeric: tabular-nums; }
.quick-band.selected { background: #513966; border-color: #513966; }
.quick-band:active, .shortlist:active, .outline:active { transform: scale(.98); }
.compact-key > summary { font-size: 12px; color: #6e597e; }
.creator-context { border: 0; border-left: 2px solid #bba3d1; border-radius: 0; background: transparent; padding: 8px 0 8px 15px; margin: 19px 0 29px; color: #6d597a; font-size: 12px; line-height: 1.8; }
.creator-context b { color: #554160; }
.live-results-heading { padding-top: 6px; }
.live-results-heading h2 { font-size: 26px; font-weight: 550; letter-spacing: -.035em; }
.live-results-heading p { color: #73617e; line-height: 1.8; font-size: 12px; }
.live-results-heading select { border-radius: 6px; font-size: 12px; padding: 10px; }
.rank-note { color: #74627e; font-size: 11px; line-height: 1.8; max-width: 72em; margin-top: 15px; }
.result-count { font-size: 10px; color: #76637e; letter-spacing: .06em; margin: 23px 0 11px; }
.atlas-table-wrap { border-color: #ddd3e5; border-radius: 9px; }
.atlas-data-table th { background: #eee8f3; padding-block: 16px; font-size: 9px; letter-spacing: .09em; font-weight: 650; color: #6d5879; }
.atlas-data-table td { padding-block: 22px; line-height: 1.65; vertical-align: middle; }
.atlas-data-table tr { transition: background-color 180ms ease; }
.atlas-data-table tr:focus-within { background: #f8f4fc; }
.atlas-table-identity .live-card-button { align-items: center; gap: 11px; }
.atlas-table-identity .live-card-button img { transition: transform 240ms var(--atlas-ease), box-shadow 240ms ease; }
.atlas-table-identity .live-card-button:is(:hover,:focus-visible) img { transform: translateY(-2px) rotate(-3deg); box-shadow: 3px 5px 9px #35234025; }
.atlas-table-identity .live-card-button b { font-size: 13px; line-height: 1.55; font-weight: 600; }
.atlas-table-identity .live-card-button small { font-size: 10px; margin-top: 5px; }
.atlas-review-cell p { font-size: 12px; line-height: 1.85; color: #5b4b66; }
.source-detail-link { font-size: 10px; color: #70508c; border-bottom: 0; min-height: 38px; margin-top: 4px; padding-bottom: 4px; text-decoration: underline; text-decoration-color: #cbb9db; text-underline-offset: 5px; font-weight: 500; }
.source-detail-link:hover { color: #442960; text-decoration-color: #795993; }
.band-badge { font-weight: 600; border-radius: 4px; }
.card-rank { font-variant-numeric: tabular-nums; }
.load-more { border-radius: 7px; min-height: 46px; background: #fffefa; font-size: 12px; }
.live-star, .star-btn { transform-origin: 50% 50%; }
.live-star.on { color: #946c18; }
.live-method, .creator-sources { border-radius: 9px; border-color: #ddd3e5; padding: 22px; background: #fffefa; }
.live-method summary, .creator-sources summary { font-size: 13px; color: #51405f; }
.live-method-grid { gap: 10px 40px; padding-top: 24px; }
.live-method-grid p { color: #6c5a77; font-size: 12px; line-height: 1.9; }
.creator-sources p, .creator-sources li { color: #6c5a77; font-size: 12px; line-height: 1.9; }
details > summary { list-style: none; position: relative; padding-right: 28px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ''; position: absolute; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; right: 7px; top: calc(50% - 5px); transform: rotate(45deg); transition: transform 220ms var(--atlas-ease); opacity: .65; }
details[open] > summary::after { transform: translateY(3px) rotate(225deg); }

/* Longer reading surfaces retain every word and source. */
.grading-page, .guidance-heading { padding-top: 52px; }
.grading-page h1, .guidance-heading h1, .contact-page h1 { font-size: clamp(36px,4vw,53px); letter-spacing: -.04em; font-weight: 550; }
.section-lead { font-size: 16px; line-height: 1.9; max-width: 43em; color: #685573; }
.grading-layout { gap: 30px; margin-block: 38px 28px; }
.grading-layout > article { border-radius: 10px; padding: 30px; box-shadow: none; }
.grading-layout h2 { font-size: 23px; font-weight: 550; letter-spacing: -.025em; }
.grading-layout p { font-size: 14px; line-height: 1.9; color: #5e4e68; }
.grading-key dd { font-variant-numeric: tabular-nums; font-size: 13px; }
.method-note { background: #ede7f3; font-size: 13px; line-height: 1.9; border-left-width: 2px; padding: 22px 26px; color: #5c486b; }
.guidance-heading { padding-bottom: 21px; border-bottom: 1px solid var(--atlas-rule); }
.guidance-heading h1 { margin: 16px 0; }
.section-jump { display: inline-flex; gap: 18px; align-items: center; min-height: 44px; font-size: 12px; text-decoration: none; border-bottom: 1px solid #bb9ed3; }
.section-jump span { transition: transform 200ms var(--atlas-ease); }
.section-jump:hover span { transform: translateY(3px); }
.benchmark-disclosure { border-radius: 8px; background: #fffefa; margin-block: 28px; }
.guide-title { margin-block: 27px 30px; max-width: 760px; }
.guide-title h2 { font-size: 30px; line-height: 1.25; font-weight: 550; }
.guide-title p { font-size: 14px; line-height: 1.9; color: #6f5d79; }
.guide-grid { gap: 26px; }
.guide-grid article, .sources { border-radius: 9px; padding: 29px; background: #fffefa; }
.guide-grid h3, .sources h3 { font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.guide-grid p, .sources p { font-size: 13px; line-height: 1.9; color: #685473; }
.sources { margin-block: 30px 52px; }
.sources > p { padding-block: 16px; margin: 0; border-bottom: 1px solid #e9e1ee; }
.sources > p:last-child { border-bottom: 0; }
.sources > p > a:first-child { display: inline-block; font-weight: 600; text-decoration: none; }
.source-extra-links { display: flex; gap: 22px; margin-top: 8px; }
.source-extra-links a { font-size: 11px; color: #7e6294; text-underline-offset: 4px; }
.about-page { max-width: 1180px; gap: 90px; padding: 70px 42px 65px; }
.about-intro h1 { font-weight: 550; letter-spacing: -.045em; }
.about-intro p { font-size: 16px; line-height: 1.9; }
.about-intro .about-lead { font-size: 23px; font-weight: 500; margin-block: 29px 20px; }
.about-notes { gap: 28px; padding-top: 20px; }
.about-notes article { border-radius: 10px; padding: 29px; background: #fffefa; }
.about-notes h2 { font-size: 27px; letter-spacing: -.035em; font-weight: 550; line-height: 1.25; }
.about-notes p { font-size: 14px; line-height: 1.9; color: #62516e; }
.contact-page { max-width: 1150px; padding: 60px 38px; }
.contact-layout { gap: 64px; margin-top: 38px; }
.contact-form { border-radius: 10px; padding: 30px; }
.contact-form label { font-size: 12px; font-weight: 600; color: #594465; }
.contact-form input,.contact-form select,.contact-form textarea { border-radius: 6px; border-color: #d8cce2; background: #fffefa; font-size: 15px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #9b7ab8; box-shadow: 0 0 0 3px #ab8ac015; }
.contact-layout aside { padding-top: 5px; }
.contact-layout aside h2 { font-size: 29px; font-weight: 500; letter-spacing: -.035em; }
.contact-layout aside h3 { font-weight: 550; font-size: 16px; margin-top: 33px; }
.contact-layout aside p { font-size: 14px; line-height: 1.9; }
.form-help { font-size: 11px; line-height: 1.85; }
.preferences-page { max-width: 720px; margin: 50px auto; padding: 28px; }
.preferences-page > a { font-size: 13px; display: inline-block; padding-block: 10px; }
.preferences-page h1 { font-size: clamp(35px,5vw,50px); line-height: 1.12; letter-spacing: -.04em; font-weight: 550; margin: 30px 0; }
.preferences-page h2 { font-size: 23px; font-weight: 550; letter-spacing: -.025em; margin-top: 30px; }
.preferences-page p { font-size: 14px; line-height: 1.9; color: #604c6c; }
.preferences-page form { padding: 24px; border: 1px solid #dcd0e6; background: #fffefa; border-radius: 9px; margin-block: 24px; }
.preferences-page input { border: 1px solid #cdb9db; border-radius: 6px; font: inherit; background: white; }
.preferences-page .outline { min-height: 44px; padding-inline: 20px; }
.preferences-page small { color: #786181; }
footer { max-width: 1296px; width: calc(100% - clamp(44px,10vw,144px)); padding: 27px 0 34px; margin-top: 36px; border-top-color: #dcd3e4; font-size: 11px; color: #75647f; }
.brand-mini { font-size: 11px; letter-spacing: .12em; color: #5f496d; }
footer a { font-size: 11px; min-height: 32px; display: inline-flex; align-items: center; color: #705481; }

/* Dialogs and small feedback are deliberately brief. */
dialog { border-radius: 12px; border-color: #dacde5; background: #fffefa; max-height: calc(100dvh - 36px); }
dialog[open] { animation: atlas-dialog-in 240ms var(--atlas-ease); }
dialog[open]::backdrop { animation: atlas-backdrop-in 180ms ease; }
dialog::backdrop { background: #23152b80; backdrop-filter: blur(4px); }
.close-dialog { z-index: 3; background: #efe8f5; color: #715681; font-size: 25px; width: 38px; height: 38px; top: 12px; right: 12px; }
.close-dialog:hover { background: #e0d3ec; transform: rotate(90deg); }
.detail-grid { padding: 34px; gap: 28px; grid-template-columns: 200px minmax(0,1fr); }
.detail-left { padding-top: 8px; }
.detail-left > a { font-size: 11px; line-height: 1.8; }
#live-detail-title { padding-right: 22px; font-size: 32px; letter-spacing: -.035em; line-height: 1.15; margin-block: 15px; font-weight: 550; }
.episode-insight { border-radius: 8px; border-color: #dfd1e9; background: #f5f0f8; padding: 20px; }
.episode-insight h3 { font-size: 19px; font-weight: 550; }
.episode-insight p { font-size: 14px; line-height: 1.85; color: #564060; }
.creator-evidence h3 { font-size: 21px; font-weight: 550; }
.creator-evidence h4 { font-size: 14px; font-weight: 650; }
.creator-evidence p { font-size: 13px; line-height: 1.85; color: #665071; }
.creator-source-links { gap: 8px; }
.creator-source-links a { font-size: 11px; line-height: 1.8; color: #79538f; }
.live-metric-grid { gap: 1px; border: 1px solid #e4d9eb; background: #e4d9eb; border-radius: 7px; overflow: hidden; }
.live-metric-grid div { background: #faf7fc; border-radius: 0; padding: 12px; }
.live-metric-grid span { font-size: 10px; color: #735d7e; }
.live-metric-grid b { font-size: 16px; font-variant-numeric: tabular-nums; color: #4e345e; }
.newsletter-dialog { padding: 34px; border-radius: 12px; background: #fffefa; }
.newsletter-dialog h2 { font-size: 30px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
.newsletter-dialog p { font-size: 14px; line-height: 1.8; color: #5f4c6d; }
.newsletter-submit { font-size: 15px; border-radius: 6px; font-weight: 600; background: #65479a; }
.newsletter-dialog input[type=email] { border-radius: 6px; border-color: #d1bedf; }
.newsletter-consent { font-size: 12px; line-height: 1.75; }
.newsletter-later { font-size: 12px; text-underline-offset: 4px; }
.newsletter-dialog .newsletter-privacy { font-size: 11px; }
#contact-status:not(:empty), #newsletter-status:not(:empty) { border-left: 2px solid #a68bbb; padding-left: 12px; font-size: 13px; line-height: 1.7; }
.atlas-star-spark { position: fixed; z-index: 100; width: 4px; height: 4px; pointer-events: none; border-radius: 1px; background: #bb9960; }

@keyframes atlas-foil {
  0% { opacity: 0; background-position: 100% 50%; }
  18% { opacity: .6; }
  70% { opacity: .42; }
  100% { opacity: 0; background-position: 0% 50%; }
}
@keyframes atlas-dialog-in {
  from { opacity: 0; transform: translateY(9px) scale(.992); }
  to { opacity: 1; transform: none; }
}
@keyframes atlas-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 140ms; }
::view-transition-new(root) { animation-duration: 200ms; }

@media (max-width: 1100px) {
  .home-page { gap: 36px; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); }
  .home-copy h1 { font-size: 53px; }
  .home-secondary-link { display: block; margin: 16px 0 0; }
  .home-graphic { padding: 22px; }
  .home-directory { grid-template-columns: .85fr repeat(3,1fr); }
  .directory-link { padding-inline: 18px; }
  .live-summary { gap: 12px; }
  .atlas-table-identity .live-card-button { gap: 8px; }
  .atlas-table-identity .live-card-button b { font-size: 12px; }
  .about-page { gap: 45px; }
}
@media (max-width: 760px) {
  main { padding-inline: 22px; }
  .topbar { padding-inline: 20px; }
  .topbar nav { margin-inline: -6px; width: calc(100% + 12px); scrollbar-width: none; }
  .topbar .nav { font-size: 11px; }
  .home-page { grid-template-columns: 1fr; gap: 32px; padding-top: 37px; }
  .home-copy h1 { font-size: clamp(39px,8vw,58px); line-height: 1.1; margin-block: 17px 21px; }
  .home-copy > p { font-size: 15px; line-height: 1.8; }
  .home-copy .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .home-flow { margin-block: 27px; }
  .home-flow > div { padding-inline: 12px; }
  .home-flow b { font-size: 12px; }
  .home-flow small { font-size: 11px; }
  .home-data-cta { font-size: 13px; }
  .home-secondary-link { display: inline-block; margin-left: 14px; font-size: 11px; }
  .home-copy .home-fineprint { margin-top: 19px; }
  .home-graphic { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: 16px 10px; max-width: none; padding: 20px; border-radius: 12px; align-items: center; }
  .home-graphic-top { grid-column: 1 / -1; font-size: 8px; }
  .ajani-scene { margin: 0; height: 197px; }
  .ajani-orbit { width: 154px; height: 154px; }
  .ajani-orbit::before { inset: 10px; }
  .ajani-stage { width: 128px; height: 179px; border-radius: 7px; }
  .home-card-art { width: 100%; height: 100%; margin: 0; transform: none; border-radius: inherit; }
  .home-sample { margin: 0; padding: 15px; border-radius: 8px; }
  .home-sample > span { font-size: 13px; }
  .home-sample > strong { font-size: 36px; }
  .home-sample > strong > small { font-size: 15px; }
  .home-sample > p { font-size: 10px; line-height: 1.65; }
  .home-sample-meta { gap: 6px; font-size: 9px; padding-top: 9px; flex-wrap: wrap; }
  .home-sample-meta > b { font-size: 9px; }
  .home-sample-date { grid-column: 1/-1; font-size: 9px; line-height: 1.8; margin: 0; }
  .home-directory { grid-template-columns: 1fr; gap: 0; padding-top: 28px; margin-top: 0; }
  .directory-intro { padding: 0 0 21px; }
  .directory-intro h2 { font-size: 27px; }
  .directory-intro h2 br { display: none; }
  .directory-link { grid-template-columns: 25px 1fr 18px; padding: 22px 0; border-left: 0; border-top: 1px solid var(--atlas-rule); gap: 12px; }
  .directory-number { grid-column: auto; padding-top: 3px; }
  .directory-link h3 { font-size: 15px; }
  .directory-link p { max-width: none; font-size: 12px; }
  .live-heading { padding: 29px 0 22px; }
  .live-heading h1 { font-size: 31px; }
  .live-heading h1 em { font-size: 21px; margin-top: 7px; }
  .live-heading p { font-size: 13px; line-height: 1.85; }
  .live-status-bar { padding: 15px; }
  .live-status-bar b { font-size: 11px; }
  .live-status-bar span { font-size: 11px; }
  .live-summary { grid-template-columns: 1fr 1fr; gap: 20px 15px; margin-block: 25px 17px; }
  .live-summary > div { padding-left: 13px; }
  .live-summary span { font-size: 8px; letter-spacing: .07em; }
  .live-summary strong { font-size: 24px; }
  .live-range { font-size: 10px; line-height: 1.85; margin-bottom: 23px; }
  .search-row { padding: 15px; gap: 10px; }
  .search-wrap { flex-basis: 100%; }
  .search-wrap input { font-size: 16px; }
  .search-row .reset { margin-left: auto; font-size: 11px; }
  .filters.live-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; padding: 16px; }
  .filters select { width: 100%; font-size: 12px; }
  .advanced-filters { padding-inline: 16px; }
  .advanced-filters .filters.live-filters { padding: 8px 0 20px; }
  .quick-bands { gap: 6px; margin-top: 19px; }
  .quick-band { padding: 8px 10px; font-size: 10px; min-height: 38px; }
  .creator-context { margin-block: 18px 26px; font-size: 12px; }
  .live-results-heading { gap: 17px; }
  .live-results-heading h2 { font-size: 25px; }
  .live-results-heading .results-actions { align-items: flex-end; gap: 12px; }
  .live-help { font-size: 11px; white-space: normal; text-align: right; max-width: 115px; line-height: 1.8; }
  .rank-note { font-size: 11px; }
  .result-count { font-size: 9px; letter-spacing: .04em; line-height: 1.85; }
  .atlas-data-table tr { gap: 0 8px; border-radius: 10px; padding: 18px; margin-bottom: 16px; background: #fffefa; }
  .atlas-data-table td { padding-block: 13px 0; font-size: 12px; }
  .atlas-data-table td:first-child { padding-top: 0; }
  .atlas-table-identity .live-card-button b { font-size: 14px; }
  .atlas-table-identity .live-card-button small { font-size: 10px; }
  .atlas-review-cell p { font-size: 13px; line-height: 1.85; }
  .atlas-data-table td:last-child { padding-top: 14px; margin-top: 14px; }
  .source-detail-link { font-size: 11px; min-height: 42px; }
  .live-method, .creator-sources { padding: 18px; }
  .live-method-grid { gap: 6px; padding-inline: 0; }
  .grading-page, .guidance-heading { padding-top: 33px; }
  .grading-page h1, .guidance-heading h1 { font-size: 37px; }
  .section-lead { font-size: 15px; line-height: 1.85; }
  .grading-layout { gap: 22px; margin-top: 28px; }
  .grading-layout > article { padding: 23px; }
  .grading-layout p { font-size: 13px; }
  .grading-key dl > div { grid-template-columns: 145px 1fr; gap: 8px; }
  .grading-key dd { font-size: 12px; }
  .method-note { padding: 19px; font-size: 12px; }
  .guide-grid { grid-template-columns: 1fr; gap: 20px; }
  .guide-grid article, .sources { padding: 23px; }
  .guide-title h2 { font-size: 27px; }
  .guide-title p { font-size: 13px; }
  .sources > p { padding-block: 18px; overflow-wrap: anywhere; }
  .about-page { grid-template-columns: 1fr; padding: 37px 25px 35px; gap: 32px; }
  .about-intro h1 { font-size: 56px; }
  .about-intro p { font-size: 15px; }
  .about-notes { padding-top: 0; gap: 21px; }
  .about-notes article { padding: 25px; }
  .contact-page { padding: 36px 24px; }
  .contact-page h1 { font-size: 43px; }
  .contact-layout { gap: 30px; margin-top: 28px; }
  .contact-form { padding: 23px; }
  .contact-form input,.contact-form select,.contact-form textarea { font-size: 16px; }
  .contact-layout aside { padding-inline: 2px; }
  .preferences-page { padding: 24px; margin-block: 20px; }
  .preferences-page h1 { font-size: 37px; }
  .preferences-page form { padding: 20px; }
  footer { width: calc(100% - 44px); margin-top: 28px; gap: 12px 22px; padding-block: 23px 30px; }
  footer > .brand-mini { flex-basis: 100%; }
  footer a { margin-left: 0; }
  .detail-grid { grid-template-columns: 1fr; padding: 26px 22px; gap: 20px; }
  .detail-left { display: grid; grid-template-columns: 90px 1fr; gap: 10px 20px; align-items: center; padding-right: 38px; }
  .detail-left .detail-art { grid-row: 1/4; width: 90px; min-height: 0; }
  .detail-left > a { font-size: 11px; }
  #live-detail-title { font-size: 30px; padding-right: 0; }
  .episode-insight { padding: 17px; }
  .episode-insight p { font-size: 14px; }
  .live-metric-grid div { padding: 11px; }
  .newsletter-dialog { padding: 30px 24px; }
  .newsletter-dialog h2 { font-size: 28px; }
}
@media (max-width: 390px) {
  main { padding-inline: 18px; }
  .home-copy h1 { font-size: 38px; }
  .home-secondary-link { display: block; margin: 14px 0 0; }
  .home-flow > div { padding-inline: 9px; }
  .home-flow b { font-size: 11px; }
  .home-flow small { font-size: 10px; }
  .home-graphic { grid-template-columns: 115px minmax(0,1fr); gap: 12px; padding: 17px 14px; }
  .ajani-scene { height: 172px; }
  .ajani-stage { width: 108px; height: 151px; }
  .ajani-orbit { width: 129px; height: 129px; }
  .home-sample { padding: 12px; }
  .home-sample > span { font-size: 12px; }
  .home-sample > strong { font-size: 33px; }
  .grading-key dl > div { grid-template-columns: 132px 1fr; gap: 6px; }
  .grading-key dd { font-size: 11px; }
  .atlas-data-table tr { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ajani-card { transform: rotate(-4deg) !important; }
  .ajani-foil, .atlas-star-spark { display: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  @view-transition { navigation: none; }
}

/* Statistics: hover, keyboard focus, and tap definitions. */
.live-metric-grid .stat-help{position:relative;min-width:0;margin:0;padding:0;background:transparent;border:0}
.stat-help summary{list-style:none;cursor:help;padding:12px;background:var(--paper,#f5f3f8);border-radius:8px;height:100%}
.stat-help summary::-webkit-details-marker{display:none}
.stat-help summary>span,.stat-help summary>b{display:block}
.stat-help-mark{font-size:.85em;opacity:.7}
.stat-help summary:focus-visible{outline:2px solid #7150a2;outline-offset:2px}
.stat-help .stat-definition{display:none;position:absolute;z-index:20;top:calc(100% - 3px);left:0;width:230px;max-width:70vw;margin:0;padding:10px 12px;border-radius:8px;background:#261b36;color:#fff;font-size:13px;line-height:1.4;box-shadow:0 5px 16px #0003;font-weight:500}
.stat-help[open] .stat-definition,.stat-help:focus-within .stat-definition{display:block}
@media(hover:hover){.stat-help:hover .stat-definition{display:block}}
.live-metric-grid .stat-help:nth-child(4n) .stat-definition{left:auto;right:0}