/*
THESIS: A catalogue proves itself the way an academic registrar proves a certification
track — course codes, prerequisite gates, registrar precision — not a manuscript's
colophon. Replaces "The Colophon" (prior world; evidence/anti-reference only now).
OWN-WORLD: cool bone paper, not warm cream; deep ink text; green as the ruled accent,
user-corrected from an initial indigo-navy pass back to green. The accent now resolves
to the MET brand green #358C0B sampled from the real feather icon, replacing an earlier
bottle-green pass; gold #D4AF37 is reserved for genuine "certified" moments only, never
decorative. Three tracks carry
real department-color identity (bottle-green, teal, plum), not shades of one hue.
Source Serif 4 + Archivo + Amiri, replacing Alegreya/Alegreya Sans. The homepage hero
is a tilted, overlapping "library card catalog" scene, not a flat split layout.
STORY: a visitor reads the curriculum as a structured, prerequisite-gated track, sees
real sequencing and gating (Teacher Resources require MET training first), and buys,
requests a bulk order, or is routed to training.
FIRST VIEWPORT: the homepage's card-catalog scene — the real book cover, tilted, with
an overlapping punch-hole index card (call number, track, prerequisite chain, a
rubber-stamp "available now") set at a counter-angle across its corner.
FORM: "The Prerequisite Ledger", assigned by the roll over six challengers (sleeping
city fold, hand-processed film, split-flap concourse, risograph system, PC-98 pixel
field, VHS rental wall); seed key aa807e49. User-authorized full identity replacement,
opening the family's previously-locked palette and type; user then corrected the
accent hue back to green and asked for a more distinctive, less flat-layout hero.
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish
review, the verdict, and DESIGN.md.
*/

:root{
  /* ground: cool institutional bone paper, light by default — a registrar's paper, not warm manuscript cream */
  --paper:#F1F0EA;
  --paper-2:#E7E5DC;
  --paper-3:#DAD7C9;
  --card:#FAFAF8;
  --ink:#14181F;
  --muted:#5B6270;
  --muted-2:#848B99;
  --line:#D2D0C4;

  /* deep "closed file" dark register — deliberate minority, not the page default */
  --ink-deep:#0D1420;
  --ink-deep-2:#10192A;
  --on-deep:#F1F0EA;
  --on-deep-dim:rgba(241,240,234,.66);

  /* MET brand green, corrected per brand spec (was a distinct bottle-green #1E5031) */
  --green:#358C0B;
  --green-deep:#2A6D09;
  --green-mid:#358C0B;
  --green-bright:#43AF0E;

  /* brand gold, corrected per brand spec (was brass #9C6B2E) */
  --gold:#D4AF37;
  --gold-deep:#B0912E;
  --gold-bright:#E8C55C;

  /* three tracks carry real department-color identity, not shades of one hue */
  --range-tjw:#173F27;
  --range-hfz:#2B5C56;
  --range-sci:#6B3F52;
  --range-pro:#7A5324;
  --range-oth:#4A4A6A;

  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arabic:"Amiri",serif;

  --gut:clamp(20px,5vw,72px);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.66;
  -webkit-font-smoothing:antialiased;position:relative;
}
/* faint laid-paper grain, sitewide, cheap and static */
body::before{
  content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
::selection{background:var(--green);color:#fff}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.016em;margin:0;font-size:clamp(2.4rem,5.2vw,4.1rem);text-align:center}
.h2{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0 0 1.2rem;font-size:clamp(1.8rem,3.3vw,2.6rem)}
.h3{font-family:var(--serif);font-weight:600;line-height:1.18;margin:0 0 .5rem;font-size:1.3rem}
.lede{font-size:1.06rem;line-height:1.6;color:var(--muted);max-width:58ch}
p{margin:0 0 1.05rem}
.imprint{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green-mid);text-align:center}
/* call numbers: tracked small sans — deliberately not monospace */
.callno{font-size:.74rem;font-weight:700;letter-spacing:.13em;color:var(--muted-2)}
.arabic{font-family:var(--arabic);direction:rtl;unicode-bidi:isolate;line-height:1.85}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.88rem;font-weight:700;
  letter-spacing:.01em;padding:.78rem 1.35rem;text-decoration:none;border:1.5px solid var(--ink);
  transition:background .15s ease,color .15s ease,border-color .15s ease;cursor:pointer;background:transparent;color:var(--ink);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-solid{background:var(--green-deep);border-color:var(--green-deep);color:var(--card)}
.btn-solid:hover{background:var(--green-mid);border-color:var(--green-mid)}
.btn-light{border-color:rgba(247,248,239,.55);color:var(--card)}
.btn-light:hover{background:rgba(247,248,239,.15);color:var(--card)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- rosette seal (family provenance mark, printed here as a stamp) ---------- */
.seal{flex:none;display:inline-block;color:var(--green-mid)}
.seal.seal--gold{color:var(--gold)}

/* ---------- range accent, used by track cards, ledger rows, and record marks ---------- */
.tab-tajweed{--tab:var(--range-tjw)}
.tab-hifzh{--tab:var(--range-hfz)}
.tab-sciences{--tab:var(--range-sci)}
/* the wider sciences split into their three real subjects */
.tab-quranic{--tab:var(--range-sci)}
.tab-prophetic{--tab:var(--range-pro)}
.tab-other{--tab:var(--range-oth)}

/* ---------- top rails ---------- */
.crossrail{background:var(--ink-deep);color:var(--on-deep)}
.crossrail .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:flex-end;min-height:36px;font-size:.74rem;letter-spacing:.05em}
.crossrail a{color:var(--on-deep-dim);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:.45rem;transition:color .2s}
.crossrail a:hover{color:#fff}
.crossrail .dot{width:5px;height:5px;background:var(--green);border-radius:50%;flex:none}
.crossrail .here{margin-right:auto;color:rgba(244,238,223,.5);letter-spacing:.13em;text-transform:uppercase;font-size:.67rem}

.masthead{background:var(--paper);border-bottom:5px double var(--green-deep);position:sticky;top:0;z-index:60}
.masthead .wrap{display:flex;align-items:center;gap:2rem;min-height:86px}
.brandmark{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink)}
.brandmark .logo{height:40px;width:auto}
.brandmark .wordmark{font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:-.005em;line-height:1.1}
.nav{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.4rem 0;position:relative;white-space:nowrap;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--green-mid)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green)}
.navcta{margin-left:.4rem}
.nav a.btn-solid,.nav a.btn-solid:hover,.nav a.btn-solid[aria-current="page"]{color:var(--card)}
.nav a.btn-solid[aria-current="page"]::after{content:none}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);padding:.5rem .8rem;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.masthead.nav-open .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);border-bottom:1.5px solid var(--green-deep);padding:.2rem var(--gut) 1rem}
.masthead.nav-open .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
.masthead.nav-open .nav a::after{display:none}
.masthead.nav-open .navcta{margin:.9rem 0 0;justify-content:center}

