/* Third pass: a stronger home masthead, a composed lead and timely references.
   Inner pages keep their existing shell and styles. */
/* The masthead spans the page; the wordmark has a bounded display scale.
   Keep its brand presence without turning the lettering into a full-width poster. */
body.home-page .site-header{container-type:inline-size;--masthead-gutter:32px;grid-template-columns:minmax(0,1fr) auto;gap:0 32px;padding:20px 32px 0}
body.home-page .site-header .brand-row .wordmark{grid-column:1/-1;grid-row:1;position:relative;z-index:1;font-size:clamp(56px,8.5cqw,116px);line-height:.9;letter-spacing:-.03em;white-space:nowrap;border-bottom:1px solid var(--soft);padding-bottom:16px}
/* Utilities share the masthead row with the wordmark, so the destinations get a full row of their own. */
body.home-page .site-header .header-actions{grid-column:2;grid-row:1;align-self:end;justify-self:end;z-index:2;padding:0 0 18px}
body.home-page .site-header .primary-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:32px;border:0;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin}
body.home-page .site-header .primary-nav>a{font-size:22px;min-height:50px;padding-block:10px}
body.home-page .site-header .primary-nav .rules-shortcut{display:none}
/* Tablets: the utilities get their own column beside the wordmark instead of sitting over its row,
   so they can never cover it. The search field gives way first (150px minimum), then the wordmark. */
@media(max-width:1100px){
 body.home-page .site-header{--masthead-gutter:24px;padding-inline:24px;gap:0 24px;grid-template-columns:auto minmax(0,1fr)}
 body.home-page .site-header .brand-row .wordmark{grid-column:1;font-size:clamp(36px,6.4cqw,64px);border:0;padding-bottom:14px}
 body.home-page .site-header .header-actions{align-self:center;padding-bottom:14px}
 body.home-page .site-header .primary-nav{gap:22px;border-top:1px solid var(--soft)}
 body.home-page .site-header .primary-nav>a{font-size:20px}
 body.home-page .site-header .playing-toggle .playing-name{display:none}
}
@media(max-width:600px){
 body.home-page .site-header{--masthead-gutter:16px;grid-template-columns:minmax(0,1fr) auto;padding:12px 16px 0;gap:0 12px}
 body.home-page .site-header .brand-row .wordmark{grid-column:1;font-size:clamp(48px,16cqw,64px);border:0;padding-bottom:10px}
 body.home-page .site-header:has(.player-nav) .brand-row .wordmark{font-size:clamp(30px,9.4cqw,40px)}
 body.home-page .site-header .primary-nav{grid-column:1/-1;grid-row:2;gap:20px;border-top:1px solid var(--soft)}
 body.home-page .site-header .primary-nav>a{font-size:19px;min-height:44px;padding-block:8px}
 body.home-page .site-header .header-actions{grid-column:2;grid-row:1;align-self:center;padding-bottom:10px;gap:0 6px}
}
.home-page main{max-width:1440px;margin:auto}
/* Edge to edge, as in the approved Brutalist v2 design: the masthead's rule and the full-width bands (Watch, Add cards)
   run across the whole window while their content stays on the page's frame. Drawn as border images and a clipped
   shadow, which paint outside the box without making the page scroll sideways. */
/* The masthead line is the top edge of the tab row, so the tabs sit centred between their two lines. It used to be the
   wordmark's bottom border, and the wordmark's larger tap area (header.css) hangs 9 px below its row, which put the line
   9 px into the tab row and pressed the tabs against it (Ron, Oct 9). */
