/* ==========================================================================
   EXAMYARD — site stylesheet
   Palette taken verbatim from IGCSE/Physics 0625/_build.py (the book build).
   Navy #1e3a5f · muted gold #a9884d · slate ink #2f3d4d · ivory panels.
   Kept light: pale panels with a navy rule, never heavy solid colour bars.
   ========================================================================== */

:root{
  /* --- core palette (book) --- */
  --navy:        #1e3a5f;
  --navy-deep:   #22303f;
  --navy-mid:    #3f6f96;
  --navy-soft:   #4a7fa5;
  --gold:        #a9884d;
  --gold-deep:   #8a6f38;
  --gold-light:  #c9a86a;
  --gold-bright: #d8b25e;

  --ink:         #2f3d4d;
  --ink-mid:     #4a5766;
  --ink-soft:    #5f6b78;
  --ink-faint:   #93a9bd;
  --warm-grey:   #8b7f74;

  /* --- grounds --- */
  --paper:       #ffffff;
  --ivory:       #f8f6f1;
  --ivory-warm:  #faf4ea;
  --ivory-deep:  #f4f1ea;
  --blue-pale:   #eef3f7;
  --blue-pale-2: #eaf0f4;

  /* --- lines --- */
  --line:        #dde4ea;
  --line-warm:   #e4dccd;
  --line-blue:   #c6d7e4;

  /* --- semantic (book keeps these) --- */
  --terracotta:  #9c4a3c;
  --terracotta-bg:#f6ebe7;
  --green:       #4a7a63;

  /* --- type --- */
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --display: "Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;
  --sans: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --wrap: 1140px;
  --wrap-narrow: 760px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--serif);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--gold-deep)}
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--navy-deep);line-height:1.15}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--line-warm);margin:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:var(--wrap-narrow)}
section{padding:76px 0}
section.tight{padding:52px 0}
.on-paper{background:var(--paper);border-top:1px solid var(--line-warm);border-bottom:1px solid var(--line-warm)}
.on-blue{background:var(--blue-pale);border-top:1px solid var(--line-blue);border-bottom:1px solid var(--line-blue)}
.on-warm{background:var(--ivory-warm);border-top:1px solid var(--line-warm);border-bottom:1px solid var(--line-warm)}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 14px;
}
.eyebrow.navy{color:var(--navy)}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.5px}
h1.display{font-size:clamp(38px,6vw,62px);line-height:1.04}
h2.display{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
h3{font-family:var(--display);font-size:25px;font-weight:600}
.lead{font-size:19px;line-height:1.62;color:var(--ink-mid)}
.small{font-size:14.5px;color:var(--ink-soft)}
.sans{font-family:var(--sans)}
.gold-rule{width:44px;height:3px;background:var(--gold-bright);border:0;margin:22px 0}
.gold-rule.center{margin-left:auto;margin-right:auto}
.centred{text-align:center}
.muted{color:var(--ink-soft)}
.section-head{max-width:660px;margin-bottom:44px}
.section-head.centred{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.3px;
  padding:13px 26px;border-radius:2px;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;cursor:pointer;
}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-deep);color:#fff}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-blue)}
.btn-ghost:hover{background:var(--blue-pale);color:var(--navy);border-color:var(--navy-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(248,246,241,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line-warm);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--navy-deep)}
.brand:hover{color:var(--navy-deep)}
.brand .glyph{flex:0 0 auto}
.brand .wm{font-family:var(--sans);font-size:16.5px;letter-spacing:.2px;font-weight:400;white-space:nowrap}
.brand .wm b{font-weight:800}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-mid);
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--navy)}
.nav a.is-active{color:var(--navy);border-bottom-color:var(--gold)}
/* .nav a would otherwise out-specify .btn and strip its padding and colour */
.nav a.btn{padding:11px 22px;border-bottom:0}
.nav a.btn-gold,.nav a.btn-gold:hover{color:#fff}
.nav a.btn-primary,.nav a.btn-primary:hover{color:#fff}
.nav-cta{margin-left:4px}
.nav-toggle{display:none;background:none;border:1px solid var(--line-warm);border-radius:2px;padding:8px 10px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--navy);margin:3.5px 0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:88px 0 76px;background:var(--ivory)}
/* An interior page needs a title, not a landing-page hero. Its job is to name
   the page and get out of the way of the content below it. */
.hero-page{padding:30px 0 24px}
.hero-page h1.display{font-size:clamp(29px,3.3vw,42px);line-height:1.08}
.hero-page .gold-rule{margin:14px 0}
.hero-page .lead{font-size:16.5px;max-width:44em;margin-top:10px}
.hero-page .eyebrow{margin-bottom:8px}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(760px 420px at 78% 12%, #eef4f8 0%, rgba(238,244,248,0) 68%),
    radial-gradient(620px 380px at 8% 88%, #faf1de 0%, rgba(250,241,222,0) 70%);
}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero p.lead{max-width:36em}
.hero-figure{position:relative}
.hero-figure img{
  border:1px solid var(--line-warm);
  box-shadow:0 1px 2px rgba(30,58,95,.06),0 18px 44px -18px rgba(30,58,95,.28);
}
.hero-figure .tag{
  position:absolute;left:-16px;bottom:26px;background:var(--paper);
  border:1px solid var(--line-warm);border-left:3px solid var(--gold);
  padding:11px 16px;font-family:var(--sans);font-size:12px;line-height:1.45;
  box-shadow:0 10px 26px -14px rgba(30,58,95,.35);
}
.hero-figure .tag b{display:block;color:var(--navy);font-size:13px;font-weight:700}

/* ---------- stat tiles (book :::tiles) ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-warm);
  border:1px solid var(--line-warm);margin-top:40px}
.tile{background:var(--paper);padding:22px 20px}
.tile .n{font-family:var(--display);font-size:34px;font-weight:600;color:var(--navy);line-height:1}
.tile .k{font-family:var(--sans);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-deep);margin-top:9px;font-weight:600}
.tile .d{font-size:14px;color:var(--ink-soft);margin-top:6px;line-height:1.45}

/* ---------- cards ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--paper);border:1px solid var(--line-warm);
  border-top:3px solid var(--navy);padding:30px 28px;
}
.card.gold{border-top-color:var(--gold)}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card .num{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2px;
  color:var(--gold-deep);display:block;margin-bottom:12px;
}

/* ---------- book panels ---------- */
.book{
  display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start;
  background:var(--paper);border:1px solid var(--line-warm);padding:34px;
}
.book .shot{border:1px solid var(--line-warm);background:var(--ivory-deep)}
.book .shot.placeholder{
  aspect-ratio:1/1.414;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22px;background:var(--navy);color:#fff;border-color:var(--navy);
}
.book .shot.placeholder .t{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.15}
.book .shot.placeholder .e{font-family:var(--sans);font-size:9.5px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px}
.book .shot.placeholder .r{width:34px;height:2px;background:var(--gold-bright);margin:14px 0}
.book .shot.placeholder .s{font-family:var(--sans);font-size:10.5px;color:rgba(255,255,255,.72);line-height:1.5}
.book-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}

/* ---------- badges ---------- */
.badge{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;padding:5px 10px;border-radius:2px;
}
.badge-core{background:var(--blue-pale);color:var(--navy);border:1px solid var(--line-blue)}
.badge-supp{background:var(--ivory-warm);color:var(--gold-deep);border:1px solid var(--line-warm)}
.badge-live{background:#eef7f2;color:var(--green);border:1px solid #cfe4d9}
.badge-soon{background:var(--ivory-deep);color:var(--warm-grey);border:1px solid var(--line-warm)}
.badge-free{background:var(--terracotta-bg);color:var(--terracotta);border:1px solid #e7d2cc}

/* ---------- table (book :::strip head) ---------- */
.strip{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line-warm);font-size:15.5px}
.strip thead th{
  background:var(--blue-pale);border-bottom:2px solid var(--navy);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--navy);text-align:left;padding:13px 16px;
}
.strip td{border-bottom:1px solid var(--line);padding:13px 16px;vertical-align:top}
.strip tbody tr:last-child td{border-bottom:0}
.strip tbody tr:hover{background:var(--ivory)}
.strip .code{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--gold-deep);white-space:nowrap}
.strip .num{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);text-align:center}
.strip .ch{color:var(--navy-deep);font-weight:400}
.strip .ch small{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* section band inside the chapter table */
.strip tr.band td{
  background:var(--ivory-warm);border-bottom:1px solid var(--line-warm);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--gold-deep);padding:11px 16px;
}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{background:var(--paper);border:1px solid var(--line-warm);padding:32px 28px;position:relative}
.plan.feature{border-color:var(--navy);border-top:3px solid var(--navy);box-shadow:0 16px 40px -24px rgba(30,58,95,.4)}
.plan .flag{
  position:absolute;top:-1px;right:20px;background:var(--gold);color:#fff;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;padding:5px 11px;
}
.plan h3{font-size:22px;margin-bottom:6px}
.plan .amount{font-family:var(--display);font-size:44px;font-weight:600;color:var(--navy);line-height:1;margin:18px 0 4px}
.plan .amount small{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.5px}
.plan .per{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);letter-spacing:.3px}
.plan ul{list-style:none;padding:0;margin:22px 0 26px;font-size:15.5px}
.plan li{padding-left:24px;position:relative;margin-bottom:11px;color:var(--ink-mid)}
/* gold lozenge, echoing the diamond on the book cover */
.plan li::before{content:"";position:absolute;left:1px;top:.66em;width:8px;height:8px;
  background:var(--gold);transform:rotate(45deg)}
