/* ============================================================================
   Cave Carp blog — shared styles. Matches the game's deep-water palette.
   Root-relative paths only (/blog/, /assets/) so pages work at any depth.
   ========================================================================== */
:root{
  --sky:#0a2f42; --sun:#46d6d0; --gold:#7fe6c8; --ink:#e7f6fb;
  --dim:#86b6c4; --red:#ff7a6b; --grn:#86e0b0;
  --bg:#04141d; --bg2:#06202f; --card:rgba(6,22,32,.86);
  --line:rgba(143,176,200,.16); --maxw:760px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:
    radial-gradient(120% 80% at 50% -10%, #0a2f42 0%, rgba(10,47,66,0) 60%),
    linear-gradient(180deg,#06202f 0%,#04141d 60%,#020c12 100%);
  background-attachment:fixed; min-height:100vh;
  color:var(--ink); line-height:1.7;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sun);text-decoration:none;}
a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}

/* ---- header / nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--maxw);margin:0 auto;padding:18px 22px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.10em;
  font-size:16px;color:var(--ink);}
.brand img{width:26px;height:26px;image-rendering:pixelated;}
.brand .cc{background:linear-gradient(180deg,#fff,var(--sun) 55%,var(--red));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.nav .play{font-size:12px;font-weight:700;letter-spacing:.14em;color:#06202f;
  background:linear-gradient(180deg,#ffd98a,var(--sun));padding:9px 15px;border-radius:10px;
  box-shadow:0 0 20px rgba(70,214,208,.35);}
.nav .play:hover{filter:brightness(1.08);text-decoration:none;}

/* ---- layout ---- */
main{max-width:var(--maxw);margin:0 auto;padding:8px 22px 40px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
header.hero{max-width:var(--maxw);margin:0 auto;padding:26px 22px 6px;}

h1{font-size:clamp(26px,5vw,38px);line-height:1.2;letter-spacing:.01em;margin:.2em 0 .25em;color:#fff;}
h2{font-size:clamp(20px,3.4vw,25px);margin:1.9em 0 .5em;color:var(--gold);letter-spacing:.01em;}
h3{font-size:18px;margin:1.4em 0 .4em;color:var(--sun);}
p{margin:0 0 1.05em;color:#d6e9f1;}
strong{color:#fff;}
em{color:var(--gold);font-style:normal;}
ul,ol{margin:0 0 1.2em;padding-left:1.3em;color:#d6e9f1;}
li{margin:.4em 0;}
blockquote{margin:1.2em 0;padding:12px 18px;border-left:3px solid var(--sun);
  background:rgba(70,214,208,.07);border-radius:0 10px 10px 0;color:var(--ink);}
hr{border:none;border-top:1px solid var(--line);margin:2.4em 0;}
code{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:.92em;color:var(--gold);}

.kicker{color:var(--sun);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;}
.meta{color:var(--dim);font-size:12.5px;letter-spacing:.06em;margin:.2em 0 1.4em;}
.lede{font-size:1.12em;color:var(--ink);}

/* ---- cards / article list ---- */
.cards{display:grid;gap:16px;margin:18px 0 8px;}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr;}}
.post{display:block;background:var(--card);border:1px solid rgba(255,179,71,.16);
  border-radius:16px;padding:20px 20px 18px;transition:transform .12s ease,border-color .2s ease,box-shadow .2s ease;}
.post:hover{transform:translateY(-2px);border-color:rgba(70,214,208,.5);
  box-shadow:0 10px 34px rgba(0,0,0,.35);text-decoration:none;}
.post .tag{font-size:11px;letter-spacing:.16em;color:var(--sun);text-transform:uppercase;}
.post h3{margin:.4em 0 .35em;color:#fff;font-size:18px;line-height:1.35;}
.post p{font-size:13.5px;color:var(--dim);margin:0;}

/* ---- call to action ---- */
.cta{margin:2.2em 0;padding:24px;border-radius:18px;text-align:center;
  background:radial-gradient(120% 120% at 50% 0%,rgba(70,214,208,.16),rgba(6,22,32,.5));
  border:1px solid rgba(255,179,71,.24);}
.cta h2{margin:.1em 0 .5em;color:#fff;}
.cta p{color:var(--dim);margin:0 0 1em;}
.btn{display:inline-block;font:inherit;font-weight:800;letter-spacing:.16em;font-size:15px;
  color:#2a1402;background:linear-gradient(180deg,#ffd98a,var(--sun));
  padding:15px 30px;border-radius:13px;box-shadow:0 0 28px rgba(70,214,208,.45);
  transition:transform .12s ease,filter .2s ease;}
.btn:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px);}

/* ---- faq ---- */
.faq{border-top:1px solid var(--line);margin-top:1em;}
.faq details{border-bottom:1px solid var(--line);padding:14px 2px;}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"›";color:var(--sun);margin-right:10px;display:inline-block;transition:transform .15s;}
.faq details[open] summary::before{transform:rotate(90deg);}
.faq details p{margin:.7em 0 .2em;color:var(--dim);}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:30px;}
.foot{max-width:var(--maxw);margin:0 auto;padding:24px 22px 40px;color:var(--dim);font-size:12.5px;
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;}
.foot a{color:var(--dim);}
.foot a:hover{color:var(--sun);}
.toplinks a{margin-right:16px;}