/* =====================================================================
 INFOOZLE, "THE ALMANAC"
 A bold, print-magazine / newsstand art direction. Warm paper, ink black,
 an electric editorial red, and loud per-department spot colours. Heavy
 display serif + grotesque sans, broken grid, hard offset shadows, thick
 rules, oversized section numerals, paper grain. Deliberately un-templated.
 ===================================================================== */

:root{
 /* paper + ink */
 --paper:#f5efe4; --paper-2:#efe7d8; --ink:#16130f; --ink-2:#3a352d;
 --soft:#6b6457; --faint:#9a9182; --line:#ddd2bd;
 /* the editorial accent + department spots */
 --red:#e8431f; --red-d:#bf3413; --cobalt:#1f4ae0; --teal:#0f8f86; --gold:#e6a008; --plum:#7b2d8e; --pink:#e0457e; --green:#2f9e44;
 /* department mapping (names used in markup) */
 --travel:#0f8f86; --tech:#1f4ae0; --sport:#e8431f; --art:#7b2d8e; --life:#e0457e;
 --maxw:1200px; --read:700px;
 --disp:"Fraunces",Georgia,"Times New Roman",serif;
 --grotesk:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
 --body:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:18px/1.6 var(--body);color:var(--ink);
 background:var(--paper);
 background-image:radial-gradient(rgba(120,100,70.045) 1px,transparent 1.4px);
 background-size:11px 11px;
 -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.read{max-width:var(--read);margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;line-height:1.02}

/* ---------- MASTHEAD ---------- */
header.site{background:var(--ink);color:var(--paper);border-bottom:5px solid var(--red)}
.util{display:flex;justify-content:space-between;align-items:center;gap:12px;
 padding:8px 0;font-family:var(--grotesk);font-weight:500;font-size:.7rem;letter-spacing:.16em;
 text-transform:uppercase;color:#cdbfa6;border-bottom:1px solid rgba(255,255,255.12)}
.util a{color:#cdbfa6}.util a:hover{color:#fff}
.mast{display:flex;flex-direction:column;align-items:center;padding:22px 0 10px;gap:4px;text-align:center}
.logo{display:flex;align-items:center;gap:14px}
.logo svg{width:42px;height:42px}
.logo .word{font-family:var(--disp);font-weight:600;font-size:clamp(2.4rem,6vw,3.6rem);
 color:var(--paper);letter-spacing:-.03em;line-height:.9}
.logo .word b{color:var(--red);font-weight:600}
.mast .tagline{font-family:var(--grotesk);font-weight:500;font-size:.72rem;letter-spacing:.34em;
 text-transform:uppercase;color:#b6a888;margin-top:6px}
.topics{display:flex;flex-wrap:wrap;gap:0;justify-content:center;margin-top:14px;
 border-top:1px solid rgba(255,255,255.16);border-bottom:1px solid rgba(255,255,255.16);width:100%}
.topics a{font-family:var(--grotesk);font-weight:600;font-size:.82rem;letter-spacing:.12em;
 text-transform:uppercase;color:#e7dcc6;padding:12px 20px;border-right:1px solid rgba(255,255,255.12)}
.topics a:first-child{border-left:1px solid rgba(255,255,255.12)}
.topics a:hover{background:var(--red);color:#fff}
.topics a.on{background:var(--paper);color:var(--ink)}

/* ---------- HERO ---------- */
.hero{background:var(--ink);color:var(--paper);padding:34px 0 46px;position:relative;overflow:hidden}
.hero::before{content:"THE ALMANAC OF THE INTERESTING";position:absolute;top:14px;left:0;right:0;
 text-align:center;font-family:var(--grotesk);font-weight:700;font-size:.66rem;letter-spacing:.4em;color:#7a6f59}
.hero h1{font-size:clamp(2.6rem,8vw,6rem);line-height:.92;margin:18px auto 0;max-width:15ch;
 text-align:center;font-weight:600}
.hero h1 .g{font-style:italic;color:var(--red);font-family:var(--disp)}
.hero h1 .u{display:inline-block;border-bottom:6px solid var(--gold);line-height:.8}
.hero p{font-family:var(--grotesk);font-weight:400;font-size:1.12rem;color:#d8ccb4;max-width:54ch;
 margin:22px auto 0;text-align:center}
.hero .dateline{display:flex;align-items:center;gap:16px;max-width:560px;margin:26px auto 0;
 font-family:var(--grotesk);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#a99a7d}
.hero .dateline::before.hero .dateline::after{content:"";flex:1;height:1px;background:rgba(255,255,255.22)}
.ticker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px auto 0;max-width:820px}
.ticker .lead-dot{display:none}
.ticker a{font-family:var(--grotesk);font-weight:600;font-size:.78rem;color:var(--paper);
 border:1px solid rgba(255,255,255.3);padding:8px 14px;transition:.14s}
.ticker a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--gold)}

main.wrap{padding-top:0}

/* ---------- LIVE WIDGET RAIL ---------- */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 auto;
 border:3px solid var(--ink);border-top:0;background:var(--paper)}
@media(max-width:880px){.rail{grid-template-columns:1fr}}
.widget{background:var(--paper);border-right:3px solid var(--ink);display:flex;flex-direction:column}
.widget:last-child{border-right:0}
@media(max-width:880px){.widget{border-right:0;border-bottom:3px solid var(--ink)}.widget:last-child{border-bottom:0}}
.widget .wtop{display:flex;align-items:center;gap:9px;padding:12px 18px;background:var(--ink);color:var(--paper)}
.widget .wtop .ico{font-size:1.1rem}
.widget .wtop h3{font-family:var(--grotesk);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:0;color:var(--paper)}
.widget .wtop .live{margin-left:auto;font-family:var(--grotesk);font-weight:700;font-size:.58rem;
 letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:3px 8px;display:flex;align-items:center;gap:5px}
.widget .wtop .live.sport{background:var(--red);color:#fff}.widget .wtop .live.art{background:var(--gold)}
.widget .wtop .live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:ipulse 1.5s infinite}
@keyframes ipulse{0%,100%{opacity:1}50%{opacity:.2}}
.widget .wbody{flex:1;display:flex;flex-direction:column}
.widget .wfoot{padding:11px 18px;border-top:2px solid var(--ink);font-family:var(--grotesk);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}
.aotd-img{height:200px;background:#1a1712 center/cover no-repeat;filter:contrast(1.04) saturate(1.03);border-bottom:2px solid var(--ink)}
.aotd-meta{padding:14px 18px}
.aotd-meta .t{font-family:var(--disp);font-weight:600;font-size:1.18rem;line-height:1.12;color:var(--ink);margin:0 0 4px}
.aotd-meta .a{font-family:var(--grotesk);font-size:.82rem;color:var(--soft);margin:0}
.otd-body{padding:15px 18px;font-size:.98rem;color:var(--ink);line-height:1.5}
.otd-body .yr{font-family:var(--disp);font-weight:600;font-size:1.15rem;color:var(--red);margin-right:8px}
.otd-body .more{display:block;margin-top:10px;font-family:var(--grotesk);color:var(--soft);font-size:.8rem}
.mini-tbl{width:100%;border-collapse:collapse;font-family:var(--grotesk);font-size:.9rem}
.mini-tbl td{padding:9px 18px;border-bottom:1px solid var(--line)}
.mini-tbl tr:last-child td{border-bottom:0}
.mini-tbl td.tm{font-weight:600;color:var(--ink)}
.mini-tbl td.rec{text-align:right;color:var(--soft);font-variant-numeric:tabular-nums}
.mini-tbl tr:first-child td{background:rgba(232,67,31.08)}
.mini-tbl tr:first-child td.tm{color:var(--red)}

/* ---------- SECTION HEADINGS ---------- */
.depthead{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:18px;margin:64px 0 22px;
 border-bottom:3px solid var(--ink);padding-bottom:10px}
.depthead .no{font-family:var(--disp);font-weight:600;font-size:3.2rem;line-height:.8;color:var(--dept,var(--red));font-style:italic}
.depthead .ttl{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,4vw,2.8rem);line-height:.95}
.depthead .ttl a{color:var(--ink)}
.depthead .kicker{font-family:var(--grotesk);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dept,var(--red));display:block;margin-bottom:4px}
.depthead .note{font-family:var(--grotesk);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);text-align:right;white-space:nowrap;padding-bottom:6px}
@media(max-width:600px){.depthead{grid-template-columns:auto 1fr}.depthead .note{display:none}}

.d-travel{--dept:var(--travel)} .d-tech{--dept:var(--tech)} .d-sport{--dept:var(--sport)}
.d-art{--dept:var(--art)} .d-life{--dept:var(--life)}

/* ---------- DIVIDER ---------- */
.divider{display:flex;align-items:center;gap:18px;margin:70px 0 0;color:var(--ink)}
.divider::before.divider::after{content:"";flex:1;height:3px;background:var(--ink)}
.divider .gl{font-family:var(--grotesk);font-weight:700;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}

/* ---------- EDITOR'S MOSAIC ---------- */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:230px 230px;gap:14px;margin-top:22px}
@media(max-width:880px){.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,200px)}}
@media(max-width:560px){.mosaic{grid-template-columns:1fr;grid-template-rows:repeat(5,200px)}}
.tile{position:relative;overflow:hidden;display:block;background:#1a1712;border:3px solid var(--ink)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:grayscale(.15) contrast(1.05)}
.tile:hover img{transform:scale(1.07)}
.tile .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
 padding:18px 20px;background:linear-gradient(to top,rgba(10,8,4.9),rgba(10,8,4.1) 60%,transparent)}
