/* Storytime Compass — parents' resource (Ask Board magnet #1, live on romansgame.com)
   Warm, grown-up storybook: parchment, deep forest, gold. Type + colour carry it. */

:root{
  --paper:#FAF3E1;
  --paper-deep:#F1E4C6;
  --card:#FFFDF6;
  --ink:#2E2A21;
  --ink-soft:#5C5546;
  --forest:#1E3A2A;
  --forest-2:#2A4A34;
  --gold:#C8912A;
  --gold-soft:#E4B95B;
  --cream:#FBF5E4;
  --cream-dim:#E9DFC6;
  --line:#DCCFA9;
  --radius:16px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-name,.footer-name{font-family:var(--serif);line-height:1.18;margin:0}
p{margin:0 0 1rem}
a{color:var(--forest)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;
}
.kicker{
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .8rem;
}
.kicker-light{color:var(--gold-soft)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem 1.1rem;
  background:rgba(250,243,225,.96);
  border-bottom:2px solid var(--gold);
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--forest)}
.brand-name{font-size:1.22rem;font-weight:700;letter-spacing:.01em}
.rose{width:34px;height:34px;flex:none}
.rose-small{width:30px;height:30px}
.rose-ring{fill:none;stroke:var(--gold);stroke-width:1.6}
.rose-n{fill:var(--gold)}
.rose-s,.rose-w,.rose-e{fill:var(--forest)}
.rose-dot{fill:var(--gold)}
.topnav{display:flex;gap:1.05rem}
.topnav a{
  font-size:.86rem;font-weight:600;letter-spacing:.04em;text-decoration:none;
  color:var(--ink-soft);padding:.3rem .1rem;border-bottom:2px solid transparent;
}
.topnav a:hover{color:var(--forest);border-bottom-color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--forest) 0%,var(--forest-2) 78%);
  color:var(--cream);
  padding:3.2rem 1.35rem 4.6rem;
  text-align:left;
}
.hero-sky{position:absolute;top:0;left:0;width:100%;height:150px;pointer-events:none}
.hero-sky circle{fill:var(--cream);opacity:.75}
.hero-sky .moon{fill:var(--gold-soft);opacity:.9}
.hero > *:not(.hero-sky):not(.hills){position:relative;max-width:42rem;margin-left:auto;margin-right:auto}
.hero h1{font-size:clamp(2.05rem,8.6vw,3.15rem);font-weight:700;margin-bottom:1.1rem}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .lede{font-size:1.13rem;color:var(--cream);max-width:36rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem auto 1rem}
.btn{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:1rem;
  text-decoration:none;border-radius:999px;padding:.85rem 1.5rem;cursor:pointer;border:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-main{background:var(--gold);color:#23190A;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(0,0,0,.32)}
.btn-quiet{
  background:transparent;color:var(--cream);
  box-shadow:inset 0 0 0 2px rgba(251,245,228,.55);
}
.btn-quiet:hover{box-shadow:inset 0 0 0 2px var(--gold-soft)}
.hero-note{font-size:.92rem;color:var(--cream-dim);margin:0 auto}
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:44px;display:block}
.hill-back{fill:var(--paper-deep)}
.hill-front{fill:var(--paper)}

/* ---------- the check ---------- */
.check{padding:2.6rem 1.1rem .6rem}
.check-card{
  max-width:44rem;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-top:6px solid var(--forest);
  border-radius:var(--radius);padding:1.9rem 1.4rem 1.5rem;
  box-shadow:0 14px 34px rgba(62,50,20,.10);
}
.check-card h2{font-size:1.85rem;color:var(--forest);margin-bottom:.6rem}
.check-intro{color:var(--ink-soft)}
.checklist{list-style:none;margin:1.3rem 0;padding:0}
.checklist li{border-top:1px dashed var(--line)}
.checklist li:first-child{border-top:0}
.checklist label{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:.95rem .3rem;cursor:pointer;border-radius:8px;
}
.checklist label:hover{background:#FBF6E7}
.checklist input[type="checkbox"]{
  flex:none;width:27px;height:27px;margin-top:.18rem;
  accent-color:var(--forest);cursor:pointer;
}
.checklist strong{color:var(--forest)}
.check-foot{
  background:var(--paper);border-left:4px solid var(--gold);
  padding:.85rem 1rem;border-radius:0 10px 10px 0;margin:0;font-size:.98rem;
}

/* ---------- guides ---------- */
.guides{max-width:44rem;margin:0 auto;padding:2.8rem 1.35rem .8rem}
.guides-title{font-size:1.85rem;color:var(--forest);margin-bottom:1.4rem}
.guide{margin-bottom:2.4rem}
.guide-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.guide-num{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--gold);color:#23190A;
  font-family:var(--serif);font-weight:700;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(200,145,42,.35);
}
.guide h3{font-size:1.32rem;color:var(--forest)}
.guide > p{color:var(--ink-soft)}
.tips{list-style:none;margin:0;padding:0}
.tips li{position:relative;padding:.42rem 0 .42rem 1.5rem}
.tips li::before{
  content:"";position:absolute;left:.18rem;top:.95rem;
  width:8px;height:8px;background:var(--gold);
  transform:rotate(45deg);border-radius:1.5px;
}
.tips strong{color:var(--forest)}

.example{
  background:var(--paper-deep);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.4rem;margin-bottom:1rem;
}
.example h3{font-size:1.28rem;color:var(--forest);margin-bottom:.6rem}
.example p:last-child{margin-bottom:0}

/* ---------- the ask ---------- */
.ask{
  position:relative;margin-top:2.6rem;
  background:linear-gradient(190deg,var(--forest-2) 0%,var(--forest) 30%);
  color:var(--cream);
}
.ask .hills-flip{top:-1px;bottom:auto}
.ask .hill-back{fill:var(--paper-deep)}
.ask .hill-front{fill:var(--paper)}
.hills-flip{position:absolute;left:0;right:0;width:100%;height:44px;display:block}
.ask-inner{max-width:44rem;margin:0 auto;padding:3.6rem 1.35rem 3rem;position:relative}
.ask h2{font-size:1.9rem;margin-bottom:.8rem}
.ask-inner > p{color:var(--cream)}
.ask-qs{
  margin:1.2rem 0;padding-left:1.4rem;
  font-family:var(--serif);font-size:1.16rem;line-height:1.5;
}
.ask-qs li{margin-bottom:.55rem;padding-left:.3rem}
.ask-qs li::marker{color:var(--gold-soft);font-weight:700}
.terms{
  background:rgba(200,145,42,.16);
  border:1px solid rgba(228,185,91,.55);border-radius:12px;
  padding:1rem 1.15rem;font-size:1rem;line-height:1.6;color:var(--cream);
  margin:1.4rem 0 1.5rem;
}
.ask-form{display:grid;gap:1.05rem}
.ask-form[hidden]{display:none}
.field{display:grid;gap:.4rem}
.field-label{font-weight:700;font-size:.98rem;color:var(--cream)}
.field-label em{font-weight:400;font-style:normal;color:var(--cream-dim);font-size:.88rem}
.field textarea,.field input{
  width:100%;font:inherit;color:var(--ink);
  background:var(--card);border:2px solid transparent;border-radius:10px;
  padding:.8rem .9rem;
}
.field textarea{resize:vertical;min-height:8.5rem}
.field textarea::placeholder,.field input::placeholder{color:#9A917C}
.form-note{font-size:.9rem;color:var(--cream-dim);margin:0}
.btn-send{justify-self:start;font-size:1.05rem;padding:.95rem 1.9rem}
.form-status{
  background:rgba(251,245,228,.12);border-left:4px solid var(--gold-soft);
  padding:.8rem 1rem;border-radius:0 10px 10px 0;margin:0;font-size:.97rem;
}

/* ---------- footer ---------- */
.footer{
  text-align:center;padding:2.6rem 1.35rem 3rem;color:var(--ink-soft);
  max-width:40rem;margin:0 auto;
}
.footer .rose{margin-bottom:.4rem}
.footer-name{font-size:1.25rem;color:var(--forest);margin-bottom:.5rem}
.footer p{font-size:.95rem}
.footer-fine{font-size:.85rem;color:#8A8168}

/* ---------- small screens: keep the top bar on one line ---------- */
@media (max-width:520px){
  .topbar{padding:.55rem .8rem;gap:.6rem}
  .brand{gap:.45rem}
  .brand-name{font-size:1.04rem}
  .rose{width:28px;height:28px}
  .topnav{gap:.68rem}
  .topnav a{font-size:.79rem;white-space:nowrap;padding:.25rem 0}
}

/* ---------- wider screens ---------- */
@media (min-width:640px){
  .hero{padding-top:4.2rem}
  .check-card{padding:2.4rem 2.4rem 1.9rem}
  .example{padding:2rem 2.2rem}
  .ask-inner{padding-top:4.2rem}
}

/* ---------- print: the checklist is made to be printed ---------- */
@media print{
  .topbar,.hero-cta,.ask-form .btn-send{display:none}
  body{background:#fff}
  .hero{background:#fff;color:#000;padding:1rem 0}
  .hero h1 em,.kicker{color:#000}
  .hero .lede,.hero-note{color:#222}
  .hills,.hero-sky{display:none}
  .ask{background:#fff;color:#000}
  .ask-inner > p,.field-label{color:#000}
  .terms{background:#fff;border-color:#999;color:#000}
}