/* Homepage refresh: a calm, polished learning-app look. Light warm gray page, white cards, navy text, restrained teal and gold from the artwork.
   Scoped to body.home-page (the signed-out front door), so the dashboards and every other page keep their own look. */
body.home-page{
  --hp-bg:#F1EEE9; --hp-card:#FFFFFF; --hp-cream:#FFFBF1; --hp-ink:#12274A; --hp-soft:#4B5E73; --hp-line:rgba(18,39,74,.10);
  --hp-teal:#177E89; --hp-teal-soft:#E3F2F3; --hp-gold:#E8A43D; --hp-gold-deep:#B97A12; --hp-r:14px;
  --hp-shadow:0 1px 2px rgba(18,39,74,.06), 0 6px 18px rgba(18,39,74,.07); --hp-shadow-up:0 2px 4px rgba(18,39,74,.08), 0 12px 26px rgba(18,39,74,.12);
  background:var(--hp-bg); }
body.home-page .main{ padding-top:12px; }
body.home-page .home{ max-width:1040px; gap:14px; color:var(--hp-ink); }
body.home-page .home .box{ background:var(--hp-card); border:1px solid var(--hp-line); border-radius:var(--hp-r); box-shadow:var(--hp-shadow); }

/* ---- the top artwork: a slim banner, the name still easy to read */
body.home-page .h-hero{ grid-template-columns:clamp(140px,22vw,250px) minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:clamp(96px,13vw,136px); background:#FDF8EE; }
body.home-page .h-hero img{ min-height:0; max-height:100%; }
body.home-page .h-hero .h-logo{ padding:4px 10px; object-fit:contain; background:#FDF8EE; }
body.home-page .h-hero .h-knight{ object-fit:cover; object-position:center 28%; }

/* ---- learning cards: big picture, small content-sized text area */
body.home-page .h-courses{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start; }
body.home-page .h-courses .h-card{ background:var(--hp-card); color:var(--hp-ink); border:1px solid var(--hp-line); border-radius:var(--hp-r); box-shadow:var(--hp-shadow); overflow:hidden; transition:transform .16s ease, box-shadow .16s ease; }
body.home-page .h-courses .h-card:hover,body.home-page .h-courses .h-card:focus-visible{ transform:translateY(-2px); box-shadow:var(--hp-shadow-up); }
body.home-page .h-courses .h-card:focus-visible{ outline:3px solid var(--hp-teal); outline-offset:2px; }
body.home-page .h-card .h-art{ aspect-ratio:286/202; width:100%; height:auto; object-fit:contain; background:#FDF8EE; border:0; border-bottom:3px solid var(--hp-gold); }
body.home-page .h-card .h-body{ padding:10px 14px 12px; gap:3px; flex:0 0 auto; }
body.home-page .h-card h2{ color:var(--hp-ink); font-size:clamp(17px,1.7vw,20px); line-height:1.15; }
body.home-page .h-card p{ color:var(--hp-soft); font-size:14.5px; line-height:1.35; margin-bottom:8px; }
body.home-page .h-go{ margin-top:0; position:relative; align-self:flex-start; min-width:0; min-height:34px; padding:0 18px; border-radius:999px; background:var(--hp-gold); color:var(--hp-ink); font-size:14.5px; font-weight:800; letter-spacing:.01em; }
body.home-page .h-go::after{ content:""; position:absolute; inset:-5px -8px; }
body.home-page .h-card:hover .h-go,body.home-page .h-card:focus-visible .h-go{ background:#F2B34F; }

/* tablets: two columns, each card a picture beside its text */
@media (max-width:1039px){
  body.home-page .h-courses{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.home-page .h-courses .h-card{ flex-direction:row; align-items:center; }
  body.home-page .h-card .h-art{ width:46%; flex:0 0 46%; aspect-ratio:286/202; height:auto; min-height:0; border-bottom:0; border-right:3px solid var(--hp-gold); align-self:flex-start; }
  body.home-page .h-card .h-body{ flex:1 1 auto; padding:12px 14px; justify-content:center; }
}
/* phones: compact rows */
@media (max-width:639px){
  body.home-page .h-courses{ grid-template-columns:1fr; gap:10px; }
  body.home-page .h-card .h-art{ width:40%; flex-basis:40%; }
  body.home-page .h-card .h-body{ padding:8px 12px; gap:2px; }
  body.home-page .h-card h2{ font-size:17px; }
  body.home-page .h-card p{ font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body.home-page .h-go{ margin-top:6px; min-height:32px; padding:0 16px; font-size:14px; }
  body.home-page .h-hero{ height:clamp(92px,26vw,108px); }
}

/* ---- Play for Fun */
body.home-page .h-play{ background:var(--hp-card); }
body.home-page .h-play .h-play-text{ padding:14px 20px; }
body.home-page .h-play h2{ font-size:clamp(22px,3vw,30px); color:var(--hp-ink); margin:2px 0 2px; }
body.home-page .h-play p{ color:var(--hp-soft); margin:0 0 10px; font-size:15.5px; }
body.home-page .ribbon{ background:var(--hp-teal); font-size:clamp(14px,1.6vw,17px); padding:3px 14px; border-radius:6px; transform:rotate(-1.5deg); margin-bottom:4px; }
body.home-page .h-play .btn{ min-height:38px; padding:0 18px; font-size:15.5px; background:var(--hp-gold); color:var(--hp-ink); border:0; border-radius:999px; }
body.home-page .h-play img{ min-height:0; max-height:170px; }
@media (max-width:640px){ body.home-page .h-play{ grid-template-columns:1fr; } body.home-page .h-play img{ max-height:120px; } }

/* ---- Words from the chess world: light panel, cream quote cards */
body.home-page .h-words{ background:var(--hp-card); border:1px solid var(--hp-line); padding:14px 16px 16px; }
body.home-page .h-words h2{ color:var(--hp-ink); text-align:left; font-size:clamp(17px,2vw,21px); margin:0 0 10px; }
body.home-page .h-words h2::after{ content:""; display:block; width:38px; height:3px; border-radius:3px; background:var(--hp-gold); margin-top:6px; }
body.home-page .h-words .quote-grid{ gap:12px; }
body.home-page .h-words .quote-card{ background:var(--hp-cream); border:1px solid var(--hp-line); border-radius:12px; padding:12px 14px 14px; box-shadow:none; }
body.home-page .h-words .qmark{ color:var(--hp-teal); }
body.home-page .h-words blockquote{ color:var(--hp-ink); font-size:16px; }
body.home-page .h-words .q-plain,body.home-page .h-words .q-by{ color:var(--hp-soft); }
body.home-page .h-words .q-plain{ border-top:1px solid var(--hp-line); }

/* ---- the two picture panels: light cards, small round controls */
body.home-page .h-media{ gap:14px; }
body.home-page .mp{ background:var(--hp-card); border:1px solid var(--hp-line); border-radius:var(--hp-r); box-shadow:var(--hp-shadow); padding:12px 14px 14px; }
body.home-page .mp-head h2{ color:var(--hp-ink); font-size:clamp(17px,2vw,21px); }
body.home-page .mp-ctl button{ min-width:40px; min-height:40px; border-radius:999px; background:var(--hp-card); color:var(--hp-ink); border:1px solid var(--hp-line); box-shadow:0 1px 2px rgba(18,39,74,.08); }
body.home-page .mp-ctl button:hover,body.home-page .mp-ctl button:focus-visible{ background:var(--hp-teal-soft); }
body.home-page .mp-stage,body.home-page .mp[data-panel=flyers] .mp-stage{ background:var(--hp-cream); border:1px solid var(--hp-line); border-radius:12px; height:clamp(220px,40vw,320px); }
body.home-page .mp[data-panel=flyers] .mp-stage{ height:clamp(300px,70vw,440px); }
body.home-page .mp-empty{ color:var(--hp-soft); }
body.home-page .mp-dots button{ border-color:var(--hp-soft); }
body.home-page .mp-dots button[aria-current=true]{ background:var(--hp-gold); border-color:var(--hp-gold-deep); }
body.home-page .mp-count{ color:var(--hp-soft); }
@media (max-width:900px){ body.home-page .h-media{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ body.home-page .h-courses .h-card{ transition:none; } body.home-page .h-courses .h-card:hover{ transform:none; } }