/*
Theme Name: Read Us 24x7
Theme URI: https://readus24x7.com/
Author: Sayan Dutta
Author URI: https://readus24x7.com/
Description: An editorial magazine theme built for Read Us 24x7. A sticky category rail, a full-bleed hero with attached "next read" tiles, feature bands, a scrollable series module and a paginated archive. Classic PHP templates, no page builder, no framework, no external JavaScript.
Version: 1.9.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: readus247
Tags: blog, news, magazine, one-column, custom-logo, custom-menu, featured-images, editor-style, threaded-comments, translation-ready, block-styles, wide-blocks, sticky-post, rtl-language-support
*/

/* ══════════════════════════════════════════════════════════
   1. Tokens
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#0B0B0D;
  --ink-2:#3A3A42;
  --muted:#6B6B73;
  --muted-2:#8E8E96;
  --line:#E4E4E7;
  --line-2:#D6D6DB;
  --dark:#121215;
  --red:#E8262A;

  --display:'Archivo',-apple-system,'Segoe UI',Roboto,sans-serif;
  --ui:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Near full-bleed: the cap only bites on ultra-wide displays.
     Both are overridable from Customize > Layout. */
  --maxw:1920px;
  --gut-max:40px;
  --gut:clamp(16px,2.2vw,var(--gut-max));
  --r:20px;
  --card-border:2px;

  --topbar-h:88px;
  --logo-h:54px;
  --search-w:480px;
}

/* ══════════════════════════════════════════════════════════
   2. Base
   ══════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* WordPress accessibility helpers */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.skip-link.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;margin:0;overflow:visible;
  position:fixed;left:16px;top:16px;z-index:100000;
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;
}

