/* geeksubscriptionbox.com — translated from the approved Claude Design. */
:root{
--bg:#F6F4EF;--surface:#FFFFFF;--surface2:#FBFAF6;--ink:#151220;--ink2:#4A4459;--muted:#6C6679;
--line:#E4DFD4;--line2:#CFC8B9;--accent:#6C4DFF;--accent-ink:#FFFFFF;--accent-soft:#EEE9FF;
--accent-deep:#5335E0;--amber:#8A5A00;--good:#0F7A55;--band:#151220;--band-ink:#F6F4EF;
--shadow:0 1px 0 rgba(21,18,32,.05);
}
:root[data-theme="dark"]{
--bg:#0D0B12;--surface:#171420;--surface2:#1E1A2A;--ink:#F3F1F8;--ink2:#C7C2D6;--muted:#9C96B0;
--line:#2C2739;--line2:#3B3552;--accent:#9B85FF;--accent-ink:#14101F;--accent-soft:#241E3B;
--accent-deep:#B3A2FF;--amber:#FFC04D;--good:#3FCB99;--band:#1E1A2A;--band-ink:#F3F1F8;--shadow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Archivo,system-ui,sans-serif;
-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--ink)}
img{max-width:100%;height:auto}
input,textarea,button,select{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.display{font-family:'Archivo Black',Archivo,sans-serif;letter-spacing:-0.02em}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.head-in{padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.mark{position:relative;width:34px;height:34px;border:2px solid var(--ink);border-radius:5px;background:var(--surface);display:block;flex:none}
.mark-tape{position:absolute;left:-2px;right:-2px;top:9px;height:8px;background:var(--accent);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.mark-string{position:absolute;left:50%;top:-4px;width:2px;height:13px;background:var(--ink);transform:translateX(-1px)}
.brand-text{display:block;line-height:1}
.brand-name{display:block;font-family:'Archivo Black',Archivo,sans-serif;font-size:15px;letter-spacing:-0.02em;color:var(--ink)}
.brand-tag{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{padding:8px 11px 6px;font-size:14px;font-weight:600;color:var(--ink2);border-radius:4px}
.nav a:hover{background:var(--accent-soft);color:var(--ink)}
.nav-bar{display:block;height:3px;margin-top:5px;border-radius:2px;background:var(--accent);opacity:0}
.nav a.on .nav-bar{opacity:1}
.theme-btn{margin-left:8px;width:38px;height:38px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);border-radius:5px;cursor:pointer;font-size:15px}
.theme-btn:hover{border-color:var(--accent)}

/* ---------- buttons & badges ---------- */
.btn{display:inline-block;border-radius:5px;padding:13px 20px;font-weight:700;font-size:15px;cursor:pointer;border:2px solid transparent}
.btn-ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ink:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-accent:hover{filter:brightness(1.1);color:var(--accent-ink)}
.btn-band{background:transparent;color:var(--band-ink);border-color:rgba(150,140,180,.5)}
.btn-band:hover{border-color:var(--band-ink);color:var(--band-ink)}
.badge{display:inline-block;transform:rotate(-1.5deg);background:var(--accent);color:var(--accent-ink);border:2px solid var(--ink);border-radius:4px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.kicker{display:inline-block;background:var(--accent-soft);color:var(--accent-deep);border-radius:4px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pill-good{display:inline-block;background:var(--good);color:#fff;border-radius:4px;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
:root[data-theme="dark"] .pill-good{color:#0D0B12}
.pill-amber{display:inline-block;background:var(--surface2);color:var(--amber);border:2px solid var(--line2);border-radius:4px;padding:4px 9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:36px;align-items:center;padding:56px 0 44px}
.hero h1{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(38px,6vw,68px);line-height:.96;letter-spacing:-0.035em;margin:20px 0 0}
.hero h1 .alt{color:var(--accent-deep)}
.hero-copy{font-size:18px;line-height:1.55;color:var(--ink2);max-width:46ch;margin:20px 0 0}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:2px solid var(--line)}
.stat-n{font-family:'Archivo Black',Archivo,sans-serif;font-size:24px;line-height:1}
.stat-l{font-size:12.5px;color:var(--muted);margin-top:3px}
.hero-card{display:block;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--surface);color:inherit;box-shadow:8px 8px 0 var(--accent-soft)}
.hero-card:hover{color:inherit}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--surface2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.play-overlay{position:absolute;inset:0;display:grid;place-items:center}
.play-dot{width:62px;height:62px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);display:grid;place-items:center;color:var(--accent-ink);font-size:20px;padding-left:4px}
.thumb-flag{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:4px}
.hero-card-body{display:block;padding:18px 20px 20px}
.hero-card-title{display:block;font-family:'Archivo Black',Archivo,sans-serif;font-size:21px;line-height:1.15;letter-spacing:-0.02em}
.hero-card-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:24px}
.sec-head h2{font-family:'Archivo Black',Archivo,sans-serif;font-size:22px;letter-spacing:-0.02em;margin:0}
.sec-head .more{margin-left:auto;font-size:14px;font-weight:600;color:var(--accent-deep)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px}
.card{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--line);border-radius:7px;overflow:hidden;color:inherit;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-3px);color:inherit}
.card-body{display:flex;flex-direction:column;gap:9px;padding:15px 16px 17px;flex:1}
.card-brand{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.card-title{font-weight:700;font-size:16.5px;line-height:1.25;letter-spacing:-0.01em}
.card-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--muted)}
.band{margin-top:56px;border:2px solid var(--ink);border-radius:8px;background:var(--band);color:var(--band-ink);padding:32px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:center}
.band h2{font-family:'Archivo Black',Archivo,sans-serif;font-size:26px;letter-spacing:-0.02em;margin:0 0 10px}
.band p{margin:0;color:var(--band-ink);opacity:.8;font-size:15.5px;line-height:1.55;max-width:48ch}
.band-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-self:start}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.type-card{display:block;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:7px;padding:20px 18px;transition:border-color .15s;color:inherit}
.type-card:hover{border-color:var(--accent);color:inherit}
.type-icon{display:block;font-size:26px;line-height:1}
.type-name{display:block;font-weight:700;font-size:16px;margin-top:12px}
.type-count{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.section{margin-top:56px}

/* ---------- directory ---------- */
.page-title{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(30px,5vw,46px);letter-spacing:-0.03em;margin:0}
.page-intro{font-size:17px;color:var(--ink2);margin:14px 0 0;line-height:1.55}
.dir-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:28px 0 18px}
.tabs{display:flex;border:2px solid var(--line2);border-radius:5px;overflow:hidden}
.tabs a{padding:10px 16px;font-weight:700;font-size:14px;color:var(--ink2);background:var(--surface)}
.tabs a+a{border-left:2px solid var(--line2)}
.tabs a.on{background:var(--ink);color:var(--bg)}
.tabs a:hover{color:var(--ink)}
.tabs a.on:hover{color:var(--bg)}
.dir-search{flex:1;min-width:200px;background:var(--surface);border:2px solid var(--line);border-radius:5px;padding:10px 14px;font-size:15px}
.dir-search:focus{border-color:var(--accent);outline:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:var(--surface);color:var(--ink2);border:2px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dir-table{border:2px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.dir-head{display:flex;gap:14px;padding:11px 18px;background:var(--surface2);border-bottom:2px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dir-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);color:inherit}
.dir-row:hover{background:var(--accent-soft);color:inherit}
.dir-box{flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px}
.dir-name{font-weight:700;font-size:15.5px;color:var(--ink)}
a.dir-name:hover{color:var(--accent-deep)}
.dir-cat{font-size:12px;color:var(--muted)}
.dir-latest{width:140px;font-size:14px;color:var(--ink2)}
.dir-gbp{width:74px;text-align:right;font-size:15px}
.dir-usd,.dir-eur{width:74px;text-align:right;font-size:15px;color:var(--muted)}
.dir-native{display:inline-block;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent);border-radius:4px;padding:1px 7px;font-weight:700}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dir-empty{padding:26px 2px;font-size:15px;color:var(--muted)}
.dir-note{padding:14px 18px;font-size:13px;color:var(--muted)}
.dir-heading{font-family:'Archivo Black',Archivo,sans-serif;font-size:18px;letter-spacing:-0.01em;margin:34px 0 12px}
.dir-about{border:2px solid var(--line);border-radius:8px;background:var(--surface);padding:20px 22px;margin-top:26px}
.dir-about-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dir-about p{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--ink2)}
.dir-about p:last-child{margin-bottom:0}

