/* Learning & Teaching Hub: shop window. /courses (catalogue + search) and /course (one course). Prefix s-.
   Adds to site.css (tokens, .btn, .glass, .chalk, .eyebrow, .reveal, .visually-hidden). Nothing here needs JS. */

.s-page{--s-pad:clamp(16px,4vw,40px);
  --s-edge:min(220px,calc((100vw - min(100vw,var(--wrap)))/2 + var(--s-pad)));   /* distance from the content edge towards the window edge, capped */
  --s-aside:360px;--s-lap:190px;--s-stick:calc(var(--head-h) + 20px);
  color:var(--text)}
.s-page :focus-visible{outline:2px solid var(--blue-d);outline-offset:3px}
.s-in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-pad)}
.s-in>*{min-width:0}
.s-mark{background:linear-gradient(var(--chalk),var(--chalk)) no-repeat 0 90%/100% .3em}

/* ---------- small parts shared by every card ---------- */
.s-chip{display:inline-flex;align-items:center;min-height:28px;padding:.1em .85em;border-radius:999px;background:var(--tint);color:var(--ink);font:600 .8125rem/1.4 var(--font-ui);text-decoration:none}
.s-chip--solid{background:var(--ink);color:var(--on-dark)}
.s-chip--dark{background:rgba(246,249,252,.14);color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(246,249,252,.42)}

.s-card{min-width:0}
.s-card__photo{position:relative;margin:0;overflow:hidden;background:var(--tint)}
.s-card__photo img{width:100%;height:100%;object-fit:cover}
.s-card__body{display:flex;flex-direction:column;gap:12px;min-width:0}
.s-card__num{order:0}
.s-card__tags{order:1;display:flex;flex-wrap:wrap;gap:6px}
.s-card__problem{order:2;font:italic 500 1.2rem/1.32 var(--font-head);color:var(--ink);overflow-wrap:anywhere}
.s-card__name{order:3;margin:0;font:700 .98rem/1.35 var(--font-ui);letter-spacing:0;text-wrap:pretty}
.s-card__name a{color:var(--blue-d);text-decoration:none}
.s-card__name a::before{content:"\2014\00a0"}
.s-card__name a:hover{text-decoration:underline;text-decoration-thickness:2px}
.s-card__facts{order:4;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;font-size:.9rem;color:var(--muted)}
.s-card__facts span+span::before{content:"\00b7";margin-inline:.6em;color:var(--muted)}
.s-card__facts .s-card__price{font:600 1.25rem/1.2 var(--font-head);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.s-card__actions{order:5;display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.s-card__actions .btn{min-height:44px;padding:.65em 1.35em;font-size:.95rem}
.s-add{margin:0}

/* boxed cards: the small card of the first shelf, and every search result */
.s-card--small,.s-card--plain{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.s-card--small .s-card__photo{aspect-ratio:16/8}
.s-card--plain .s-card__photo{aspect-ratio:3/2}
.s-card--small .s-card__body,.s-card--plain .s-card__body{flex:1;padding:20px 22px 22px}
.s-card--small .s-card__problem{font-size:1.15rem}

/* ---------- catalogue: top, search, jump ---------- */
.s-top{padding-block:clamp(32px,5vw,72px) clamp(20px,3vw,36px);
  background:radial-gradient(60% 90% at 92% 0%,rgba(23,162,169,.16),transparent 70%),radial-gradient(45% 70% at 0% 100%,rgba(27,90,165,.09),transparent 70%)}
.s-top__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,5vw,72px);align-items:end}
.s-top__h1{margin:14px 0 18px;font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem)}
.s-top__h1--q{font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);margin-bottom:20px}
.s-q{overflow-wrap:anywhere;word-break:break-word}
.s-top__links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.s-top__links a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
.s-top__find{padding:clamp(18px,2.4vw,26px)}
.s-search label{margin-bottom:.5rem}
.s-search__row{display:flex;gap:10px}
.s-search__row input{flex:1 1 auto;min-width:0}
.s-search__row .btn{flex:none;padding-inline:1.3em}
.s-top__hint{margin-top:.8rem;font-size:.875rem;line-height:1.5;color:var(--muted)}

