/* Stadium View Curriculum Hub — public site.
   The palette below is lifted from the hub's own CSS custom properties so the
   site and the product read as one thing:
     --ink #2B2A26  --muted #6E695F  --line #E6E1D5
     --paper #F4F3EE  --accent #B5673F  page background #FBF7F0
   The deep teal is the hub's own button colour (#115e59 / #0d9488). */

:root{
  --bg:#FBF7F0;
  --paper:#F4F3EE;
  --ink:#2B2A26;
  --muted:#6E695F;
  --line:#E6E1D5;
  --accent:#B5673F;
  --accent-dk:#A6431F;
  --teal:#115e59;
  --teal-lt:#0d9488;
  /* the demo button — the hub's own green, one shade brighter so it reads as
     the single thing on the page you are meant to click */
  --green:#0f8a6a;
  --green-dk:#0b6b52;
  --green-lt:#5ec8a8;
  --amber:#B45309;
  --maxw:1080px;
  --r:14px;
  /* Display type is a serif, the way the hub's own wordmark is. Body stays a
     sans so long passages read easily on a projector or an iPad. */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* the hero's colour wash is wider than the page on a phone; clip rather
     than hide, so the sticky header keeps working */
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-dk); text-decoration-color:rgba(166,67,31,.35); text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent-dk)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}

/* ---- header ---------------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(251,247,240,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr{display:flex; align-items:center; gap:18px; min-height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap}
.brand .dot{width:26px;height:26px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;flex:none}
nav.main{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.main a{
  color:var(--muted); text-decoration:none; font-size:15px;
  padding:7px 11px; border-radius:8px; white-space:nowrap;
}
nav.main a:hover{background:var(--paper); color:var(--ink)}
nav.main a[aria-current="page"]{background:var(--paper); color:var(--ink); font-weight:600}

/* ---- type ------------------------------------------------------------ */
h1{font-family:var(--serif); font-size:clamp(2.15rem,5vw,3.5rem); line-height:1.06;
   letter-spacing:-.02em; margin:0 0 .4em; font-weight:700}
h2{font-family:var(--serif); font-size:clamp(1.5rem,2.9vw,2.15rem); line-height:1.18;
   letter-spacing:-.015em; margin:2.4em 0 .5em; font-weight:700}
h3{font-size:1.08rem; margin:1.9em 0 .35em; font-weight:640; letter-spacing:-.01em}
p{margin:0 0 1.05em}
.lead{font-size:clamp(1.08rem,1.9vw,1.28rem); line-height:1.55; color:#3f3d37}
.eyebrow{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-dk); font-weight:680; margin:0 0 .7em}
.muted{color:var(--muted)}
.small{font-size:14.5px; line-height:1.55}

section{padding:16px 0}
.rule{border:0; border-top:1px solid var(--line); margin:52px 0}

/* ---- hero ------------------------------------------------------------ */
/* A warm wash behind the opening screen, and a thin four-colour rule at the
   very top of the page in the seasons' own colours — the same four bands the
   year is divided into, so the first thing you see is the year itself. */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:4px; z-index:30;
  background:linear-gradient(90deg,
    #C2703F 0 19%, #4B7FA6 19% 52%, #4F9068 52% 88%, #C9963C 88% 100%);
}
header.site{top:4px}
/* The side padding is repeated here on purpose. The hero is itself a .wrap,
   and a `padding` shorthand resets the horizontal padding .wrap sets — which
   is invisible on a desktop, where the max-width leaves margin either side
   anyway, and very visible on a phone, where it put the headline and the body
   copy hard against both edges of the screen while every other block on the
   page kept its gutter. padding-block would say this more neatly but is newer
   than some of the iPads this has to open on, so the value is written out.
   If the .wrap gutter ever changes, change it here too. */
