/* R3: the home is an editorial journey, with a horizontal lead and one-row shelves. */
main[data-kind=home] .discover-top{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
main[data-kind=home] .daily{border-radius:0;transform:none;box-shadow:none;overflow:visible;max-height:none}
main[data-kind=home] .daily>figure{min-width:0;position:relative;margin:0;display:flex;flex-direction:column}
main[data-kind=home] .daily>figure picture{display:block;flex:1;min-height:0}
main[data-kind=home] .daily>figure img{position:static;inset:auto;width:100%;height:100%;min-height:0;max-height:none;padding:24px;object-fit:contain}
main[data-kind=home] .daily[data-image-kind=photo]>figure img{filter:none;padding:0;object-fit:cover;object-position:var(--focal,50% 40%)}
main[data-kind=home] .daily>figure>.image-credit{position:relative;inset:auto;display:flex;justify-content:flex-end;align-items:center;min-height:44px;padding:0 8px;background:#120c0c;color:#bcada8}
main[data-kind=home] .daily>figure>.image-credit .credit-info{position:relative;inset:auto}
main[data-kind=home] .daily>figure>.stage-caption{position:static;padding:0 16px 12px;color:#bcada8;font:var(--type-caption);background:#120c0c}
main[data-kind=home] .daily-label{padding:24px;gap:12px;align-content:center;min-width:0}
main[data-kind=home] .daily-label h2{font:var(--type-home-hero);hyphens:none}
main[data-kind=home] .daily-label>p:not(.meta){font:var(--type-home-hook)}
main[data-kind=home] .daily-label .meta{font:var(--type-caption)}
main[data-kind=home] .daily-label .actions{flex-wrap:nowrap}
main[data-kind=home] .daily-label .actions>.button{height:52px;min-height:52px;white-space:nowrap;margin:0;padding-inline:14px}
main[data-kind=home] .daily-topic{display:inline;margin-inline-start:8px}
main[data-kind=home] .daily-asides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px}
main[data-kind=home] .daily-asides>.museum-note{min-width:0;flex:initial}
main[data-kind=home] .daily-asides>[data-mount=continue]:not([hidden]){grid-column:1/-1}
main[data-kind=home] .daily-asides>[data-mount=daily-find]{display:block;grid-column:auto}
main[data-kind=home] .daily-asides .daily-find-content{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px}
main[data-kind=home] .daily-asides .daily-find-content>figure{width:88px;height:100px;grid-row:auto;grid-column:auto}
main[data-kind=home] .daily-find-content img{padding:4px;max-height:100px}
main[data-kind=home] .daily-asides>.museum-note:last-child{flex:initial}
main[data-kind=home] .chronicle,main[data-kind=home] .shelf,main[data-kind=home] .home-band,main[data-kind=home] .home-era-pack{margin-block:64px 0}
main[data-kind=home] .section-heading{margin-bottom:24px}
main[data-kind=home] .era-ribbon{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;border:0;padding:0;overflow:visible}
main[data-kind=home] .era-ribbon>a{display:flex;flex-direction:column;gap:4px;min-width:0;padding:8px 6px 12px;border-radius:0;border:0;border-bottom:6px solid var(--era);background:var(--surfaceRaised);color:var(--ink);text-align:center;transform:none;box-shadow:none}
main[data-kind=home] .era-ribbon>a::before{content:none}
main[data-kind=home] .era-ribbon b{font:var(--type-home-era);hyphens:none;overflow-wrap:normal}
main[data-kind=home] .era-ribbon>a>span{font:var(--type-home-years);font-variant-numeric:tabular-nums lining-nums;white-space:normal;hyphens:auto;color:var(--ink2);margin-top:auto}
main[data-kind=home] .era-find{width:100%;height:88px;margin:0 0 6px;position:relative;background:transparent}
main[data-kind=home] .era-find picture,main[data-kind=home] .era-find img{display:block;width:100%;height:88px;object-fit:contain;background:none;padding:4px;transition:transform var(--t-hover) var(--ease-out)}
main[data-kind=home] .era-find.object-find::before{content:'';position:absolute;inset:auto 15% 0;height:12px;background:radial-gradient(ellipse,rgb(18 12 12/.22),transparent 70%)}
main[data-kind=home] .era-find.photo-find{display:flex;align-items:center;justify-content:center}
main[data-kind=home] .era-find.photo-find picture{width:min(100%,calc(88px * var(--find-ratio)));height:auto}
main[data-kind=home] .era-find.photo-find img{width:100%;height:auto;max-height:88px;padding:0;object-fit:contain}
main[data-kind=home] .era-find>.image-credit{position:absolute;inset:auto 0 0;pointer-events:none}
main[data-kind=home] .era-find .image-kind{font:var(--type-caption);white-space:normal}
main[data-kind=home] .chronicle>.section-heading .eyebrow{display:flex;align-items:center;gap:8px}
main[data-kind=home] .chronicle>.section-heading .control-icon{width:16px;height:16px}
main[data-kind=home] [data-home-era] .story-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - (var(--shelf-count) - 1)*16px)/var(--shelf-count));grid-template-rows:repeat(6,auto);gap:4px 16px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:4px 0}
main[data-kind=home] [data-home-era] .story-grid::-webkit-scrollbar{display:none}
main[data-kind=home] [data-home-era] .story-card{width:100%;max-width:none;min-width:0;grid-row:1/span 6;scroll-snap-align:start}
main[data-kind=home] [data-home-era] .story-card figure img{height:120px;min-height:0;object-fit:contain}
main[data-kind=home] [data-home-era] .story-card .card-label h3{font:var(--type-home-card);min-height:0}
main[data-kind=home] [data-home-era] .story-card .hook{font:var(--type-caption);min-height:0}
main[data-kind=home] [data-home-era] .section-heading{flex-wrap:wrap}
main[data-kind=home] [data-home-era] .section-heading>a{height:auto;min-height:44px;width:auto;white-space:normal;font:var(--type-home-all)}
main[data-kind=home] [data-home-era] .section-heading>a>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
main[data-kind=home] .home-band{padding:24px;display:grid;align-items:center;gap:24px;min-height:200px;color:#f2eae6;background:#120c0c;border-radius:0;transform:none;box-shadow:none}
main[data-kind=home] .home-band h2{font:var(--type-home-band);margin:4px 0 12px}
main[data-kind=home] .home-band .meta{color:#bcada8}
main[data-kind=home] .home-band .eyebrow{color:#e0956a;margin:0}
main[data-kind=home] .home-band .button{margin:0;white-space:nowrap}
main[data-kind=home] .collection-band{grid-template-columns:220px minmax(0,1fr)}
main[data-kind=home] .collection-band h2{font-family:var(--family-ui);font-variant-numeric:tabular-nums lining-nums;font-weight:600}
main[data-kind=home] .collected-objects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:12px}
main[data-kind=home] .collected-objects a{min-height:88px;display:block}
main[data-kind=home] .collected-objects figure{background:transparent}
main[data-kind=home] .collected-objects img{height:116px;width:100%;object-fit:contain;transition:transform var(--t-hover) var(--ease-out)}
main[data-kind=home] .collected-objects .image-credit{position:static}
main[data-kind=home] .home-person{grid-template-columns:140px minmax(0,1fr) auto;min-height:220px}
main[data-kind=home] .home-person>figure{grid-column:auto;grid-row:auto;width:140px;align-self:stretch}
main[data-kind=home] .home-person>figure img{width:140px;height:172px;object-fit:cover}
main[data-kind=home] .home-person>div{grid-column:auto;grid-row:auto}
main[data-kind=home] .home-person p:not(.eyebrow):not(.meta){font:var(--type-caption);margin:8px 0 0}
main[data-kind=home] .listening-plate{grid-template-columns:220px minmax(0,1fr) auto;min-height:200px}
main[data-kind=home] .queue-objects{display:flex;align-items:center;min-width:0;padding-inline-end:16px}
main[data-kind=home] .queue-objects figure{width:88px;flex:none;background:transparent;margin:0 -24px 0 0;position:relative}
main[data-kind=home] .queue-objects img{width:88px;height:112px;object-fit:contain;filter:drop-shadow(0 8px 8px #000)}
main[data-kind=home] .queue-objects .image-credit{position:static}
main[data-kind=home] .band-actions{display:grid;gap:12px}
main[data-kind=home] [hidden]{display:none!important}
@media(min-width:1100px){
 main[data-kind=home] .discover-top{grid-template-rows:clamp(360px,calc(100vh - 430px),520px) auto}
 main[data-kind=home] .daily:not([data-image-kind=photo])>figure img{padding:8px}
 main[data-kind=home] .daily{display:grid;grid-template-columns:58% 42%;grid-template-rows:minmax(0,1fr);height:auto;min-height:0;align-self:stretch}
 main[data-kind=home] .daily>figure{grid-column:1;grid-row:1;height:100%;min-height:0}
 main[data-kind=home] .daily>.daily-label{grid-column:2;grid-row:1}
 main[data-kind=home] .home-era-pack{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;align-items:start}
 main[data-kind=home] .home-era-pack>.shelf{display:block;grid-row:auto;margin:0}
 main[data-kind=home] .home-era-pack .story-grid{grid-row:auto;--shelf-count:var(--era-share)!important}
}
@media(max-width:1099px){
 main[data-kind=home] .era-ribbon{display:flex;overflow-x:auto;gap:0}
 main[data-kind=home] .era-ribbon>a{flex:0 0 132px}
 main[data-kind=home] .daily-asides{grid-template-columns:repeat(2,minmax(0,1fr))}
 main[data-kind=home] .daily-asides>[data-mount=daily-find]{grid-column:1/-1}
 main[data-kind=home] .listening-plate{grid-template-columns:140px minmax(0,1fr)}
 main[data-kind=home] .listening-plate .band-actions{grid-column:1/-1;display:flex}
 main[data-kind=home] [data-home-era] .story-grid{grid-auto-columns:260px;display:grid}
 main[data-kind=home] [data-home-era] .story-card{flex:none}
}
@media(max-width:759px){
 main[data-kind=home] .daily>figure{height:220px}
 main[data-kind=home] .daily-label{padding:16px;gap:8px}
 main[data-kind=home] .daily-label h2{font:var(--type-home-phone)}
 main[data-kind=home] .daily-label>p:not(.meta){font:var(--type-body)}
 main[data-kind=home] .daily-asides{display:flex;overflow-x:auto}
 main[data-kind=home] .daily-asides>.museum-note{flex:0 0 calc(100% - 24px)}
 main[data-kind=home] .chronicle,main[data-kind=home] .shelf,main[data-kind=home] .home-band,main[data-kind=home] .home-era-pack{margin-top:40px}
 main[data-kind=home] .section-heading{margin-bottom:16px}
 main[data-kind=home] .home-band{padding:20px;gap:16px;grid-template-columns:minmax(0,1fr)}
 main[data-kind=home] .collected-objects{grid-template-columns:repeat(3,minmax(0,1fr))}
 main[data-kind=home] .collected-objects img{height:88px}
 main[data-kind=home] .home-person{display:grid;grid-template-columns:88px minmax(0,1fr)}
 main[data-kind=home] .home-person>figure{width:88px;order:0}
 main[data-kind=home] .home-person>figure img{width:88px;height:116px}
 main[data-kind=home] .home-person>.button{grid-column:1/-1;width:100%}
 main[data-kind=home] .home-band h2{font:var(--type-title)}
 main[data-kind=home] .listening-plate .band-actions{display:grid}
 main[data-kind=home] .queue-objects{justify-content:center}
}
@media(hover:hover){
 main[data-kind=home] .era-ribbon>a:hover{background:var(--wash-1);color:var(--ink);box-shadow:none;transform:none}
 main[data-kind=home] .era-ribbon>a:hover img{transform:translateY(-4px)}
 main[data-kind=home] .collected-objects a:hover{background:rgb(242 234 230/.08)}
 main[data-kind=home] .collected-objects a:hover img{transform:translateY(-4px)}
}
main[data-kind=home] .era-ribbon>a:active,main[data-kind=home] .collected-objects a:active{background:var(--wash-2)}
main[data-kind=home] .collected-objects a:focus-visible{outline:2px solid #e0956a;outline-offset:2px}
@media(prefers-reduced-motion:reduce){main[data-kind=home] .era-ribbon>a img,main[data-kind=home] .collected-objects a img{transform:none!important;transition:none}}

main[data-kind=home] :is(.daily>figure,.home-person,.collected-objects,.queue-objects) .image-credit>.image-kind{position:static;display:block;max-width:none;margin:0;padding:0;background:none;color:#bcada8;white-space:normal;overflow:visible;text-overflow:clip;font:var(--type-caption)}

main[data-kind=home] .era-date-range{display:inline;margin:0;font:inherit;color:inherit;white-space:nowrap}
/* A shelf aligns its own reading roles; arrows sit on the image edge. */
main[data-kind=home] .scroll-strip:has(>[data-era-grid]){padding-inline:0}
main[data-kind=home] .scroll-strip:has(>[data-era-grid])>.strip-arrow{top:80px;background:var(--surfaceRaised);box-shadow:var(--lift-1)}
main[data-kind=home] [data-home-era] .story-card figure img{height:120px}
main[data-kind=home] [data-home-era] .story-grid{row-gap:4px;padding-block:4px}
main[data-kind=home] [data-home-era] .story-card,main[data-kind=home] [data-home-era] .card-label,main[data-kind=home] [data-home-era] .story-card-link{row-gap:4px}
main[data-kind=home] [data-home-era] .card-label{padding:8px}
main[data-kind=home] [data-home-era] .card-label .meta{padding-top:0}
main[data-kind=home] .daily-asides .guess-options .button{padding-inline:8px;min-width:0}
@media(max-width:759px){
 main[data-kind=home] .daily-asides{flex-direction:row!important;align-items:start}
 main[data-kind=home] .daily-asides>.museum-note{flex:0 0 calc(100% - 24px);width:auto;align-self:start}
}
@media(max-width:759px){main[data-kind=home] .daily-asides>.museum-note{flex:0 0 calc(100% - 24px)!important}}
@media(hover:hover){main[data-kind=home] .scroll-strip:has(>[data-era-grid])>.strip-arrow:hover{background:color-mix(in srgb,var(--ink) 8%,var(--surfaceRaised));color:var(--ink)}}
main[data-kind=home] .scroll-strip:has(>[data-era-grid])>.strip-arrow:active{background:color-mix(in srgb,var(--ink) 12%,var(--surfaceRaised));color:var(--ink)}
main[data-kind=home] .daily-label>.story-card-link{padding-block:4px}
main[data-kind=home] .daily>figure>.image-credit{z-index:4}

/* Sparse eras get horizontal plates instead of oversized single-column cards. */
@media(min-width:1100px){
 main[data-kind=home] .shelf[data-count="3"] .story-card{grid-template-columns:96px minmax(0,1fr);grid-template-rows:subgrid}
 main[data-kind=home] .shelf[data-count="3"] .story-card>figure{grid-column:1;grid-row:1/span 6;height:100%}
 main[data-kind=home] .shelf[data-count="3"] .story-card>figure img{height:100%;max-height:220px}
 main[data-kind=home] .shelf[data-count="3"] .story-card>.card-label{grid-column:2;grid-row:1/span 6}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-grid{display:block}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card>figure{grid-column:1;grid-row:1;height:160px}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card>figure img{height:160px}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .card-label{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto;align-content:center;gap:8px 24px;padding:16px}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card-link{display:block;grid-column:1;grid-row:auto}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .card-label>:is(.hook,.meta,.progress-badge){grid-column:1;grid-row:auto}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .card-actions-wrap{grid-column:2;grid-row:1/span 4;align-self:center}
 main[data-kind=home] .home-person{grid-template-columns:116px minmax(0,1fr) auto;padding:20px;min-height:220px}
 main[data-kind=home] .home-person>figure{width:116px}
 main[data-kind=home] .home-person>figure img{width:116px;height:156px}
}
main[data-kind=home] .daily-label>*{margin:0}
@media(min-width:1100px){
 main[data-kind=home] .home-era-pack .section-heading{flex-direction:column;align-items:start;gap:4px;margin-bottom:16px}
 main[data-kind=home] .home-era-pack .section-heading h2{font:var(--type-home-card)}
}
/* The shelf's concise card keeps the full story introduction in the catalogue. */
main[data-kind=home] [data-home-era] .story-grid{grid-template-rows:repeat(6,auto)}
main[data-kind=home] [data-home-era] .story-card{grid-row:1/span 6}
main[data-kind=home] [data-home-era] .story-card>.card-label{grid-row:2/span 5}
main[data-kind=home] [data-home-era] .card-label>.meta{grid-row:3}
main[data-kind=home] [data-home-era] .card-label>.progress-badge{grid-row:4}
main[data-kind=home] [data-home-era] .card-label>.card-actions-wrap{grid-row:5}
@media(min-width:1100px){
 main[data-kind=home] .brand-masthead{height:64px}
 main[data-kind=home] .brand-masthead h1{font:var(--type-display)}
 main[data-kind=home] .chronicle>.section-heading{align-items:end;gap:16px}
 main[data-kind=home] .chronicle .start-paths{display:flex;gap:8px;margin:0 0 0 auto;max-width:58%;flex-wrap:wrap;justify-content:flex-end}
 main[data-kind=home] .chronicle .start-paths .button{font:var(--type-caption);padding-inline:12px;flex:none}
 main[data-kind=home] .chronicle>.section-heading>a{margin-left:0}
 main[data-kind=home] .shelf[data-count="3"] .story-card>:is(figure,.card-label){grid-row:1/span 6}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .card-label{grid-row:1}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .card-label>:is(.meta,.progress-badge){grid-row:auto}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .card-actions-wrap{grid-row:1/span 3}
 main[data-kind=home] .colophon-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;column-gap:16px}
 main[data-kind=home] .colophon-sections h2{grid-column:1/-1}
 main[data-kind=home] .colophon-language h2{width:100%}
}
@media(max-width:1099px){main[data-kind=home] .chronicle>.section-heading .start-paths{width:100%;order:2;margin:0;max-width:none}}

@media(min-width:1600px){
 main[data-kind=home]>.collection .collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
 main[data-kind=home]>.collection .app-plate{display:block;min-width:0;padding:16px 0}
 main[data-kind=home]>.collection .app-identity{min-width:0;display:flex;align-items:start}
 main[data-kind=home]>.collection .app-identity>div{min-width:0}
 main[data-kind=home]>.collection .badge-scroll{width:100%;max-width:100%;margin:0;padding:24px 0 4px;overflow:visible}
 main[data-kind=home]>.collection .store-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;width:100%;min-width:0}
 main[data-kind=home]>.collection .store-pair{display:contents}
 main[data-kind=home]>.collection .web-control{grid-column:1/-1}
 main[data-kind=home]>.collection .promo-control{max-width:100%;width:100%}
}

main[data-kind=home] .colophon-language .footer-language{width:100%;max-width:240px}
main[data-kind=home] .site-colophon .footer-author{white-space:normal}
@media(min-width:1100px){
 main[data-kind=home] .brand-masthead{min-height:0}
 main[data-kind=home] .colophon-grid{grid-template-columns:1.1fr 1.4fr 1fr 1fr;gap:24px}
 main[data-kind=home] .colophon-brand,main[data-kind=home] .colophon-sections,main[data-kind=home] .colophon-project,main[data-kind=home] .colophon-language{grid-column:auto;grid-row:auto}
 main[data-kind=home] .colophon-language{display:block}
 main[data-kind=home] .site-colophon{padding-block:24px 20px}
 main[data-kind=home] .colophon-bottom{margin-top:16px}
 main[data-kind=home] .home-person>figure img{height:140px}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card>figure,main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card>figure img{height:120px}
}
@media(min-width:1600px){
 main[data-kind=home] .page-content{max-width:calc(1240px + 2 * var(--gutter))}
 main[data-kind=home] .shelf[data-count="3"] .story-card>figure img{height:100%;max-height:180px}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card>figure img{height:120px}
 main[data-kind=home]>.collection .app-identity h3{font:var(--type-headline)}
}
@media(min-width:1600px){
 main[data-kind=home] [data-home-era] .story-card figure img,main[data-kind=home] .home-era-pack .shelf[data-count="1"] .story-card>figure img{height:88px}
 main[data-kind=home] .shelf[data-count="3"] .story-card>figure img{height:100%;max-height:180px}
 main[data-kind=home] .shelf[data-count="1"]:not(.home-era-pack .shelf) .story-card>figure img{height:120px}
 main[data-kind=home] .site-colophon{padding-block:20px 16px}
 main[data-kind=home] .colophon-bottom{margin-top:12px}
 main[data-kind=home] .how-it-works a{padding-block:8px}
}
main[data-kind=home] .chronicle>.section-heading>a,main[data-kind=home] .home-person h2>a{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px}
@media(max-width:1099px){main[data-kind=home] .chronicle>.section-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}main[data-kind=home] .chronicle>.section-heading>a{justify-self:start}}
/* The last snap point is the actual scroll end, so the final era/card is reachable. */
main[data-kind=home] :is(.era-ribbon,[data-era-grid],.daily-asides){scroll-padding-inline:0}
main[data-kind=home] [data-era-grid]{padding-inline:0}
main[data-kind=home] .era-ribbon>a:last-child,main[data-kind=home] [data-era-grid]>.story-card:last-child,main[data-kind=home] .daily-asides>.museum-note:last-child{scroll-snap-align:end}
main[data-kind=home] :is(h1,h2,h3){hyphens:none}
main[data-kind=home] .home-person h2{overflow-wrap:anywhere}

/* Image kinds are readable captions, outside the artwork and on an opaque surface. */
main[data-kind=home] [data-home-era] .image-credit>.image-kind{position:static;display:block;max-width:none;margin:0;padding:4px 8px;background:var(--surfaceRaised);color:var(--ink2);white-space:normal;overflow:visible;text-overflow:clip;font:var(--type-caption)}
main[data-kind=home] .era-ribbon .era-dates{min-width:0;overflow-wrap:anywhere}

/* A returning visitor gets an equally compact editorial page. */
@media(min-width:1600px){
 main[data-kind=home] .daily-asides:has(>[data-mount=continue]:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}
 main[data-kind=home] .daily-asides>[data-mount=continue]:not([hidden]){grid-column:auto}
 main[data-kind=home] .site-colophon{padding-block:12px 8px}
 main[data-kind=home] .colophon-bottom{margin-top:4px}
}
main[data-kind=home] [data-story-badge]:not([hidden]){display:flex;align-items:center;gap:4px}
main[data-kind=home] [data-story-badge]>.completed-find,main[data-kind=home] [data-story-badge]>.control-icon{flex:none;margin:0}

/* R3b: the first phone screen reserves room for both real story actions. */
@media(max-width:759px){
 main[data-kind=home] .page-content{display:flex;flex-direction:column}
 main[data-kind=home] .page-header{margin-bottom:8px}
 main[data-kind=home] .page-content>.how-it-works{order:1;margin-block:20px 0}
 main[data-kind=home] .page-content>:is(.chronicle,.shelf,.home-band,.home-era-pack,[data-home-saved]){order:2}
 main[data-kind=home] .brand-masthead{display:contents}
 main[data-kind=home] .brand-masthead>div:first-child{margin:8px 0 12px}
 main[data-kind=home] .brand-masthead h1{font:var(--type-title)}
 main[data-kind=home] .brand-masthead .eyebrow{margin:0 0 4px}
 main[data-kind=home] .brand-masthead .stat-strip{order:1;display:flex;flex-wrap:wrap;justify-content:space-between;margin:8px 0 0;padding:8px 0;gap:8px}
 main[data-kind=home] .brand-masthead .stat-strip>div{display:flex;flex-direction:row;align-items:baseline;gap:4px;padding:0;border:0}
 main[data-kind=home] .brand-masthead .stat-strip b{font:var(--type-headline)}
 main[data-kind=home] .brand-masthead .stat-strip span{font:var(--type-caption)}
 main[data-kind=home] .daily>figure{flex:none;height:clamp(80px,calc(100svh - 560px),160px)}
 main[data-kind=home] .daily>figure picture{flex:1;height:100%;min-height:0}
 main[data-kind=home] .daily>figure img{display:block;height:100%;padding:4px;object-fit:contain}
 main[data-kind=home] .daily>figure>.image-credit{position:absolute;inset:auto 4px 4px auto;min-height:44px;padding:0}
 main[data-kind=home] .daily>figure>.stage-caption{position:absolute;inset:auto 52px 4px 8px;padding:0;max-width:calc(100% - 60px)}
 main[data-kind=home] .daily-label{padding:12px;gap:6px}
 main[data-kind=home] .daily-topic{margin:0}
 main[data-kind=home] .daily-label>.story-card-link{padding-block:0}
 main[data-kind=home] .daily-label .actions{margin-top:4px}
}
/* Tighter shelf rhythm keeps the returning-reader collection in the journey. */
@media(min-width:1100px){
 main[data-kind=home] :is(.chronicle,.shelf,.home-band,.home-era-pack){margin-top:32px}
 main[data-kind=home] .section-heading{margin-bottom:16px}
 main[data-kind=home] .collection-band{min-height:152px;padding-block:16px}
 main[data-kind=home] .collected-objects img{height:88px}
 main[data-kind=home] .home-era-pack{align-items:stretch;grid-template-rows:auto minmax(0,1fr)}
 main[data-kind=home] .home-era-pack>.shelf{display:grid;grid-row:1/span 2;grid-template-rows:subgrid}
 main[data-kind=home] .home-era-pack>.shelf>.scroll-strip{align-self:stretch}
 main[data-kind=home] .home-era-pack .story-grid{height:100%}
}

main[data-kind=home] .card-actions .control-icon{flex:none;width:20px;height:20px}

/* Ten labels need their natural reading width beside the desktop sidebar. */
@media(min-width:1100px) and (max-width:1599px){
 main[data-kind=home] .era-ribbon{display:flex;overflow-x:auto}
 main[data-kind=home] .era-ribbon>a{flex:0 0 132px}
 main[data-kind=home] .scroll-strip:has(>.era-ribbon)>.strip-arrow{top:52px}
}
/* D5 N25: note cards share a baseline and dates stay intact. */
@media(min-width:760px){main[data-kind=home] .daily-asides{align-items:stretch}main[data-kind=home] .daily-asides>.museum-note{align-self:stretch;margin-bottom:0}}
main[data-kind=home] .daily-asides .guess-options{display:grid;grid-template-columns:minmax(0,1fr)}
main[data-kind=home] .daily-asides .guess-options .button{white-space:nowrap;min-width:96px;font-variant-numeric:tabular-nums lining-nums}
.home-paths-trigger{display:none}
@media(max-width:1359px){
 main[data-kind=home] .chronicle>.section-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
 main[data-kind=home] .chronicle>.section-heading>div{width:100%}
 main[data-kind=home] .chronicle .start-paths{display:none}
 main[data-kind=home] .chronicle .home-paths-trigger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;font:var(--type-caption)}
 main[data-kind=home] .chronicle>.section-heading>a{margin:0}
}

/* Active daily card owns the phone carousel height, including after hydration. */
@media(max-width:759px){main[data-kind=home] .daily-asides{overflow-y:hidden;transition:height var(--t-ui) var(--ease-out)}}
@media(prefers-reduced-motion:reduce){main[data-kind=home] .daily-asides{transition:none}}

main[data-kind=home] .collection-band.collection-started{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:20px;gap:16px}
main[data-kind=home] .collection-started .collected-objects{display:flex;gap:12px}
main[data-kind=home] .collection-started .collected-objects a{width:88px}
main[data-kind=home] .collection-started .collected-objects img{height:88px}
@media(max-width:759px){main[data-kind=home] .collection-band.collection-started{grid-template-columns:minmax(0,1fr) 88px}main[data-kind=home] .collection-started .collected-objects{flex-direction:column}main[data-kind=home] .collection-started h2{margin-block:4px}}

/* W14 H1/H5/H6: a short kicker and one shelf for the small eras. */
main[data-kind=home] .daily-label .eyebrow{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--type-final-15);letter-spacing:.12em}
main[data-kind=home] .daily-topic{margin:0}
main[data-kind=home] [data-home-era] .card-actions .button:not(.secondary) .control-icon{display:block;width:16px;height:16px;flex:none}
main[data-kind=home] [data-home-era] .card-actions .button{height:44px;min-height:44px;gap:8px}
main[data-kind=home] .more-eras-shelf .story-grid{grid-auto-columns:203px;--shelf-count:5}
@container card (max-width:199px){main[data-kind=home] [data-home-era] .card-actions .button:not(.secondary){width:44px;min-width:44px;padding:0}main[data-kind=home] [data-home-era] .card-actions .button:not(.secondary) [data-action-label]{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}}