@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#071d2d; --navy2:#0d3047; --ink:#17242d; --red:#d71920; --ash:#e9edef; --line:#cbd5da; --muted:#64747f; --white:#fff; --sand:#f4eee1; --yellow:#f2c84b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ash); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:50; padding:.7rem; color:#000; background:#fff; }
.topbar { min-height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); border-bottom:5px solid var(--red); }
.brand { display:flex; align-items:center; gap:.8rem; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border:2px solid #fff; border-radius:50%; font-family:"Archivo Black"; }
.brand span:last-child { display:grid; }
.brand small { opacity:.65; }
.section-name { text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.portal-link { justify-self:end; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
main { max-width:1700px; margin:auto; background:#fff; }
.hero { min-height:650px; display:grid; grid-template-columns:1.2fr .8fr; overflow:hidden; color:#fff; background:radial-gradient(circle at 72% 45%,rgba(37,103,139,.33),transparent 32%),linear-gradient(135deg,var(--navy),#03121d); }
.hero-copy { align-self:end; padding:clamp(3.5rem,7vw,7.5rem) clamp(1.25rem,5vw,6rem); }
.eyebrow { margin:0 0 .9rem; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2,h3 { font-family:"Archivo Black",sans-serif; }
h1 { margin:0; font-size:clamp(3.4rem,6.7vw,7.2rem); line-height:.85; letter-spacing:-.055em; }
h1 em { color:var(--red); font-style:normal; }
.hero-copy>p:not(.eyebrow) { max-width:48rem; margin:2rem 0; color:#becbd2; font-size:1.08rem; line-height:1.7; }
.hero-action { display:inline-flex; justify-content:space-between; gap:4rem; min-width:270px; padding:1rem 0; border-bottom:2px solid var(--red); font-weight:700; }
.earth-model { position:relative; min-height:650px; overflow:hidden; }
.earth { position:absolute; width:min(31vw,480px); aspect-ratio:1; left:50%; top:50%; translate:-45% -48%; border-radius:50%; overflow:hidden; background:#386d86; box-shadow:0 0 0 2px rgba(255,255,255,.4),0 0 80px rgba(63,157,203,.2); }
.earth span { position:absolute; display:block; border-radius:50%; }
.crust { inset:9%; background:conic-gradient(from 12deg,#829e72,#bda45f 14%,#64855c 27%,#d4b96c 42%,#789a64 55%,#c5a75e 73%,#6f9367 88%,#829e72); }
.mantle { inset:28%; background:radial-gradient(circle at 35% 30%,#f4b64b,#d45a28 65%,#8e261e); box-shadow:0 0 0 22px #c44426; }
.core { inset:43%; background:#f2d35f; box-shadow:0 0 35px #fff09b; }
.orbit { position:absolute; left:50%; top:50%; width:86%; aspect-ratio:1; translate:-50% -50%; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.orbit-two { width:64%; rotate:60deg; border-color:rgba(215,25,32,.55); }
.model-label { position:absolute; padding:.35rem .55rem; border-left:2px solid var(--red); color:#c7d2d8; background:rgba(7,29,45,.75); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.label-crust { right:8%; top:23%; }.label-mantle { left:8%; bottom:28%; }.label-core { right:14%; bottom:17%; }
.intro-strip { display:grid; grid-template-columns:repeat(4,1fr); color:#fff; background:var(--red); }
.intro-strip span { padding:1.3rem clamp(1rem,3vw,3rem); border-right:1px solid rgba(255,255,255,.35); font-size:.7rem; font-weight:800; letter-spacing:.11em; }
.resource-section,.glossary-section { padding:clamp(4rem,7vw,7rem) clamp(1.25rem,5vw,6rem); }
.section-head { display:grid; grid-template-columns:1fr minmax(280px,520px); align-items:end; gap:4rem; margin-bottom:2.5rem; }
.section-head h2,.games-copy h2,.teacher-section h2 { margin:0; font-size:clamp(2.5rem,5vw,5.6rem); line-height:.9; letter-spacing:-.04em; }
.section-head>p { margin:0; color:var(--muted); line-height:1.65; }
.filters { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.4rem; }
.filters button { padding:.72rem 1rem; border:1px solid var(--line); color:var(--ink); background:#fff; font-weight:700; cursor:pointer; }
.filters button:hover,.filters button.active { color:#fff; border-color:var(--navy); background:var(--navy); }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.resource-card { position:relative; min-height:360px; display:flex; flex-direction:column; padding:2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transition:transform .2s,background .2s,color .2s; }
.resource-card:hover { z-index:2; color:#fff; background:var(--navy); transform:translateY(-5px); }
.resource-card[hidden] { display:none; }
.resource-card.featured { color:#fff; background:var(--navy2); }
.resource-number { align-self:flex-end; color:var(--red); font-family:"Archivo Black"; font-size:1.2rem; }
.resource-card small { margin-top:2rem; color:var(--red); font-weight:800; letter-spacing:.12em; }
.resource-card h3 { margin:.7rem 0 1rem; font-size:clamp(1.6rem,2.5vw,2.55rem); line-height:1; }
.resource-card p { margin:0 0 2rem; color:var(--muted); line-height:1.6; }
.resource-card:hover p,.resource-card.featured p { color:#b8c5cc; }
.resource-card b { display:flex; justify-content:space-between; margin-top:auto; padding-top:1rem; border-top:1px solid currentColor; font-size:.82rem; }
.empty-state { padding:2rem; text-align:center; color:var(--muted); }
.games-section { display:grid; grid-template-columns:minmax(300px,.68fr) minmax(0,1.32fr); color:#fff; background:var(--navy); }
.games-copy { align-self:center; padding:clamp(3.5rem,7vw,7rem) clamp(1.25rem,5vw,6rem); }
.games-copy>p:last-child { max-width:37rem; color:#aebdc5; line-height:1.7; }
.games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.game-card { min-height:310px; display:flex; flex-direction:column; padding:1.8rem; color:var(--ink); background:#fff; border-left:1px solid var(--line); border-bottom:1px solid var(--line); transition:color .2s,background .2s,transform .2s; }
.game-card:hover,.game-card:focus-visible { z-index:1; color:#fff; background:var(--red); transform:translateY(-4px); }
.game-card-featured { color:#fff; background:var(--red); }
.game-number { align-self:flex-end; font-family:"Archivo Black"; color:var(--red); }
.game-card:hover .game-number,.game-card:focus-visible .game-number,.game-card-featured .game-number { color:#fff; }
.game-card small { margin-top:1.6rem; color:var(--red); font-weight:800; letter-spacing:.12em; }
.game-card:hover small,.game-card:focus-visible small,.game-card-featured small { color:#fff; }
.game-card h3 { margin:.7rem 0; font-size:clamp(1.4rem,2vw,2.15rem); line-height:1; }
.game-card p { margin:0 0 1.5rem; color:var(--muted); line-height:1.55; }
.game-card:hover p,.game-card:focus-visible p,.game-card-featured p { color:rgba(255,255,255,.82); }
.game-card b { display:flex; justify-content:space-between; margin-top:auto; padding-top:1rem; border-top:1px solid currentColor; font-size:.78rem; }
.glossary-section { background:var(--sand); }
.glossary-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #c9c0ae; }
details { border-bottom:1px solid #c9c0ae; }
details:nth-child(odd) { border-right:1px solid #c9c0ae; }
summary { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:1rem; padding:1.5rem; list-style:none; cursor:pointer; font-family:"Archivo Black"; font-size:1.2rem; }
summary::-webkit-details-marker { display:none; }
summary span { color:var(--red); font-family:"DM Sans"; font-size:.7rem; }
summary b { color:var(--red); font-size:1.7rem; }
details[open] summary b { rotate:45deg; }
details p { margin:0; padding:0 2rem 1.7rem 5.5rem; color:#5d5a52; line-height:1.65; }
.teacher-section { display:grid; grid-template-columns:1fr 1fr; gap:5rem; padding:clamp(4rem,7vw,7rem) clamp(1.25rem,5vw,6rem); }
.teacher-section>div:last-child { align-self:end; max-width:42rem; }
.teacher-section>div:last-child p { color:var(--muted); line-height:1.7; }
.teacher-section a { display:flex; justify-content:space-between; margin-top:2rem; padding:1rem 0; border-bottom:2px solid var(--red); font-weight:700; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); }
@media (max-width:1200px) { .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1050px) { .topbar { grid-template-columns:1fr auto; }.section-name { display:none; }.hero { grid-template-columns:1fr; }.earth-model { min-height:500px; }.earth { width:min(62vw,450px); }.resource-grid { grid-template-columns:1fr 1fr; }.games-section { grid-template-columns:1fr; }.section-head { grid-template-columns:1fr; gap:1.5rem; } }
@media (max-width:700px) { .portal-link { display:none; }.topbar { grid-template-columns:1fr; }.hero { min-height:auto; }.earth-model { min-height:390px; }.earth { width:72vw; }.intro-strip { grid-template-columns:1fr 1fr; }.resource-grid,.glossary-grid,.teacher-section,.games-grid { grid-template-columns:1fr; }.resource-card,.game-card { min-height:300px; }.glossary-grid details { border-right:0; } footer { display:grid; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.resource-card { transition:none; } }