@charset "utf-8";
/* ==========================================================================
   סולטיז — Saltiz official site
   Design system. Hebrew-first, RTL.
   Signature device: heavy black stroke + hard offset shadow (no soft blur),
   taken from the brand's own letterforms and card frames.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Ground — warm near-black, derived from the logo's own outline (#1F120F) */
  --ink:        #14100E;
  --ink-raise:  #1F1815;
  --ink-sink:   #0C0908;
  --stroke:     #1F120F;

  /* Brand — sampled from the official logo files */
  --red:        #E8172C;
  --red-deep:   #B00F20;
  --yellow:     #FAD208;
  --yellow-deep:#C9A406;
  --gold-shade: #8F6F25;

  /* Document surface */
  --paper:      #FBF7EF;
  --paper-edge: #E8DFCC;
  --paper-ink:  #241C16;
  --paper-soft: #5C4F44;

  /* Text on dark */
  --cream:      #F7F1E6;
  --cream-soft: #B5A996;
  --cream-dim:  #948878;
  --hair:       rgba(247,241,230,0.14);

  /* Type scale — perfect fourth, tuned up for Hebrew */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   2rem;
  --t-2xl:  2.75rem;

  /* Layout */
  --measure: 1220px;
  --measure-doc: 44rem;
  --gut: 1.5rem;
  --band: 5.5rem;

  --radius: 14px;
  --radius-sm: 9px;
  --lift: -6px 6px 0 var(--stroke);
  --lift-sm: -4px 4px 0 var(--stroke);

  color-scheme: dark;
}

