/* ==========================================================================
   Haven Okinawa — shared design system
   Single source of truth for CSS variables, fonts, and component classes.
   Linked identically from every page. Edit here, not per-page.
   ========================================================================== */

:root{
  --harbor-deep:#0C2831; --harbor:#123540; --harbor-2:#1F4D5A; --storm:#33454C;
  --lamp:#E4A93E; --lamp-deep:#C88A22; --sea:#6E9184;
  --sand:#F5EEDF; --sand-2:#EFE6D2; --ink:#22303A; --muted:#5E6B71; --line:#DCD2BC;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:"Instrument Sans",system-ui,sans-serif; color:var(--ink);
  background:var(--sand); -webkit-font-smoothing:antialiased; line-height:1.62;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.1; margin:0;}
.eyebrow{font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lamp-deep);}
a{color:inherit;}
.btn{display:inline-block; font-weight:600; font-size:.94rem; padding:12px 24px; border-radius:999px;
  text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .15s, background .2s, border-color .2s;}
.btn-lamp{background:var(--lamp); color:#3a2a08;} .btn-lamp:hover{transform:translateY(-2px); background:#EDB65A;}
.btn-ghost{background:transparent; color:var(--sand); border-color:rgba(245,238,223,.35);}
.btn-ghost:hover{border-color:var(--sand);}
.btn-dark{background:var(--harbor); color:var(--sand);} .btn-dark:hover{transform:translateY(-2px); background:var(--harbor-2);}

/* H roundel logo */
.roundel{display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--harbor); flex:none;}
.roundel span{font-family:"Fraunces",serif; font-weight:600; color:var(--lamp); line-height:1;}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(12,40,49,0);
  transition:background .3s, padding .3s, box-shadow .3s; padding:16px 0;}
.nav.solid{background:rgba(12,40,49,.97); box-shadow:0 8px 30px -18px rgba(0,0,0,.6); padding:9px 0;}
/* Inner pages have no dark hero behind the transparent nav, so keep it solid from the
   top for legibility. The home page keeps the transparent→solid-on-scroll effect. */
