/* =========================================================
   Moonlight — shared stylesheet
   A camping-vibe, dark-blue / dark-yellow color theme site
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- White moon (light family, used as text on dark) --- */
  --c-moon-1:#c0cedd;
  --c-moon-2:#99a0a8;
  --c-moon-3:#c6c3c0;

  /* --- Night sky (primary dark backgrounds) --- */
  --c-night-1:#191f28; /* deepest */
  --c-night-2:#1f2730; /* card surface */
  --c-night-3:#374656; /* lines / borders / hover */

  /* --- Light (campfire accent) --- */
  --c-ember-1:#ecbd7c; /* brightest accent */
  --c-ember-2:#c69f68;
  --c-ember-3:#93764d;

  /* --- Frills (used sparingly as tag / category colors) --- */
  --c-frill-orange:#c68768;
  --c-frill-red:#c66868;
  --c-frill-pink:#c66890;
  --c-frill-purple:#6880c6;
  --c-frill-turquoise:#68aec6;
  --c-frill-green:#9fc76d;

  /* --- semantic tokens --- */
  --bg:            var(--c-night-1);
  --bg-soft:       var(--c-night-2);
  --line:          var(--c-night-3);
  --text:          var(--c-moon-1);
  --text-dim:      var(--c-moon-2);
  --text-warm:     var(--c-moon-3);
  --accent:        var(--c-ember-1);
  --accent-mid:    var(--c-ember-2);
  --accent-deep:   var(--c-ember-3);

  --font-display:'Fraunces', serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --radius:14px;
  --radius-sm:8px;
  --max:1180px;

  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  color:#eef1f5;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.3rem;}

p{margin:0 0 1em;color:var(--text);}
.lede{color:var(--text-dim); font-size:1.1rem; max-width:46ch;}

code, .mono{font-family:var(--font-mono);}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--accent-mid);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(236,189,124,.14);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:.78em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(180deg,var(--c-ember-1),var(--c-ember-2));
  color:var(--c-night-1);
}
.btn-primary:hover{background:linear-gradient(180deg,#f0c98e,var(--c-ember-1));}
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--accent-mid); color:var(--accent);}

/* ---------- nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(25,31,40,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  max-width:var(--max); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:600; color:#eef1f5;
}
.brand-mark{width:26px;height:26px;flex:none;}
.nav-links{display:flex; gap:2em; align-items:center;}
.nav-links a{
  font-size:.95rem; color:var(--text-dim);
  position:relative; padding:.2em 0;
  transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--accent); border-radius:2px;
}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.5rem; cursor:pointer;}

@media (max-width:760px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg-soft);
    flex-direction:column; align-items:flex-start;
    padding:18px 28px; gap:1.1em;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{display:flex;}
}

/* ---------- hero / skyline ---------- */
.hero{
  position:relative;
  padding:84px 0 0;
  overflow:hidden;
}
.hero-inner{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  text-align:center;
}
.hero h1{margin-bottom:.4em;}
.hero h1 em{
  font-style:italic; color:var(--accent); font-weight:500;
}
.hero .lede{margin:0 auto 2em; text-align:center;}
.hero-ctas{display:flex; gap:1em; justify-content:center; flex-wrap:wrap; margin-bottom:48px;}

.skyline{display:block; width:100%; height:auto;}
.skyline .star{animation:twinkle 3.4s ease-in-out infinite;}
.skyline .star:nth-child(2n){animation-delay:.8s;}
.skyline .star:nth-child(3n){animation-delay:1.6s;}
@keyframes twinkle{
  0%,100%{opacity:.25;}
  50%{opacity:1;}
}
.skyline .moon-glow{animation:glow 5s ease-in-out infinite;}
@keyframes glow{
  0%,100%{opacity:.55;}
  50%{opacity:.9;}
}

/* ---------- sections ---------- */
section{padding:84px 0;}
.section-head{max-width:640px; margin:0 0 48px;}
.section-head.center{margin:0 auto 56px; text-align:center;}

.divider{
  border:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  margin:0;
}

/* ---------- palette cards ---------- */
.family-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:980px){.family-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.family-grid{grid-template-columns:1fr;}}

.family-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  transition:border-color .25s, transform .25s var(--ease);
}
.family-card:hover{border-color:var(--accent-mid); transform:translateY(-4px);}
.family-card h3{margin-bottom:.3em; font-size:1.15rem;}
.family-card p{color:var(--text-dim); font-size:.92rem; margin-bottom:1.1em;}
.swatch-row{display:flex; gap:8px;}
.swatch{
  flex:1; aspect-ratio:1; border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer; position:relative;
  transition:transform .2s;
}
.swatch:hover{transform:scale(1.08);}
.swatch::after{
  content:attr(data-hex);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  background:var(--c-night-1); color:var(--text);
  font-family:var(--font-mono); font-size:.68rem;
  padding:4px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s;
  border:1px solid var(--line);
}
.swatch:hover::after{opacity:1;}

/* ---------- story / split ---------- */
.split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
}
@media (max-width:840px){.split{grid-template-columns:1fr;}}

.keycap-art{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
}