.plan li.off{color:var(--ink-faint)}
.plan li.off::before{background:none;border-top:2px solid var(--line);transform:none;
  top:.82em;left:0;width:11px;height:0}
.plan .btn{width:100%;justify-content:center}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line-warm);background:var(--line-warm);gap:1px}
.step{background:var(--paper);padding:28px 24px;position:relative}
.step .k{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep)}
.step h3{font-size:21px;margin:10px 0 8px}
.step p{font-size:15px;color:var(--ink-soft);margin:0}

/* ---------- figure showcase ---------- */
.figure-card{background:var(--paper);border:1px solid var(--line-warm);padding:24px}
.figure-card figcaption{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.figure-card figcaption b{color:var(--navy);font-weight:600}

/* ---------- quote ---------- */
.quote{border:1px solid var(--line-warm);background:var(--paper);padding:38px 42px;text-align:center}
.quote p{font-family:var(--display);font-size:25px;line-height:1.4;color:var(--navy-deep);
  font-style:italic;margin:0 0 14px}
.quote cite{font-family:var(--sans);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-deep);font-style:normal}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line-warm)}
.faq details{border-bottom:1px solid var(--line-warm)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--display);font-size:21px;font-weight:600;color:var(--navy-deep);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:31px;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:35px}
.faq .answer{padding:0 0 24px;color:var(--ink-mid);max-width:70ch}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- callout ---------- */
.note{
  background:var(--blue-pale);border:1px solid var(--line-blue);border-left:3px solid var(--navy);
  padding:20px 24px;font-size:15.5px;
}
.note.warm{background:var(--ivory-warm);border-color:var(--line-warm);border-left-color:var(--gold)}
.note .k{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--navy);display:block;margin-bottom:7px}
.note.warm .k{color:var(--gold-deep)}
.note p:last-child{margin-bottom:0}

/* ---------- cta band ---------- */
.cta-band{background:var(--navy);color:#fff;padding:66px 0}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.78);max-width:52ch}
.cta-band .gold-rule{background:var(--gold-bright)}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.36)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:48px;flex-wrap:wrap}

/* ---------- form ---------- */
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:12px 14px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--navy-soft);box-shadow:0 0 0 3px rgba(74,127,165,.14)}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);margin-top:6px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:60px 0 30px;font-size:15px}
.site-footer h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-light);margin-bottom:16px}
.site-footer a{color:rgba(255,255,255,.72);display:block;padding:5px 0}
.site-footer a:hover{color:#fff}
.site-footer .brand{color:#fff;margin-bottom:14px}
.site-footer .brand:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.footer-bottom{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.5);
}
.footer-bottom p{margin:0;max-width:64ch}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-figure{max-width:400px}
  .grid-3,.grid-4,.price-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:16.5px}
  section{padding:56px 0}
  .wrap{padding:0 20px}
  .nav{
    display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line-warm);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 20px 18px;box-shadow:0 18px 30px -22px rgba(30,58,95,.5);
  }
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a.is-active{border-bottom-color:var(--line)}
  .nav .btn{justify-content:center;margin-top:12px}
  .nav-toggle{display:block}
  .grid-2,.grid-3,.grid-4,.price-grid,.steps{grid-template-columns:1fr}
  .book{grid-template-columns:1fr;gap:26px}
  .book .shot{max-width:210px}
  .quote{padding:28px 24px}
  .quote p{font-size:21px}
  .cta-inner{flex-direction:column;align-items:flex-start;gap:26px}
  .hero-figure .tag{left:0;bottom:-14px}
}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.cta-band,.btn{display:none}
  body{background:#fff;font-size:11pt}
}

/* status badges in the chapter table must not wrap */
.strip td .badge{white-space:nowrap}

/* ==========================================================================
   SHOP — announcement bar, hero carousel, product cards, buy box, cart.
   Structure follows jafperfumes.com; palette stays the book's.
   ========================================================================== */

/* ---------- announcement bar ---------- */
.announce{background:var(--navy);color:#fff;text-align:center;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.4px;padding:9px 20px}
.announce a{color:var(--gold-bright);border-bottom:1px solid rgba(216,178,94,.5)}
.announce a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- cart button in the header ---------- */
.cart-btn{display:inline-flex;align-items:center;gap:7px;position:relative;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-mid);padding:6px 0}
.cart-btn:hover{color:var(--navy)}
.cart-btn .count{min-width:18px;height:18px;border-radius:9px;background:var(--gold);color:#fff;
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.cart-btn .count[data-empty="1"]{background:var(--line);color:var(--ink-soft)}

/* ---------- hero carousel ---------- */
.carousel{position:relative;background:var(--ivory)}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:520px;
  display:flex;align-items:center;background-size:cover;background-position:center}
.slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(248,246,241,.96) 0%,rgba(248,246,241,.82) 38%,rgba(248,246,241,0) 68%)}
.slide.right::after{background:linear-gradient(270deg,rgba(248,246,241,.96) 0%,rgba(248,246,241,.82) 38%,rgba(248,246,241,0) 68%)}
.slide .wrap{position:relative;z-index:2}
.slide-copy{max-width:31em}
.slide.right .slide-copy{margin-left:auto;text-align:right}
.slide.right .gold-rule{margin-left:auto}
.slide.right .btn-row{justify-content:flex-end}
.carousel .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-warm);
  background:rgba(255,255,255,.9);cursor:pointer;display:grid;place-items:center;padding:0}
.carousel .arrow:hover{background:#fff;border-color:var(--navy-soft)}
.carousel .arrow i{width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.carousel .prev{left:18px}.carousel .prev i{transform:rotate(135deg);margin-left:3px}
.carousel .next{right:18px}.carousel .next i{transform:rotate(-45deg);margin-right:3px}
.dots{position:absolute;bottom:22px;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:9px}
.dots button{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--navy);
  background:transparent;cursor:pointer}
.dots button[aria-current="true"]{background:var(--gold);border-color:var(--gold)}

/* ---------- product cards ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{background:var(--paper);border:1px solid var(--line-warm);display:flex;flex-direction:column;
  position:relative;transition:box-shadow .18s,border-color .18s}
.pcard:hover{border-color:var(--line-blue);box-shadow:0 20px 44px -30px rgba(30,58,95,.55)}
.pcard .shot{background:var(--ivory-deep);padding:20px;display:grid;place-items:center;min-height:300px;
  border-bottom:1px solid var(--line-warm)}
.pcard .shot img{max-height:280px;width:auto;filter:drop-shadow(0 12px 22px rgba(30,58,95,.18))}
.pcard .body{padding:24px;display:flex;flex-direction:column;flex:1}
.pcard .kicker{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px}
.pcard h3{font-size:23px;margin-bottom:8px}
/* only the three-up product rail needs its rows to line up */
.products .pcard h3{min-height:58px}
/* the same facts, in the buy box on a product page */
.specs-wide{gap:12px 18px;margin:20px 0 14px;
  padding:16px 0;border-top:1px solid var(--line-warm);border-bottom:1px solid var(--line-warm)}
@media (max-width:700px){.specs-wide{grid-template-columns:1fr 1fr}}
.pcard p{font-size:15px;color:var(--ink-soft);margin-bottom:16px}
.specs{list-style:none;margin:0 0 16px;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:7px 16px}
.specs li{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);line-height:1.3}
.specs b{display:block;font-family:var(--display);font-size:20px;font-weight:600;
  color:var(--navy);letter-spacing:-.2px}