/* ---------- title-page hero (legacy, unused on current homepage) ---------- */
.titlehero{padding-block:clamp(52px,7vw,80px) clamp(20px,3vw,32px)}
.titlehero .wrap{max-width:800px}
.rule{width:58px;height:2px;background:var(--green);margin:0 auto 1.5rem}
.titlehero .lede{margin:1.5rem auto 0;text-align:center}
.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------- syllabus hero: the book shown as a course file (index.html) ---------- */
.syllabus-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(68px,9vw,124px) clamp(56px,7vw,92px);
  border-bottom:1.5px solid var(--green-deep);
}
/* Masjid al-Nabawi behind the catalogue, treated to match the printed jacket:
   desaturated toward parchment with the green dome kept as the one colour accent. */
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 66%;
  filter:saturate(.5) contrast(1.04) brightness(1.1) sepia(.18);
}
/* parchment wash: opaque where the copy sits, clearing toward the books on the right */
.syllabus-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(238,240,227,.97) 0%,
      rgba(238,240,227,.93) 34%,
      rgba(238,240,227,.72) 56%,
      rgba(238,240,227,.55) 78%,
      rgba(238,240,227,.62) 100%),
    linear-gradient(to bottom, rgba(238,240,227,.55) 0%, rgba(238,240,227,0) 22%, rgba(238,240,227,0) 68%, var(--paper) 100%);
}
/* a faint ink veil so the arcade reads as engraving rather than a stock photo */
.syllabus-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 22% 45%, rgba(13,51,0,.06) 0%, rgba(13,51,0,0) 60%);
  mix-blend-mode:multiply;
}
.syllabus-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center;position:relative}
.syllabus-hero-copy .imprint{text-align:left;margin-bottom:.9rem}
.syllabus-hero-copy .display{text-align:left;margin-bottom:1.1rem}
.syllabus-hero-copy .lede{text-align:left;margin:0 0 0;max-width:46ch}
.syllabus-hero-copy .hero-actions{justify-content:flex-start;margin-top:2rem}

/* ---------- card catalog: the book as a tilted, overlapping library index card ---------- */
/* The two cards receding behind the front one were blank rectangles while only
   Book 1's cover existed. They now carry real jackets — the Teacher's Resource
   that pairs with Book 1, and a title from the wider sciences — so the fan reads
   as a real series with a teaching edition, not as one book plus filler. */
.cc-back{
  position:absolute;left:8px;top:8px;z-index:-1;
  width:min(300px,calc(100% - 8px - 15%));aspect-ratio:2/3;object-fit:cover;
  background:var(--card);border:1px solid var(--line);transform-origin:bottom left;
}
.cc-back-1{
  transform:rotate(-10.5deg) translate(-9px,4px);
  box-shadow:0 20px 34px -16px rgba(20,24,31,.28);
}
.cc-back-2{
  transform:rotate(-16deg) translate(-19px,9px);
  box-shadow:0 14px 26px -14px rgba(20,24,31,.22);
}

.card-catalog{position:relative;padding:8px 15% 15% 8px;isolation:isolate;
  /* the fan rotates about its bottom-left, so it swings well left of its box;
     this margin keeps that swing out of the headline column */
  margin-left:clamp(0px,10vw,132px)}

/* Below this the two columns cannot both fit: the fan's rotation and negative
   offsets push the receding covers left, straight over the headline. Stack
   instead, and pull the fan in so it never reaches the copy. */
@media (max-width:900px){
  .syllabus-hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .syllabus-hero-copy{order:1}
  .card-catalog{order:2;margin-inline:auto;max-width:340px;padding:8px 15% 12% 26px;margin-left:auto}
  .syllabus-hero-copy .lede{max-width:none}
}
@media (max-width:560px){
  .card-catalog{max-width:270px}
  .cc-back-1{transform:rotate(-8deg) translate(-5px,3px)}
  .cc-back-2{transform:rotate(-12.5deg) translate(-11px,6px)}
}
.card-catalog-book{width:100%;max-width:300px;aspect-ratio:2/3;transform:rotate(-5deg);border:1px solid var(--line);overflow:hidden;box-shadow:0 32px 56px -18px rgba(20,24,31,.38),0 10px 22px -10px rgba(20,24,31,.22);background:var(--card)}
.card-catalog-book img{width:100%;height:100%;object-fit:cover;display:block}
.card-catalog-index{position:absolute;right:0;bottom:0;width:min(300px,78%);background:var(--card);border:1.5px solid var(--green-deep);padding:1.7rem 1.5rem 1.5rem;transform:rotate(3.5deg);box-shadow:0 26px 46px -16px rgba(20,24,31,.32)}
.card-catalog-hole{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:15px;height:15px;border:2px solid var(--line);border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(20,24,31,.15)}
.card-catalog-index .imprint{text-align:left;margin:.7rem 0 .6rem}
.card-catalog-index h3{margin-bottom:1.15rem}
.card-catalog-stamp{display:inline-block;margin-top:1.2rem;padding:.4rem .75rem;border:2px solid var(--gold-deep);color:var(--gold-deep);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-3deg)}
.file-rows{margin:0;display:grid;gap:.65rem}
.file-rows>div{display:grid;grid-template-columns:104px 1fr;gap:.6rem;padding-bottom:.65rem;border-bottom:1px dotted var(--line);align-items:baseline}
.file-rows>div:last-child{border-bottom:0;padding-bottom:0}
.file-rows dt{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.file-rows dd{margin:0;font-size:.9rem;color:var(--ink)}
.file-rows dd.stamped{display:inline-flex;align-items:center;gap:.45rem;color:var(--gold-deep);font-weight:700}
.file-rows dd.stamped::before{content:"";width:6px;height:6px;background:var(--gold);flex:none}

/* ---------- the curriculum's own colophon: a manuscript closing-page record ---------- */
.colophon-record{
  max-width:620px;margin:clamp(36px,5vw,56px) auto 0;
  border-top:1.5px solid var(--green-deep);border-bottom:1.5px solid var(--green-deep);
  padding:clamp(24px,3.2vw,34px) 0;
}
.colophon-record .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.55rem 0;border-bottom:1px dotted var(--line);font-size:.94rem;
}
.colophon-record .row:last-child{border-bottom:0}
.colophon-record .row .k{color:var(--muted);letter-spacing:.01em;flex:none}
.colophon-record .row .v{font-weight:700;text-align:right}
.colophon-record .row .v.is-pending{font-weight:500;font-style:italic;color:var(--muted-2)}
.colophon-close{margin-top:1.6rem;display:flex;justify-content:center}
.provenance-strip{
  margin-top:1.8rem;
  display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1.5rem;
  font-size:.78rem;letter-spacing:.03em;color:var(--muted);text-align:center;
}

/* ---------- sections ---------- */
.section{padding-block:clamp(54px,6.5vw,92px)}
.section--dark{background:var(--ink-deep);color:var(--on-deep)}
.section--dark .h2{color:var(--on-deep)}
.section--dark .lede{color:var(--on-deep-dim)}
.section--tint{background:var(--paper-2)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}

/* ---------- page head ---------- */
.pagehead{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(54px,6.5vw,92px) clamp(38px,4.5vw,58px);
  border-bottom:1.5px solid var(--green-deep);
}
/* inner-page variant of the homepage header: the same Masjid al-Nabawi parchment,
   compressed, with a heavier wash — these are working pages, so the text leads
   and the photograph stays a ground rather than a subject. */
.pagehead .hero-bg,.shop-hero .hero-bg{position:absolute;inset:0;z-index:-2}
.pagehead .hero-bg img,.shop-hero .hero-bg img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--crop,50% 64%);
  filter:saturate(.42) contrast(1.03) brightness(1.13) sepia(.2);
}
.pagehead::before,.shop-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(94deg,
      rgba(238,240,227,.975) 0%, rgba(238,240,227,.95) 42%,
      rgba(238,240,227,.84) 66%, rgba(238,240,227,.74) 100%),
    linear-gradient(to bottom, rgba(238,240,227,.5) 0%, rgba(238,240,227,0) 34%, var(--paper) 100%);
}
.pagehead::after,.shop-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 85% at 18% 42%, rgba(13,51,0,.055) 0%, rgba(13,51,0,0) 62%);
  mix-blend-mode:multiply;
}
/* each page takes its own framing of the same photograph, so the set feels
   related without any two headers reading as identical */