/* ---------- review page ---------- */
.narrow{max-width:820px;margin:0 auto;padding:40px 20px 80px}
.mid{max-width:1000px;margin:0 auto;padding:40px 20px 80px}
.slim{max-width:760px;margin:0 auto;padding:44px 20px 80px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap}
.crumbs a{color:var(--accent-deep);font-weight:600}
.post-title{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(30px,5.2vw,48px);line-height:1.03;letter-spacing:-0.03em;margin:16px 0 0}
.post-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:18px 0 26px;font-size:13.5px;color:var(--muted)}
.video-facade{position:relative;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9}
.video-facade iframe{width:100%;height:100%;border:0;display:block;position:absolute;inset:0}
.facade-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.facade-btn img{width:100%;height:100%;object-fit:cover;opacity:.88;display:block}
.facade-play{width:74px;height:74px;border-radius:50%;background:var(--accent);border:2px solid #fff;display:grid;place-items:center;color:#fff;font-size:24px;padding-left:5px}
:root[data-theme="dark"] .facade-play{color:var(--accent-ink);border-color:var(--accent-ink)}
.facade-label{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.72);color:#fff;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:4px}
.facade-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.post-body{margin-top:36px;font-size:17.5px;line-height:1.72;color:var(--ink)}
.post-body p{margin:0 0 20px}
.post-body a{font-weight:600}
.post-body h2{font-family:'Archivo Black',Archivo,sans-serif;font-size:26px;letter-spacing:-0.02em;margin:44px 0 18px;padding-top:26px;border-top:2px solid var(--line)}
.post-body h2::before{content:"";display:block;width:44px;height:5px;background:var(--accent);border-radius:3px;margin-bottom:14px}
/* Inserted readability subheadings: minor headings inside a section. */
/* Inserted headings now only ever signpost a run of prose: the ones that used
   to group item headings have gone, because they restated item names the
   author had already written one line below and, being h2s dropped inside a
   section an h2 had already opened, they broke the outline as well. What is
   left takes its rank from where it sits, so the outline nests properly on its
   own instead of being disguised with font sizes: h2 above the author's first
   section, h3 inside one. Both read as a section break rather than an item,
   which is why the marker sits above the text and there is no left bar. */
.post-body h2.sub{font-size:22px;margin:38px 0 14px;padding-top:0;border-top:0}
.post-body h2.sub::before{width:26px;height:3px;margin-bottom:10px;opacity:.8}
.post-body h3.sub{font-size:20px;margin:34px 0 13px;padding-left:0;border-left:0}
.post-body h3.sub::before{content:"";display:block;width:22px;height:3px;background:var(--accent);margin-bottom:9px;opacity:.7;border-radius:2px}
.post-body h3{font-family:'Archivo Black',Archivo,sans-serif;font-size:19px;letter-spacing:-0.01em;line-height:1.25;margin:30px 0 12px;padding-left:12px;border-left:4px solid var(--accent)}
/* Images render at their natural (attribute) size, centred — never stretched. */
.post-body img{display:block;max-width:100%;height:auto;border:2px solid var(--line);border-radius:7px;margin:6px auto 18px}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:24px}
.post-body li{margin-bottom:8px}
.img-lost{display:block;border:2px dashed var(--line2);border-radius:7px;padding:18px;font-size:13.5px;color:var(--muted);margin:4px 0 12px}
.status-note{border:2px solid var(--line);border-left:5px solid var(--good);border-radius:7px;background:var(--surface);padding:12px 16px;margin:0 0 24px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.status-note.is-retired{border-left-color:var(--amber)}
.status-note strong{color:var(--ink)}
.post-body .disclosure-note{border:2px dashed var(--line2);border-radius:7px;background:var(--surface2);color:var(--muted);font-size:14px;line-height:1.6;padding:12px 16px}
.post-body .hub-note{border:2px solid var(--line);border-left:5px solid var(--accent);border-radius:7px;background:var(--surface);padding:16px 18px;margin:0 0 20px}
.post-body .hub-note-k{display:inline-block;background:var(--accent-soft);color:var(--accent-deep);border-radius:4px;padding:4px 9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.post-body .hub-note p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.post-body .hub-note strong{color:var(--ink)}
.post-body .hub-note-mini{font-size:14.5px;color:var(--muted)}
.ai-box{border:2px solid var(--line);border-radius:8px;background:var(--surface);margin:26px 0 0;overflow:hidden}
.ai-box-head{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface2);border-bottom:2px solid var(--line)}
/* This label is an h2: the summary was the only major block on the post with
   no heading of its own, while the FAQ and related blocks both had one, so it
   was the one section an answer engine could not name. It keeps the small
   uppercase treatment, which means resetting the margin and size a heading
   would otherwise bring with it. */
.ai-box-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-family:inherit;margin:0;line-height:1.4}
.ai-box-note{margin-left:auto;font-size:11.5px;color:var(--muted);text-align:right}
.ai-box-inner{padding:16px 18px 18px}
.ai-box-tldr{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.ai-box-kicker{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ai-box-inner ul{margin:0;padding-left:20px}
.ai-box-inner li{font-size:14.5px;line-height:1.55;color:var(--ink2);margin-bottom:6px}
.ai-box-inner li:last-child{margin-bottom:0}
.faq-sect{margin-top:48px}
.faq-note{font-size:12.5px;color:var(--muted);margin:-14px 0 18px}
.faq-list{display:grid;gap:10px}
.faq-list details{border:2px solid var(--line);border-radius:7px;background:var(--surface)}
.faq-list details[open]{border-color:var(--accent)}
.faq-list summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;font-size:15.5px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-plus{margin-left:auto;color:var(--accent-deep);font-size:18px;font-weight:700;flex:none;transition:transform .15s ease}
.faq-list details[open] .faq-plus{transform:rotate(45deg)}
.faq-a{padding:0 16px 15px;font-size:15px;line-height:1.65;color:var(--ink2)}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.tag-chip{border:2px solid var(--line2);border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--ink2)}
.tag-chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.related-card{display:block;color:inherit;border:2px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}
.related-card:hover{border-color:var(--accent);color:inherit}
.related-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.related-title{display:block;padding:13px 14px 15px;font-weight:700;font-size:15px;line-height:1.3}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:38px 0 4px}
.post-nav-link{display:block;border:2px solid var(--line);border-radius:7px;background:var(--surface);padding:13px 16px 14px;color:inherit}
.post-nav-link:hover{border-color:var(--accent);color:inherit}
.post-nav-link.is-next{grid-column:2;text-align:right}
.post-nav-dir{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.post-nav-link.is-prev .post-nav-dir::before{content:"\2190\00a0"}
.post-nav-link.is-next .post-nav-dir::after{content:"\00a0\2192"}
.post-nav-title{display:block;margin-top:5px;font-weight:700;font-size:15px;line-height:1.32}
.comments{margin-top:48px}
.comment{border:2px solid var(--line);border-radius:7px;background:var(--surface);padding:16px 18px;margin-bottom:12px}
.comment.reply{margin-left:28px}
.comment-head{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;margin-bottom:8px}
.comment-author{font-weight:700;color:var(--ink)}
.comment-date{color:var(--muted)}
.comment-body{font-size:15.5px;line-height:1.6;color:var(--ink2)}
.comment-body p{margin:0 0 10px}
.comment-body p:last-child{margin-bottom:0}

/* ---------- hub page ---------- */
.hub-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;align-items:start}
.hub-title{font-family:'Archivo Black',Archivo,sans-serif;font-size:clamp(32px,5.5vw,52px);letter-spacing:-0.03em;line-height:1;margin:16px 0 0}
.hub-blurb{font-size:17px;line-height:1.6;color:var(--ink2);margin:16px 0 0;max-width:48ch}
.hub-caution{border:2px solid var(--amber);border-radius:7px;background:var(--surface);color:var(--ink2);font-size:15px;line-height:1.6;padding:13px 16px;margin:18px 0 0;max-width:48ch}
.hub-facts{border:2px solid var(--ink);border-radius:8px;background:var(--surface);padding:22px;box-shadow:6px 6px 0 var(--accent-soft)}
.fact-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fact-big{font-family:'Archivo Black',Archivo,sans-serif;font-size:40px;line-height:1;margin-top:8px}
.fact-sub{font-size:14px;color:var(--muted);margin-top:6px}
.fact-line{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:9px 0;border-top:1px solid var(--line);margin-top:0}
.fact-line:first-of-type{margin-top:16px}
.fact-line b{font-weight:700}
.hub-list{display:grid;gap:12px}
.hub-item{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:2px solid var(--line);border-radius:7px;background:var(--surface);padding:12px;color:inherit}
.hub-item:hover{border-color:var(--accent);color:inherit}
.hub-item img{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;flex:none}
.hub-item-main{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px}
.hub-item-title{font-weight:700;font-size:16px;line-height:1.3}
.hub-item-date{font-size:12.5px;color:var(--muted)}

