/* ============================================================================
   home.css — the homepage's interactive sections (index.html only)
   ----------------------------------------------------------------------------
   Owner, 2026-09-18: "Make the homepage more interactive so the customer can
   engage with the website." Each interactive section works WITHOUT JavaScript and is
   upgraded by home.js (which adds `.is-js` to each root):

     .hp-paths  Quick paths — Parents / Teachers / Students / Players tabs
     .hp-cards  Flip-a-card — nine real cards, art on the front, ability + history
     .hp-tl     Timeline explorer — fifteen eras, pack + book for each
     .hp-find   Find a tournament — ZIP / state → the right pages, live numbers
     .hp-banner The product banners above each group of sections
     .hp-ls     Seven learning styles — a line-matching game
     .hp-ms     How are your Math Skills? — Totally Medieval math cards
     .hp-yt     Historical Conquest on YouTube — one card: locked viewer + list

   Kept out of site.css on purpose: only the homepage pays for it. Nautical
   Chart tokens (--navy, --chartred, --buoy, --teal, --scale) come from site.css;
   every one has a fallback so this file never breaks if a palette changes.
   ========================================================================== */

/* ---------------------------------------------------------- shared tiles */
.hp-actions{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:hp}
.hp-actions-col{grid-template-columns:1fr}
.hp-action{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;
  padding:16px 16px 16px 58px;background:#f7fbf8;border:2px solid var(--navy,#12324d);border-radius:6px;
  color:var(--text);box-shadow:3px 3px 0 rgba(18,50,77,.18);transition:transform .14s,border-color .14s,box-shadow .14s}
