/* Wandering Tortoise — shared site styles. Committed luminous navy identity. */
:root{
  --ink:#061C2E; --ink-2:#0A2A38; --surface:#0F3240; --surface-2:#154150;
  --cream:#FFF3CF; --muted:#A7C4BC; --gold:#EFBD70; --gold-ink:#2A1D0C; --teal:#2E8C8C;
  --crimson:#C4614A; --line:rgba(255,243,207,.12); --line-strong:rgba(255,243,207,.22);
  --amber:#E9B872;
  --display:'Baloo 2','Segoe UI',system-ui,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--cream); line-height:1.65;
  background:radial-gradient(120% 80% at 50% -10%, #0C3A45 0%, #082A38 45%, #061C2E 100%) fixed;
  -webkit-font-smoothing:antialiased; min-height:100%;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
h1,h2,h3{font-family:var(--display); line-height:1.08; text-wrap:balance; margin:0}
p{margin:0}
.eyebrow{font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--gold)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--body); font-weight:800;
  font-size:1rem; padding:.8em 1.3em; border-radius:999px; text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s}
.btn-primary{background:var(--gold); color:var(--gold-ink); box-shadow:0 10px 26px -12px rgba(239,189,112,.75)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(239,189,112,.85)}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--gold); transform:translateY(-2px)}
.yt{width:1.15em; height:1.15em; flex:none}

/* header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  backdrop-filter:blur(10px); background:rgba(6,28,46,.72); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:14px}
.brand{display:flex; align-items:center; gap:.6em; text-decoration:none; font-family:var(--display);
  font-weight:800; font-size:1.15rem; color:var(--cream)}
.brand .dot{width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #B6EC86, #7FC65A 60%, #5aa544);
  display:grid; place-items:center; box-shadow:0 0 0 3px rgba(255,243,207,.1)}
.brand .dot span{font-size:1.1rem}
.nav-links{display:flex; align-items:center; gap:1.6rem}
.nav-links a{text-decoration:none; font-weight:700; color:var(--muted); font-size:.98rem; transition:color .15s}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--cream)}
.nav-links .btn{padding:.55em 1.05em; font-size:.92rem; color:var(--gold-ink)}
@media(max-width:760px){ .nav-links a:not(.btn){display:none} }

/* generic section */
section{position:relative}
.sec-pad{padding-block:clamp(56px,8vw,110px)}
.sec-head{max-width:58ch}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,2.9rem); font-weight:800}
.sec-head p{color:var(--muted); font-size:1.12rem; margin-top:.8rem}

/* hero (home) */
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center;
  padding-block:clamp(48px,7vw,96px)}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem); font-weight:800; letter-spacing:-.01em}
.hero h1 .accent{color:var(--gold)}
.hero .lede{margin-top:1.1rem; font-size:1.18rem; color:var(--muted); max-width:40ch}
.hero .cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
.hero .eyebrow{margin-bottom:1rem; display:block}
.mascot-stage{position:relative; display:grid; place-items:center; min-height:340px}
.sun{position:absolute; width:min(78%,360px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,150,.55), rgba(255,224,150,0) 62%); filter:blur(2px); z-index:0}
.mascot{position:relative; z-index:1; width:min(78%,330px); filter:drop-shadow(0 26px 34px rgba(0,0,0,.42));
  animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.mascot{animation:none}}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr; text-align:center}
  .hero .cta{justify-content:center} .hero .lede{margin-inline:auto} .mascot-stage{order:-1; min-height:280px}}

/* page hero (subpages) */
.page-hero{padding-block:clamp(44px,7vw,84px) clamp(20px,3vw,36px)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; margin-top:.7rem}
.page-hero p{color:var(--muted); font-size:1.18rem; margin-top:1rem; max-width:52ch}

/* horizon hills */
.hills{display:block; width:100%; height:auto; margin-top:-2px}

/* cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.4rem}
.card{background:linear-gradient(180deg,var(--surface),var(--ink-2)); border:1px solid var(--line);
  border-radius:20px; padding:1.7rem; transition:transform .18s ease, border-color .18s}
.card:hover{transform:translateY(-4px); border-color:var(--line-strong)}
.card .ic{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1rem;
  background:rgba(239,189,112,.14); border:1px solid rgba(239,189,112,.3)}
.card .ic svg{width:26px; height:26px}
.card h3{font-size:1.28rem; font-weight:700}
.card p{color:var(--muted); margin-top:.5rem; font-size:1rem}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* process timeline */
.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem; counter-reset:step}
.flow .node{position:relative; padding:1.5rem 1.3rem; border-radius:18px; border:1px solid var(--line);
  background:rgba(15,50,64,.55)}
.flow .node::before{counter-increment:step; content:"0" counter(step); font-family:var(--display);
  font-weight:800; font-size:1.5rem; color:var(--gold); opacity:.9}
.flow .node h3{font-size:1.15rem; margin-top:.25rem}
.flow .node p{color:var(--muted); font-size:.98rem; margin-top:.4rem}
@media(max-width:820px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.flow{grid-template-columns:1fr}}