/* ---------- how we review ---------- */
.steps{display:grid;gap:14px;margin-top:36px}
.step{display:flex;gap:16px;border:2px solid var(--line);border-radius:8px;background:var(--surface);padding:20px}
.step-n{font-family:'Archivo Black',Archivo,sans-serif;font-size:22px;color:var(--accent-deep);flex:none;width:34px}
.step-title{display:block;font-weight:700;font-size:17px}
.step-body{display:block;font-size:15.5px;line-height:1.6;color:var(--ink2);margin-top:6px}
.prose{font-size:17px;line-height:1.7;color:var(--ink2)}
.prose p{margin:0 0 16px}
.prose h2{font-family:'Archivo Black',Archivo,sans-serif;font-size:24px;letter-spacing:-0.02em;color:var(--ink);margin:44px 0 14px;padding-top:24px;border-top:2px solid var(--line)}

/* ---------- contact ---------- */
.contact-card{display:grid;gap:16px;border:2px solid var(--ink);border-radius:8px;background:var(--surface);padding:26px;box-shadow:6px 6px 0 var(--accent-soft)}
.contact-card label{display:grid;gap:7px}
.contact-card .lbl{font-size:13px;font-weight:700;letter-spacing:.04em}
.contact-card input,.contact-card textarea{background:var(--surface2);border:2px solid var(--line);border-radius:5px;padding:12px 14px;font-size:16px}
.contact-card input:focus,.contact-card textarea:focus{border-color:var(--accent);outline:none}
.contact-card textarea{resize:vertical}
.contact-card .btn{justify-self:start}
.contact-hint{font-size:13.5px;color:var(--muted)}

