/*##############################################################################
# Script:        style.css    (Teach It Forward; project version in aiacolyte.py)
# Created by:    Matthew Boucher
# Start date:    2026-10-18
# Location:      <project root>/teachitforward/css/style.css   (published copy: <project root>/frontend/teachitforward/css/style.css)
# Description:   Responsive standalone styling.
# Reads:         nothing.
# Writes:        nothing.
##############################################################################*/
:root { color-scheme: light; --ink:#102d3b; --deep:#0b222e; --accent:#215c91; --light:#c2ddf2; --paper:#f6f9fc; --muted:#52636a; --line:#d3dedf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 1rem/1.75 "Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
img,svg { display:block; max-width:100%; }
button { font:inherit; cursor:pointer; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible,button:focus-visible,[tabindex="-1"]:focus-visible { outline:3px solid #c65422; outline-offset:5px; }
[hidden] { display:none!important; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.2; font-weight:650; }
.container { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:16px; background:white; color:var(--ink); padding:12px 20px; z-index:20; }
.skip-link:focus { top:16px; }
.announcement { background:var(--ink); color:#eff8f2; text-align:center; padding:7px 20px; font-size:.74rem; letter-spacing:.03em; }
.announcement span { color:var(--light); margin-right:7px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:105px; }
.site-header { border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; }
.brand-mark { width:40px; height:40px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.brand strong { display:block; font-size:1.3rem; letter-spacing:-.04em; line-height:1.3; }
.brand small { display:block; color:var(--muted); font-size:.58rem; letter-spacing:.13em; margin-top:5px; }
.primary-navigation { display:flex; gap:27px; align-items:center; font-size:.8rem; font-weight:600; }
.primary-navigation a { padding:12px 0; text-decoration:none; }
.primary-navigation a:hover { text-decoration:underline; }
.primary-navigation .nav-parent { color:var(--accent); border:1px solid #aabcc2; padding:10px 15px; }
.menu-toggle { background:transparent; border:1px solid #aabcc2; color:var(--ink); display:flex; gap:8px; align-items:center; padding:9px 12px; font-size:.78rem; }
.menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:54px; padding-block:70px 65px; }
.eyebrow { font-size:.66rem; letter-spacing:.15em; font-weight:700; line-height:1.6; }
.hero .eyebrow { color:var(--accent); margin-bottom:24px; }
h1 { font-size:clamp(2.8rem,4.6vw,4.4rem); letter-spacing:-.055em; line-height:1.06; }
em { font-family:Georgia,"Times New Roman",serif; font-weight:400; color:var(--accent); }
h1 em { display:block; margin-top:6px; }
.hero-description { margin-top:25px; color:var(--muted); max-width:440px; font-size:.98rem; line-height:1.9; }
.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-top:29px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:30px; padding:13px 20px; background:var(--accent); color:white; font-size:.8rem; font-weight:600; text-decoration:none; min-height:49px; }
.button:hover { background:var(--ink); }
.text-link { font-size:.8rem; font-weight:600; }
.launch-note { margin-top:30px; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.73rem; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.hero-art { min-width:0; }
.hero-art img { width:100%; height:auto; }
.hero-art figcaption { color:var(--muted); margin-top:12px; font: .56rem/1.7 ui-monospace,Consolas,monospace; letter-spacing:.03em; }
.purpose-band { border-block:1px solid var(--line); background:white; }
.purpose-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:22px; }
.purpose-inner p:first-child { color:var(--accent); font-size:.65rem; font-weight:700; letter-spacing:.12em; flex-shrink:0; }
.purpose-inner p:last-child { font-size:.92rem; }
.section { padding-block:85px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:43px; }
h2 { font-size:clamp(2rem,3.3vw,2.8rem); letter-spacing:-.045em; margin-top:17px; }
.section-heading > p { max-width:345px; color:var(--muted); font-size:.88rem; line-height:1.9; }
.focus-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.focus-grid article { border-top:2px solid var(--accent); padding-top:24px; }
.focus-number { color:var(--accent); font: .68rem/1.7 ui-monospace,Consolas,monospace; }
.focus-grid h3 { font-size:1.15rem; margin-top:19px; letter-spacing:-.02em; }
.focus-grid p { color:var(--muted); margin-top:14px; font-size:.87rem; line-height:1.9; }
.planned-note { margin-top:29px; font-size:.74rem; color:var(--muted); }
.audience-section { background:var(--ink); color:#f4f8f5; }
.audience-inner { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.audience-inner .eyebrow,.audience-inner em { color:var(--light); }
.audience-inner > div:last-child { color:#c3d3d5; font-size:.95rem; line-height:1.9; }
.audience-inner > div:last-child p + p { margin-top:20px; }
.contact-panel { margin-top:36px; border:1px solid var(--line); border-left:3px solid var(--accent); background:white; display:flex; justify-content:space-between; align-items:center; gap:32px; padding:30px 34px; }
.contact-panel h3 { font-size:1.35rem; letter-spacing:-.03em; }
.contact-panel p { color:var(--muted); font-size:.87rem; margin-top:10px; }
.contact-status { color:var(--accent); font-size:.77rem; font-weight:650; flex-shrink:0; display:flex; gap:9px; align-items:center; }
.site-footer { background:var(--deep); color:#eff8f2; padding-block:45px 25px; }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { font-size:1.4rem; font-weight:650; text-decoration:none; letter-spacing:-.03em; }
.footer-tagline { color:#c3d3d5; font-size:.8rem; margin-top:10px; }
.parent-link { color:var(--light); font-size:.8rem; }
.family-label { margin-top:32px; font-size:.62rem; font-weight:650; letter-spacing:.12em; color:#c3d3d5; }
.family-links { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:13px; font-size:.8rem; }
.family-links a { padding-block:5px; }
.family-links a[aria-current="page"] { color:var(--light); font-weight:650; }
.status-disclaimer { margin-top:28px; max-width:780px; font-size:.75rem; color:#c3d3d5; line-height:1.9; }
.footer-bottom { margin-top:25px; padding-top:20px; border-top:1px solid #3a525d; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:#c3d3d5; font-size:.67rem; }
@media(max-width:1100px) { .container { width:calc(100% - 64px); } .hero { gap:35px; } .primary-navigation { gap:19px; } }
@media(max-width:960px) {
  .container { width:calc(100% - 48px); }
  .header-inner { min-height:91px; flex-wrap:wrap; gap:20px; padding-block:18px; }
  .primary-navigation { width:100%; flex-wrap:wrap; gap:8px 25px; }
  .has-menu .primary-navigation { display:none; } .has-menu .primary-navigation.is-open { display:flex; }
  .hero { gap:27px; padding-block:45px; } h1 { font-size:clamp(2.6rem,5.8vw,3.6rem); }
  .hero .eyebrow { font-size:.58rem; } .hero-description { font-size:.9rem; }
  .section { padding-block:65px; } .section-heading { gap:30px; } .section-heading > p { max-width:290px; }
  .focus-grid { gap:25px; } .audience-inner { gap:45px; }
}
@media(max-width:600px) {
  .container { width:calc(100% - 40px); } .announcement { font-size:.66rem; }
  .header-inner { min-height:86px; gap:14px; } .brand { gap:8px; } .brand strong { font-size:.96rem; } .brand small { font-size:.48rem; } .brand-mark { width:32px; height:35px; }
  .menu-toggle { padding:9px; font-size:.73rem; gap:5px; } .menu-toggle svg { width:18px; }
  .primary-navigation { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; font-size:.76rem; } .has-menu .primary-navigation.is-open { display:grid; }
  .primary-navigation .nav-parent { padding-inline:9px; }
  .hero { grid-template-columns:1fr; gap:35px; padding-block:38px; } h1 { font-size:clamp(2.8rem,11.2vw,3.7rem); }
  .hero .eyebrow { font-size:.61rem; margin-bottom:20px; } .hero-description { font-size:.96rem; }
  .hero-actions { gap:22px; } .launch-note { margin-top:25px; font-size:.7rem; } .hero-art { max-width:430px; width:100%; margin-inline:auto; }
  .purpose-inner { align-items:start; flex-direction:column; gap:7px; padding-block:22px; }
  .section { padding-block:55px; } .section-heading { flex-direction:column; align-items:start; gap:22px; margin-bottom:30px; }
  .section-heading > p { max-width:none; } h2 { font-size:2.1rem; }
  .focus-grid { grid-template-columns:1fr; gap:28px; } .focus-grid h3 { margin-top:12px; }
  .audience-inner { grid-template-columns:1fr; gap:28px; }
  .contact-panel { flex-direction:column; align-items:start; gap:22px; padding:25px 23px; }
  .footer-top { flex-direction:column; align-items:start; gap:22px; } .family-links { flex-direction:column; gap:6px; }
  .footer-bottom { flex-direction:column; gap:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(forced-colors:active) { .status-dot { border:1px solid currentColor; } .button { border:1px solid ButtonText; } }
/*##############################################################################
# End of style.css
##############################################################################*/