.pagehead--dome{--crop:62% 48%}
.pagehead--minaret{--crop:82% 40%}
.pagehead--arcade{--crop:38% 82%}
.pagehead--wide{--crop:50% 70%}
.pagehead--sky{--crop:50% 26%}
.pagehead--left{--crop:16% 58%}
.crumb{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--muted-2);margin-bottom:1.4rem}
.crumb a{color:var(--muted-2);text-decoration:none}
.crumb a:hover{color:var(--green-mid)}
.crumb span{color:var(--line)}

/* ---------- promo strip (shop.html) ---------- */
.promo-strip{background:var(--ink-deep);color:var(--on-deep)}
.promo-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem;min-height:48px;padding-block:.6rem;font-size:.85rem;text-align:center}
.promo-strip a{display:inline-flex;align-items:center;gap:.4rem;color:var(--green-bright);font-weight:700;text-decoration:none;white-space:nowrap}
.promo-strip a:hover{text-decoration:underline}

/* ---------- shop hero (shop.html) ---------- */
.shop-hero{position:relative;isolation:isolate;overflow:hidden;--crop:50% 72%;padding-block:clamp(52px,6vw,86px) clamp(36px,4vw,54px);border-bottom:1.5px solid var(--green-deep)}
.shop-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:end}
.shop-hero-copy h1{margin-bottom:1rem}
.shop-hero-copy .lede{margin-bottom:1.6rem}
.shop-hero-search{max-width:420px}
.hero-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.hero-track{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;text-decoration:none;border:1px solid var(--line);background:var(--card);transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.19,1,.22,1)}
.hero-track img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.hero-track::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(33,28,20,.88) 0%,rgba(33,28,20,.2) 55%,rgba(33,28,20,0) 82%)}
.hero-track-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.85rem .75rem;color:var(--card)}
.hero-track-label strong{display:block;font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:.01em}
.hero-track-label em{display:block;font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:.25rem}
/* range panel: the three shop-hero track cards, keyed to the call-number system
   rather than repeating one book's jacket across three unrelated ranges. */
.hero-track .range-panel{
  position:relative;z-index:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(53,140,11,.09) 0%, rgba(53,140,11,0) 62%),
    linear-gradient(174deg,#F3EFDF 0%,#E7E1C9 100%);
  transition:transform .55s cubic-bezier(.19,1,.22,1);
}
.hero-track:hover .range-panel{transform:scale(1.05)}
.hero-track .rp-code{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing:.05em;color:var(--tab,var(--green-deep));line-height:1;
}
.hero-track .rp-rule{
  width:44%;height:3px;opacity:.45;
  background:repeating-linear-gradient(90deg,var(--tab,var(--green-deep)) 0 4px,transparent 4px 7px);
  border-top:1px solid var(--tab,var(--green-deep));border-bottom:1px solid var(--tab,var(--green-deep));
}
.hero-track:hover{border-color:var(--tab,var(--green-deep));transform:translateY(-4px);box-shadow:0 20px 36px -16px rgba(33,28,20,.3)}
.hero-track:hover img{transform:scale(1.08)}

/* ---------- ledger (the catalogue) — a typographic index, after Waka Waka:
   codes in a quiet gutter, columns aligned, no per-row colour or buttons.
   Thumbnails deliberately absent: only Book 1's cover exists, and repeating it
   beside other titles misrepresents them. ---------- */
.ledger{margin-top:1.5rem;border-top:1px solid var(--ink)}
.ledger-head{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.15fr) 120px;
  gap:1.8rem;align-items:baseline;padding:.65rem 0;border-bottom:1px solid var(--line);
  font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);
}
.ledger-head .r{text-align:right}
.lrow{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.15fr) 120px;
  gap:1.8rem;align-items:baseline;padding:1.05rem 0;
  border-bottom:1px solid var(--line);position:relative;
}
.lrow:hover{background:rgba(0,0,0,.015)}
.lrow .code{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.lrow .code .track{display:none}
.lrow h3{font-size:1.02rem;font-weight:600;margin:0;line-height:1.3}
.lrow .desc{font-size:.88rem;color:var(--muted);margin:0;line-height:1.45}
.lrow .action{text-align:right}
.lrow .amazon{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;
  color:var(--green-mid);text-decoration:none;border-bottom:1px solid transparent;
}
.lrow:hover .amazon{border-color:currentColor}
/* retailer URLs not supplied yet: shown as pending rather than linked to nothing */
.amazon.is-pending{
  color:var(--muted-2);font-style:italic;border-color:transparent!important;
  cursor:default;pointer-events:none;
}
.lrow .amazon svg{flex:none;opacity:.7}
.lrow .soon-label{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- ledger: ecommerce card grid (shop.html) ---------- */
/* Deliberate, scoped exception to the Flat Manuscript Rule: shadow, elevation and hover
   motion, authorized for the shop listing to read as a real storefront. Every other
   surface stays flat. */
.ledger.ledger--cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.8rem;border-top:0;margin-top:2.4rem}
.ledger--cards .lrow{position:relative;display:block;grid-template-columns:none;gap:0;padding:0;border:1px solid var(--line);background:var(--card);overflow:hidden;transition:transform .32s cubic-bezier(.19,1,.22,1),box-shadow .32s cubic-bezier(.19,1,.22,1),border-color .32s}
.ledger--cards .lrow:hover{transform:translateY(-8px);border-color:var(--tab,var(--green-deep));box-shadow:0 30px 56px -18px rgba(33,28,20,.34),0 10px 20px -10px rgba(33,28,20,.2)}
.ledger--cards .lrow .thumb{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border:0;display:block;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.ledger--cards .lrow:hover .thumb{transform:scale(1.06)}
.ledger--cards .lrow::before{content:attr(data-track);position:absolute;top:.6rem;left:.6rem;z-index:2;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.32rem .55rem;color:var(--card);background:var(--tab,var(--green-deep))}
.ledger--cards .lrow[data-track="tajweed"]::before{content:"Tajweed"}
.ledger--cards .lrow[data-track="hifzh"]::before{content:"Hifzh"}
.ledger--cards .lrow[data-track="quranic"]::before{content:"Quranic Sciences"}
.ledger--cards .lrow[data-track="prophetic"]::before{content:"Prophetic Sciences"}
.ledger--cards .lrow[data-track="other"]::before{content:"General Sciences"}
.ledger--cards .lrow[data-avail="soon"]::after{content:"Coming soon";position:absolute;top:.6rem;right:.6rem;z-index:2;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.32rem .55rem;color:var(--card);background:var(--ink)}
.ledger--cards .lrow .code{display:block;padding:.9rem 1.05rem 0}
.ledger--cards .lrow .code .track{display:none}
.ledger--cards .lrow>div:nth-child(3){padding:.3rem 1.05rem 0}
.ledger--cards .lrow h3{font-size:1.02rem;margin:0 0 .35rem}
.ledger--cards .lrow .desc{font-size:.83rem;min-height:2.5em}
.ledger--cards .lrow .action{padding:.9rem 1.05rem 1.1rem}
.ledger--cards .lrow .amazon{width:100%;justify-content:center}
.ledger--cards .lrow .soon-label{display:flex;align-items:center;justify-content:center;width:100%;padding:.66rem 0;border:1px solid var(--line);color:var(--muted-2)}

@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ledger--cards .lrow.card-in{animation:cardIn .5s cubic-bezier(.19,1,.22,1) both}

/* ---------- cover pending: a designed stand-in that echoes the real jackets
   (imprint, engraved rule, title, call number) without impersonating one.
   Used for every title whose cover artwork is still in production. ---------- */
.cover-pending{
  aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.1rem .9rem;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(53,140,11,.07) 0%, rgba(53,140,11,0) 58%),
    linear-gradient(174deg, #F3EFDF 0%, #E9E3CD 100%);
  border-bottom:1px solid var(--line);
}
.cover-pending .cp-imprint{
  font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-deep);opacity:.75;
}
.cover-pending .cp-rule{
  width:58%;height:3px;margin:.42rem 0 .7rem;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--green-deep) 0 4px,transparent 4px 7px);
  border-top:1px solid var(--green-deep);border-bottom:1px solid var(--green-deep);
}
.cover-pending .cp-title{
  font-family:var(--serif);font-weight:700;line-height:1.16;color:var(--green-deep);
  font-size:.95rem;text-wrap:balance;
}
.cover-pending .cp-code{
  margin-top:.55rem;font-size:.56rem;font-weight:700;letter-spacing:.14em;color:var(--green-mid);opacity:.85;
}
.cover-pending .cp-note{
  position:absolute;left:0;right:0;bottom:.55rem;
  font-size:.5rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
}