.s-jump{margin-top:clamp(24px,3.5vw,44px)}
.s-jump ul{display:flex;flex-wrap:wrap;gap:10px}
.s-jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 7px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;transition:background .2s,color .2s}
.s-jump a:hover{background:var(--surface);color:var(--blue-d);box-shadow:inset 0 0 0 1.5px var(--blue-d)}
.s-jump a[aria-current="true"]{background:var(--ink);color:var(--on-dark);box-shadow:none}
.s-jump__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--on-dark);font:600 .9rem/1 var(--font-head)}
.s-jump a[aria-current="true"] .s-jump__n{background:var(--chalk);color:var(--ink)}
.s-jump__c{font-weight:500;color:var(--muted);font-size:.875rem}
.s-jump a[aria-current="true"] .s-jump__c{color:var(--muted-d)}

/* ---------- shelves ---------- */
.s-shelf{padding-block:clamp(44px,7vw,100px)}
.s-shelf__head{margin-bottom:clamp(26px,4vw,52px)}
.s-shelf__kicker{font:600 .8125rem/1.4 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)}
.s-shelf__head h2{margin:8px 0 12px}
.s-shelf__lead{max-width:44ch;font:italic 500 clamp(1.1rem,1rem + .5vw,1.4rem)/1.45 var(--font-head);color:var(--text)}

/* 1 · Starting out: one big lead card and two smaller ones */
.s-shelf--starting .s-shelf__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 clamp(24px,5vw,72px);align-items:end}
.s-shelf--starting .s-shelf__kicker{grid-column:1/-1}
.s-shelf--starting .s-shelf__head h2{margin-bottom:0}
.s-shelf--starting .s-shelf__lead{max-width:none;padding-bottom:.3em}
.s-shelf--starting .s-lay{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(20px,3vw,36px)}
.s-card--lead{grid-row:span 2;display:flex;flex-direction:column}
.s-card--lead .s-card__photo{flex:1 1 auto;min-height:clamp(240px,34vw,420px);border-radius:28px}
.s-card--lead .s-card__photo img{position:absolute;inset:0}
.s-card--lead .s-card__body{flex:none;padding:24px 4px 0;gap:14px}
.s-card--lead .s-card__actions{margin-top:6px}
.s-card--lead .s-card__problem{font-size:clamp(1.55rem,1.1rem + 1.6vw,2.3rem);line-height:1.22}
.s-card--lead .s-card__facts{font-size:1rem}

/* 2 · Sharpening the craft: a staggered 2 x 2, photos running out to the window edge */
.s-shelf--craft{background:linear-gradient(180deg,transparent,rgba(232,241,248,.85) 18%,rgba(232,241,248,.85) 88%,transparent)}
.s-shelf--craft .s-shelf__lead{max-width:36ch}
.s-shelf--craft .s-lay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,72px) clamp(24px,7vw,112px);align-items:start}
.s-card--stagger:nth-child(even){margin-top:clamp(48px,8vw,110px)}
.s-card--stagger .s-card__photo{aspect-ratio:5/4}
.s-card--stagger:nth-child(odd) .s-card__photo{margin-left:calc(-1 * var(--s-edge));border-radius:0 32px 32px 0}
.s-card--stagger:nth-child(even) .s-card__photo{margin-right:calc(-1 * var(--s-edge));border-radius:32px 0 0 32px}
.s-card--stagger .s-card__body{position:relative;z-index:1;width:88%;margin-top:clamp(-72px,-5vw,-40px);padding:clamp(18px,2.4vw,28px);gap:12px;
  background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.7);border-radius:22px;box-shadow:0 24px 50px -26px rgba(14,37,66,.45)}
.s-card--stagger:nth-child(odd) .s-card__body{margin-left:auto}
.s-card--stagger:nth-child(even) .s-card__body{margin-right:auto}
.s-card--stagger .s-card__problem{font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}

/* 3 · Reaching every pupil: two wide panels, the pupil's problem as the headline, an arch photograph */
.s-shelf--every-pupil .s-lay{display:grid;gap:clamp(22px,3.5vw,40px)}
.s-card--arch{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,4.5vw,64px);align-items:center;
  padding:clamp(18px,3.5vw,44px);border-radius:36px;background:var(--tint)}
