/* ─────────────────────────────────────────────
   WCINU — Shared Chalkboard Brand Chassis
   Brand variables + universal components.
   Page-specific styles live inline per page.
   ───────────────────────────────────────────── */

:root{
  --chalk-bg:#1c3d27;
  --chalk-bg-2:#163322;
  --chalk-bg-3:#0d2014;
  --chalk-white:#f7f3e9;
  --chalk-cream:#f0e6c8;
  --chalk-dim:#a4b6a9;
  --chalk-dim-2:#7a8d7f;
  --chalk-yellow:#f2c94c;
  --chalk-amber:#e89b2c;
  --chalk-pink:#f08aa8;
  --chalk-red:#e25656;
  --chalk-green:#5dc77a;
  --board-edge:#0a1b11;
  --r-card:8px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  background:var(--board-edge);
  color:var(--chalk-white);
  font-family:'Inter', system-ui, sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.005em;
}
body{
  background:
    radial-gradient(ellipse 1200px 600px at 18% 6%, rgba(247,243,233,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 1400px 800px at 82% 96%, rgba(247,243,233,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 50% 50%, rgba(247,243,233,0.02) 0%, transparent 70%),
    repeating-linear-gradient(118deg, rgba(247,243,233,0.011) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--chalk-bg) 0%, var(--chalk-bg-2) 60%, var(--chalk-bg-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence baseFrequency='0.78' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.91  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:260px 260px;
  opacity:0.50;
  mix-blend-mode:overlay;
}
body > *{position:relative; z-index:1;}

.container{max-width:1760px; margin:0 auto; padding:0 32px;}

/* ── Type helpers ── */
.script{ font-family:'Permanent Marker', cursive; font-weight:400; letter-spacing:0.02em;}
.caveat{ font-family:'Caveat', cursive; font-weight:700;}

a{ color:inherit; text-decoration:none;}

/* ── Chalk-edge card ── */
.chalk-edge{
  border:1.5px solid rgba(247,243,233,0.40);
  border-radius:var(--r-card);
  background:linear-gradient(180deg, rgba(247,243,233,0.025), rgba(247,243,233,0.005) 60%, rgba(0,0,0,0.12) 100%);
  box-shadow:inset 0 0 0 1px rgba(247,243,233,0.05), 4px 4px 0 var(--board-edge), 0 12px 28px rgba(0,0,0,0.35);
  position:relative;
}
.chalk-edge.tilted-left{ transform:rotate(-0.5deg);}
.chalk-edge.tilted-right{ transform:rotate(0.5deg);}

/* ── Chalk arrow icon ── */
.chalk-arrow{ display:inline-block; vertical-align:middle; position:relative; width:36px; height:14px;}
.chalk-arrow::before{ content:""; position:absolute; left:0; top:50%; width:100%; height:1.8px; background:var(--chalk-white); transform:translateY(-50%);}
.chalk-arrow::after{ content:""; position:absolute; right:-2px; top:50%; width:0; height:0; border-left:10px solid var(--chalk-white); border-top:6px solid transparent; border-bottom:6px solid transparent; transform:translateY(-50%);}
.chalk-arrow.sm{ width:24px; height:10px;}
.chalk-arrow.sm::after{ border-left:7px solid var(--chalk-white); border-top:4px solid transparent; border-bottom:4px solid transparent;}

/* ── Wordmark ── */
.wordmark{display:inline-flex; align-items:center; gap:10px;}
.wordmark .mark{ font-family:'Permanent Marker', cursive; font-size:26px; line-height:1; letter-spacing:0.03em; color:var(--chalk-white);}
.wordmark .mark .dot{ color:var(--chalk-yellow);}
.wordmark.lg .mark{ font-size:42px;}

/* ── Buttons ── */
.btn{padding:11px 18px; border-radius:6px; font-weight:800; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; border:none; font-family:'Inter', sans-serif;}
.btn-bot{ background:var(--chalk-yellow); color:#0d2014; box-shadow:3px 3px 0 var(--board-edge);}
.btn-wallet{background:transparent; color:var(--chalk-white); border:1.5px solid rgba(247,243,233,0.50);}
.btn-ghost{background:transparent; color:var(--chalk-dim); border:1px dashed rgba(247,243,233,0.30); font-weight:700;}
.btn-pri-lg{ padding:18px 32px; font-size:14px;}
.btn-sec-lg{ padding:17px 30px; font-size:13px;}

/* ── Nav ── */
.nav{
  padding:16px 0;
  border-bottom:1px dashed rgba(247,243,233,0.22);
  background:rgba(13,32,20,0.55);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:30;
}
.nav-inner{display:flex; align-items:center; gap:32px;}
.nav-inner{ gap:24px;}
.nav-links{display:flex; gap:1px; margin-left:8px; flex-wrap:wrap; align-items:center;}
.nav-links a{padding:7px 9px; border-radius:5px; color:var(--chalk-dim); font-size:12.5px; font-weight:700; letter-spacing:0.02em; text-decoration:none; white-space:nowrap;}
.nav-links a:hover, .nav-links a.active{color:var(--chalk-white); background:rgba(247,243,233,0.07);}
.nav-links a.live::after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--chalk-red); margin-left:7px; box-shadow:0 0 6px var(--chalk-red); animation:livepulse 1.5s ease-in-out infinite;}
.nav-links .nav-sep{display:inline-block; width:1px; height:14px; margin:0 6px; background:rgba(247,243,233,0.22); align-self:center; font-size:0; line-height:0; overflow:hidden; color:transparent;}
.nav-links a.nav-mkt{ font-size:11.5px; padding:7px 7px; color:var(--chalk-dim-2); font-style:italic; letter-spacing:0.03em;}
.nav-links a.nav-mkt:hover, .nav-links a.nav-mkt.active{ color:var(--chalk-yellow); background:rgba(242,201,76,0.06); font-style:normal;}
@keyframes livepulse{0%,100%{opacity:1;} 50%{opacity:0.4;}}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center;}

/* ── Section frame ── */
.section{ padding:72px 0;}
.section.tight{ padding:48px 0;}
.sec-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:36px; gap:24px;}
.sec-head .eyebrow{ font-family:'Permanent Marker', cursive; font-size:14px; color:var(--chalk-yellow); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;}
.sec-head h2{ font-family:'Permanent Marker', cursive; font-size:54px; line-height:0.98; color:var(--chalk-white); letter-spacing:0.005em;}
.sec-head h2 .accent{ color:var(--chalk-yellow);}
.sec-head .sub{ color:var(--chalk-dim); font-size:14px; font-style:italic; margin-top:8px; max-width:540px; line-height:1.5;}
.sec-head .more{ color:var(--chalk-yellow); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; display:flex; align-items:center; gap:8px; white-space:nowrap;}

