/* =========================================================
   THE GREAT LIOR GAMES — design system v2
   Built from the crest: 70s-retro pastels, chunky rounded
   type, heavy black linework, hard offset shadows.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700&family=Pacifico&display=swap');

:root{
  /* ---- Crest palette (sampled from the logo) ---- */
  --paper:#FBF4E9;        /* warm page background */
  --paper-2:#F4E8D6;      /* deeper paper */
  --off-white:#FAF7F1;

  --sage:#548675;         /* the crest green — brand bright */
  --sage-600:#497A6A;
  --sage-700:#3D6857;     /* dark ground (light text sits here) */
  --sage-800:#315544;
  --sage-900:#21392F;

  --blush:#E9C6CA;        /* soft pink field */
  --blush-soft:#F3DEE1;
  --blush-deep:#D9A7AD;

  --peach:#FAA07B;        /* the GLG fill */
  --peach-soft:#FCC0A4;
  --peach-deep:#F07F4F;

  --rasp:#BC608B;         /* raspberry — vivid accent */
  --rasp-deep:#9E4B73;

  --slate:#A4B0B9;        /* cool slate — the offset shadow */
  --slate-deep:#7C8B95;

  --ink:#231F1D;          /* near-black linework + text */
  --ink-soft:#544D46;
  --muted:#8A8076;

  /* ---- Semantic ---- */
  --bg-page:var(--paper);
  --line:var(--ink);

  /* ---- Type ---- */
  --display:'Lilita One', system-ui, sans-serif;
  --body:'Nunito', system-ui, -apple-system, sans-serif;
  --script:'Pacifico', cursive;

  /* ---- Outline + hard-shadow system (the signature) ---- */
  --bd:2.5px solid var(--ink);
  --bd-thin:2px solid var(--ink);
  --sh:5px 5px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --sh-lg:8px 8px 0 var(--ink);
  --sh-slate:6px 6px 0 var(--slate-deep);
  --sh-peach:6px 6px 0 var(--peach);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--bg-page);
  color:var(--ink);
  font-weight:500;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.0;letter-spacing:0.005em;}
.display{font-family:var(--display);line-height:1.0;}

/* The signature GLG treatment: chunky + black outline + offset shadow */
.glg-type{
  font-family:var(--display);
  color:var(--peach);
  -webkit-text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 5px 0 var(--slate-deep);
  letter-spacing:0.01em;
}
.glg-type.sage{color:var(--sage);}
.glg-type.blush{color:var(--blush);}
.glg-type.cream{color:var(--off-white);}

.eyebrow{
  font-family:var(--body);font-weight:800;text-transform:uppercase;
  letter-spacing:0.2em;font-size:12px;
}
.script{font-family:var(--script);font-weight:400;letter-spacing:0;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:92px 0;}
.section-sm{padding:60px 0;}
.center{text-align:center;}

.ground{background:var(--sage-700);color:var(--off-white);}
.ground-deep{background:var(--sage-900);color:var(--off-white);}
.band-blush{background:var(--blush);color:var(--ink);}
.band-sage{background:var(--sage);color:var(--off-white);}

/* heavy rule between sections */
.rule-ink{border:none;border-top:2.5px solid var(--ink);margin:0;}

/* ---------- Decorative stars ---------- */
.stars{display:inline-flex;gap:8px;align-items:center;font-size:15px;line-height:1;}
.stars .s1{color:var(--peach);}
.stars .s2{color:var(--rasp);}
.stars .s3{color:var(--slate-deep);}
.stars .s4{color:var(--sage);}

/* ---------- Buttons (sticker style) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:800;font-size:15px;
  padding:13px 26px;border-radius:var(--r-pill);
  border:var(--bd);cursor:pointer;color:var(--ink);background:var(--off-white);
  box-shadow:var(--sh-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  text-decoration:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--sh);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn-primary{background:var(--peach);}
.btn-primary:hover{background:var(--peach-soft);}
.btn-rasp{background:var(--rasp);color:#fff;}
.btn-rasp:hover{background:var(--rasp-deep);}
.btn-sage{background:var(--sage);color:var(--off-white);}
.btn-sage:hover{background:var(--sage-600);}
.btn-blush{background:var(--blush);}
.btn .arrow{font-weight:900;}

/* ---------- Top nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--sage-700);color:var(--off-white);border-bottom:2.5px solid var(--ink);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.nav-brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:21px;letter-spacing:.01em;white-space:nowrap;color:var(--off-white);}
.nav-brand img,.nav-brand svg{height:46px;width:46px;flex:none;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-family:var(--body);font-weight:700;font-size:15px;color:var(--off-white);opacity:.85;transition:opacity .2s ease;position:relative;}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:3px;background:var(--peach);}
.nav-cta{font-family:var(--body);font-weight:800;font-size:14px;padding:9px 18px;border-radius:var(--r-pill);border:2.5px solid var(--ink);background:var(--peach);color:var(--ink) !important;box-shadow:2px 2px 0 var(--ink);opacity:1 !important;transition:transform .12s,box-shadow .12s;}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.nav-cta::after{display:none !important;}

/* ---------- Footer ---------- */
.footer{background:var(--sage-900);color:var(--off-white);padding:60px 0 40px;border-top:2.5px solid var(--ink);}
.footer-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.footer .legal{font-size:13px;color:rgba(250,247,241,0.6);max-width:400px;line-height:1.6;}
.footer-brand{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:24px;}
.footer-brand img{height:56px;width:56px;}

/* ---------- Cards (outlined sticker) ---------- */
.card{background:var(--off-white);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh);}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  padding:6px 13px;border-radius:var(--r-pill);border:2px solid var(--ink);
}
.chip-peach{background:var(--peach);color:var(--ink);}
.chip-rasp{background:var(--rasp);color:#fff;}
.chip-sage{background:var(--sage);color:var(--off-white);}
.chip-blush{background:var(--blush);color:var(--ink);}
.chip-open{background:var(--off-white);color:var(--rasp-deep);border-style:dashed;border-color:var(--rasp-deep);}

@media (max-width:760px){
  .section{padding:60px 0;}
  .nav-inner{height:62px;gap:12px;}
  .nav-links{gap:16px;flex:none;}
  .nav-links a:not(.nav-cta){display:none;}
  .nav-brand{font-size:16px;gap:9px;min-width:0;}
  .nav-brand img,.nav-brand svg{height:38px;width:38px;}
  .nav-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav-cta{flex:none;font-size:13px;padding:8px 14px;white-space:nowrap;}
}
@media (max-width:480px){
  .nav-brand span{display:none;}
}