.s-card--arch:nth-child(even){background:var(--tint2);grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.s-card--arch:nth-child(even) .s-card__photo{order:2}
.s-card--arch .s-card__photo{aspect-ratio:5/6;max-height:480px;width:100%;border-radius:999px 999px 26px 26px}
.s-card--arch .s-card__body{gap:16px}
.s-card--arch .s-card__problem{font-size:clamp(1.65rem,1.05rem + 2.4vw,3.1rem);line-height:1.15;letter-spacing:-.01em}
.s-card--arch .s-card__facts{font-size:1rem}
.s-card--arch .s-card__actions{margin-top:8px}
.s-card--arch .s-chip{background:rgba(255,255,255,.7)}

/* 4 · Leading others: a dark ledger, the lesson count as the big numeral, the photograph running off the right edge */
.s-shelf--leading{background:var(--ink);color:var(--on-dark);margin-top:clamp(0px,2vw,24px)}
.s-shelf--leading :focus-visible{outline-color:var(--on-dark)}
.s-shelf--leading h2{color:var(--on-dark)}
.s-shelf--leading .s-shelf__kicker{color:var(--teal-l)}
.s-shelf--leading .s-shelf__lead{color:var(--muted-d)}
.s-shelf--leading .s-shelf__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 clamp(24px,5vw,72px);align-items:end}
.s-shelf--leading .s-shelf__kicker{grid-column:1/-1}
.s-shelf--leading .s-shelf__head h2{margin-bottom:0}
.s-shelf--leading .s-shelf__lead{max-width:none;padding-bottom:.3em}
.s-card--ledger{position:relative;isolation:isolate;padding-block:clamp(30px,4.5vw,60px);border-top:1px solid rgba(246,249,252,.24)}
.s-card--ledger:last-child{border-bottom:1px solid rgba(246,249,252,.24)}
.s-card--ledger .s-card__photo{position:absolute;z-index:-1;top:0;bottom:0;right:calc(-1 * var(--s-edge));width:calc(52% + var(--s-edge));background:var(--ink)}
.s-card--ledger .s-card__photo::after{content:"";position:absolute;inset:0 0 0 -2px;background:linear-gradient(90deg,#0e2542 0,rgba(14,37,66,.9) 34%,rgba(14,37,66,.26) 100%)}
.s-card--ledger .s-card__body{display:grid;grid-template-columns:clamp(96px,14vw,196px) minmax(0,1fr);column-gap:clamp(12px,2vw,28px);row-gap:12px;max-width:min(100%,56%)}
.s-card--ledger .s-card__body>*{grid-column:2}
.s-card--ledger .s-card__num{grid-column:1;grid-row:1/span 6;display:flex;flex-direction:column;align-self:start}
.s-card__num b{font:500 clamp(3.6rem,2rem + 6.4vw,7.4rem)/.82 var(--font-head);color:var(--teal-l);font-variant-numeric:lining-nums}
.s-card__num i{margin-top:10px;font:600 .8125rem/1.3 var(--font-ui);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.s-card--ledger .s-chip{background:rgba(246,249,252,.12);color:var(--on-dark)}
.s-card--ledger .s-chip--solid{background:var(--teal-l);color:var(--ink)}
.s-card--ledger .s-card__problem{color:var(--on-dark);font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem);line-height:1.28}
.s-card--ledger .s-card__name a{color:var(--teal-l)}
.s-card--ledger .s-card__facts,.s-card--ledger .s-card__facts span+span::before{color:var(--muted-d)}
.s-card--ledger .s-card__facts .s-card__price{color:var(--on-dark)}
.s-shelf--leading .btn{background:var(--on-dark);color:var(--ink)}
.s-shelf--leading .btn:hover{color:var(--ink)}
.s-shelf--leading .btn--ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--on-dark)}
.s-shelf--leading .btn--ghost:hover{background:rgba(246,249,252,.12);color:var(--on-dark);box-shadow:inset 0 0 0 1.5px var(--on-dark)}

/* search results and the empty state */
.s-results{padding-block:clamp(12px,2vw,28px) clamp(48px,7vw,96px)}
.s-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(18px,2.6vw,32px)}
.s-empty{max-width:46rem;padding:clamp(22px,4vw,48px);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.s-empty__big{margin-bottom:14px;font:italic 500 clamp(1.5rem,1.1rem + 1.6vw,2.3rem)/1.25 var(--font-head);color:var(--ink)}
.s-empty__try{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 24px}
.s-empty__try a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--tint);color:var(--ink);font-weight:600;text-decoration:none}
.s-empty__try a:hover{background:var(--tint2)}
.s-empty__acts{display:flex;flex-wrap:wrap;gap:10px}
.s-empty__more{margin-top:22px;color:var(--muted)}

.s-tail{padding-block:clamp(36px,5vw,72px) 0}
.s-tail__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:26px;border-top:2px solid var(--ink)}
.s-tail__big{font:italic 500 clamp(1.4rem,1.1rem + 1.4vw,2.2rem)/1.2 var(--font-head);color:var(--ink)}

