/* =========================================================================
   App Store Hall of Records  ::  THE APP ALMANAC
   One hand-written stylesheet. No framework, no build step.
   Concept: a catalogued record book. Serif certificate titles, condensed
   scoreboard numerals, a stamped seal motif, double rules, warm paper.
   Order: 1 fonts  2 reset/base  3 tokens  4 layout  5 components
          6 utilities  7 responsive
   ========================================================================= */

/* ---- 1. FONTS (2 display faces, swap, body stays on the system stack) -- */

/* ---- 2. RESET & BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
::selection{background:var(--red);color:#fff}

/* ---- 3. TOKENS -------------------------------------------------------- */
:root{
  /* warm almanac paper chrome, kept calm so app icons supply the color */
  --paper:#F4EDDE;        /* page, aged paper          */
  --paper-2:#ECE2CD;      /* darker band for rhythm    */
  --card:#FFFDF7;         /* cream card / certificate  */
  --ink:#1A1611;          /* warm near-black ink       */
  --ink-2:#4C463A;        /* secondary ink             */
  --muted:#6E6452;        /* meta, fine print (WCAG AA) */
  --hairline:#D9CEB6;     /* light rule                */
  --rule:#1A1611;         /* strong rule               */

  /* brand + record accents */
  --red:#C0362A;          /* THE brand. record red     */
  --red-deep:#94271D;
  --red-wash:#F7E4DC;
  --gold:#B68A37;         /* champion, the no.1 seal   */
  --gold-deep:#856223;
  --gold-wash:#F4E9CC;
  --silver:#8C887E;
  --bronze:#A4673B;
  --green:#2E7D4F;

  --accent:#C0362A;       /* doorways / links = red    */

  /* type */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --score:"Anton",var(--sans);

  /* radii: squarer than iOS, this is a printed book */
  --r-card:7px;
  --r-icon:22.37%;        /* keep the real-icon superellipse */
  --r-pill:999px;

  --shadow:0 1px 0 rgba(26,22,17,.05);
  --wrap:1000px;
}

/* ---- 4. LAYOUT PRIMITIVES -------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:18px}
.band{padding-block:4px}
.band--alt{background:var(--paper-2)}
.rule{height:0;border:0;border-top:1.5px solid var(--rule);margin:0}
.rule--double{border:0;border-top:4px double var(--rule);height:0;margin:0}

.scroller{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:4px 18px 14px;margin-inline:-18px;scrollbar-width:none;
}
.scroller::-webkit-scrollbar{display:none}
.scroller > *{scroll-snap-align:start}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:14px}
.grid--tiles{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}

/* ---- 5. COMPONENTS --------------------------------------------------- */

/* 5.1 masthead bar ------------------------------------------------ */
.bar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:4px double var(--rule)}
.bar__inner{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap;font-family:var(--display);font-size:1.4rem;line-height:1;letter-spacing:.01em;color:var(--ink)}
.brand .seal-mini{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%}
.brand .seal-mini svg{width:15px;height:15px}
.bar__search{flex:1;display:none;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:8px 15px;color:var(--muted);max-width:430px}
.bar__search svg{width:17px;height:17px;flex:0 0 auto}
.bar__search input{flex:1;border:0;background:transparent;font-size:.95rem;color:var(--ink);min-width:0}
.bar__search input::placeholder{color:var(--muted)}
.bar__searchbtn{margin-left:auto;display:grid;place-items:center;width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink);background:var(--card)}
.bar__searchbtn svg{width:21px;height:21px}

/* 5.2 almanac kicker (THE APP ALMANAC  /  RECORD No. 07) ---------- */
.kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);padding:18px 0 8px}
.kicker__r{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.12em}

