/* Shared styles for lifeispeppery.com (home page and simple pages). */
:root{
  --bg:#FFF6EC; --fg:#1B2340; --muted:#4A5575; --card:#FFFFFF; --line:#1B2340;
  --accent:#E8432E; --accent-fg:#FFFFFF; --sun:#FFD23F; --teal:#A7EDE3; --grape:#D9CCFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12172B; --fg:#EDF1FF; --muted:#A9B3D6; --card:#1E2646; --line:#EDF1FF;
    --accent:#FF6B57; --accent-fg:#12172B; --sun:#FFD23F; --teal:#1F8F82; --grape:#5B45B5;
  }
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Fredoka","Trebuchet MS",system-ui,sans-serif; line-height:1.5; font-size:18px;
}
.wrap{ max-width:960px; margin:0 auto; padding:32px 16px 56px; }

.hero{ margin-bottom:36px; }
.kicker{ margin:0 0 6px; color:var(--accent); font-weight:600; letter-spacing:.04em; font-size:.9rem; }
h1{ margin:0; font-size:clamp(2.2rem,7vw,3.6rem); line-height:1.05; font-weight:600; text-wrap:balance; }
.lede{ margin:12px 0 0; color:var(--muted); font-size:clamp(1.05rem,2.4vw,1.25rem); max-width:36em; }
h2{ margin:0 0 16px; font-size:1.5rem; font-weight:600; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:24px; }
.guide{
  background:var(--card); border:3px solid var(--line); border-radius:20px;
  box-shadow:6px 6px 0 var(--line); padding:20px; display:flex; flex-direction:column; gap:10px;
}
.guide h3{ margin:0; font-size:1.5rem; line-height:1.15; font-weight:600; }
.guide p{ margin:0; color:var(--muted); }
.tagrow{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-size:.8rem; font-weight:600; padding:2px 10px; border:2px solid var(--line); border-radius:999px; }
.t-english{ background:var(--grape); }
.t-math{ background:var(--teal); }
.t-science{ background:var(--sun); color:#1B2340; }
.t-plain{ background:transparent; }

.links{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.btn{
  display:block; text-align:center; text-decoration:none; font-weight:500; color:var(--fg);
  background:var(--card); border:3px solid var(--line); border-radius:12px; padding:9px 14px;
  box-shadow:3px 3px 0 var(--line);
}
.btn.primary{ background:var(--accent); color:var(--accent-fg); font-weight:600; }
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--line); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }
.btn:focus-visible{ outline:4px solid var(--sun); outline-offset:3px; }

.foot{ margin-top:48px; color:var(--muted); font-size:.95rem; }
.foot p{ margin:0; }

@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } .btn:hover,.btn:active{ transform:none; } }