/* ====================================================================== /course */

/* (a) the top band: photograph, the teacher's sentence as the headline */
.s-hero{position:relative;isolation:isolate;color:var(--on-dark);background:var(--ink)}
.s-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.s-hero__bg img{width:100%;height:100%;object-fit:cover}
.s-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,37,66,.95) 0,rgba(14,37,66,.88) 40%,rgba(14,37,66,.64) 58%,rgba(14,37,66,.28) 100%)}
.s-hero__in{padding-block:clamp(20px,3vw,40px) clamp(88px,10vw,128px)}
.s-hero :focus-visible{outline-color:var(--on-dark)}
.s-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:.9rem;color:var(--muted-d)}
.s-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration-color:rgba(246,249,252,.5)}
.s-crumbs a:hover{color:var(--teal-l)}
.s-hero__problem{margin:clamp(14px,3vw,36px) 0 0;max-width:22ch;font:italic 500 clamp(1.95rem,1.15rem + 3vw,3.5rem)/1.14 var(--font-head);letter-spacing:-.012em;color:var(--on-dark);text-wrap:balance}
.s-hero__name{margin-top:clamp(18px,2.4vw,28px);max-width:40ch;font:600 clamp(1.05rem,1rem + .4vw,1.3rem)/1.35 var(--font-ui);color:var(--teal-l)}
.s-hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* (b)+(c..g) the body: story on the left, sticky buy panel on the right, overlapping the band */
.s-body{display:grid;grid-template-columns:minmax(0,1fr) var(--s-aside);column-gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.s-main{grid-column:1;grid-row:1;padding-top:clamp(36px,5vw,64px)}
.s-buy{grid-column:2;grid-row:1;position:sticky;top:var(--s-stick);z-index:5;margin-top:calc(-1 * var(--s-lap));padding:clamp(20px,2.4vw,28px);
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 36px 70px -30px rgba(14,37,66,.55)}
.s-buy__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:10px}
.s-buy__amt{font:600 clamp(2.3rem,2rem + 1vw,2.9rem)/1 var(--font-head);color:var(--ink);font-variant-numeric:lining-nums}
.s-buy__tax{font-size:.9rem;color:var(--muted)}
.s-buy__facts{margin:18px 0 20px;border-top:1px solid var(--line)}
.s-buy__facts div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.s-buy__facts dt{color:var(--muted);font-size:.95rem}
.s-buy__facts dd{margin:0;font-weight:600;color:var(--ink)}
.s-buy__form{display:grid;gap:10px}
.s-buy__stream{margin-top:18px;padding-left:12px;border-left:3px solid var(--chalk);font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.45}
.s-buy__note{margin-top:12px;font-size:.875rem;line-height:1.5;color:var(--muted)}

.s-sec{padding-block:clamp(34px,5vw,60px);border-top:1px solid var(--line)}
.s-sec:first-child{border-top:0;padding-top:0}
.s-sec>h2{margin-bottom:clamp(14px,2vw,22px)}

/* (c) outcomes: big numerals, one statement each */
.s-out__list{counter-reset:o}
.s-out__list li{counter-increment:o;display:grid;grid-template-columns:clamp(52px,8vw,84px) minmax(0,1fr);align-items:center;gap:4px 12px;padding:18px 0;border-top:1px solid var(--line);
  font:500 clamp(1.15rem,1rem + .75vw,1.5rem)/1.35 var(--font-head);color:var(--ink)}
.s-out__list li::before{content:counter(o);font:500 clamp(2.4rem,1.6rem + 2.4vw,3.8rem)/1 var(--font-head);color:var(--teal-d)}

