/* Home page redesign — warm-paper aesthetic from the designer handoff
   (share/from designer/homepage), ported into the composer. Loaded ONLY on
   the home page (linked via head.render's extra_stylesheets), so its :root
   palette overrides site.css locally without touching any other page.

   Settings baked per the port brief: blue accent, comfortable density,
   romaji shown. The blue uses the site's canonical brand pair
   (#20507e light / #6ea7d8 dark) instead of the designer's brick red, and is
   defined per-theme so dark mode reads correctly. */

/* Palette mirrors site.css's effective (REDESIGN B) tokens so the homepage
   reads identically to every other page — same surfaces, text, lines, accent,
   and header button fills — in both themes. Only --tile/--romaji-display are
   home-specific. Keep these values in sync with site.css's second :root block. */
:root{
  --page:#ede7da;--card:#faf6ee;--inset:#fcfaf5;
  --ink:#232026;--muted:#5d5852;--faint:#938b80;
  --line:#e3dac8;--line2:#d7cdb6;
  --accent:#20507e;--accent-soft:rgba(32,80,126,.08);--accent-line:rgba(32,80,126,.24);
  --shadow:0 8px 30px rgba(40,50,70,.06),0 1px 0 rgba(255,255,255,.5) inset;
  --tile:52px;--romaji-display:flex;
}
html.dark{
  --page:#171821;--card:#1f2230;--inset:#262a3a;
  --ink:#e8eaf2;--muted:#a8b0c0;--faint:#7c8499;
  --line:#2b2f3e;--line2:#3a3f52;
  --accent:#6ea7d8;--accent-soft:rgba(110,167,216,.10);--accent-line:rgba(110,167,216,.28);
  --shadow:0 8px 30px rgba(0,0,0,.40),0 1px 0 rgba(255,255,255,.04) inset;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page)}
::selection{background:var(--accent-soft)}
.hp a{color:inherit;text-decoration:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* The mobile hamburger is handled by the shared header (.site-header .nav /
   .nav-toggle in site.css + js/site-ui.js); only the homepage's bento/hero
   grids need to collapse here. */
/* Bento promo rail — the 300x250 sits beside the "Keep going" cards, which
   squeeze to ~248px columns to make room. Stack it under them before the
   columns get too tight (same spirit as the 1024px stack on the library
   pages), and drop the sticky once it's no longer a side column. */
@media(max-width:1040px){
  [data-bentorail]{grid-template-columns:1fr!important}
  [data-bentorail]>[data-promorail]{
    position:static!important;display:flex;justify-content:center;
    min-width:0;
    /* The inline -23px lifts the promo card flush with the bento cards beside
       it; stacked there is nothing to align to, and it would eat the row gap. */
    margin-top:0!important;
  }
}

@media(max-width:880px){
  /* Stacked hero: badge + headline, then the canvas, then the lead copy /
     CTAs / stats underneath it. Drops the desktop grid areas and the
     right-alignment that only makes sense beside the canvas. */
  [data-hero]{
    grid-template-columns:1fr!important;
    grid-template-areas:none!important;
    row-gap:34px;
  }
  [data-hero-lead],[data-hero-head],[data-hero-card],[data-hero-body]{grid-area:auto!important}
  /* Headline first, then the canvas, then the lead copy / badge / CTAs /
     stats — so the paragraph stays below the canvas on phones even though
     it sits above the headline on desktop. */
  [data-hero-head]{order:1}
  [data-hero-card]{order:2}
  [data-hero-lead]{order:3}
  [data-hero-body]{order:4}
  [data-hero-lead] p{margin:0!important;font-size:19px!important;max-width:none!important}
  [data-hero-copy]{text-align:left!important}
  [data-hero-copy] [data-cta],[data-hero-copy] [data-stats]{justify-content:flex-start!important}
  [data-hero-copy] p{margin-left:0!important}
  /* The badge leads the post-canvas block on mobile, so it doesn't need
     the desktop gap that separates it from the headline above. */
  [data-hero-body] span[data-i18n="home.hero_badge"]{margin-top:0!important}
  [data-hero-lead]{margin-top:6px}
  [data-two]{grid-template-columns:1fr!important}
  [data-bento]{grid-template-columns:1fr!important}
  /* Cards carry inline grid-column:span 4 / span 2 for the desktop 6-col
     bento. Once the grid is a single column those spans reference implicit
     tracks, which collapses the 1/3 (span 2) cards to a thin sliver. Force
     every card to the full single column. */
  [data-bento]>div{grid-column:1/-1!important}
}
@media(max-width:560px){
  [data-wrap]{padding-left:18px!important;padding-right:18px!important}
  /* Hero CTAs: keep the two buttons side by side (equal-width columns) instead
     of stacking. Text wraps inside a button on very narrow screens rather than
     forcing a new row; the grid keeps both buttons the same height. */
  [data-cta]{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
  [data-cta] a{justify-content:center;text-align:center;padding:13px 10px!important;font-size:14px!important}
  /* Stat tallies: stay on one row (no wrap) with a tighter gap + smaller type
     so all four fit down to ~320px. */
  [data-stats]{gap:15px!important;flex-wrap:nowrap!important}
  [data-stats]>div>div:first-child{font-size:22px!important}
  [data-stats]>div>div:last-child{font-size:10px!important}
}

/* Hero chip strip scrolls horizontally when the row is tighter than the
   row of kana (phones). Play and the Canvas Options gear stay pinned
   either side; only the chips move. Scrollbar hidden — the strip is
   short and an always-visible bar reads as a glitch inside the card. */
#hp-chips::-webkit-scrollbar { display: none; }