/* ===========================================================================
   AdventureCoin — design system
   ---------------------------------------------------------------------------
   Built on values measured from production sites known for craft rather than
   invented. The restraint is the point: small type, tight negative tracking,
   hairline borders, one accent, and depth from contrast instead of glow.
   =========================================================================== */

:root{
  /* --- surface ----------------------------------------------------------
     Near-black with a faint violet cast, so the world reads warm without
     the page turning purple. */
  --bg:        #08070c;
  --bg-raised: #0d0b13;
  --bg-hi:     #12101a;
  --bg-hover:  #17141f;

  /* hairlines, never solid colours */
  --line:      rgba(255,255,255,.07);
  --line-hi:   rgba(255,255,255,.12);
  --line-gold: rgba(224,165,66,.26);

  /* --- ink -------------------------------------------------------------- */
  --ink:    #f2f0f6;
  --ink-2:  #8b8798;
  --ink-3:  #5d5a6b;

  /* --- accent. one, used sparingly --------------------------------------- */
  --gold:    #e0a542;
  --gold-hi: #ffd98a;
  --ember:   #ff7a2f;
  --violet:  #8b5cf6;
  --green:   #4ade80;
  --red:     #f87171;

  /* --- type -------------------------------------------------------------- */
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Cinzel',Georgia,serif;

  /* measured scale */
  --t-display: clamp(34px, 5vw, 52px);
  --t-h1:      clamp(28px, 3.4vw, 38px);
  --t-h2:      24px;
  --t-h3:      18px;
  --t-body:    15px;
  --t-sm:      14px;
  --t-ui:      13px;
  --t-micro:   11px;

  /* --- rhythm ------------------------------------------------------------ */
  --wrap: 1016px;
  --gut:  24px;
  --r:    8px;
  --r-sm: 6px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--ui);
  font-size:var(--t-body);line-height:24px;
  font-weight:400;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
::selection{background:rgba(224,165,66,.26)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(64px,8vw,104px) 0}
.stack > * + *{margin-top:var(--s,16px)}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{font-weight:510;letter-spacing:-.022em;line-height:1.12;color:var(--ink)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);letter-spacing:-.012em}
h3{font-size:var(--t-h3);font-weight:560;letter-spacing:-.012em}

.display{
  font-size:var(--t-display);font-weight:510;letter-spacing:-.028em;line-height:1.04;
}
.serif{font-family:var(--display);font-weight:600;letter-spacing:0}

.eyebrow{
  font-size:var(--t-micro);font-weight:560;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.lead{font-size:17px;line-height:27px;color:var(--ink-2);max-width:540px}
p.sm{font-size:var(--t-sm);line-height:21px;color:var(--ink-2);max-width:540px}
.dim{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.gold{color:var(--gold-hi)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 16px;border-radius:999px;
  font-size:var(--t-ui);font-weight:560;letter-spacing:-.01em;white-space:nowrap;
  background:var(--bg-hi);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .16s var(--ease),box-shadow .16s var(--ease),color .16s;
}
.btn:hover{background:var(--bg-hover);box-shadow:inset 0 0 0 1px var(--line-hi)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
.btn.primary{
  background:var(--gold-hi);color:#1c1405;box-shadow:none;font-weight:600;
}
.btn.primary:hover{background:#ffe4a6}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--bg-hi)}
.btn.lg{height:44px;padding:0 22px;font-size:14px}
.btn.block{width:100%}

/* ---------------------------------------------------------------- surfaces */
.panel{
  background:var(--bg-raised);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line);
}
.panel.pad{padding:22px}
.panel.hover{transition:box-shadow .18s var(--ease),background .18s var(--ease)}
.panel.hover:hover{background:var(--bg-hi);box-shadow:inset 0 0 0 1px var(--line-hi)}

.hairline{height:1px;background:var(--line);border:0}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:999px;font-size:var(--t-micro);font-weight:560;letter-spacing:.01em;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);
}
.chip.gold{color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--line-gold)}
.chip.green{color:var(--green);box-shadow:inset 0 0 0 1px rgba(74,222,128,.26)}
.chip i{width:5px;height:5px;border-radius:99px;background:currentColor}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(8,7,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .2s,background .2s;
}
.hdr.stuck{background:rgba(8,7,12,.9);box-shadow:inset 0 -1px 0 var(--line)}
.hdr .in{
  max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,40px);height:72px;
  display:flex;align-items:center;gap:20px;
}
/* Equal basis on both ends so the nav centres on the header, not on
   whatever the logo and the button happen to measure. */