.pcard .shot img{max-width:100%}
.pcard .price{font-family:var(--display);font-size:27px;font-weight:600;color:var(--navy);
  margin-top:auto;display:flex;align-items:baseline;gap:10px}
/* price placeholder while figures are unpublished — reads as a status, not a number */
.price .soon{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--gold)}
.cart-total .soon,.line-price{font-weight:600}
.pcard .price small{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:.4px}
.pcard .price del{font-family:var(--sans);font-size:15px;color:var(--ink-faint);font-weight:400}
.pcard .btn{margin-top:16px;justify-content:center}
.save{position:absolute;top:14px;right:14px;z-index:2;background:var(--gold);color:#fff;
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;padding:6px 11px}
.save.navy{background:var(--navy)}
.save.quiet{background:var(--ivory-warm);color:var(--gold-deep);border:1px solid var(--line-warm)}

/* ---------- section tiles ---------- */
.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stile{background:var(--paper);border:1px solid var(--line-warm);overflow:hidden;display:block;
  transition:box-shadow .18s,border-color .18s}
.stile:hover{border-color:var(--line-blue);box-shadow:0 18px 40px -28px rgba(30,58,95,.5)}
.stile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ivory-deep)}
.stile .cap{padding:18px 20px;border-top:1px solid var(--line-warm)}
.stile .cap .n{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--gold-deep)}
.stile .cap h3{font-size:21px;margin:6px 0 4px}
.stile .cap p{font-size:13.5px;color:var(--ink-soft);margin:0}

/* ---------- buy box on a product page ---------- */
.buy{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.gallery .main{background:var(--ivory-deep);border:1px solid var(--line-warm);padding:34px;
  display:grid;place-items:center;min-height:420px}
.gallery .main img{max-height:520px;width:auto;filter:drop-shadow(0 16px 30px rgba(30,58,95,.2))}
.gallery .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery .thumbs button{width:78px;height:78px;padding:6px;background:var(--paper);cursor:pointer;
  border:1px solid var(--line-warm);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery .thumbs button[aria-current="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.gallery .thumbs img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.buybox .price{font-family:var(--display);font-size:42px;font-weight:600;color:var(--navy);
  line-height:1;margin:16px 0 6px;display:flex;align-items:baseline;gap:12px}
.buybox .price small{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-soft)}
.buybox .price del{font-family:var(--sans);font-size:19px;color:var(--ink-faint);font-weight:400}
.buybox .qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);width:fit-content}
.buybox .qty button{width:40px;height:44px;background:var(--paper);border:0;cursor:pointer;
  font-size:18px;color:var(--navy);font-family:var(--sans)}
.buybox .qty button:hover{background:var(--blue-pale)}
.buybox .qty input{width:52px;height:44px;border:0;border-left:1px solid var(--line);
  border-right:1px solid var(--line);text-align:center;font-family:var(--sans);font-size:15px;color:var(--ink)}
.buy-actions{display:flex;gap:12px;margin:22px 0 8px;flex-wrap:wrap}
.buy-actions .btn{flex:1;min-width:180px;justify-content:center}
.trust{border-top:1px solid var(--line-warm);margin-top:26px;padding-top:22px;
  display:grid;gap:13px;font-size:15px;color:var(--ink-mid)}
.trust div{padding-left:26px;position:relative}
.trust div::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;
  background:var(--gold);transform:rotate(45deg)}

/* ---------- cart ---------- */
.cart-line{display:grid;grid-template-columns:96px 1fr auto auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line-warm)}
.cart-line .shot{background:var(--ivory-deep);border:1px solid var(--line-warm);padding:8px;
  display:grid;place-items:center;height:96px}
.cart-line .shot img{max-height:78px;width:auto}
.cart-line h3{font-size:20px;margin-bottom:3px}
.cart-line .meta{font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.cart-line .line-price{font-family:var(--display);font-size:23px;font-weight:600;color:var(--navy);white-space:nowrap}
/* A bare minus at body size disappears, so it gets its own size and a hit area
   big enough for a thumb. The button carries no title attribute: the browser
   drew that as a "Remove" tooltip sitting over the glyph. */
.cart-line .drop{background:none;border:1px solid var(--line-warm);border-radius:6px;
  cursor:pointer;color:var(--ink-soft);font-family:var(--sans);font-size:17px;
  line-height:1;width:30px;height:30px;display:grid;place-items:center;padding:0;
  transition:color .15s,border-color .15s}
.cart-line .drop:hover{color:var(--terracotta);border-color:var(--terracotta)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:24px 0;font-family:var(--display);font-size:30px;font-weight:600;color:var(--navy)}
.cart-total span:first-child{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft)}
.cart-empty{text-align:center;padding:70px 20px;border:1px dashed var(--line-warm);background:var(--paper)}

/* ---------- newsletter band ---------- */
.news{background:var(--ivory-warm);border-top:1px solid var(--line-warm);
  border-bottom:1px solid var(--line-warm);padding:64px 0}
.news form{display:flex;gap:10px;max-width:470px;margin-top:24px;flex-wrap:wrap}
.news input{flex:1;min-width:220px;font-family:var(--serif);font-size:16px;padding:13px 15px;
  border:1px solid var(--line-warm);background:var(--paper);border-radius:2px;color:var(--ink)}
.news input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,136,77,.15)}

/* ---------- video band ---------- */
.vband{position:relative;overflow:hidden;background:var(--navy-deep);min-height:460px;
  display:flex;align-items:center}
.vband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.vband .wrap{position:relative;z-index:2}
.vband h2,.vband h2.display{color:#fff}
.vband p{color:rgba(255,255,255,.8);max-width:46ch}
.vband .gold-rule{background:var(--gold-bright)}

/* ---------- toast ---------- */
.toast{position:fixed;right:20px;bottom:20px;z-index:200;background:var(--navy);color:#fff;
  font-family:var(--sans);font-size:14px;padding:14px 20px;border-left:3px solid var(--gold-bright);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.55);opacity:0;transform:translateY(10px);
  transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:none}

@media (max-width:960px){
  .products,.tilegrid{grid-template-columns:repeat(2,1fr)}
  .buy{grid-template-columns:1fr;gap:36px}
  .slide{min-height:440px}
}
@media (max-width:720px){
  .products,.tilegrid{grid-template-columns:1fr}
  .slide{min-height:400px}
  .slide::after,.slide.right::after{
    background:linear-gradient(180deg,rgba(248,246,241,.95) 0%,rgba(248,246,241,.86) 52%,rgba(248,246,241,.7) 100%)}
  .slide.right .slide-copy{text-align:left;margin-left:0}
  .slide.right .gold-rule{margin-left:0}
  .slide.right .btn-row{justify-content:flex-start}
  .carousel .arrow{display:none}
  .cart-line{grid-template-columns:72px 1fr;gap:14px}
  .cart-line .shot{height:72px}
  .cart-line .line-price,.cart-line .drop{grid-column:2}
  .gallery .main{min-height:300px;padding:20px}
}

/* ==========================================================================
   HARD COPIES — class/subject grid, Chapter 1 reader, the lock, delivery.
   ========================================================================== */

/* ---------- class + subject cards ---------- */
.classgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.classcard{background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--navy);
  padding:30px 28px;display:flex;flex-direction:column}
.classcard.soon{border-top-color:var(--line-warm);background:var(--ivory-deep)}
.classcard .k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.classcard h3{font-size:26px;margin-bottom:8px}
.classcard p{font-size:15px;color:var(--ink-soft)}
.classcard .btn{margin-top:auto;align-self:flex-start}