/* WordPress admin bar offset for the sticky top bar */
body.admin-bar .topbar{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .topbar{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar .topbar{top:0}
}

/* ══════════════════════════════════════════════════════════
   3. Top bar
   ══════════════════════════════════════════════════════════ */
.topbar{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
/* Grid, not flex: margin:auto on the pill only centres it in the space
   left over after the logo, which reads as off-centre. Equal side
   columns put it at the true middle whatever sits either side. */
.topbar-in{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:20px;height:var(--topbar-h);
}
.topbar-in > .logo{justify-self:start}
.topbar-in > .topnav{justify-self:end}

.logo{display:flex;align-items:center;font-family:var(--display);font-weight:800;flex:none;letter-spacing:-.02em}
.logo .a{background:var(--red);color:#fff;padding:5px 8px 5px 10px;font-size:19px;clip-path:polygon(0 0,100% 0,91% 100%,0 100%)}
.logo .b{background:var(--ink);color:#fff;padding:5px 9px;font-size:19px;margin-left:-3px}
.logo .c{border:1.5px solid var(--line-2);padding:3px 8px;font-size:16px;margin-left:6px;border-radius:6px}
.logo--custom img{display:block;max-height:var(--logo-h);width:auto}

/*
 * "Search for" is a real label, not a placeholder. A placeholder would put
 * the caret at the far left on focus; keeping the words in the flow means
 * the input starts after them and the caret blinks right where the reader
 * is about to type.
 */
.searchpill{
  position:relative;display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid rgba(11,11,13,.10);border-radius:999px;
  padding:14px 26px;width:min(var(--search-w),40vw);color:var(--ink);
  box-shadow:0 1px 2px rgba(11,11,13,.05),0 10px 26px -14px rgba(11,11,13,.24);
  transition:box-shadow .2s,border-color .2s;
  cursor:text;
}
.searchpill:hover{box-shadow:0 1px 2px rgba(11,11,13,.07),0 14px 32px -14px rgba(11,11,13,.3)}
.searchpill:focus-within{
  border-color:rgba(11,11,13,.22);
  box-shadow:0 1px 2px rgba(11,11,13,.07),0 14px 34px -14px rgba(11,11,13,.34);
}
.searchpill svg{flex:none;color:var(--muted)}
/* At rest the ghost shows and the label is out of the flow, so the input
   spans the pill. On focus they swap: the label takes its place in the row
   and the input begins right after it, putting the caret where the words
   end. */
.sp-label{
  display:none;flex:none;font-size:16px;font-weight:400;color:var(--muted-2);
  cursor:text;user-select:none;white-space:nowrap;
}
.searchpill:focus-within .sp-label,
.searchpill.has-value .sp-label{display:block}

.sp-ghost{
  position:absolute;left:57px;pointer-events:none;
  font-size:16px;font-weight:400;color:var(--muted-2);
  transition:opacity .15s;
}
.sp-ghost b{color:var(--ink);font-weight:500}
.searchpill:focus-within .sp-ghost,
.searchpill.has-value .sp-ghost{opacity:0}
.searchpill input[type=search]{
  flex:1;min-width:0;border:0;background:none;color:var(--ink);
  font-family:var(--ui);font-size:16px;font-weight:500;padding:0;
  -webkit-appearance:none;appearance:none;
}
.searchpill input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.searchpill input:focus{outline:none}

/* Standalone (search results / 404) variant */
.searchpill--block{
  width:min(560px,100%);margin:26px 0 0;
  border-color:rgba(11,11,13,.14);
}
.empty .searchpill--block{margin-inline:auto}

.topnav{display:flex;align-items:center;flex:none}
.topnav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.topnav a{font-size:13.5px;font-weight:500;color:var(--muted);transition:color .18s}
.topnav a:hover,
.topnav .current-menu-item>a,
.topnav .current_page_item>a{color:var(--ink)}

/* ══════════════════════════════════════════════════════════
   4. Category rail
   ══════════════════════════════════════════════════════════ */
.catstrip{background:var(--bg)}
/* The rail is a .wrap, so its inline padding is --gut -- the same gutter
   the cards use. Pills therefore start on the content's left edge. */
.catstrip-in{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-block:14px 20px;cursor:grab;user-select:none}
.catstrip-in.dragging{cursor:grabbing;scroll-behavior:auto}
.catstrip-in.dragging a{pointer-events:none}
.catstrip-in::-webkit-scrollbar{display:none}
.catstrip a{
  display:inline-flex;align-items:center;white-space:nowrap;
  background:var(--surface);border:1px solid rgba(11,11,13,.14);border-radius:999px;
  padding:13px 26px;font-size:15.5px;font-weight:500;color:var(--ink);
  transition:border-color .18s,background .18s;
}
.catstrip a:hover{border-color:rgba(11,11,13,.4)}
.catstrip a[aria-current]{border-color:var(--ink);border-width:1.5px;font-weight:600}

/* ══════════════════════════════════════════════════════════
   5. Media wells — gradient placeholder + covered image
   ══════════════════════════════════════════════════════════ */
.ph{position:absolute;inset:0;overflow:hidden;background:var(--hue,#3A4A5C)}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 95% at 16% 6%,rgba(255,255,255,.42),transparent 58%),
    radial-gradient(115% 100% at 88% 98%,rgba(0,0,0,.7),transparent 64%);
}
.ph::after{
  content:"";position:absolute;inset:0;mix-blend-mode:overlay;opacity:.6;
  background-image:radial-gradient(rgba(255,255,255,.24) 1px,transparent 1.3px);
  background-size:8px 8px;
}
/* The gradient stays under the photo: it is what fills the frame while a
   lazy image is still in flight, and what shows through a transparent one. */
.zoom{position:absolute;inset:0;z-index:1;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.zoom img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Set by theme.js when a source 404s: fall back to the gradient rather than
   leaving the browser's broken-image glyph on the card. */
.zoom img.is-broken{display:none}
/* Two layers, because a photo can be bright anywhere: a strong ramp that
   guarantees contrast under the headline, plus a faint flat wash so a
   blown-out image never leaves the chip floating on white. */
.veil{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.88) 15%,
      rgba(0,0,0,.72) 30%,
      rgba(0,0,0,.46) 47%,
      rgba(0,0,0,.22) 65%,
      rgba(0,0,0,.06) 84%,
      rgba(0,0,0,0) 100%),
    linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16));
}

/* Belt and braces for headlines sitting over busy detail. */
.hero h1,.card .card-t,.band h2,.mod-main h3,.nt-body h3{
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 2px 20px rgba(0,0,0,.4);
}
.by,.nt-meta{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.chip,.chip-solid{text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ══════════════════════════════════════════════════════════
   6. Hero band
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;border-radius:var(--r);overflow:hidden;color:#fff;
  min-height:clamp(400px,33vw,530px);margin:clamp(20px,3vw,32px) 0 clamp(34px,4.6vw,56px);
  border:var(--card-border) solid var(--ink);
  display:flex;
}
.hero .ph{background-position:right center}
.hero .zoom img{object-position:right center}
.hero .veil-h{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to right,rgba(6,6,8,.96) 0%,rgba(6,6,8,.92) 30%,rgba(6,6,8,.66) 52%,rgba(6,6,8,.24) 78%,rgba(6,6,8,.42) 100%),
    linear-gradient(to top,rgba(6,6,8,.86) 0%,rgba(6,6,8,.12) 45%,rgba(6,6,8,0) 72%),
    linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12));
}
.hero-in{
  position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;padding:clamp(22px,2.8vw,36px);
}
.hero .chip-solid{
  align-self:flex-start;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);font-size:11.5px;font-weight:600;letter-spacing:.03em;
  padding:5px 11px;border-radius:8px;margin-bottom:16px;color:#fff;
}
.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.038em;line-height:1.05;
  font-size:clamp(27px,3.7vw,46px);margin:0 0 16px;max-width:19ch;text-wrap:balance;
}
.hero h1 a{color:#fff}
/* One link, whole band clickable: the tiles sit above it on z-index 5. */
.hero h1 a::after{content:"";position:absolute;inset:0;z-index:4}
.hero .by{margin-bottom:26px}
.hero:hover>.ph .zoom{transform:scale(1.04)}

/* ══════════════════════════════════════════════════════════
   7. Attached "next read" tiles
   ══════════════════════════════════════════════════════════ */
.nextrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;position:relative;z-index:5}
.nexttile{
  display:grid;grid-template-columns:74px minmax(0,1fr) 36px;gap:14px;align-items:center;
  background:rgba(18,18,21,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);
  border-radius:14px;padding:11px;transition:.22s;
}
.nexttile:hover{background:rgba(30,30,36,.82);border-color:rgba(255,255,255,.22)}
.nt-thumb{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden}
.nt-body{min-width:0}
.nt-body h3{
  font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.28;
  letter-spacing:-.012em;margin:0 0 7px;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nt-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(255,255,255,.68);font-weight:500}
