/* ═══════════════════════════════════════════════════════════════
   SeaStash · guide.css — "the surface world"
   The app lives underwater; the guide lives on the beach.
   Sunny, editorial, calm. Same family, different altitude.
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --disp:"Fredoka", system-ui, sans-serif;
  --body:"Nunito", system-ui, sans-serif;
  --sky1:#bdf0ff; --sky2:#e8fbff;
  --sand:#fff6e3; --sand2:#ffe9c4;
  --sea:#0e86bd; --sea-dk:#075e86; --ink:#123a52; --dim:#5d84a0;
  --coral:#ff7e67;
}

body{
  font-family:var(--body); color:var(--ink);
  background: linear-gradient(180deg, var(--sky1), var(--sky2) 40%, var(--sand) 100%);
  min-height:100dvh;
}

/* decorative sun + waves */
.sun{
  position:fixed; top:-90px; right:-90px; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff7c9, #ffe27a 55%, rgba(255,226,122,0));
  pointer-events:none; z-index:0;
}

.wrap{
  position:relative; z-index:1; max-width:760px; margin:0 auto;
  /* the native app draws under the status bar, so the header needs the notch inset;
     on the web these resolve to 0 and nothing changes. */
  padding: calc(26px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right))
           calc(90px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
}

.g-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:34px; flex-wrap:wrap; }
.g-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.g-brand img{ width:34px; height:34px; border-radius:9px; box-shadow:0 4px 14px rgba(7,94,134,.25); }
.g-brand span{ font-family:var(--disp); font-weight:600; font-size:1.25rem; color:var(--sea-dk); }
.g-brand b{ font-weight:700; color:var(--sea); }
.back-app{
  font-family:var(--disp); font-weight:600; font-size:.95rem; text-decoration:none;
  color:#fff; background:linear-gradient(150deg,#31bef0,#1a76d0);
  padding:10px 20px; border-radius:999px;
  box-shadow:0 4px 0 rgba(10,60,110,.25), inset 0 1px 0 rgba(255,255,255,.4);
}

.kicker{
  font-family:var(--disp); font-weight:600; font-size:.85rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sea); margin-bottom:10px;
}
h1{ font-family:var(--disp); font-weight:700; font-size:clamp(2rem, 6vw, 2.9rem); line-height:1.1; margin-bottom:14px; }
.lede{ font-size:1.12rem; font-weight:700; color:var(--dim); line-height:1.6; max-width:56ch; }

/* the wave artwork carries a lot of line detail, so it sits a little
   larger than the text it punctuates */
.wave-inline{
  width:1.15em; height:1.15em; object-fit:contain;
  display:inline-block; vertical-align:-0.18em;
}
.wave-inline.sm{ width:1.35em; height:1.35em; vertical-align:-0.35em; }

.hero-art{
  display:block; width:100%; margin-top:26px;
  aspect-ratio: 1280 / 712;      /* reserve the space so nothing jumps on load */
  object-fit: cover;
  background: #7fd3e8;
  border-radius:24px;
  box-shadow: 0 20px 50px -16px rgba(7,60,100,.4);
}

/* hub cards */
.hub-grid{ display:grid; gap:18px; margin-top:34px; }
@media(min-width:640px){ .hub-grid{ grid-template-columns:1fr 1fr; } }
.hub-card{
  display:block; text-decoration:none; color:var(--ink);
  background:#fff; border-radius:24px; padding:24px;
  box-shadow: 0 14px 40px -14px rgba(7,60,100,.25);
  border: 2px solid transparent;
  transition: transform .18s, border-color .18s;
}
.hub-card:hover{ transform: translateY(-4px); border-color:#7ad4f0; }
.hub-card .h-emoji{ font-size:2.2rem; }
.hub-card h2{ font-family:var(--disp); font-weight:600; font-size:1.35rem; margin:8px 0 6px; }
.hub-card p{ font-weight:700; color:var(--dim); font-size:.95rem; line-height:1.55; }
.hub-card .go{ display:inline-block; margin-top:12px; font-family:var(--disp); font-weight:600; color:var(--sea); }

/* article pages */
article{ margin-top:8px; }
section.g-sec{
  background:#fff; border-radius:24px; padding:26px;
  box-shadow: 0 14px 40px -18px rgba(7,60,100,.22);
  margin-top:22px;
}
.g-sec h2{
  font-family:var(--disp); font-weight:600; font-size:1.4rem; margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.g-sec h3{ font-family:var(--disp); font-weight:600; font-size:1.05rem; margin:18px 0 6px; color:var(--sea-dk); }
.g-sec p, .g-sec li{ font-size:1rem; font-weight:600; line-height:1.7; color:#2b5570; }
.g-sec p + p{ margin-top:10px; }
.g-sec ul, .g-sec ol{ padding-left:22px; margin:8px 0; }
.g-sec li{ margin:6px 0; }
.g-sec b{ color:var(--ink); }
.callout{
  background:#eafaff; border-left:5px solid #31bef0; border-radius:12px;
  padding:14px 16px; margin:14px 0; font-weight:700;
}
.callout.warn{ background:#fff3e8; border-color:var(--coral); }
.emoji-dot{ font-size:1.3rem; }

.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.pill{ background:var(--sand2); border-radius:999px; padding:6px 14px; font-weight:800; font-size:.86rem; color:#7a5b1e; }

.next-link{
  display:inline-block; margin-top:26px; text-decoration:none;
  font-family:var(--disp); font-weight:600; color:var(--sea);
  border-bottom:3px solid #7ad4f0; padding-bottom:2px;
}

footer.g-foot{ margin-top:44px; text-align:center; font-weight:700; color:var(--dim); font-size:.9rem; }
footer.g-foot a{ color:var(--sea); }