/* CHAM 3L — Ruby Edition / Design system for a science-fair education site */
:root {
  --ink: #321b25;
  --muted: #765e68;
  --blue: #c70d35;
  --blue2: #a50d32;
  --lightblue: #fff1f2;
  --peach: #e94460;
  --mint: #17816e;
  --bg: #fffaf9;
  --line: #f0d7dc;
  --white: #fff;
  --ruby: #c50932;
  --ruby-dark: #8f0e2b;
  --ruby-soft: #fff0f1;
  --coral: #ff6b72;
  --gold: #f7bc68;
  --shadow: 0 17px 48px rgba(123,17,43,.09);
}
html{scroll-padding-top:125px}
body{background:radial-gradient(circle at 9% 0%,#ffeaec 0,transparent 24%),radial-gradient(circle at 88% 36%,#fff2e6 0,transparent 30%),var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
h1,h2,h3{letter-spacing:-.04em}h1{font-weight:900}h2{font-weight:850}h3{font-weight:800}
a{color:var(--ruby)}
.site-header{background:linear-gradient(110deg,#aa092a 0%,#d30935 55%,#e2394d 110%);border-bottom:1px solid #9e0029;box-shadow:0 7px 30px rgba(128,6,39,.16)}
.header-inner{min-height:88px;gap:15px}
.brand{color:white}.brand .logo-mark{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.45);box-shadow:0 9px 21px #6d0b2b25;font-size:24px;padding:8px 11px;border-radius:16px}
.brand-copy strong{color:white}.brand-copy em{color:#ffda92}.brand-copy small{color:#ffe2e5;letter-spacing:.025em}
.nav-link{color:#fff9f9;font-size:12px;padding:10px 11px;border-radius:100px;font-weight:800}
.nav-link span{color:#ffc4cb;opacity:1}
.nav-link:hover{background:rgba(255,255,255,.15);color:white}
.nav-link.active{background:white;color:#b60930;box-shadow:0 4px 18px rgba(94,0,16,.12)}
.nav-link.active span{color:#b60930}
.reset-small{background:#ffffff14;color:white;border:1px solid #ffffff71;font-weight:800}
.reset-small:hover{background:#ffffff2a}
.btn{border-radius:100px;padding:13px 21px;box-shadow:none;letter-spacing:.005em}
.btn-primary{background:linear-gradient(110deg,#ae082d,#e21b43 90%);box-shadow:0 11px 27px rgba(184,12,52,.24);color:white}
.btn-outline{background:#fff;border:1.3px solid #e5b5c0;color:#aa1536}
.btn-danger{background:#fff2f3;color:#ad1534;border-color:#f2b6c1}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.035);box-shadow:0 12px 20px rgba(164,12,46,.15)}
.kicker{color:var(--ruby);font-size:12px;letter-spacing:.12em}
.eyebrow{background:#fff5f5;color:#9f1834;border:1px solid #f1cad1;padding:9px 14px}
.pulse{background:#cf103b;box-shadow:0 0 0 4px #fbd3db}
.hero{position:relative;isolation:isolate;overflow:visible;gap:34px;margin:28px 0 20px;padding:52px 43px;border-radius:33px;background:linear-gradient(130deg,#fff3f3 0%,#fff9f5 51%,#ffe9e8 100%);border:1px solid #f6dcdf;box-shadow:0 16px 54px rgba(170,39,61,.06)}
.hero::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;background:#ffcfda66;filter:blur(20px);border-radius:50%;top:-52px;right:33%;pointer-events:none}
.hero::after{content:"♡";position:absolute;z-index:-1;right:35%;bottom:16px;color:#e1234d13;font-size:150px;line-height:1;transform:rotate(-13deg)}
.hero h1{font-size:clamp(2.35rem,4.4vw,4.3rem);line-height:1.12;margin-top:24px;color:#3a1625}
.hero h1 span{color:#cb0b38;background:linear-gradient(110deg,#a90531,#f04754);background-clip:text;-webkit-text-fill-color:transparent}
.hero-copy>p{color:#6e4d5b;line-height:1.75;max-width:525px}
.hero-actions{margin-top:31px}
.trust-row{color:#874258;gap:10px 18px;margin-top:27px}
.trust-row span{display:inline-flex;gap:5px;align-items:center}
.hero-image-wrap{padding:11px;background:#fff;box-shadow:0 22px 42px #ab133a24;border:1px solid #ffdae0;border-radius:27px;transform:rotate(1.1deg)}
.hero-image{border-radius:17px;aspect-ratio:1.8;object-fit:cover;object-position:center}
.hero-sticker{background:linear-gradient(110deg,#fff,#ffe3dc);border:3px solid white;color:#834158;right:-7px;bottom:-19px;border-radius:16px;transform:rotate(-3deg)}
.hero-sticker b{color:#ba143c}
.stats-note{margin-top:28px;background:linear-gradient(110deg,#fff0f1,#fff8f2);border:1px solid #f3d2d9;box-shadow:0 6px 20px rgba(137,24,46,.03)}
.stats-note p,.safety-card p{color:#735562}
.note-icon,.safety-icon{background:#fde2e6;color:#bb123b;border-radius:15px}
.section-block{padding-top:64px}
.section-head h2{font-size:clamp(1.65rem,3vw,2.48rem);color:#401829}
.section-head p{color:var(--muted)}
.little-pill{background:#ffe7eb;color:#a51033;border:1px solid #f9c7d1}
.process-grid{gap:14px}
.process-card{border:1px solid #eed9dc;border-radius:21px;box-shadow:0 7px 26px rgba(141,32,57,.05);padding:20px 17px;background:linear-gradient(155deg,#fff,#fffaf9);transition:.18s ease}
.pc-num{background:#ffe4e9;color:#c01940;border-radius:100px}
.pc-icon{color:#ebb3be;font-size:31px}
.process-card strong{color:#401829;font-size:1.015rem}
.process-card:hover{border-color:#d96782;transform:translateY(-4px);box-shadow:0 14px 25px #aa234427}
.article-grid{gap:18px}
.article-card{border:1px solid #efdbde;border-radius:22px;box-shadow:0 8px 24px #a9334f0d;transition:.2s ease}
.article-card img{height:185px;border-bottom:1px solid #f7e5e7}
.article-card .article-text{padding:19px}
.article-tag{color:#c8103e;background:#ffecf0;padding:5px 11px;border-radius:100px;font-size:11px}
.article-card strong{color:#401829;font-size:1.1rem;margin-top:7px}
.article-card:hover{border-color:#d96782;transform:translateY(-4px);box-shadow:0 14px 25px #aa234427}
.safety-card{background:#fff1f1;border-color:#f6d3da}
.page-inner{padding-top:44px}
.page-heading{margin-bottom:28px}
.page-heading h1{font-size:clamp(2.45rem,5vw,4rem);color:#401829}
.page-heading p{color:#735c65}
.section-banner{box-shadow:0 16px 34px #77133212;border-radius:24px;border:2px solid #fff;outline:1px solid #f3d7dd;max-height:340px}
.privacy-strip{background:#fff4f4;border:1px solid #efd3d9;color:#91334e}
.step-track{border-color:#f0d4dc;box-shadow:0 7px 24px #9a2f4910}
.step-track span{background:#fff5f5;color:#97747d}
.step-track .on{background:#cc133e;color:white}
.topic-pick{box-shadow:0 8px 20px rgba(114,27,46,.06);background:white;border:2px solid #fff;transition:.2s ease}
.topic-pick[aria-pressed=true]{border-color:#c60e3b;background:#fff1f1;box-shadow:0 0 0 2px #f9dae0}
.topic-pick:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(144,25,53,.13)}
.topic-pick strong{color:#4c2432}
.form-title{background:linear-gradient(110deg,#fff0f0,#fff9f6);border:1px solid #f6dae0}
.form-title.parent{background:linear-gradient(110deg,#ffe9e9,#fff6f8)}
.form-title img{border:3px solid white;box-shadow:0 3px 14px rgba(94,26,39,.07)}
label>input:not([type=checkbox]),label>textarea,label>select,.zone textarea{color:#3c2530;border:1.5px solid #efd0d7;background:white}
input:focus,textarea:focus,select:focus{border-color:#d72b56;box-shadow:0 0 0 3px #f6bfca70}
.handoff{border-color:#f1d1db;background:radial-gradient(circle at 50% 0%,#ffedf0,white 64%)}
.map-hero-grid img,.map-media-strip figure,.agreement-media figure{border-color:#efd8df;box-shadow:0 8px 24px #8b284415}
.comparison-card{border:1px solid #f3d1d9!important;box-shadow:0 9px 25px #8f204215}
.comparison-card.child{background:#fff0f3!important}.comparison-card.parent{background:#fff9f1!important}
.zone{border:1px solid #f1dce0}
.zone-blue{background:#ffeff2}.zone-coral{background:#fff5e9}.zone-green{background:#fff0f4}
.role-exchange,.formula-layout{border:1px solid #f0d6de;box-shadow:0 7px 30px #a4324a0d}
.role-exchange>img{background:#fff1f1}
.chip{border:1px solid #eec6ce;color:#93324d}
.chip:hover{background:#ffeff2}
.chip[aria-pressed=true]{background:#c5103d;border-color:#c5103d;color:white}
.rewrite-feature>img{border:2px solid #fff;outline:1px solid #efd6db}
.rewrite-card{border-color:#f0d9de;box-shadow:0 7px 22px rgba(117,26,43,.045)}
.rewrite-card .card-role{background:#ffe9ed;color:#b11037}
.rewrite-card .before{color:#9b3146;background:#fff1f2;padding:9px 12px;border-radius:11px}
.rewrite-card .after{background:#eaf7f0;color:#1b6650}
.rewrite-card button{color:#bd133f;font-size:13px}
.sentence-out{background:#fff0f2;border-color:#d3244c;color:#782a43}
.agreement-form-wrap,.agreement-preview{border-color:#f1d7df;box-shadow:0 13px 35px #7e183b0d}
.agreement-preview{background:#fff0f3}
.preview-row{border-color:#f3dde1}
.preview-row b{color:#9d3854}
.consent-box{border-color:#eccbd2;background:#fff4f3}
.consent-box input{accent-color:#c70a36}
.consent-box small{color:#85576a}
.live-status{color:#a21238}
.footer{background:linear-gradient(125deg,#760b26,#af1037,#d21e46);border-top:4px solid #f1af83;box-shadow:0 -9px 30px #9e1b3c16}
.footer p{color:#ffdae2}.foot-privacy{color:#ffe6e6}
.article-dialog{border-color:#e5b9c3;box-shadow:0 35px 100px #52112f5e}
.article-dialog::backdrop{background:#39071c9c}
.dialog-head button{background:#fff0f3;color:#a60e36}
.article-dialog p{color:#66515b}
/* Additional visual storytelling without adding navigation items. */
.values-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:24px}
.value-card{position:relative;background:#fff;border:1px solid #f0d7df;border-radius:19px;padding:20px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 6px 20px #7c18380a}
.value-icon{flex:none;background:#fff0f2;color:#b9103e;width:45px;height:45px;border-radius:15px;display:grid;place-items:center;font-size:23px}
.value-card strong{display:block;font-size:15px;color:#4b1a2e}
.value-card p{font-size:12.5px;color:#775866;margin:4px 0 0}
.showcase-badge{display:inline-flex;gap:8px;align-items:center;margin:0 0 10px;background:white;border:1px solid #f5d7dd;border-radius:100px;padding:7px 12px;color:#9f1834;font-weight:850;font-size:11px;letter-spacing:.06em;box-shadow:0 6px 17px #6b103311}
.section-decoration{color:#dc1742;font-weight:700}
@media(max-width:1100px){.header-inner{gap:8px}.nav-link{font-size:11.5px;padding:9px 8px}.brand-copy strong{font-size:20px}.brand-copy small{font-size:9px}}
@media(max-width:900px){.site-header{background:linear-gradient(120deg,#b10930,#df2550)}.header-inner{padding-top:10px}.main-nav{border-top:1px solid #ffffff40;padding-bottom:8px}.hero{margin:18px 0 16px;padding:36px 28px;gap:25px}.values-bar{grid-template-columns:repeat(3,1fr)}.section-banner{max-height:290px}}
@media(max-width:650px){
 html{scroll-padding-top:125px}.shell{width:calc(100% - 28px)}
 .header-inner{padding-top:9px}.brand .logo-mark{font-size:19px;padding:6px 8px;border-radius:13px}
 .brand-copy strong{font-size:18px}.brand-copy small{font-size:9px;color:#ffe7ea}
 .reset-small{border-radius:100px;padding:5px 11px}
 .main-nav{border-color:#ffffff55;gap:2px;padding:9px 0 7px;overflow-x:visible}
 .nav-link{font-size:10px!important;font-weight:750;min-width:0!important;padding:7px 3px!important;line-height:1.25;display:grid;place-items:center;min-height:43px;border-radius:10px}
 .hero{margin:15px 0 8px;padding:29px 19px 31px;border-radius:24px;gap:30px}
 .hero h1{font-size:clamp(2.23rem,10vw,3.1rem);letter-spacing:-.05em;margin:17px 0}
 .hero-copy>p{font-size:14px;line-height:1.7}
 .eyebrow{font-size:10px;padding:8px 10px}
 .hero-image-wrap{transform:none;border-radius:19px}
 .hero-image{aspect-ratio:1.8}
 .hero-sticker{font-size:10px;right:-5px;bottom:-14px}
 .hero-actions{margin-top:19px}.hero-actions .btn{width:100%;flex:auto}
 .trust-row{font-size:11px;margin-top:18px}
 .values-bar{grid-template-columns:1fr;gap:9px;margin-top:15px}
 .value-card{padding:13px 14px;gap:12px}.value-icon{width:38px;height:38px;font-size:20px}
 .section-block{padding-top:44px}.section-head h2{font-size:1.8rem}
 .process-grid{gap:10px}.process-card{min-height:165px}
 .article-card img{height:195px}
 .page-heading h1{font-size:2.45rem}.page-heading p{font-size:14px}
 .topic-grid{gap:10px}.topic-pick img{height:130px}
 .section-banner{max-height:220px}
 .step-track span.on{box-shadow:0 4px 11px #8e23482a}
 .role-exchange>img{max-height:325px}
 .footer{padding:23px 0}
}
@media(prefers-reduced-motion:reduce){.hero-image-wrap{transform:none}}
@media print{.values-bar{display:none!important}}