.subjects{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.subject{display:flex;gap:20px;align-items:center;background:var(--paper);
  border:1px solid var(--line-warm);padding:20px 22px}
.subject.soon{background:var(--ivory-deep);border-style:dashed}
.subject .code{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.6px;
  color:var(--gold-deep);text-transform:uppercase}
.subject h3{font-size:21px;margin:4px 0 3px}
.subject p{font-size:14px;color:var(--ink-soft);margin:0}
.subject .go{margin-left:auto;white-space:nowrap}
.subject.soon .go{color:var(--ink-faint);font-family:var(--sans);font-size:12.5px;
  letter-spacing:1.2px;text-transform:uppercase}

/* ---------- Chapter 1 reader ---------- */
.readerbar{position:sticky;top:70px;z-index:30;background:rgba(248,246,241,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-warm)}
.readerbar .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px 0;font-family:var(--sans);font-size:13.5px;color:var(--ink-mid)}
.readerbar b{color:var(--navy);font-weight:700}
.readerbar .track{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--line-warm)}
.readerbar .track i{display:block;height:2px;background:var(--gold);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .1s linear}

/* Full-screen reading. The button sits in the reader bar; the reader itself is
   the element put into fullscreen, so the page fills the screen with no chrome. */
.fs-btn{font:inherit;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--navy);
  background:var(--paper);border:1px solid var(--line-warm);border-radius:3px;cursor:pointer;
  padding:7px 13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .15s,border-color .15s}
.fs-btn:hover{background:var(--ivory-warm);border-color:var(--navy)}
.fs-btn svg{flex:none}
.readerbar .acts{display:flex;align-items:center;gap:16px}

#reader:fullscreen{background:var(--ivory);overflow-y:auto;padding:26px 0 40px;
  gap:22px;width:100%;height:100%}
#reader:fullscreen .page{max-width:min(1180px,calc((100vh - 120px) * 0.707))}
#reader:fullscreen .page img{box-shadow:0 18px 50px -30px rgba(30,58,95,.75)}
#reader:-webkit-full-screen{background:var(--ivory);overflow-y:auto;padding:26px 0 40px}
#reader:-webkit-full-screen .page{max-width:min(1180px,calc((100vh - 120px) * 0.707))}

/* Fallback for browsers without element fullscreen (notably iOS Safari). */
#reader.fs-fake{position:fixed;inset:0;z-index:200;background:var(--ivory);overflow-y:auto;
  padding:26px 18px 40px;gap:22px;max-width:none;margin:0}
#reader.fs-fake .page{max-width:min(1180px,calc((100vh - 120px) * 0.707))}
#reader.fs-fake .fs-exit{display:block}

/* A small floating exit hint while full screen, so the way out is obvious. */
.fs-exit{display:none;position:fixed;top:16px;right:18px;z-index:5;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--ink-mid);
  background:rgba(248,246,241,.92);border:1px solid var(--line-warm);border-radius:3px;
  padding:7px 12px;cursor:pointer;backdrop-filter:blur(6px)}
#reader:fullscreen .fs-exit{display:block}
#reader:-webkit-full-screen .fs-exit{display:block}

#reader{display:grid;gap:26px;justify-items:center;padding:34px 0 10px}
#reader .page{margin:0;position:relative;max-width:900px;width:100%}
#reader .page img{width:100%;height:auto;display:block;border:1px solid var(--line-warm);
  background:#fff;box-shadow:0 12px 34px -24px rgba(30,58,95,.5);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#reader .page figcaption{font-family:var(--sans);font-size:11.5px;letter-spacing:1.4px;
  color:var(--ink-faint);text-align:center;margin-top:9px}

/* ---------- the lock at the end of Chapter 1 ---------- */
/* Scoped to the section: .lock alone also matched the padlock icon in the
   reader contents, which inherited the 170px padding and made every locked
   row 199px tall. */
section.lock{position:relative;margin-top:-150px;padding:170px 0 0}
section.lock::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
  background:linear-gradient(180deg,rgba(248,246,241,0) 0%,rgba(248,246,241,.9) 62%,var(--ivory) 100%)}
.lock-panel{position:relative;background:var(--paper);border:1px solid var(--line-warm);
  border-top:3px solid var(--gold);padding:44px;text-align:center;max-width:720px;margin:0 auto;
  box-shadow:0 30px 70px -46px rgba(30,58,95,.55)}
.lock-panel .icon{width:44px;height:44px;margin:0 auto 18px;display:grid;place-items:center;
  border:1px solid var(--line-warm);border-radius:50%;background:var(--ivory-warm)}
.lock-panel h2{font-family:var(--display);font-size:32px;font-weight:600;margin-bottom:12px}
.lock-panel p{color:var(--ink-mid);max-width:46ch;margin-left:auto;margin-right:auto}
.lock-panel .btn-row{justify-content:center}
.lock-rest{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-warm);
  border:1px solid var(--line-warm);margin-top:34px}
.lock-rest div{background:var(--ivory-deep);padding:16px 14px;text-align:center;
  font-family:var(--sans);font-size:12px;color:var(--ink-faint);letter-spacing:.4px}
.lock-rest div b{display:block;color:var(--ink-soft);font-size:13px;font-weight:600;margin-bottom:3px}

/* ---------- cart sums ---------- */
.cart-sums{padding:18px 0 4px;border-bottom:1px solid var(--line-warm)}
.cart-sums div{display:flex;justify-content:space-between;padding:7px 0;
  font-family:var(--sans);font-size:14.5px;color:var(--ink-mid)}
.cart-sums div span:last-child{color:var(--navy);font-weight:600}

/* ---------- delivery steps ---------- */
.dsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-warm);
  border:1px solid var(--line-warm)}
.dstep{background:var(--paper);padding:26px 22px}
.dstep .n{font-family:var(--display);font-size:30px;font-weight:600;color:var(--gold);line-height:1}
.dstep h3{font-size:20px;margin:10px 0 7px}
.dstep p{font-size:14.5px;color:var(--ink-soft);margin:0}

@media (max-width:960px){
  .classgrid{grid-template-columns:1fr}
  .subjects{grid-template-columns:1fr}
  .lock-rest,.dsteps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .readerbar{top:70px}
  .readerbar .inner{font-size:12.5px}
  .lock-panel{padding:30px 22px}
  .lock-panel h2{font-size:26px}
  .subject{flex-wrap:wrap;gap:12px}
  .subject .go{margin-left:0}
}

/* ==========================================================================
   LARGE SCREENS
   The layout was fixed at 1140px / 17px whatever the display, so on a big
   monitor it sat in a narrow column and read small. Scale the measure and the
   type together, in steps, so line length stays comfortable at every size.
   ========================================================================== */

@media (min-width:1440px){
  :root{--wrap:1260px;--wrap-narrow:820px}
  body{font-size:17.5px}
  .lead{font-size:19.5px}
  .slide{min-height:clamp(520px,60vh,660px)}
  section{padding:88px 0}
  section.tight{padding:60px 0}
}

@media (min-width:1720px){
  :root{--wrap:1400px;--wrap-narrow:880px}
  body{font-size:18.5px}
  .lead{font-size:21px}
  .small{font-size:15.5px}
  .eyebrow{font-size:11.5px;letter-spacing:2.6px}
  .nav a{font-size:15px}
  .brand .wm{font-size:18px}
  .site-header .bar{height:78px}
  .announce{font-size:13.5px;padding:11px 20px}
  .slide{min-height:clamp(580px,62vh,760px)}
  .tile .n{font-size:38px}
  .pcard h3{font-size:25px}
  .strip{font-size:16.5px}
  section{padding:100px 0}
  section.tight{padding:68px 0}
  .readerbar{top:78px}
  #reader .page{max-width:1000px}
}

@media (min-width:2100px){
  :root{--wrap:1560px;--wrap-narrow:940px}
  body{font-size:19.5px}
  .lead{font-size:22.5px}
  .nav{gap:32px}
  .slide{min-height:clamp(640px,64vh,860px)}
  .tile .n{font-size:44px}
  section{padding:116px 0}
  #reader .page{max-width:1100px}
}