/* ── Page header (h1 + subtitle for subpages) ── */
.page-head{ padding:56px 0 32px;}
.page-head .eyebrow{ font-family:'Permanent Marker', cursive; font-size:14px; color:var(--chalk-yellow); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px; display:inline-flex; align-items:center; gap:8px;}
.page-head h1{ font-family:'Bebas Neue', sans-serif; font-size:56px; line-height:0.95; letter-spacing:0.02em; font-weight:400; color:var(--chalk-white);}
.page-head h1 .accent{ font-family:'Permanent Marker', cursive; color:var(--chalk-yellow); font-size:0.92em; letter-spacing:0.005em; padding-left:4px;}
.page-head .lede{ color:var(--chalk-cream); font-size:17px; line-height:1.55; max-width:660px; margin-top:18px;}
.page-head .lede strong{ color:var(--chalk-white);}

/* ── Tag/Pill component ── */
.chalk-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1.5px dashed rgba(247,243,233,0.32);
  font-family:'Permanent Marker', cursive; font-size:12.5px;
  color:var(--chalk-white); letter-spacing:0.05em;
}
.chalk-pill.yellow{ border-color:rgba(242,201,76,0.55); color:var(--chalk-yellow);}
.chalk-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--chalk-green); box-shadow:0 0 8px var(--chalk-green); animation:livepulse 1.6s ease-in-out infinite;}