/* 5.3 page masthead ---------------------------------------------- */
.page-head{padding:2px 0 14px}
.largetitle{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,8.5vw,3.85rem);line-height:1.02;letter-spacing:.005em}
.page-head .sub{font-family:var(--display);font-style:italic;color:var(--ink-2);font-size:clamp(1.05rem,3.4vw,1.4rem);margin-top:10px;line-height:1.35;max-width:34ch}
.page-head .sub.plain{font-family:var(--sans);font-style:normal;font-size:1rem;color:var(--muted);max-width:60ch}

/* 5.4 section header --------------------------------------------- */
.section{padding:20px 0}
.section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 12px;border-bottom:4px double var(--rule);padding-bottom:9px;margin-bottom:14px}
.section__title{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.05;letter-spacing:.005em}
.section__num{display:inline-block;font-family:var(--score);color:var(--red);font-size:1rem;letter-spacing:.04em;margin-right:10px;vertical-align:.06em}
.section__more{flex:0 0 auto;white-space:nowrap;color:var(--red);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:3px}
.section__more svg{width:15px;height:15px}
.section__note{font-family:var(--display);font-style:italic;color:var(--ink-2);font-size:1.05rem;margin:-4px 0 14px}

/* 5.5 app icon placeholder (production hotlinks Apple CDN) -------- */
.icon{aspect-ratio:1;flex:0 0 auto;border-radius:var(--r-icon);background:var(--c,#C7C0B0);
  color:#fff;display:grid;place-items:center;font-family:var(--score);letter-spacing:.01em;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);overflow:hidden}
.icon img{width:100%;height:100%;object-fit:cover}
.icon--xl{width:84px;font-size:1.7rem}
.icon--lg{width:66px;font-size:1.35rem}
.icon--md{width:54px;font-size:1.1rem}
.icon--sm{width:46px;font-size:.95rem}
.icon--xs{width:30px;font-size:.72rem;border-radius:8px}

/* 5.6 THE CERTIFICATE  (champion / record holder) ---------------- */
.cert{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);
  box-shadow:5px 6px 0 rgba(26,22,17,.10);color:inherit;display:block;overflow:hidden}
.cert::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold);border-radius:3px;pointer-events:none;z-index:1}
.cert--strip{flex:0 0 21rem;width:21rem}
.cert__ribbon{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;text-align:center}
.cert__ribbon svg{width:14px;height:14px;flex:0 0 auto}
.cert__body{display:flex;gap:16px;align-items:center;padding:20px 92px 6px 18px}
.cert__name{font-family:var(--display);font-size:1.4rem;line-height:1.06}
.cert__dev{display:inline-flex;align-items:center;gap:3px;color:var(--red);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.cert__dev svg{width:13px;height:13px}
.cert__score{font-family:var(--score);color:var(--ink);font-size:clamp(3.4rem,17vw,6.5rem);line-height:.82;
  letter-spacing:.01em;padding:6px 18px 18px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cert__score .u{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;line-height:1.2;max-width:11ch}
.cert--strip .cert__score{font-size:clamp(3rem,13vw,4rem)}
.cert--strip .cert__body{padding-right:84px}

/* the stamped seal motif (recurs on champion + no.1) */
.seal{position:absolute;top:50px;right:14px;z-index:2;width:74px;height:74px;border-radius:50%;
  background:var(--gold-wash);color:var(--gold-deep);border:2px solid var(--gold-deep);
  box-shadow:inset 0 0 0 3px var(--gold-wash),inset 0 0 0 4px var(--gold-deep);
  display:grid;place-content:center;text-align:center;transform:rotate(9deg)}
.seal b{display:block;font-family:var(--score);font-size:1.6rem;line-height:.8;letter-spacing:.02em}
.seal span{display:block;font-size:.46rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.cert--strip .seal{top:46px;right:12px}

/* 5.7 record card (homepage strips) ------------------------------ */
.rcard{flex:0 0 17rem;width:17rem;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:0;box-shadow:3px 4px 0 rgba(26,22,17,.07);display:flex;flex-direction:column;color:inherit;overflow:hidden}
.grid .rcard{flex:initial;width:auto}
.rcard__kicker{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:7px 13px}
.rcard__body{padding:13px}
.rcard__title{font-family:var(--display);font-size:1.18rem;line-height:1.1;margin-bottom:12px}
.rcard__win{display:flex;align-items:center;gap:12px}
.rcard__meta{min-width:0;display:flex;flex-direction:column}
.rcard__app{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard__val{font-family:var(--score);font-size:2rem;line-height:.95;letter-spacing:.01em;margin-top:1px}

/* 5.8 leaderboard (the almanac ranking) -------------------------- */
.board{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);overflow:hidden;box-shadow:5px 6px 0 rgba(26,22,17,.09)}
.board li:nth-child(even) .row{background:rgba(26,22,17,.025)}
.row{display:flex;align-items:center;gap:13px;padding:11px 15px;border-bottom:1px solid var(--hairline);color:inherit}
.row:last-child{border-bottom:0}
.row--podium{background:var(--gold-wash) !important;border-bottom:1px solid var(--gold)}
.rank{flex:0 0 auto;min-width:1.7ch;text-align:right;font-family:var(--score);font-size:1.55rem;line-height:1;
  color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.rank--gold{color:var(--gold-deep)}
.rank--silver{color:var(--silver)}
.rank--bronze{color:var(--bronze)}
.row__meta{flex:1;min-width:0;display:flex;flex-direction:column}
.row__app{font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__dev{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__val{flex:0 0 auto;font-family:var(--score);font-size:1.5rem;line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.row--podium .row__val{color:var(--red)}
.board__more{padding:14px;color:var(--muted);font-size:.85rem;text-align:center;font-style:italic;font-family:var(--display)}

/* 5.9 explanation / catalogue entry ------------------------------ */
.explain{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-card);padding:18px;font-size:.97rem;box-shadow:3px 4px 0 rgba(26,22,17,.06)}
.explain dt{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.explain dd{margin:3px 0 14px;color:var(--ink-2);line-height:1.5}
.explain dd:last-of-type{margin-bottom:0}
.computed{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--hairline);
  color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.computed span{white-space:nowrap}
.computed b{color:var(--ink);font-family:var(--score);font-weight:400;font-size:.95rem;letter-spacing:.02em;text-transform:none;margin-left:4px}

/* 5.10 app hero -------------------------------------------------- */
.hero{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);padding:20px;box-shadow:5px 6px 0 rgba(26,22,17,.09)}
.hero__top{display:flex;gap:18px;align-items:center}
.hero__name{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.05}
.hero__dev{display:inline-flex;align-items:center;gap:3px;color:var(--red);font-weight:700;font-size:.84rem;text-transform:uppercase;letter-spacing:.06em;margin-top:5px}
.hero__dev svg{width:14px;height:14px}
.appstore{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--ink);color:var(--card);
  font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;border-radius:var(--r-pill)}
.appstore svg{width:16px;height:16px}

/* 5.11 stat chips ------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chip{display:flex;flex-direction:column;gap:1px;background:var(--paper);border:1.5px solid var(--ink);border-radius:5px;padding:7px 13px;min-width:0}
.chip__k{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
.chip__v{font-family:var(--score);font-size:1.25rem;line-height:1.05;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* 5.12 screenshot strip ------------------------------------------ */
.shots{display:flex;gap:13px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:4px 18px 14px;margin-inline:-18px;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{flex:0 0 9.5rem;width:9.5rem;aspect-ratio:9/19.5;border-radius:12px;background:var(--c,#D7CEBC);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);scroll-snap-align:start;position:relative;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot span{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9)}

/* 5.13 records this app appears in (the rabbit hole) ------------- */
.appears{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);overflow:hidden;box-shadow:5px 6px 0 rgba(26,22,17,.09)}
.appears__head{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--card);padding:14px 18px}
.appears__head svg{width:22px;height:22px;color:var(--gold);flex:0 0 auto}
.appears__head h2{font-family:var(--display);font-size:1.4rem;line-height:1.05}
.appears__sub{color:var(--ink-2);font-family:var(--display);font-style:italic;font-size:1.02rem;padding:13px 18px 8px}
.appears__row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--hairline);color:inherit}
.appears__row:nth-of-type(even){background:rgba(26,22,17,.025)}
.appears__pos{flex:0 0 auto;min-width:58px;font-family:var(--score);font-size:1.35rem;line-height:1;color:var(--ink);letter-spacing:.01em}
.appears__pos.is-one{color:var(--gold-deep)}
.appears__rec{flex:1;min-width:0;font-weight:600;font-size:1rem}
.appears__val{flex:0 0 auto;color:var(--muted);font-family:var(--score);font-size:1rem;letter-spacing:.02em}
.appears__chev{flex:0 0 auto;color:var(--red)}
.appears__chev svg{width:18px;height:18px}

/* 5.14 category tile --------------------------------------------- */
.cat{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-card);padding:14px;display:flex;flex-direction:column;gap:9px;color:inherit;box-shadow:3px 4px 0 rgba(26,22,17,.06)}
.cat__dot{width:34px;height:34px;border-radius:9px;background:var(--c,#C7C0B0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cat__name{font-family:var(--display);font-size:1.12rem;line-height:1.05}
.cat__count{color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* 5.15 app list row ---------------------------------------------- */
.applist{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);overflow:hidden;box-shadow:5px 6px 0 rgba(26,22,17,.09)}
.applist li:nth-child(even) .applist__row{background:rgba(26,22,17,.025)}
.applist__row{display:flex;align-items:center;gap:14px;padding:13px 15px;border-bottom:1px solid var(--hairline);color:inherit}
.applist__row:last-child{border-bottom:0}
.applist__meta{flex:1;min-width:0;display:flex;flex-direction:column}
.applist__name{font-weight:600;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.applist__stat{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.applist__stat b{color:var(--gold-deep);font-family:var(--score);font-weight:400;letter-spacing:.02em}
.applist__chev{flex:0 0 auto;color:var(--red)}
.applist__chev svg{width:18px;height:18px}

/* 5.16 developer header ------------------------------------------ */
.devhead{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);padding:20px;box-shadow:5px 6px 0 rgba(26,22,17,.09)}
.devhead h1{font-family:var(--display);font-size:clamp(1.8rem,6vw,2.5rem);line-height:1.04}
.devhead p{color:var(--ink-2);margin-top:8px;font-size:1rem}
.devhead .num{color:var(--ink);font-family:var(--score);font-weight:400;letter-spacing:.02em}

/* 5.17 search ----------------------------------------------------- */
.searchpage{background:var(--card);display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:var(--r-pill);padding:13px 18px;box-shadow:3px 4px 0 rgba(26,22,17,.07);color:var(--muted)}
.searchpage svg{width:20px;height:20px;flex:0 0 auto}
.searchpage input{flex:1;border:0;background:transparent;font-size:1.05rem;color:var(--ink);min-width:0}
.searchpage input::placeholder{color:var(--muted)}
.result{display:flex;align-items:center;gap:14px;padding:13px 15px;border-bottom:1px solid var(--hairline);color:inherit}
.result:last-child{border-bottom:0}
.result__meta{flex:1;min-width:0;display:flex;flex-direction:column}
.result__name{font-weight:600;font-size:1.02rem}
.result__sub{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result__sub b{color:var(--gold-deep);font-weight:700}
.result__tag{flex:0 0 auto;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--red);border:1.5px solid var(--red);border-radius:var(--r-pill);padding:3px 10px}

/* 5.18 pagination ------------------------------------------------ */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.pager__btn{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:10px 17px;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);box-shadow:var(--shadow)}
.pager__btn svg{width:15px;height:15px}
.pager__btn[aria-disabled="true"]{color:var(--muted);opacity:.45;pointer-events:none}
.pager__count{color:var(--muted);font-family:var(--score);font-size:.95rem;letter-spacing:.04em}

/* 5.19 states ----------------------------------------------------- */
.state{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);padding:34px 24px;text-align:center;box-shadow:5px 6px 0 rgba(26,22,17,.09)}
.state__icon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;border:2px solid var(--ink)}
.state__icon svg{width:28px;height:28px}
.state--empty .state__icon{background:var(--gold)}
.state--error .state__icon{background:var(--red)}
.state h2{font-family:var(--display);font-size:1.5rem;line-height:1.05}
.state p{color:var(--ink-2);margin-top:8px;max-width:44ch;margin-inline:auto;line-height:1.5}
.state__btn{display:inline-block;margin-top:18px;background:var(--ink);color:var(--card);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:11px 22px;border-radius:var(--r-pill)}
.skeleton{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);overflow:hidden}
.skel-row{display:flex;align-items:center;gap:14px;padding:13px 15px;border-bottom:1px solid var(--hairline)}
.skel-row:last-child{border-bottom:0}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,var(--paper) 50%,var(--paper-2) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:5px}
.skel--icon{width:46px;height:46px;border-radius:var(--r-icon);flex:0 0 auto}
.skel--line{height:13px;flex:1}
.skel--short{height:13px;width:38%;margin-top:8px}
.skel--val{width:58px;height:20px;flex:0 0 auto}
.skel__col{flex:1;min-width:0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* 5.20 footer ----------------------------------------------------- */
.footer{margin-top:46px;border-top:4px double var(--rule);background:var(--paper-2)}
.footer .wrap{padding-block:28px 44px}
.brand--footer{font-size:1.3rem;margin-bottom:12px}
.brand--footer .seal-mini{width:24px;height:24px}
.trust{color:var(--ink-2);font-size:.88rem;max-width:62ch;line-height:1.5}
.disclaimer{color:var(--muted);font-size:.78rem;margin-top:12px;max-width:64ch;line-height:1.5}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.footer__nav a{color:var(--red-deep);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* breadcrumb doorway */
.crumb{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:16px 0 4px}
.crumb svg{width:15px;height:15px}

/* cross-link doorways */
.doorways{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.doorway{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:10px 17px;color:var(--ink);font-weight:600;font-size:.92rem;box-shadow:var(--shadow)}
.doorway svg{width:16px;height:16px;color:var(--red)}

/* ---- 6. UTILITIES ---------------------------------------------------- */
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ---- 7. RESPONSIVE --------------------------------------------------- */
/* base above is the phone layout (mobile first) */
@media (min-width:600px){           /* tablet */
  .bar__inner{height:62px}
  .bar__search{display:flex}
  .bar__searchbtn{display:none}
  .section__title{font-size:2rem}
}
@media (min-width:980px){           /* desktop */
  .scroller{scroll-snap-type:none}
  /* .grid reaches 3-4 columns on its own via auto-fit minmax */
}

/* ---- 8. APP ALMANAC ADD-ONS (consent, legal, status, share) ---------- */
[hidden]{display:none !important}

.explain dl{margin:0}

/* skip-to-content link: hidden until focused (keyboard accessibility) */
.skip-link{position:absolute;left:8px;top:-48px;z-index:100;background:var(--ink);color:var(--card);
  padding:10px 16px;border-radius:0 0 8px 8px;font-weight:700;font-size:.85rem;transition:top .12s ease}
.skip-link:focus{top:0}

/* brand logo mark (the Hall of Records seal) */
.brand__mark{width:30px;height:30px;flex:0 0 auto;border-radius:50%;object-fit:cover;display:block}
.brand--footer .brand__mark{width:28px;height:28px}

/* carousel arrows (JS-injected progressive enhancement over .scroller) */
.carousel{position:relative}
.carousel__nav{position:absolute;top:44%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;
  display:none;place-items:center;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:2px 3px 0 rgba(26,22,17,.16);cursor:pointer}
.carousel__nav:hover{background:var(--ink);color:var(--card)}
.carousel__nav svg{width:20px;height:20px}
.carousel__nav--prev{left:0}
.carousel__nav--next{right:0}
/* show only on pointer devices with room; touch users swipe instead */
@media (hover:hover) and (min-width:760px){
  .carousel.is-ready .carousel__nav{display:grid}
}

/* social share */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.share__label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.share__btn{display:inline-grid;place-items:center;width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;background:var(--card);color:var(--ink)}
.share__btn:hover{background:var(--ink);color:var(--card)}
.share__btn svg{width:18px;height:18px}
.share__btn.is-copied{background:var(--green);border-color:var(--green);color:#fff}

/* footer legal nav reuses .footer__nav; cookie button styled like a link */
.footer__nav button{background:none;border:0;padding:0;color:var(--red-deep);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:inherit;cursor:pointer}
.footer__nav button:hover{text-decoration:underline}

/* legal / long-form pages */
.legal{max-width:760px;margin:8px auto 10px}
.legal h1{font-family:var(--display);font-weight:400;font-size:clamp(2rem,7vw,3rem);line-height:1.04;margin-bottom:6px}
.legal h2{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:26px 0 8px}
.legal p,.legal li{color:var(--ink-2);line-height:1.6;margin:8px 0}
.legal a{color:var(--red);text-decoration:underline}
.legal ul{padding-left:20px;list-style:disc}
.legal li{margin:6px 0}
.legal code{background:var(--paper-2);padding:1px 6px;border-radius:5px;font-size:.9em}
.legal-dates{color:var(--muted);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* status table (admin) */
.status-table{width:100%;border-collapse:collapse;margin:16px 0;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);overflow:hidden}
.status-table th,.status-table td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--hairline);font-size:.92rem}
.status-table th{color:var(--muted);font-weight:700;width:250px;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem}
.status-table td{font-variant-numeric:tabular-nums}

/* cookie consent banner + preferences modal (paper theme) */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--card);border-top:4px double var(--rule);box-shadow:0 -6px 20px rgba(26,22,17,.18)}
.consent-inner{max-width:var(--wrap);margin-inline:auto;padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.consent-text{margin:0;flex:1 1 320px;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.consent-text a{color:var(--red);text-decoration:underline}
.consent-actions{display:flex;gap:9px;flex-wrap:wrap}
.consent button,.consent-modal button{background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:9px 17px;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.consent button.primary,.consent-modal button.primary{background:var(--red);border-color:var(--red);color:#fff}
.consent-modal{position:fixed;inset:0;z-index:1001;background:rgba(26,22,17,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.consent-modal-card{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-card);max-width:540px;width:100%;max-height:85vh;overflow-y:auto;padding:24px;box-shadow:5px 6px 0 rgba(26,22,17,.12)}
.consent-modal-card h2{font-family:var(--display);font-weight:400;font-size:1.5rem;margin-bottom:6px}
.consent-modal-card>p{color:var(--ink-2);font-size:.95rem}
.consent-cats{list-style:none;padding:0;margin:16px 0}
.consent-cats li{margin-bottom:12px}
.consent-cats label{display:flex;align-items:center;gap:10px;font-weight:700}
.consent-cats span{display:block;color:var(--muted);font-size:.82rem;margin:3px 0 0 28px;line-height:1.4}
.consent-cats input{width:18px;height:18px;accent-color:var(--red)}
.consent-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);padding:4px 8px}
.consent-modal .consent-actions{justify-content:flex-end;margin-top:16px}

@media (max-width:560px){
  .consent-inner{flex-direction:column;align-items:stretch}
  .consent-actions{justify-content:stretch}
  .consent-actions button{flex:1}
}