body:not(.home) .nav{background:rgba(12,40,49,.97); box-shadow:0 8px 30px -18px rgba(0,0,0,.6); padding:9px 0;}
.nav .row{display:flex; align-items:center; gap:26px;}
.nav .brand{display:flex; align-items:center; gap:11px; color:var(--sand); text-decoration:none;}
.nav .brand .roundel{width:36px; height:36px;} .nav .brand .roundel span{font-size:1.15rem;}
.nav .brand b{font-family:"Fraunces",serif; font-weight:600; font-size:1.2rem;}
.nav .links{display:flex; gap:24px; margin-left:auto; align-items:center;}
.nav .links a{font-size:.92rem; color:#CFD9D8; text-decoration:none;}
.nav .links a:hover{color:var(--sand);}

/* HERO */
.hero{position:relative; color:var(--sand); overflow:hidden;
  background:linear-gradient(165deg,var(--storm) 0%,#1C4350 46%,var(--harbor-deep) 100%);}
.hero .wrap{position:relative; z-index:2; padding:12vh 26px 16vh;}
.hero .eyebrow{color:var(--lamp);}
.hero h1{font-size:clamp(2.7rem,7vw,5rem); letter-spacing:-.015em; max-width:15ch; margin:20px 0 0;}
.hero h1 em{font-style:italic; color:var(--lamp);}
.hero p.sub{margin-top:24px; max-width:50ch; font-size:1.2rem; color:#DCE4E2;}
.hero .cta{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}
.hero .art{position:absolute; right:-6%; top:14%; width:min(440px,44vw); opacity:.9; z-index:1;}
.hero .waterline{position:absolute; left:0; right:0; bottom:-1px; z-index:2; width:100%; height:88px;}

section{padding:88px 0;}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s, transform .6s;}
.reveal.in{opacity:1; transform:none;}

/* Shared centered CTA row (used on home + the-model) */
.cta-row{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap;}

/* ABOUT */
.about{background:var(--sand-2);}
.about .grid{display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start;}
.about h2{font-size:clamp(1.8rem,3.8vw,2.6rem); color:var(--harbor); max-width:16ch; margin-top:12px;}
.about p{margin-top:18px; font-size:1.06rem; color:#39474E;}
.about .photo{background:var(--harbor); border-radius:18px; aspect-ratio:4/5; overflow:hidden;}
.creds{margin-top:26px; display:flex; flex-wrap:wrap; gap:9px;}
.cred{background:var(--sand); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  font-size:.85rem; color:var(--harbor);}

/* WHAT WE DO */
.do{background:linear-gradient(180deg,var(--harbor) 0%,var(--harbor-deep) 100%); color:var(--sand);}
.do .lead{max-width:60ch;}
.do h2{font-size:clamp(1.9rem,4vw,2.7rem); color:var(--sand); margin-top:12px;}
.do .lead p{margin-top:18px; color:#CDD8D6; font-size:1.12rem;}
.subhead{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lamp); margin:56px 0 20px;}
.qs{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.q{background:rgba(245,238,223,.05); border:1px solid rgba(245,238,223,.12); border-radius:14px; padding:22px 24px;}
.q h3{font-family:"Fraunces",serif; font-size:1.22rem; color:var(--sand); font-style:italic;}
.q p{margin:8px 0 0; color:#CDD8D6; font-size:.97rem;}
.lanes{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.lane{background:rgba(245,238,223,.05); border:1px solid rgba(245,238,223,.12); border-radius:14px; padding:24px;}
.lane h3{font-size:1.16rem; color:var(--lamp); font-family:"Fraunces",serif;}
.lane p{margin:8px 0 0; color:#D5DEDC; font-size:.98rem;}
.fit{margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px;}
.fit .f{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;}
.fit .dot{width:11px; height:11px; border-radius:50%; background:var(--lamp); margin-top:7px; flex:none;}
.fit .f b{color:var(--sand);} .fit .f span{color:#C6D1CF; font-size:.96rem;}

/* THE MODEL (How I think about this) */
.model-figure{background:var(--sand-2);}
.model-figure figure{margin:0 auto; max-width:860px;}
.model-figure img{width:100%; height:auto; display:block; border-radius:18px;}
.model-figure figcaption{margin-top:14px; color:var(--muted); font-size:.9rem; text-align:center;}
.levels{display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px;}
.level{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;}
/* number badge — same rounded/pill treatment as .cred, filled with --lamp for contrast on dark cards */
.level-badge{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 11px; border-radius:999px; background:var(--lamp); color:#3a2a08;
  font-family:"Space Mono",monospace; font-weight:700; font-size:.92rem; flex:none;}
.model-callout{margin-top:28px; max-width:72ch; border-left:3px solid var(--lamp); padding:4px 0 4px 20px;
  color:var(--sand); font-size:1.12rem; line-height:1.55;}
.model-integrated{background:var(--sand-2);}
.model-integrated h2{font-size:clamp(1.9rem,4vw,2.7rem); color:var(--harbor); margin-top:12px; max-width:20ch;}
.model-integrated .body{max-width:72ch;}
.model-integrated p{margin-top:18px; font-size:1.06rem; color:#39474E;}
.model-integrated strong{color:var(--harbor);}

/* SCHEDULE */
.sched{background:var(--sand); text-align:center;}
.sched .wrap{max-width:640px;}
.sched h2{font-size:clamp(1.9rem,4.4vw,2.8rem); color:var(--harbor);}
.sched p{margin:16px auto 30px; color:#41505A; font-size:1.1rem;}

/* PAYMENT LINKS (Schedule) — grouped PayPal buttons, reusing .btn / .btn-lamp / .btn-ghost */
.pay-options{margin-top:28px;}
.pay-options .pay-lead{margin:0 auto 18px; max-width:52ch;}
.pay-group{margin-bottom:20px;}
.pay-group-label{display:block; font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lamp); margin-bottom:10px;}
.pay-group .btn{margin:0 5px 10px;}
/* .btn-ghost is built for dark sections (sand text); recolor to an ink outline so the
   secondary buttons stay legible on the light Schedule background. Existing tokens only. */
.pay-options .btn-ghost{color:var(--ink); border-color:var(--line); background:transparent;}
.pay-options .btn-ghost:hover{border-color:var(--harbor); background:transparent;}

/* CONTACT */
.contact{background:var(--harbor-deep); color:var(--sand);}
.contact h2{font-size:clamp(1.7rem,3.6vw,2.4rem); color:var(--sand);}
.cards{margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.cc{background:rgba(245,238,223,.05); border:1px solid rgba(245,238,223,.14); border-radius:14px; padding:24px;
  text-decoration:none; display:block; transition:background .2s, transform .2s;}
.cc:hover{background:rgba(245,238,223,.1); transform:translateY(-3px);}
.cc .k{font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lamp);}
.cc .v{margin-top:8px; font-size:1.05rem; color:var(--sand);}

footer{background:#08202A; color:#8F9D9E; padding:34px 0 42px; text-align:center;}
footer .crisis{font-size:.86rem; color:#B8C4C4; margin-bottom:14px;}
footer .crisis b{color:var(--lamp);}
footer .meta{font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;}
footer .disc{max-width:60ch; margin:14px auto 0; font-size:.76rem; color:#6E7C7D; line-height:1.5;}

@media(max-width:820px){
  .about .grid{grid-template-columns:1fr; gap:28px;} .about .photo{aspect-ratio:16/10;}
  .qs,.lanes,.fit,.cards{grid-template-columns:1fr;}
  .hero .art{display:none;}
  /* Multi-page nav: keep every link reachable on mobile. Brand on row 1,
     links wrap onto a second row (Schedule button pushed to the right). */
  .nav .row{flex-wrap:wrap; row-gap:8px;}
  .nav .links{width:100%; margin-left:0; gap:12px 16px; flex-wrap:wrap;}
  .nav .links a:not(.btn){font-size:.85rem;}
  .nav .links .btn{margin-left:auto;}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .reveal{opacity:1; transform:none; transition:none;} .drift{animation:none;} }