.logo,.hdr .right{flex:1 1 0;min-width:0}
.logo{display:flex;align-items:center;gap:11px}
.hdr .right{justify-content:flex-end}
.logo svg,.logo img{width:40px;height:40px;flex:0 0 auto;
  filter:drop-shadow(0 2px 10px rgba(139,92,246,.28))}
.logo b{font-size:21px;font-weight:700;letter-spacing:-.022em;white-space:nowrap}
/* "Forge" is the product, "AdventureCoin" is the chain. Lighter weight and
   the accent colour, so the lockup reads as one name with two parts. */
.logo b span{color:var(--gold-hi);font-weight:500}
.hdr nav{display:flex;align-items:center;gap:22px;margin-right:auto}
.hdr nav a{
  font-size:var(--t-ui);font-weight:450;color:var(--ink-2);
  transition:color .15s;position:relative;
}
.hdr nav a:hover{color:var(--ink)}
.hdr nav a[aria-current]{color:var(--ink)}

/* --- jelly nav -----------------------------------------------------------
   Chips that shove each other aside. JS drives the transform; everything
   here is the resting look.

   No container around the group — the chips float. The padding is only the
   room the script reserves for a swelled chip, so nothing clips.
   It takes the centre of the header; logo and wallet button hold the ends. */
.hdr nav.jnav{
  --jn-pad-x:16px;--jn-pad-y:6px;
  gap:6px;padding:var(--jn-pad-y) var(--jn-pad-x);
  margin:0 auto;
  user-select:none;-webkit-user-select:none;
}
.jnav-chip{
  display:inline-block;transform-origin:50% 50%;
  will-change:transform;backface-visibility:hidden;
}
.jnav-skin{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 19px;border-radius:999px;
  background:transparent;color:var(--ink-2);
  font-size:14.5px;font-weight:500;letter-spacing:-.005em;
  line-height:1;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s;
}
.jnav-chip:hover .jnav-skin{background:rgba(255,255,255,.07);color:var(--ink)}
.jnav-chip:active .jnav-skin{background:rgba(255,255,255,.11)}

/* The page you are on keeps its mark whatever the pointer is doing.
   A solid fill with dark text, the way the original inverts its chosen
   chip — a faint tint reads as disabled at this size. */
.hdr nav.jnav a[aria-current] .jnav-skin{
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 62%,#d18a2c);
  color:#1a1206;font-weight:600;
  box-shadow:0 2px 14px -3px rgba(224,165,66,.55),
             inset 0 1px 0 rgba(255,255,255,.35);
}
.hdr nav.jnav a[aria-current]:hover .jnav-skin{color:#1a1206}

.jnav-chip:focus-visible{outline:none}
.jnav-chip:focus-visible .jnav-skin{
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold);
}
.hdr .right{display:flex;align-items:center;gap:8px}
/* The wallet button matches the chip height so the three header pieces sit
   on one optical line. */
.hdr .right .btn{height:38px;padding:0 19px;font-size:14px}
/* The Wallet link, pulled out of the centre nav to sit in the far-right corner.
   Styled as navigation (not a button), gold when it is the current page. */
.hdr .right a.navwallet{font-size:15px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink-2);padding:8px 2px;transition:color .15s}
.hdr .right a.navwallet:hover{color:var(--ink)}
.hdr .right a.navwallet[aria-current]{color:var(--gold-hi)}
.burger{display:none;width:38px;height:38px;border-radius:999px;
  align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line);
  transition:background .16s,box-shadow .16s}
.burger:hover{background:var(--bg-hi);box-shadow:inset 0 0 0 1px var(--line-hi)}
.burger svg{width:19px;height:19px;stroke:var(--ink);fill:none;
  stroke-width:1.8;stroke-linecap:round}