/* ---------- shop controls: search ---------- */
.shopctrl{margin-top:1.8rem}
.shopctrl .field{max-width:360px}

/* ---------- drawer filter ---------- */
.drawer{display:flex;flex-wrap:wrap;gap:0;margin-top:1.8rem;border-bottom:1.5px solid var(--green-deep)}
.dtab{font-size:.8rem;font-weight:600;padding:.65rem 1.05rem;border:1px solid var(--line);border-bottom:0;background:var(--paper-2);color:var(--muted);cursor:pointer;margin-right:-1px;margin-bottom:-1.5px;font-family:inherit}
.dtab.is-active{background:var(--green-deep);border-color:var(--green-deep);color:var(--card);position:relative;z-index:2}
.dtab .n{margin-left:.35rem;font-weight:500;opacity:.65}
.dtab.is-active .n{opacity:.85}
.dgroup{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:.5rem;width:100%}
.dgroup .glabel{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);width:100%;margin-bottom:.35rem}
.filter-count{font-size:.78rem;color:var(--muted-2);margin:1.1rem 0 0}

/* ---------- active filters ---------- */
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.1rem}
.active-filters .chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:700;letter-spacing:.03em;padding:.4rem .7rem;border:1px solid var(--green-deep);color:var(--green-deep);background:var(--card)}
.active-filters .chip button{background:none;border:0;padding:0;margin:0;font:inherit;line-height:1;color:inherit;cursor:pointer}
.active-filters .clear-all{font-size:.76rem;font-weight:700;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-family:inherit}
.active-filters .clear-all:hover{color:var(--ink)}

/* ---------- shop empty state ---------- */
.shop-empty{border-top:1.5px solid var(--green-deep);padding-block:clamp(54px,6.5vw,92px);text-align:center}
.shop-empty .lede{margin-left:auto;margin-right:auto}

/* ---------- table of contents ---------- */
.toc{margin-top:2rem;border-top:1.5px solid var(--line)}
.toc-row{display:flex;align-items:baseline;gap:.6rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.toc-row .num{font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--green-mid);flex:none;width:2.1rem}
.toc-row .label{font-weight:700;flex:none}
.toc-row .fill{flex:1;border-bottom:1px dotted var(--line);height:0;transform:translateY(-.35em)}
.toc-row .desc{flex:none;max-width:34ch;color:var(--muted);font-size:.88rem;text-align:right}
.section--dark .toc{border-top-color:rgba(244,238,223,.28)}
.section--dark .toc-row{border-bottom-color:rgba(244,238,223,.16)}
.section--dark .toc-row .num{color:var(--green-bright)}
.section--dark .toc-row .fill{border-bottom-color:rgba(244,238,223,.35)}
.section--dark .toc-row .desc{color:rgba(244,238,223,.66)}

/* ---------- range dividers ---------- */
.divider-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.4rem;border:1.5px solid var(--green-deep)}
.divider{padding:2rem 1.6rem;text-decoration:none;color:var(--ink);border-left:1px solid var(--green-deep);min-height:210px;display:flex;flex-direction:column;background:var(--card)}
.divider:first-child{border-left:0}
.divider+.divider{border-top:0}
.divider .code{font-size:.72rem;font-weight:700;letter-spacing:.13em;color:var(--tab,var(--range-tjw));margin-bottom:.9rem}
.divider h3{margin-bottom:.5rem}
.divider p{color:var(--muted);font-size:.92rem;margin:0 0 1.3rem}
.divider .go{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--tab,var(--range-tjw));border-bottom:1px solid transparent}
.divider:hover .go{border-color:currentColor}

/* ---------- book catalogue: real cover art, real title/call-number captions ---------- */
.book-tracks{display:grid;gap:clamp(32px,4vw,48px);margin-top:2.4rem}
.book-track-label{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.1rem}
.book-track-label h3{margin:0;font-size:1.2rem}
.book-track-label .count{font-size:.76rem;color:var(--muted-2);letter-spacing:.02em}
.book-grid{display:flex;flex-wrap:wrap;gap:1rem}
.book-cover{
  flex:1 1 148px;max-width:168px;
  border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);overflow:hidden;
  transition:border-color .15s ease,transform .15s ease;
}
.book-cover:hover{border-color:var(--tab,var(--range-tjw));transform:translateY(-2px)}
.book-cover img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.book-cover .cover-pending{border-bottom:1px solid var(--line);width:100%}
.book-cover .cap{padding:.6rem .7rem .75rem}
.book-cover .call{font-size:.64rem;font-weight:700;letter-spacing:.09em;color:var(--tab,var(--range-tjw))}
.book-cover .title{font-family:var(--serif);font-weight:600;font-size:.88rem;line-height:1.2;margin-top:.25rem;display:block}
.book-cover--wide{flex-basis:220px;max-width:240px}
.cover-note{font-size:.78rem;color:var(--muted-2);margin-top:1rem}

/* ---------- laid-in plate: the endorsement attestation — one of this site's two genuine gold moments ---------- */
.plate{border:1.5px solid var(--gold);background:var(--card);padding:clamp(26px,3.6vw,42px);position:relative;max-width:760px;margin:2.4rem auto 0}
.plate::after{content:"";position:absolute;inset:7px;border:1px solid var(--gold);opacity:.35;pointer-events:none}
.plate .seal{color:var(--gold)}

/* ---------- comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:2rem;border:1.5px solid var(--green-deep)}
.compare-col{padding:1.6rem;background:var(--card)}
.compare-col+.compare-col{border-left:1.5px solid var(--green-deep)}
.compare-col .for{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-mid);margin-bottom:.85rem}
.compare-col ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.compare-col li{color:var(--muted);font-size:.92rem;padding-left:1.05rem;position:relative}
.compare-col li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--green)}

/* ---------- callout / sticky ---------- */
.callout{border:1.5px solid var(--green-deep);background:var(--card);padding:clamp(20px,3vw,30px);margin-top:2.2rem}
.callout h3{margin-bottom:.5rem}
.stickybar{position:sticky;bottom:0;z-index:40;background:var(--ink-deep);color:var(--on-deep);padding:.95rem var(--gut);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:2.8rem;font-size:.86rem}