.tile .k{font-family:var(--grotesk);font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tile .ti{font-family:var(--disp);font-weight:600;color:#fff;line-height:1.04;margin:6px 0 0;font-size:1.12rem}
.tile.big{grid-row:span 2}
.tile.big .ti{font-size:1.9rem;max-width:14ch}
.tile.big .k{font-size:.72rem}
.tile:hover .ti{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}

/* ---------- DEPARTMENT GRID ---------- */
.cat{margin:0}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.cat-grid{grid-template-columns:1fr}}
.item{display:flex;flex-direction:column;background:var(--paper);border:2.5px solid var(--ink);
 transition:transform .12s,box-shadow .12s}
.item:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--dept,var(--ink));text-decoration:none}
.item .thumb{height:160px;background:#e9e1cf center/cover no-repeat;border-bottom:2.5px solid var(--ink);position:relative;filter:saturate(1.02)}
.item .thumb .badge{position:absolute;left:0;bottom:0;font-family:var(--grotesk);font-weight:700;
 font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:5px 11px;background:var(--dept,var(--ink))}
.item .cbody{padding:15px 18px 18px;flex:1;display:flex;flex-direction:column}
.item .src{font-family:var(--grotesk);font-weight:600;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.item h3{font-family:var(--disp);font-weight:600;font-size:1.32rem;line-height:1.08;margin:6px 0 8px;color:var(--ink)}
.item p{font-size:.96rem;color:var(--ink-2);margin:0}
.item .ext{font-family:var(--grotesk);font-weight:700;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;margin-top:auto;padding-top:12px;color:var(--dept,var(--red))}
#travel{--dept:var(--travel)} #tech{--dept:var(--tech)} #sport{--dept:var(--sport)} #art{--dept:var(--art)} #lifestyle{--dept:var(--life)}

/* ---------- "WHY" MANIFESTO ---------- */
.manifesto{margin-top:30px;border:3px solid var(--ink);background:var(--ink);color:var(--paper);
 padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.manifesto::before{content:"\00b6";position:absolute;top:6px;right:24px;font-family:var(--disp);font-style:italic;font-size:6rem;color:rgba(255,255,255.07);line-height:1}
.manifesto .big{font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.1;max-width:24ch;margin:0}
.manifesto .big em{color:var(--gold);font-style:italic}
.manifesto .cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:26px;
 font-family:var(--grotesk);font-size:1rem;line-height:1.6;color:#d8ccb4}
@media(max-width:680px){.manifesto .cols{grid-template-columns:1fr;gap:18px}}
.manifesto .chips{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border-top:1px solid rgba(255,255,255.18)}
.manifesto .chips span{font-family:var(--grotesk);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
 color:#e7dcc6;padding:12px 18px 0 0}

/* ---------- FOOTER ---------- */
footer.site{background:var(--ink);color:#b6a888;margin-top:0;padding:30px 0;
 font-family:var(--grotesk);font-size:.82rem;text-align:center;border-top:5px solid var(--red)}
footer.site a{color:#e7dcc6}footer.site a:hover{color:#fff}

/* =====================================================================
 ARTICLE + CATEGORY PAGES
 ===================================================================== */
.cathero{color:#fff;padding:54px 0 58px;text-align:center;border-bottom:5px solid var(--ink)}
.cathero .crumb{font-family:var(--grotesk);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin:0 0 12px}
.cathero .crumb a{color:#fff}
.cathero h1{font-family:var(--disp);font-size:clamp(2.2rem,5.5vw,3.6rem);margin:0 auto 12px;max-width:20ch}
.cathero p{font-family:var(--grotesk);font-size:1.12rem;max-width:60ch;margin:0 auto;opacity:.95}
.cathero.t-travel{background:var(--travel)}.cathero.t-tech{background:var(--tech)}
.cathero.t-sport{background:var(--sport)}.cathero.t-art{background:var(--art)}.cathero.t-life{background:var(--life)}

article.post{padding:48px 0 10px}
article.post .meta{font-family:var(--grotesk);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
article.post .meta a{color:var(--red)}
article.post h1{font-family:var(--disp);font-weight:600;font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.04;margin:6px 0 22px;color:var(--ink)}
article.post h2{font-family:var(--disp);font-weight:600;font-size:1.7rem;margin:40px 0 12px;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:6px}
article.post p,article.post li{font-family:var(--body);font-size:1.16rem;line-height:1.72}
article.post .lead-p{font-size:1.4rem;line-height:1.45;color:var(--ink);font-family:var(--disp);font-weight:400}
article.post .lead-p::first-letter{float:left;font-family:var(--disp);font-weight:600;font-size:4.6rem;line-height:.72;color:var(--red);padding:8px 14px 0 0}
article.post figure{margin:28px 0}article.post figure img{border:3px solid var(--ink)}
article.post figcaption{font-family:var(--grotesk);font-size:.8rem;color:var(--faint);text-align:center;margin-top:9px;text-transform:uppercase;letter-spacing:.05em}
.callout{background:var(--paper-2);border:0;border-left:5px solid var(--red);padding:18px 22px;margin:28px 0;font-family:var(--grotesk);font-size:1.04rem}
.callout b{color:var(--red)}
.related{border-top:3px solid var(--ink);margin-top:48px;padding-top:18px}
.related h3{font-family:var(--grotesk);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.related a{display:block;padding:9px 0;font-family:var(--disp);font-weight:600;font-size:1.2rem;color:var(--ink);border-bottom:1px solid var(--line)}
.related a:hover{color:var(--red)}

@media(max-width:760px){.hero{padding:26px 0 38px}}

/* ---- category hub section headers (generated by _build.cjs; ported from prior theme, mapped to Almanac vars) ---- */
.cat-h{display:flex;align-items:center;gap:12px;margin:8px 0 18px}
.cat-h .pill{font-family:var(--grotesk);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px}
.cat-h h2{font-size:1.5rem;margin:0;font-family:var(--disp)}
.cat-h .l{flex:1;height:1px;background:var(--line)}