@media(min-width:1101px){
 body.home-page .site-header .brand-row .wordmark{border-bottom:0}
 body.home-page .site-header .primary-nav{border-top:1px solid var(--soft);border-image:linear-gradient(var(--soft),var(--soft)) 1 0 0 0/1px 0 0 0/0 100vmax}
}
.home-page :is(.watch,.home-collect){border-image:linear-gradient(var(--soft),var(--soft)) 1 0/1px 0/0 100vmax}
.home-page .watch{box-shadow:0 0 0 100vmax var(--bg2);clip-path:inset(0 -100vmax)}
/* The two ways in for a new player. No slogan above the lead story (Ron, Oct 6). */
.home-page .start-here{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 32px;padding:14px 32px;border:0;background:none}
.start-label{color:var(--muted);font:14px/1.5 var(--body);display:inline-flex;align-items:center}
.start-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.start-links a{display:inline-flex;align-items:center;gap:10px;min-height:36px;font-size:14px}
.start-links a span{color:inherit}
.start-links{align-items:center}
.start-links .start-first{font-weight:600;color:var(--ink)}
.start-links .start-first span{color:inherit}
.start-short{display:none}
/* Phones say it shorter, so the new-player row stays one line from 375px up. */
@media(max-width:430px){.start-long{display:none}.start-short{display:inline}}
.home-section-note{margin:-12px 0 20px;color:var(--muted);font:15px/1.5 var(--body)}
.home-top{display:block;padding:0 32px}
.home-page .hero{position:relative;isolation:isolate;min-height:480px;display:flex;flex-direction:row;align-items:center;border:1px solid #404747;overflow:hidden;background:#101414;color:#f3f3ef}
.home-page .hero:after{content:none}
.home-page .hero-body{position:relative;z-index:2;display:block;padding:32px 42px;max-width:65%;order:0}
.home-page .hero h1{font:800 clamp(42px,5vw,76px)/1.01 var(--head);max-width:none;letter-spacing:-.018em;margin:0 0 20px;text-wrap:balance;overflow-wrap:break-word}
.home-page .hero h1[data-headline-length=long]{font-size:clamp(42px,4.7vw,68px)}
.home-page .hero h1[data-headline-length=extra-long]{font-size:clamp(36px,4vw,58px)}
.home-page .hero p{max-width:49ch;font-size:17px;line-height:1.65}
.home-page .hero .name-whole{white-space:nowrap}
.home-page .hero .story-meta{font:14px/1.5 var(--body);color:#c4cacc;margin-bottom:18px;max-width:100%}
.home-page .hero-summary{margin-bottom:22px;color:#d5dbda}
.home-page .hero-body>a:first-of-type:hover{text-decoration:none;color:#a7eff0}
/* The lead's one action uses the shared primary button; the hero only sets its spacing. */
.home-page .lead-action{gap:24px}
.hero-image{position:absolute;z-index:0;inset:0 0 0 35%;margin:0}
.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101414 0%,#101414dc 18%,#10141440 60%,#10141418 100%)}
/* The crop starts near the top: a card's art fills its top two thirds and its title and rules text sit below, which
   a centred crop showed from 1,280 px down (Oct 9). */
.home-page .hero-art{position:static;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:58% 4%;opacity:1}
.home-page .hero .credit{position:absolute;z-index:1;right:16px;bottom:12px;padding:3px 7px;margin:0;font:13px/1.5 var(--body);color:#eee;background:#101414b8;text-align:right}
.home-page .hero-text .hero-body{max-width:900px}
.home-news{border:0;padding:40px 32px;min-width:0}
.home-section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.home-head-links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end}
.home-section-head h2{font:700 44px/1 var(--head);text-transform:uppercase;margin:0;letter-spacing:-.015em}
.home-section-head .story-link{gap:16px;font-size:15px;white-space:nowrap}
.home-reveal-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 20px}
.home-news .wire{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.home-news .wire>a{display:flex;flex-direction:column;gap:0;padding:0;border:0;min-width:0}
.home-news .wire>a:hover{text-decoration:none}
.news-image{overflow:hidden;aspect-ratio:16/9;background:var(--bg2);border:1px solid var(--soft);margin-bottom:18px}
.news-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.home-news .wire>a:hover .news-image img{transform:scale(1.025)}
.home-news .wire h3{font:700 26px/1.12 var(--head);letter-spacing:0;margin:10px 0 0;text-transform:none;text-wrap:pretty}
.home-news .wire>a:hover h3{color:var(--ac)}
.home-news .wire .news-meta,.home-news .wire time{font:14px/1.5 var(--body);color:var(--muted);text-transform:none;margin:0}
.news-meta>span{padding:0 6px;color:var(--ac)}
.home-page .right-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border:1px solid var(--soft);border-top:0;background:var(--bg2)}
.home-page .right-now a{padding:18px 22px;gap:8px;justify-content:start}
.home-page .right-now .eyebrow{font-size:13px}
.home-page .right-now strong{font-size:25px;line-height:1.1}
.home-page .right-now span:last-child{font:14px/1.5 var(--body)}
/* The cell with a thumbnail is a grid; its rows stayed stretched to the cell's height, so its text sat lower than the others'. */
.home-page .right-now a:has(img){align-content:start}
.home-reveals{padding:40px 32px 8px;min-width:0}
.home-reveal-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.home-reveal-row a{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink);text-decoration:none}
.home-reveal-row img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:cover;border-radius:12px;background:var(--bg2);margin-bottom:10px;transition:transform .2s ease}
.home-reveal-row a:hover img,.home-reveal-row a:focus-visible img{transform:translateY(-4px)}
.home-reveal-row a:hover strong{color:var(--ac)}
.home-reveal-row strong{font:600 16px/1.3 var(--body)}
.home-reveal-row span{font:13px/1.5 var(--mono);color:var(--muted)}
/* A date never breaks inside itself ("Oct" / "8"); a narrow tile breaks before it instead. */
.home-reveal-row time{white-space:nowrap}
.home-deck-section{padding:40px 32px 48px;border:0}
.home-decks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.home-deck{display:block;min-width:0;border:1px solid var(--soft);background:var(--bg2)}
.deck-cover{position:relative;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)}
.home-deck img{width:150px;height:210px;object-fit:contain;filter:drop-shadow(0 8px 10px #0004);transition:transform .2s ease}
.deck-finish{position:absolute;right:16px;top:18px;font:700 28px/1 var(--head);color:var(--ac)}
.deck-details{padding:20px}
.home-deck h3{font:700 34px/1.1 var(--head);margin:0 0 8px}
.home-deck p{margin:0 0 8px;font-size:15px}.home-deck .fine{font-size:14px;color:var(--muted)}
.deck-open{display:flex;justify-content:space-between;border-top:1px solid var(--soft);margin-top:18px;padding-top:14px;font:14px/1.5 var(--body);color:var(--ac)}
.home-deck:hover{text-decoration:none;border-color:var(--ac)}.home-deck:hover img{transform:translateY(-4px)}
@media(max-width:1100px){
 .home-page .hero-body{max-width:69%;padding:36px 30px}
 .home-page .hero{min-height:480px}
 .home-page .hero h1[data-headline-length=long]{font-size:52px}
 .home-page .hero h1[data-headline-length=extra-long]{font-size:44px}
 .home-news .wire{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 .home-decks{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-deck{display:grid;grid-template-columns:1fr 1.2fr}
 .deck-cover{padding:24px 12px}.home-deck img{width:120px;height:168px}
 .deck-finish{right:8px;top:8px;font-size:23px}
 .deck-details{align-self:center;padding:18px}
 .home-page .right-now a{padding:18px}
 /* Six columns are too narrow on tablets, so the reveals scroll sideways like Watch below them, running to the
    screen edges, and names hold two lines so every date sits on one line. */
 .home-reveal-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;margin:-8px -32px 0;padding:8px 32px 16px;scroll-padding-inline:32px}
 .home-reveal-row li{flex:0 0 22%;scroll-snap-align:start}
 .home-reveal-row strong{min-height:2.6em}
}
@media(max-width:800px){
 .home-page .hero-body{max-width:75%}
 .home-page .hero h1[data-headline-length=long]{font-size:46px}
 .hero-image{left:20%}.hero-image:after{background:linear-gradient(90deg,#101414 0%,#101414ef 28%,#101414af 55%,#10141430 100%)}
 .home-page .right-now{grid-template-columns:1fr}
 .home-page .right-now a{border-right:0;border-bottom:1px solid var(--soft)}
 .home-page .right-now a:last-child{border-bottom:0}
}
@media(max-width:600px){
 .home-page .start-here{padding:10px 16px 0;gap:0 16px}
 .start-links{gap:0 14px;flex-wrap:wrap}.start-links a{font-size:14px;min-height:44px;gap:6px}
 .start-links>a:last-child{margin-left:auto}
 /* The set bar stays: on a phone it is the first-screen route to the reveals; the Right now strip
    sits below the lead story. */
 .home-top{padding:0}
 .home-page .hero{display:flex;flex-direction:column;min-height:0;border-left:0;border-right:0;align-items:stretch}
 .hero-image{position:relative;inset:auto;order:0;height:clamp(96px,26vw,128px)}
 .hero-image:after{background:linear-gradient(0deg,#101414 0%,#10141438 45%,transparent 100%)}
 .home-page .hero-art{object-position:center 8%}
 .home-page .hero-body{order:1;max-width:none;margin-top:-12px;padding:0 20px 28px}
 .home-page .hero h1,.home-page .hero h1[data-headline-length=long]{font-size:clamp(30px,9.5vw,48px);margin-bottom:18px}
 .home-page .hero h1[data-headline-length=extra-long]{font-size:30px}
 .home-page .hero p{font-size:16px}.home-page .hero .story-meta{font-size:13px;margin-bottom:16px}
 .home-page .hero-summary{margin-bottom:20px}
 .home-page .hero .credit{top:10px;bottom:auto;right:10px;font-size:13px;background:#101414a8}
 .home-news{padding:32px 16px}
 .home-section-head{margin-bottom:20px;gap:12px}
 .home-section-head h2{font-size:34px}
 .home-section-head .story-link{font-size:14px;gap:8px}
 /* The reveals title takes the full width and its two links sit under it, instead of three lines beside them. */
 .home-reveals .home-section-head{flex-direction:column;align-items:start;gap:6px}
 .home-news .wire{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
 .news-image{margin-bottom:12px;aspect-ratio:4/3}
 .home-news .wire h3{font-size:23px;line-height:1.12;margin-top:8px}
 .home-news .wire .news-meta,.home-news .wire time{font-size:13px}
 .news-meta>span{padding:0 2px}
 .home-page .right-now{margin:0;border-inline:0}
 .home-reveals{padding:32px 16px 0}
 /* The sideways row runs to the screen edges; the first card still starts on the page's 16 px edge. */
 .home-reveal-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;margin:-8px -16px 0;padding:8px 16px 16px;scroll-padding-inline:16px}
 .home-reveal-row li{flex:0 0 38%;scroll-snap-align:start}
 .home-deck-section{padding:32px 16px}
 .home-decks{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:16px}
 .home-deck{display:block;flex:0 0 72%;scroll-snap-align:start}
 .home-deck img{width:138px;height:193px}
 .deck-cover{padding:24px 16px}.deck-details{padding:18px}
 .deck-finish{right:14px;top:14px;font-size:27px}
 .home-deck h3{font-size:32px}
}
@media(max-width:360px){
 .home-page .hero-body{padding-left:16px;padding-right:16px}
 .home-news .wire{grid-template-columns:1fr}
 .news-image{aspect-ratio:16/9}
 .home-news .wire h3{font-size:27px}
 .home-section-head h2{font-size:29px}
 .home-deck-section .home-section-head{align-items:start;flex-direction:column;gap:0}
}
@media(prefers-reduced-motion:reduce){.news-image img,.home-deck img,.home-reveal-row img{transition:none}}

/* Pair text-led reports with sourced images, without inventing missing artwork. */
@media(min-width:901px){
 .home-news .wire[data-layout=mixed]{grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:auto auto;gap:24px 32px}
 .home-news .wire[data-layout=mixed] .news-text:nth-child(1 of .news-text){grid-area:1 / 1 / 2 / 2}
 .home-news .wire[data-layout=mixed] .news-text:nth-child(2 of .news-text){grid-area:2 / 1 / 3 / 2;border-top:1px solid var(--soft);padding-top:24px}
 .home-news .wire[data-layout=mixed] .news-illustrated:nth-child(1 of .news-illustrated){grid-area:1 / 2 / 3 / 3}
 .home-news .wire[data-layout=mixed] .news-illustrated:nth-child(2 of .news-illustrated){grid-area:1 / 3 / 3 / 4}
 .home-news .wire[data-layout=mixed] .news-text h3{font-size:31px}
}
@media(max-width:600px){
 .home-news .wire[data-layout=mixed] .news-text{grid-column:1/-1;border-bottom:1px solid var(--soft);padding-bottom:22px}
 .home-news .wire[data-layout=mixed] .news-text h3{font-size:27px}
}

.home-news .wire[data-layout=grid]>.news-text{background:var(--bg2);padding:24px;border-top:2px solid var(--soft)}

/* Timely information stays ahead of the archive without becoming three giant
   phone cards. Full dates, formats and credits remain visible. */
@media(max-width:800px){
 .home-page .right-now a,.home-page .right-now a:has(img){display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 18px;padding:16px 20px;align-items:start}
 .home-page .right-now .eyebrow{grid-column:1;grid-row:1/3;font:13px/1.5 var(--body);letter-spacing:0;text-transform:none;align-self:center}
 .home-page .right-now time{display:block;white-space:normal}
 .home-page .right-now strong{grid-column:2;grid-row:1;font-size:23px;line-height:1.12}
 .home-page .right-now span:last-child{grid-column:2;grid-row:2;font-size:14px;line-height:1.5}
 .home-page .right-now img{display:none}
}
@media(max-width:600px){
 .home-page .right-now a,.home-page .right-now a:has(img){grid-template-columns:88px minmax(0,1fr);gap:5px 14px;padding:16px 20px}
 .home-page .right-now strong{font-size:22px}
}

/* The home page's one invitation to collect. Hidden for signed-in players. */
.home-collect{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;padding:56px 32px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.hc-fan{position:relative;height:clamp(230px,24vw,330px)}
.hc-fan img{position:absolute;top:50%;left:50%;width:clamp(128px,13.5vw,190px);height:auto;border-radius:4.6%/3.3%;box-shadow:0 22px 44px -16px #000;transition:transform .35s cubic-bezier(.2,.9,.25,1.1)}
.hc-fan img:nth-child(1){transform:translate(-118%,-47%) rotate(-11deg)}
.hc-fan img:nth-child(2){z-index:2;transform:translate(-50%,-53%)}
.hc-fan img:nth-child(3){transform:translate(18%,-47%) rotate(11deg)}
.home-collect:hover .hc-fan img:nth-child(1){transform:translate(-128%,-48%) rotate(-14deg)}
.home-collect:hover .hc-fan img:nth-child(3){transform:translate(28%,-48%) rotate(14deg)}
.home-collect .hc-kicker{margin:0 0 10px;color:var(--ac);font:600 14px var(--body)}
.hc-copy h2{margin:0 0 16px;font:700 clamp(40px,4.6vw,68px)/.9 var(--head);text-transform:uppercase;letter-spacing:-.016em;text-wrap:balance}
.hc-copy p{margin:0 0 24px;color:var(--muted);font-size:17px;line-height:1.55;max-width:54ch}
.hc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.hc-actions .button{min-height:50px;padding:0 22px;font-size:17px}
.hc-actions .button.primary:hover{background:transparent;color:var(--ac)}
.hc-actions .button span{font-size:22px;line-height:1;margin-top:-2px}
@media(max-width:700px){
 .home-collect{grid-template-columns:1fr;gap:8px;padding:40px 16px}
 .hc-fan{height:210px;order:-1}
 .hc-fan img{width:118px}
}
@media(prefers-reduced-motion:reduce){.hc-fan img{transition:none}}

/* Phones: one masthead look, signed in or out, at every phone width: the R/W mark, as in the slim bar and on every
   other page. The full wordmark only fitted signed out on wider phones, so the header changed with sign-in and width
   (Oct 9). The :has() keeps this ahead of the signed-in and signed-out rules. */
@media(max-width:600px){
 :root body.home-page .site-header:has(.brand-row) .brand-row .wordmark{font-size:0;padding-bottom:9px;align-self:center}
 /* The same header as every other page: the controls' row is 44 px with no extra padding under it. */
 :root body.home-page .site-header:has(.brand-row) .header-actions{padding-bottom:0}
 :root body.home-page .site-header:has(.brand-row) .brand-row .wordmark::before{content:'R';font-size:22px}
 :root body.home-page .site-header:has(.brand-row) .brand-row .wordmark>.accent{font-size:22px}
 :root body.home-page .site-header:has(.brand-row) .brand-row .wordmark::after{content:'W';font-size:22px}
}
/* Mobile polish: on phones the decorative rift lines crossed the wordmark and the Add button. */

/* Phones: one row for new players ("New to Riftbound? Play your first point"), then the lead story
   with its photo and headline, so the first screen holds both. */
@media(max-width:600px){
 .home-page main{display:flex;flex-direction:column}
 .home-top{display:contents}
 /* A-01: a new player's way in is in the first screen, one row above the lead story. */
 .home-page .start-here{order:-3;padding:0 16px;border-bottom:1px solid var(--soft)}
 .home-page .hero{order:-2}
 .home-page .right-now{border-top:0}
 /* The whole photo at its own shape, with only a short fade under the headline. */
 .hero-image{height:auto;aspect-ratio:16/9}
 .hero-image:after{background:linear-gradient(0deg,#101414 0%,#10141400 32%)}
 .home-page .hero-art{object-position:center 8%}
 .home-page .hero-body{margin-top:0;padding:14px 20px 26px}
 .home-page .hero .credit{top:auto;bottom:8px;right:8px;padding:2px 6px}
 /* Coverage reads as a list: small art beside a sentence-case headline. */
 .home-news .wire,.home-news .wire[data-layout]{display:flex;flex-direction:column;gap:0}
 .home-news .wire>a,.home-news .wire[data-layout]>a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border:0;border-top:1px solid var(--soft);background:none}
 .home-news .wire>a:last-child{border-bottom:1px solid var(--soft)}
 .home-news .wire>.news-text,.home-news .wire[data-layout]>.news-text{grid-template-columns:minmax(0,1fr)}
 .home-news .wire .news-image{margin:0;aspect-ratio:4/3}
 .home-news .wire h3,.home-news .wire[data-layout] .news-text h3{font-size:21px;line-height:1.15;margin-top:4px}

/* The new-player bar keeps one row on a phone: its two links are keys now, so they sit closer. */
.home-page .start-here .start-links{gap:4px 6px}.start-links .button.small{padding:6px 9px}
}

/* Laptops: the footer keeps the page's 32 px edge too (the site footer uses 24 px below 1440). */
@media(min-width:701px){body.home-page .footer{padding-inline:32px}}
/* Desktop (both Oct 9 reviewers): "New to Riftbound? Play your first point" sits at the right end of the tab row
   instead of floating on its own row above the lead story. The row is lifted into the masthead's last 50 px row;
   from 1280 px there is room beside the tabs and Radiance. Phones and tablets keep it as its own row. */
@media(min-width:1280px){
 .home-page main{position:relative}
 .home-page .start-here{position:absolute;z-index:21;top:-51px;right:32px;height:50px;padding:0;align-items:center}
 .home-page .start-here .start-links{gap:4px 24px;align-items:center}
 /* The lead story keeps the 32 px the start row used to give it under the masthead rule. */
 .home-page .home-top{padding-top:32px}
}
/* Wide screens: the masthead (wordmark, controls, tab row) and the slim bar run the full width of the window with the
   same 32 px edge as every other width, as they did before Oct 8 (Ron, Oct 9: "full width was for the navbar"). The
   content does not: every section, and the footer, stays in the 1,376 px frame every other page uses, so home's
   content starts where /cards/ does and the reveal cards stay at the size their images were made for (Oct 9 width
   review). <main> spans the window so the new-player links can end under "Menu +" at the masthead's right edge; its
   sections hold the frame. The lead headline keeps its 1,440 px size and the lead image its 480 px height, so wide
   screens show the 1,440 px page centred.
   This block comes last so it wins over the base home rules above. */
@media(min-width:1441px){
 body.home-page{--home-frame:1376px}
 body.home-page .slim-bar{padding-inline:32px}
 .home-page main{max-width:none}
 .home-page main>:not(.start-here){max-width:calc(var(--home-frame) + 64px);margin-inline:auto}
 body.home-page .footer{padding-inline:max(32px,calc((100% - var(--home-frame))/2))}
 .home-page .hero h1{font-size:72px}
}

/* The deck builder band: copy on the left, the newest set's Legends on the right, each one a started deck. */
.home-build{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;padding:48px 32px;margin-top:32px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.home-build .hb-kicker{margin:0 0 10px;color:var(--ac);font:600 14px var(--body)}
.home-build h2{margin:0 0 14px;font:800 clamp(34px,4vw,52px)/1 var(--head);text-transform:uppercase}
.home-build .hb-copy>p:not(.hb-kicker){max-width:52ch;margin:0 0 22px;font:17px/1.6 var(--body);color:var(--muted)}
.home-build>*{min-width:0}
.hb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.hb-label{margin:0 0 12px;font:500 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hb-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.hb-row a{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink);text-decoration:none}
.hb-row img{display:block;width:100%;height:auto;aspect-ratio:744/1039;object-fit:cover;border-radius:10px;background:var(--bg2);transition:transform .2s ease}
.hb-row a:hover img,.hb-row a:focus-visible img{transform:translateY(-4px)}
.hb-row strong{font:600 15px/1.3 var(--body)}
.hb-row a:hover strong{color:var(--ac)}
.hb-all a{height:100%;justify-content:center;align-items:center;gap:6px;border:1px solid var(--soft);border-radius:10px;font:600 15px/1.3 var(--body);text-align:center;padding:12px 6px}
.hb-all a:hover{border-color:var(--ac);color:var(--ac)}
@media(max-width:900px){.home-build{grid-template-columns:1fr;gap:24px;padding:36px 16px}.hb-row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -16px;padding:4px 16px 12px;scroll-padding-inline:16px;gap:12px}.hb-row li{flex:0 0 104px;scroll-snap-align:start}.hb-all{flex-basis:96px}}
@media(max-width:380px){.start-links .start-label{flex-basis:100%}.start-links>a:last-child{margin-left:0}}
@media(min-width:601px){.start-links .button.small{min-height:36px}}