/* ---------- resource tabs ---------- */
.restabs{display:flex;flex-wrap:wrap;gap:0;margin-top:2rem;border-bottom:1.5px solid var(--green-deep)}
.restab{font-size:.82rem;font-weight:600;padding:.72rem 1.05rem;border:1px solid var(--line);border-bottom:0;background:var(--paper-2);color:var(--muted);text-decoration:none;margin-right:-1px;margin-bottom:-1.5px}
.restab.is-active{background:var(--green-deep);border-color:var(--green-deep);color:var(--card);position:relative;z-index:2}
.reslist{margin-top:1.5rem;border-top:1px solid var(--green-deep)}
.resitem{padding:.95rem 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.resitem .name{font-weight:700;font-size:.95rem}
.resitem .type{font-size:.76rem;color:var(--muted-2);margin-top:.2rem}
.resitem .dl{font-size:.8rem;font-weight:700;color:var(--green-mid);text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
/* files not yet uploaded: marked honestly rather than linked to nothing */
.resitem .dl.is-pending{
  color:var(--muted-2);font-weight:600;font-style:italic;cursor:default;
  border-bottom:0;pointer-events:none;
}
.resitem .dl:hover{border-color:currentColor}

/* ---------- form ---------- */
.form{margin-top:2rem;max-width:620px;display:grid;gap:1.15rem}
.form-row{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
.field{display:grid;gap:.4rem}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);background:var(--card);padding:.72rem .9rem;font:inherit;font-size:.94rem;color:var(--ink);width:100%;border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--green)}
.field textarea{resize:vertical;min-height:110px}

/* ---------- cards ---------- */
.cards{display:flex;flex-wrap:wrap;gap:1px;margin-top:2rem;background:var(--line);border:1.5px solid var(--green-deep)}
.card{flex:1 1 220px;background:var(--card);padding:1.45rem}
.card h3{font-size:1.05rem;margin-bottom:.45rem}
.card p{color:var(--muted);font-size:.9rem;margin:0}

/* ---------- footer ---------- */
.foot{background:var(--ink-deep);color:var(--on-deep);padding-block:clamp(46px,5.5vw,66px) 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(24px,4vw,48px)}
.foot h4{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-bright);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a{font-size:.88rem;text-decoration:none;color:var(--on-deep-dim)}
.foot a:hover{color:#fff}
.foot .blurb{font-size:.87rem;color:var(--on-deep-dim);max-width:32ch}
.signup{display:flex;gap:.5rem;margin-top:1rem}
.signup input{flex:1;min-width:0;border:1px solid rgba(244,238,223,.4);background:transparent;color:var(--on-deep);padding:.7rem .85rem;font:inherit;font-size:.86rem}
.signup input::placeholder{color:rgba(244,238,223,.45)}
.signup button{border:1px solid rgba(244,238,223,.4);background:transparent;color:var(--on-deep);padding:.7rem 1rem;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
.signup button:hover{background:var(--green);border-color:var(--green)}
.legal{margin-top:clamp(30px,3.6vw,44px);padding-top:1.35rem;border-top:1px solid rgba(244,238,223,.18);display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;font-size:.74rem;color:rgba(244,238,223,.55)}
.legal .spacer{margin-left:auto}
.legal a{color:rgba(244,238,223,.7)}

/* ---------- TBC ---------- */
.tbc{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green-mid);border:1px solid var(--green-mid);padding:.2rem .55rem;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .nav{display:none} .burger{display:block} }
@media (max-width:860px){
  body{font-size:16.5px}
  /* stacked layout puts copy over the photo — thicken the wash to hold legibility */
  .syllabus-hero::before{
    background:
      linear-gradient(to bottom,
        rgba(238,240,227,.96) 0%, rgba(238,240,227,.93) 46%,
        rgba(238,240,227,.7) 72%, var(--paper) 100%);
  }
  .hero-bg img{object-position:50% 58%}
  .pagehead::before,.shop-hero::before{
    background:linear-gradient(to bottom,
      rgba(238,240,227,.97) 0%, rgba(238,240,227,.94) 52%,
      rgba(238,240,227,.8) 78%, var(--paper) 100%);
  }
  .split,.compare,.form-row,.divider-row,.shop-hero-grid{grid-template-columns:1fr}
  .hero-tracks{margin-top:1.6rem}
  .compare-col+.compare-col{border-left:0;border-top:1.5px solid var(--green-deep)}
  .divider+.divider{border-top:1.5px solid var(--green-deep)}
  .lrow,.lrow--book{grid-template-columns:1fr;gap:.55rem}
  .lrow--book .thumb{width:44px;height:66px}
  .lrow .action{text-align:left}
  .stickybar{position:static;flex-direction:column;align-items:flex-start}
  .toc-row{flex-wrap:wrap}
  .toc-row .fill{display:none}
  .toc-row .desc{text-align:left;max-width:none}
  .shelf{justify-content:flex-start}
}


/* ============================================================
   LAMPLIGHT — one governing interaction idea: a warm reading lamp
   passing over parchment. Every hover state belongs to it.
   All motion is disabled under prefers-reduced-motion at the file end.
   ============================================================ */

/* the lamp itself: a warm pool tracking the pointer across the hero */
.syllabus-hero,.pagehead,.shop-hero{--mx:50%;--my:40%;--lamp:0}
.syllabus-hero .lamp,.pagehead .lamp,.shop-hero .lamp{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--lamp);transition:opacity .5s ease;
  background:radial-gradient(340px circle at var(--mx) var(--my),
    rgba(255,247,214,.5) 0%, rgba(255,243,198,.22) 38%, rgba(255,243,198,0) 70%);
  mix-blend-mode:soft-light;
}

/* the drawer opens: ghost cards fan out as the pointer nears the assembly */
.card-catalog::before,.card-catalog::after,
.card-catalog-book,.card-catalog-index{
  transition:transform .55s cubic-bezier(.19,1,.22,1),opacity .55s ease,box-shadow .55s ease;
}
.card-catalog:hover::before{transform:rotate(-13.5deg) translate(-17px,2px);opacity:.74}
.card-catalog:hover::after{transform:rotate(-20deg) translate(-33px,6px);opacity:.46}
.card-catalog:hover .card-catalog-book{
  transform:rotate(-4deg) translateY(-6px);
  box-shadow:0 40px 66px -20px rgba(20,24,31,.44),0 0 34px -6px rgba(53,140,11,.28);
}
.card-catalog:hover .card-catalog-index{transform:rotate(2.5deg) translateY(-3px)}

/* books catch the light: lift and take a green edge-glow */
.book-cover{transition:transform .32s cubic-bezier(.19,1,.22,1),box-shadow .32s ease,border-color .32s ease}
.book-cover:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 34px -16px rgba(20,24,31,.3),0 0 22px -4px rgba(53,140,11,.34);
}
.book-cover:hover .call{color:var(--green)}

/* a slow sheen crosses pending jackets, like light over uncut paper */
.cover-pending{position:relative;overflow:hidden}
.cover-pending::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:32%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) rotate(8deg);opacity:0;pointer-events:none;
}
.book-cover:hover .cover-pending::after,
.lrow:hover .cover-pending::after,
.hero-track:hover .cover-pending::after{
  opacity:1;transform:translateX(420%) rotate(8deg);
  transition:transform 1.05s cubic-bezier(.32,.72,.3,1),opacity .2s ease;
}