/* ---------- 2. Reset ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Heebo','Arial Hebrew','Segoe UI',system-ui,sans-serif;
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.7;
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }

h1,h2,h3,h4{
  margin:0;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

/* Visible keyboard focus everywhere */
:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--yellow); color:var(--stroke);
  padding:.85rem 1.35rem; font-weight:700; border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{ inset-inline-start:0; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 3. Layout --------------------------------------------------- */
.wrap{ max-width:var(--measure); margin-inline:auto; padding-inline:var(--gut); }
.band{ padding-block:var(--band); }
.band--tight{ padding-block:calc(var(--band) * .62); }
.rule{ border-top:1px solid var(--hair); }

/* ---------- 4. Badge (from the cards' gold number badge) ---------------- */
.badge{
  display:inline-block;
  background:var(--yellow);
  color:var(--stroke);
  font-size:var(--t-sm);
  font-weight:900;
  line-height:1;
  padding:.5rem .85rem;
  border:2px solid var(--stroke);
  border-radius:var(--radius-sm);
  box-shadow:var(--lift-sm);
  margin-bottom:1.4rem;
}
.badge--red{ background:var(--red); color:#fff; }
.badge--quiet{
  background:transparent; color:var(--yellow);
  border-color:var(--yellow); box-shadow:none;
}

/* ---------- 5. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.7rem;
  font-weight:900; font-size:var(--t-md); line-height:1.15;
  border:3px solid var(--stroke);
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn--go{ background:var(--yellow); color:var(--stroke); box-shadow:var(--lift); }
.btn--go:hover{ transform:translate(3px,-3px); box-shadow:-9px 9px 0 var(--stroke); }
.btn--go:active{ transform:translate(-2px,2px); box-shadow:-2px 2px 0 var(--stroke); }

.btn--red{ background:var(--red); color:#fff; box-shadow:var(--lift); }
.btn--red:hover{ transform:translate(3px,-3px); box-shadow:-9px 9px 0 var(--stroke); }
.btn--red:active{ transform:translate(-2px,2px); box-shadow:-2px 2px 0 var(--stroke); }

.btn--line{
  background:transparent; color:var(--cream);
  border-color:rgba(247,241,230,.4); box-shadow:none;
}
.btn--line:hover{ border-color:var(--cream); background:rgba(247,241,230,.07); }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
/* Spacing modifier: replaces an inline style= attribute so the production
   CSP needs no style-src-attr 'unsafe-inline'. */
.btn-row--spaced{ margin-top:2.25rem; }

/* ---------- 6. Nav ------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(20,16,14,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.nav__in{
  max-width:var(--measure); margin-inline:auto;
  padding:.85rem var(--gut);
  display:flex; align-items:center; gap:1rem;
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; font-size:var(--t-md); }
.nav__brand img{ width:38px; height:38px; }
.nav__spacer{ flex:1; }
.nav__list{ display:flex; align-items:center; gap:.35rem; list-style:none; }
.nav__list a{
  display:block; padding:.6rem .85rem; border-radius:var(--radius-sm);
  font-size:var(--t-sm); font-weight:700; color:var(--cream-soft);
  transition:color .15s ease, background-color .15s ease;
}
.nav__list a:hover{ color:var(--cream); background:rgba(247,241,230,.07); }
.nav__list a[aria-current="page"]{ color:var(--yellow); }
.nav__cta{
  background:var(--yellow); color:var(--stroke) !important;
  border:2px solid var(--stroke); box-shadow:var(--lift-sm);
  font-weight:900 !important;
}
.nav__cta:hover{ background:#fff !important; }

.nav__burger{
  display:none;
  width:44px; height:44px; flex:none;
  align-items:center; justify-content:center;
  background:transparent; border:2px solid rgba(247,241,230,.3);
  border-radius:var(--radius-sm); cursor:pointer;
}
.nav__burger span{ display:block; width:19px; height:2.5px; background:var(--cream); border-radius:2px; position:relative; }
.nav__burger span::before,
.nav__burger span::after{
  content:""; position:absolute; inset-inline:0; height:2.5px;
  background:var(--cream); border-radius:2px;
}
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{ top:6px; }

/* ---------- 7. Hero ----------------------------------------------------- */
.hero{ position:relative; overflow:hidden; }
.hero__heat{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 48% at 78% 22%, rgba(232,23,44,.36), transparent 68%),
    radial-gradient(50% 44% at 14% 84%, rgba(250,210,8,.20), transparent 66%);
}
.hero__in{
  position:relative; z-index:1;
  min-height:min(82vh,740px);
  max-width:var(--measure); margin-inline:auto; padding:3.5rem var(--gut) 0;
  display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:end;
}
.hero__mark{ width:min(78%,470px); margin:0 0 1.6rem; }
.hero__copy{ padding-bottom:4.5rem; }
.hero h1{
  font-size:clamp(2rem,4.6vw,3.4rem);
  margin:0 0 1.1rem;
}
.hero__lede{
  font-size:var(--t-md); color:var(--cream-soft);
  max-width:34ch; margin:0 0 2rem;
}
.hero__crew{ align-self:end; }
.hero__crew img{
  width:100%; max-width:580px; margin-inline-start:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
}

/* ---------- 8. Section heads ------------------------------------------- */
.head{ max-width:56ch; margin-bottom:3rem; }
.head h2{ font-size:clamp(1.9rem,4vw,var(--t-2xl)); margin:0 0 .9rem; }
.head p{ color:var(--cream-soft); font-size:var(--t-md); margin:0; }

/* ---------- 9. YouTube --------------------------------------------------
   Visual-first: one large official channel visual, a Saltiz + YouTube
   lockup, big type, one CTA. No cards, no icon grid, no eyebrow label.
   This is an entertainment brand block, not an About Us. */
.tube{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:3rem; align-items:center;
}
.tube__shot img{
  width:100%; max-width:620px; margin-inline-start:auto;
  border:3px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--lift);
}

/* Saltiz mark next to the official YouTube mark, read as a co-brand */
.tube__lockup{
  display:flex; align-items:center; gap:1.15rem;
  margin-bottom:1.6rem;
}
.tube__lockup img{ width:66px; height:66px; flex:none; }
.tube__yt{ width:92px; height:auto; flex:none; display:block; }

.tube h2{
  font-size:clamp(2.3rem,5.6vw,3.75rem);
  margin:0 0 1.25rem;
}
.tube__lead{
  margin:0 0 .85rem;
  font-size:var(--t-lg); font-weight:700; line-height:1.35;
  color:var(--cream); max-width:30ch; text-wrap:balance;
}
.tube__sub{
  margin:0 0 2.25rem;
  font-size:var(--t-md); color:var(--cream-soft); max-width:36ch;
}