.nt-go{
  width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;flex:none;transition:.22s;
}
.nexttile:hover .nt-go{background:var(--red);color:#fff;transform:translateX(2px)}
.nexttile:hover .zoom{transform:scale(1.06)}

/* ══════════════════════════════════════════════════════════
   8. Section heads
   ══════════════════════════════════════════════════════════ */
.shead{display:flex;align-items:center;gap:14px;margin:0 0 22px}
/* Matched on the class, because the element varies: an article page
   renders its section heads and card titles as plain text so they stay
   out of the document outline. Nothing about the look changes. */
.shead .shead-t{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.032em;margin:0;line-height:1.1}
.shead .shead-t em{font-style:normal;color:var(--muted-2)}
.shead .chev{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink);flex:none;transition:.2s;
}
.shead a.chev:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ══════════════════════════════════════════════════════════
   9. Card
   ══════════════════════════════════════════════════════════ */
.card{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  aspect-ratio:7/8;background:var(--hue,#2A2A30);color:#fff;
  border:var(--card-border) solid var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(11,11,13,.5)}
.card:hover .zoom{transform:scale(1.05)}
.card-in{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px}
.chip{
  display:inline-block;margin-bottom:11px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:7px;color:#fff;
}
.card .card-t{
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;
  letter-spacing:-.022em;margin:0 0 15px;text-wrap:balance;
}
.by{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.92);font-weight:500}
.av{
  width:25px;height:25px;border-radius:50%;flex:none;overflow:hidden;
  background:conic-gradient(from 200deg,#E8262A,#7A2C6E,#2C6E8F,#E8262A);
  border:1.5px solid rgba(255,255,255,.5);
}
.av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grid4.short .card{aspect-ratio:1/1}

/* ══════════════════════════════════════════════════════════
   10. Feature band
   ══════════════════════════════════════════════════════════ */
.band{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;color:#fff;
  min-height:clamp(300px,36vw,470px);margin:clamp(34px,4.6vw,58px) 0;
  border:var(--card-border) solid var(--ink);
}
.band .band-in{
  position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:inherit;padding:clamp(24px,3.6vw,46px);
}
.band h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.038em;line-height:1.02;
  font-size:clamp(27px,4.6vw,54px);margin:0;max-width:19ch;text-wrap:balance;
}
.band .by{margin-top:16px;font-size:14px}
.band:hover .zoom{transform:scale(1.04)}
.band.center .band-in{align-items:center;text-align:center}
.band.center h2{max-width:24ch}
.band.center .by{justify-content:center}

