/* 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. */
@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}
}