/* topics grid */
.topics{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:2.4rem}
.topic{display:flex; gap:1rem; align-items:flex-start; padding:1.4rem; border-radius:18px;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--ink-2))}
.topic .badge{width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(46,140,140,.18); border:1px solid rgba(46,140,140,.4); font-size:1.4rem}
.topic h3{font-size:1.16rem}
.topic p{color:var(--muted); font-size:.98rem; margin-top:.3rem}
@media(max-width:680px){.topics{grid-template-columns:1fr}}

/* values list */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.4rem}
.value{padding:1.5rem; border-radius:18px; border:1px solid var(--line); background:rgba(15,50,64,.5)}
.value h3{font-size:1.15rem}
.value p{color:var(--muted); margin-top:.45rem; font-size:.98rem}
@media(max-width:820px){.values{grid-template-columns:1fr}}

/* split (portrait + prose) */
.split{display:grid; grid-template-columns:.85fr 1.15fr; gap:2.4rem; align-items:center; margin-top:2.6rem}
.split.rev{grid-template-columns:1.15fr .85fr}
.portrait{background:radial-gradient(circle at 50% 40%,#12414B,#0A2A34 70%,#061E29);
  border:1px solid var(--line); border-radius:24px; display:grid; place-items:center; padding:1.6rem;
  position:relative; overflow:hidden}
.portrait img{width:min(72%,260px); position:relative; z-index:1}
.portrait .glow{position:absolute; inset:0;
  background:radial-gradient(circle at 50% 78%, rgba(239,189,112,.16), transparent 55%)}
.prose h2{font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:800}
.prose p{color:var(--muted); font-size:1.12rem; margin-top:1rem; max-width:54ch}
.sig{margin-top:1.3rem; font-family:var(--display); font-weight:700; color:var(--cream)}
.sig small{display:block; font-family:var(--body); font-weight:600; color:var(--muted); font-size:.9rem}
@media(max-width:820px){.split, .split.rev{grid-template-columns:1fr; gap:1.6rem}
  .split .portrait{order:-1}}

/* teaser link row */
.teasers{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:2.4rem}
.teaser{display:block; text-decoration:none; padding:1.8rem; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface),var(--ink-2)); transition:transform .18s, border-color .18s}
.teaser:hover{transform:translateY(-4px); border-color:var(--gold)}
.teaser .eyebrow{color:var(--gold)}
.teaser h3{font-size:1.5rem; font-weight:800; margin-top:.5rem}
.teaser p{color:var(--muted); margin-top:.5rem}
.teaser .go{display:inline-flex; align-items:center; gap:.4em; margin-top:1rem; font-weight:800; color:var(--cream)}
@media(max-width:680px){.teasers{grid-template-columns:1fr}}

/* featured */
.featured{background:linear-gradient(120deg,#0E3340,#0A2735); border:1px solid var(--line);
  border-radius:24px; padding:clamp(1.6rem,4vw,2.6rem); display:grid; grid-template-columns:1fr auto;
  gap:1.6rem; align-items:center; overflow:hidden}
.featured .tag{display:inline-flex; align-items:center; gap:.5em; font-weight:800; text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; color:var(--crimson)}
.featured .tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--crimson);
  box-shadow:0 0 0 4px rgba(196,97,74,.2)}
.featured h3{font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:800; margin-top:.6rem}
.featured p{color:var(--muted); margin-top:.6rem; max-width:46ch}
.featured .thumb{width:min(340px,40vw); aspect-ratio:16/9; border-radius:14px; border:1px solid var(--line-strong);
  background:radial-gradient(120% 120% at 70% 20%,#123f49,#0a2733); display:grid; place-items:center; position:relative}
.featured .thumb span{font-family:var(--display); font-weight:800; color:var(--cream); font-size:1.05rem;
  text-align:center; padding:0 1rem}
.featured .thumb .play{position:absolute; width:56px; height:56px; border-radius:50%; background:var(--gold);
  display:grid; place-items:center; top:12px; right:12px; box-shadow:0 8px 20px -8px rgba(239,189,112,.8)}
@media(max-width:820px){.featured{grid-template-columns:1fr} .featured .thumb{width:100%}}

/* cta band */
.cta-band{text-align:center; padding-block:clamp(56px,8vw,96px)}
.cta-band h2{font-size:clamp(2rem,5vw,3.2rem); font-weight:800}
.cta-band p{color:var(--muted); font-size:1.15rem; margin-top:.8rem; max-width:48ch; margin-inline:auto}
.cta-band .btn{margin-top:1.8rem}

/* footer */
footer{border-top:1px solid var(--line); padding-block:2.4rem 3rem; margin-top:1rem}
.foot{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between}
.foot .brand{font-size:1.05rem}
.foot p{color:var(--muted); font-size:.92rem}
.foot .socials{display:flex; gap:1.2rem; align-items:center}
.foot a.social{text-decoration:none; color:var(--muted); font-weight:700; display:inline-flex; gap:.5em; align-items:center}
.foot a.social:hover{color:var(--cream)}
.foot a.social svg{width:1.2em; height:1.2em}