/* ---------- 10. Members ------------------------------------------------ */
.crew{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.crew__shot img{ width:100%; }
.crew__names{ list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.crew__names li{
  font-size:clamp(2.2rem,6vw,3.6rem); font-weight:900; line-height:1.1;
  letter-spacing:-0.03em;
  color:var(--cream);
  border-bottom:1px solid var(--hair);
  padding-block:.35rem;
}
.crew__note{ margin:1.5rem 0 0; color:var(--cream-dim); font-size:var(--t-sm); max-width:38ch; }

/* ---------- 11. App --------------------------------------------------- */
.app{ display:grid; grid-template-columns:auto 1fr; gap:2.25rem; align-items:center; }
.app__icon{
  width:128px; height:128px; flex:none;
  border:3px solid var(--stroke); border-radius:26px;
  box-shadow:var(--lift);
}
.app h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin:0 0 .75rem; }
.app p{ color:var(--cream-soft); max-width:46ch; margin:0 0 1.6rem; }

.store{ display:flex; flex-wrap:wrap; gap:.9rem; }
.store__btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--ink-raise); color:var(--cream);
  border:2px solid rgba(247,241,230,.32);
  border-radius:var(--radius); padding:.75rem 1.25rem;
  transition:border-color .15s ease, background-color .15s ease;
}
.store__btn:hover{ border-color:var(--cream); background:#241d19; }
.store__btn svg{ width:26px; height:26px; flex:none; }
.store__btn span{ display:block; line-height:1.25; }
.store__btn b{ display:block; font-size:var(--t-md); font-weight:900; }
.store__btn i{ display:block; font-style:normal; font-size:var(--t-xs); color:var(--cream-dim); }

/* ---------- 12. Saltix / game ----------------------------------------- */
.game{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
.game__pack{ position:relative; display:grid; place-items:center; }
.game__pack::before{
  content:""; position:absolute; inset:8% 12%;
  background:radial-gradient(circle,rgba(250,210,8,.3),transparent 68%);
  filter:blur(34px);
}
.game__pack img{ position:relative; width:min(100%,340px); }
.game__logo{ width:min(58%,230px); margin:0 0 1.4rem; }
.game h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin:0 0 .9rem; }
.game p{ color:var(--cream-soft); font-size:var(--t-md); max-width:44ch; margin:0 0 1.5rem; }

.stat{
  display:flex; align-items:baseline; gap:.6rem;
  border:2px solid var(--stroke); border-radius:var(--radius);
  background:var(--ink-raise); padding:1rem 1.3rem; margin-bottom:1.6rem;
}
.stat b{ font-size:2.4rem; font-weight:900; color:var(--yellow); line-height:1; }
.stat span{ color:var(--cream-soft); font-size:var(--t-sm); }

/* ---------- 13. Card strip -------------------------------------------- */
.strip{
  display:flex; gap:.9rem; overflow-x:auto; list-style:none;
  padding-block:.5rem 1.5rem;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.strip li{ flex:none; scroll-snap-align:start; }
.strip img{
  width:168px;
  border-radius:10px; border:2px solid var(--stroke);
}

/* ---------- 14. Rarity ladder ----------------------------------------- */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.tier{
  position:relative; overflow:hidden;
  background:var(--ink-raise);
  border:3px solid var(--stroke);
  border-radius:var(--radius);
  padding:1rem 1rem 1.2rem;
}
.tier__slot{
  position:relative; aspect-ratio:400/545;
  border-radius:8px; overflow:hidden;
  background:#0F0C0A; margin-bottom:.9rem;
  display:grid; place-items:center;
}
/* All four assets are exactly 400x545, matching the slot's aspect-ratio, so
   nothing is cropped — every card sits at an identical size and alignment. */
.tier__slot img{ width:100%; height:100%; object-fit:cover; }

/* Deliberately no per-tier borders, glows or colours: each card carries its
   own real frame (red / black / silver / gold), which is the rarity signal. */
.tier h3{ font-size:var(--t-lg); margin:0 0 .2rem; color:var(--cream); }
.tier p{ margin:0; font-size:var(--t-xs); color:var(--cream-soft); }

/* ---------- 16. Footer ------------------------------------------------ */
.foot{ background:var(--ink-sink); border-top:1px solid var(--hair); padding-block:3.5rem 2rem; }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  max-width:var(--measure); margin-inline:auto; padding-inline:var(--gut);
}
.foot__brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; font-size:var(--t-md); margin-bottom:.8rem; }
.foot__brand img{ width:34px; height:34px; }
.foot p{ color:var(--cream-dim); font-size:var(--t-sm); margin:0; max-width:34ch; }
.foot h3{ font-size:var(--t-sm); color:var(--cream); margin:0 0 .8rem; }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:.1rem; }
.foot ul a{
  display:inline-block; padding-block:.45rem;
  color:var(--cream-soft); font-size:var(--t-sm);
}
.foot ul a:hover{ color:var(--yellow); }
.foot__base{
  max-width:var(--measure); margin:2.5rem auto 0; padding:1.5rem var(--gut) 0;
  border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between;
  color:var(--cream-dim); font-size:var(--t-xs);
}