/* --- nav sheet (small screens) ------------------------------------------ */
.navsheet{
  position:fixed;inset:0;z-index:99;
  background:rgba(6,5,11,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease);
}
.navsheet.on{opacity:1}
.navsheet-in{
  position:absolute;left:0;right:0;top:0;
  padding:88px 20px 26px;
  display:flex;flex-direction:column;gap:4px;
  background:var(--bg-raised);
  box-shadow:0 24px 60px -24px #000,inset 0 -1px 0 var(--line);
  transform:translateY(-14px);opacity:0;
  transition:transform .26s var(--ease),opacity .2s var(--ease);
}
.navsheet.on .navsheet-in{transform:none;opacity:1}
.navsheet-in a{
  padding:15px 16px;border-radius:999px;
  font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink-2);
  transition:background .15s,color .15s;
}
.navsheet-in a:hover,.navsheet-in a:focus-visible{
  background:var(--bg-hi);color:var(--ink);outline:none;
}
.navsheet-in a[aria-current]{
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 62%,#d18a2c);
  color:#1a1206;font-weight:600;
}

/* ---------------------------------------------------------------- footer */
.ftr{padding:48px 0 40px;box-shadow:inset 0 1px 0 var(--line);margin-top:40px}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.ftr h4{font-size:var(--t-micro);font-weight:560;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.ftr a{display:block;font-size:var(--t-sm);color:var(--ink-2);padding:4px 0;transition:color .15s}
.ftr a:hover{color:var(--ink)}
.ftr .base a.inl{display:inline;padding:0;font-size:inherit;color:var(--ink-2)}
.ftr .base a.inl:hover{color:var(--gold-hi)}
.ftr .base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;box-shadow:inset 0 1px 0 var(--line);font-size:var(--t-ui);color:var(--ink-3)}

/* ---------------------------------------------------------------- credits */
/* brand block: logo beside the name, as in the header */
.ftr a.logo{display:inline-flex;align-items:center;gap:12px;padding:0;margin-bottom:14px;color:var(--ink)}
.ftr a.logo:hover{color:var(--ink)}
.ftr a.logo b{font-size:19px}

/* Credits: a fifth footer column, same rhythm as the link columns */
.ftr .cols{grid-template-columns:1.7fr 1fr 1fr 1fr 1.25fr}
.ftr .cred{display:flex;align-items:center;gap:11px;padding:5px 0}
.ftr .cred img{flex:none;display:block;height:24px;width:auto;transition:transform .25s var(--ease),filter .25s}
.ftr .cred span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ftr .cred small{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ftr .cred b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ftr .cred em{font-style:normal}
.ftr .cred-advc b{background:linear-gradient(104deg,#ffe9b8,var(--gold-hi) 35%,var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ftr .cred-advc img{border-radius:50%;filter:drop-shadow(0 0 6px rgba(139,92,246,.45))}
.ftr .cred-jestag b{background:linear-gradient(95deg,#48f0ff 10%,#ff4d9d 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ftr .cred-jestag img{filter:drop-shadow(0 0 6px rgba(72,240,255,.45))}
.ftr .cred-cjar b{color:#8aa8ef}
.ftr .cred-cjar em{color:#f2c75c}
.ftr .cred-cjar img{filter:drop-shadow(0 0 5px rgba(242,199,92,.35))}
.ftr .cred:hover img{transform:scale(1.12)}
.ftr .cred-jestag:hover img{transform:rotate(-8deg) scale(1.12)}
@media (max-width:1100px){.ftr .cols{grid-template-columns:repeat(4,1fr)}.ftr .cols>div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.ftr .cred img{transition:none}}

/* ---------------------------------------------------------------- grid */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------------------------------------------------------------- reveal */
[data-in]{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-in].vis{opacity:1;transform:none}

/* ---------------------------------------------------------------- misc */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:860px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .ftr .cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .hdr nav{display:none}
  .hdr .right a.navwallet{display:none}   /* it moves into the burger sheet */
  .burger{display:flex}
  .logo svg,.logo img{width:34px;height:34px}
  .logo b{font-size:17px}
}
/* The full wordmark, a button and a burger do not fit a phone — the
   wordmark loses, and it is the one thing that should not. The button goes
   instead: Wallet is the second item in the sheet. */
@media (max-width:640px){
  .hdr .right .btn{display:none}
  .hdr .in{gap:12px}
  .logo b{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  [data-in]{opacity:1;transform:none}
}