/* ledger rows: the call number ignites and a green rule grows from the gutter */
.lrow{transition:background .3s ease}
/* scoped away from .ledger--cards, whose ::before/::after carry the shop badges */
.ledger:not(.ledger--cards) .lrow::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--tab,var(--green));transform:scaleY(0);transform-origin:top;
  transition:transform .38s cubic-bezier(.19,1,.22,1);
}
.ledger:not(.ledger--cards) .lrow:hover::after{transform:scaleY(1)}
.lrow .code,.lrow h3{transition:color .28s ease}
.lrow:hover .code{color:var(--green)}
.lrow:hover h3{color:var(--green-deep)}

/* primary actions take a soft halo rather than a hard state change */
.btn{transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .32s ease,transform .22s ease}
.btn-solid:hover{box-shadow:0 0 0 1px rgba(53,140,11,.32),0 8px 26px -8px rgba(53,140,11,.55);transform:translateY(-1px)}
.btn:not(.btn-solid):hover{box-shadow:0 6px 20px -10px rgba(13,51,0,.45)}
.amazon{transition:color .22s ease,border-color .22s ease,text-shadow .22s ease}
.lrow:hover .amazon{text-shadow:0 0 14px rgba(53,140,11,.4)}

/* the seal turns slowly under the pointer, like a stamp being set */
.brandmark .seal{transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter .4s ease}
.brandmark:hover .seal{transform:rotate(180deg);filter:drop-shadow(0 0 7px rgba(53,140,11,.5))}

/* range cards and track jumps join the same system */
.divider{transition:background .3s ease,box-shadow .34s ease,transform .34s ease}
.divider:hover{background:#FBFCF5;transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(20,24,31,.28),0 0 20px -6px rgba(53,140,11,.22)}
.divider:hover .code{color:var(--green)}
.hero-track:hover{box-shadow:0 20px 36px -16px rgba(33,28,20,.3),0 0 24px -6px rgba(53,140,11,.3)}

/* filter and resource tabs settle rather than snap */
.dtab,.restab{transition:background .22s ease,color .22s ease,border-color .22s ease}
.dtab:not(.is-active):hover,.restab:not(.is-active):hover{background:#FBFCF5;color:var(--green-deep)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .card-catalog:hover::before,.card-catalog:hover::after,
  .card-catalog:hover .card-catalog-book,.card-catalog:hover .card-catalog-index,
  .book-cover:hover,.divider:hover,.btn-solid:hover{transform:none!important}
  .cover-pending::after{display:none}
  .syllabus-hero .lamp,.pagehead .lamp,.shop-hero .lamp{display:none}
}


/* ============================================================
   TICKER — the impact figures as a running band, not loose labels
   ============================================================ */
.tickerband{
  background:var(--green-deep);color:var(--card);
  border-top:1px solid rgba(238,240,227,.16);border-bottom:1px solid rgba(238,240,227,.16);
  overflow:hidden;position:relative;
}
.tickerband::before,.tickerband::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,110px);z-index:2;pointer-events:none;
}
.tickerband::before{left:0;background:linear-gradient(90deg,var(--green-deep),rgba(13,51,0,0))}
.tickerband::after{right:0;background:linear-gradient(270deg,var(--green-deep),rgba(13,51,0,0))}
.ticker-track{
  display:flex;width:max-content;align-items:center;
  padding-block:.95rem;
  animation:ticker 46s linear infinite;
}
.tickerband:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  display:inline-flex;align-items:baseline;gap:.55rem;padding-inline:clamp(1.4rem,3vw,2.8rem);
  white-space:nowrap;
}
.ticker-item .fig{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--card);line-height:1;font-variant-numeric:tabular-nums;
}
.ticker-item .fig em{font-style:normal;color:var(--green)}
.ticker-item .lbl{
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(238,240,227,.62);
}
.ticker-sep{flex:none;opacity:.45;display:flex;align-items:center}
@keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   REACH MAP — the supplied world map, ocean knocked out and the
   landmass reprinted as green ink; pins plotted and verified
   against the coastline rather than by formula.
   ============================================================ */
.reach{margin-top:2rem}
.reach-plate{position:relative;border:1.5px solid var(--green-deep);background:var(--card);padding:clamp(10px,1.6vw,20px)}
.reach-base{width:100%;height:auto;display:block;opacity:.5}
.reach-pins{position:absolute;inset:clamp(10px,1.6vw,20px);width:auto;height:auto}
/* ---- reach map pins: they drop in, then breathe ---- */
.reach .pin-shadow{fill:rgba(0,0,0,.22)}
.reach .pin-body{fill:var(--green-mid)}
.reach .pin-eye{fill:var(--card)}
.reach .pin-ping{fill:none;stroke:var(--green-mid);stroke-width:2;opacity:0}
.reach .pin--origin .pin-body{fill:var(--gold-deep)}
.reach .pin--origin .pin-eye{fill:var(--card)}
.reach .pin--origin .pin-ping{stroke:var(--gold-deep)}
.reach .pin--au .pin-body{fill:var(--green-mid);opacity:.92}

.reach .pin-drop{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:pindrop .62s cubic-bezier(.22,1.2,.36,1) both;
  animation-delay:calc(var(--i) * 70ms);
}
.reach .pin-ping{
  transform-box:fill-box;transform-origin:center;
  animation:pinping 3.4s ease-out infinite;
  animation-delay:calc(1s + var(--i) * 70ms);
}
@keyframes pindrop{
  0%{opacity:0;transform:translateY(-26px) scale(.7)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pinping{
  0%{opacity:.55;transform:scale(.5)}
  70%,100%{opacity:0;transform:scale(2.1)}
}
@media (prefers-reduced-motion:reduce){
  .reach .pin-drop{animation:none}
  .reach .pin-ping{animation:none;opacity:0}
}
.reach .lbl{
  font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:.06em;
  fill:var(--green-deep);paint-order:stroke;stroke:var(--card);stroke-width:6px;stroke-linejoin:round;
}
.reach-key{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.1rem;padding-top:.95rem;
  border-top:1px solid var(--line);font-size:.72rem;color:var(--muted-2);
}
.reach-key b{color:var(--green-deep);font-weight:700}

/* white knockout of the official mark for the dark footer */
.foot-logo{height:44px;width:auto;margin-bottom:1.1rem;filter:brightness(0) invert(1)}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;transform:none}
}

/* ============================================================
   CATALOGUE ROWS WITH COVER ART
   The ledger was built without thumbnails because only one cover
   existed. Most jackets have since been supplied, so each row now
   opens with the real cover where there is one and the typeset
   stand-in where there is not.
   ============================================================ */
.ledger-head--cover,
.lrow--cover{grid-template-columns:54px 92px minmax(0,1fr) minmax(0,1.1fr) 132px}
.lrow--cover{align-items:center}
.lrow--cover img.rowcover{
  width:54px;aspect-ratio:2/3;object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--card);
}
.lrow--cover .cover-pending.rowcover{width:54px;border:1px solid var(--line)}
.lrow--cover .cover-pending.rowcover{padding:.3rem}
.lrow--cover .cover-pending .cp-imprint,
.lrow--cover .cover-pending .cp-rule,
.lrow--cover .cover-pending .cp-note{display:none}
.lrow--cover .cover-pending .cp-title{font-size:.4rem;line-height:1.25}
.lrow--cover .cover-pending .cp-code{font-size:.36rem;margin-top:.15rem}

