/* Front page and category pages: magazine index in the Highlighter style.
   Lead story with a big photo, two side stories, category sections as ruled rows, full article index, about band. */
.home{font-size:17px}
.home h2,.home h3{margin-top:0}
.home-wrap{max-width:1080px;margin:0 auto;padding:44px 0 72px;display:grid;gap:52px}
.home-wrap > *{min-width:0}

.intro{display:grid;gap:14px}
.intro h1{font-size:clamp(2.3rem,6vw,4rem);line-height:1;max-width:16ch}
.intro .dek{max-width:58ch;color:var(--muted)}
.crumbs{font-family:var(--ui);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline wavy var(--hl)}

.tag{justify-self:start;font-family:var(--display);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:3px 7px;text-decoration:none;line-height:1.35}
a.tag:hover{background:var(--hl);color:var(--on-hl);text-decoration:none}
.sum{font-size:1.02rem;line-height:1.6}
.meta{font-family:var(--ui);font-size:.82rem;font-weight:600;color:var(--muted)}
.more{justify-self:start;font-family:var(--ui);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cobalt);text-decoration:none}
.more:hover{text-decoration:underline wavy var(--hl);text-underline-offset:5px}
.home h2 a,.home h3 a{color:var(--ink);text-decoration:none}
.home h2 a:hover,.home h3 a:hover{text-decoration:underline wavy var(--hl);text-underline-offset:6px;text-decoration-thickness:3px}

/* Images and placeholders */
.pic{display:block;width:100%;height:auto;object-fit:cover;border:3px solid var(--ink);background:var(--hl-soft)}
.pic.wide{aspect-ratio:16/9}
.pic.thumb{aspect-ratio:3/2}
.ph{display:grid;place-items:center;border:3px solid var(--ink);background:var(--hl-soft);color:var(--ink);font-family:var(--display);text-transform:uppercase;text-align:center;padding:12px;line-height:1}
.ph.wide{aspect-ratio:16/9;font-size:clamp(1.6rem,4vw,2.6rem)}
.ph.thumb{aspect-ratio:3/2;font-size:1.2rem}
.ph span{background:var(--hl);color:var(--on-hl);padding:.1em .25em}
.pic-link{display:block;line-height:0}
.pic-link:hover .pic,.pic-link:hover .ph{box-shadow:6px 6px 0 var(--shadow);transform:translate(-2px,-2px)}
@media (prefers-reduced-motion:no-preference){.pic,.ph{transition:transform .12s ease,box-shadow .12s ease}}

/* Featured */
.featured{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:860px){.featured{grid-template-columns:minmax(0,1fr)}}
.lead{display:grid;gap:14px}
.lead h2{font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.02}
.sides{display:grid;gap:30px}
.side{display:grid;gap:10px}
.side h3{font-size:1.4rem;line-height:1.08}

/* Part lists: the 4 articles in a guide */
ol.parts{list-style:none;margin:2px 0 0;padding:0;border-top:2px solid var(--ink)}
ol.parts li{padding:11px 0;border-bottom:1px solid var(--line)}
ol.parts li a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:baseline;color:var(--ink);text-decoration:none}
ol.parts li a:hover .pt{text-decoration:underline wavy var(--hl);text-underline-offset:4px}
.pn{font-family:var(--display);font-size:.72rem;text-transform:uppercase;color:var(--cobalt);white-space:nowrap}
.pt{font-size:.98rem;line-height:1.4}
.pm{font-family:var(--ui);font-size:.8rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Category sections */
.cat{display:grid}
.cat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:end;border-bottom:3px solid var(--ink);padding-bottom:12px;scroll-margin-top:16px}
.cat-head h2{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1}
.cat-head p{grid-column:1;color:var(--muted);font-size:1rem}
.cat-head .more{grid-column:2;grid-row:1;align-self:end;white-space:nowrap}
.count{font-family:var(--ui);font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.guide-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,1.2fr);gap:28px;padding:26px 0 28px}
.guide-row + .guide-row{border-top:1px solid var(--line)}
@media (max-width:900px){.guide-row{grid-template-columns:minmax(0,200px) minmax(0,1fr)}.guide-row ol.parts{grid-column:1/-1}}
@media (max-width:560px){.guide-row{grid-template-columns:minmax(0,1fr);gap:14px}}
.gr-head{display:grid;gap:8px;align-content:start}
.gr-head h3{font-size:1.45rem;line-height:1.08}

/* Article list with descriptions (category pages) */
.alist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:28px 32px}
.alist li{display:grid;gap:6px;align-content:start;border-top:2px solid var(--ink);padding:14px 0 0}
.alist h3{font-size:1.15rem;line-height:1.15}
.alist p{color:var(--muted);font-size:.95rem;line-height:1.5}

/* All articles */
ul.all{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));column-gap:40px}
ul.all li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
ul.all a{flex:1;min-width:0;color:var(--ink);text-decoration:none;font-size:.98rem;line-height:1.4}
ul.all a:hover{text-decoration:underline wavy var(--hl);text-underline-offset:4px}
.ac{font-family:var(--ui);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);white-space:nowrap}

/* Other categories (category pages) */
.cats-nav{display:flex;flex-wrap:wrap;gap:12px}
.cats-nav a{font-family:var(--display);text-transform:uppercase;font-size:.9rem;color:var(--ink);text-decoration:none;border:2px solid var(--ink);padding:8px 14px}
.cats-nav a:hover{background:var(--hl);color:var(--on-hl)}

/* About + link back to Reward Land */
.about{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;border-top:3px solid var(--ink);padding:26px 0 0;align-items:start}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr)}}
.about > div{display:grid;gap:12px;max-width:62ch}
.about h2{font-size:1.6rem}
.rl-box{background:var(--hl);color:var(--on-hl);border:3px solid var(--edge);box-shadow:6px 6px 0 var(--shadow);padding:22px;display:grid;gap:10px;margin-right:6px}
.rl-box h3{font-size:1.3rem}
.rl-btn{justify-self:start;font-family:var(--ui);font-weight:800;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;background:var(--btn);color:#FFFFFF;border:2px solid var(--edge);padding:10px 16px}
.rl-btn:hover{text-decoration:none;background:#1530D9}