/* ══════════════════════════════════════════════════════════
   11. Noteworthy row
   ══════════════════════════════════════════════════════════ */
.note-row{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:26px}
.note-row .card{aspect-ratio:10/9}
/* Height normally comes from the sibling cards; the floor keeps the box
   intact if a section ever renders without them. */
.notewrap{position:relative;min-height:clamp(300px,25vw,420px)}
.notebox{
  position:absolute;inset:0;overflow:hidden;
  background:var(--surface);border:2.5px solid var(--ink);border-radius:26px;
  padding:20px 24px;
  display:flex;flex-direction:column;
  box-shadow:0 12px 32px -20px rgba(11,11,13,.4);
}
.notebox h3{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.028em;margin:2px 0 10px;text-align:center;flex:none}
.notebox ul{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;min-height:0}
/*
 * flex:1 1 auto, not flex:1. The shorthand flex:1 means 1 1 0%, which forces
 * every row to the same height -- so a one-line headline sat in the middle of
 * a two-line gap and the separators landed at random intervals. Growing from
 * the natural height instead shares the slack proportionally and keeps the
 * rhythm even.
 */
.notebox li{border-bottom:1px solid var(--line);flex:1 1 auto;display:flex;align-items:center;min-height:0;overflow:hidden}
.notebox li:last-child{border-bottom:0}
.notebox li a{
  display:grid;grid-template-columns:9px minmax(0,1fr);gap:14px;align-items:baseline;
  width:100%;padding:9px 2px;font-size:15px;line-height:1.38;font-weight:600;
  color:var(--ink);transition:color .18s;
}
.notebox li a::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--red);
  transform:translateY(-2px);
}
/* Rows share the box height evenly, so cap a long headline at two lines
   rather than let it push the last item past the border. */