.hero{position:relative; padding:76px 24px 26px}
.hero::before{
  content:""; position:absolute; left:50%; top:-140px; transform:translateX(-50%);
  width:min(1200px,96vw); height:520px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 62% at 22% 34%, rgba(181,103,63,.13), transparent 68%),
    radial-gradient(40% 58% at 78% 26%, rgba(17,94,89,.10), transparent 70%);
}
.hero h1{max-width:16ch}
.hero .lead{max-width:60ch}

/* ---- stat strip ------------------------------------------------------ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin:30px 0}
.stat{background:var(--bg); padding:17px 18px}
.stat{transition:background .18s}
.stat:hover{background:var(--paper)}
.stat b{display:block; font-family:var(--serif); font-size:2rem; line-height:1.1;
  letter-spacing:-.02em; font-weight:700; font-variant-numeric:tabular-nums}
.stat span{display:block; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-top:3px}
.stat i{font-style:normal; font-size:1rem; color:var(--muted); font-weight:500}

/* ---- the year ribbon -------------------------------------------------- */
/* The hub's whole idea in one strip: forty-two weeks, four seasons, the year
   at a glance. Every bar is a real week and links to it. */
.ribbon{
  --live:var(--accent);
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:20px 22px 16px; margin:30px 0;
}
.rread{min-height:52px; margin-bottom:14px}
.rread-w{
  display:block; font-family:var(--serif); font-size:1.16rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); transition:color .18s;
}
.ribbon.live .rread-w{color:var(--live)}
.rread-t{display:block; font-size:14.5px; color:var(--muted); line-height:1.45}
.rread-t b{color:var(--ink); font-weight:640}
.rbars{display:flex; gap:3px; align-items:flex-end; touch-action:pan-y}
.rb{
  flex:1 1 0; min-width:0; display:block; padding:9px 0 4px;
  text-decoration:none; border-radius:6px;
}
.rb i{
  display:block; height:42px; border-radius:4px; background:var(--c);
  opacity:.6; transition:opacity .16s, height .16s, transform .16s;
}
.rb:hover i,.rb.on i{opacity:1; height:58px}
.rb:focus{outline:none}
.rb:focus-visible i{opacity:1; height:58px; box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
.ribbon.live .rb:not(.on) i{opacity:.3}

/* the scale under the bars: each segment as wide as its season is long */
.rkeys{display:flex; gap:3px; margin-top:10px}
.rkey{
  flex:1 1 0; min-width:0; display:block; padding-top:8px;
  border-top:3px solid var(--c); color:var(--muted); line-height:1.25;
}
/* One week is too narrow a share to hold the word under it, so the last
   segment is sized to its label instead of to its length. Every other segment
   stays proportional. */
.rkey:last-child{text-align:right; flex:0 0 auto}
.rkey b{
  display:block; font-size:12.5px; letter-spacing:.06em; white-space:nowrap;
  text-transform:uppercase; font-weight:700; color:var(--c);
}
.rkey em{display:block; font-style:normal; font-size:12px; font-variant-numeric:tabular-nums}

/* the week a ribbon bar links to gets a moment of colour on arrival */
.weeks tr.flash td{animation:flash 1.9s ease-out}
@keyframes flash{
  0%,42%{background:color-mix(in srgb,var(--c) 17%,transparent)}
  100%{background:transparent}
}
.weeks .seasonrow td{color:var(--c); box-shadow:inset 3px 0 0 var(--c)}

/* ---- reveal on scroll ------------------------------------------------- */
.pre{opacity:0; transform:translateY(14px)}
.seen{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .pre{opacity:1; transform:none}
  .seen{transition:none}
}

/* ---- reading position ------------------------------------------------- */
.readbar{
  position:fixed; left:0; top:0; height:4px; width:100%; z-index:31;
  background:var(--accent-dk); transform:scaleX(0); transform-origin:0 50%;
  opacity:.85; pointer-events:none;
}

/* ---- cards ----------------------------------------------------------- */
.grid{display:grid; gap:20px; margin:26px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px 21px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s}
.card:hover{transform:translateY(-2px); border-color:#dcd5c5; box-shadow:0 8px 22px rgba(43,42,38,.07)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.card .tag{display:inline-block; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); font-weight:660; margin-bottom:6px}

/* ---- figures --------------------------------------------------------- */
figure{margin:30px 0}
figure img{border:1px solid var(--line); border-radius:var(--r); background:#fff}
/* A long page shot stays full width and is cropped at the bottom rather than
   shrunk into an unreadable column. */
figure.tall img{width:100%; height:640px; object-fit:cover; object-position:top center}
figcaption{font-size:14px; color:var(--muted); margin-top:9px; line-height:1.5}

/* ---- the opening shot ------------------------------------------------ */
/* One picture on the overview does more work than any sentence on it: it is
   the first sight of the thing the rest of the page describes. So it is given
   more room than the text column and a frame that lifts it off the page, and
   the file itself is cropped tight to the hub's own hero — the footer and the
   empty margin below it are not in the picture, because dead space at the
   bottom of a screenshot reads as a small picture with padding rather than as
   a big one. It is still the same zoomable figure as every other shot. */
.wrap.wide{max-width:1340px}
figure.shot-hero{margin:36px 0 40px}
figure.shot-hero img{
  width:100%;
  border-color:#DBD4C4;
  box-shadow:0 20px 46px rgba(43,42,38,.13), 0 3px 10px rgba(43,42,38,.06);
}
figure.shot-hero figcaption{
  font-size:15px; text-align:center; margin:14px auto 0; max-width:820px;
}
@media (max-width:760px){
  figure.shot-hero{margin:26px 0 30px}
  figure.shot-hero img{box-shadow:0 10px 24px rgba(43,42,38,.11)}
  figure.shot-hero figcaption{font-size:14px; text-align:left}
}

/* ---- the demo button ------------------------------------------------- */
/* Green, because everything else on the site is terracotta and ink. It is the
   one thing a visitor is being asked to click, so it should not blend in.
   Both buttons are written by config.js and disappear if no address is set. */
.btn-demo{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:#fff; text-decoration:none;
  border:1px solid var(--green-dk); border-radius:999px;
  font-weight:660; letter-spacing:-.005em; white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,80,72,.22);
  transition:background .15s, box-shadow .15s, transform .15s;
}
.btn-demo:hover{background:var(--green-dk); box-shadow:0 3px 10px rgba(15,80,72,.28)}
.btn-demo:active{transform:translateY(1px)}
.btn-demo:focus-visible{outline:3px solid var(--green-lt); outline-offset:2px}
.btn-demo .btn-arrow{transition:transform .15s}
.btn-demo:hover .btn-arrow{transform:translateX(3px)}
.btn-demo.sm{font-size:14.5px; padding:7px 15px}
.btn-demo.big{font-size:1.06rem; padding:13px 26px}
.hdr [data-sv-demo]{display:flex; align-items:center}
.cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:26px 0 4px}
.cta .cta-note{font-size:14.5px; color:var(--muted); margin:0}

/* ---- video slot ------------------------------------------------------ */
.vfig{margin:26px auto; max-width:980px}
.vbox{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#151412; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.vbox .vframe,.vbox .vplayer{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.vfacade{
  position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0;
  border:0; background:none; cursor:pointer; display:block;
}
.vfacade img{width:100%; height:100%; object-fit:cover; display:block}
.vfacade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28) 100%);
  opacity:0; transition:opacity .18s;
}
.vfacade:hover::after{opacity:1}
.vplay{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:82px; height:82px; border-radius:50%;
  background:var(--accent); box-shadow:0 6px 22px rgba(0,0,0,.34);
  transition:transform .18s, background .18s;
}
.vplay::before{
  content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:15px 0 15px 25px;
  border-color:transparent transparent transparent #fff;
}
.vfacade:hover .vplay{background:var(--accent-dk); transform:translate(-50%,-50%) scale(1.06)}
.vfacade:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
/* With nothing configured there is no aspect ratio worth reserving, so the
   waiting state is a modest band rather than a large empty rectangle. */
