.home-main{padding:0;max-width:none}
.home-body{overflow-wrap:anywhere}
.home-page{--hero-band:color-mix(in srgb,var(--action) 10%,var(--surface));--band:var(--soft)}
.home-page .public-chapter{padding-block:56px}
.home-page .chapter-intro{background:var(--hero-band);padding-block:48px}
.home-page .chapter-band{background:var(--band)}
.home-page .chapter-inner{width:calc(100% - 64px);max-width:1440px;margin-inline:auto;min-width:0}
.home-page .chapter-inner>h2{margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem)}
.home-page .chapter-inner>h2+p{max-width:72ch;margin:0 0 24px}

.home-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:48px}
.home-introduction{min-width:0}
.home-introduction h1{max-width:14ch;font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1.1;letter-spacing:-.015em;margin:0}
.play-word{color:var(--action)}
.home-introduction>p{max-width:44ch;font-size:1.125rem;margin:16px 0 24px}
.home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.home-actions .button{flex:0 1 auto}
.home-play{min-height:56px;padding-inline:28px;font-size:1.0625rem}
.button-secondary{border:1px solid var(--line);background:var(--surface);color:var(--text)}
.home-account{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;margin:12px 0 0;color:var(--muted)}
.home-account span{display:flex;flex-wrap:wrap;gap:0 16px}
.home-account a,.home-more a{display:inline-flex;align-items:center;min-height:44px}
.home-more{display:flex;flex-wrap:wrap;gap:0 24px;margin:16px 0 0}

.home-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;width:100%;max-width:600px;margin-inline:auto}
.home-board{min-width:0;font-weight:650;font-size:.875rem;text-align:center}
.home-board>svg{display:block;width:100%;height:auto;margin-bottom:12px;border-radius:16px;box-shadow:0 4px 0 var(--line)}
.home-board-binary>svg{transform:rotate(-6deg)}
.home-board-light{margin-top:-20px}
.home-board-light>svg{transform:rotate(2deg)}
.home-board-blooms>svg{transform:rotate(5deg)}

/* Shared card and art plate: a family colour field holding a small board or diagram. */
.home-mode,.home-family,.home-lesson{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);text-decoration:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.home-plate{position:relative;display:grid;place-items:center;flex:none;height:140px;padding:16px;background:var(--accent);color:var(--ink);overflow:hidden}
.home-plate::before,.home-plate::after{content:"";position:absolute;border-radius:50%;background:#fff;opacity:.28}
.home-plate::before{width:120px;height:120px;right:-36px;top:-48px}
.home-plate::after{width:56px;height:56px;left:-18px;bottom:-22px;border-radius:14px;transform:rotate(18deg)}
.home-plate>*{position:relative;z-index:1}
.home-plate svg:where(:not(svg svg)),.home-plate img{display:block;max-width:100%;max-height:108px;width:auto;height:auto;transition:transform .25s cubic-bezier(.2,.8,.2,1)}

.home-mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-mode h3{margin:16px 20px 8px;font-size:1.25rem}
.home-mode p{flex:1;margin:0 20px 4px;color:var(--muted)}
.home-mode a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 20px 8px;font-weight:700}
.home-mode .home-plate svg:where(:not(svg svg)){width:100%;max-width:220px}
.daily-art{display:grid;grid-template-columns:repeat(3,44px);gap:8px}
.daily-tile{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--accent);color:var(--ink)}
.daily-tile:nth-child(odd){transform:rotate(-5deg)}
.daily-tile:nth-child(even){transform:rotate(4deg) translateY(4px)}
.daily-tile svg{width:30px;height:30px}

/* Each section has its own card shape: modes stack art over text, families sit art beside text,
   and walkthroughs feature the first solve beside two compact ones. */
.home-family-grid,.home-lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.home-family,.home-lesson{flex-direction:row}
.home-family .home-plate,.home-lesson .home-plate{width:184px;height:auto;min-height:168px}
.home-lesson-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.home-lesson:first-child{grid-row:span 3;flex-direction:column}
.home-lesson:first-child .home-plate{flex:1;width:auto;min-height:280px}
.home-lesson:first-child .lesson-plate svg:where(:not(svg svg)){width:220px;height:220px;max-height:none}
.home-lesson:first-child .card-name{font-size:1.5rem}
.family-plate{place-items:end}
.family-plate img{width:112px;height:112px;max-height:none;border-radius:12px;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 22%,transparent);transform:rotate(-4deg)}
.home-page .family-symbol{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
.home-page .family-symbol svg{width:30px;height:30px;max-height:none}
.lesson-plate svg:where(:not(svg svg)){width:120px;height:120px;max-height:none;border-radius:16px;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 22%,transparent);transform:rotate(3deg)}
.lesson-plate .lesson-route-board{background:var(--surface)}
.family-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;padding:16px 20px 12px}
.home-page .family-copy .card-name{font-size:1.25rem;transition:color .18s ease}
.family-copy .card-summary{flex:1;color:var(--muted);font-size:1rem}
.card-more{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:4px;color:var(--action);font-weight:700}
.card-more span{transition:transform .18s ease}

