/* Astra Imagination Studio: "Bold Gradient" design (option C), brand tokens
   from Production DNA v3.2.0. Reference mockups: docs/design-options/.
   Rules kept here: text is Plum Ink on pastels, white only on the four
   secondaries (Berry, Story Sky, Plum Lavender, Sea Mint) or darker, no pure
   black anywhere, colour is never the only signal. */

@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  /* primary pastels */
  --petal-pink: #F6B8CB; --baby-blue: #B9DDF4; --lavender-mist: #D2C4F4; --mint-cream: #BDEBD8;
  /* secondaries (white text allowed) */
  --berry: #C2386F; --story-sky: #2A6BA8; --plum-lavender: #6E4DB8; --sea-mint: #19735F;
  /* accents */
  --sparkle-gold: #FFD166; --peach-glow: #FFB38A; --starlight: #F7F2FF;
  /* neutrals + backgrounds */
  --plum-ink: #35264D; --soft-plum: #65547A; --mist-gray: #CFC8DA; --warm-sand: #E3C9A0;
  --cloud-cream: #FFF8F2; --blush-paper: #FFF1F5; --dream-lavender: #F4EFFF; --night-story: #241E45;

  --hero-grad: linear-gradient(120deg, #4B2F9A 0%, var(--plum-lavender) 35%, #8E3F9E 62%, var(--berry) 100%);
  /* semantic (day) */
  --page: #F1EAFB;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --text: var(--plum-ink);
  --muted: var(--soft-plum);
  --border: #EEE7FA;
  --link: var(--plum-lavender);
  --eyebrow: var(--berry);
  --shadow-sm: 0 2px 8px rgba(53, 38, 77, .06);
  --shadow: 0 14px 36px rgba(53, 38, 77, .12);
  --shadow-lg: 0 24px 60px rgba(110, 77, 184, .25);
  --radius: 26px;
}