/* ---------- 17. Document pages (rules / privacy / terms) -------------- */
.docwrap{
  max-width:var(--measure); margin-inline:auto;
  padding:2.5rem var(--gut) var(--band);
  display:grid; grid-template-columns:16rem 1fr; gap:2.5rem; align-items:start;
}
.docwrap--plain{ grid-template-columns:1fr; max-width:calc(var(--measure-doc) + 6rem); }

.dochero{ position:relative; overflow:hidden; border-bottom:1px solid var(--hair); }
.dochero__heat{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 60% at 82% 30%, rgba(232,23,44,.3), transparent 66%);
}
.dochero__in{ position:relative; max-width:var(--measure); margin-inline:auto; padding:3.25rem var(--gut); }
.dochero h1{ font-size:clamp(2.1rem,5vw,3.2rem); margin:0 0 .9rem; }
.dochero p{ color:var(--cream-soft); font-size:var(--t-md); margin:0; max-width:52ch; }

/* Table of contents */
.toc{ position:sticky; top:5.5rem; }
.toc h2{ font-size:var(--t-sm); color:var(--cream-dim); margin:0 0 .9rem; font-weight:700; }
.toc ol{ list-style:none; display:flex; flex-direction:column; gap:.15rem; counter-reset:toc; }
.toc a{
  display:block; padding:.55rem .7rem; border-radius:var(--radius-sm);
  font-size:var(--t-sm); font-weight:700; color:var(--cream-soft);
  border-inline-start:2px solid transparent;
  transition:color .15s ease, background-color .15s ease;
}
.toc a:hover{ color:var(--cream); background:rgba(247,241,230,.06); }
.toc a.is-here{ color:var(--yellow); background:rgba(250,210,8,.09); border-inline-start-color:var(--yellow); }

/* The paper panel */
.paper{
  background:var(--paper); color:var(--paper-ink);
  border:3px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--lift);
  padding:clamp(1.6rem,4vw,3.25rem);
}
.paper > *:first-child{ margin-top:0; }
.paper h2{
  font-size:clamp(1.5rem,3.2vw,2rem);
  margin:2.75rem 0 1rem;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--paper-edge);
  scroll-margin-top:6rem;
}
.paper h3{ font-size:var(--t-lg); margin:2rem 0 .6rem; }
.paper p{ margin:0 0 1.15rem; max-width:var(--measure-doc); line-height:1.85; }
.paper ul,.paper ol{ margin:0 0 1.3rem; padding-inline-start:1.4rem; max-width:var(--measure-doc); }
.paper li{ margin-bottom:.6rem; line-height:1.8; }
.paper strong{ font-weight:700; }
.paper a{ color:var(--red-deep); text-decoration:underline; text-underline-offset:3px; }
.paper hr{ border:0; border-top:2px solid var(--paper-edge); margin:2.5rem 0; }
.paper__lede{ font-size:var(--t-md); color:var(--paper-soft); }
.paper__meta{ color:var(--paper-soft); font-size:var(--t-sm); }

/* Numbered clause list for the תקנון */
.clauses{ list-style:none; padding:0 !important; counter-reset:clause; }
.clauses > li{
  counter-increment:clause;
  position:relative;
  padding-inline-start:2.9rem;
  margin-bottom:1.5rem;
}
.clauses > li::before{
  content:counter(clause);
  position:absolute; inset-inline-start:0; top:.1rem;
  width:2rem; height:2rem;
  display:grid; place-items:center;
  background:var(--stroke); color:var(--yellow);
  font-size:var(--t-sm); font-weight:900;
  border-radius:7px;
}