:is(.home-mode,.home-family,.home-lesson):hover{transform:translateY(-3px);box-shadow:0 8px 20px color-mix(in srgb,var(--text) 10%,transparent)}
:is(.home-family,.home-lesson):active{transform:scale(.99)}
:is(.home-family,.home-lesson):hover .card-name{color:var(--action)}
:is(.home-family,.home-lesson):hover .card-more span{transform:translateX(4px)}
.home-family:hover .family-plate img{transform:rotate(2deg) scale(1.05)}
.home-lesson:hover .lesson-plate svg:where(:not(svg svg)){transform:rotate(-2deg) scale(1.05)}
.home-mode:hover .home-plate>*{transform:scale(1.04)}
.home-plate>*{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* Decorative brand pieces sit at the hero's edges on wide screens. */
.home-page .chapter-intro{position:relative;overflow:hidden}
.home-pieces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.chapter-intro .chapter-inner{position:relative}
:root[data-theme=dark] .home-pieces{opacity:.75}

.home-page .link-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}

@media(max-width:1199px){.home-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){
  .home-hero{grid-template-columns:1fr;gap:32px}
  .home-art{max-width:440px}
  .home-pieces{display:none}
  .home-family-grid,.home-lesson-grid{grid-template-columns:1fr}
  .home-lesson:first-child{grid-row:auto;flex-direction:row}
  .home-lesson:first-child .home-plate{flex:none;width:184px;min-height:168px}
  .home-lesson:first-child .lesson-plate svg:where(:not(svg svg)){width:120px;height:120px}
  .home-lesson:first-child .card-name{font-size:1.25rem}
}
@media(max-width:767px){
  .home-page .public-chapter{padding-block:32px}
  .home-page .chapter-intro{padding-block:24px 32px}
  .home-page .chapter-inner{width:calc(100% - 32px)}
  .home-introduction h1{font-size:2.5rem}
  .home-actions .button{flex:1 1 auto}
  .home-mode-grid,.home-family-grid,.home-lesson-grid{grid-template-columns:1fr;gap:12px}
  .home-mode .home-plate{height:112px}
  .home-mode .home-plate svg:where(:not(svg svg)),.daily-art{max-height:84px}
  .daily-art{grid-template-columns:repeat(6,40px);gap:6px}
  .daily-tile{width:40px;height:40px}
  .home-family .home-plate,.home-lesson .home-plate,.home-lesson:first-child .home-plate{width:112px;min-height:0;padding:12px}
  .family-plate{place-items:center}
  .home-family .home-plate img,.home-lesson .home-plate svg:where(:not(svg svg)),.home-lesson:first-child .lesson-plate svg:where(:not(svg svg)){width:80px;height:80px}
  .home-page .family-symbol{top:auto;bottom:8px;left:8px;width:36px;height:36px;border-radius:10px}
  .home-page .family-symbol svg{width:24px;height:24px}
  .family-copy{padding:12px 16px 8px}
  .home-art{gap:12px}
}
@media(max-width:680px){.home-page .link-grid{grid-template-columns:1fr}}
:root[data-motion=reduced] :is(.home-mode,.home-family,.home-lesson,.home-plate>*,.home-plate img,.home-plate svg:where(:not(svg svg)),.card-more span,.family-copy .card-name){transition:none}
:root[data-motion=reduced] :is(.home-mode,.home-family,.home-lesson):is(:hover,:active){transform:none}
:root[data-motion=reduced] :is(.home-mode,.home-family,.home-lesson):hover :is(.home-plate>*,.card-more span){transform:none}
:root[data-motion=reduced] .home-family:hover .family-plate img{transform:rotate(-4deg)}
:root[data-motion=reduced] .home-lesson:hover .lesson-plate svg:where(:not(svg svg)){transform:rotate(3deg)}
@media(prefers-reduced-motion:reduce){
  :root:not([data-motion=full]) :is(.home-mode,.home-family,.home-lesson,.home-plate>*,.home-plate img,.home-plate svg:where(:not(svg svg)),.card-more span,.family-copy .card-name){transition:none}
  :root:not([data-motion=full]) :is(.home-mode,.home-family,.home-lesson):is(:hover,:active){transform:none}
  :root:not([data-motion=full]) :is(.home-mode,.home-family,.home-lesson):hover :is(.home-plate>*,.card-more span){transform:none}
  :root:not([data-motion=full]) .home-family:hover .family-plate img{transform:rotate(-4deg)}
  :root:not([data-motion=full]) .home-lesson:hover .lesson-plate svg:where(:not(svg svg)){transform:rotate(3deg)}
}