/* Review Atlas look layer. Loaded last, over theme-night.css.

   Decided with Travis, 21 Sep 2026:
   - DM Sans (the "Atlas" face) for everything. Mono is for numbers only.
   - No tiny uppercase labels for anything a visitor needs to read: game name, "this is the
     free atlas", "this is a sample". Those get real size and the game's Steam art.
   - Day is the only colour mode for now; the switcher and the Tweaks panel are gone.
   - One signup ("the weekly atlas"), shown in the hero, under the sample, and in the dialog. */

:root{--font-display:Atlas,'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif}
h1,h2,h3,.steam-copy h1,.hp-find h2,.page-head h1,dialog h2{letter-spacing:-.03em}

/* ---- Labels: sentence case, DM Sans, readable ---------------------- */
.eyebrow,.steam-eyebrow,.hp-kicker,.hp-snapshot,.hp-demo-wordmark>span,.hp-inspector-top,.hp-price>span,.hp-review-peek>div,.hp-spark-title,.steam-bottom>div>span,.cover-series,.cover-bottom,.section-index,.folio{font-family:var(--font-sans);font-weight:500;letter-spacing:0;text-transform:none}
.eyebrow,.hp-kicker{font-size:15px;letter-spacing:0}
.hp-kicker>span{margin-left:14px}
.steam-eyebrow{font-size:15px;letter-spacing:.01em}

/* ---- Header -------------------------------------------------------- */
.wordmark{font-size:34px;font-weight:500;letter-spacing:-.035em;gap:12px}
.brand-icon{font-size:34px}
.atlas-page>header .wordmark{font-size:34px}
footer .wordmark,.atlas-page footer .wordmark{font-size:24px}
nav{font:500 16px var(--font-sans);letter-spacing:0;text-transform:none;gap:32px}
.button,.nav-cta,.hp-edition-action .button,.button.blue{font:600 15px/1 var(--font-sans);letter-spacing:0;text-transform:none}
.nav-cta{min-height:46px;padding:0 20px;gap:12px}
.hp-edition-action .button{font-size:15px;letter-spacing:0}
@media(max-width:700px){.wordmark,.atlas-page>header .wordmark{font-size:26px;gap:8px}.brand-icon{font-size:26px}nav{font-size:14px;gap:16px}}

/* ---- Hero ---------------------------------------------------------- */
.steam-copy{top:188px;max-width:840px}
.steam-copy h1{font-size:clamp(40px,4.2vw,64px);line-height:1.05;margin-bottom:24px;font-weight:300}
.steam-copy h1 .mute{display:block}
.steam-copy>p{max-width:560px;font-size:18px;line-height:1.55}
.steam-actions{align-items:flex-end;gap:28px;margin-top:30px}
.hero-signup{position:relative;display:flex;flex-direction:column;gap:8px;margin:0}
.hero-signup label{font:500 15px var(--font-sans);color:var(--bone-soft)}
.hero-signup>div{display:flex;height:52px;border:1px solid rgba(236,237,240,.45);border-radius:2px;background:rgba(11,15,26,.6);backdrop-filter:blur(6px)}
.hero-signup input{background:transparent;border:0;color:var(--bone);font:16px var(--font-sans);padding:0 16px;width:260px;min-width:0;outline-offset:-3px}
.hero-signup input::placeholder{color:var(--bone-mute)}
.hero-signup button{border:0;border-left:1px solid rgba(236,237,240,.3);background:transparent;color:var(--bone);font:600 15px var(--font-sans);padding:0 20px;cursor:pointer;white-space:nowrap}
.hero-signup button:hover{background:var(--bone);color:var(--night)}
.hero-signup [data-signup-status]{position:absolute;top:100%;left:0;margin:8px 0 0;font-size:13px;color:var(--bone-soft);white-space:nowrap}
.hero-signup [data-signup-status]:empty{display:none}

/* the strip under the hero: this week's atlas, by name, with its art */
.steam-bottom{padding:18px 0 38px}
.steam-current{display:flex;align-items:center;gap:18px}
.steam-bottom>a>span.steam-current-art{display:flex;gap:6px;margin:0}
.steam-current-art img{width:112px;height:52px;object-fit:cover;display:block;border-radius:2px;border:1px solid rgba(236,237,240,.25)}
.steam-bottom>a>span.steam-current-copy{display:block;margin:0;font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.steam-current-copy>span{display:block;font:600 14px var(--font-sans);color:var(--gold-soft)}
.steam-current-copy>strong{display:block;font:500 20px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--bone)}
.steam-current-copy>strong>b{font-weight:400;padding-left:8px}
.steam-current-copy>small{display:block;font:14px var(--font-sans);color:var(--bone-mute);margin-top:2px}
.steam-current:hover strong{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.steam-bottom>div>span{font-size:13px;color:var(--bone-mute)}
.steam-motion{font:500 13px var(--font-sans);letter-spacing:0;text-transform:none}
.steam-game-score strong small,.negative-share small{font-family:var(--font-sans);letter-spacing:0;text-transform:none;font-size:12px}
.steam-game-score>div>span{letter-spacing:.02em;text-transform:none;font-size:12px}
@media(max-width:1100px){.steam-copy{max-width:640px}.steam-copy h1{font-size:clamp(40px,5.4vw,56px)}}
@media(max-width:700px){
 .steam-opening{height:1290px;min-height:1290px}.steam-sticky{height:1090px;min-height:1090px}
 .steam-eyebrow{font-size:13px;top:112px}
 .steam-copy{top:160px}.steam-copy h1{font-size:clamp(34px,9vw,44px)}.steam-copy>p{font-size:16px;max-width:none}
 .steam-actions{align-items:stretch;flex-direction:column;gap:22px}.steam-actions .button{font-size:15px;align-self:flex-start}
 .hero-signup input{width:auto;flex:1}
 .steam-bottom{flex-direction:column;align-items:flex-start;gap:14px}
 .steam-bottom>div{max-width:none;justify-content:flex-start}.steam-bottom>div>span{font-size:12px;max-width:none}
 .steam-current{flex-direction:column;align-items:flex-start;gap:10px}
 .steam-current-art img{width:84px;height:39px}.steam-current-copy>strong{font-size:16px}.steam-current-copy>span,.steam-current-copy>small{font-size:13px}
}

/* ---- Home: the cover of this week's atlas -------------------------- */
.hp-lab{padding-top:64px}
.hp-cover{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;margin-bottom:52px;padding-bottom:52px;border-bottom:1px solid var(--rule)}
.hp-cover-art{position:relative;display:flex;gap:14px}
.hp-cover-art figure{margin:0;flex:1;min-width:0}
.hp-cover-art img{width:100%;height:auto;display:block;border-radius:3px;box-shadow:0 18px 40px rgba(11,15,26,.22)}
.hp-cover-art figcaption{font:500 15px var(--font-sans);color:var(--ink);margin-top:12px}
.hp-cover-join{position:absolute;left:50%;top:calc(50% - 14px);transform:translate(-50%,-50%);z-index:1;background:var(--night);color:var(--bone);font:500 13px var(--font-sans);padding:7px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hp-cover-label{display:flex;align-items:center;gap:12px;font:600 16px var(--font-sans);color:var(--gold-text);margin:0 0 16px}
.hp-cover-label::before{content:'';width:28px;height:2px;background:var(--gold)}
.hp-cover-copy h2{font:400 clamp(32px,3vw,48px)/1.08 var(--font-display);letter-spacing:-.035em;margin:0 0 20px}
.hp-cover-copy h2 span{color:var(--muted);font-weight:300;white-space:nowrap}
.hp-cover-meta{font:17px/1.6 var(--font-sans);color:var(--muted);margin:0;text-wrap:balance}
.hp-cover-meta b{font:500 16px var(--font-mono);color:var(--ink)}
.hp-intro{align-items:flex-start;margin-bottom:34px}
.hp-finding-label{font:600 15px var(--font-sans);color:var(--muted);margin:0 0 12px}
.hp-intro h3.hp-finding{font:300 clamp(30px,3vw,46px)/1.1 var(--font-display);letter-spacing:-.03em;margin:0;max-width:780px;text-wrap:balance}
.hp-intro-right{max-width:420px}
.hp-intro-right p{font-size:17px;line-height:1.6}
.hp-intro-right a{font-size:16px;font-weight:500}
@media(max-width:1000px){.hp-cover{grid-template-columns:1fr;gap:30px}.hp-intro{display:block}.hp-intro-right{max-width:none;margin-top:20px}}
@media(max-width:550px){.hp-lab{padding-top:40px}.hp-cover{margin-bottom:34px;padding-bottom:34px}.hp-cover-art{gap:8px}.hp-cover-art figcaption{font-size:13px;margin-top:8px}.hp-cover-join{font-size:11px;padding:5px 9px}.hp-cover-meta{font-size:15px}.hp-cover-meta b{font-size:14px}}

/* ---- Home: the sample, at a size people can read ------------------- */
.hp-demo-wordmark>span{font-size:15px;margin-left:12px;color:var(--muted)}
.hp-snapshot{font-size:14px}
.hp-language-pills button{font-size:15px;padding:10px 13px}
.hp-language-pills button span{font-size:12px}
.hp-live-hint{font-size:14px}
.hp-chart-heading h3{font-size:20px}.hp-chart-heading p{font-size:14px}
.hp-plot-key{font-size:13px}.hp-plot-key i{width:7px;height:7px}
.hp-game-heads img{width:128px;height:60px;filter:none}
.hp-game-heads strong{font-size:17px}.hp-game-heads button{font-size:12px}
.hp-chart-foot{font-size:14px}
.hp-inspector-top{font-size:14px;letter-spacing:0}
.hp-definition{font-size:14px;line-height:1.6}
.hp-metrics button>span{font-size:14px}.hp-metrics small{font-size:11px}
.hp-difference>span{font-size:14px}.hp-difference small{font-size:12px}
.hp-spark-title{font-size:14px;letter-spacing:0}.hp-spark-title a{font-size:14px}
.hp-spark-caption{font-size:11px;letter-spacing:.02em}.hp-spark-note{font-size:12px}
.hp-review-peek>div{font-size:13px;letter-spacing:0}
.hp-review-peek p{font-size:14px;line-height:1.6}.hp-review-peek button{font-size:14px}
.hp-review-peek>small{font:12px/1.5 var(--font-sans)}
.hp-method{font-size:14px}
.hp-evidence-status{font-size:14px}
.hp-edition-copy p{font-size:16px}.hp-atlas-links{font-size:15px}
.hp-edition-action>a:not(.button){font-size:14px}.hp-edition-action small{font-size:13px}
@media(min-width:1151px){.hp-demo-body{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:550px){.hp-kicker{font-size:13px}.hp-language-pills button{font-size:13px}.hp-game-heads strong{font-size:14px}.hp-game-heads button{font-size:11px}.hp-method,.hp-chart-foot{font-size:13px}}

/* ---- Home: the signup band ----------------------------------------- */
.hp-signup{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(330px,440px);gap:36px;align-items:center;background:var(--night);color:var(--bone);border-radius:3px;padding:32px 36px;margin:6px 0 80px}
.hp-signup-art{position:relative}
.hp-signup-art img{width:100%;height:auto;display:block;border-radius:2px;border:1px solid rgba(236,237,240,.2)}
.hp-signup-art span{position:absolute;left:8px;top:8px;background:var(--gold);color:var(--night);font:600 12px var(--font-sans);padding:4px 8px;border-radius:2px}
.hp-signup-copy h3{font:400 30px/1.1 var(--font-display);letter-spacing:-.03em;color:var(--bone);margin:0 0 10px}
.hp-signup-copy p{font:16px/1.55 var(--font-sans);color:var(--bone-soft);margin:0}
.hp-signup-form{margin:0}
.hp-signup-form label{display:block;font:500 14px var(--font-sans);color:var(--bone-soft);margin-bottom:8px}
.hp-signup-form>div{display:flex;gap:8px}
.hp-signup-form input{flex:1;min-width:0;height:52px;padding:0 16px;font:16px var(--font-sans);background:rgba(236,237,240,.06);border:1px solid rgba(236,237,240,.35);color:var(--bone);border-radius:2px}
.hp-signup-form input::placeholder{color:var(--bone-mute)}
.hp-signup-form input:focus{border-color:var(--bone);outline:none}
.hp-signup-form .button,.hp-signup-form .button:hover{background:var(--bone);border-color:var(--bone);color:var(--night)}
.hp-signup-form .button:hover{background:#fff}
.hp-signup-form p{font:13px/1.5 var(--font-sans);color:var(--bone-mute);margin:10px 0 0}
@media(max-width:1150px){.hp-signup{grid-template-columns:190px minmax(0,1fr);gap:26px}.hp-signup-form{grid-column:1 / -1}}
@media(max-width:700px){.hp-signup{grid-template-columns:1fr;padding:22px;margin-bottom:48px}.hp-signup-art{max-width:260px}.hp-signup-copy h3{font-size:26px}.hp-signup-form>div{flex-direction:column}}

/* ---- Home: quote section ------------------------------------------- */
.hp-find-copy>p{font-size:17px}
.hp-price>span{font-size:14px;letter-spacing:0;text-transform:none}
.hp-price>small{font-size:13px;max-width:320px}
.hp-search label{font:500 15px var(--font-sans);letter-spacing:0}
.hp-search #hp-search-status{font-size:14px}
.hp-search-input button{font-size:15px;font-weight:600}
.hp-search-result>span:nth-last-child(2){font-size:16px}.hp-search-result small{font-size:12px}
.hp-search-note>span{font-size:12px}.hp-search-note p{font-size:14px}
.hp-volume>p{font-size:15px}.hp-volume>small{font-size:13px}

/* ---- The signup dialog --------------------------------------------- */
.signup-art{display:flex;gap:8px;margin:0 0 22px}
.signup-art img{width:calc(50% - 4px);height:auto;display:block;border-radius:2px}
.signup-label{font:600 15px var(--font-sans);color:var(--gold-text);margin:0 0 10px}
.form-note{font-size:13px}

/* ---- The atlas: every atlas opens with its cover ------------------- */
.atlas-page .report-cover.has-art{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:34px;align-items:center;padding:28px 3%!important}
.cover-art{display:flex;gap:8px}
.cover-art img{width:236px;height:auto;display:block;border-radius:2px;border:1px solid rgba(236,237,240,.2)}
.atlas-page .report-cover .cover-label{font:600 15px var(--font-sans);letter-spacing:0;text-transform:none;color:var(--gold-soft);margin:0 0 8px}
.atlas-page .report-cover h1{font:400 clamp(28px,2.7vw,42px)/1.08 var(--font-display)!important;letter-spacing:-.03em;margin:0 0 10px}
.atlas-page .report-cover h1 .comparison-separator{font-weight:300;padding:0 2px;white-space:nowrap}
.atlas-page .report-cover .cover-meta{font:16px/1.5 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--bone-soft);text-wrap:balance}
.cover-meta b{font:500 15px var(--font-mono);color:var(--bone)}
.atlas-page .cover-note,.atlas-page .cover-note .text-link{font:500 15px var(--font-sans);letter-spacing:0;text-transform:none}
@media(max-width:1100px){.cover-art img{width:170px}}
@media(max-width:800px){.atlas-page .report-cover.has-art{grid-template-columns:1fr;gap:18px;padding:20px 4%!important}.cover-art img{width:calc(50% - 4px)}}

/* atlas labels: sans, sentence case. Mono stays on the figures. */
.atlas-page .report-nav button,.atlas-page .filter-bar label,.segmented button,.recommendation-profile .series-name,.rate-labels,.trend-end-label,.inspector-kicker,.atl-kicker,.atl-groups button,.atl-selects label,.atl-reading label,.atl-detail-kicker,.atl-metric-name,.atl-tile-count small,.atl-tile.is-large .atl-tile-count small{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.atlas-page .report-nav button{font-size:16px}
.atlas-page .filter-bar label,.segmented button,.recommendation-profile .series-name,.rate-labels,.inspector-kicker,.atl-groups button,.atl-selects label,.atl-reading label,.atl-detail-kicker,.atl-metric-name{font-size:13px}
.atl-kicker{font-size:14px}
.flow-game{font-family:var(--font-sans);letter-spacing:0;text-transform:none;font-size:13px}

/* ==== Round 2, 21 Sep ================================================ */
/* ---- One header everywhere: navy, bone, gold ----------------------- */
body>header{background:var(--night);color:var(--bone);border-color:var(--rule-night)}
body>header .wordmark{color:var(--bone)}
body>header nav a:not(.nav-cta),body>header nav button{color:var(--bone-mute)}
body>header nav a:not(.nav-cta):hover,body>header nav button:hover{color:var(--bone)}
body>header nav a[aria-current]:not(.nav-cta){color:var(--bone);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:9px}
body>header .nav-cta{background:transparent;border:1px solid rgba(236,237,240,.5);color:var(--bone)}
body>header .nav-cta:hover,body>header .nav-cta[aria-current]{background:var(--bone);border-color:var(--bone);color:var(--night)}
@media(max-width:700px){body>header nav a:not(.nav-cta),body>header nav button{display:none}}

/* ---- Hero: the two actions carry the page -------------------------- */
.steam-actions .button{background:var(--gold);border-color:var(--gold);color:var(--night);font-size:16px;min-height:56px;padding:0 26px}
.steam-actions .button:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
.hero-signup label{color:var(--bone);font-weight:600;font-size:16px}
.hero-signup>div{height:56px;border:1.5px solid var(--bone);background:rgba(11,15,26,.78)}
.hero-signup input::placeholder{color:var(--bone-soft)}
.hero-signup button{background:var(--bone);color:var(--night);border-left:0;font-size:16px;padding:0 24px}
.hero-signup button:hover{background:#fff;color:var(--night)}

/* ---- Home: this week's atlas as one framed element ----------------- */
.hp-lab{padding-top:56px}
.hp-atlas{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--panel);box-shadow:0 24px 60px rgba(11,15,26,.10)}
.hp-atlas .hp-cover{background:var(--night);color:var(--bone);margin:0;padding:40px 44px;border-bottom:0;gap:48px}
.hp-atlas .hp-cover-art img{box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hp-atlas .hp-cover-art figcaption{color:var(--bone-soft)}
.hp-atlas .hp-cover-join{background:var(--gold);color:var(--night);font-weight:600}
.hp-atlas .hp-cover-label{color:var(--gold-soft)}
.hp-atlas .hp-cover-copy h2{color:var(--bone)}
.hp-atlas .hp-cover-copy h2 span{color:var(--bone-mute)}
.hp-atlas .hp-cover-meta{color:var(--bone-soft)}
.hp-atlas .hp-cover-meta b{color:var(--bone)}
.hp-cover-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:28px}
.hp-cover-actions .button{background:var(--gold);border-color:var(--gold);color:var(--night);font-size:16px}
.hp-cover-actions .button:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
.hp-cover-actions a:not(.button){font:500 15px var(--font-sans);color:var(--bone-soft);border-bottom:1px solid rgba(236,237,240,.35);padding-bottom:4px}
.hp-cover-actions a:not(.button):hover{color:var(--bone);border-color:var(--bone)}
.hp-atlas-body{padding:40px 44px 0}
.hp-finding-label{display:flex;align-items:center;gap:12px}
.hp-finding-label span{font:500 13px var(--font-sans);color:var(--praise-text);border:1px solid currentColor;border-radius:999px;padding:3px 10px}
.hp-atlas .hp-edition{grid-template-columns:minmax(0,1fr) 250px;gap:40px;padding:36px 0 34px}
.hp-atlas .hp-edition .hp-kicker{font-size:16px;font-weight:600;color:var(--ink)}
.hp-atlas .hp-edition-copy h3{margin-top:10px}
.hp-signup{margin-top:40px}
@media(max-width:850px){.hp-atlas .hp-cover{padding:28px}.hp-atlas-body{padding:28px 28px 0}.hp-atlas .hp-edition{grid-template-columns:1fr;gap:20px}.hp-atlas .hp-edition-action{grid-column:1;align-items:flex-start}}
@media(max-width:550px){.hp-lab{padding-top:28px}.hp-atlas .hp-cover{padding:20px 16px 24px}.hp-atlas-body{padding:24px 14px 0}.hp-cover-actions{gap:18px;margin-top:22px}.hp-atlas .hp-edition-action{margin-top:0}}

/* ---- Home: about ---------------------------------------------------- */
.hp-about{display:grid;grid-template-columns:1fr 1.7fr;gap:70px;padding:84px 9% 96px;border-top:1px solid var(--rule);background:var(--paper)}
.hp-about h2{font:300 46px/1.08 var(--font-display);letter-spacing:-.03em;margin:0}
.hp-about-body p{font:18px/1.65 var(--font-sans);color:var(--ink-soft);margin:0 0 18px;max-width:700px}
.hp-about-body p:last-child{margin-bottom:0}
.hp-about-body a{font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:1px}
.hp-about-body a:hover{border-color:var(--gold);color:var(--gold-text)}
footer a[href="/#about"]{color:var(--muted)}
@media(max-width:850px){.hp-about{grid-template-columns:1fr;gap:24px;padding:50px 6% 60px}.hp-about h2{font-size:36px}.hp-about-body p{font-size:16px}}

/* ---- Quote: a visible way to clear the selection -------------------- */
.q-art{position:relative}
.q-clear{position:absolute;top:12px;right:12px;z-index:2;background:rgba(11,15,26,.85);color:var(--bone);border:1px solid rgba(236,237,240,.45);border-radius:999px;font:600 14px var(--font-sans);padding:9px 15px;cursor:pointer;backdrop-filter:blur(4px)}
.q-clear:hover{background:var(--bone);color:var(--night);border-color:var(--bone)}
.q-fresh{margin-top:16px;font-size:14px}
.hp-atlas .hp-cover-meta{text-wrap:pretty;font-size:16px}.hp-atlas .hp-cover-meta b{font-size:15px}

/* ==== Round 3, 21 Sep ================================================ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
nav{gap:28px}
@media(max-width:1100px){nav{gap:20px;font-size:15px}.nav-cta{padding:0 16px}}

/* ---- Home: the switcher between the two kinds of atlas ------------- */
.hp-panel[hidden]{display:none}
.hp-cover-single .hp-cover-art{max-width:460px}
.hp-atlas-body>.hp-finding-label:first-child{margin-bottom:16px}
.hp-features{list-style:none;margin:0 0 40px;padding:0 0 36px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.hp-features-six{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:0;padding-bottom:0;margin-bottom:32px}
.hp-features li{border-top:2px solid var(--ink);padding-top:14px}
.hp-features strong{display:block;font:600 17px var(--font-sans);color:var(--ink);margin-bottom:6px}
.hp-features span{display:block;font:15px/1.5 var(--font-sans);color:var(--muted)}
.hp-placeholder{border:1.5px dashed var(--rule);border-radius:4px;padding:44px 28px;text-align:center;margin-bottom:40px;background:var(--paper)}
.hp-placeholder strong{display:block;font:500 20px var(--font-sans);color:var(--ink);margin-bottom:8px}
.hp-placeholder span{font:16px var(--font-sans);color:var(--muted)}
@media(max-width:1000px){.hp-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.hp-features,.hp-features-six{grid-template-columns:1fr;gap:18px;margin-bottom:28px;padding-bottom:26px}.hp-features-six{padding-bottom:0}.hp-placeholder{padding:28px 16px}}

/* ---- Phones: a ranked list instead of the rank-flow chart ---------- */
.hp-ranklist,.hp-mobile-note{display:none}
@media(max-width:700px){
 #hp-flow-wrap{overflow:visible;margin:0}
 #hp-flow-wrap .hp-flow{display:none}
 .hp-chart-heading p:after{content:none!important}
 .hp-ranklist{display:block}
 .hp-rank-head,.hp-rank-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px;gap:8px;align-items:center;width:100%}
 .hp-rank-head{font:500 12px/1.3 var(--font-sans);color:var(--muted);padding:0 10px 8px;text-align:right}
 .hp-rank-head span:first-child{text-align:left}
 .hp-rank-row{background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:13px 10px;text-align:left;font:15px var(--font-sans);color:var(--ink);cursor:pointer;border-radius:2px}
 .hp-rank-row span{display:flex;align-items:center;gap:9px;min-width:0}
 .hp-rank-row i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--praise)}
 .hp-rank-row i.complaint{background:var(--complaint)}
 .hp-rank-row b{font:500 14px var(--font-mono);text-align:right}
 .hp-rank-row b:last-child{color:var(--gold-text)}
 .hp-rank-row.is-selected{background:var(--paper-2);font-weight:600}
 .hp-mobile-note{display:block;font:14px/1.55 var(--font-sans);color:var(--muted);background:var(--paper-2);border-radius:3px;padding:14px;margin:18px 0 4px}
 .hp-mobile-note button{border:0;background:none;padding:0;font:600 14px var(--font-sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
 .hp-chart-foot>span{display:none}
}

/* ---- Quote: the three steps ---------------------------------------- */
.q-steps{list-style:none;counter-reset:qstep;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:34px 0 0;padding:0;max-width:980px}
.q-steps li{counter-increment:qstep;border-top:2px solid var(--ink);padding-top:14px}
.q-steps li::before{content:counter(qstep);display:block;font:500 14px var(--font-mono);color:var(--gold-text);margin-bottom:6px}
.q-steps strong{display:block;font:600 18px var(--font-sans);color:var(--ink);margin-bottom:4px}
.q-steps span{display:block;font:15px/1.5 var(--font-sans);color:var(--muted)}
@media(max-width:700px){.q-steps{grid-template-columns:1fr;gap:16px}}

/* ---- Atlas: subscribe on the cover, and the slide-in ---------------- */
.atlas-page .cover-note{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.atlas-page .cover-note .button{background:var(--gold);border-color:var(--gold);color:var(--night);font:600 15px/1 var(--font-sans);letter-spacing:0;text-transform:none;min-height:48px}
.atlas-page .cover-note .button:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
@media(max-width:800px){.atlas-page .cover-note{align-items:flex-start}}
.weekly-prompt{position:fixed;right:24px;bottom:24px;z-index:40;width:min(400px,calc(100vw - 32px));background:var(--night);color:var(--bone);border:1px solid rgba(236,237,240,.22);border-top:3px solid var(--gold);border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.45);padding:20px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease}
.weekly-prompt.is-open{transform:none;opacity:1;pointer-events:auto}
.weekly-prompt img{width:96px;height:auto;border-radius:2px;display:block;margin-top:3px}
.weekly-prompt strong{display:block;font:600 18px/1.25 var(--font-sans);padding-right:22px}
.weekly-prompt p{font:14px/1.5 var(--font-sans);color:var(--bone-soft);margin:6px 0 12px}
.weekly-prompt form{margin:0;grid-column:1 / -1}
.weekly-prompt>div{display:contents}
.weekly-prompt strong,.weekly-prompt>div>p{grid-column:2}
.weekly-prompt form>div{display:flex;height:48px;border:1.5px solid var(--bone);border-radius:2px}
.weekly-prompt input{flex:1;min-width:0;background:transparent;border:0;color:var(--bone);font:16px var(--font-sans);padding:0 14px;outline-offset:-3px}
.weekly-prompt input::placeholder{color:var(--bone-mute)}
.weekly-prompt form button{border:0;background:var(--bone);color:var(--night);font:600 15px var(--font-sans);padding:0 18px;cursor:pointer}
.weekly-prompt form button:hover{background:#fff}
.weekly-prompt form p{margin:8px 0 0;font-size:13px}.weekly-prompt form p:empty{display:none}
.weekly-close{position:absolute;top:8px;right:10px;border:0;background:none;color:var(--bone-mute);font-size:24px;line-height:1;cursor:pointer;padding:4px}
.weekly-close:hover{color:var(--bone)}
@media(max-width:700px){.weekly-prompt{right:12px;left:12px;bottom:12px;width:auto}}
@media(prefers-reduced-motion:reduce){.weekly-prompt{transition:none}}
.weekly-prompt img{grid-row:1 / span 2}
.weekly-prompt{gap:0 16px;align-items:start}.weekly-prompt form{margin-top:4px}
.atlas-page .report-cover .cover-meta{text-wrap:pretty}
@media(max-width:700px){.hp-game-heads>div{min-width:0;flex:1}.hp-game-heads button{white-space:normal;text-align:left}}

/* ==== Round 4, 21 Sep ================================================ */
/* ---- The switcher: a product feature, so it leads the block -------- */
.hp-kinds{margin:0 0 28px}
.hp-kinds h2{font:300 clamp(36px,3.6vw,54px)/1.06 var(--font-display);letter-spacing:-.03em;margin:0 0 10px}
.hp-kinds p{font:19px/1.5 var(--font-sans);color:var(--muted);margin:0}
.hp-switch{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper-2)}
.hp-switch button{display:flex;align-items:center;gap:20px;text-align:left;border:0;border-top:5px solid transparent;border-bottom:1px solid var(--rule);background:var(--paper-2);color:var(--ink);padding:22px 32px 24px;cursor:pointer;font-family:var(--font-sans);min-width:0}
.hp-switch button+button{border-left:1px solid var(--rule)}
.hp-switch button:hover{background:#e6e1d4}
.hp-switch strong{display:block;font:600 24px/1.2 var(--font-sans);letter-spacing:-.02em}
.hp-switch small{display:block;font:16px/1.4 var(--font-sans);color:var(--muted);margin-top:4px}
.hp-switch-art{display:flex;gap:4px;flex:none}
.hp-switch-art img{width:96px;height:45px;object-fit:cover;border-radius:2px;display:block;filter:saturate(.35) brightness(.95);transition:filter .2s}
.hp-switch button:hover .hp-switch-art img{filter:none}
.hp-switch button[aria-selected=true]{background:var(--night);color:var(--bone);border-top-color:var(--gold);border-bottom-color:var(--night);cursor:default}
.hp-switch button[aria-selected=true]+button,.hp-switch button+button[aria-selected=true]{border-left-color:transparent}
.hp-switch button[aria-selected=true] small{color:var(--bone-soft)}
.hp-switch button[aria-selected=true] .hp-switch-art img{filter:none}
.hp-switch button[aria-selected=false] strong::after{content:' →';color:var(--gold-text);font-weight:500}
.hp-atlas .hp-cover{padding-top:36px}
@media(max-width:1000px){.hp-switch-art img{width:72px;height:34px}.hp-switch strong{font-size:20px}.hp-switch small{font-size:14px}.hp-switch button{padding:18px 20px 20px;gap:14px}}
@media(max-width:700px){.hp-kinds p{font-size:16px}.hp-switch button{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px 16px}.hp-switch strong{font-size:17px}.hp-switch small{display:none}.hp-switch-art img{width:60px;height:28px}}

/* ---- The signup dialog: the hero's navy and gold ------------------- */
#newsletter{background:var(--night);color:var(--bone);border:1px solid rgba(236,237,240,.2);border-top:4px solid var(--gold);padding:44px 44px 36px;max-width:620px}
#newsletter .close{color:var(--bone-mute)}#newsletter .close:hover{color:var(--bone)}
#newsletter .signup-label{display:flex;align-items:center;gap:12px;color:var(--gold-soft);font:600 15px var(--font-sans);margin:0 0 16px}
#newsletter .signup-label::before{content:'';width:28px;height:2px;background:var(--gold)}
#newsletter h2{font:300 44px/1.05 var(--font-display);letter-spacing:-.03em;color:var(--bone);margin:0 0 16px}
#newsletter p{color:var(--bone-soft);font-size:17px;line-height:1.55}
#newsletter label{color:var(--bone);font:600 15px var(--font-sans)}
#newsletter .input-row{gap:0;border:1.5px solid var(--bone);border-radius:2px;background:rgba(11,15,26,.78)}
#newsletter .input-row input{background:transparent;border:0;color:var(--bone);font-size:16px;min-height:54px}
#newsletter .input-row input::placeholder{color:var(--bone-mute)}
#newsletter .input-row input:focus{outline:2px solid var(--gold);outline-offset:-2px;border:0}
#newsletter .button.blue{background:var(--gold);border-color:var(--gold);color:var(--night);font-size:16px;min-height:54px;border-radius:0}
#newsletter .button.blue:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
#newsletter .form-note,#newsletter #newsletter-status{color:var(--bone-mute);font-size:13px}
@media(max-width:600px){#newsletter{padding:34px 20px 26px}#newsletter h2{font-size:34px}}

/* ---- About: the builder -------------------------------------------- */
.hp-builder{display:flex;gap:22px;align-items:flex-start;margin-top:34px;padding-top:30px;border-top:1px solid var(--rule);max-width:700px}
.hp-builder-mark{flex:none;border:0!important;padding:0!important;display:block}
.hp-builder-mark svg{width:96px;height:96px;display:block;border-radius:3px}
.hp-builder strong{display:block;font:600 19px var(--font-sans);color:var(--ink);margin-bottom:6px}
.hp-about-body .hp-builder p{font-size:16px;line-height:1.6;margin:0 0 10px;color:var(--muted)}
.hp-builder div>a{font-size:16px}
@media(max-width:550px){.hp-builder-mark svg{width:72px;height:72px}.hp-builder{gap:16px}}

/* ---- Home: get your game's atlas = steps and one big action -------- */
.hp-find{align-items:center;gap:80px}
.hp-find-cta{margin-top:28px;min-height:60px;padding:0 30px;font-size:17px;background:var(--gold);border-color:var(--gold);color:var(--night)}
.hp-find-cta:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
.hp-steps{list-style:none;counter-reset:hpstep;margin:0;padding:0;display:grid;gap:0}
.hp-steps li{counter-increment:hpstep;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;padding:26px 0;border-top:1px solid var(--rule)}
.hp-steps li:last-child{border-bottom:1px solid var(--rule)}
.hp-steps li::before{content:counter(hpstep);grid-row:1 / span 2;font:300 54px/1 var(--font-display);color:var(--gold-text)}
.hp-steps strong{font:600 22px/1.2 var(--font-sans);color:var(--ink);letter-spacing:-.01em}
.hp-steps span{font:17px/1.55 var(--font-sans);color:var(--muted);margin-top:6px}
@media(max-width:850px){.hp-find{gap:36px}.hp-steps li{grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:20px 0}.hp-steps li::before{font-size:40px}.hp-steps strong{font-size:19px}.hp-steps span{font-size:15px}}

/* ---- Quote: languages as a donut (Cynder's DonutChart, recoloured) -- */
.q-lang-grid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:28px;align-items:start;margin-top:18px}
.q-lang-grid .q-table{margin-top:0}
.q-donut{position:sticky;top:20px}
.q-donut svg{display:block;width:100%;height:auto;overflow:visible}
.q-donut-seg{cursor:pointer;transition:transform .18s cubic-bezier(.22,.61,.36,1),opacity .18s ease}
.q-donut-band{stroke-opacity:.3;transition:stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1),stroke-opacity .18s ease}
.q-donut-ring{stroke-width:1.6;opacity:0;transition:opacity .3s ease}
.q-donut.is-on .q-donut-band{stroke-dashoffset:0!important}
.q-donut.is-on .q-donut-ring{opacity:1}
.q-donut.is-focus .q-donut-seg{opacity:.35}
.q-donut.is-focus .q-donut-seg.is-hot{opacity:1;transform:translate(var(--dx),var(--dy))}
.q-donut-seg.is-hot .q-donut-band{stroke-opacity:.75}
.q-donut-seg.is-hot .q-donut-ring{stroke-width:2.4}
.q-donut-readout{pointer-events:none}
.q-donut-value{font:500 30px var(--font-display);letter-spacing:-.03em;fill:var(--ink);transition:fill .18s ease}
.q-donut-label{font:500 13px var(--font-sans);fill:var(--muted)}
@media(max-width:900px){.q-lang-grid{grid-template-columns:1fr}.q-donut{position:static;max-width:238px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.q-donut-band,.q-donut-seg,.q-donut-ring{transition:none}}

/* ---- Quote: the box is about the price ------------------------------ */
.quote-summary .eyebrow{font:600 15px var(--font-sans);color:var(--gold-text);letter-spacing:0;text-transform:none}
.q-from{display:flex;align-items:baseline;gap:12px;margin:8px 0 12px}
.q-from span,.q-from small{font:500 18px var(--font-sans);color:var(--muted)}
.q-from strong{font:300 54px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.quote-summary .q-empty{font-size:17px;line-height:1.5;color:var(--ink-soft);margin:0 0 8px}
.quote-summary .price{font:300 84px/1 var(--font-display);letter-spacing:-.04em;color:var(--ink);margin:8px 0 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quote-summary .price small{font:600 13px var(--font-sans);letter-spacing:0;text-transform:none;color:var(--gold-text);border:1px solid currentColor;border-radius:999px;padding:4px 10px}
.q-formula-title{font:600 14px var(--font-sans);color:var(--muted);margin:26px 0 6px}
.q-formula>span{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font:15px/1.4 var(--font-sans);color:var(--muted);padding:9px 0;border-top:1px solid var(--rule-soft)}
.q-formula>span:first-child{border-top:0}
.q-formula>span b{font:500 15px var(--font-mono);color:var(--ink);white-space:nowrap}
.q-formula>span.base{font-size:18px;font-weight:600;color:var(--ink)}
.q-formula>span.base b{font-size:20px}
.q-formula>span.base strong{font-weight:600}
.q-formula>span.total{border-top:2px solid var(--ink);margin-top:6px;padding-top:13px;font-size:18px;font-weight:600;color:var(--ink)}
.q-formula>span.total b{font-size:22px}
.q-lockbox{background:var(--night);color:var(--bone);border-top:3px solid var(--gold);border-radius:3px;padding:24px;margin:26px 0 8px}
.q-lockbox>strong{display:block;font:600 21px/1.2 var(--font-sans);letter-spacing:-.01em}
.q-lockbox>p{font:15px/1.5 var(--font-sans);color:var(--bone-soft);margin:8px 0 16px}
.q-lockbox label{display:block;font:600 14px var(--font-sans);margin-bottom:7px}
.q-lockbox input{width:100%;height:52px;padding:0 15px;font:16px var(--font-sans);background:rgba(236,237,240,.06);border:1.5px solid rgba(236,237,240,.55);border-radius:2px;color:var(--bone)}
.q-lockbox input::placeholder{color:var(--bone-mute)}
.q-lockbox input:focus{border-color:var(--gold);outline:none}
.q-lockbox .button{width:100%;margin-top:10px;min-height:56px;font-size:16px;background:var(--gold);border-color:var(--gold);color:var(--night)}
.q-lockbox .button:hover:not(:disabled){background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
.q-lockbox .button:disabled{opacity:.55;cursor:default}
.q-lockbox .form-note{font-size:13px;line-height:1.5;color:var(--bone-mute);margin:12px 0 0}
.q-lockbox .q-lock-status:empty{display:none}
.q-lockbox .q-lock-status.is-error{color:#f0a58a}
.quote-summary .quote-total{font-size:15px}

/* ---- Quote: labels in sentence case, readable ----------------------- */
.q-search .search-label,.q-kicker,.q-meta,.q-stat-label,.q-badge,.q-table th,.q-sum-game small,.quote-total,.q-lock,.q-art-index,.q-art .q-art-missing{font-family:var(--font-sans);letter-spacing:0;text-transform:none}
.q-search .search-label{font-size:16px;font-weight:600;color:var(--ink)}
.q-kicker{font-size:15px;font-weight:600}
.q-meta{font-size:14px;gap:8px 18px}
.q-stat-label{font-size:14px;font-weight:600}
.q-badge{font-size:13px;font-weight:600}
.q-table th{font-size:13px}
.q-sum-game small{font-size:13px}
.quote-total{font-size:15px}
.q-art-index{font-size:13px}
.q-stat-sub{font-size:14px}

/* ==== Round 5, 21 Sep ================================================ */
/* ---- One header. Built once in chrome.js, styled once here ---------- */
/* An id, so no page's own header rules (atlas.css, experience.css) can restyle it. */
#site-header{position:relative;inset:auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px!important;padding:0 5%!important;background:var(--night);color:var(--bone);border-bottom:1px solid rgba(212,160,18,.7);box-shadow:0 10px 24px -14px rgba(0,0,0,.7);backdrop-filter:none}
#site-header .wordmark{font-size:34px;font-weight:500;letter-spacing:-.035em;gap:12px;color:var(--bone)}
#site-header .brand-icon{font-size:34px;color:var(--gold)}
#site-header nav{font:500 16px var(--font-sans);letter-spacing:0;text-transform:none;gap:28px}
#site-header nav a:not(.nav-cta),#site-header nav button{color:var(--bone-mute)}
#site-header nav a:not(.nav-cta):hover,#site-header nav button:hover{color:var(--bone)}
#site-header nav a[aria-current]:not(.nav-cta){color:var(--bone);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:9px}
#site-header .nav-cta{min-height:46px;padding:0 20px;gap:12px;font:600 15px/1 var(--font-sans);background:transparent;border:1px solid rgba(236,237,240,.5);color:var(--bone)}
#site-header .nav-cta:hover,#site-header .nav-cta[aria-current]{background:var(--bone);border-color:var(--bone);color:var(--night)}
@media(max-width:1100px){#site-header nav{gap:20px;font-size:15px}#site-header .nav-cta{padding:0 16px}}
@media(max-width:700px){#site-header{min-height:72px!important}#site-header .wordmark,#site-header .brand-icon{font-size:26px}#site-header .wordmark{gap:8px}#site-header nav a:not(.nav-cta),#site-header nav button{display:none}#site-header .nav-cta{font-size:14px;min-height:42px;padding:0 14px}}
/* the header now sits above the hero instead of floating over it */
.steam-eyebrow{top:52px}
.steam-copy{top:100px}
.steam-sticky{min-height:760px}
@media(max-width:700px){.steam-eyebrow{top:34px}.steam-copy{top:78px}.steam-opening{height:1210px;min-height:1210px}.steam-sticky{height:1010px;min-height:1010px}}

/* ---- The switcher: dark bar, gold selected tab, nothing moves ------- */
.hp-switch{background:var(--night);padding:10px 10px 0;gap:8px;border-radius:6px 6px 0 0}
.hp-switch button,.hp-switch button+button{border:1px solid rgba(236,237,240,.22);border-bottom:0;border-radius:6px 6px 0 0;background:#1b2437;color:var(--bone);padding:20px 26px 22px;display:grid;grid-template-columns:200px minmax(0,1fr) 92px;align-items:center;gap:20px}
.hp-switch button:hover{background:#25304a}
.hp-switch small{color:var(--bone-soft)}
.hp-switch-art{width:200px;justify-content:flex-start}
.hp-switch-art img,.hp-switch button:hover .hp-switch-art img{filter:none;transition:none}
.hp-switch button[aria-selected=false] strong::after{content:none}
.hp-switch button::after{content:'Show';justify-self:end;width:92px;text-align:center;font:600 14px var(--font-sans);padding:8px 0;border-radius:999px;border:1px solid rgba(236,237,240,.4);color:var(--bone)}
.hp-switch button[aria-selected=true],.hp-switch button[aria-selected=true]:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}
.hp-switch button[aria-selected=true] small{color:#3a2c05}
.hp-switch button[aria-selected=true]::after{content:'Showing';border-color:rgba(11,15,26,.45);color:var(--night)}
/* both covers keep the same height and art area, so switching doesn't shift the page */
.hp-atlas .hp-cover{min-height:470px;border-top:4px solid var(--gold)}
.hp-cover-single .hp-cover-art{max-width:none}
.hp-cover-single .hp-cover-art figure{flex:0 1 72%}
@media(max-width:1000px){.hp-switch button,.hp-switch button+button{grid-template-columns:150px minmax(0,1fr);padding:16px 18px 18px;gap:14px}.hp-switch-art{width:150px}.hp-switch button::after{display:none}.hp-atlas .hp-cover{min-height:0}}
@media(max-width:700px){.hp-switch{padding:8px 8px 0;gap:6px}.hp-switch button,.hp-switch button+button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 12px 14px}.hp-switch-art{width:auto}}

/* ---- The signup dialog: the hero in miniature ----------------------- */
#newsletter{overflow:hidden;max-width:820px;width:min(820px,calc(100vw - 32px));padding:0;border-top:0}
#newsletter .signup-content{position:relative;z-index:2;padding:52px 48px 44px;max-width:520px}
#newsletter .close{z-index:3}
.signup-wall{position:absolute;top:-30%;left:44%;width:72%;height:170%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transform:rotate(-10deg);transform-origin:50% 40%;z-index:0}
.signup-col>div{display:flex;flex-direction:column;gap:12px;animation:signup-drift 70s linear infinite}
.signup-col-1>div{animation-direction:reverse;animation-duration:90s}
.signup-col-2>div{animation-duration:80s}
.signup-col{transform:translateY(var(--o,0))}.signup-col-0{--o:-40px}.signup-col-1{--o:-110px}.signup-col-2{--o:-10px}
.signup-wall img{width:100%;height:auto;display:block;border-radius:2px;border:1px solid var(--rule-night);filter:saturate(.75) brightness(.8);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.signup-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0b0f1a 0%,#0b0f1af5 40%,#0b0f1ab8 58%,#0b0f1a40 80%,#0b0f1a1a 100%),linear-gradient(0deg,#0b0f1acc 0%,transparent 25%,transparent 80%,#0b0f1a80 100%)}
/* hairline frame with gold corner ticks, as on the hero */
#newsletter::after{content:'';position:absolute;inset:14px;z-index:1;pointer-events:none;border:1px solid var(--rule-night);background-image:linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold));background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat}
@keyframes signup-drift{from{transform:translateY(0)}to{transform:translateY(calc(-100% / 3 - 4px))}}
@media(max-width:700px){#newsletter .signup-content{padding:150px 22px 28px;max-width:none}.signup-wall{top:-60px;left:-10%;width:120%;height:260px}.signup-shade{background:linear-gradient(180deg,#0b0f1a40 0,#0b0f1a99 110px,#0b0f1a 170px)}}
@media(prefers-reduced-motion:reduce){.signup-col>div{animation:none}}
@media(min-width:701px){.steam-sticky{height:calc(100vh - 93px);min-height:850px}}

/* ---- Quote: a short head, so the lookup is on screen when you land -- */
.quote-page .page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:end;padding:36px 7% 30px}
.quote-page .page-head h1{font:300 clamp(34px,3.4vw,50px)/1.06 var(--font-display);letter-spacing:-.03em;margin:0 0 12px;max-width:none}
.quote-page .page-head p{font-size:17px;line-height:1.5;margin:0;max-width:520px}
.quote-page .q-steps{margin:0;gap:22px;max-width:none}
.quote-page .q-steps li{padding-top:10px}
.quote-page .q-steps li::before{display:inline;margin:0 8px 0 0}
.quote-page .q-steps strong{display:inline;font-size:17px}
.quote-page .q-steps span{font-size:14px;margin-top:4px}
.quote-page .quote-layout{padding-top:32px}
@media(max-width:1000px){.quote-page .page-head{grid-template-columns:1fr;gap:22px;align-items:start}}
@media(max-width:700px){.quote-page .page-head{padding:26px 6% 22px}.quote-page .q-steps{display:none}}

/* the folded state of the atlas-page signup: a small tab that brings it back */
.weekly-tab{position:fixed;right:24px;bottom:24px;z-index:39;display:flex;align-items:center;gap:10px;background:var(--night);color:var(--bone);border:1px solid rgba(236,237,240,.25);border-left:3px solid var(--gold);border-radius:3px;font:600 15px var(--font-sans);padding:13px 18px;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.35);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.weekly-tab span{color:var(--gold);font-size:18px;line-height:1}
.weekly-tab.is-open{transform:none;opacity:1;pointer-events:auto}
.weekly-tab:hover{background:#1b2437}
@media(max-width:700px){.weekly-tab{right:12px;bottom:12px;font-size:14px;padding:11px 14px}}
@media(prefers-reduced-motion:reduce){.weekly-tab{transition:none}}
/* phones: the wordmark and the one button have to share 390px */
@media(max-width:700px){#site-header{padding:0 4%!important;gap:12px}#site-header .wordmark,#site-header .brand-icon{font-size:22px}#site-header .wordmark{gap:6px}#site-header .nav-cta{font-size:13px;padding:0 12px;gap:0;min-height:40px}#site-header .nav-cta span{display:none}}

/* figures on a cover are evidence too: they open the reviews behind them */
.cover-figure{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted;text-decoration-color:rgba(236,237,240,.5);text-underline-offset:5px}
.cover-figure:hover{text-decoration-style:solid;text-decoration-color:var(--gold)}
.hp-edition-copy .cover-figure{text-decoration-color:var(--rule)}

/* ==== Round 6, 21 Sep: the capture forms are wired (TASK-15) ========= */
/* The honeypot. Off-screen rather than display:none, so a form-filling script still sees it and
   a person never does. Keyboard and screen reader skip it. */
.ra-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* What you get and how to stop getting it, under every form that takes an address. */
.signup-consent{font:13px/1.5 var(--font-sans);color:var(--muted);margin:10px 0 0}
.hero-signup .signup-consent,.weekly-prompt .signup-consent,#newsletter .signup-consent,.q-lockbox .signup-consent{color:var(--bone-mute)}
.q-lockbox .signup-consent{margin:9px 0 0}
.q-email .signup-consent{margin:6px 0 0}
/* The result line. Long enough to say what happened, so it wraps instead of running off the hero. */
[data-signup-status]:empty,#q-email-status:empty{display:none}
[data-signup-status].is-error,#q-email-status.is-error{color:#b3472a}
/* In the hero the two notes hang below the form instead of growing it. .steam-actions bottom-aligns
   the gold button with the input, so anything added to the form's flow height pushes the button
   down level with the small print instead. Out of flow, the button and the input line up again.
   The override is because .hero-signup>div is the input row's frame and would box these in. */
.hero-signup{position:relative}
.hero-signup .hero-signup-notes{position:absolute;top:100%;left:0;margin-top:9px;width:max-content;max-width:min(470px,42vw);display:grid;gap:5px;height:auto;border:0;background:none;backdrop-filter:none;border-radius:0}
.hero-signup .hero-signup-notes p{margin:0;font-size:13px;line-height:1.45;white-space:normal;position:static}
/* Phones stack the hero actions anyway, so there is nothing to line up with and no reason to float. */
@media(max-width:700px){.hero-signup .hero-signup-notes{position:static;width:auto;max-width:none;margin-top:8px}}
/* on the dark surfaces the same message needs the light red, or it is unreadable */
.hero-signup [data-signup-status].is-error,.weekly-prompt [data-signup-status].is-error,.hp-signup-form [data-signup-status].is-error,#newsletter-status.is-error{color:#f0a58a}

/* ==== Round 7, 22 Sep: sticky header, hero action list, find-your-game search ============= */

/* ---- The header stays on screen on every page ----------------------------------------------- */
:root{--header-h:92px}
@media(max-width:700px){:root{--header-h:72px}}
#site-header{position:sticky;top:0}

/* ---- Hero layout. The copy and the atlas banner used to be absolutely positioned inside a
   fixed-height stage, so anything that made the copy taller (the action list, the search, its
   confirmation card) ran into the banner. Now they sit in the page's flow: the stage is at least
   a screen tall, the banner sits at its foot, and a taller copy just pushes the banner down.
   On desktop the stage still pins while the art wall drifts -- under the header now, not
   behind it. On phones it doesn't pin at all. -------------------------------------------------- */
.steam-sticky{display:flex;flex-direction:column;gap:36px;height:auto;padding:100px 7% 0}
.steam-copy,.steam-bottom{position:relative;left:auto;right:auto;top:auto;bottom:auto}
/* above the banner, so a search dropdown that reaches it is drawn (and clicked) on top */
.steam-copy{z-index:4}
.steam-bottom{margin-top:auto;padding:22px 0 30px}
@media(min-width:701px){.steam-sticky{top:var(--header-h);min-height:calc(100vh - var(--header-h))}}
@media(max-width:700px){
 .steam-opening{height:auto;min-height:0}
 .steam-opening:after{content:none}
 .steam-sticky{position:relative;top:auto;min-height:0;padding:78px 6% 0;gap:30px}
 .steam-bottom{padding:20px 0 24px}
}

/* ---- Hero copy: headline, a real second headline, then three things you get ------------------ */
/* .steam-copy>p (the old paragraph's rule, 16-18px muted) outranks a bare class, so this needs
   the same shape to win. Gold, the page's accent (eyebrow, frame, bullet dots), so the headline,
   this line and the points aren't three layers of the same white */
.steam-copy>.steam-subhead{font:500 clamp(22px,2.2vw,28px)/1.3 var(--font-sans);letter-spacing:-.015em;color:var(--gold-soft);margin:0 0 22px;max-width:none;text-wrap:balance}
.steam-points{list-style:none;margin:0 0 30px 18px;padding:0;display:grid;gap:10px;max-width:620px}
.steam-points li{position:relative;padding-left:22px;font:16px/1.5 var(--font-sans);color:var(--bone-soft)}
.steam-points li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.steam-points strong{color:var(--bone);font-weight:600}
@media(max-width:700px){.steam-copy>.steam-subhead{margin-bottom:18px}.steam-points{margin-left:8px;gap:8px}.steam-points li{font-size:15px}}

/* ---- Hero action: the game search is the one thing to do here. The weekly-atlas signup moved
   to the slide-in (app.js) that the free atlas page already had. ------------------------------ */
.hero-search{width:min(460px,100%)}

/* ---- Find your game: one component (game-search.js), three places ---------------------------
   Structure first, then two skins: light (the homepage section) by default, .search-dark for the
   hero and the nav. Results always float as a dropdown so they never shove the page around; the
   confirmation card sits in the page in the hero and the homepage section, and floats in the nav
   (growing the sticky header to hold it would grow every page's chrome). */
.hp-search{position:relative}
.hp-search>label{display:block;margin:0 0 10px;font:600 16px/1.3 var(--font-sans);letter-spacing:0;color:var(--ink)}
.hp-search-input{display:flex;align-items:center;gap:10px;height:56px;padding-left:16px;overflow:visible;border:1px solid var(--rule);border-radius:2px;background:var(--panel);box-shadow:none}
.hp-search-input[hidden]{display:none!important}
.search-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--muted)}
.hp-search-input input{flex:1;min-width:0;height:100%;padding:0 4px;border:0;background:transparent;color:var(--ink);font:16px var(--font-sans);outline-offset:-3px}
.hp-search-input input::placeholder{color:var(--muted)}
/* the browser's own blue clear-x is off-palette; Escape and "Search again" do that job */
.hp-search-input input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.hp-search-input button{align-self:stretch;margin:-1px -1px -1px 0;padding:0 24px;border:0;border-radius:0 2px 2px 0;background:var(--ink);color:var(--paper);font:600 15px var(--font-sans);cursor:pointer;white-space:nowrap}
.hp-search-input button:hover{background:var(--ink-soft)}
.hp-search [data-search-status]{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.hp-search [data-search-status]:empty{display:none}
.hp-find .hp-search{margin-top:28px;padding-top:0}
/* results */
[data-search-results].is-dropdown{position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:6px;max-height:360px;overflow-y:auto;padding:6px;border-radius:2px;background:var(--panel);border:1px solid var(--rule);box-shadow:0 24px 56px -24px rgba(11,15,26,.35)}
.hp-search-result{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:8px 10px;border:0;border-radius:2px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .12s}
.hp-search-result:hover,.hp-search-result.is-active{background:var(--paper-2)}
.hp-search-result img,.hp-search-result>i{width:60px;height:28px;flex:none;object-fit:cover;border-radius:2px;background:var(--night-2)}
.hp-search-result span{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-search-result small{display:inline;flex:none;margin:0;font:500 11px var(--font-mono);letter-spacing:.04em;color:var(--muted)}
/* the confirmation card: art + name (which game), review count beside Steam's own score, one action */
.hp-volume{margin:10px 0 0;padding:18px 20px;border:1px solid var(--rule);border-top:3px solid var(--gold);border-radius:2px;background:var(--panel)}
.hp-volume-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.hp-volume-head img{width:72px;height:34px;flex:none;object-fit:cover;border-radius:2px}
.hp-volume-head strong{font:600 17px/1.25 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.hp-volume-stats{display:flex;gap:32px;margin:0 0 14px}
.hp-volume-stats div{display:flex;flex-direction:column;gap:4px}
.hp-volume-stats b{font:400 28px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.hp-volume-stats span{font-size:13px;color:var(--muted)}
.hp-volume-stats [data-tone=positive] b{color:var(--praise-text)}
.hp-volume-stats [data-tone=mixed] b{color:var(--meta-text)}
.hp-volume-stats [data-tone=negative] b{color:var(--complaint)}
.hp-volume>p{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--muted)}
.hp-volume .button{display:flex;width:100%;min-height:50px;margin:0;padding:0 20px;font-size:15px;background:var(--gold);border-color:var(--gold);color:var(--night)}
.hp-volume .button:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
.hp-volume small{display:block;margin:10px 0 0;font-size:12px;color:var(--muted)}
.hp-volume small button{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- Dark skin: the hero and the nav. Rows match the hero's signup row; floating panels are
   solid night so nothing behind them shows through ------------------------------------------- */
.search-dark .hp-search-input{border:1.5px solid var(--bone);background:rgba(11,15,26,.78);backdrop-filter:blur(6px)}
.search-dark .search-icon{color:var(--bone-mute)}
.search-dark .hp-search-input input{color:var(--bone)}
.search-dark .hp-search-input input::placeholder{color:var(--bone-soft)}
.search-dark .hp-search-input button{margin:0;border-radius:0;background:var(--bone);color:var(--night);font-size:16px}
.search-dark .hp-search-input button:hover{background:#fff}
.search-dark [data-search-status]:not(:empty){position:absolute;top:100%;left:0;right:0;z-index:20;margin:6px 0 0;padding:12px 14px;border:1px solid rgba(236,237,240,.18);border-radius:2px;background:var(--night-2);box-shadow:0 28px 60px -20px rgba(0,0,0,.7);color:var(--bone-soft)}
.search-dark [data-search-results].is-dropdown{background:var(--night-2);border-color:rgba(236,237,240,.18);box-shadow:0 28px 60px -20px rgba(0,0,0,.7)}
.search-dark .hp-search-result{color:var(--bone)}
.search-dark .hp-search-result:hover,.search-dark .hp-search-result.is-active{background:rgba(236,237,240,.08)}
.search-dark .hp-search-result small{color:var(--bone-mute)}
.search-dark .hp-volume{background:var(--night-2);border-color:rgba(236,237,240,.18);border-top-color:var(--gold)}
.search-dark .hp-volume-head strong,.search-dark .hp-volume-stats b{color:var(--bone)}
.search-dark .hp-volume-stats span,.search-dark .hp-volume>p,.search-dark .hp-volume small{color:var(--bone-mute)}
.search-dark .hp-volume-stats [data-tone=positive] b{color:var(--praise)}
.search-dark .hp-volume-stats [data-tone=mixed] b{color:var(--meta)}
.search-dark .hp-volume-stats [data-tone=negative] b{color:var(--complaint)}
.search-dark>label{color:var(--bone)}
.hero-search>label{font:600 18px/1.3 var(--font-sans);letter-spacing:-.01em}
/* in the hero the card takes the field's place, directly under its label */
.hero-search .hp-volume{margin-top:0}

/* ---- The nav's copy: a compact field in the header row; results and the card float below ---- */
/* a width, not a flex-basis: the header sizes the nav from its items' intrinsic widths, and an
   input's is much narrower than 250px, which squeezed the nav links into wrapping */
.nav-search{flex:none;width:250px;min-width:0;margin:0;padding:0;font-weight:400}
#site-header nav>a,#site-header nav>button{white-space:nowrap}
.nav-search .hp-search-input{height:44px;padding-left:14px;gap:8px;border:1px solid rgba(236,237,240,.4);background:rgba(236,237,240,.05);backdrop-filter:none}
.nav-search .hp-search-input:hover{border-color:rgba(236,237,240,.7)}
.nav-search .hp-search-input:focus-within{border-color:var(--bone)}
.nav-search .search-icon{width:16px;height:16px}
.nav-search .hp-search-input input{padding:0 8px 0 0;font-size:15px}
.nav-search [data-search-status]:not(:empty),.nav-search [data-search-results]:not(:empty){position:absolute;top:100%;left:auto;right:0;z-index:20;width:360px;margin-top:10px}
.nav-search .hp-volume{margin:0;box-shadow:0 28px 60px -20px rgba(0,0,0,.7)}
/* the header's own nav rules (#site-header nav a / nav button: muted colour, hidden on phones)
   are aimed at the nav links; keep them off the search's rows, card button and links */
#site-header nav .nav-search .hp-search-result{display:flex;color:var(--bone)}
#site-header nav .nav-search .hp-volume .button,#site-header nav .nav-search .hp-volume .button:hover{display:flex;color:var(--night)}
#site-header nav .nav-search [data-search-again]{display:inline;color:inherit}
@media(max-width:1100px){.nav-search{width:190px}}
@media(max-width:700px){
 .nav-search{width:172px}
 .nav-search .hp-search-input{padding-left:12px;gap:7px}
 .nav-search .hp-search-input input{font-size:16px}
 .search-dark .hp-search-input button{padding:0 18px}
 .nav-search [data-search-status]:not(:empty),.nav-search [data-search-results]:not(:empty){width:calc(100vw - 32px)}
}

/* ---- The atlas banner at the hero's foot: the one way back to this week's atlas --------------- */
.steam-current{gap:22px}
.steam-current-art img{width:156px;height:72px}
.steam-current-copy>span{font-size:16px}
.steam-current-copy>strong{font-size:28px;text-wrap:balance}
.steam-current-copy>small{font-size:15px}
@media(max-width:700px){.steam-current-art img{width:104px;height:48px}.steam-current-copy>strong{font-size:20px}.steam-current-copy>span{font-size:13px}}

/* ==== Round 8, 22 Sep: search clear, the banner label, the quote page's buy/lock and language scores */

/* ---- The ✕ that empties a search field (shown only while it has text) ---------------------- */
.hp-search .hp-search-input .search-clear{flex:none;align-self:center;display:grid;place-items:center;width:30px;height:30px;margin:0 6px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.hp-search .hp-search-input .search-clear:hover{background:var(--paper-2);color:var(--ink)}
.hp-search .hp-search-input .search-clear[hidden]{display:none}
.search-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-dark .hp-search-input .search-clear{color:var(--bone-mute)}
.search-dark .hp-search-input .search-clear:hover{background:rgba(236,237,240,.1);color:var(--bone)}
/* the header's nav-button rules (muted, hidden on phones) must not reach it either */
#site-header nav .nav-search .search-clear{display:grid;color:var(--bone-mute)}
#site-header nav .nav-search .search-clear:hover{color:var(--bone)}
#site-header nav .nav-search .search-clear[hidden]{display:none}

/* ---- This week's free atlas: the label reads as a heading, with the eyebrow's gold rule ----- */
.steam-current-copy>span{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:700 20px/1.2 var(--font-sans);letter-spacing:-.005em;color:var(--gold-soft)}
.steam-current-copy>span::before{content:'';flex:none;width:28px;height:2px;background:var(--gold)}
@media(max-width:700px){.steam-current-copy>span{font-size:16px;gap:10px}.steam-current-copy>span::before{width:20px}}

/* ---- Quote page: the summary pins below the header, and only when it all fits (quote.js) ---- */
.quote-summary{position:static}
@media(min-width:751px){.quote-summary.is-sticky{position:sticky;top:calc(var(--header-h) + 24px)}}
.q-donut{top:calc(var(--header-h) + 20px)}

/* ---- Buy is the main action; locking the price is the quieter alternative under it ---------- */
.q-buy{margin-top:22px;gap:10px}
.q-buy .button{min-height:56px;font-size:17px;background:var(--gold);border-color:var(--gold);color:var(--night)}
.q-buy .button:disabled{opacity:.7;cursor:not-allowed}
.q-buy .form-note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.q-buy .signup-consent{margin:0}
.q-buy .q-delivery{margin:0;font:600 14px/1.4 var(--font-sans);color:var(--ink)}
.q-buy .q-buy-status.is-error{color:#b3472a}
/* Rush delivery: a tick box above Buy now, shown only while rush is switched on (Travis, 23 Sep) */
.q-buy .q-rush{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--rule);border-radius:2px;background:var(--panel);cursor:pointer}
.q-buy .q-rush:hover{border-color:var(--ink)}
.q-buy .q-rush:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.q-buy .q-rush.is-on{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.q-buy .q-rush input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--night);cursor:pointer}
.q-rush-text{display:flex;flex-direction:column;gap:3px}
.q-rush-text strong{font:600 15px/1.3 var(--font-sans);color:var(--ink)}
.q-rush-text span{font:13px/1.45 var(--font-sans);color:var(--muted)}
.q-rush-fee{font:600 15px/1.3 var(--font-sans);color:var(--ink);white-space:nowrap}
.q-buy .q-rush-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:2px 0 0;font:15px var(--font-sans);color:var(--ink)}
.q-buy .q-rush-total b{font:600 20px var(--font-sans)}
/* The price is before tax (22 Sep): one quiet line straight under every price */
.quote-summary .q-vat{margin:-4px 0 14px;font:13px/1.4 var(--font-sans);color:var(--muted)}
.q-lockbox{margin:26px 0 8px;padding:20px 0 0;border:0;border-top:1px solid var(--rule);border-radius:0;background:none;color:var(--ink)}
.q-lockbox>.q-lock-kicker{margin:0 0 4px;font:600 13px/1.4 var(--font-sans);color:var(--muted)}
.q-lockbox>strong{display:block;font:600 17px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.q-lockbox>p{margin:6px 0 14px;font:14px/1.5 var(--font-sans);color:var(--muted)}
.q-lockbox label{display:block;margin:0 0 6px;font:600 13px var(--font-sans);color:var(--ink)}
.q-lock-row{display:flex;gap:8px}
.q-lockbox input{flex:1;width:auto;min-width:0;height:46px;padding:0 12px;border:1px solid var(--rule);border-radius:2px;background:var(--panel);color:var(--ink);font:15px var(--font-sans)}
.q-lockbox input::placeholder{color:var(--muted)}
.q-lockbox input:focus{border-color:var(--ink);outline:none}
.q-lockbox .button{flex:none;width:auto;min-height:46px;margin:0;padding:0 18px;font-size:15px;background:transparent;border:1px solid var(--ink);color:var(--ink)}
.q-lockbox .button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.q-lockbox .signup-consent{margin:8px 0 0;color:var(--muted)}
.q-lockbox .form-note{margin:8px 0 0;color:var(--muted)}
.q-lockbox .q-lock-status.is-error{color:#b3472a}
@media(max-width:420px){.q-lock-row{flex-direction:column}.q-lockbox .button{width:100%}}

/* ---- Reviews by language: each language's Steam score against the game's overall one -------
   Bigger, Steam-coloured scores; a marker on every bar at the overall score; the difference in
   points. Languages Steam doesn't rate (under 10 reviews) are muted and get no difference. */
.q-lang-grid{grid-template-columns:190px minmax(0,1fr);gap:24px}
.q-table th.score-h,.q-table td.score{padding-left:16px}
.q-table td.score{width:124px}
.q-table th.delta-h,.q-table td.delta{width:64px;padding-left:10px;text-align:right}
.q-score-mini{gap:10px}
.q-score-mini i{flex:0 0 60px;height:5px;border-radius:3px;background:var(--rule-soft);position:relative}
.q-score-mini i::after{border-radius:3px}
.q-score-mini i[data-o]::before{content:'';position:absolute;z-index:1;left:var(--o);top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink)}
.q-score-mini b{min-width:42px;font:600 16px var(--font-sans);font-variant-numeric:tabular-nums}
.q-score-mini[data-tone=positive] b{color:var(--praise-text)}
.q-score-mini[data-tone=mixed] b{color:var(--meta-text)}
.q-score-mini[data-tone=negative] b{color:var(--complaint)}
.q-score-mini.is-thin b{color:var(--muted);font-weight:500}
.q-score-mini.is-thin i::after{opacity:.4}
.q-score-desc{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--muted)}
.q-table td.delta{font:600 16px var(--font-sans);font-variant-numeric:tabular-nums}
.q-table td.delta[data-dir=up]{color:var(--praise-text)}
.q-table td.delta[data-dir=down]{color:var(--complaint)}
.q-table td.delta[data-dir=flat]{color:var(--muted)}
@media(max-width:900px){.q-lang-grid{grid-template-columns:1fr}}
/* phones: the difference is the point, so the share column (the donut shows it) and the bars go */
@media(max-width:520px){.q-table th:nth-child(4),.q-table td.pct{display:none}.q-score-mini i{display:none}.q-table td.score{width:auto;padding-left:12px}.q-table th.delta-h,.q-table td.delta{width:52px}.q-score-desc{font-size:11px}}

/* ---- The price is one number and what it buys (decided 22 Sep): no rate lines under it --- */
.quote-summary .price{margin-bottom:10px}
.quote-summary .q-scope{margin:0;font:500 17px/1.45 var(--font-sans);color:var(--ink);text-wrap:pretty}

/* ---- Terms and privacy: plain reading pages ---------------------------------------------- */
.legal{max-width:760px;padding:40px 7% 100px;font:17px/1.65 var(--font-sans);color:var(--ink)}
.legal h2{font:600 21px/1.3 var(--font-sans);letter-spacing:-.01em;margin:38px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{margin:0 0 12px;color:var(--ink)}
.legal ul{padding-left:22px;margin:0 0 12px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .legal-see{margin-top:40px;padding-top:18px;border-top:1px solid var(--rule);color:var(--muted)}
.q-buy .signup-consent a{text-decoration:underline;text-underline-offset:2px}
.page-head-copy a[href^="mailto:"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- A review card: its details in words at a readable size, and its own page on Steam ------ */
.review .meta{font:14px/1.6 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.review-game{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);vertical-align:middle}
.review-game img{width:64px;height:30px;object-fit:cover;border-radius:2px;border:1px solid var(--rule)}
.review-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap}
.review-tags span{font-size:13px}
.review-source{flex:none;font:500 14px var(--font-sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(212,160,18,.8);text-underline-offset:4px}
.review-source:hover{text-decoration-color:var(--gold);text-decoration-thickness:2px}

/* The review's facts as labelled chips: the month it was written first, and set apart. */
.review-facts{display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 0 14px}
.review-fact{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 9px;border:1px solid var(--rule);border-radius:999px;background:var(--paper-2);font:500 13px/1.2 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.review-fact svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.review-fact.fact-date{background:var(--night);border-color:var(--night);color:var(--bone);font-weight:600}

/* A long review: its first lines fade out, and one button under the text opens and closes it. */
.review-text p{margin:0}
.review-text.is-clamped p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.review-text.is-clamped{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.review-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:12px 0 16px;padding:0 14px 0 17px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 14px var(--font-sans);cursor:pointer}
.review-toggle:hover{background:var(--ink);color:var(--paper)}
.review-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.review-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.atlas-page .review{scroll-margin-top:calc(var(--site-header-h,0px) + 80px)}
@media(prefers-reduced-motion:reduce){.review-toggle svg{transition:none}}

/* Where an atlas's reviews are read and it has no translations: said once, plainly. */
.translation-note{display:flex;align-items:flex-start;gap:14px;margin:0 0 22px;padding:16px 18px;color:var(--ink);background:#eef3fa;border:1px solid #c9d8ec;border-left:4px solid #2f5fb3;border-radius:6px}
.translation-mark{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2f5fb3;color:#fff;font:600 13px/1 var(--font-sans);letter-spacing:-.02em}
.translation-note strong{display:block;font:600 16px/1.35 var(--font-sans)}
.translation-note p{margin:4px 0 0;font:15px/1.5 var(--font-sans);color:var(--ink-soft)}
.translation-note.is-compact{margin:4px 0 16px;padding:12px 14px}
.translation-note.is-compact strong{font-size:15px}
.translation-note.is-compact p{font-size:14px}

/* The reviewer's verdict, the way Steam shows it: a thumb up on blue or down on rust, in a tinted
   bar with the word beside it. Steam's own praise blue is too light for text on paper, so this is
   the same hue at AA contrast. */
.verdict{display:inline-flex;align-items:center;gap:9px;flex:none;align-self:flex-start;padding-right:12px;border-radius:4px;font:600 14px/1 var(--font-sans);white-space:nowrap}
.verdict-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:4px;color:#fff}
.verdict-icon svg{width:16px;height:16px;fill:currentColor}
.verdict.is-up{color:#1f6aa6;background:#e3eef9}.verdict.is-up .verdict-icon{background:#1f6aa6}
.verdict.is-down{color:#a34c25;background:#f6e6df}.verdict.is-down .verdict-icon{background:#a34c25}
.verdict.is-down svg{transform:rotate(180deg)}

/* A review not in English shows its English translation under the original (atlases made since
   translation joined the pipeline). The original is what was coded; the translation is for reading. */
.review-translation{margin-top:12px;padding:11px 14px 12px;border-left:3px solid #2f5fb3;background:#eef3fb;border-radius:0 4px 4px 0}
.review-translation p{margin:0}
.translation-label{display:flex;align-items:center;gap:7px;margin-bottom:5px;font:600 13px var(--font-sans);color:#2f5fb3}
.review-tags .is-uncertified{border-style:dashed}.review-tags .is-uncertified small{margin-left:6px;font-weight:600;color:#7a6232}

/* Next week's game is a surprise: a card the size of the game art, with a question mark where the art goes. */
.hp-signup-art.is-mystery{aspect-ratio:460/215;display:grid;place-items:center;border:1px dashed rgba(236,237,240,.35);border-radius:2px;background:radial-gradient(120% 140% at 30% 20%,rgba(84,134,224,.28),transparent 60%),repeating-linear-gradient(135deg,rgba(236,237,240,.04) 0 10px,transparent 10px 20px),var(--night-2)}
.hp-signup-art.is-mystery b{font:300 72px/1 var(--font-display);color:var(--gold)}
/* ---- About: the questions studios ask (home.js) ---- */
.hp-faq{margin-top:40px;padding-top:34px;border-top:1px solid var(--rule);max-width:700px;scroll-margin-top:calc(var(--header-h, 72px) + 24px)}
.hp-faq h3{font:300 32px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.hp-faq details{border-bottom:1px solid var(--rule)}
.hp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;cursor:pointer;list-style:none;font:600 18px/1.4 var(--font-sans);color:var(--ink)}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::after{content:'';flex:none;width:30px;height:30px;border:1px solid var(--rule);border-radius:50%;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;transition:border-color .15s,transform .2s}
.hp-faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat;transform:rotate(180deg)}
.hp-faq summary:hover{color:var(--gold-text)}
.hp-faq summary:hover::after{border-color:currentColor}
.hp-faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.hp-about-body .hp-faq p{font-size:17px;line-height:1.65;margin:-4px 44px 22px 0;color:var(--ink-soft)}
@media(max-width:850px){.hp-faq h3{font-size:28px}.hp-faq summary{font-size:17px}.hp-about-body .hp-faq p{font-size:16px;margin-right:0}}
/* The weekly prompt's art: a small, tilted wall of Steam header art, as in the home page hero. */
.weekly-prompt>.weekly-art{position:relative;display:block;grid-row:1 / span 2;width:104px;height:104px;margin-top:3px;overflow:hidden;border:1px solid rgba(236,237,240,.18);border-radius:4px;background:var(--night-2)}
.weekly-wall{position:absolute;left:-34px;top:-30px;display:grid;grid-template-columns:repeat(2,86px);gap:6px;transform:rotate(-10deg)}
.weekly-wall img{grid-row:auto;display:block;width:86px;height:auto;margin:0;border-radius:2px}
.weekly-art::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 45%,rgba(11,15,26,.5));pointer-events:none}
/* ---- This week's atlas banner at the hero's foot: lifted off the frame, on its own panel with a
   border you can see, so it reads as the way in rather than a footnote (Travis, 23 Sep). The top
   margin stays auto, so a taller hero copy still pushes it down instead of running into it. ---- */
.steam-bottom{border:1px solid rgba(236,237,240,.26);border-radius:6px;background:rgba(11,15,26,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(min-width:701px){.steam-bottom{margin:auto -32px clamp(64px,12vh,140px);padding:28px 32px}.steam-current-art img{width:184px;height:86px}}
@media(max-width:700px){.steam-bottom{margin:auto 0 32px;padding:16px 14px}}
/* ---- One game, or two compared: the two kinds of atlas a studio can buy, as two tabs joined to a
   panel holding a quick example of each (Travis, 23 Sep). Replaces the gold-filled switch with its
   Show/Showing pills and 96px thumbnails. ------------------------------------------------------ */
.hp-atlas{border:0;border-radius:0;overflow:visible;background:none;box-shadow:none}
.hp-switch,.hp-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none;padding:0;border-radius:0;position:relative;z-index:1}
.hp-switch button,.hp-switch button+button{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:center;gap:24px;margin:0 0 -1px;padding:22px 24px;text-align:left;font-family:var(--font-sans);color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);border-top:4px solid transparent;border-radius:8px 8px 0 0;cursor:pointer;transition:background .15s}
.hp-switch button::after,.hp-switch button[aria-selected=true]::after{content:none}
.hp-switch button:hover{background:#e4dfd2}
.hp-switch button[aria-selected=true],.hp-switch button[aria-selected=true]:hover{background:var(--panel);color:var(--ink);border-color:var(--rule);border-top-color:var(--gold);border-bottom-color:var(--panel);cursor:default}
.hp-switch-art{position:relative;display:block;width:100%;aspect-ratio:240/112;flex:none}
.hp-switch-art img,.hp-switch button:hover .hp-switch-art img{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:460/215;object-fit:cover;border-radius:4px;border:1px solid rgba(21,22,26,.12);box-shadow:0 8px 20px rgba(11,15,26,.16);filter:none;transition:none}
.hp-switch-art.is-two img{width:74%}
.hp-switch-art.is-two img+img{left:auto;right:0;top:auto;bottom:0}
.hp-switch-copy{display:block;min-width:0}
.hp-switch strong,.hp-switch button[aria-selected=true] strong{display:block;font:600 24px/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.hp-switch button[aria-selected=false] strong::after{content:' →';color:var(--gold-text);font-weight:500}
.hp-switch small,.hp-switch button[aria-selected=true] small{display:block;margin-top:6px;font:16px/1.45 var(--font-sans);color:var(--ink-soft)}
.hp-switch em{display:block;margin-top:10px;font:500 14px var(--font-sans);font-style:normal;color:var(--muted)}
.hp-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hp-panel{background:var(--panel);border:1px solid var(--rule);border-radius:0 0 8px 8px;padding:36px 44px 0;box-shadow:0 24px 60px rgba(11,15,26,.10);overflow:hidden}
.hp-panel .hp-intro{margin-bottom:30px}
.hp-panel .hp-demo{margin-bottom:44px}
.hp-panel .hp-features{border-bottom:0;padding-bottom:0;margin-bottom:40px}
.hp-buy{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;margin:0 -44px;padding:28px 44px;background:var(--paper-2);border-top:1px solid var(--rule)}
.hp-buy strong{display:block;font:600 24px/1.25 var(--font-sans);letter-spacing:-.015em;color:var(--ink)}
.hp-buy span{display:block;margin-top:4px;font:16px/1.5 var(--font-sans);color:var(--ink-soft);max-width:620px}
.hp-buy .button{flex:none;padding:16px 24px;white-space:nowrap}
.hp-buy .button span{display:inline;margin:0 0 0 6px;font:inherit;color:inherit}
/* Review Atlas Enterprise (Travis, 29 Sep): night, a gold band, the offer and a way to reach Travis. */
.ra-enterprise{display:flex;align-items:center;justify-content:space-between;gap:18px 40px;margin:28px 0;padding:26px 30px;border-radius:10px;background:var(--night,#0b0f1a);box-shadow:inset 0 4px 0 var(--gold);color:var(--bone,#ecedf0)}
.ra-enterprise strong{display:block;font:600 22px/1.25 var(--font-sans);letter-spacing:-.015em;color:var(--bone,#ecedf0)}
.ra-enterprise span{display:block;max-width:640px;margin-top:6px;font:16px/1.5 var(--font-sans);color:var(--bone-soft,#b9c0cf)}
.ra-enterprise .button{flex:none;padding:15px 22px;border:0;background:var(--gold);color:#16130a;white-space:nowrap}
.ra-enterprise .button span{display:inline;margin:0 0 0 6px;font:inherit;color:inherit}
.ra-enterprise.is-home{margin:0 -44px;border-radius:0}
@media(max-width:1100px){.ra-enterprise.is-home{margin:0 -28px}}
@media(max-width:700px){.ra-enterprise{flex-direction:column;align-items:flex-start;padding:22px 18px}.ra-enterprise.is-home{margin:0 -16px}}
@media(max-width:1180px){
 .hp-switch button,.hp-switch button+button{grid-template-columns:1fr;align-items:start;gap:16px;padding:20px}
 .hp-switch-art{max-width:280px}
 .hp-switch strong,.hp-switch button[aria-selected=true] strong{font-size:21px}
 .hp-switch small,.hp-switch button[aria-selected=true] small{font-size:15px}
}
@media(max-width:850px){.hp-panel{padding:28px 28px 0}.hp-buy{margin:0 -28px;padding:24px 28px}}
@media(max-width:700px){
 .hp-switch{gap:8px}
 .hp-switch button,.hp-switch button+button{grid-template-columns:1fr;align-items:start;gap:12px;padding:12px 12px 14px}
 .hp-switch strong,.hp-switch button[aria-selected=true] strong{font-size:17px}
 .hp-switch small,.hp-switch button[aria-selected=true] small{display:none}
 .hp-switch em{margin-top:4px;font-size:13px}
 .hp-panel{padding:22px 16px 0}
 .hp-buy{flex-direction:column;align-items:flex-start;margin:0 -16px;padding:22px 16px}
}
/* ---- A review's header: the game's art at a size you can read, and the language the review was
   written in as a fact of its own, not a suffix to the game's name (Travis, 23 Sep). ---------- */
.review .meta.review-who{display:flex;align-items:center;gap:14px;min-width:0}
.review-who .review-art{flex:none;width:112px;height:52px;object-fit:cover;border-radius:4px;border:1px solid var(--rule);box-shadow:0 4px 12px rgba(11,15,26,.12)}
.review-id{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.review-who .review-game{display:block;font:600 17px/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.review-lang{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px 0 8px;border-radius:999px;background:#eef3fb;border:1px solid #cfdcf1;font:500 13px/1.2 var(--font-sans);color:#2c4a7c}
.review-lang b{font-weight:700;color:#1d3a6b}
.review-lang svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:550px){.review-who .review-art{width:88px;height:41px}.review-who .review-game{font-size:16px}}
/* ---- The example's header: a small version of the Atlas's own cover. The art fills the left edge;
   who and when sit in the middle; the verdict on Steam's scale and the way in sit together on the
   right, so the eye goes art, name, rating, button (Travis, 23 Sep). ---------------------------- */
.hp-mini{display:grid;grid-template-columns:clamp(300px,34%,460px) minmax(0,1fr) minmax(320px,380px);align-items:stretch;margin:0 0 36px;background:var(--night);color:var(--bone);border-radius:8px;overflow:hidden;box-shadow:0 18px 44px rgba(11,15,26,.16)}
.hp-mini-art{position:relative;display:flex;flex-direction:column;gap:2px;min-height:200px;background:#05070d}
/* the art whole, never cropped, over a blurred copy of itself that fills whatever shape the column is */
.hp-mini-shot{position:relative;flex:1;overflow:hidden}
.hp-mini-shot img{position:absolute;inset:0;display:block;width:100%;height:100%}
.hp-mini-blur{object-fit:cover;filter:blur(16px) brightness(.55) saturate(1.1);transform:scale(1.2)}
.hp-mini-img{object-fit:contain}
.hp-mini-copy{align-self:center;min-width:0;padding:24px 26px 24px 30px}
.hp-mini.is-two h3{font-size:clamp(28px,2.6vw,36px)}
.hp-mini-label{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:600 15px var(--font-sans);color:var(--gold-soft)}
.hp-mini-label::before{content:'';flex:none;width:28px;height:2px;background:var(--gold)}
.hp-mini h3{margin:0 0 12px;font:300 clamp(34px,3.4vw,48px)/1.02 var(--font-display);letter-spacing:-.03em;color:var(--bone);text-wrap:balance}
.hp-mini h3 span{color:var(--bone-mute,#8e96a8)}
.hp-mini-when{display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 13px 5px 10px;border:1px solid rgba(236,237,240,.26);border-radius:999px;font:600 14px var(--font-sans);color:var(--bone)}
.hp-mini-when svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--gold-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hp-mini-meta{margin:12px 0 0;font:14.5px/1.6 var(--font-sans);color:var(--bone-soft)}
.hp-mini-meta .cover-figure b{color:var(--bone)}
.hp-mini-side{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:22px 28px;border-left:1px solid rgba(236,237,240,.12);background:rgba(255,255,255,.025)}
.hp-mini-score{margin:0}
.hp-mini-score:empty{display:none}
.hp-mini-thumb{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:5px;background:rgba(102,192,244,.16)}
.hp-mini-thumb svg{width:16px;height:16px;fill:#66c0f4}
.hp-mini-score strong{display:flex;align-items:center;gap:10px;font:600 22px/1.2 var(--font-sans);letter-spacing:-.01em;color:#66c0f4}
.hp-mini-scale{display:block;margin:3px 0 8px;font:500 13px var(--font-sans);color:var(--bone-soft)}
.hp-mini-figs{display:block;font:14px/1.45 var(--font-sans);color:var(--bone-soft)}
.hp-mini-fig{display:block;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;text-decoration:underline dotted;text-decoration-color:rgba(236,237,240,.4);text-underline-offset:4px}
.hp-mini-fig b{font-weight:600;color:var(--bone)}
.hp-mini-fig.is-all{margin-top:3px;font-size:13px;color:var(--bone-mute,#aeb3bf)}
.hp-mini-fig.is-all b{color:var(--bone-soft)}
.hp-mini-fig:hover{text-decoration-style:solid;text-decoration-color:var(--gold)}
.hp-mini-fig:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.hp-mini-status{display:block;margin-top:4px;font:13px var(--font-sans);color:var(--gold-soft)}
.hp-mini-status:empty{display:none}
.hp-mini-score.is-mixed .hp-mini-thumb{background:rgba(185,160,116,.18)}
.hp-mini-score.is-mixed .hp-mini-thumb svg{fill:#b9a074}
.hp-mini-score.is-mixed strong{color:#c9b089}
.hp-mini-score.is-negative .hp-mini-thumb{background:rgba(163,76,37,.28)}
.hp-mini-score.is-negative .hp-mini-thumb svg{fill:#e0855c}
.hp-mini-score.is-negative strong{color:#e0855c}
/* the way into the example: the Atlas's primary button, gold on the cover's night */
.hp-mini .hp-mini-open{display:flex;justify-content:center;align-items:center;gap:10px;padding:14px 20px;border:1px solid var(--gold);border-radius:4px;background:var(--gold);color:var(--night);font:600 16px/1 var(--font-sans);text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px rgba(212,160,18,.2)}
.hp-mini .hp-mini-open:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--night)}
.hp-mini .hp-mini-open:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.hp-mini .hp-mini-open span{font-size:15px}
@media(max-width:1180px){.hp-mini{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}.hp-mini-side{grid-column:1 / -1;border-left:0;border-top:1px solid rgba(236,237,240,.12);padding:18px 30px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}}
@media(max-width:700px){.hp-mini{grid-template-columns:1fr;margin-bottom:28px}.hp-mini-art{grid-row:auto;min-height:0;aspect-ratio:460/215}.hp-mini.is-two .hp-mini-art{aspect-ratio:460/430}.hp-mini-copy{padding:18px 18px 4px}.hp-mini-side{flex-direction:column;align-items:stretch;padding:14px 18px 20px}.hp-mini .hp-mini-open{white-space:normal}}

/* ---- The one-game window: the Atlas's Trends view in miniature, two charts side by side ------ */
.hp-window .hp-window-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hp-trend{margin:0;padding:24px 26px 16px;min-width:0}
.hp-trend+.hp-trend{border-left:1px solid #e2ded3}
.hp-trend h4{margin:0 0 4px;font:600 19px/1.25 var(--font-sans);letter-spacing:-.015em;color:var(--ink)}
.hp-trend figcaption p{margin:0 0 14px;font:14px/1.5 var(--font-sans);color:var(--muted);max-width:520px}
.hp-trend-keys{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.hp-key{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:3px 14px 0 12px;border:1px solid var(--rule);border-radius:8px;background:#fff;box-shadow:inset 0 3px 0 var(--s,transparent);font:500 14px var(--font-sans);color:var(--ink)}
.hp-key b{margin-left:2px;font-weight:700;font-variant-numeric:tabular-nums}
.hp-key small{margin-left:-3px;font:500 12.5px var(--font-sans);color:var(--muted)}
.hp-shape{display:inline-block;flex:none;width:10px;height:10px;background:var(--s)}
.hp-shape.hp-s0{border-radius:50%}
.hp-shape.hp-s1{border-radius:1.5px}
.hp-shape.hp-s2{width:9px;height:9px;transform:rotate(45deg);border-radius:1px}
.hp-s0{--s:#15161a}.hp-s1{--s:#d4a012}.hp-s2{--s:#c0357a}
.hp-trend-plot{position:relative;min-height:240px;touch-action:pan-y}
.hp-trend-svg{display:block;overflow:visible}
.hp-trend-svg .hp-part{fill:#efebe2}
.hp-trend-svg .hp-grid{stroke:#e4e0d6;stroke-width:1}
.hp-trend-svg .hp-base{stroke:#15161a;stroke-width:1.4}
.hp-trend-svg .hp-tick{font:500 13px var(--font-sans);fill:#4a4c52}
.hp-trend-svg .hp-xlabel{font:500 13px var(--font-sans);fill:#3d4047}
.hp-trend-svg .hp-xtitle{font:600 12.5px var(--font-sans);fill:#4a4c52}
.hp-trend-svg .hp-mark-line{stroke:#15161a;stroke-width:1.3;opacity:.5}
.hp-trend-svg .hp-flag-box{fill:#15161a}
.hp-trend-svg .hp-flag-text{font:600 12.5px var(--font-sans);fill:#fff}
.hp-trend-svg .hp-line{fill:none;stroke:var(--s);stroke-width:2.25px;stroke-linejoin:round;stroke-linecap:round}
.hp-trend-svg .hp-dot{fill:var(--s);stroke:var(--s);stroke-width:1.4px;transform-box:fill-box;transform-origin:center;transition:scale .12s;pointer-events:none}
.hp-trend-svg .hp-dot.is-part{fill:var(--panel)}
.hp-trend-svg .hp-dot:not(.is-end):not(.is-on){opacity:0}
.hp-trend-svg .hp-dot.is-on{scale:1.5;stroke:var(--panel);stroke-width:1.2px;paint-order:stroke}
.hp-trend-svg .hp-dot.is-part.is-on{stroke:var(--s)}
.hp-trend-svg .hp-hit{fill:transparent;cursor:pointer;outline:none}
.hp-trend-svg .hp-hit:focus-visible{stroke:var(--gold);stroke-width:2}
.hp-trend-svg .hp-xh{stroke:#15161a;stroke-width:1.2;stroke-dasharray:4 3;pointer-events:none}
.hp-trend-svg .hp-xh-box{fill:#15161a}
.hp-trend-svg .hp-xh-text{font:600 13px var(--font-sans);fill:#fff}
.hp-xh-card{position:absolute;left:0;top:0;z-index:3;min-width:220px;max-width:270px;padding:10px 13px 11px;border-radius:8px;background:#15161a;color:#fff;box-shadow:0 8px 24px rgba(21,22,26,.22);pointer-events:none;font-family:var(--font-sans)}
.hp-xh-card[hidden]{display:none}
.hp-xh-day{font:600 12.5px var(--font-sans);color:#c9ccd2;margin-bottom:1px}
.hp-xh-what{margin:0 0 7px;font:500 12px var(--font-sans);color:#c9ccd2}
.hp-xh-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:center}
.hp-xh-rows>span{font:500 13px var(--font-sans);color:#e7e8ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-xh-rows>span.is-on{color:#fff;font-weight:700}
.hp-xh-rows>b{font:700 15px var(--font-sans);font-variant-numeric:tabular-nums;color:#fff;text-align:right}
.hp-xh-rows>small{grid-column:2/-1;margin:-1px 0 5px;font:500 12px var(--font-sans);color:#b9bcc4}
.hp-xh-card .hp-s0{--s:#fff}
.hp-xh-note{margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);font:500 12px var(--font-sans);color:#c9ccd2}
.hp-window-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;padding:14px 26px 16px;border-top:1px solid #e2ded3;font:14px/1.5 var(--font-sans);color:var(--muted)}
.hp-window-foot p{margin:0;max-width:780px}
.hp-window-foot a{color:var(--ink);font-weight:500;white-space:nowrap;border-bottom:1px solid currentColor}
.hp-window-status{margin:0;padding:0 26px 14px;font:14px var(--font-sans);color:var(--gold-text)}
.hp-window-status:empty{display:none}
@media(max-width:900px){.hp-window .hp-window-grid{grid-template-columns:minmax(0,1fr)}.hp-trend+.hp-trend{border-left:0;border-top:1px solid #e2ded3}}
@media(max-width:550px){.hp-trend{padding:18px 14px 12px}.hp-trend h4{font-size:17px}.hp-trend-svg .hp-tick,.hp-trend-svg .hp-xlabel,.hp-trend-svg .hp-xh-text{font-size:12px}.hp-trend-svg .hp-flag-text{font-size:12px}.hp-window-foot{padding:12px 14px 14px}.hp-window-status{padding:0 14px 12px}.hp-key{font-size:13px;padding:5px 10px 5px 8px}}
:root[data-theme="dark"] .hp-s0{--s:#ecedf0}
:root[data-theme="dark"] .hp-key{background:var(--panel)}
:root[data-theme="dark"] .hp-trend-svg .hp-part{fill:rgba(236,237,240,.05)}
:root[data-theme="dark"] .hp-trend-svg .hp-grid{stroke:rgba(236,237,240,.1)}
:root[data-theme="dark"] .hp-trend-svg .hp-base,:root[data-theme="dark"] .hp-trend-svg .hp-xh{stroke:#ecedf0}
:root[data-theme="dark"] .hp-trend-svg .hp-tick,:root[data-theme="dark"] .hp-trend-svg .hp-xlabel{fill:#b9c0cf}
@media(max-width:550px){.hp-window .hp-demo-top{display:flex;align-items:center}.hp-window .hp-snapshot{display:none}.hp-window .hp-demo-wordmark{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}.hp-window .hp-demo-wordmark>span:last-child{flex-basis:100%;margin:2px 0 0;font-size:14px}}
/* ---- The one-game finding as evidence: the headline, then three figures counted from the slice, each
   opening its reviews, then who it is and the way into the Atlas (Travis, 23 Sep: not a headline and a
   paragraph). The shape before a figure's title is its line in the charts below. ------------------ */
.hp-finding-block{margin:0 0 36px}
.hp-finding-block .hp-finding-label{margin:0 0 12px}
.hp-finding-block .hp-finding{margin:0 0 24px;max-width:1080px;font:300 clamp(30px,3vw,46px)/1.1 var(--font-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.hp-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px}
.hp-fig{display:flex;flex-direction:column;padding:18px 22px 18px;background:#fff;border:1px solid #e2ded3;border-radius:8px}
.hp-fig-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 14px var(--font-sans);color:var(--muted)}
.hp-fig-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-height:52px;margin:0 0 8px;font:300 48px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.hp-fig-num button{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-decoration-color:rgba(166,124,15,.75);text-decoration-thickness:1.5px;text-underline-offset:8px}
.hp-fig-num button:hover{text-decoration-style:solid;text-decoration-color:var(--gold)}
.hp-fig-num button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.hp-fig-arrow{font:400 24px var(--font-sans);color:var(--muted)}
.hp-fig-wait{color:#cfcbbf}
.hp-fig-label{margin:0;font:15px/1.5 var(--font-sans);color:var(--ink-soft)}
.hp-coda{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap}
.hp-coda p{margin:0;max-width:760px;font:500 18px/1.5 var(--font-sans);color:var(--ink)}
.hp-coda a{font:500 16px var(--font-sans);color:var(--ink);white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:3px}
.hp-coda a:hover{color:var(--gold-text)}
.hp-fig-status{margin:8px 0 0;font:14px var(--font-sans);color:var(--gold-text)}
.hp-fig-status:empty{display:none}
@media(max-width:900px){.hp-evidence{grid-template-columns:minmax(0,1fr)}.hp-fig-num{font-size:42px;min-height:0}}
@media(max-width:550px){.hp-fig{padding:16px 16px}.hp-coda p{font-size:17px}}

/* ---- What an Atlas shows: cards with a small picture of each view, each opening it in the example -- */
.hp-panel .hp-features{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 40px;padding:0;border:0}
.hp-panel .hp-features:not(.hp-features-six){grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-panel .hp-features li{border:0;padding:0;min-width:0}
.hp-feature{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:0 0 16px;background:#fff;border:1px solid #e2ded3;border-radius:8px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.hp-feature:hover{border-color:var(--ink);box-shadow:0 10px 26px rgba(11,15,26,.08);transform:translateY(-1px)}
a.hp-feature:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hp-panel .hp-feature .hp-feature-art{display:flex;align-items:center;height:88px;margin:0 0 16px;padding:0 20px;background:#f3efe6;border-bottom:1px solid #e9e4d8}
.hp-feature-art svg{display:block;width:84px;height:56px;overflow:visible}
.hp-panel .hp-feature strong{display:block;margin:0 20px 4px;font:600 17px/1.3 var(--font-sans);color:var(--ink)}
.hp-panel .hp-feature>span:not(.hp-feature-art){display:block;margin:0 20px;font:15px/1.5 var(--font-sans);color:var(--muted)}
.hp-feature em{display:block;margin:auto 20px 0;padding-top:12px;font:500 14px var(--font-sans);font-style:normal;color:var(--ink)}
.hp-feature em b{font-weight:500;color:var(--gold-text)}
a.hp-feature:hover em{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.hp-panel .hp-features,.hp-panel .hp-features:not(.hp-features-six){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hp-panel .hp-features,.hp-panel .hp-features:not(.hp-features-six){grid-template-columns:minmax(0,1fr)}.hp-panel .hp-feature .hp-feature-art{height:72px}.hp-feature-art svg{width:66px;height:44px}}
:root[data-theme="dark"] .hp-fig,:root[data-theme="dark"] .hp-feature{background:var(--panel);border-color:var(--rule)}
:root[data-theme="dark"] .hp-panel .hp-feature .hp-feature-art{background:var(--paper-2);border-color:var(--rule)}

/* ---- The Atlas's loading screen: the download counted (app.js loadingScreen), so a phone never looks stuck */
.loading[data-corpus-progress]{max-width:620px}
.loading .load-text{margin:0 0 14px;font:500 19px/1.4 var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.loading .load-bar{position:relative;height:6px;border-radius:999px;background:#e2ded3;overflow:hidden}
.loading .load-bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--gold);transition:width .25s linear}
.loading[data-corpus-progress]:not(.is-loading) .load-bar i{width:28%;animation:load-wait 1.3s ease-in-out infinite}
@keyframes load-wait{from{transform:translateX(-110%)}to{transform:translateX(370%)}}
@media(prefers-reduced-motion:reduce){.loading[data-corpus-progress]:not(.is-loading) .load-bar i{animation:none;width:0}}
.loading .load-note{margin:14px 0 0;font:15px/1.5 var(--font-sans);color:var(--muted)}
.loading .load-note:empty{display:none}
/* ---- When an Atlas cannot open: what happened in plain words, the way on, and the detail for us ----- */
.loading.load-failed{max-width:640px}
.load-failed h1{margin:0 0 10px;font:300 clamp(28px,3vw,40px)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.load-failed>p{margin:0 0 20px;font:17px/1.55 var(--font-sans);color:var(--ink-soft)}
.load-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.load-actions .text-link{font:500 16px var(--font-sans);color:var(--ink);border-bottom:1px solid currentColor}
.load-detail{margin-top:22px;font:14px var(--font-sans);color:var(--muted)}
.load-detail summary{cursor:pointer}
.load-detail code{display:block;margin-top:6px;padding:8px 10px;background:var(--paper-2);border-radius:4px;font:13px var(--font-mono,monospace);color:var(--ink-soft);word-break:break-word}
.loading .load-retry{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- The quote's price, line by line: each game's base (its first 5,000 reviews) and what more reviews add */
.quote-summary .q-breakdown{display:flex;flex-direction:column;gap:6px;margin:4px 0 16px;padding:12px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--panel);font:14px/1.4 var(--font-sans);color:var(--ink-soft)}
.quote-summary .q-breakdown>span{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.quote-summary .q-breakdown b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.quote-summary .q-breakdown-game{margin-top:4px;font:600 13px var(--font-sans);color:var(--muted)}
.quote-summary .q-breakdown-game:first-child{margin-top:0}
.quote-summary .q-breakdown-total{margin-top:4px;padding-top:8px;border-top:1px solid var(--rule);font-weight:600;color:var(--ink)}
/* On a phone the lock box stacks its field over its button; the field keeps its height instead of
   collapsing to its text (flex:1 in a column made its height zero-based). */
@media(max-width:420px){.q-lockbox .q-lock-row input{flex:none;width:100%;height:48px}}

/* ==== The site on a phone (Travis, 23 Sep: the same pass as the Atlas's, #64). Every rule that changes a
   layout is inside max-width:700px, so the desktop is exactly as it was; the one element that exists only
   for a phone (the quote's price line) is hidden above it. ==== */
.q-phone-price{display:none}
@media(max-width:700px){
 /* Small controls get a place to tap 44px tall from an invisible layer, so nothing on screen moves. */
 .hp-coda a,.hp-window-foot a,.hp-mini-fig,.q-meta a,.q-meta button,.q-langs-foot .subtle-button,.q-fresh,.q-sum-remove,footer>a:not(.wordmark),.review-source{position:relative}
 .hp-coda a::after,.hp-window-foot a::after,.hp-mini-fig.is-all::after,.q-meta a::after,.q-meta button::after,.q-langs-foot .subtle-button::after,.q-fresh::after,footer>a:not(.wordmark)::after,.review-source::after,.rank-bar:only-of-type::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
 /* A theme's bar grows only when it is the only bar in its row (the row's dashed marker is an <i>):
    stacked bars (the comparison Atlas's two games, a theme split by pinned languages) sit 4-6px
    apart, and a bigger layer would open a neighbour's reviews from a tap on the bar above it
    (Codex, #66). */
 /* Where controls are stacked close together, a layer stops short of the next one's own box, so a
    tap on a control always reaches that control (Codex, #66): the home card's second figure grows
    only downwards, into the gap above its button, and the first only upwards; the quote's links
    7px each way, into 8px gaps. */
 .hp-mini-fig.is-all::after{top:0;bottom:-14px;height:auto;transform:none}
 .hp-mini-fig:not(.is-all)::after{content:'';position:absolute;left:-4px;right:-4px;bottom:0;height:max(44px,100%)}
 .q-meta a::after,.q-meta button::after{top:-7px;bottom:-7px;height:auto;transform:none}
 /* A pin sits in the flow (the Languages table, a theme's detail) except in the Themes rows, where
    atlas-look.css places it and wins; in the flow it needs a box of its own for its layer to measure
    from, or the layer would span whatever placed box holds it (Codex, #66). */
 .pin-toggle{position:relative}
 .q-sum-remove::after,.pin-toggle::after{content:'';position:absolute;inset:-9px}
 /* The home page's weekly-email field: in the stacked form it collapsed to its text's height. */
 .hp-signup-form input{flex:none}
 /* The home page's price: its note under the figure, at a readable size, not squeezed beside it. */
 .hp-price{display:block}
 .hp-price>small{max-width:none;margin-top:8px;font-size:14px;line-height:1.5}
 /* The reviews window scrolls on its own; reaching its end does not scroll the page behind it. */
 dialog#reviews{overscroll-behavior:contain}
 /* The quote's price, under the game card: what it is and a way to the breakdown and the buy button. */
 .quote-main .q-phone-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 4px;padding:14px 16px;border:1px solid var(--rule);border-radius:4px;background:var(--panel);color:var(--ink);text-decoration:none;font:15px var(--font-sans)}
 .quote-main .q-phone-price[hidden]{display:none}
 .q-phone-price>span:first-child{color:var(--muted)}
 .q-phone-price>strong{font:600 22px var(--font-sans);font-variant-numeric:tabular-nums}
 .q-phone-price .q-phone-price-go{margin-left:auto;font-weight:600;border-bottom:1px solid currentColor}
}

/* ==== The home hero's card on a phone (Travis, 24 Sep: it stacked every piece in one tall column, left
   "first" alone on a line, and gave a lot of room to a caption and a pause button for the wall behind it).
   On a phone the card is only this week's Atlas: the label across the top, the art beside the game's name
   and its line, whose two halves are kept whole so neither ends on a lone word. The wall behind the hero
   holds still there, so it needs no pause button, and the caption about its scores goes with it (the wall
   still shifts a little as the page scrolls, which only the reader's own scrolling starts). All inside
   max-width:700px: desktop is as it was. ==== */
@media(max-width:700px){
 .steam-current{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:start}
 .steam-bottom>a>span.steam-current-copy{display:contents}
 .steam-current-copy>span{grid-area:1/1/2/3;margin-bottom:12px}
 .steam-bottom>a>span.steam-current-art{grid-area:2/1/4/2}
 .steam-current-copy>strong{grid-area:2/2/3/3}
 .steam-current-copy>small{grid-area:3/2/4/3;margin-top:2px;line-height:1.4}
 .steam-current-copy>small>span{white-space:nowrap}
 .steam-bottom>div{display:none}
 .steam-flow{animation-play-state:paused}
}
/* The narrowest phones: slightly smaller art keeps "A new game every week ·" whole beside it; below 360px
   its halves may wrap (evenly) rather than run out of the card. */
@media(max-width:380px){.steam-current-art img{width:92px;height:43px}}
@media(max-width:359px){.steam-current-copy>small{text-wrap:balance}.steam-current-copy>small>span{white-space:normal}}

/* ==== No lone last word on a phone (Travis, 24 Sep: "you know I hate one-word orphans"). A narrow screen
   leaves a single word on a text's last line far more often than a wide one: 191 across the site's pages at
   four phone widths before this. Headings, labels, buttons and short lines are balanced (their lines evened
   out); paragraphs, list items and the long note under the quote's languages table wrap "pretty", which
   moves a word down to keep the last line company (balancing a long text would narrow all of it, and Chrome
   stops balancing after six lines).
   Only the line breaks move, never a box's width, and only on a phone. ==== */
@media(max-width:700px){
 body{text-wrap-style:pretty}
 h1,h2,h3,h4,h5,h6,.steam-copy h1,dt,th,td,label,summary,figcaption,legend,button,a,span,strong,b,small,em,div{text-wrap-style:balance}
 p,li,dd,blockquote,.q-langs-foot .q-stat-sub{text-wrap-style:pretty}
}

/* ==== The launch price (Travis, 24 Sep, TASK-56): while it runs (pricing.js launchOn()), the regular price
   shows crossed out beside the launch one, with a gold "Launch price" tag and the date it ends. The
   elements exist only while it runs, so these rules do nothing after its end. Desktop and phone. ==== */
.q-was{font-weight:400;color:var(--muted);text-decoration-thickness:1.5px;margin-right:.3em}
.quote-summary .price .q-was{font-size:.45em;margin-right:0}
.q-from .q-was{font:300 30px/1 var(--font-display);letter-spacing:-.02em;margin-right:0}
.q-from:has(.q-was){flex-wrap:wrap;row-gap:4px}.q-from:has(.q-was) small{white-space:nowrap}
.quote-summary .q-breakdown b .q-was{font-weight:400;margin-right:2px}
.q-phone-price>strong .q-was{font-size:15px}
.q-launch{margin:-12px 0 18px;font:600 14px/1.4 var(--font-sans);color:var(--gold-text)}
.q-from+.q-vat+.q-launch,.q-from+.q-launch{margin-top:0}
.hp-price>strong>s{font-size:.55em;color:var(--muted);text-decoration-thickness:1.5px;margin-right:.15em}
.hp-price>strong>.hp-launch{display:inline-block;vertical-align:middle;margin-left:14px;padding:4px 10px;border:1px solid currentColor;border-radius:999px;font:600 13px/1.2 var(--font-sans);font-style:normal;letter-spacing:0;color:var(--gold-text)}

/* the quote page pricing panel link to the home research section (TASK-58) */
.q-what{display:inline-block;margin:0 0 14px;font:600 15px var(--font-sans);color:var(--ink);border-bottom:1px solid currentColor;text-decoration:none}
/* The archive (TASK-71): one card per Atlas, its editions newest first. */
.atlas-archive{display:grid;gap:18px;max-width:980px;margin:0 auto 64px;padding:0 24px}
.archive-series{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:22px;border:1px solid var(--rule);background:#fff}
.archive-art{display:grid;gap:8px;align-content:start}.archive-art img{width:100%;height:auto;display:block;border-radius:2px}
.archive-copy h2{margin:0 0 2px;font:600 22px/1.25 var(--font-sans)}
.archive-copy>p{margin:0 0 12px;color:var(--muted);font:14px/1.4 var(--font-sans)}
.archive-editions{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.archive-editions a{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto auto;align-items:baseline;gap:6px 16px;padding:12px 2px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.archive-editions a:hover .archive-day,.archive-editions a:focus-visible .archive-day{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.archive-day{font:600 16px/1.4 var(--font-sans)}
.archive-figs{color:var(--muted);font:14px/1.4 var(--font-sans);font-variant-numeric:tabular-nums}
.archive-now{padding:2px 9px;border-radius:999px;background:var(--gold);color:#16130a;font:650 12px/1.5 var(--font-sans);white-space:nowrap}
.archive-go{color:var(--muted)}
@media (max-width:700px){.atlas-archive{padding:0 16px}.archive-series{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}.archive-art{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.archive-editions a{grid-template-columns:minmax(0,1fr) auto}.archive-figs{grid-column:1/-1;grid-row:2}}

/* ---- Review Atlas Enterprise: the waitlist page and the bar that points to it (Travis, 29 Sep) ---------- */
.ra-announce{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;padding:9px 16px;background:var(--gold,#d4a012);color:#16130a;font:500 14px/1.35 var(--font-sans);text-align:center;text-decoration:none}
.ra-announce-new{padding:1px 8px;border-radius:999px;background:#16130a;color:var(--gold,#d4a012);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.ra-announce b{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ra-announce:hover b{text-decoration-thickness:2px}
.ra-announce:focus-visible{outline:2px solid #16130a;outline-offset:-4px}
.ent-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center;padding:64px 7% 56px;background:var(--night,#0b0f1a);box-shadow:inset 0 4px 0 var(--gold,#d4a012);color:var(--bone,#ecedf0)}
.ent-kicker{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--gold,#d4a012);font:700 15px/1.3 var(--font-sans);letter-spacing:.04em;text-transform:uppercase}
.ent-kicker span{padding:2px 9px;border-radius:999px;background:var(--gold,#d4a012);color:#16130a;font-size:12px}
.ent-kicker.is-dark{margin:0 0 6px;color:#8a6d1f;font-size:13px}
.ent-hero h1{margin:0 0 18px;color:var(--bone,#ecedf0);font:300 48px/1.08 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;text-wrap:balance}
.ent-lede{max-width:34em;margin:0;color:var(--bone-soft,#b9c0cf);font:18px/1.55 var(--font-sans);text-wrap:pretty}
.ent-form{padding:30px 30px 26px;border-radius:12px;background:#fff;color:var(--ink,#15161a);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ent-form h2{margin:0 0 6px;font:600 26px/1.2 var(--font-sans);letter-spacing:-.015em}
.ent-form>p{margin:0 0 18px;color:#4a4c52;font:15.5px/1.5 var(--font-sans);text-wrap:pretty}
.ent-field{display:flex;gap:10px}
.ent-field input{flex:1;min-width:0;padding:14px 14px;border:1px solid var(--rule,#dcd6c8);border-radius:8px;font:16px var(--font-sans)}
.ent-field input:focus{outline:2px solid var(--gold,#d4a012);outline-offset:1px}
.ent-field button{flex:none;padding:14px 20px;border:0;border-radius:8px;background:var(--gold,#d4a012);color:#16130a;font:700 16px var(--font-sans);cursor:pointer}
.ent-field button:disabled{opacity:.7;cursor:progress}
.ent-status{min-height:1.4em;margin:12px 0 0;font:600 15px/1.45 var(--font-sans);color:#1d5b2e}
.ent-status.is-error{color:#a34c25}
.ent-small{margin:8px 0 0;color:#6b6d72;font:13px/1.5 var(--font-sans)}
.ent-small a{color:inherit}
.ent-points{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px;padding:52px 7% 20px}
.ent-points h2{grid-column:1/-1;margin:0 0 -8px;color:var(--ink,#15161a);font:600 30px/1.2 var(--font-sans);letter-spacing:-.015em}
.ent-points div{grid-column:span 2}
.ent-points div:nth-of-type(n+4){grid-column:span 3}
.ent-points div{padding-top:16px;border-top:3px solid var(--gold,#d4a012)}
.ent-points h3{margin:0 0 8px;color:var(--ink,#15161a);font:600 20px/1.3 var(--font-sans)}
.ent-points p{margin:0;color:#4a4c52;font:16px/1.55 var(--font-sans);text-wrap:pretty}
.ent-example{padding:28px 7% 72px}
.ent-example-card{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:center;gap:28px;padding:22px;border:1px solid var(--rule,#dcd6c8);border-radius:12px;background:#fff;color:var(--ink,#15161a);text-decoration:none}
.ent-example-card img{display:block;width:100%;height:auto;border-radius:8px}
.ent-example-copy{display:grid;gap:6px}
.ent-example-copy strong{font:600 22px/1.3 var(--font-sans);text-wrap:balance}
.ent-example-copy>span:not(.ent-kicker){color:#4a4c52;font:16px/1.5 var(--font-sans)}
.ent-example-copy b{margin-top:6px;font:700 16px var(--font-sans);text-decoration:underline;text-decoration-color:var(--gold,#d4a012);text-underline-offset:4px}
.ent-example-card:hover{border-color:var(--ink,#15161a)}
@media(max-width:1000px){.ent-hero{grid-template-columns:minmax(0,1fr);gap:32px}.ent-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.ent-points div,.ent-points div:nth-of-type(n+4){grid-column:auto}.ent-points div:last-child{grid-column:1/-1}}
@media(max-width:700px){
 .ra-announce{font-size:13px;padding:8px 12px}.ra-announce .ra-announce-long{display:none}
 .ent-hero{padding:40px 16px 36px}.ent-hero h1{font-size:34px}.ent-lede{font-size:16.5px}
 .ent-form{padding:22px 18px 20px}.ent-field{flex-direction:column}
 .ent-points{grid-template-columns:minmax(0,1fr);gap:24px;padding:36px 16px 12px}.ent-points h2{font-size:25px;margin:0}.ent-example{padding:20px 16px 48px}
 .ent-example-card{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
}