.notebox li a span{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.notebox li a:hover{color:var(--red)}

/* ══════════════════════════════════════════════════════════
   12. Sticker
   ══════════════════════════════════════════════════════════ */
.sticker{display:flex;justify-content:center;margin:clamp(46px,6vw,78px) 0 clamp(22px,3vw,32px)}
.sticker span{
  background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:800;
  font-size:clamp(28px,4.6vw,46px);letter-spacing:-.038em;
  padding:.14em .6em .18em;border-radius:999px;transform:rotate(-1.6deg);
  box-shadow:0 10px 30px -14px rgba(11,11,13,.4);
}

/* ══════════════════════════════════════════════════════════
   13. Series module
   ══════════════════════════════════════════════════════════ */
.module{
  background:var(--dark);border-radius:var(--r);padding:18px;color:#fff;
  border:var(--card-border) solid var(--ink);
  display:grid;grid-template-columns:360px 1fr;gap:18px;
}
.mod-side{display:flex;flex-direction:column;min-width:0}
.mod-side .lbl{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#9B9BA4;margin:4px 0 14px}
.mod-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:368px;padding-right:4px;scrollbar-width:thin;scrollbar-color:#33333A transparent}
.mod-list::-webkit-scrollbar{width:5px}
.mod-list::-webkit-scrollbar-thumb{background:#33333A;border-radius:9px}
.mod-item{display:grid;grid-template-columns:78px minmax(0,1fr) 30px;gap:13px;align-items:center;padding:9px;border-radius:12px;transition:background .18s}
.mod-item:hover{background:#232329}
.mod-thumb{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden}
.mod-item h4{font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.26;margin:0 0 5px}
.mod-item .sub{font-size:11.5px;color:#7E7E88;margin:0}
.mod-item .nt-go{width:28px;height:28px;background:rgba(255,255,255,.14);color:#fff}
.mod-item:hover .nt-go{background:var(--red)}
.mod-all{
  margin-top:14px;background:var(--red);color:#fff;text-align:center;border-radius:999px;padding:12px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:.2s;
}
.mod-all:hover{background:#fff;color:var(--ink)}
.mod-main{position:relative;border-radius:14px;overflow:hidden;min-height:368px;display:flex}
.mod-main .txt{position:relative;z-index:3;margin-top:auto;padding:26px}
.mod-main h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,32px);letter-spacing:-.034em;line-height:1.05;margin:0 0 14px;max-width:20ch}
.mod-main:hover .zoom{transform:scale(1.04)}

/* ══════════════════════════════════════════════════════════
   14. Panelled section
   ══════════════════════════════════════════════════════════ */
.panel{
  background:transparent;border:1px solid rgba(11,11,13,.1);border-radius:28px;
  padding:clamp(24px,2.8vw,38px);margin-top:clamp(34px,4.6vw,58px);
}
.panel .shead{margin-bottom:20px}
.panel .grid4 .card{aspect-ratio:1/1}

/* ══════════════════════════════════════════════════════════
   15. Pagination (matches paginate_links output)
   ══════════════════════════════════════════════════════════ */
.pager{display:flex;align-items:center;justify-content:center;gap:7px;padding:clamp(38px,5vw,58px) 0 0;flex-wrap:wrap}
/* the_comments_pagination() wraps its links in .nav-links, so the row lives there */
.pager .nav-links{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;width:100%}
.pager .page-numbers{
  min-width:42px;height:42px;display:grid;place-items:center;padding:0 14px;border-radius:999px;
  font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid rgba(11,11,13,.12);transition:.18s;
}
.pager a.page-numbers:hover{border-color:var(--ink);color:var(--red)}
.pager .current{background:var(--ink);border-color:var(--ink);color:#fff}
.pager .dots{background:none;border:0;color:var(--muted-2)}
.pager .next,.pager .prev{display:flex;align-items:center;gap:8px}

/* ══════════════════════════════════════════════════════════
   16. Archive panels
   ══════════════════════════════════════════════════════════ */
.archive-cta{margin-top:clamp(46px,6vw,76px);display:grid;grid-template-columns:1fr 1fr;gap:26px}
.apanel{background:var(--surface);border:1px solid rgba(11,11,13,.1);border-radius:var(--r);padding:clamp(28px,3.6vw,44px);text-align:center}
.apanel.accent{background:var(--red);border-color:transparent;color:#fff}
.apanel h3{font-family:var(--display);font-weight:800;font-size:clamp(23px,2.9vw,32px);letter-spacing:-.034em;margin:0 0 9px}
.apanel p{margin:0 0 22px;color:var(--muted);font-size:15px}
.apanel.accent p{color:rgba(255,255,255,.9)}
.abtn{
  display:inline-block;padding:13px 28px;border-radius:999px;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:.2s;
}
.apanel .abtn{background:var(--ink);color:#fff}
.apanel .abtn:hover{background:var(--red)}
.apanel.accent .abtn{background:#fff;color:var(--ink)}
.apanel.accent .abtn:hover{background:var(--ink);color:#fff}
.acount{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,66px);letter-spacing:-.045em;line-height:1;display:block;margin-bottom:12px;color:var(--red)}

/* ══════════════════════════════════════════════════════════
   17. Archive / search page head
   ══════════════════════════════════════════════════════════ */
.pagehead{
  border-bottom:1px solid var(--line);
  padding:clamp(28px,4vw,52px) 0 clamp(24px,3.2vw,38px);
  margin-bottom:clamp(28px,3.6vw,44px);
}
.pagehead .kicker{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin:0 0 12px;
}
.pagehead h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(32px,5.4vw,60px);margin:0;max-width:20ch;text-wrap:balance;
}
.pagehead .desc{margin:16px 0 0;max-width:62ch;color:var(--muted);font-size:16px;line-height:1.6}
.pagehead .count{margin:16px 0 0;color:var(--muted-2);font-size:13.5px;font-weight:500}

.empty{padding:clamp(40px,7vw,90px) 0;text-align:center;max-width:56ch;margin:0 auto}
.empty h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.032em;margin:0 0 12px}
.empty p{color:var(--muted);font-size:16px;margin:0}

/* ══════════════════════════════════════════════════════════
   18. Footer
   ══════════════════════════════════════════════════════════ */
.foot{padding:clamp(26px,3.4vw,40px) 0 clamp(30px,4vw,46px)}
.footbar{
  background:var(--surface);border:1px solid rgba(11,11,13,.1);border-radius:26px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;
  padding:17px 28px;
}
.footbar a{font-size:13px;font-weight:600;color:var(--ink);transition:color .18s}
.footbar a:hover{color:var(--red)}
.f-left,.f-right{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.f-right{justify-content:flex-end}
.f-mid{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}

/* ══════════════════════════════════════════════════════════
   19. Responsive
   ══════════════════════════════════════════════════════════ */
@media(max-width:1140px){
  .grid4{grid-template-columns:repeat(2,1fr);gap:22px}
  .note-row{grid-template-columns:1fr 1fr;gap:22px}
  .notewrap{grid-column:1/-1;position:static}
  .notebox{position:static;inset:auto}
  .notebox li{flex:none}
  .notebox li a{padding:11px 2px}
  .module{grid-template-columns:1fr}
  .mod-main{min-height:300px;order:-1}
  .mod-list{max-height:none}
  .hero h1{max-width:15ch}
}
@media(max-width:900px){
  .nextrow{grid-template-columns:1fr;gap:12px}
  .nexttile:nth-child(2){display:none}
  .hero .veil-h{background:linear-gradient(to top,rgba(6,6,8,.95) 20%,rgba(6,6,8,.6) 55%,rgba(6,6,8,.2) 100%)}
}
@media(max-width:820px){
  .searchpill{display:none}
  .searchpill--block{display:flex}
  /* Two items left in a three-column grid would centre the nav. */
  .topbar-in{display:flex}
  .topnav{margin-left:auto}
  .archive-cta{grid-template-columns:1fr}
}
@media(max-width:620px){
  .grid4{grid-template-columns:1fr;gap:20px}
  .grid4 .card{aspect-ratio:5/6}
  .note-row{grid-template-columns:1fr}
  .topnav ul{gap:14px}
  .topnav li:nth-child(n+3){display:none}
  .band .band-in{padding:22px}
  .footbar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:20px}
  .f-left,.f-right{justify-content:center;gap:16px}
  .nexttile{grid-template-columns:58px minmax(0,1fr) 32px;gap:11px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}