/* ---------- stat / ports teaser strip ---------- */
.stat-strip{
  display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:36px 40px;
}
.stat{flex:1; min-width:140px;}
.stat .num{
  font-family:var(--font-display); font-size:2.3rem; color:var(--accent);
  display:block; line-height:1;
}
.stat .label{color:var(--text-dim); font-size:.85rem; margin-top:.4em;}

.mini-icon-row{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0;}
.mini-icon{
  width:42px;height:42px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}

/* ---------- ports page ---------- */
.ports-toolbar{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin-bottom:36px;
}
.search-input{
  flex:1; min-width:220px;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:999px; padding:.7em 1.2em;
  color:var(--text); font-family:var(--font-body); font-size:.95rem;
}
.search-input::placeholder{color:var(--text-dim);}
.search-input:focus{border-color:var(--accent-mid);}

.filter-pills{display:flex; gap:8px; flex-wrap:wrap;}
.pill{
  font-family:var(--font-mono); font-size:.74rem;
  padding:.45em 1em; border-radius:999px;
  border:1px solid var(--line); color:var(--text-dim);
  cursor:pointer; background:transparent;
  transition:all .2s;
}
.pill:hover{border-color:var(--accent-mid); color:var(--text);}
.pill.active{background:var(--accent); color:var(--c-night-1); border-color:var(--accent);}

.port-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media (max-width:920px){.port-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.port-grid{grid-template-columns:1fr;}}

.port-card{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s, transform .25s var(--ease);
  position:relative;
}
.port-card:hover{border-color:var(--accent-mid); transform:translateY(-4px);}
.port-top{display:flex; align-items:center; gap:12px;}
.port-dot{width:10px;height:10px;border-radius:50%; flex:none;}
.port-top h3{margin:0; font-size:1.08rem;}
.port-card p{color:var(--text-dim); font-size:.88rem; margin:0;}
.port-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:8px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-dim);
}
.port-meta .stars{display:flex; align-items:center; gap:.35em;}
.port-card .card-link{
  position:absolute; inset:0; border-radius:var(--radius);
}
.port-card.template{
  border-style:dashed;
  display:flex; align-items:center; justify-content:center; text-align:center;
}

/* ---------- docs ---------- */
.docs-layout{display:grid; grid-template-columns:230px 1fr; gap:56px;}
@media (max-width:840px){.docs-layout{grid-template-columns:1fr;}}
.docs-nav{position:sticky; top:100px; align-self:start;}
.docs-nav .eyebrow{margin-bottom:1.2em;}
.docs-nav ul{display:flex; flex-direction:column; gap:.85em;}
.docs-nav a{color:var(--text-dim); font-size:.92rem; transition:color .2s;}
.docs-nav a:hover{color:var(--accent);}

.docs-section{margin-bottom:64px; scroll-margin-top:96px;}
.docs-section h2{margin-bottom:.6em;}
.docs-section pre{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:18px 20px;
  overflow-x:auto; font-family:var(--font-mono); font-size:.85rem;
  color:var(--c-moon-1);
}
.docs-section table{width:100%; border-collapse:collapse; font-size:.88rem;}
.docs-section th,.docs-section td{
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
}
.docs-section th{color:var(--text-dim); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;}
.hex-cell{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); cursor:pointer;}
.hex-chip{width:18px;height:18px;border-radius:5px;border:1px solid rgba(255,255,255,.12); flex:none;}
.copied-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:var(--c-night-1); font-family:var(--font-mono); font-size:.82rem;
  padding:.6em 1.2em; border-radius:999px; opacity:0; pointer-events:none;
  transition:all .25s var(--ease); z-index:80;
}
.copied-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.callout{
  background:rgba(236,189,124,.08); border:1px solid rgba(236,189,124,.3);
  border-radius:var(--radius-sm); padding:16px 20px; font-size:.92rem; color:var(--text-warm);
}

/* ---------- about / contact ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:840px){.about-grid{grid-template-columns:1fr;}}

.social-list{display:flex; flex-direction:column; gap:10px; margin-top:1.5em;}
.social-link{
  display:flex; align-items:center; gap:.8em;
  padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .2s, background .2s;
}
.social-link:hover{border-color:var(--accent-mid); background:var(--bg-soft);}
.social-icon{width:20px;height:20px; flex:none; color:var(--accent);}

.form-grid{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:.82rem; color:var(--text-dim); font-family:var(--font-mono);}
.field input, .field textarea{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.85em 1em; color:var(--text); font-family:var(--font-body); font-size:.95rem;
  resize:vertical;
}
.field input:focus, .field textarea:focus{border-color:var(--accent-mid);}
.form-note{font-size:.8rem; color:var(--text-dim); margin-top:-4px;}

/* ---------- footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:48px 0 36px;
  margin-top:60px;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
}
.footer-left{display:flex; align-items:center; gap:.6em; color:var(--text-dim); font-size:.9rem;}
.footer-socials{display:flex; gap:18px;}
.footer-socials a{color:var(--text-dim); transition:color .2s;}
.footer-socials a:hover{color:var(--accent);}

.credit{
  text-align:center; font-size:.8rem; color:var(--text-dim); margin-top:24px;
}
.credit a{color:var(--accent-mid);}