/* Very tall windows: let the hero fill more of the fold without stretching the art. */
@media (min-height:1000px) and (min-width:1200px){
  .hero{padding-top:76px;padding-bottom:76px}
}

/* Respect a reader who has set a larger default text size in the browser. */
@media (min-width:1440px){
  html{font-size:100%}
}

/* Display type is clamped for small screens; lift the ceiling on big ones so
   headlines keep their proportion instead of stalling at 62px. */
@media (min-width:1440px){
  h1.display{font-size:clamp(46px,4.6vw,70px)}
  h2.display{font-size:clamp(32px,3vw,44px)}
  h3{font-size:26px}
}
@media (min-width:1720px){
  h1.display{font-size:clamp(58px,4.4vw,80px)}
  h2.display{font-size:clamp(36px,2.9vw,50px)}
  h3{font-size:28px}
  .quote p{font-size:29px}
  .lock-panel h2{font-size:36px}
}
@media (min-width:2100px){
  h1.display{font-size:clamp(66px,4.2vw,92px)}
  h2.display{font-size:clamp(40px,2.8vw,56px)}
}

/* The copy column is sized for the paragraph; at large display sizes that is
   too narrow for the headline, which then wraps four ways. Widen the column
   and hold the paragraph to a readable measure separately. */
@media (min-width:1440px){
  .slide-copy{max-width:min(64%,860px)}
  .slide-copy .lead{max-width:31em}
}
@media (min-width:1720px){
  .slide-copy{max-width:min(64%,1000px)}
}

/* Wider copy on a big screen reaches further across the photograph, so carry
   the ivory fade further too — otherwise a headline can land on dark artwork. */
@media (min-width:1440px){
  .slide::after{background:linear-gradient(90deg,
    rgba(248,246,241,.97) 0%, rgba(248,246,241,.90) 46%, rgba(248,246,241,0) 78%)}
  .slide.right::after{background:linear-gradient(270deg,
    rgba(248,246,241,.97) 0%, rgba(248,246,241,.90) 46%, rgba(248,246,241,0) 78%)}
}

/* ==========================================================================
   BOOKS DROPDOWN
   One menu instead of four top-level links, so the nav does not grow every
   time a subject is added.
   ========================================================================== */

.has-menu{position:relative}
.menu-trigger{display:inline-flex;align-items:center;gap:7px}
.menu-trigger .caret{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s}
.has-menu:hover .menu-trigger .caret,
.has-menu.open .menu-trigger .caret{transform:rotate(-135deg) translate(-3px,-3px)}

.menu{
  position:absolute;top:calc(100% + 14px);right:-20px;z-index:60;width:322px;
  background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--navy);
  box-shadow:0 30px 60px -30px rgba(30,58,95,.45);
  padding:26px 30px;display:none;
}
.menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-menu:hover .menu,
.has-menu:focus-within .menu,
.has-menu.open .menu{display:block}

.menu-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:30px}
.menu h4{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.menu a{display:block;padding:9px 0;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:14.5px;color:var(--ink-mid);line-height:1.3}
.menu a:last-child{border-bottom:0}
.menu a:hover{color:var(--navy)}
.menu a b{display:block;font-weight:600;color:var(--navy-deep);font-size:15px}
.menu a small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.menu a.off{color:var(--ink-faint);pointer-events:none}
.menu a.off b{color:var(--ink-faint);font-weight:500}
.menu .all{margin-top:14px;border:0;padding:0}
.menu .all span{font-weight:700;color:var(--navy)}
.menu .col-books{background:var(--ivory);margin:-26px -30px -26px 0;padding:26px 30px;
  border-left:1px solid var(--line-warm)}

/* Books > class > subject > book. The panel hangs off the right edge of the
   window, so each level opens leftward; the levels touch so the pointer never
   crosses a gap on its way out. */
.mlist,.mflyout{list-style:none;margin:0;padding:0}
.mlist > li,.mflyout > li{border-bottom:1px solid var(--line)}
.mlist > li:last-child,.mflyout > li:last-child{border-bottom:0}
.msub{position:relative}
.menu li > span{display:block;padding:9px 0;font-family:var(--sans);font-size:14.5px;
  color:var(--ink-faint);line-height:1.3}
.menu li.off > span b{color:var(--ink-faint);font-weight:500}
.menu li > span b{display:block;font-weight:600;font-size:15px}
.menu li > span small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.msub > a{position:relative;padding-right:22px}
.arr{position:absolute;right:2px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);
  transform:rotate(-45deg);transition:border-color .15s}
.msub:hover > a .arr,.msub:focus-within > a .arr{border-color:var(--navy)}
.mflyout{position:absolute;top:-27px;right:100%;width:322px;display:none;
  background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--navy);
  box-shadow:0 30px 60px -30px rgba(30,58,95,.45);padding:24px 26px;z-index:61}
.msub:hover > .mflyout,.msub:focus-within > .mflyout{display:block}

@media (max-width:720px){
  /* In the mobile sheet the menu is just another block, always open. */
  .has-menu{position:static}
  .menu-trigger{justify-content:space-between}
  .menu-trigger .caret{display:none}
  .menu{position:static;display:block;width:auto;padding:4px 0 14px;border:0;
    box-shadow:none;background:transparent}
  .menu-grid{grid-template-columns:1fr;gap:14px}
  .menu .col-books{background:transparent;margin:0;padding:0;border-left:0}
  .menu a{padding:8px 0 8px 14px;font-size:14px}
  .menu h4{margin-top:8px}
  /* No hover on touch: every level is simply open and indented. */
  .mflyout{position:static;display:block;width:auto;border:0;border-left:2px solid var(--line);
    box-shadow:none;background:transparent;padding:0 0 0 14px;margin:2px 0 8px}
  .arr{display:none}
  .menu li > span{padding:8px 0 8px 14px;font-size:14px}
}

/* ==========================================================================
   CHECKOUT — numbered steps, payment choice, bank panel
   ========================================================================== */

.stepmark{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.stepmark span{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-family:var(--sans);font-size:16px;font-weight:700}
.stepmark h2{font-size:clamp(24px,2.6vw,32px);margin:0}
.field .opt{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:1px;
  color:var(--ink-faint);text-transform:uppercase;margin-left:6px}

/* ---------- payment choice ---------- */
.paychoice{display:grid;gap:12px;margin:26px 0 30px}
.payopt{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-warm);padding:18px 20px;
  transition:border-color .15s,box-shadow .15s}
.payopt:hover{border-color:var(--line-blue)}
.payopt input{position:absolute;opacity:0;width:0;height:0}
.payopt .mark{flex:0 0 auto;width:20px;height:20px;margin-top:2px;border-radius:50%;
  border:1.6px solid var(--line-blue);background:var(--paper);position:relative}
.payopt input:checked ~ .mark{border-color:var(--navy)}
.payopt input:checked ~ .mark::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--navy)}
.payopt input:focus-visible ~ .mark{box-shadow:0 0 0 3px rgba(74,127,165,.28)}
.payopt:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.payopt .txt b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--navy-deep)}
.payopt .txt small{display:block;font-size:14px;color:var(--ink-soft);margin-top:3px;line-height:1.45}

/* ---------- bank details ---------- */
.bankcard{background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--gold);
  padding:28px 30px;margin-top:4px}
.bank-flag{display:inline-block;background:var(--ivory-warm);border:1px dashed var(--gold);
  color:var(--gold-deep);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:6px 12px;margin-bottom:22px}
.bank-amount{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line-warm)}
.bank-amount span{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--ink-soft)}
.bank-amount b{font-family:var(--display);font-size:34px;font-weight:600;color:var(--navy);line-height:1}
.bank-rows{margin:0}
.bank-rows div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.bank-rows div:last-child{border-bottom:0}
.bank-rows dt{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);margin:0}
.bank-rows dd{margin:0;font-size:15.5px;color:var(--navy-deep);text-align:right}
.bank-rows dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
  letter-spacing:.6px}

@media (max-width:720px){
  .stepmark{gap:12px}
  .stepmark span{width:32px;height:32px;font-size:14px}
  .bankcard{padding:22px 20px}
  .bank-rows div{flex-direction:column;gap:2px}
  .bank-rows dd{text-align:left}
  .bank-amount b{font-size:28px}
}