/* (d) the programme as a timeline: each bar sits where its unit falls in the whole course */
.s-prog__sum{max-width:58ch;color:var(--text)}
.s-ruler{display:flex;gap:3px;height:36px;margin:22px 0 10px}
.s-ruler__seg{flex:1 1 0;min-width:0;display:grid;place-items:center;border-radius:9px;background:var(--blue-d);color:#fff;font:700 .8125rem/1 var(--font-ui);transition:transform .2s,background .2s,box-shadow .2s}
.s-ruler__seg:nth-child(even){background:var(--teal-d)}
.s-ruler__seg.is-on{transform:translateY(-3px);background:var(--ink);box-shadow:0 8px 16px -6px rgba(14,37,66,.5)}
.s-tl{margin-top:14px}
.s-tl__row{display:grid;grid-template-columns:clamp(34px,5vw,46px) minmax(0,1fr) minmax(120px,36%);gap:4px 16px;align-items:center;margin-inline:-10px;padding:16px 10px;border-top:1px solid var(--line);border-radius:14px;transition:background .2s}
.s-tl__row.is-on{background:var(--tint)}
.s-tl__n{font:500 1.7rem/1 var(--font-head);color:var(--blue)}
.s-tl__t{font-weight:600;line-height:1.35;color:var(--ink)}
.s-tl__meta{margin-top:2px;font-size:.875rem;line-height:1.45;color:var(--muted)}
.s-tl__track{position:relative;height:12px;border-radius:99px;background:rgba(14,37,66,.09)}
.s-tl__bar{position:absolute;top:0;bottom:0;min-width:7px;border-radius:99px;background:linear-gradient(90deg,var(--blue-d),var(--teal-d))}

/* (e) what is in the course */
.s-inc__fmt{color:var(--muted);font-style:italic}
.s-inc__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,48px);margin-top:18px;padding-left:clamp(16px,3vw,28px);border-left:3px solid var(--chalk)}
.s-inc__list li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--line);line-height:1.5}
.s-inc__list li::before{content:"";position:absolute;left:0;top:1.35em;width:10px;height:10px;border-radius:2px;background:var(--teal);transform:rotate(45deg)}

/* (f) who it is for, and what it is not */
.s-who__for h2{margin-bottom:clamp(14px,2vw,22px)}
.s-who__text{max-width:34ch;font:500 clamp(1.3rem,1.1rem + .95vw,1.8rem)/1.4 var(--font-head);color:var(--ink)}
.s-who__phase{margin-top:12px;color:var(--muted);font-size:.95rem}
.s-not{margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,32px);border:2px dashed rgba(14,37,66,.4);border-radius:26px;
  background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(14,37,66,.035) 14px 15px)}
.s-sec .s-not>h2{margin-bottom:0;font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem)}
.s-not ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(20px,3vw,36px);margin-top:18px}
.s-not li{position:relative;padding-left:30px;font-size:.96rem;line-height:1.5}
.s-not li::before{content:"\00d7";position:absolute;left:0;top:-.12em;font:600 1.7rem/1 var(--font-head);color:var(--ink)}
.s-not li b{display:block}

/* (g) pace: a full-width band, arithmetic in plain words */
.s-pace{padding-block:clamp(48px,7vw,104px);background:linear-gradient(120deg,var(--tint) 0,var(--tint2) 100%)}
.s-pace__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,88px);align-items:center}
.s-pace h2{margin:12px 0 18px}
.s-pace p{max-width:54ch}
.s-pace p+p{margin-top:.9rem}
.s-weeks{display:flex;flex-wrap:wrap;gap:6px}
.s-weeks span{position:relative;flex:none;width:26px;height:46px;border-radius:8px;overflow:hidden;background:rgba(14,37,66,.12)}
.s-weeks span::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:calc(var(--f,1) * 100%);background:linear-gradient(0deg,var(--blue-d),var(--teal-d))}
.s-opts{margin-top:24px;border-top:2px solid var(--ink)}
.s-opts li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text)}
.s-opts li i{padding:.05em .7em;border-radius:99px;background:var(--chalk);color:var(--ink);font:600 .8125rem/1.6 var(--font-ui)}
.s-opts li b{margin-left:auto;font:600 1.15rem/1.3 var(--font-head);color:var(--ink)}
.s-opts li.is-sug span{font-weight:700;color:var(--ink)}

/* (h) more on this shelf: compact links */
.s-more{padding-block:clamp(48px,7vw,96px) 0}
.s-more h2{margin:10px 0 0}
.s-more__list{margin-top:clamp(20px,3vw,32px);border-top:2px solid var(--ink)}
.s-more__list a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;min-height:56px;padding:18px 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .2s}
.s-more__list a:hover{background:var(--tint);color:var(--ink)}
.s-more__name{font:600 clamp(1.1rem,1rem + .4vw,1.3rem)/1.3 var(--font-head)}
.s-more__list a:hover .s-more__name{color:var(--blue-d);text-decoration:underline}
.s-more__problem{font-style:italic;color:var(--text);line-height:1.45}
.s-more__meta{font-size:.9rem;color:var(--muted);white-space:nowrap}
.s-more__all{margin-top:18px}
.s-more__all a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* the phone buy bar (CSS only; shop-lite.js hides it while the full panel is on screen) */
.s-bar{display:none}