.vbox-empty{
  aspect-ratio:auto; min-height:300px;
  background:
    radial-gradient(120% 90% at 50% 0%, #fbf8f2 0%, var(--paper) 62%);
  border-style:dashed; border-color:#d8d2c4;
  display:grid; place-items:center;
}
.vempty{text-align:center; color:var(--muted); padding:34px 24px; max-width:420px}
.vempty p{margin:0; font-size:15px; line-height:1.5}
.vempty-icon{
  display:block; width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:var(--line); position:relative;
}
.vempty-icon::before{
  content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #fff;
}
.vlink{margin:8px 0 0}

/* the line under the film: how long it runs, and that there is nothing to hear */
.vmeta{
  margin:6px 0 0; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums;
}

/* ---- the chapters ----------------------------------------------------- */
/* Eleven marks under the film, each a real button that jumps into it. They
   are laid out as a list rather than a strip because the labels are sentences,
   not numbers, and a visitor is choosing by what happens, not by when. */
.vchaps{margin:18px 0 0}
.vchaps-h{
  margin:0 0 8px; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.vchaps ol{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.vchap{
  display:flex; align-items:baseline; gap:10px; width:100%;
  padding:9px 12px; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  font:inherit; color:var(--ink);
  transition:border-color .15s, background .15s, transform .15s;
}
.vchap:hover{border-color:var(--accent); transform:translateX(2px)}
.vchap:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.vchap-t{
  flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.vchap-l{font-size:14.5px; line-height:1.35}
/* the mark the film is currently inside */
.vchap.on{background:#fff; border-color:var(--accent)}
.vchap.on .vchap-t{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .vchap{transition:none}
  .vchap:hover{transform:none}
}

/* ---- zoomable screenshots -------------------------------------------- */
/* The shots are 1800px wide and displayed at about half that. The hint below
   says so, quietly, on hover; the overlay is where the detail actually is. */
figure.zoomable{position:relative}
figure.zoomable img{cursor:zoom-in}
figure.zoomable::after{
  content:"Click to enlarge"; position:absolute; top:12px; right:12px;
  background:rgba(28,26,24,.78); color:#fff; font-size:12px; font-weight:600;
  letter-spacing:.03em; padding:5px 11px; border-radius:999px;
  opacity:0; transition:opacity .16s; pointer-events:none;
}
figure.zoomable:hover::after,
figure.zoomable img:focus-visible ~ figcaption{opacity:1}
figure.zoomable:hover::after{opacity:1}
figure.zoomable img:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

body.zlock{overflow:hidden}
.zov{position:fixed; inset:0; z-index:100; background:rgba(18,17,15,.975);
  display:flex; flex-direction:column; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.zov[hidden]{display:none}
.zbar{display:flex; align-items:center; gap:8px; padding:10px 14px;
  color:#f2efe8; font-size:13.5px; flex:none; position:relative; z-index:3;
  background:rgba(18,17,15,.92); border-bottom:1px solid rgba(255,255,255,.08)}
.zbar .zsp{margin-left:auto}
.zcount{color:#b6b0a4; letter-spacing:.04em; font-size:12.5px; text-transform:uppercase}
.zpct{min-width:56px; text-align:center; font-variant-numeric:tabular-nums; color:#d9d4c9}
.zb{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#f2efe8;
  width:34px; height:34px; border-radius:9px; font-size:17px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0}
.zb:hover{background:rgba(255,255,255,.2)}
.zb:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.zb-t{width:auto; padding:0 13px; font-size:13.5px}
.zb-x{font-size:22px; margin-left:6px}
.zstage{flex:1; min-height:0; overflow:hidden; position:relative;
  touch-action:none; cursor:default}
.zstage.zoomed{cursor:grab}
.zstage.zdrag{cursor:grabbing}
/* Pinned to the corner on purpose rather than centred by layout. The image
   keeps its full natural size — 1800px wide and up to 2500 tall — which is
   larger than the window, and a box that overflows its container does not
   centre: the browser pins it to the start edge instead. Left uncorrected that
   drops a tall screenshot clean out of view. zoom.js centres it in arithmetic
   once the scale is known. */
.zimg{position:absolute; left:0; top:0;
  max-width:none; transform-origin:center center; will-change:transform;
  border-radius:6px; background:#fff; user-select:none; -webkit-user-drag:none}
.zcap{flex:none; color:#c9c3b6; font-size:14px; line-height:1.5; padding:12px 20px 20px;
  max-width:900px; margin:0 auto; text-align:center}
.znav{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); color:#f2efe8;
  width:46px; height:64px; border-radius:11px; font-size:28px; line-height:1; cursor:pointer}
.znav:hover{background:rgba(255,255,255,.2)}
.zprev{left:14px}
.znext{right:14px}

@media (max-width:620px){
  .znav{width:38px; height:52px; font-size:23px}
  .zprev{left:6px} .znext{right:6px}
  .zcap{font-size:13px; padding:10px 14px 16px}
  figure.zoomable::after{content:"Tap to enlarge"; opacity:1; font-size:11px; padding:4px 9px}
}

/* ---- callouts -------------------------------------------------------- */
.note{border-left:3px solid var(--accent); background:var(--paper);
  padding:15px 18px; border-radius:0 var(--r) var(--r) 0; margin:26px 0}
.note p:last-child{margin-bottom:0}
.note.amber{border-left-color:var(--amber)}
.note.teal{border-left-color:var(--teal-lt)}

/* ---- lists ----------------------------------------------------------- */
ul.plain{list-style:none; padding:0; margin:1em 0}
ul.plain li{padding:9px 0; border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
ul.plain b{font-weight:640}

/* ---- week table ------------------------------------------------------ */
.weeks{width:100%; border-collapse:collapse; font-size:15px; margin:22px 0}
.weeks th{text-align:left; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:660; padding:8px 10px; border-bottom:1px solid var(--line)}
.weeks td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.weeks td.n{color:var(--muted); white-space:nowrap; width:64px; font-variant-numeric:tabular-nums}
.weeks td.d{color:var(--muted); white-space:nowrap; font-size:13.5px}
.weeks tr:hover td{background:var(--paper)}
.seasonrow td{background:var(--paper); font-weight:660; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-dk)}

/* ---- subject chips --------------------------------------------------- */
.subs{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0}
.sub{display:inline-flex; align-items:center; gap:7px; background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px 6px 10px; font-size:14.5px}
.sub i{width:9px;height:9px;border-radius:50%;flex:none}

/* ---- games ----------------------------------------------------------- */
.gcat{margin:34px 0 0}
.gcat h3{display:flex; align-items:baseline; gap:10px}
.gcat h3 em{font-style:normal; font-size:13px; color:var(--muted); font-weight:500}
.games{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); margin-top:14px}
.game{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.game b{display:block; font-weight:650; margin-bottom:3px}
.game span{font-size:14.5px; color:var(--muted); line-height:1.5}

/* ---- coverage bars --------------------------------------------------- */
.cov{margin:22px 0}
.covrow{display:grid; grid-template-columns:minmax(140px,1.1fr) 3fr auto; gap:12px;
  align-items:center; padding:6px 0; font-size:15px}
.bar{height:9px; border-radius:99px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--teal); border-radius:99px}
.bar i.zero{background:var(--line)}
.covrow em{font-style:normal; font-size:13.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---- footer ---------------------------------------------------------- */
footer.site{border-top:1px solid var(--line); margin-top:64px; padding:32px 0 56px;
  color:var(--muted); font-size:14.5px}
footer.site nav{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px}
footer.site nav a{color:var(--muted); text-decoration:none}
footer.site nav a:hover{color:var(--ink)}
/* The name in the copyright line is also how to get in touch. It stays in the
   footer's own grey rather than the site's terracotta, because a bright link in
   the last line of a page pulls the eye to the least important thing on it. The
   underline is enough to say it can be clicked. */
footer.site .copy a{color:var(--muted); text-decoration:underline;
  text-decoration-color:rgba(110,105,95,.45); text-underline-offset:3px}
footer.site .copy a:hover{color:var(--ink); text-decoration-color:var(--ink)}
footer.site .copy a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ---- touch ------------------------------------------------------------ */
/* Scoped to devices without a hover cursor, so nothing about the desktop
   changes. Everything a finger has to find gets a reasonable minimum; the
   ribbon bars are the one exception, since forty-two of them across a phone
   cannot each be finger-sized and "See the year" underneath is the way in that
   needs no aim. */
@media (hover: none) and (pointer: coarse){
  .brand{ min-height:44px; }
  nav.main a, footer.site nav a{ min-height:40px; display:inline-flex; align-items:center; }
  .vchap{ min-height:46px; }
  .btn-demo.sm{ min-height:38px; }
  .rb{ padding-top:12px; padding-bottom:8px; }

  /* Links that sit inside a sentence cannot become blocks without breaking the
     line, so they get a taller hit box instead: padding out, margin back in.
     The layout does not move; the target grows by 16px. */
  footer.site .copy a, .hero p a, .note a{ padding:8px 0; margin:-8px 0; }
}

@media (max-width:620px){
  body{font-size:16px}
  /* A little more room at the edges on a phone. 24px is comfortable on a
     desktop, where there is margin to spare either side of the column; on a
     390px screen the text wants to sit slightly further in than that. */
  .wrap{padding:0 26px}
  .hero{padding:40px 26px 18px}   /* matches the .wrap gutter below */
  .hdr{min-height:56px; gap:10px}
  nav.main a{padding:6px 8px; font-size:14px}
  .covrow{grid-template-columns:1fr; gap:4px}
  .covrow em{margin-bottom:6px}
  /* The week table is the one wide thing on the site; on a phone the dates
     column wraps instead of pushing the page sideways. */
  .weeks{font-size:14px; table-layout:fixed}
  .weeks th,.weeks td{padding:8px 6px}
  .weeks td.n{width:52px}
  .weeks th:last-child,.weeks td.d{width:86px}
  .weeks td.d{white-space:normal; font-size:12.5px}
  /* The nav wraps to three rows on a phone; a sticky header that tall eats the
     screen, so it scrolls away instead. */
  header.site{position:static}
  figure.tall img{height:420px}
  /* On a phone the header goes to two rows: wordmark and the green button on
     top, the section links underneath. Keeping them on one row pushed the
     page sideways. */
  .hdr{flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
  .hdr .brand{order:1}
  .hdr [data-sv-demo]{order:2; margin-left:auto}
  .hdr nav.main{order:3; width:100%; margin-left:0; justify-content:flex-start}
  nav.main a{padding:6px 7px}
  .btn-demo.sm{font-size:13.5px; padding:6px 13px}
  .btn-demo.big{width:100%; justify-content:center; font-size:1rem; padding:14px 20px}
  .cta{gap:12px}
  .vplay{width:60px; height:60px}
  .vplay::before{border-width:11px 0 11px 18px}
  /* one chapter per row on a phone: two columns of sentences is unreadable */
  .vchaps ol{grid-template-columns:1fr}
  /* Five stats over two columns leaves a hole; the last one takes the row. */
  .stats .stat:last-child{grid-column:1 / -1}
  /* A phone is too narrow for five proportional season labels side by side,
     so the scale becomes an ordinary two-up legend. */
  .ribbon{padding:16px 14px 14px}
  .rkeys{flex-wrap:wrap; gap:8px 10px}
  .rkey{flex:1 1 44%; padding-top:6px}
  .rkey:last-child{text-align:left}
  .rkey b{font-size:11.5px; letter-spacing:.04em}
  .rkey em{font-size:11.5px}
  .rb i{height:34px}
  .rb:hover i,.rb.on i{height:46px}
}

/* ---- the mini timeline ------------------------------------------------- */
/* A small version of the timeline the hub itself opens on. It is layered on
   top of the ribbon above by timeline.js: same forty-two anchors, same links,
   restyled and given a card that slides along the strip. Everything in this
   block is scoped to .ribbon.mtl, which only exists once that script has run.
   With the script absent the ribbon above is untouched and still works. */
.rbars{position:relative}

.ribbon.mtl{padding-top:26px}

/* the resting readout steps aside while the card is out — the card says the
   same thing, better, and two copies of it on screen reads as a mistake */
.ribbon.mtl .rread{transition:opacity .18s}
.ribbon.mtl.mtl-open .rread{opacity:0}

/* a softer, springier rise than the plain hover, since the whole strip is now
   one surface moving rather than forty-two separate targets */
.ribbon.mtl .rb i{
  transition:height .22s cubic-bezier(.34,1.4,.5,1),
             opacity .18s ease-out,
             transform .22s cubic-bezier(.34,1.4,.5,1);
}
.ribbon.mtl.mtl-open .rb:not(.on) i{opacity:inherit}
.ribbon.mtl .rb.on i{opacity:1}

/* the card */
.mtl-pane{
  --acc:var(--accent);
  position:absolute; left:0; bottom:calc(100% + 12px); z-index:40;
  width:288px; max-width:100%;
  box-sizing:border-box;
  padding:12px 15px 13px;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-left:5px solid var(--acc);
  border-radius:14px;
  box-shadow:0 16px 38px rgba(15,23,42,.18);
  opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease-out;
  will-change:transform;
}
.mtl-pane[hidden]{display:none}
.ribbon.mtl-lit .mtl-pane{opacity:1; pointer-events:auto}

/* the little arrow keeps pointing at the actual week even after the card has
   been clamped to the end of the strip */
.mtl-pane::after{
  content:""; position:absolute; bottom:-6px; left:var(--px,50%);
  width:11px; height:11px; margin-left:-6px;
  background:#fff; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:rotate(45deg); border-bottom-right-radius:2px;
}

.mtl-wk{
  display:block; text-decoration:none;
  font-family:var(--serif); font-size:1.02rem; font-weight:700;
  letter-spacing:-.01em; color:var(--acc); line-height:1.2;
}
.mtl-sn{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,
               Helvetica,Arial,sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-left:6px; vertical-align:1px;
}
.mtl-th{
  display:block; margin-top:5px; text-decoration:none;
  font-size:14.5px; font-weight:640; line-height:1.32; color:var(--ink);
}
.mtl-th:hover{text-decoration:underline}
.mtl-dt{
  margin-top:5px; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.mtl-ct{margin-top:2px; font-size:12.5px; color:var(--muted)}
.mtl-go{
  display:inline-block; margin-top:9px; text-decoration:none;
  font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--acc);
}
.mtl-go:hover{text-decoration:underline}

@media (max-width:640px){
  .ribbon.mtl{padding-top:18px}
  .mtl-pane{width:236px; padding:10px 13px 11px; border-radius:12px}
  .mtl-th{font-size:13.5px}
}

/* Switched off for anyone who has asked for less movement: the card still
   opens and still says everything, it simply does not slide or spring. */
@media (prefers-reduced-motion:reduce){
  .mtl-pane{transition:opacity .01ms}
  .ribbon.mtl .rb i{transition:opacity .01ms}
  .ribbon.mtl.mtl-open .rread{opacity:1}
}