/* a link out to the retailer, marked as leaving the site */
.amazon .ext{font-size:.8em;opacity:.65;margin-left:.1rem}

/* a free sample of the real pages, sitting under the buy control */
.sample-link{
  display:block;margin-top:.4rem;font-size:.72rem;font-weight:600;
  color:var(--muted-2);text-decoration:none;border-bottom:1px solid transparent;
}
.sample-link:hover{color:var(--green-mid);border-color:currentColor}
.ledger--cards .sample-link{text-align:center;margin-top:.55rem}

@media (max-width:760px){
  .ledger-head--cover{display:none}
  .lrow--cover{grid-template-columns:54px minmax(0,1fr);gap:.9rem 1rem;align-items:start}
  .lrow--cover .rowcover{grid-row:span 4}
  .lrow--cover .action{text-align:left}
}

/* a book that is also taught as a course on MET Institute */
.course-link{
  display:block;margin-top:.4rem;font-size:.72rem;font-weight:600;
  color:var(--green-mid);text-decoration:none;border-bottom:1px solid transparent;
}
.course-link:hover{border-color:currentColor}
.ledger--cards .course-link{text-align:center;margin-top:.4rem}

/* ============================================================
   TEACHER RESOURCE CARDS
   A cover, the call number, and the sample pages themselves —
   the page a teacher lands on to decide whether the book helps.
   ============================================================ */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.6rem;margin-top:2.4rem}
.tcard{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.2rem;border:1px solid var(--line);background:var(--card);padding:1.1rem;align-items:start}
.tcard-cover img,.tcard-cover .cover-pending{width:120px;aspect-ratio:2/3;object-fit:cover;display:block;border:1px solid var(--line)}
.tcard-cover .cover-pending{padding:.6rem;border-bottom:1px solid var(--line)}
/* at this size only the title and call number fit legibly */
.tcard-cover .cover-pending .cp-imprint,
.tcard-cover .cover-pending .cp-rule,
.tcard-cover .cover-pending .cp-note{display:none}
.tcard-cover .cover-pending .cp-title{font-size:.66rem;line-height:1.25}
.tcard-cover .cover-pending .cp-code{font-size:.5rem;margin-top:.4rem}
.tcard-body{display:flex;flex-direction:column;min-height:180px}
.tcard-code{font-size:.68rem;font-weight:700;letter-spacing:.11em;color:var(--muted-2)}
.tcard-body h3{font-size:1rem;line-height:1.25;margin:.35rem 0 .4rem}
.tcard-body p{font-size:.85rem;color:var(--muted);margin:0 0 1rem}
.tcard-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center}
.tcard-actions .amazon{font-size:.75rem;display:inline-flex;align-items:center;gap:.3rem;color:var(--green-mid);text-decoration:none;font-weight:600;border-bottom:1px solid transparent}
.tcard-actions .amazon:hover{border-color:currentColor}
@media (max-width:560px){
  .tcard{grid-template-columns:1fr}
  .tcard-cover img,.tcard-cover .cover-pending{width:110px}
  .tcard-body{min-height:0}
}

/* ============================================================
   WHO PUBLISHES THIS
   Said in the footer of every page, because the relationship
   between the three sites is the thing visitors ask about most.
   ============================================================ */
.powered{
  margin-top:clamp(34px,4vw,52px);padding-top:1.8rem;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem 2.4rem;align-items:center;
}
.powered p{margin:0;font-size:.9rem;color:var(--on-deep-dim);max-width:64ch;line-height:1.6}
.powered strong{color:#fff;font-weight:700}
.powered-actions{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:760px){.powered{grid-template-columns:1fr}}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{list-style:none;margin:2.6rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
.timeline li{position:relative;padding:0 0 2rem 2.6rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:.45rem;width:15px;height:15px;border-radius:50%;
  background:var(--card);border:2px solid var(--green);
}
.timeline li:last-child::before{background:var(--green)}
.tl-year{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-mid)}
.tl-body h3{font-size:1.08rem;margin:.4rem 0 .35rem}
.tl-body p{font-size:.92rem;color:var(--muted);margin:0;max-width:62ch}

/* ---------- the shared country list, matching MET's outreach page ---------- */
.countries{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.8rem;padding:0;
}
.countries li{
  list-style:none;background:var(--card);padding:.85rem 1.05rem;
  font-size:.92rem;color:var(--ink);display:flex;align-items:center;gap:.55rem;
}
.countries li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.countries li.is-home{font-weight:700}
.countries li.is-home::before{background:var(--gold)}

/* The footer grid never collapsed, so it pushed the page sideways on a phone. */
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}


/* fifteen pins need smaller labels than six did */
.reach .lbl--sm{font-size:25px;font-weight:600;letter-spacing:.04em}


/* the subject a book belongs to, shown where its call number used to sit */
.ledger--cards .lrow .subject{
  display:block;padding:.9rem 1.05rem 0;
  font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tab,var(--green-deep));
}
/* Five subjects, no cover panels: the jump links become compact buttons
   rather than the tall photo tiles they were when there were three. */
.hero-tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.7rem}
.hero-track{
  aspect-ratio:auto;padding:.95rem 1.05rem;border-left:3px solid var(--tab,var(--green-deep));
}
.hero-track::before{content:none}
.hero-track-label{position:static;padding:0;color:inherit}
.hero-track-label strong{font-family:var(--serif);font-size:1rem;line-height:1.2;color:var(--ink)}
.hero-track-label em{
  font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tab,var(--muted-2));opacity:1;margin-top:.3rem;
}
.hero-track:hover{transform:translateY(-3px)}

/* ============================================================
   TESTIMONIAL CARDS
   Given to MET in writing and set unedited. The lead card is
   marked so the reader sees who is speaking before the claim.
   ============================================================ */
.quote-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px);
}
.quote-card{
  margin:0;padding:clamp(1.5rem,2.4vw,2rem);
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--green);
  display:flex;flex-direction:column;
}
.quote-card--lead{border-top-color:var(--gold)}
.quote-card blockquote{margin:0 0 1.4rem;flex:1}
.quote-card blockquote p{
  font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink);margin:0 0 .9rem;
}
.quote-card blockquote p:last-child{margin-bottom:0}
.quote-card blockquote strong{font-weight:700;color:var(--green-deep)}
.quote-card figcaption{padding-top:1rem;border-top:1px solid var(--line);display:grid;gap:.2rem}
.qc-name{font-weight:700;font-size:.95rem;color:var(--ink)}
.qc-role{font-size:.85rem;color:var(--muted)}
.qc-where{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--green-mid);font-weight:700;margin-top:.2rem}
.section--dark .quote-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.section--dark .quote-card blockquote p,.section--dark .qc-name{color:#fff}
.section--dark .qc-role{color:var(--paper-2)}

/* the al-Azhar assessment: a scholar reading one book, relayed —
   this site's gold is reserved for exactly this kind of attestation */
.plate--quote{margin:clamp(32px,4vw,48px) auto 0;padding:clamp(1.8rem,3vw,2.6rem);max-width:900px}
.plate-intro{font-size:.9rem;color:var(--muted);margin:0 0 1.3rem;max-width:70ch}
.plate--quote blockquote{margin:0 0 1.4rem;padding-left:1.3rem;border-left:3px solid var(--gold)}
.plate--quote blockquote p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.5;color:var(--ink);margin:0 0 .9rem;
}
.plate--quote blockquote p:last-child{margin-bottom:0}
.plate--quote figcaption{display:grid;gap:.2rem}