/* A payment method that exists but is not open yet. */
.payopt.soon{cursor:default;background:var(--ivory-deep);border-style:dashed}
.payopt.soon:hover{border-color:var(--line-warm)}
.payopt.soon .mark{border-color:var(--line);background:transparent}
.payopt.soon .txt b{color:var(--ink-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.payopt.soon .txt b em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold-deep);background:var(--ivory-warm);
  border:1px solid var(--line-warm);padding:3px 9px}
.payopt.soon .txt small{color:var(--ink-faint)}

/* ==========================================================================
   FREE CHAPTER — the strongest thing on the site, so it sits under the hero
   ========================================================================== */

.freeband{background:var(--ivory-warm);border-top:1px solid var(--line-warm);
  border-bottom:1px solid var(--line-warm);padding:70px 0}

.freecard{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;
  background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--gold);
  padding:26px 28px;text-decoration:none;
  transition:box-shadow .18s,border-color .18s,transform .18s}
.freecard:hover{box-shadow:0 24px 50px -32px rgba(30,58,95,.55);transform:translateY(-2px)}
.freecard img{width:100%;height:auto;filter:drop-shadow(0 10px 20px rgba(30,58,95,.22))}
.freecard .k{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:9px}
.freecard h3{font-size:21px;line-height:1.25;margin-bottom:8px}
.freecard p{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin-bottom:16px}
.freecard .btn{pointer-events:none}

/* the "read chapter 1 free" line on every product card */
.freeline{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--gold-deep);margin:2px 0 14px;text-decoration:none}
.freeline:hover{color:var(--navy)}

@media (max-width:960px){
  .freecard{grid-template-columns:110px 1fr;gap:20px;padding:22px}
  .freecard h3{font-size:19px}
}
@media (max-width:720px){
  .freeband{padding:52px 0}
  .freecard{grid-template-columns:1fr;text-align:center;justify-items:center}
  .freecard img{max-width:150px}
}

/* ==========================================================================
   READER — contents sidebar beside the pages, so the whole book is visible
   ========================================================================== */

.readwrap{display:grid;grid-template-columns:310px 1fr;gap:44px;align-items:start;
  padding-top:34px;padding-bottom:10px}
.readmain{min-width:0}
.readmain #reader{padding-top:26px}

.toc{position:sticky;top:130px;max-height:calc(100vh - 160px);overflow-y:auto;overflow-x:hidden;
  background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--navy);
  padding:22px 20px;scrollbar-width:thin}
.toc-toggle{display:none}
.toc-head{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line-warm)}
.toc-head h2{font-family:var(--display);font-size:24px;font-weight:600;margin-bottom:4px}

.toc-sec{border-bottom:1px solid var(--line)}
.toc-sec:last-of-type{border-bottom:0}
.toc-sec summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding:13px 2px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--navy-deep)}
.toc-sec summary::-webkit-details-marker{display:none}
.toc-sec summary .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--navy);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.toc-sec summary .nm{flex:1;line-height:1.25}
.toc-sec summary .cnt{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--ink-faint);letter-spacing:.4px}
.toc-sec[open] summary{color:var(--navy)}

.toc-sec ul{list-style:none;margin:0 0 12px;padding:0 0 0 32px}
.toc-sec li{margin:0}
.toc-sec li a,.toc-sec li>span{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
  font-family:var(--sans);font-size:13px;line-height:1.35;border-radius:2px;text-decoration:none}
.toc-sec li b{font-weight:700;flex:0 0 auto}
.toc-sec li i{flex:1;min-width:0;font-style:normal;overflow-wrap:anywhere}
.toc-sec li.on a{color:var(--navy);background:var(--blue-pale)}
.toc-sec li.on a:hover{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-blue)}
.toc-sec li.cur a{box-shadow:inset 0 0 0 1px var(--navy);font-weight:600}
.toc-sec li .tag{flex:0 0 auto;margin-top:1px;font-size:9.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#fff;background:var(--green);padding:2px 6px;border-radius:2px}
.toc-sec li.off span{color:var(--ink-faint);cursor:default}
.toc-sec li.off .toc-lock{flex:0 0 auto;margin-top:2px;color:var(--gold-deep);display:flex}

@media (max-width:1100px){
  .readwrap{grid-template-columns:260px 1fr;gap:30px}
  .toc{padding:18px 15px}
}
@media (max-width:860px){
  .readwrap{grid-template-columns:1fr;gap:0}
  .toc{position:static;max-height:none;overflow:visible;padding:0;border-top-width:1px;
    margin-bottom:24px}
  .toc-toggle{display:block;width:100%;text-align:left;background:var(--paper);border:0;
    padding:16px 18px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;
    color:var(--navy);position:relative}
  .toc-toggle::after{content:"";position:absolute;right:18px;top:20px;width:8px;height:8px;
    border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg)}
  .toc-toggle[aria-expanded="true"]::after{transform:rotate(-135deg);top:24px}
  .toc-body{display:none;padding:0 18px 18px}
  .toc.open .toc-body{display:block}
}

/* The reader is the one page that should use the full window — the pages are
   the content, so cramping them into the standard measure wastes both margins. */
.readwrap{max-width:min(1860px, calc(100% - 56px));padding-left:0;padding-right:0}
@media (min-width:1500px){
  .readwrap{grid-template-columns:330px 1fr;gap:52px}
  .readmain #reader .page{max-width:none}
}
@media (min-width:1900px){ .readwrap{grid-template-columns:360px 1fr;gap:60px} }

/* The pages need air around them — edge-to-edge reads as a screenshot, not a book. */
.readmain #reader{padding-left:clamp(12px,3vw,56px);padding-right:clamp(12px,3vw,56px)}
@media (min-width:1500px){ .readmain #reader .page{max-width:1080px} }

/* ---------- every subject, with what is not yet printed marked plainly ---------- */
.subjgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.subjcol{background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--navy);
  padding:24px 22px}
.subjhead{padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line-warm)}
.subjhead h3{font-size:23px;margin-bottom:3px}
.subjhead p{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);margin:0}
.subj{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:12px 8px;border-bottom:1px solid var(--line);text-decoration:none}
.subj:last-child{border-bottom:0}
.subj .c{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:1px;
  color:var(--gold-deep)}
.subj .n{font-family:var(--sans);font-size:15px;color:var(--navy-deep)}
.subj .s{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;white-space:nowrap}
.subj.on{background:var(--blue-pale)}
.subj.on .s{background:var(--green);color:#fff}
.subj.on:hover{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-blue)}
.subj.off .c,.subj.off .n{color:var(--ink-faint)}
.subj.off .s{background:var(--ivory-warm);color:var(--gold-deep);border:1px solid var(--line-warm)}

@media (max-width:960px){ .subjgrid{grid-template-columns:1fr} }
@media (max-width:520px){ .subj{grid-template-columns:46px 1fr;gap:8px} .subj .s{grid-column:2} }

/* Both books added separately cost more than the set — say so in the cart. */
.cart-nudge{margin-top:14px;padding:14px 16px;background:var(--ivory-warm,#f4f1ea);
  border:1px solid var(--line-warm);border-left:3px solid var(--gold);border-radius:2px;
  font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink-mid)}
.cart-nudge b{color:var(--navy)}
.swap-set{font:inherit;font-weight:600;color:#fff;background:var(--navy);border:0;
  border-radius:2px;padding:7px 13px;margin-left:6px;cursor:pointer;white-space:nowrap}