.hp-action::before{counter-increment:hp;content:counter(hp);position:absolute;left:14px;top:15px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.86rem;
  background:var(--navy,#12324d);color:var(--buoy,#e8b92f);font-family:var(--sans)}
.hp-action b{color:var(--navy,#12324d);font-family:var(--serif);font-size:1rem;line-height:1.3}
.hp-action b::after{content:"\00a0\2192";color:var(--chartred,#b33a2e)}
.hp-action span{font-size:.86rem;color:var(--text-dim);line-height:1.5}
.hp-action:hover{transform:translateY(-2px);border-color:var(--chartred,#b33a2e);box-shadow:5px 5px 0 rgba(18,50,77,.22)}
.hp-action:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
@media (max-width:840px){.hp-actions{grid-template-columns:1fr}}

/* ============================================================ QUICK PATHS */
.hp-paths{display:grid;gap:22px}
.hp-panel{background:rgba(247,251,248,.92);border:3px double var(--navy,#12324d);border-radius:6px;
  padding:clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.hp-panel-h{color:var(--navy,#12324d);font-size:1.25rem;margin-bottom:6px}
.hp-panel-lede{color:var(--text-dim);margin-bottom:16px}
.hp-panel-more{margin:16px 0 0;text-align:right}
.hp-panel-more .card-link::after{content:" \2193"}

/* the tab bar home.js builds from the panel headings */
.hp-tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:2px solid var(--navy,#12324d);border-radius:6px;overflow:hidden;background:#f7fbf8;
  box-shadow:3px 3px 0 var(--navy,#12324d)}
.hp-tab{position:relative;padding:14px 10px;border:0;border-left:2px solid var(--navy,#12324d);background:none;
  font-family:var(--serif);font-weight:700;font-size:.95rem;color:var(--navy,#12324d);cursor:pointer;
  line-height:1.25;transition:background .14s,color .14s}
.hp-tab:first-child{border-left:0}
.hp-tab:hover{background:#e6f1f4}
.hp-tab[aria-selected="true"]{background:var(--navy,#12324d);color:#f7fbf8}
.hp-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--buoy,#e8b92f)}
.hp-tab:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:-5px;border-radius:0}
.hp-paths.is-js .hp-panel[hidden]{display:none}
.hp-paths.is-js .hp-panel-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-paths.is-js .hp-panel{animation:hpIn .22s ease-out}
.hp-paths.is-js .hp-panel:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
@keyframes hpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:620px){
  .hp-tablist{grid-template-columns:1fr 1fr}
  .hp-tab{border-left:0;border-top:2px solid var(--navy,#12324d);font-size:.88rem;padding:12px 8px}
  .hp-tab:nth-child(-n+2){border-top:0}
  .hp-tab:nth-child(even){border-left:2px solid var(--navy,#12324d)}
}

/* ============================================================ FLIP-A-CARD */
.hp-cards{list-style:none;margin:0;padding:0;display:grid;gap:26px 22px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.hp-flipper{position:relative;flex:1}
.hp-face{border-radius:8px;overflow:hidden}
.hp-front img{width:100%;height:auto;display:block}
.hp-back{background:#f7fbf8;border:3px double var(--navy,#12324d);padding:14px 16px 16px;position:relative}
.hp-back::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--scale,#12324d)}
.hp-back p{margin:0}
.hp-name{font-family:var(--serif);font-weight:800;color:var(--navy,#12324d);font-size:1.08rem;line-height:1.2;margin-top:4px!important}
.hp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.78rem;color:var(--text-dim);margin:6px 0 8px!important}
.hp-stat{padding:1px 8px;border-radius:999px;background:var(--navy,#12324d);color:#f7fbf8;font-weight:600;font-size:.72rem;letter-spacing:.4px}
.hp-stat b{color:var(--buoy,#e8b92f)}
.hp-lbl{font-size:.64rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal,#2f7f86);margin-top:8px!important}
.hp-txt{font-size:.85rem;line-height:1.45;color:var(--text)}
.hp-txt[data-field="history"]{font-style:italic;color:var(--text-dim)}
.hp-card-link{font-size:.84rem;font-weight:700;color:var(--chartred,#b33a2e);align-self:flex-start}
.hp-card-link::after{content:" \2192"}
.hp-card-link:hover{text-decoration:underline;text-underline-offset:3px}

/* no JavaScript: the back sits under the art, always readable */
.hp-cards:not(.is-js) .hp-back{margin-top:8px}

/* with JavaScript: the two faces share ONE grid cell, so the card is as tall as
   the taller face (no clipped text, no inner scrollbars) and turns in 3D */
.hp-cards.is-js .hp-flipper{perspective:1400px}
.hp-cards.is-js .hp-flip-in{display:grid;height:100%;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.75,.25,1)}
.hp-cards.is-js .hp-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* the hidden face leaves the accessibility tree once it has turned away */
  transition:visibility 0s linear .31s}
.hp-cards.is-js .hp-front{display:flex;align-items:center;background:var(--navy,#12324d);
  border:3px solid var(--navy,#12324d);box-shadow:var(--shadow)}
.hp-cards.is-js .hp-back{transform:rotateY(180deg);visibility:hidden;box-shadow:var(--shadow)}
.hp-cards.is-js .is-flipped .hp-flip-in{transform:rotateY(180deg)}
.hp-cards.is-js .is-flipped .hp-back{visibility:visible}
.hp-cards.is-js .is-flipped .hp-front{visibility:hidden}

/* the whole card is the button; the badge says so */
.hp-flip{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;margin:0;border:0;
  background:transparent;cursor:pointer;border-radius:8px;display:flex;align-items:flex-start;justify-content:flex-start}
.hp-flip[hidden]{display:none}
/* top-left: over the portrait, clear of the printed name, text and strength */
.hp-flip-badge{margin:10px 0 0 10px;padding:6px 12px;border-radius:999px;background:var(--chartred,#b33a2e);
  color:#fff;font-family:var(--sans);font-size:.76rem;font-weight:800;letter-spacing:.3px;
  border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .14s,background .14s}
/* on the back the badge moves to the bottom corner, into room kept for it,
   so it never covers the card's name */
.hp-cards.is-js .hp-back{padding-bottom:48px}
.hp-card.is-flipped .hp-flip{align-items:flex-end;justify-content:flex-end}
.hp-card.is-flipped .hp-flip-badge{margin:0 10px 10px 0;background:var(--navy,#12324d)}
.hp-flip:hover .hp-flip-badge{transform:translateY(-2px);background:var(--navy,#12324d)}
.hp-flip:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:3px}
.hp-card:hover .hp-front{border-color:var(--chartred,#b33a2e)}

@media (max-width:940px){.hp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones: one row you swipe through, the next card peeking in */
@media (max-width:620px){
  .hp-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin-inline:-4px;
    overscroll-behavior-x:contain;scrollbar-width:thin}
  .hp-card{scroll-snap-align:start}
  .hp-txt{font-size:.82rem}
}

/* reduced motion: no spin — the faces simply swap */
@media (prefers-reduced-motion:reduce){
  .hp-cards.is-js .hp-flip-in,.hp-cards.is-js .is-flipped .hp-flip-in{transform:none;transition:none}
  .hp-cards.is-js .hp-back{transform:none}
  .hp-cards.is-js .hp-face{transition:none}
  .hp-paths.is-js .hp-panel{animation:none}
}

/* ======================================================= TIMELINE EXPLORER */
.hp-tl-bar{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.hp-tl-axis{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 10px;
  position:relative;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent)}
.hp-tl-axis::-webkit-scrollbar{display:none}
.hp-tl-axis a{flex:0 0 auto;padding:6px 12px;border-radius:999px;border:2px solid var(--navy,#12324d);
  background:#f7fbf8;color:var(--navy,#12324d);font-size:.78rem;font-weight:700;white-space:nowrap;
  transition:background .14s,color .14s}
.hp-tl-axis a:hover{background:#e6f1f4}
.hp-tl-axis a[aria-current="true"]{background:var(--navy,#12324d);color:#f7fbf8;box-shadow:inset 0 -4px 0 var(--buoy,#e8b92f)}
.hp-tl-axis a:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
.hp-tl-arrows{flex:0 0 auto;display:flex;gap:8px}
.hp-tl-arrows[hidden]{display:none}
.hp-tl-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--navy,#12324d);background:var(--chartred,#b33a2e);
  color:#fff;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 var(--navy,#12324d);
  display:grid;place-items:center;transition:background .14s,transform .14s}
.hp-tl-btn:hover{background:var(--navy,#12324d)}
.hp-tl-btn:disabled{background:#c9d6db;color:#5d7280;box-shadow:none;cursor:default}
.hp-tl-btn:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}

.hp-tl-track{list-style:none;margin:0;padding:24px 4px 12px;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(316px,336px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:4px;overscroll-behavior-x:contain;position:relative;scrollbar-width:thin;
  scrollbar-color:var(--navy,#12324d) transparent}
.hp-tl-track:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:4px;border-radius:6px}
.hp-era{position:relative;scroll-snap-align:start;display:grid;grid-template-columns:92px minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;column-gap:14px;align-content:start;
  background:#f7fbf8;border:3px double var(--navy,#12324d);border-radius:6px;padding:12px 14px 14px;
  box-shadow:var(--shadow);scroll-margin-top:calc(var(--nav-h,64px) + 90px)}
/* the rail: a scale-bar line through every stop, a buoy at each */
.hp-era::before{content:"";position:absolute;left:-22px;right:-22px;top:-17px;height:4px;background:var(--scale,#12324d);
  border-block:1px solid var(--navy,#12324d);z-index:0}
.hp-era::after{content:"";position:absolute;left:18px;top:-23px;width:14px;height:14px;border-radius:50%;
  background:var(--buoy,#e8b92f);border:2px solid var(--navy,#12324d);z-index:1}
.hp-era:first-child::before{left:18px}
.hp-era:last-child::before{right:50%}
.hp-era.is-current{border-color:var(--chartred,#b33a2e)}
.hp-era.is-current::after{background:var(--chartred,#b33a2e)}
.hp-era-when{grid-column:2;margin:0 0 2px;font-size:.7rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal,#2f7f86)}
.hp-era h3{grid-column:2;font-size:.98rem;color:var(--navy,#12324d);line-height:1.25;margin-bottom:6px}
.hp-era-img{grid-column:1;grid-row:1/4;align-self:start;display:block;background:#e3efea;border-radius:4px;padding:6px}
.hp-era-img img{width:100%;height:108px;object-fit:contain;transition:transform .2s}
.hp-era-img:hover img{transform:scale(1.03)}
.hp-era-blurb{grid-column:2;font-size:.8rem;line-height:1.45;color:var(--text-dim);margin-bottom:10px}
.hp-era-links{grid-column:1/-1;margin:0;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.hp-era-links .card-link{color:var(--chartred,#b33a2e)}
.hp-era-also{font-size:.8rem;font-weight:600;color:var(--navy,#12324d);text-decoration:underline;
  text-decoration-color:rgba(18,50,77,.35);text-underline-offset:3px}
.hp-era-also:hover{color:var(--chartred,#b33a2e)}
@media (max-width:620px){
  .hp-tl-bar{flex-wrap:wrap}
  .hp-tl-arrows{display:none!important}
  .hp-tl-track{grid-auto-columns:88%}
}
@media (prefers-reduced-motion:reduce){.hp-era-img img{transition:none}}

/* ======================================================= FIND A TOURNAMENT */
.hp-find{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(20px,3vw,34px);align-items:start}
.hp-find-form{background:#f7fbf8;border:3px double var(--navy,#12324d)}
.hp-find-form .field label{color:var(--navy,#12324d)}
.hp-find-form .field input,.hp-find-form .field select{background:#fff;border:2px solid var(--navy,#12324d);border-radius:4px;color:var(--text)}
.hp-find-form .field input:focus,.hp-find-form .field select:focus{border-color:var(--chartred,#b33a2e);
  outline:3px solid rgba(232,185,47,.55);outline-offset:1px}
.hp-find-form .field input[aria-invalid="true"]{border-color:var(--chartred,#b33a2e)}
.hp-find-row{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);gap:10px;align-items:end}
.hp-find-row .field{margin-bottom:12px}
.hp-or{margin:0 0 24px;color:var(--text-dimmer);font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.hp-find-err{min-height:1.2em;margin:0 0 10px;color:#a3281b;font-weight:700;font-size:.86rem}
.hp-find-err:empty{margin:0}
.hp-find-out h3{color:var(--navy,#12324d);font-size:1.15rem;margin-bottom:4px}
.hp-find-out .hp-find-note{color:var(--text-dim);margin-bottom:10px;font-size:.92rem}
.hp-find-out .hp-actions{gap:10px}
.hp-find-out .hp-action{padding:10px 14px 10px 54px;gap:2px}
.hp-find-out .hp-action::before{top:12px;width:28px;height:28px}
.hp-find-out :focus{outline:none}
.hp-find-result{animation:hpIn .22s ease-out}
@media (prefers-reduced-motion:reduce){.hp-find-result{animation:none}}
@media (max-width:840px){.hp-find{grid-template-columns:1fr}}

/* the live numbers — a strip of chips under the heading */
.hp-live{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.hp-live[hidden],.hp-live li[hidden]{display:none}
.hp-live li{padding:4px 12px;border-radius:999px;background:#f7fbf8;border:2px solid var(--navy,#12324d);
  font-size:.82rem;font-weight:600;color:var(--navy,#12324d)}
.hp-live .n{font-family:var(--serif);font-size:1.05rem;color:var(--chartred,#b33a2e);font-variant-numeric:tabular-nums}

/* ============================================================================
   ONE SECTION = ONE SCREEN (owner, 2026-09-18: "Make each section of the
   homepage smaller so they are all uniform and don't take up more than the
   browser when zoomed at 100%"). Every <main> section fits inside the viewport
   minus the 64px sticky header at 1280×720, 1366×768 and 1920×1080 — checked by
   tests/home-fit-test.js in real headless Chrome. One padding scale for every
   section and band, a tighter heading block, and media capped by viewport
   height so a split row can never outgrow the screen.
   ========================================================================== */
.section{padding-block:clamp(28px,3.6vw,46px)}
.band-body{padding-block:clamp(30px,4vw,50px)}
.hero{min-height:clamp(380px,calc(100vh - 64px),560px)}
.hero-body{padding-block:clamp(36px,6vw,72px)}
.section-head{margin-bottom:clamp(14px,2vw,24px)}
.section-head h2{font-size:clamp(1.45rem,2.5vw,2.05rem)}
.section-head h2::after{margin-top:10px;height:5px;width:140px}
.section-head .sub{margin-top:8px;font-size:.97rem}
.kicker{margin-bottom:8px}
.split{gap:clamp(22px,3.4vw,46px)}
.split-body h2{font-size:clamp(1.4rem,2.3vw,1.85rem)}
.split-body .sub{margin-bottom:10px}
.split-media img{width:100%;max-height:min(400px,calc(100vh - 250px));object-fit:cover}
.btn-row{margin-top:16px}
.ticks{margin-top:12px}.ticks li{margin-bottom:7px}
.numbers{margin-top:12px}.numbers li{margin-bottom:9px}
.card-body{padding:16px 16px 18px}

/* retention: the awards sit inside the text column */
.hp-awards{justify-content:flex-start;gap:18px;margin-top:14px}
.hp-awards img{height:clamp(56px,6vw,76px)}

/* curriculum: families and teachers side by side */
.hp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.hp-col{display:flex;flex-direction:column;background:rgba(247,251,248,.92);border:3px double var(--navy,#12324d);border-radius:6px;
  padding:clamp(16px,2.2vw,24px);box-shadow:var(--shadow);scroll-margin-top:calc(var(--nav-h,64px) + 16px)}
.hp-col h3{color:var(--navy,#12324d);font-size:1.12rem;margin-bottom:4px}
.hp-col .numbers li,.hp-col .ticks li{font-size:.9rem;margin-bottom:7px}
.hp-col-note{font-size:.86rem;color:var(--text-dim);margin:8px 0 0}
.hp-col .btn-row{margin-top:auto;padding-top:14px}
.hp-col .btn{padding:10px 18px;font-size:.86rem}
@media (max-width:840px){.hp-two{grid-template-columns:1fr}}

/* Adventure Box: the six contents in two columns */
.hp-ticks-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.hp-ticks-2 li{font-size:.9rem}
@media (max-width:480px){.hp-ticks-2{grid-template-columns:1fr}}


/* Flip-a-card: three at a time on wider screens, "Deal three more" for the rest */
.hp-cards .hp-card[hidden]{display:none}
.hp-card.is-dealing{animation:hpDeal .38s cubic-bezier(.2,.75,.25,1) both}
.hp-card.is-dealing:nth-child(3n+2){animation-delay:.07s}
.hp-card.is-dealing:nth-child(3n){animation-delay:.14s}
@keyframes hpDeal{from{opacity:0;transform:translateY(-14px) rotate(-2deg)}to{opacity:1;transform:none}}
.hp-deal[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.hp-card.is-dealing{animation:none}}
@media (max-width:940px) and (min-width:621px){
  .hp-cards.is-dealt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp-back{padding:10px 12px}
  .hp-txt{font-size:.78rem}
}

/* phones: a section may run longer than one screen, but each interaction must
   still be visible inside one */
@media (max-width:620px){
  .split-media img{max-height:240px}
  .hp-find-row{grid-template-columns:1fr}
  .hp-or{margin:0 0 10px;text-align:center}
}

/* the image bands: the Nautical palette paints split-row headings and list text
   navy, which disappeared into the darkened mat behind them — on a band every
   word is light, over a navy wash that is deepest behind the text */
.band-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,34,54,.9) 0%,rgba(11,34,54,.78) 50%,rgba(11,34,54,.5) 100%)}
.band .split-body h2,.band .split-body p,.band .numbers li,.band .ticks li{color:#f7fbf8}
.band .numbers li b{color:var(--buoy,#e8b92f)}
.band .kicker{color:var(--buoy,#e8b92f)}
.band .split-media img{border-color:#f7fbf8}
.band .numbers li::before{background:var(--buoy,#e8b92f);color:var(--navy,#12324d)}

/* ============================================================== BANNERS
   Owner, 2026-09-18: a banner above each group of sections that introduces
   one part of the business (The Game, Adventure Box Curriculum, Local
   Tournaments, Totally Medieval, Digital Historical Conquest), each on its own
   play mat. All the same height, much shorter than a screen, with the navy
   wash from .band-media::after above so the light text always reads. */
.hp-banner .band-body{padding-block:clamp(18px,2.4vw,28px);min-height:clamp(150px,20vh,184px);
  display:flex;align-items:center}
.hp-banner .band-body > .wrap{width:100%}
.hp-banner .band-media img{filter:brightness(.62) saturate(.95)}
.hp-banner-in{display:flex;align-items:center;justify-content:space-between;gap:14px 32px;flex-wrap:wrap}
.hp-banner .kicker{margin-bottom:4px;color:var(--buoy,#e8b92f)}
.hp-banner h2{margin:0;font-size:clamp(1.55rem,3vw,2.35rem);color:#f7fbf8;letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.45)}
.hp-banner-sub{margin:6px 0 0;color:#e6f1f4;font-size:.98rem;max-width:72ch}
.hp-banner .btn{flex:0 0 auto}
@media (max-width:620px){
  .hp-banner .band-body{min-height:0}
  .hp-banner-sub{font-size:.9rem}
}

/* the cards section: a little less padding so three cards (turned either
   way), the buttons and the trademark footnote still fit one screen */
#cards{padding-block:clamp(24px,2.4vw,34px)}
#cards .btn-row{margin-top:12px}
/* the trademark footnote under the cards */
.hp-legal{margin:8px 0 0;text-align:center;font-size:.72rem;line-height:1.4;color:var(--text-dimmer)}

/* ================================================= SEVEN LEARNING STYLES */
.hp-ls-key{max-width:760px;margin:0 auto;padding-left:1.4em;columns:2;column-gap:36px;font-size:.92rem}
.hp-ls-key li{margin-bottom:6px;break-inside:avoid}
.hp-ls-key[hidden],.hp-ls[hidden]{display:none}
.hp-ls-how{margin:0 auto 10px;max-width:760px;text-align:center;font-size:.9rem;color:var(--text-dim)}
.hp-ls-board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(56px,14vw,200px);max-width:860px;margin:0 auto}
.hp-ls-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px}
.hp-ls-colh{margin:0 0 2px;text-align:center;font-size:.66rem;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--teal,#2f7f86)}
.hp-ls-item{position:relative;display:flex;align-items:center;gap:6px;min-height:34px;padding:5px 30px 5px 12px;
  border:2px solid var(--navy,#12324d);border-radius:6px;background:#f7fbf8;color:var(--navy,#12324d);
  font-family:var(--serif);font-weight:700;font-size:.86rem;line-height:1.2;text-align:left;cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;box-shadow:2px 2px 0 rgba(18,50,77,.18);
  transition:background .14s,color .14s,border-color .14s}
.hp-ls-item small{font-family:var(--sans);font-weight:600;font-size:.72rem;color:var(--text-dimmer)}
.hp-ls-item[data-side="s"]{padding:5px 12px 5px 30px}
/* the peg each line is tied to */
.hp-ls-item::before{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:#f7fbf8;border:2px solid var(--navy,#12324d)}
.hp-ls-item[data-side="m"]::before{right:-8px}
.hp-ls-item[data-side="s"]::before{left:-8px}
.hp-ls-item.is-linked::before{background:var(--navy,#12324d)}
.hp-ls-item:hover{border-color:var(--chartred,#b33a2e)}
.hp-ls-item[aria-pressed="true"]{background:var(--navy,#12324d);color:#f7fbf8;box-shadow:0 0 0 3px var(--buoy,#e8b92f)}
.hp-ls-item[aria-pressed="true"] small{color:#cfe0e8}
.hp-ls-item:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
.hp-ls-mark{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.95rem;font-weight:800}
.hp-ls-item[data-side="m"] .hp-ls-mark{right:10px}
.hp-ls-item[data-side="s"] .hp-ls-mark{left:10px}
.hp-ls-item.is-ok{border-color:#2c6b3c;background:#e3f1e6}
.hp-ls-item.is-ok .hp-ls-mark{color:#2c6b3c}
.hp-ls-item.is-alt{border-color:#9a6f00;background:#fbf2d6}
.hp-ls-item.is-alt .hp-ls-mark{color:#7a5800}
.hp-ls-item.is-no{border-color:var(--chartred,#b33a2e);background:#f8e4e1}
.hp-ls-item.is-no .hp-ls-mark{color:#a3281b}
.hp-ls-item[aria-pressed="true"].is-ok,.hp-ls-item[aria-pressed="true"].is-alt,.hp-ls-item[aria-pressed="true"].is-no{color:var(--navy,#12324d)}
.hp-ls-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hp-ls-line{stroke:var(--navy,#12324d);stroke-width:3;stroke-linecap:round}
.hp-ls-line.is-ok{stroke:#2c6b3c}
.hp-ls-line.is-alt{stroke:#b58a12;stroke-dasharray:9 5}
.hp-ls-line.is-no{stroke:var(--chartred,#b33a2e);stroke-dasharray:2 6}
.hp-ls-line.is-drag{stroke:var(--chartred,#b33a2e);stroke-dasharray:6 6;opacity:.8}
.hp-ls-board.is-dragging{cursor:crosshair}
.hp-ls-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
  max-width:860px;margin:14px auto 0}
.hp-ls-fb{flex:1 1 320px;min-height:2.8em;margin:0;font-size:.88rem;line-height:1.4;color:var(--text);font-weight:600}
.hp-ls-btns{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:620px){
  .hp-ls-key{columns:1}
  .hp-ls-board{column-gap:40px}
  .hp-ls-item{font-size:.76rem;min-height:40px;padding:5px 24px 5px 8px}
  .hp-ls-item[data-side="s"]{padding:5px 8px 5px 24px}
  .hp-ls-item small{display:none}
  .hp-ls-mark{font-size:.8rem}
  .hp-ls-item[data-side="m"] .hp-ls-mark{right:11px}
  .hp-ls-item[data-side="s"] .hp-ls-mark{left:11px}
  .hp-ls-drag{display:none}
  .hp-ls-fb{flex-basis:100%}
}
@media (hover:none){.hp-ls-drag{display:none}}
@media (prefers-reduced-motion:reduce){.hp-ls-item{transition:none}}

/* ============================================ TOTALLY MEDIEVAL: two cards */
.hp-tm-pair{position:relative;aspect-ratio:1.2;max-height:min(400px,calc(100vh - 250px));width:100%;margin-inline:auto}
.hp-tm-pair img{position:absolute;width:74%;height:auto;max-height:none;object-fit:contain;
  border-radius:var(--radius);border:2px solid var(--navy,#12324d);box-shadow:var(--shadow);transition:transform .2s}
.hp-tm-pair img:first-child{left:0;top:0;transform:rotate(-3deg)}
.hp-tm-pair img:last-child{right:0;bottom:0;transform:rotate(2.5deg)}
.hp-tm-pair img:hover{z-index:2;transform:rotate(0) scale(1.02)}
@media (prefers-reduced-motion:reduce){.hp-tm-pair img{transition:none}}

/* ================================================ HOW ARE YOUR MATH SKILLS? */
.hp-ms-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hp-ms-list[hidden],.hp-ms[hidden]{display:none}
.hp-ms-list a{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;font-size:.84rem;color:var(--navy,#12324d)}
.hp-ms-list img{width:100%;height:150px;object-fit:contain}
@media (max-width:840px){.hp-ms-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hp-ms-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px}
.hp-ms-tab{padding:7px 14px;border-radius:999px;border:2px solid var(--navy,#12324d);background:#f7fbf8;
  color:var(--navy,#12324d);font-family:var(--sans);font-size:.84rem;font-weight:700;cursor:pointer;transition:background .14s,color .14s}
.hp-ms-tab:hover{background:#e6f1f4}
.hp-ms-tab[aria-selected="true"]{background:var(--navy,#12324d);color:#f7fbf8;box-shadow:inset 0 -4px 0 var(--buoy,#e8b92f)}
.hp-ms-tab:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
.hp-ms-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);
  align-items:center;max-width:980px;margin:0 auto}
.hp-ms-card{display:flex;justify-content:center;align-items:center;min-height:0}
.hp-ms-fig{position:relative;display:inline-block;margin:0;max-width:100%;line-height:0}
.hp-ms-fig img{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(200px,calc(100vh - 420px),330px);
  border-radius:8px;border:2px solid var(--navy,#12324d);box-shadow:var(--shadow)}
/* covers the answer printed in the card's bottom corner until it is solved */
.hp-ms-mask{position:absolute;left:2px;right:2px;bottom:2px;height:11%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#3c2c19,#22170b);color:#f3e2bf;border-radius:0 0 6px 6px;
  font:italic 700 clamp(.72rem,1.1vw,.9rem)/1 Georgia,serif;letter-spacing:.5px;transition:opacity .3s}
.hp-ms-fig.is-solved .hp-ms-mask{opacity:0}
/* practice problems: the cards' parchment colours, plainly labelled */
.hp-ms-practice{position:relative;display:grid;place-items:center;width:min(100%,440px);aspect-ratio:900/651;
  max-height:clamp(200px,calc(100vh - 420px),330px);border-radius:8px;border:10px solid #3b2d1d;
  background:radial-gradient(ellipse at 38% 32%,#dcb67e 0%,#c1935a 42%,#8e6335 82%,#6f4a26 100%);
  box-shadow:inset 0 0 36px rgba(50,28,8,.65),var(--shadow);color:#1d1712}
.hp-ms-tag{position:absolute;top:8px;left:10px;padding:2px 9px;border-radius:999px;background:rgba(18,50,77,.85);
  color:#f7fbf8;font:800 .64rem/1.5 var(--sans);letter-spacing:1.2px;text-transform:uppercase}
.hp-ms-expr{padding:0 12px;font:italic 700 clamp(1.8rem,4vw,3rem)/1.1 Georgia,"Times New Roman",serif;text-align:center;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2em;white-space:pre}
.hp-fr{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:.8em;vertical-align:middle}
.hp-fr > span:first-child{border-bottom:.09em solid currentColor;padding:0 .12em .04em}
.hp-fr > span:last-child{padding-top:.04em}
.hp-ms-play{min-width:0}
.hp-ms-q{margin:0 0 10px;font-family:var(--sans);font-weight:700;color:var(--navy,#12324d);font-size:1rem;line-height:1.4}
.hp-ms-form label{display:block;font-size:.74rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal,#2f7f86);margin-bottom:4px}
.hp-ms-row{display:flex;gap:8px}
.hp-ms-row input{flex:1;min-width:0;padding:10px 12px;font-size:1.05rem;border:2px solid var(--navy,#12324d);border-radius:4px;
  background:#fff;color:var(--text)}
.hp-ms-row input:focus{border-color:var(--chartred,#b33a2e);outline:3px solid rgba(232,185,47,.55);outline-offset:1px}
.hp-ms-fb{min-height:2.8em;margin:8px 0 6px;font-size:.9rem;line-height:1.4;font-weight:600;color:var(--text)}
.hp-ms-fb.is-ok{color:#2c6b3c}
.hp-ms-fb.is-no{color:#a3281b}
.hp-ms-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hp-ms-score{margin:0 0 0 auto;font-size:.86rem;color:var(--text-dim)}
.hp-ms-score b{color:var(--chartred,#b33a2e);font-variant-numeric:tabular-nums}
.hp-ms-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--line)}
@media (max-width:760px){
  .hp-ms-panel{grid-template-columns:1fr;gap:12px}
  .hp-ms-fig img,.hp-ms-practice{max-height:200px}
  .hp-ms-practice{width:auto;height:180px}
  .hp-ms-tab{padding:6px 10px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){.hp-ms-mask{transition:none}.hp-ms-tab{transition:none}}

/* =================================================== WHY GAMES HELP */
.hp-research{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.hp-study{padding:10px 14px;background:rgba(247,251,248,.92);border-left:5px solid var(--teal,#2f7f86);border-radius:4px}
.hp-research p{margin:0 0 4px;font-size:.9rem;line-height:1.5}
.hp-cite{font-size:.8rem;font-weight:700;color:var(--chartred,#b33a2e);text-decoration:underline;text-underline-offset:3px}
.hp-cite::after{content:" \2197"}
.hp-research-note{margin:10px 0 0;font-size:.88rem;color:var(--text-dim)}
#why-games .hp-awards img{height:clamp(44px,4.6vw,60px)}
#why-games .btn-row{margin-top:12px}

/* Adventure Box: the owner's wording, eight items in two columns */
.hp-ab-lead{margin:8px 0 0;font-weight:700;color:var(--navy,#12324d)}
#why-games{padding-block:clamp(24px,2.4vw,34px)}
@media (min-width:841px){#why-games .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

/* ===================================================================== HERO
   Owner, 2026-09-18: like the top of www.historicalconquest.com — its banner
   video under the header, the light headline box and the two buttons over the
   foot of it. Later the same day: "Make the video a little smaller with the
   image behind it" — the video now sits in a framed box about 84% of the
   width, centred on a full-width, blurred and darkened copy of its own poster.
   The frame keeps the video's 1280×626 shape, and its width is also capped by
   the screen's height so the whole hero never outgrows the screen below the
   64px header. */
.hero.hp-hero{display:block;place-items:normal;min-height:0;background:#0b1622;border-bottom:0}
.hp-hero-stage{--hp-pad:clamp(12px,2.2vw,30px);position:relative;overflow:hidden;isolation:isolate;
  padding:var(--hp-pad) 16px;background:#0b1622}
.hp-hero-stage::before{content:"";position:absolute;inset:-40px;z-index:-1;
  background:#0b1622 url("assets/site/video/history-banner-poster.webp") center/cover no-repeat;
  filter:blur(22px) brightness(.6) saturate(1.15);transform:scale(1.08)}
.hp-hero-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(11,22,34,0) 35%,rgba(11,22,34,.55) 100%)}
.hp-hero-v{position:relative;margin:0 auto;aspect-ratio:1280/626;
  width:min(84%,calc((100vh - 64px - 2 * var(--hp-pad)) * 2.0447));overflow:hidden;border-radius:12px;
  border:2px solid rgba(232,185,47,.75);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 6px rgba(11,22,34,.45);
  background:#0b1622 url("assets/site/video/history-banner-poster.webp") center/cover no-repeat}
.hp-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hp-hero-v::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(8,14,22,0),rgba(8,14,22,.55) 60%,rgba(8,14,22,.78))}
.hp-hero-over{position:absolute;left:0;right:0;bottom:clamp(10px,2vw,24px);z-index:2;padding:0 16px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.1vw,12px);text-align:center}
.hp-hero-over .btn-row{margin:0}
.hp-hero-box{display:inline-block;max-width:100%;margin:0;padding:6px clamp(16px,3vw,32px) 8px;background:rgba(226,226,226,.86);
  border:1px solid rgba(70,70,70,.75);border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-family:"Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",Georgia,serif;font-weight:400;
  color:#1e1e1e;line-height:1.12;font-size:clamp(1.2rem,2.8vw,2.3rem)}
/* the controls (owner, third pass): ONE sound button — the yellow one — and
   the Pause / Play button beside it in the same yellow pill, top left. No
   pulse on either. */
.hp-hero-ctl{position:absolute;top:10px;left:10px;z-index:3;display:flex;align-items:center;gap:8px}
.hp-hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 18px;border-radius:999px;border:2px solid #fff;background:var(--buoy,#e8b92f);color:#12324d;
  font:800 .95rem/1.1 var(--sans);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.hp-hero-btn[hidden]{display:none}
.hp-hero-btn:hover{background:#fff}
.hp-hero-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #12324d}
.hp-hero-toggle-i{letter-spacing:-1px}
/* phones: the frame fills the width, and the box and buttons sit just below the video */
@media (max-width:620px){
  .hp-hero-stage{--hp-pad:10px;padding:10px}
  .hp-hero-v{width:100%;overflow:visible;aspect-ratio:auto;background:none;border-radius:10px}
  .hp-hero-video{position:relative;height:auto;aspect-ratio:1280/626;border-radius:8px 8px 0 0}
  .hp-hero-v::after{display:none}
  .hp-hero-over{position:static;padding:12px 12px 14px;background:#0b1622;border-radius:0 0 8px 8px}
  .hp-hero-ctl{top:6px;left:6px;gap:6px}
  .hp-hero-btn{padding:6px 12px;font-size:.8rem}
}

/* =================================================== WHY GAMES HELP: tabs
   Owner, later on 2026-09-18: "Research #1" … "Research #4" above the
   studies. Without JavaScript the studies stack. On phones the four tabs sit
   two by two, so the bar never runs off the screen. */
.hp-rtabs{display:inline-flex;gap:0;margin:0;justify-self:start;border:2px solid var(--navy,#12324d);border-radius:6px;overflow:hidden;
  background:#f7fbf8;box-shadow:2px 2px 0 var(--navy,#12324d)}
.hp-rtab{position:relative;padding:8px 18px;border:0;border-left:2px solid var(--navy,#12324d);background:none;cursor:pointer;
  font-family:var(--serif);font-weight:700;font-size:.9rem;color:var(--navy,#12324d);transition:background .14s,color .14s}
.hp-rtab:first-child{border-left:0}
.hp-rtab:hover{background:#e6f1f4}
.hp-rtab[aria-selected="true"]{background:var(--navy,#12324d);color:#f7fbf8;box-shadow:inset 0 -4px 0 var(--buoy,#e8b92f)}
.hp-rtab:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:-5px}
.hp-research.is-js .hp-study[hidden]{display:none}
.hp-research.is-js .hp-study:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
@media (max-width:620px){
  .hp-rtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch}
  .hp-rtab{padding:8px 10px}
  .hp-rtab:nth-child(odd){border-left:0}
  .hp-rtab:nth-child(n+3){border-top:2px solid var(--navy,#12324d)}
}
@media (prefers-reduced-motion:reduce){.hp-rtab{transition:none}}

/* Adventure Box: the two starred extras, and their footnote */
.hp-ab-bonus{font-weight:700;color:var(--navy,#12324d)}
.hp-ab-star{color:var(--chartred,#b33a2e);font-weight:800;margin-left:1px}
.hp-ab-note{margin:2px 0 0;font-size:.8rem;color:var(--text-dim)}

/* ====================================================== GAMIFYING EDUCATION */
.hp-brands{padding-block:clamp(22px,2.6vw,34px)}
.hp-brands-h{text-align:center;font-size:clamp(1.45rem,2.5vw,2.05rem);color:var(--navy,#12324d);margin:0 0 clamp(12px,1.6vw,18px)}
.hp-brand-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.hp-brand{display:block;border-radius:6px;overflow:hidden;border:2px solid var(--navy,#12324d);background:#000;
  box-shadow:3px 3px 0 var(--navy,#12324d);transition:transform .14s,box-shadow .14s}
.hp-brand img{display:block;width:100%;height:auto}
.hp-brand:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--chartred,#b33a2e)}
.hp-brand:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:3px}
@media (max-width:840px){.hp-brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.hp-brand{transition:none}}

/* ============================================ QUICK PATHS: image + 2×2 card */
.hp-panel-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(16px,2.4vw,28px);align-items:stretch}
.hp-panel-img{margin:0;border-radius:6px;overflow:hidden;border:2px solid var(--navy,#12324d);background:#e3efea;min-height:0}
.hp-panel-img img{display:block;width:100%;height:100%;max-height:340px;object-fit:cover}
.hp-panel-main{min-width:0;display:flex;flex-direction:column}
.hp-panel-main .hp-panel-lede{margin-bottom:12px}
.hp-actions-2x2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hp-actions-2x2 .hp-action{padding:11px 12px 11px 50px}
.hp-actions-2x2 .hp-action::before{left:12px;top:12px;width:28px;height:28px}
.hp-actions-2x2 .hp-action span{font-size:.82rem;line-height:1.45}
.hp-panel-main .hp-panel-more{margin-top:10px}
@media (max-width:840px){
  .hp-panel-grid{grid-template-columns:1fr;gap:12px}
  .hp-panel-img img{max-height:170px;height:auto;aspect-ratio:16/7}
  .hp-actions-2x2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hp-panel{padding:14px}
  .hp-panel-img img{max-height:130px}
  .hp-actions-2x2{gap:8px}
  .hp-actions-2x2 .hp-action{padding:38px 9px 9px}
  .hp-actions-2x2 .hp-action::before{left:9px;top:8px;width:24px;height:24px;font-size:.76rem}
  .hp-actions-2x2 .hp-action b{font-size:.86rem}
  .hp-actions-2x2 .hp-action span{font-size:.74rem;line-height:1.35}
}
#who{padding-block:clamp(24px,2.4vw,34px)}

/* ======================================== HISTORICAL CONQUEST ON YOUTUBE
   Owner, 2026-09-18 (second pass): "make a card that holds all this" — ONE
   card (.hp-yt): on the left a LOCKED viewer (16:9, sized by the screen height
   so the section fits one screen) with our own control bar under it; on the
   right the ten videos as compact rows (small thumbnail + title) in a list
   that scrolls inside its own column, exactly as tall as the viewer column.
   Phones: the viewer, then the list (a short vertical scroller).
   The lock (home.js): the iframe takes no pointer input and is inert, a
   shield lies over it, and our cover / end panel hide YouTube's pause and end
   screens. The thumbnails are our own files; nothing loads from YouTube until
   Play. "Visit our channel" sits outside the card. */
#youtube .wrap{max-width:1360px}
.hp-yt{display:grid;gap:clamp(12px,1.6vw,20px);align-items:stretch;
  grid-template-columns:minmax(0,min(66%,calc((100vh - 410px) * 16 / 9))) minmax(0,1fr);
  background:#f7fbf8;border:3px double var(--navy,#12324d);border-radius:8px;box-shadow:var(--shadow);
  padding:clamp(10px,1.3vw,16px)}
.hp-yt-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.hp-yt-viewer{position:relative;aspect-ratio:16/9;background:#0b1620;border:2px solid var(--navy,#12324d);
  border-radius:6px;overflow:hidden}
.hp-yt-viewer > [hidden],.hp-yt-ctl[hidden]{display:none}
.hp-yt-stage{position:absolute;inset:0;overflow:hidden}
.hp-yt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.hp-yt-shield{position:absolute;inset:0;z-index:2;background:transparent;cursor:pointer}
.hp-yt-play{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;display:block;
  padding:0;margin:0;background:#0b1620;cursor:pointer;color:#fff;font:inherit;text-align:left}
.hp-yt-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .15s,transform .25s}
.hp-yt-play:hover img,.hp-yt-play:focus-visible img{opacity:1;transform:scale(1.015)}
.hp-yt-play:focus-visible{outline:4px solid var(--buoy,#e8b92f);outline-offset:-4px}
.hp-yt-big{position:absolute;left:50%;top:50%;width:clamp(58px,8vw,84px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--chartred,#b33a2e);border:3px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.45);transition:background .15s}
.hp-yt-big::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:14px 0 14px 23px;border-color:transparent transparent transparent #fff}
.hp-yt-play:hover .hp-yt-big,.hp-yt-play:focus-visible .hp-yt-big{background:var(--navy,#12324d)}
.hp-yt-play.is-loading .hp-yt-big{animation:hpYtPulse 1s ease-in-out infinite}
@keyframes hpYtPulse{50%{opacity:.45}}
.hp-yt-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;font-family:var(--serif);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.25;background:linear-gradient(transparent,rgba(5,14,22,.88));text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* the end panel: ours, over YouTube's end screen */
.hp-yt-end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:16px;background:#050e16;color:#fff;text-align:center}
.hp-yt-end-h{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(.95rem,1.4vw,1.15rem)}
.hp-yt-end-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hp-yt-end .btn{margin:0}
/* a Short: the player pillarboxes the upright picture on black; the cover shows its thumbnail whole */
.hp-yt-viewer.is-short,.hp-yt-viewer.is-short .hp-yt-play{background:#000}
.hp-yt-viewer.is-short .hp-yt-play img{object-fit:contain}
/* our own controls, under the picture */
.hp-yt-ctl{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:var(--navy,#12324d)}
.hp-yt-ctl button{flex:0 0 auto;width:32px;height:32px;border-radius:6px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:.9rem;line-height:1;display:grid;place-items:center;padding:0}
.hp-yt-ctl button:hover:not(:disabled){background:rgba(255,255,255,.2)}
.hp-yt-ctl :disabled{opacity:.45;cursor:default}
.hp-yt-ctl button:focus-visible,.hp-yt-seek:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
.hp-yt-seek{flex:1;min-width:60px;accent-color:var(--buoy,#e8b92f)}
.hp-yt-time{flex:0 0 auto;font-size:.76rem;color:#fff;font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.hp-yt-main:fullscreen{background:#000;justify-content:center;padding:2vh 2vw}
.hp-yt-main:fullscreen .hp-yt-viewer{width:auto;height:calc(100% - 60px);margin:0 auto;border:0}
.hp-yt-now{margin:0 0 6px;min-width:0;font-weight:700;color:var(--navy,#12324d);line-height:1.3;font-size:.9rem;
  padding:0 0 6px;border-bottom:1px solid rgba(18,50,77,.2)}
.hp-yt-label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
/* the list: compact rows, scrolling inside the right-hand column */
.hp-yt-side{position:relative;min-width:0;min-height:260px}
.hp-yt-sidein{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.hp-yt-list{list-style:none;margin:0;padding:2px 6px 2px 2px;flex:1 1 0;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}
.hp-yt-list li{min-width:0}
.hp-yt-tile{display:grid;grid-template-columns:clamp(88px,8vw,112px) minmax(0,1fr);align-items:center;gap:10px;width:100%;
  padding:5px;margin:0;background:none;border:0;border-left:3px solid transparent;border-radius:5px;
  font:inherit;text-align:left;color:var(--text);cursor:pointer;text-decoration:none}
.hp-yt-tile:hover{background:rgba(18,50,77,.07)}
.hp-yt-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#0b1620;
  border:1px solid var(--navy,#12324d)}
.hp-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hp-yt-badge{position:absolute;right:3px;top:3px;padding:0 5px;border-radius:999px;background:var(--chartred,#b33a2e);
  color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hp-yt-name{font-size:.8rem;font-weight:600;line-height:1.3;color:var(--navy,#12324d);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-yt-tile.is-on{background:rgba(232,185,47,.22);border-left-color:var(--chartred,#b33a2e)}
.hp-yt-tile.is-on .hp-yt-name{color:var(--chartred,#b33a2e)}
.hp-yt-tile:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:1px}
.hp-yt-foot{margin:12px 0 0;text-align:center}
.hp-yt-foot .btn{margin:0}
@media (max-width:840px){
  .hp-yt{grid-template-columns:1fr}
  .hp-yt-side{min-height:0}
  .hp-yt-sidein{position:static}
  .hp-yt-list{flex:none;max-height:190px}
}
@media (prefers-reduced-motion:reduce){.hp-yt-play img,.hp-yt-big{transition:none}.hp-yt-play:hover img{transform:none}.hp-yt-play.is-loading .hp-yt-big{animation:none}}