/* Night Story theme for the page body; the header stays white (it carries the name). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #16122C; --surface: #241E45; --surface-2: #1C1739; --text: var(--starlight); --muted: #CFC4EA;
    --border: rgba(210, 196, 244, .16); --link: var(--sparkle-gold); --eyebrow: var(--sparkle-gold);
    --shadow: 0 14px 36px rgba(5, 3, 18, .5); --shadow-lg: 0 24px 60px rgba(5, 3, 18, .6);
  }
}
:root[data-theme="dark"] {
  --page: #16122C; --surface: #241E45; --surface-2: #1C1739; --text: var(--starlight); --muted: #CFC4EA;
  --border: rgba(210, 196, 244, .16); --link: var(--sparkle-gold); --eyebrow: var(--sparkle-gold);
  --shadow: 0 14px 36px rgba(5, 3, 18, .5); --shadow-lg: 0 24px 60px rgba(5, 3, 18, .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  font: 400 17px/1.65 "Nunito", "Segoe UI", system-ui, sans-serif;
  /* pre-faded brand watermark pinned to the left edge, half off-page */
  background: url("../img/logo-watermark.webp") left -230px center / 540px no-repeat fixed, var(--page);
}
h1, h2, h3 { font-family: "Fredoka", "Nunito", system-ui, sans-serif; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; background: #FFFFFF; color: var(--plum-ink); padding: 8px 14px; border-radius: 10px; z-index: 20; }
:focus-visible { outline: 3px solid var(--sparkle-gold); outline-offset: 3px; border-radius: 8px; }
/* Minimum body height: short pages (My account, sign-in, admin) still fill the
   screen, so the footer sits below the fold instead of squashing the content. */
main { flex: 1; min-height: max(640px, calc(100vh - 130px)); }
@media (max-width: 960px) { main { min-height: calc(100vh - 94px); } }

/* ---- header: white, sticky, big multicolour name like the plush logo ---- */
.site-head { position: sticky; top: 0; z-index: 10; background: #FFFFFF; color: var(--plum-ink);
  box-shadow: 0 1px 0 rgba(110, 77, 184, .15), 0 12px 30px rgba(53, 38, 77, .12); }
.site-head::after { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--petal-pink), var(--sparkle-gold), var(--mint-cream), var(--baby-blue), var(--lavender-mist)); }
.head-bar { display: flex; align-items: center; gap: 24px; min-height: 124px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mascot { width: 96px; height: auto; filter: drop-shadow(0 8px 14px rgba(110, 77, 184, .25)); transition: transform .35s ease; }
.brand:hover .brand-mascot { transform: rotate(-8deg) scale(1.06); }
.lockup { display: flex; flex-direction: column; line-height: .92; white-space: nowrap; }
.lockup-astra { font: 700 3.2rem "Fredoka", sans-serif; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(53, 38, 77, .12); }
.lockup-astra span:nth-child(1) { color: #F2B705; } .lockup-astra span:nth-child(2) { color: #E8637F; }
.lockup-astra span:nth-child(3) { color: #3E8FD8; } .lockup-astra span:nth-child(4) { color: #2FA57E; }
.lockup-astra span:nth-child(5) { color: #8A6AD6; }
.lockup-rest { font: 700 1.5rem "Fredoka", sans-serif; color: #3B3F9E; }
.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav a { color: var(--plum-ink); text-decoration: none; font-weight: 800; font-size: 1.15rem; padding: 12px 20px; border-radius: 999px; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--dream-lavender); color: var(--plum-lavender); }
.nav a.nav-cta { background: var(--plum-lavender); color: #FFFFFF; margin-left: 6px; box-shadow: 0 10px 24px rgba(110, 77, 184, .3); }
.nav a.nav-cta:hover { filter: brightness(1.08); }
.theme-toggle, .nav-toggle { background: var(--dream-lavender); color: var(--plum-ink); border: 1px solid rgba(110, 77, 184, .2); border-radius: 999px; width: 46px; height: 46px; cursor: pointer; font-size: 1.2rem; display: inline-grid; place-items: center; margin-left: 6px; }
.nav-toggle { display: none; margin-left: auto; }
@media (max-width: 1180px) {
  .brand-mascot { width: 76px; } .lockup-astra { font-size: 2.5rem; } .lockup-rest { font-size: 1.15rem; }
  .nav a { padding: 10px 14px; font-size: 1.04rem; }
}
@media (max-width: 960px) {
  .head-bar { min-height: 88px; flex-wrap: wrap; }
  .brand-mascot { width: 60px; } .lockup-astra { font-size: 2.1rem; } .lockup-rest { font-size: 1rem; }
  .nav-toggle { display: inline-grid; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 0 0 16px; }
  .nav.open { display: flex; }
  .nav a.nav-cta { margin: 6px 0 0; text-align: center; }
  .theme-toggle { align-self: flex-start; margin: 6px 0 0; }
}

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 16px 30px; font: 800 1.05rem "Nunito", sans-serif; text-decoration: none; cursor: pointer;
  background: var(--plum-lavender); color: #FFFFFF; box-shadow: 0 14px 30px rgba(110, 77, 184, .3); transition: transform .2s ease, filter .2s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn.gold { background: var(--sparkle-gold); color: var(--plum-ink); box-shadow: 0 14px 30px rgba(20, 14, 45, .3); }
.btn.ghost { background: transparent; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, .65); box-shadow: none; }
.btn.soft { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn svg { width: 20px; height: 20px; }

/* ---- hero + inner page heads: the bold gradient block with rounded bottom ---- */
.hero, .page-head { position: relative; overflow: hidden; color: #FFFFFF; background: var(--hero-grad); }
.hero::before, .page-head::before { content: ""; position: absolute; right: -120px; top: -80px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 209, 102, .5), transparent 65%); pointer-events: none; }
.hero::after, .page-head::after { content: ""; position: absolute; left: -100px; bottom: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 221, 244, .4), transparent 65%); pointer-events: none; }
.hero { padding: 64px 0 120px; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-art img { width: 100%; max-width: 480px; margin: 0 auto; filter: drop-shadow(0 26px 40px rgba(20, 14, 45, .45)); }
@media (prefers-reduced-motion: no-preference) { .hero-art img { animation: float 6s ease-in-out infinite; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.page-head { padding: 56px 0 64px; }
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: .25em; }
.hero .lead, .page-head .lead { color: #FFFFFF; opacity: .95; }
.page-head .lead { margin: 0; }
.site-name { margin: 16px 0 0; }
.tagline { font: 600 clamp(1.35rem, 2.4vw, 1.9rem) "Fredoka", sans-serif; color: var(--sparkle-gold); margin: -4px 0 14px; }
.eyebrow { display: inline-block; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--eyebrow); margin-bottom: 10px; }
.hero .eyebrow, .page-head .eyebrow { color: #FFFFFF; background: rgba(255, 255, 255, .18); padding: 7px 14px; border-radius: 999px; }
.lead { font-size: 1.22rem; color: var(--muted); max-width: 36em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.actions.center { justify-content: center; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-weight: 800; font-size: .95rem; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 20px; height: 20px; color: var(--sparkle-gold); flex: none; }
@media (max-width: 860px) { .hero { padding: 36px 0 96px; } .hero .wrap { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-art img { max-width: 280px; } }

/* ---- stats strip overlapping the hero ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-lg); margin-top: -60px; position: relative; z-index: 3; overflow: hidden; }
.stat { padding: 26px 22px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat b { display: block; font: 700 2.4rem "Fredoka", sans-serif; line-height: 1.1; }
.stat:nth-child(1) b { color: var(--berry); } .stat:nth-child(2) b { color: var(--story-sky); }
.stat:nth-child(3) b { color: var(--plum-lavender); } .stat:nth-child(4) b { color: var(--sea-mint); }
:root[data-theme="dark"] .stat b { color: var(--sparkle-gold) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stat b { color: var(--sparkle-gold) !important; } }
.stat span { color: var(--muted); font-weight: 700; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--border); } }

/* ---- sections ---- */
section.band { padding: 84px 0; }
section.band.tight { padding: 40px 0 84px; }
section.band.alt { background: var(--surface-2); }
.section-head { max-width: 760px; margin-bottom: 34px; }
.section-head.center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Jewel cards: deep secondary colours with white text (DNA-allowed), gold/peach with ink */
.card { position: relative; border-radius: var(--radius); padding: 26px; color: #FFFFFF; box-shadow: 0 18px 40px rgba(53, 38, 77, .22); overflow: hidden; isolation: isolate; }
.card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .15); z-index: -1; }
.card h3 { margin-bottom: .3em; font-size: 1.5rem; }
.card .kind { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin: 0 0 6px; }
.card.tone-pink { background: linear-gradient(145deg, #D2447D, var(--berry)); }
.card.tone-blue { background: linear-gradient(145deg, #3A7FC0, var(--story-sky)); }
.card.tone-lavender { background: linear-gradient(145deg, #8263CC, var(--plum-lavender)); }
.card.tone-mint { background: linear-gradient(145deg, #238A72, var(--sea-mint)); }
.card.tone-gold { background: linear-gradient(145deg, #FFE08A, var(--sparkle-gold)); color: var(--plum-ink); }
.card.tone-peach { background: linear-gradient(145deg, #FFC7A6, var(--peach-glow)); color: var(--plum-ink); }
.icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .85); display: grid; place-items: center; margin-bottom: 16px; }
.icon svg { width: 28px; height: 28px; color: var(--plum-lavender); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.panel h3 { display: flex; align-items: center; gap: 10px; }
.pillar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); border-top: 6px solid var(--plum-lavender); }
.pillar:nth-child(6n+1) { border-top-color: var(--berry); } .pillar:nth-child(6n+2) { border-top-color: var(--story-sky); }
.pillar:nth-child(6n+3) { border-top-color: var(--sea-mint); } .pillar:nth-child(6n+4) { border-top-color: var(--sparkle-gold); }
.pillar:nth-child(6n+5) { border-top-color: var(--peach-glow); } .pillar:nth-child(6n+6) { border-top-color: var(--plum-lavender); }
.pillar p { color: var(--muted); margin: 0; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.chips.center { justify-content: center; }
.chip { color: var(--plum-ink); border-radius: 999px; padding: 11px 20px; font-weight: 800; box-shadow: var(--shadow-sm); }
.chip::before { content: "\2605  "; }  /* star glyph: meaning never rides on colour alone */
.chip.tone-pink { background: var(--petal-pink); } .chip.tone-blue { background: var(--baby-blue); } .chip.tone-mint { background: var(--mint-cream); }
.chip.tone-lavender { background: var(--lavender-mist); } .chip.tone-gold { background: var(--sparkle-gold); } .chip.tone-peach { background: var(--peach-glow); }
.badge { display: inline-block; background: rgba(255, 255, 255, .88); color: var(--plum-ink); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 800; }

/* dark ink call-to-action with berry and plum glows */
.cta-band { border-radius: 36px; padding: 64px 40px; text-align: center; background: var(--plum-ink); color: #FFFFFF; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 20% 0%, rgba(194, 56, 111, .6), transparent 60%), radial-gradient(600px 300px at 90% 100%, rgba(110, 77, 184, .7), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band p { color: #FFFFFF; opacity: .95; font-size: 1.15rem; max-width: 40em; margin-inline: auto; }
.cta-band .btn { background: var(--sparkle-gold); color: var(--plum-ink); }

/* ---- sign-in + admin ---- */
.auth-box { max-width: 480px; margin: 64px auto; text-align: center; }
.auth-box .logo { width: 170px; margin: 0 auto 10px; filter: drop-shadow(0 12px 24px rgba(110, 77, 184, .25)); }
#gsi-button { display: flex; justify-content: center; min-height: 44px; margin: 22px 0 10px; }
.notice { border-radius: 14px; padding: 12px 16px; font-weight: 700; }
.notice.warn { background: var(--peach-glow); color: var(--plum-ink); }
.notice.error { background: var(--petal-pink); color: var(--plum-ink); }
.small { font-size: .9rem; color: var(--muted); }
.doc-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }
.doc { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.doc .meta { font-size: .88rem; font-weight: 700; opacity: .85; }
.doc .open { margin-top: auto; font-weight: 800; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kv dt { font-weight: 800; color: var(--muted); }
.kv dd { margin: 0; }

/* ---- footer: the hero gradient again, rounded top ---- */
.site-foot { margin-top: 24px; background: var(--hero-grad); color: #FFFFFF; padding: 60px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { opacity: .92; margin: 14px 0 0; max-width: 28em; }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; border-radius: 22px; padding: 8px 18px 8px 8px; text-decoration: none; box-shadow: 0 12px 28px rgba(20, 14, 45, .25); }
.foot-logo img { width: 58px; }
.foot-logo .lockup-astra { font-size: 2rem; } .foot-logo .lockup-rest { font-size: 1rem; }
.site-foot h4 { font: 800 .8rem "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sparkle-gold); margin: 6px 0 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot ul a { color: #FFFFFF; text-decoration: none; font-weight: 700; }
.site-foot ul a:hover { text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); opacity: .88; font-size: .92rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: no-preference) { .card, .pillar, .doc { transition: transform .25s ease, box-shadow .25s ease; } .card:hover, .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }

/* utilities (no inline style attributes: the CSP blocks them) */
.mt { margin-top: 18px; }
.mt-lg { margin-top: 40px; }
.h-sm { font-size: 2.1rem; }
.center { text-align: center; }