.swap-set:hover{background:var(--navy-deep,#16293f)}

/* ---------- the receipt shown after an order is placed ---------- */
.placed{background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--gold);
  padding:44px 32px;text-align:center;max-width:620px;margin:0 auto;
  box-shadow:0 30px 70px -52px rgba(30,58,95,.55)}
.placed .tick{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:#eef4f1;color:#4a7a63;font-size:25px;line-height:1}
.placed h2{font-family:var(--display);font-size:31px;color:var(--navy);margin:6px 0 12px;font-weight:600}
.placed .lead{font-size:17px;margin:0 auto 24px;max-width:40em}
.placed .lead b{color:var(--navy);font-variant-numeric:tabular-nums}
.placed-sum{margin:0 0 22px;padding:16px 0;border-top:1px solid var(--line-warm);
  border-bottom:1px solid var(--line-warm);text-align:left}
.placed-sum div{display:flex;justify-content:space-between;gap:18px;padding:5px 0;font-size:14.5px}
.placed-sum dt{color:var(--ink-mid);margin:0}
.placed-sum dd{margin:0;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.placed .small{color:var(--ink-faint);margin-bottom:22px}


/* ---- one-book hero ----------------------------------------------------
   The carousel put two different headlines in front of a first-time visitor,
   who then had to guess which one was the point. One book is for sale, so the
   first screen says what it is, what it costs, and lets them buy it. */
.hero-one{position:relative;background-size:cover;background-position:center;
  min-height:clamp(420px,58vh,620px);display:flex;align-items:center;color:#fff}
/* The photograph is bright where the headline sits, so the wash has to carry
   the contrast rather than decorate. Solid at the left, clearing by the right
   so the book itself stays visible. */
.hero-one::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,22,38,.94) 0%,rgba(11,22,38,.88) 38%,
    rgba(11,22,38,.62) 64%,rgba(11,22,38,.18) 100%)}
.hero-one .display{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-one .lead{color:rgba(255,255,255,.92)}
.hero-one .eyebrow{color:#e2c07a}
.hero-one .gold-rule{border-color:#c9a45c;opacity:.9}
/* the ghost button was invisible against the photograph */
.hero-one .btn-ghost{border-color:rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.06)}
.hero-one .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
.hero-one .wrap{position:relative;z-index:2}
.hero-one .slide-copy{max-width:640px;padding:48px 0}
.hero-one .hero-note{font-family:var(--sans);font-size:13.5px;color:rgba(255,255,255,.76);
  margin-top:18px;letter-spacing:.2px}

/* ─── Free chapters ───────────────────────────────────────
   Two views of the same five chapters. The homepage stands the covers on a
   shelf, because the covers are the thing worth looking at. The free-chapters
   page puts a subject rail beside them, so every chapter is on the page
   rather than behind a popup.                                           */

/* the shelf (homepage) */
/* flex, not a fixed column count: books get added and removed, and the row
   should stay centred whatever the number is */
.shelf{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:26px 30px;padding-bottom:22px;border-bottom:2px solid var(--gold);position:relative;
  max-width:var(--wrap);margin:0 auto}
.bk{flex:0 1 200px}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:linear-gradient(to bottom,rgba(30,58,95,.15),transparent)}
.bk{display:block;text-decoration:none;color:inherit;transition:transform .22s}
.bk:hover{transform:translateY(-8px)}
.bk:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px}
.bk img{display:block;width:100%;border-radius:2px 5px 5px 2px;
  box-shadow:-2px 0 0 rgba(0,0,0,.18) inset,0 12px 26px rgba(30,58,95,.26)}
.bkname{display:block;margin-top:14px;font:600 .98rem/1.25 var(--sans);color:var(--navy)}
.bkmeta{display:block;margin-top:3px;font:600 .7rem/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.bklink{display:inline-block;margin-top:9px;font:600 .78rem/1 var(--sans);color:var(--gold-deep);
  border-bottom:1px solid rgba(169,136,77,.5);padding-bottom:3px}
.bk:hover .bklink{border-bottom-color:var(--gold-deep)}

/* the rail (free-chapters page) */
.split{display:grid;grid-template-columns:210px 1fr;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:940px;
  margin:0 auto;box-shadow:0 14px 40px rgba(30,58,95,.1)}
/* With the script blocked every pane is shown, so the rail would be a row of
   buttons that do nothing. It is introduced by the script instead. */
.rail{display:none;background:var(--navy);padding:18px 0}
.js .rail{display:block}
.rail button{display:block;width:100%;text-align:left;appearance:none;border:0;cursor:pointer;
  background:none;color:rgba(255,255,255,.62);padding:15px 22px;
  font:600 .92rem/1.25 var(--sans);border-left:3px solid transparent;transition:color .16s,background .16s}
.rail button:hover{color:#fff}
/* Sentence case here: uppercase plus letter-spacing pushed
   “IGCSE 0625 · 2 chapters” onto a second line in a 210px rail. */
.rail button small{display:block;font:400 .72rem/1.35 var(--sans);letter-spacing:.01em;
  margin-top:5px;opacity:.62}
.rail button.is-on{color:#fff;background:rgba(255,255,255,.07);border-left-color:var(--gold-bright)}
.rail button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-2px}

.pane{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:28px 30px;align-items:start}
.pane + .pane{border-top:1px solid var(--line)}
.js .pane{display:none}
.js .pane.is-on{display:grid}
.js .pane + .pane{border-top:0}
.pane img{width:100%;border-radius:3px;box-shadow:0 10px 24px rgba(30,58,95,.22)}
.pane h3{margin:0 0 4px;font:600 1.5rem/1.2 var(--display);color:var(--navy)}
.pmeta{font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px}
.chrow{display:flex;align-items:center;gap:12px;padding:13px 15px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:9px;text-decoration:none;color:inherit;
  transition:border-color .16s,background .16s}
.chrow:hover{border-color:var(--gold);background:var(--ivory-warm)}
.chrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.chrow b{font:600 .95rem/1.2 var(--sans);color:var(--navy);min-width:84px}
.chrow span{font:400 .95rem/1.25 var(--serif);color:var(--ink-mid)}
.chrow em{margin-left:auto;font:600 .76rem/1 var(--sans);font-style:normal;
  color:var(--gold-deep);white-space:nowrap}

@media(max-width:1000px){
  .shelf{max-width:700px}
}
@media(max-width:700px){
  .shelf{gap:26px 20px;border-bottom:0;padding-bottom:0;max-width:440px}
  .bk{flex:0 1 calc(50% - 10px)}
  .shelf::after{display:none}
  .bkname{font-size:.98rem;margin-top:12px}
  .split{grid-template-columns:1fr}
  .js .rail{display:flex;overflow-x:auto;padding:0}
  .rail button{flex:0 0 auto;width:auto;border-left:0;border-bottom:3px solid transparent;
    padding:13px 18px}
  .rail button.is-on{border-left-color:transparent;border-bottom-color:var(--gold-bright)}
  .pane{grid-template-columns:120px 1fr;gap:18px;padding:22px}
  .chrow{flex-wrap:wrap;gap:4px 10px}
  .chrow em{margin-left:0;width:100%}
}

/* ─── Inside the book ───────────────────────────────────────────
   One quality per plate, each with two or three real pages you can slide
   through. The frame is a fixed height and the pages are contained inside it,
   so a wide answer table and a tall portrait page both sit properly.     */
.plate{display:grid;grid-template-columns:270px 1fr;gap:0 52px;align-items:start;
  padding:44px 0;border-top:1px solid var(--line)}
.plate:first-of-type{border-top:0;padding-top:14px}

.pl-rule{border:0;border-top:1px solid var(--navy);opacity:.22;margin:0}
.pl-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:18px 0 62px}
.pl-num{font:500 4.4rem/.9 var(--display);color:var(--gold-deep)}
.pl-num i{margin-left:9px;font:400 .72rem/1 var(--sans);font-style:normal;
  letter-spacing:.14em;color:var(--ink-faint);vertical-align:super}
.pl-word{font:500 1.42rem/1 var(--display);font-style:italic;color:var(--navy)}
.pl-foot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
  font:600 .63rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}

.pl-shot{position:relative;margin:0;border:1px solid var(--line-blue);border-radius:6px;
  overflow:hidden;background:var(--paper);box-shadow:0 12px 30px rgba(30,58,95,.12)}
.pl-bar{padding:9px 14px;background:var(--blue-pale);border-bottom:1px solid var(--line-blue);
  font:600 .63rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--navy-mid)}
.pl-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.pl-slides::-webkit-scrollbar{display:none}
/* contain, not cover: these are pages, and cropping one loses the point.
   height:auto lets a wide crop set its own frame height instead of floating in
   a tall box; max-height keeps a portrait page from towering. */
.pl-slides img{flex:0 0 100%;scroll-snap-align:center;display:block;
  width:100%;height:auto;max-height:390px;object-fit:contain;
  background:var(--paper);padding:10px}