/* ============================================================
   THE TIMELINE
   Twenty-five years, snaking down a central spine: entries
   alternate sides so the eye zig-zags rather than scanning one
   long column, and each carries the icon for what kind of year
   it was. Collapses to a single left-aligned column on a phone,
   where alternating sides would just be narrow.
   ============================================================ */
/* The timeline: a serpentine grid. The eye runs left to right along one row,
   then right to left along the next, so twenty-five years fit in a short block
   instead of ten tall ones. Order is set on the markup (.tl-c1/2/3). */
.tl{
  list-style:none;margin:clamp(22px,3vw,34px) auto 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);
  max-width:1060px;counter-reset:tl;
}
.tl-item{position:relative;display:flex;counter-increment:tl}
.tl-c1{grid-column:1}
.tl-c2{grid-column:2}
.tl-c3{grid-column:3}
.tl-r1{grid-row:1}
.tl-r2{grid-row:2}
.tl-r3{grid-row:3}
.tl-r4{grid-row:4}
.tl-r5{grid-row:5}
.tl-r6{grid-row:6}
.tl-card{
  flex:1;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--green-mid);
  padding:.9rem 1rem 1rem .9rem;position:relative;
}
.tl-dot{
  position:absolute;left:-11px;top:-11px;z-index:2;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);border:1.5px solid var(--green-mid);
}
.tl-dot svg{width:14px;height:14px;fill:var(--green-mid);display:block}
.tl-item:last-child .tl-dot{background:var(--green-mid)}
.tl-item:last-child .tl-dot svg{fill:var(--card)}
.tl-year{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-mid);margin:0 0 .25rem .9rem;
}
.tl-card h3{font-size:.94rem;line-height:1.24;margin:0 0 .3rem}
.tl-card p{font-size:.8rem;line-height:1.5;color:var(--muted);margin:0}

/* the connectors that make the path read as one line */
.tl-fwd::after,.tl-back::after,.tl-down::after{
  content:"";position:absolute;background:var(--line);
}
.tl-fwd::after,.tl-back::after{
  top:50%;width:clamp(14px,1.6vw,20px);height:1px;
}
.tl-fwd::after{right:calc(-1 * clamp(14px,1.6vw,20px))}
.tl-back::after{left:calc(-1 * clamp(14px,1.6vw,20px))}
.tl-down::after{
  left:50%;bottom:calc(-1 * clamp(14px,1.6vw,20px));
  width:1px;height:clamp(14px,1.6vw,20px);
}

@media (max-width:900px){
  .tl{grid-template-columns:repeat(2,1fr)}
  /* two columns: the generated three-column order no longer holds, so let the
     cards flow and drop the connectors rather than draw a wrong path */
  .tl-c1,.tl-c2,.tl-c3{grid-column:auto}
  .tl-r1,.tl-r2,.tl-r3,.tl-r4,.tl-r5,.tl-r6{grid-row:auto}
  .tl-fwd::after,.tl-back::after,.tl-down::after{display:none}
}
@media (max-width:560px){
  .tl{grid-template-columns:1fr;gap:12px}
}

}


/* the cross-site rail now says what it is for */
.crossrail .alsolabel{
  margin-right:-.6rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.75;
}
@media (max-width:680px){.crossrail .alsolabel{display:none}}

/* the pace table: the number of weeks is the thing people came for.
   This site has no base .costs rule, so the table is styled from scratch. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.costs{width:100%;border-collapse:collapse;margin-top:2.2rem;text-align:left}
.costs th,.costs td{
  padding:.85rem 1.2rem .85rem 0;vertical-align:top;text-align:left;
  border-bottom:1px solid var(--line);font-weight:400;
}
.costs th[scope="row"]{font-weight:700;color:var(--ink)}
.costs td{color:var(--muted)}
.costs--pace{table-layout:fixed}
.costs--pace th[scope="row"]{width:32%}
.costs--pace thead th{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  font-weight:700;padding-bottom:.5rem;
}
.costs--pace td:first-of-type{
  font-family:var(--serif);font-weight:700;color:var(--green-mid);white-space:nowrap;width:22%;
}
@media (max-width:620px){
  .costs--pace,.costs--pace thead,.costs--pace tbody,.costs--pace tr,
  .costs--pace th,.costs--pace td{display:block;width:auto}
  .costs--pace thead{display:none}
  .costs--pace tr{border-bottom:1px solid var(--line);padding:.9rem 0}
  .costs--pace th,.costs--pace td{border-bottom:0;padding:.15rem 0}
}

/* ---- testimonials: one rail, always moving ---- */
.tqband{padding-bottom:clamp(44px,5vw,68px);overflow:hidden}
.shead--centre{text-align:center;max-width:44rem;margin-inline:auto}
.tq-marquee{
  margin-top:clamp(28px,3.5vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tq-rail{display:flex;gap:18px;width:max-content;animation:tqscroll 96s linear infinite}
.tq{
  flex:none;width:min(28rem,82vw);margin:0;background:var(--card);
  border:1px solid var(--line);border-top:2px solid var(--green-mid);
  padding:1.5rem 1.6rem 1.4rem;display:flex;flex-direction:column;
}
.tq--gold{border-top-color:var(--gold-deep)}
.tq-mark{width:26px;height:26px;fill:var(--green-mid);opacity:.26;margin-bottom:.7rem}
.tq--gold .tq-mark{fill:var(--gold-deep)}
.tq blockquote{margin:0 0 1.1rem;font-family:var(--serif);font-size:.98rem;line-height:1.6;color:var(--ink)}
.tq figcaption{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);display:grid;gap:.15rem}
.tq-name{font-weight:700;font-size:.9rem}
.tq-role{font-size:.79rem;color:var(--muted)}
.tq-where{font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-mid);font-weight:700;margin-top:.25rem}
.tq-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:clamp(26px,3.2vw,40px)}
@keyframes tqscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
@media (prefers-reduced-motion:reduce){
  .tq-rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .tq-rail > [aria-hidden="true"]{display:none}
  .tq-marquee{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gut)}
}

/* ---- icon-led cards ---- */
.card--icon{position:relative}
.card-i{width:26px;height:26px;fill:var(--green-mid);display:block;margin-bottom:.85rem}

/* ---- framed photographs with script captions ---- */
:root{ --script:"Petit Formal Script","Snell Roundhand",cursive; }
.shot{position:relative;margin:0;overflow:hidden;background:var(--paper-2)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--framed{padding:6px;background:var(--card);border:1px solid var(--line)}
.shot--framed::after{content:"";position:absolute;inset:6px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.5)}
.shot-cap{
  position:absolute;left:6px;right:6px;bottom:6px;z-index:2;
  padding:2.2rem 1rem .75rem;
  font-family:var(--script);font-size:1.06rem;line-height:1.35;
  color:#FBF8EE;text-shadow:0 1px 10px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(20,24,31,0) 0%,rgba(20,24,31,.78) 66%,rgba(20,24,31,.92) 100%);
}
.shot-cap em{font-style:normal;color:var(--gold-bright)}
.inside-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(24px,3vw,40px);
}
.inside-grid .shot{aspect-ratio:1/1}
/* portrait photographs need a tall box, or object-fit:cover crops the subject out */
.inside-grid .shot--tall{aspect-ratio:3/4}
@media (max-width:900px){ .inside-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .inside-grid{grid-template-columns:1fr} }

/* the sticky bar can carry several actions; keep them together */
.sb-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
@media (max-width:700px){.sb-actions{width:100%}}