/* ====================================================================== responsive */
@media (max-width:1079px){
  .s-page{--s-aside:320px}
}
@media (max-width:959px){
  .s-top__grid,.s-shelf--starting .s-shelf__head,.s-shelf--leading .s-shelf__head,.s-pace__grid{grid-template-columns:minmax(0,1fr)}
  .s-shelf--starting .s-lay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-card--lead{grid-column:1/-1;grid-row:auto}
  .s-card--ledger .s-card__body{max-width:62%}

  .s-body{grid-template-columns:minmax(0,1fr)}
  .s-buy{grid-column:1;position:static;margin-top:-72px}
  .s-main{grid-column:1;grid-row:2}
  .s-hero__problem{max-width:26ch}
  .s-hero__bg::after{background:linear-gradient(180deg,rgba(14,37,66,.88),rgba(14,37,66,.8))}
  .s-more__list a{grid-template-columns:minmax(0,1fr) auto}
  .s-more__problem{grid-column:1/-1;grid-row:2}

  body.s-course-page{padding-bottom:78px}
  .s-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 84px calc(10px + env(safe-area-inset-bottom)) var(--s-pad);background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(14,37,66,.12);
    transition:transform .25s,visibility 0s}
  .s-bar.is-off{transform:translateY(110%);visibility:hidden;transition:transform .25s,visibility 0s .25s}
  .s-bar form{margin:0}
  .s-bar__p{display:flex;flex-direction:column;line-height:1.2}
  .s-bar__p b{font:600 1.5rem/1.1 var(--font-head);color:var(--ink)}
  .s-bar__p span{font-size:.8125rem;color:var(--muted)}
}
@media (max-width:759px){
  .s-search__row{flex-direction:column}
  .s-shelf--starting .s-lay{grid-template-columns:minmax(0,1fr)}

  /* craft: one column, photographs edge to edge, the text panel still overlapping */
  .s-shelf--craft .s-lay{grid-template-columns:minmax(0,1fr)}
  .s-card--stagger:nth-child(even){margin-top:0}
  .s-card--stagger:nth-child(n) .s-card__photo{margin-inline:calc(-1 * var(--s-pad));border-radius:0}
  .s-card--stagger .s-card__body{width:calc(100% - 16px);margin-top:-44px}
  .s-card--stagger:nth-child(n) .s-card__body{margin-inline:auto}

  /* every-pupil: panels stack, photograph on top */
  .s-card--arch,.s-card--arch:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .s-card--arch:nth-child(even) .s-card__photo{order:0}
  .s-card--arch .s-card__photo{aspect-ratio:4/3;max-height:none}

  /* leading: the photograph becomes a strip above the row */
  .s-card--ledger .s-card__photo{position:relative;inset:auto;z-index:auto;width:auto;height:150px;margin:0 calc(-1 * var(--s-pad)) 18px;right:auto}
  .s-card--ledger .s-card__photo::after{background:linear-gradient(180deg,rgba(14,37,66,.35) 0,#0e2542 100%)}
  .s-card--ledger{padding-top:0;border-top:0}
  .s-card--ledger+.s-card--ledger{margin-top:12px;border-top:1px solid rgba(246,249,252,.24);padding-top:0}
  .s-card--ledger .s-card__body{max-width:none;grid-template-columns:minmax(0,1fr)}
  .s-card--ledger .s-card__body>*,.s-card--ledger .s-card__num{grid-column:1;grid-row:auto}
  .s-card--ledger .s-card__num{flex-direction:row;align-items:baseline;gap:12px}
  .s-card__num i{margin-top:0}

  .s-inc__list,.s-not ul{grid-template-columns:minmax(0,1fr)}
  .s-tl__row{grid-template-columns:36px minmax(0,1fr)}
  .s-tl__track{grid-column:2}
  .s-more__list a{padding-inline:2px}
  .s-more__meta{grid-column:1/-1}
}
@media (max-width:420px){
  .s-card__actions .btn{flex:1 1 auto}
  .s-card__actions .s-add{flex:1 1 auto;display:flex}
  .s-card__actions .s-add .btn{flex:1}
  .s-jump__c{display:none}
  .s-bar{padding-left:16px}
}
@media (prefers-reduced-motion:reduce){
  .s-ruler__seg,.s-tl__row,.s-jump a,.s-bar{transition:none!important}
}
@media print{.s-bar{display:none!important}}