/* arrows and dots are added by the script, so with it blocked the strip is
   simply a scroller you can still swipe */
.pl-nav{position:absolute;top:calc(50% + 14px);transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-blue);
  background:rgba(255,255,255,.94);color:var(--navy);cursor:pointer;
  font:400 1.35rem/1 var(--sans);display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(30,58,95,.16);transition:background .15s,opacity .15s}
.pl-nav:hover{background:#fff}
.pl-nav[disabled]{opacity:.28;cursor:default}
.pl-nav.prev{left:10px}
.pl-nav.next{right:10px}
.pl-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pl-pips{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;
  gap:7px;z-index:2}
.pl-pips b{width:7px;height:7px;border-radius:50%;background:var(--line-blue);
  box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.pl-pips b.is-on{background:var(--gold-deep)}

.pl-right h3{margin:24px 0 9px;text-align:center;
  font:600 1.5rem/1.22 var(--display);color:var(--navy)}
.pl-right p{margin:0 auto;max-width:540px;text-align:center;
  font:400 .98rem/1.6 var(--serif);color:var(--ink-soft)}
.btn-row.ictr{justify-content:center;margin-top:36px}

@media(max-width:860px){
  .plate{grid-template-columns:1fr;gap:0;padding:34px 0}
  .pl-head{padding:16px 0 13px}
  .pl-num{font-size:3.1rem}
  .pl-word{font-size:1.22rem}
  .pl-right{margin-top:22px}
  .pl-slides img{max-height:290px;padding:7px}
  .pl-nav{width:32px;height:32px;font-size:1.1rem}
  .pl-right h3{font-size:1.26rem;margin-top:18px}
  .pl-right p{font-size:.94rem}
}

/* The price only ever appeared in the cart, so nobody browsing the shop knew
   what the book cost. */
.pprice{margin:0 0 14px;font:600 1.32rem/1.2 var(--sans);color:var(--navy)}
.pprice span{display:block;margin-top:5px;font:400 .76rem/1.4 var(--sans);color:var(--ink-soft)}

/* Said plainly at the point of ordering: the site shows colour pages, the
   printed book is black and white. */
.note.bwnote{margin:26px 0 18px;border-left:3px solid var(--gold);background:var(--ivory-warm)}

/* The shelf's own availability line: printed books arriving on a known date,
   said where someone is already looking at the covers. */
.stocknote{max-width:var(--wrap);margin:20px auto 0;text-align:center;
  font:400 .95rem/1.6 var(--serif);color:var(--ink-mid)}
.stocknote b{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--navy)}
.stocknote .pill{display:inline-block;margin-right:9px;padding:4px 11px;border-radius:999px;
  background:var(--green);color:#fff;vertical-align:1px;
  font:600 .64rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){
  .stocknote{margin-top:24px;font-size:.9rem;padding:0 4px}
}

/* A discounted price: what you pay, then what it was, then the saving. */
.pprice i{margin-left:8px;font-style:normal;font-weight:400;font-size:.95rem;
  color:var(--ink-faint);text-decoration:line-through}
.pprice em{margin-left:8px;font-style:normal;padding:3px 8px;border-radius:999px;
  background:var(--green);color:#fff;font:600 .63rem/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}

/* Shop by level. A rule with the active name underlined in gold, rather than
   a filled pill bar. Without the script every level is shown, so the tabs are
   introduced by it. */
.levelbar{display:none;justify-content:center;gap:6px;margin:0 auto 30px;
  border-bottom:1px solid var(--line);max-width:var(--wrap)}
.js-shop .levelbar{display:flex}
.levelbar button{appearance:none;border:0;background:none;cursor:pointer;
  padding:12px 22px 13px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font:600 .8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .16s,border-color .16s}
.levelbar button:hover{color:var(--navy)}
.levelbar button.is-on{color:var(--navy);border-bottom-color:var(--gold)}
.levelbar button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.products[hidden]{display:none}
@media(max-width:560px){
  .levelbar button{padding:11px 13px;font-size:.72rem;letter-spacing:.05em}
}

/* ─── Checkout in two columns ───────────────────────────────────────────────
   Form on the left, the order and what happens next on the right, which stays
   in view as the form is filled. It was four stacked sections deep before. */
.checkout2{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:0 46px;
  align-items:start;margin-top:30px}
/* with an empty cart the form is hidden, so the summary should not sit in a
   column sized for something beside it */
.checkout2:has(> #checkout[hidden]){grid-template-columns:minmax(0,560px);justify-content:center}
/* and once the order is placed the summary goes away entirely, so the
   confirmation gets the same centred single column rather than sitting next to
   an empty card. [hidden] is only a UA rule, so it is spelled out here in case
   anything above it ever sets display on this element. */
.co-side[hidden]{display:none}
.checkout2:has(> .co-side[hidden]){grid-template-columns:minmax(0,640px);justify-content:center}

.co-main{min-width:0}
.co-h{margin:0 0 4px;font:600 1.5rem/1.2 var(--display);color:var(--navy)}
.co-main .muted{margin:0 0 22px}
.co-main form{margin-top:0}

.co-side{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:22px;box-shadow:0 10px 30px rgba(30,58,95,.07)}
.co-side #cart-root{margin:0}
.co-side .note{margin-top:20px}
.co-side .small{margin-top:14px;color:var(--ink-soft)}

.costeps{list-style:none;counter-reset:s;margin:20px 0 0;padding:0}
.costeps li{counter-increment:s;position:relative;padding:0 0 12px 30px;
  font:400 .9rem/1.5 var(--serif);color:var(--ink-mid)}
.costeps li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;background:var(--blue-pale);color:var(--navy);
  font:600 .68rem/20px var(--sans);text-align:center}
.costeps b{font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--navy)}

@media(max-width:900px){
  .checkout2{grid-template-columns:1fr;gap:28px}
  .co-side{position:static;order:-1}
}

/* The cart lines were laid out for a full-width page; in a 360px sidebar the
   four-column grid squeezed the title into six words a line. */
.co-side .cart-line{grid-template-columns:54px 1fr;gap:6px 13px;padding:15px 0;align-items:start}
.co-side .cart-line .shot{height:66px;padding:5px}
.co-side .cart-line .shot img{max-height:56px}
.co-side .cart-line h3{grid-column:2;font-size:15px;line-height:1.35;margin-bottom:2px}
.co-side .cart-line .meta{grid-column:2;font-size:12px}
.co-side .cart-line .line-price{grid-column:2;font-size:18px;margin-top:4px}
.co-side .cart-line .drop{grid-column:2;justify-self:start;padding:2px 0;font-size:12px}
.co-side .cart-total{padding:18px 0 6px;font-size:1.5rem}
.co-side .cart-sums div{font-size:13.5px}

/* The remove control sat under the price as a text link and read as part of
   the item. It is a round × at the right of the line now. */
.co-side .cart-line{grid-template-columns:54px 1fr auto}
.co-side .cart-line .drop{grid-column:3;grid-row:1;justify-self:end;align-self:start;
  width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--paper);color:var(--ink-faint);cursor:pointer;
  font:400 17px/23px var(--sans);text-align:center;
  transition:color .15s,border-color .15s,background .15s}
.co-side .cart-line .drop:hover{color:var(--terracotta);border-color:var(--terracotta);
  background:var(--terracotta-bg)}
.co-side .cart-line .drop:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- a product grid follows the number of books in it ---------- */
/* .products is three fixed columns, which is right for a full shelf but left a
   lone card parked in the left third of an empty row — the shop groups by
   level, so O Level and A Level hold one book each, and IGCSE now holds one
   too. The count is read off the cards themselves, so a grid corrects itself
   whenever a title is added or withdrawn and no page needs its own class.
   Below 720px the grid is already a single full-width column, so this stops
   there rather than pinning a card to 340px on a phone. */
@media (min-width:721px){
  .products:not(:has(> .pcard ~ .pcard)){
    grid-template-columns:minmax(0,340px);justify-content:center}
  .products:has(> .pcard ~ .pcard):not(:has(> .pcard ~ .pcard ~ .pcard)){
    grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
}