*{box-sizing:border-box}
:root{
  --navy:#092d55;
  --royal:#1260a8;
  --green:#07865f;
  --orange:#f28c28;
  --cream:#fff9ed;
  --ink:#13202a;
}
html{font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--ink)}
body{margin:0}
a{color:inherit}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:.8rem 1rem;z-index:1000}
.skip-link:focus{left:1rem;top:1rem}
.front-door{min-height:100vh;background:linear-gradient(145deg,#eef9ff,#fff9ed)}
.door-shell{min-height:100vh;display:grid;place-items:center;padding:2rem}
.door-card{width:min(1050px,100%);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--green);margin:0 0 .4rem}
h1{font-size:clamp(3rem,8vw,6.5rem);line-height:.9;margin:.2rem 0;color:var(--navy)}
h1 span{color:var(--green)}
.motto{font-size:clamp(1.1rem,2vw,1.45rem);margin:1.25rem 0 2rem}
.classroom-door{display:inline-flex;align-items:center;gap:.85rem;flex-wrap:wrap;text-decoration:none;background:var(--orange);color:#231300;border:4px solid #231300;border-radius:24px;padding:1rem 1.25rem;box-shadow:0 7px 0 #231300;font-size:1.15rem}
.classroom-door strong{font-size:clamp(1.5rem,3vw,2.15rem)}
.classroom-door .door-small{width:100%;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.classroom-door:hover{transform:translateY(-2px)}
.classroom-door:focus-visible,.lily:focus-visible,.back-link:focus-visible{outline:5px solid #fff;outline-offset:4px}
.stingray{display:block;width:min(100%,520px);justify-self:center;filter:drop-shadow(0 12px 10px rgba(0,0,0,.15))}

.pond-page{background:#163b31;min-height:100vh}
.pond-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:#fffaf0;color:var(--navy);border-bottom:4px solid var(--green)}
.pond-header>div{text-align:right}
.pond-header strong{display:block;font-size:1.35rem}
.pond-header span{font-size:.85rem}
.back-link{font-weight:800;text-decoration:none;padding:.65rem;border-radius:12px}
.pond-world{position:relative;width:100%;max-width:1600px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:#315d4c}
.pond-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lily-nav{position:absolute;inset:0}
.lily{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#102719;text-shadow:0 1px 0 rgba(255,255,255,.6);font-weight:900;min-width:110px;min-height:86px;padding:.8rem;border-radius:50%;background:rgba(224,255,154,.28);border:3px solid rgba(255,255,255,.72);backdrop-filter:blur(1px);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.lily:hover{background:rgba(255,244,174,.5);transform:scale(1.04)}
.lily strong{font-size:clamp(1rem,2.2vw,2rem)}
.lily-icon{font-size:clamp(1.2rem,2.4vw,2.1rem);line-height:1}
.lily-gimkit{left:27%;top:29%;width:18%;height:17%}
.lily-ela{left:57%;top:29%;width:18%;height:17%}
.lily-stem{left:20%;top:52%;width:20%;height:18%}
.lily-fun{left:47%;top:54%;width:22%;height:19%;border-color:#ffd39a}
.coming-soon{margin:0;padding:.75rem 1rem;text-align:center;background:#fffaf0;font-weight:700;color:var(--navy)}

@media (max-width:720px){
  .door-card{grid-template-columns:1fr;text-align:center}
  .stingray{max-width:320px;grid-row:1}
  .classroom-door{justify-content:center}
  .pond-header{align-items:flex-start}
  .pond-header span{display:none}
  .pond-world{aspect-ratio:4/5}
  .pond-background{object-position:center center}
  .lily{min-width:88px;min-height:72px;padding:.4rem}
  .lily-gimkit{left:8%;top:26%;width:38%;height:15%}
  .lily-ela{left:54%;top:27%;width:38%;height:15%}
  .lily-stem{left:7%;top:51%;width:40%;height:16%}
  .lily-fun{left:52%;top:52%;width:42%;height:17%}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}