/* ---------- listings (tag / category / reviews index) ---------- */
.list-rows{display:grid;gap:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.list-row{display:flex;gap:14px;align-items:baseline;padding:13px 18px;border-bottom:1px solid var(--line);color:inherit;flex-wrap:wrap}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--accent-soft);color:inherit}
/* Wide enough for the longest label the corpus can produce, "Published 28 September 2022" (175px at 13px Archivo), so a row never wraps. */
.list-date{font-size:13px;color:var(--muted);width:184px;flex:none}
.list-title{font-weight:600;font-size:15.5px;flex:1;min-width:200px}
.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;align-items:center}
.pager a,.pager span.cur{border:2px solid var(--line2);border-radius:5px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--ink2)}
.pager a:hover{border-color:var(--accent);color:var(--accent-deep)}
.pager span.cur{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pager .gap{color:var(--muted)}

/* ---------- footer ---------- */
.site-foot{border-top:2px solid var(--line);background:var(--surface);margin-top:60px}
.foot-grid{padding:44px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px}
.foot-brand{font-family:'Archivo Black',Archivo,sans-serif;font-size:15px;letter-spacing:-0.02em}
.foot-blurb{font-size:14px;line-height:1.6;color:var(--muted);margin:10px 0 0;max-width:34ch}
.foot-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot-links{display:grid;gap:9px;font-size:14.5px}
.foot-links a{color:var(--ink2);font-weight:600}
.foot-links a:hover{color:var(--accent-deep)}
.yt-link{display:inline-flex;align-items:center;gap:9px;border:2px solid var(--line2);border-radius:5px;padding:10px 14px;font-size:14px;font-weight:700;color:var(--ink)}
.yt-link:hover{border-color:var(--accent);color:var(--accent-deep)}
.yt-play{color:#C00;font-size:16px}
:root[data-theme="dark"] .yt-play{color:#FF6B6B}
.foot-base{border-top:1px solid var(--line)}
.foot-base-in{padding:18px 20px;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.foot-aff{margin-left:auto}

main.wrap{padding-bottom:80px}

/* Keyboard focus has to stay visible. Links carried only the browser default,
   and the two form rules above replace the ring with a border tint that is easy
   to miss, so both get an explicit ring here. Placed last so it wins on equal
   specificity; :focus-visible keeps it off mouse clicks. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dir-search:focus-visible,.contact-card input:focus-visible,.contact-card textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (max-width:640px){
  .dir-latest{width:110px}
  .dir-head{flex-wrap:wrap;row-gap:4px}
  .dir-gbp,.dir-usd,.dir-eur{width:auto;min-width:66px}
  .comment.reply{margin-left:14px}
  .list-date{width:auto}
  .post-nav{grid-template-columns:1fr;gap:10px}
  .post-nav-link.is-next{grid-column:1;text-align:left}
  .post-nav-link.is-next .post-nav-dir::after{content:none}
  .post-nav-link.is-next .post-nav-dir::before{content:"\2192\00a0"}
}