/* ── Pick of the Day (brand pattern — used on home and portfolio empty-state) ── */
.pick{ display:grid; grid-template-columns:1.45fr 1fr; gap:32px; align-items:stretch;}
.pick-art{
  position:relative; border-radius:14px; overflow:hidden;
  border:1.5px solid rgba(247,243,233,0.35);
  box-shadow:6px 6px 0 var(--board-edge), 0 18px 40px rgba(0,0,0,0.4);
  transform:rotate(-0.3deg);
}
.pick-art img{ display:block; width:100%; height:auto;}
.pick-art .stamp{
  position:absolute; bottom:18px; left:18px;
  padding:9px 14px;
  background:rgba(13,32,20,0.85);
  border:1.5px solid rgba(242,201,76,0.6);
  border-radius:6px;
  font-family:'Permanent Marker', cursive; font-size:13px;
  color:var(--chalk-yellow); letter-spacing:0.05em;
  display:flex; align-items:center; gap:10px;
}
.pick-card{
  padding:28px 28px 24px;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(242,201,76,0.05), rgba(247,243,233,0.01) 50%, rgba(0,0,0,0.10) 100%);
  border:1.5px solid rgba(242,201,76,0.45);
}
.pick-card .label{ font-family:'Permanent Marker', cursive; font-size:13px; color:var(--chalk-yellow); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px;}
.pick-card h3{ font-family:'Permanent Marker', cursive; font-size:30px; line-height:1.15; color:var(--chalk-white); margin-bottom:14px;}
.pick-card .why{
  padding:12px 14px; margin-bottom:18px;
  background:rgba(242,201,76,0.06);
  border-left:3px solid var(--chalk-yellow);
  border-radius:0 4px 4px 0;
  font-size:13.5px; line-height:1.55; color:var(--chalk-cream); font-style:italic;
}
.pick-card .opts{ display:grid; grid-template-columns:1.6fr 1fr; gap:10px; margin-bottom:14px;}
.opt-big{
  padding:16px 18px; border-radius:6px; border:1.5px solid; text-align:left;
  font-family:'Permanent Marker', cursive;
}
.opt-big.yes{ background:rgba(93,199,122,0.13); border-color:rgba(93,199,122,0.55); color:var(--chalk-green);}
.opt-big.no { background:rgba(226,86,86,0.08);  border-color:rgba(226,86,86,0.45);  color:var(--chalk-red);}
.opt-big .l  { display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; font-family:'Inter', sans-serif; font-weight:800;}
.opt-big .pct{ display:block; font-size:38px; line-height:1; margin-top:4px;}
.opt-big .stk{ display:block; font-size:11px; font-family:'Inter', sans-serif; font-weight:700; color:var(--chalk-dim); margin-top:6px; letter-spacing:0.04em;}
.pick-card .meta-row{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px dashed rgba(247,243,233,0.20);
  font-size:11.5px; color:var(--chalk-dim); letter-spacing:0.04em;
}
.pick-card .meta-row .pool{ color:var(--chalk-yellow); font-family:'Permanent Marker', cursive; font-size:18px;}
.pick-card .place{
  margin-top:14px; width:100%; padding:14px;
  background:var(--chalk-yellow); color:#0d2014;
  font-family:'Inter', sans-serif; font-weight:900; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  border:none; border-radius:6px; cursor:pointer; box-shadow:3px 3px 0 var(--board-edge);
}

/* ── Footer ── */
.footer{
  border-top:1px dashed rgba(247,243,233,0.22);
  padding:48px 0 24px;
  background:rgba(10,27,17,0.55);
  margin-top:48px;
}
.foot-row{ display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:start;}
.foot-brand .tag{ display:block; font-size:11.5px; color:var(--chalk-dim); letter-spacing:0.18em; margin-top:8px;}
.foot-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.foot-col h5{ font-family:'Permanent Marker', cursive; font-size:14px; color:var(--chalk-yellow); margin-bottom:10px;}
.foot-col a{ display:block; color:var(--chalk-dim); font-size:12.5px; padding:4px 0;}
.foot-col a:hover{ color:var(--chalk-white);}
.foot-disclaimer{
  margin-top:32px; padding-top:24px;
  border-top:1px dashed rgba(247,243,233,0.15);
  font-size:11.5px; color:var(--chalk-dim-2); line-height:1.6; max-width:1000px;
}

/* ── Responsive breakpoints for universal pieces ── */
@media (max-width: 1280px){
  .container{ padding:0 24px;}
  .sec-head h2{ font-size:44px;}
  .page-head h1{ font-size:46px;}
  .foot-row{ grid-template-columns:1fr; gap:32px;}
  .pick{ grid-template-columns:1fr; gap:24px;}
  .pick-card h3{ font-size:24px;}
  .pick-card .opts{ grid-template-columns:1fr;}
  .opt-big .pct{ font-size:32px;}
}

@media (max-width: 720px){
  .container{ padding:0 16px;}
  .nav{ padding:14px 0;}
  .nav-inner{ gap:12px; flex-wrap:wrap;}
  .nav-links{ display:none;}
  .nav-cta .btn-wallet{ display:none;}
  .sec-head{ flex-direction:column; align-items:flex-start; gap:12px;}
  .sec-head h2{ font-size:36px;}
  .page-head{ padding:36px 0 24px;}
  .page-head h1{ font-size:38px;}
  .foot-cols{ grid-template-columns:repeat(2, 1fr);}
}

/* ─── SOL/USD display-currency toggle (nav) — injected by currency.js ─── */
.cur-toggle{
  display:inline-flex; align-items:stretch;
  border:1.5px solid rgba(247,243,233,0.30); border-radius:999px;
  overflow:hidden; margin-right:6px;
  background:rgba(13,32,20,0.55);
}
.cur-toggle button{
  padding:8px 13px; background:transparent; border:none; cursor:pointer;
  font-family:'Bebas Neue', sans-serif; font-size:13px; letter-spacing:0.06em;
  color:var(--chalk-dim); line-height:1;
}
.cur-toggle button:hover{ color:var(--chalk-cream);}
.cur-toggle button.on{ background:var(--chalk-yellow); color:#0d2014;}
@media (max-width:720px){ .cur-toggle{ display:none;} }