/* Clause index — a 23-item list needs two columns to stay scannable */
.clauseindex{ columns:2; column-gap:2rem; margin:0 0 1.8rem; padding-inline-start:1.4rem; }
.clauseindex li{ break-inside:avoid; margin-bottom:.45rem; line-height:1.6; font-size:var(--t-sm); }
@media (max-width:620px){ .clauseindex{ columns:1; } }

/* Callouts inside the paper */
.note{
  border-inline-start:5px solid var(--red);
  background:#F4EADF;
  padding:1.1rem 1.25rem;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:0 0 1.5rem;
}
.note p{ margin:0; }
.note--todo{ border-inline-start-color:var(--yellow-deep); background:#F7EFD6; }
.note--todo b{ display:block; margin-bottom:.3rem; }

/* How-to-play steps — a genuine sequence, so numbers are earned */
.steps{ list-style:none; padding:0 !important; counter-reset:step; margin:0 0 1.5rem; }
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:2.5rem 1fr; gap:1rem;
  align-items:start; margin-bottom:1.1rem;
}
.steps li::before{
  content:counter(step);
  width:2.5rem; height:2.5rem;
  display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-weight:900; border-radius:9px;
}

/* Rarity table inside the document */
.rtable{ width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:var(--t-sm); }
.rtable th,.rtable td{ text-align:right; padding:.8rem .9rem; border-bottom:1px solid var(--paper-edge); }
.rtable th{ font-weight:900; background:#F3ECDF; }
.rtable__dot{ display:inline-block; width:.85rem; height:.85rem; border-radius:50%; border:2px solid var(--stroke); vertical-align:-2px; margin-inline-start:.4rem; }

/* ---------- 18. Reveal ------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }

/* ---------- 19. Responsive ------------------------------------------- */
@media (max-width:1020px){
  :root{ --band:4.25rem; }
  .hero__in{ grid-template-columns:1fr; gap:0; }
  .hero__copy{ padding-bottom:2rem; }
  .hero__crew img{ max-width:400px; margin-inline:auto; }
  .crew,.game,.docwrap,.tube{ grid-template-columns:1fr; gap:2rem; }
  .tube__shot img{ margin-inline:auto; }
  .toc{ position:static; }
  .toc ol{ flex-direction:row; flex-wrap:wrap; }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .nav__burger{ display:inline-flex; }
  .nav__list{
    position:fixed; inset:0; z-index:90;
    background:rgba(12,9,8,.985);
    flex-direction:column; justify-content:center; gap:.35rem;
    display:none;
  }
  .nav__list.is-open{ display:flex; }
  .nav__list a{ font-size:var(--t-lg); padding:.85rem 1.5rem; }
  .nav__cta{ margin-top:.75rem; }
  .app{ grid-template-columns:1fr; gap:1.5rem; }
  .foot__grid{ grid-template-columns:1fr; gap:2rem; }
  .strip img{ width:136px; }
}

@media (max-width:420px){
  :root{ --gut:1.15rem; }
  /* Keep the rarity ladder two-up even on the narrowest screens: seeing all
     four tiers together is what communicates the progression. Tighten the
     padding instead so the cards keep as much width as possible. */
  .tiers{ gap:.6rem; }
  .tier{ padding:.6rem .6rem .8rem; }
  .tier h3{ font-size:var(--t-md); }
}

/* ---------- 20. Reduced motion --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 21. Print ------------------------------------------------- */
@media print{
  .nav,.foot,.dochero__heat,.toc,.skip,.hero__heat{ display:none !important; }
  html,body{ background:#fff; color:#000; font-size:11.5pt; }
  .dochero{ border:0; }
  .dochero h1{ color:#000; }
  .dochero p{ color:#333; }
  .docwrap{ display:block; padding:0; max-width:none; }
  .paper{
    background:#fff; border:0; box-shadow:none; padding:0;
    color:#000; max-width:none;
  }
  .paper h2{ page-break-after:avoid; border-bottom:1px solid #999; }
  .paper li,.paper p{ page-break-inside:avoid; }
  .clauses > li::before{ background:#000; color:#fff; }
  .steps li::before{ background:#000; color:#fff; }
  .note{ border:1px solid #999; background:#f5f5f5; }
  a{ color:#000; }
  .paper a::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}


/* ---------- 22. Rarity ladder on paper -------------------------------- */
.ladder{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:0 0 1.6rem; }
.ladder__step{
  border:2px solid var(--stroke); border-radius:var(--radius-sm);
  padding:.7rem .6rem; text-align:center;
  font-weight:900; font-size:var(--t-sm); line-height:1.2;
  background:#EFE7D8; color:var(--paper-ink);
}
.ladder__step small{ display:block; font-weight:400; font-size:var(--t-xs); color:var(--paper-soft); margin-top:.2rem; }
.ladder__step--2{ background:#EBDCB4; }
.ladder__step--3{ background:var(--red); color:#fff; }
.ladder__step--3 small{ color:rgba(255,255,255,.85); }
.ladder__step--4{ background:var(--yellow); }

@media (max-width:520px){ .ladder{ grid-template-columns:repeat(2,1fr); } }
@media print{
  .ladder__step{ background:#fff !important; color:#000 !important; border-color:#000; }
  .ladder__step small{ color:#333 !important; }
}

/* ---------- 23. Chocolate ---------------------------------------------
   One display case holding two bays, rather than two separate cards —
   keeps the boxed-surface count down and reads as a single product shelf. */
.choc__case{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--ink-raise);
  border:3px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--lift);
  overflow:hidden;
}
.choc__bay{
  position:relative;
  padding:1.75rem 1.5rem 1.5rem;
  display:flex; flex-direction:column; align-items:center;
}
.choc__bay + .choc__bay{ border-inline-start:1px solid var(--hair); }

.choc__glow{
  position:absolute; z-index:0; pointer-events:none;
  inset:0;
  background:radial-gradient(40% 34% at 50% 42%, rgba(232,23,44,.5), transparent 72%);
}
.choc__shot{
  position:relative; z-index:1;
  width:100%; max-width:400px;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.choc__name{
  position:relative; z-index:1;
  margin:.5rem 0 0;
  font-size:var(--t-xl); font-weight:900; line-height:1.1;
  letter-spacing:-0.02em; color:var(--cream);
}
.choc__where{
  margin:1.75rem 0 0;
  color:var(--cream-soft); font-size:var(--t-md);
}

@media (max-width:760px){
  .choc__case{ grid-template-columns:1fr; }
  .choc__bay{ padding:2rem 1.25rem 1.75rem; }
  .choc__bay + .choc__bay{
    border-inline-start:0;
    border-top:1px solid var(--hair);
  }
  .choc__shot{ max-width:300px; }
}

/* ---------- 24. Four-card rarity row inside the document -------------- */
.cardrow{ margin:0 0 1.6rem; }
.cardrow ol{
  list-style:none; padding:0; margin:0 0 .7rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem;
}
.cardrow img{
  width:100%; border:2px solid var(--stroke); border-radius:8px;
}
.cardrow figcaption{ font-size:var(--t-xs); color:var(--paper-soft); }
.cardrow b{ display:block; font-size:var(--t-sm); margin-top:.4rem; text-align:center; }
@media (max-width:560px){ .cardrow ol{ grid-template-columns:repeat(2,1fr); } }
@media print{ .cardrow img{ border-color:#000; } }


/* ==========================================================================
   24. Accessibility menu
   Same contract as cards.aleph-infinity.com so the two sites behave alike:
   localStorage["saltiz-a11y"] = {fontScale, contrast, motion, links}, applied
   as data-a11y-* attributes on <html> by an inline script in <head> (before
   paint, so a chosen setting never flashes the default first).
   Built in-house on purpose — a commercial accessibility overlay loads
   third-party code and profiles the visitor, and this site is read by children.
   ========================================================================== */

/* ---------- Text size — rem-based tokens, so the root scales everything -- */
:root[data-a11y-font="1.15"]{ font-size:115%; }
:root[data-a11y-font="1.3"] { font-size:130%; }
:root[data-a11y-font="1.5"] { font-size:150%; }

/* ---------- High contrast — retokenised, not filtered -------------------
   A CSS filter would wreck the card artwork and the logo. Overriding the
   tokens keeps every component intact and lands every text pair at 9.6:1 or
   better (white/black pairs reach 21:1). */
:root[data-a11y-contrast="high"]{
  --ink:#000000; --ink-raise:#0A0A0A; --ink-sink:#000000; --stroke:#000000;
  --cream:#FFFFFF; --cream-soft:#FFFFFF; --cream-dim:#F0F0F0;
  --hair:rgba(255,255,255,.55);
  --paper:#FFFFFF; --paper-edge:#000000; --paper-ink:#000000; --paper-soft:#1A1A1A;
  --red:#8F0018; --red-deep:#8F0018; --yellow:#FFE800; --yellow-deep:#FFE800;
  --lift:-6px 6px 0 #000000; --lift-sm:-4px 4px 0 #000000;
}
:root[data-a11y-contrast="high"] .dochero__heat,
:root[data-a11y-contrast="high"] .hero__heat{ display:none; }
:root[data-a11y-contrast="high"] .paper{ border-color:#000; }
:root[data-a11y-contrast="high"] .note{ background:#F2F2F2; border-inline-start-color:#8F0018; }
:root[data-a11y-contrast="high"] .note--todo{ background:#F2F2F2; border-inline-start-color:#000; }
:root[data-a11y-contrast="high"] .rtable th{ background:#E8E8E8; }
:root[data-a11y-contrast="high"] .rtable th,
:root[data-a11y-contrast="high"] .rtable td{ border-bottom-color:#000; }
:root[data-a11y-contrast="high"] .ladder__step{ background:#FFF; color:#000; border-color:#000; }
:root[data-a11y-contrast="high"] .ladder__step small{ color:#1A1A1A; }
:root[data-a11y-contrast="high"] .toc a.is-here{ background:#000; color:#FFE800; }
:root[data-a11y-contrast="high"] .nav,
:root[data-a11y-contrast="high"] .foot{ border-color:rgba(255,255,255,.55); }

/* ---------- Stop animations — the attribute twin of the media query ----- */
:root[data-a11y-motion="reduced"]{ scroll-behavior:auto; }
:root[data-a11y-motion="reduced"] *,
:root[data-a11y-motion="reduced"] *::before,
:root[data-a11y-motion="reduced"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
:root[data-a11y-motion="reduced"] .reveal{ opacity:1; transform:none; }

/* ---------- Highlight links --------------------------------------------- */
:root[data-a11y-links="underlined"] a:not(.btn):not(.nav__cta):not(.a11y__trigger){
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  font-weight:700;
}
:root[data-a11y-links="underlined"] .paper a{ text-decoration-thickness:3px; }
:root[data-a11y-links="underlined"] .btn,
:root[data-a11y-links="underlined"] .nav__cta{ outline:2px solid currentColor; outline-offset:2px; }

/* ---------- The trigger — bottom-left, matching the sibling site -------- */
.a11y{ position:fixed; inset-block-end:1rem; inset-inline-end:auto; left:1rem; z-index:60; }
.a11y__trigger{
  width:3rem; height:3rem;
  display:grid; place-items:center;
  background:var(--yellow); color:var(--stroke);
  border:3px solid var(--stroke); border-radius:50%;
  box-shadow:var(--lift-sm);
  cursor:pointer;
  transition:transform .15s ease;
}
.a11y__trigger:hover{ transform:translateY(-2px); }
.a11y__trigger svg{ width:1.6rem; height:1.6rem; }

/* ---------- The panel --------------------------------------------------- */
.a11y__panel{
  position:absolute; inset-block-end:3.9rem; left:0;
  width:17.5rem; max-width:calc(100vw - 2rem);
  background:var(--paper); color:var(--paper-ink);
  border:3px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--lift);
  padding:1.1rem 1.15rem 1.25rem;
  text-align:right;
}
.a11y__panel[hidden]{ display:none; }
.a11y__panel h2{ font-size:var(--t-md); margin:0 0 .9rem; }
.a11y__group{ margin-bottom:1rem; }
.a11y__label{
  display:block; font-size:var(--t-xs); font-weight:700;
  color:var(--paper-soft); margin-bottom:.4rem;
}
.a11y__sizes{ display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; }
.a11y__opt,.a11y__toggle,.a11y__reset{
  font-weight:700; font-size:var(--t-sm);
  background:#EFE7D8; color:var(--paper-ink);
  border:2px solid var(--stroke); border-radius:var(--radius-sm);
  padding:.5rem .4rem; cursor:pointer; text-align:center;
}
.a11y__toggle{ display:block; width:100%; text-align:start; padding:.55rem .7rem; margin-bottom:.35rem; }
.a11y__opt[aria-pressed="true"],
.a11y__toggle[aria-pressed="true"]{ background:var(--stroke); color:var(--yellow); }
.a11y__toggle[aria-pressed="true"]::before{ content:"✓ "; }
.a11y__toggle[aria-pressed="false"]::before{ content:"○ "; }
.a11y__reset{ width:100%; background:transparent; font-size:var(--t-xs); }
.a11y__note{ margin:.8rem 0 0; font-size:var(--t-xs); color:var(--paper-soft); line-height:1.5; }
.a11y__note a{ color:var(--red-deep); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:520px){
  .a11y{ inset-block-end:.75rem; left:.75rem; }
  .a11y__panel{ width:calc(100vw - 1.5rem); }
}

@media print{ .a11y{ display:none !important; } }

/* ---------- Narrow-viewport robustness --------------------------------
   Scaling the text exposed a latent constraint rather than creating one:
   a grid `1fr` track is `minmax(auto,1fr)`, so it refuses to shrink below
   its content's min-content width and pushes the whole column past the
   viewport. `min-width:0` lets it shrink and the text wrap instead.
   Measured on a 320px viewport at 150% text: 169px of overflow → 0. */
.docwrap > *{ min-width:0; }
.paper,.toc{ overflow-wrap:break-word; }

@media (max-width:620px){
  /* Equal columns beat a table that shoves the page sideways. Above this
     width the tables keep their content-sized columns. */
  .rtable{ table-layout:fixed; }
  .rtable th,.rtable td{ overflow-wrap:break-word; }
}

/* ---------- 25. Movie ---------------------------------------------------
   A full-width cinematic band with the copy beneath it, rather than the
   two-column rhythm used elsewhere. Gives the film a closing beat of its
   own and stacks with no layout change. */
.movie__art{ margin:0 0 2.25rem; }
.movie__art img{
  width:100%;
  border:3px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--lift);
}
.movie__copy h2{
  font-size:clamp(1.9rem,4.4vw,3rem);
  margin:0 0 .8rem;
}
.movie__tag{
  margin:0 0 .8rem;
  font-size:var(--t-lg); font-weight:700; color:var(--yellow);
}
.movie__syn{
  margin:0;                                 /* no CTA follows: section ends here */
  font-size:var(--t-md); color:var(--cream-soft);
  max-width:46ch; line-height:1.7;
}

@media (max-width:760px){
  .movie__art{ margin-bottom:1.6rem; }
  /* A 2.4:1 band collapses to ~144px tall on a phone and the key art's own
     title stops being readable. Crop to 3:2 instead: the window still covers
     both the title block and the group, and the art nearly doubles in height. */
  .movie__art img{ aspect-ratio:3/2; object-fit:cover; object-position:center; }
}

/* ---------- 26. Social links -------------------------------------------
   Scoped under .foot on purpose: the generic `.foot ul` rule sets
   flex-direction:column and `.foot ul a` sets display:inline-block, both of
   which outrank a bare `.social` selector and stacked the icons vertically. */
.foot .social{
  display:flex; flex-direction:row; flex-wrap:wrap;
  gap:.6rem; list-style:none; margin:1.15rem 0 0; padding:0;
}
.foot .social a{
  width:44px; height:44px; padding:0;      /* 44px keeps the tap target comfortable */
  display:grid; place-items:center;
  color:var(--cream);
  border:2px solid rgba(247,241,230,.3);
  border-radius:var(--radius-sm);
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.foot .social a svg{ width:21px; height:21px; }
.foot .social a:hover{ color:var(--stroke); background:var(--yellow); border-color:var(--stroke); }