/* ==========================================================================
   HAGGLR — base.css
   Identity: a torchlit fantasy bazaar at dusk. Warm gold + ember on deep plum,
   grass-green as the "deal accepted" accent, parchment as paper.
   ========================================================================== */

/* ---- Fonts (Kenney family, self-hosted woff2) --------------------------- */
@font-face{font-family:'KBlocks';src:url('../assets/fonts/KenneyBlocks.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'KHigh';  src:url('../assets/fonts/KenneyHighSquare.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'KFuture';src:url('../assets/fonts/KenneyFutureNarrow.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'KPixel'; src:url('../assets/fonts/KenneyPixel.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'KMono';  src:url('../assets/fonts/KenneyMiniSquareMono.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --ink:      #171019;   /* deep plum night (page base)        */
  --ink-1:    #1f1524;   /* raised surface                     */
  --ink-2:    #2a1c31;   /* panel                              */
  --ink-3:    #3a2942;   /* hover / lifted panel               */
  --line:     #4a3557;   /* pixel borders                      */
  --line-soft:#382745;

  --parch:    #f4e4c1;   /* parchment / primary light text     */
  --parch-2:  #cbb489;   /* aged parchment / secondary text    */
  --stone:    #9a8ba8;   /* muted mauve for captions           */

  --gold:     #ffcf4a;   /* coins / primary accent / CTA       */
  --gold-deep:#d9962b;   /* gold shadow                        */
  --ember:    #ff6a3d;   /* torch ember / hot highlight        */
  --ember-deep:#c8451f;
  --green:    #8dc714;   /* Kenney grass — DEAL accepted        */
  --green-deep:#5f8f10;
  --sold:     #e0483f;   /* too high / SOLD-red stamp          */
  --sold-deep:#a82b26;
  --water:    #63c5cf;   /* pixel-world water                  */

  --shadow:   0 18px 40px rgba(0,0,0,.55);
  --tag-w:    3px;

  --wrap: 1180px;
  --pad: clamp(18px, 4vw, 44px);

  --f-display:'KBlocks', system-ui, sans-serif;
  --f-head:   'KHigh', system-ui, sans-serif;
  --f-body:   'KFuture', system-ui, sans-serif;
  --f-pixel:  'KPixel', system-ui, sans-serif;
  --f-mono:   'KMono', ui-monospace, monospace;
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--parch);
  font-family:var(--f-body);font-size:18px;line-height:1.55;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
canvas{display:block}
::selection{background:var(--gold);color:#2a1600}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.pixel{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---- Layout ------------------------------------------------------------- */
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(64px,9vw,120px)}
.section--tight{padding-block:clamp(44px,6vw,80px)}

/* ---- Type --------------------------------------------------------------- */
.wordmark{font-family:var(--f-display);line-height:.86;letter-spacing:1px}
.h-sec{
  font-family:var(--f-head);font-size:clamp(30px,5vw,58px);line-height:1;
  margin:0;color:var(--parch);letter-spacing:.5px;
}
.lead{font-size:clamp(17px,2.1vw,21px);color:var(--parch-2);max-width:60ch}
.mono{font-family:var(--f-mono);letter-spacing:.5px}
.pix{font-family:var(--f-pixel)}

/* Eyebrow rendered as a tiny hanging price tag */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-pixel);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:#3a2408;background:var(--gold);
  padding:6px 12px 5px;position:relative;margin:0 0 18px;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:#3a2408;margin-left:2px}

/* ---- Buttons (CSS-drawn pixel bevel) ------------------------------------ */
.btn{
  --b:var(--gold);--bd:var(--gold-deep);--tx:#2a1600;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-head);font-size:16px;letter-spacing:.6px;
  color:var(--tx);background:var(--b);
  padding:14px 22px;border:0;cursor:pointer;position:relative;
  box-shadow:0 var(--tag-w) 0 var(--bd), 0 calc(var(--tag-w) + 6px) 14px rgba(0,0,0,.45),
             inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .06s ease, box-shadow .06s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(var(--tag-w));
  box-shadow:0 0 0 var(--bd), inset 0 2px 0 rgba(255,255,255,.25)}
.btn--lg{font-size:19px;padding:18px 30px}
.btn--ember{--b:var(--ember);--bd:var(--ember-deep);--tx:#2a0d00}
.btn--green{--b:var(--green);--bd:var(--green-deep);--tx:#12240a}
.btn--sold {--b:var(--sold); --bd:var(--sold-deep); --tx:#2a0705}
.btn--ghost{
  --b:transparent;--tx:var(--parch);
  border:var(--tag-w) solid var(--line);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
  background:rgba(255,255,255,.02);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost:active{transform:translateY(2px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---- Panel -------------------------------------------------------------- */
.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12)),
    var(--ink-2);
  border:2px solid var(--line);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.05), var(--shadow);
  padding:clamp(18px,2.4vw,28px);position:relative;
}
.panel--flat{box-shadow:inset 0 2px 0 rgba(255,255,255,.05)}

/* ---- Price tag (signature element) -------------------------------------- */
.tag{
  --tagbg:var(--parch);
  display:inline-block;position:relative;
  background:var(--tagbg);color:#2e1f08;
  font-family:var(--f-mono);
  padding:12px 16px 12px 28px;
  clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);
  box-shadow:0 6px 0 rgba(0,0,0,.35);
}
.tag::before{ /* punched hole */
  content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.tag .was{color:#a06a3a;text-decoration:line-through;opacity:.8;margin-right:8px;font-size:.8em}
.tag .now{color:#7a3f10;font-weight:400}
.tag--green{--tagbg:#dff0b0}
.tag--sold{--tagbg:#f6c9c5}

/* SOLD stamp */
.stamp{
  font-family:var(--f-head);color:var(--green-deep);
  border:3px solid var(--green-deep);padding:4px 12px 2px;
  display:inline-block;transform:rotate(-8deg);letter-spacing:2px;
  border-radius:4px;opacity:.9;text-transform:uppercase;
  box-shadow:0 0 0 2px rgba(95,143,16,.15);
}
.stamp--sold{color:var(--sold-deep);border-color:var(--sold-deep);
  box-shadow:0 0 0 2px rgba(168,43,38,.15)}

/* ---- Chips / meta ------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-pixel);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--parch-2);background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);padding:6px 10px 5px;
}
.chip .dot{width:8px;height:8px;background:var(--green);box-shadow:0 0 8px var(--green)}
.chip .dot--live{animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* ---- Nav ---------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(19,12,22,.72);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line-soft);
}
.nav__in{display:flex;align-items:center;gap:20px;height:64px}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);
  font-size:22px;color:var(--parch);letter-spacing:.5px}
.nav__brand img{width:30px;height:30px}
.nav__links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav__links a{font-family:var(--f-head);font-size:14px;letter-spacing:.5px;color:var(--parch-2);
  padding:6px 2px;border-bottom:2px solid transparent;transition:.15s}
.nav__links a:hover{color:var(--gold);border-color:var(--gold)}
.nav__cta{margin-left:6px}
.nav__burger{display:none;margin-left:auto;background:none;border:2px solid var(--line);
  color:var(--parch);width:44px;height:40px;font-size:18px;cursor:pointer}
@media(max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--ink-1);border-bottom:2px solid var(--line);padding:6px var(--pad) 14px}
  .nav__links.open a{padding:12px 0;border-bottom:1px solid var(--line-soft);width:100%}
  .nav__links.open .btn{margin-top:10px;width:100%}
}

/* ---- CA bar ------------------------------------------------------------- */
.cabar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:var(--ink-1);border:2px solid var(--line);
  padding:12px 14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.04);
}
.cabar__label{font-family:var(--f-pixel);font-size:12px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.cabar__ca{font-family:var(--f-mono);font-size:15px;color:var(--parch);
  background:#0f0a12;border:1px solid var(--line-soft);padding:9px 12px;
  overflow:auto;white-space:nowrap;flex:1;min-width:0}
.cabar__copy{white-space:nowrap}
.cabar__soon{font-family:var(--f-pixel);font-size:13px;color:var(--parch-2);letter-spacing:1px}

/* ---- Footer ------------------------------------------------------------- */
.foot{border-top:2px solid var(--line-soft);background:#120b15;padding-block:44px 34px}
.foot__grid{display:flex;flex-wrap:wrap;gap:28px 60px;align-items:flex-start}
.foot__brand{font-family:var(--f-display);font-size:28px;color:var(--parch);display:flex;align-items:center;gap:10px}
.foot__brand img{width:34px;height:34px}
.foot__soc{display:flex;gap:12px;flex-wrap:wrap}
.foot__soc a{font-family:var(--f-head);font-size:14px;color:var(--parch-2);
  border:2px solid var(--line);padding:9px 14px;transition:.15s}
.foot__soc a:hover{color:var(--gold);border-color:var(--gold)}
.foot__legal{color:var(--stone);font-size:13px;font-family:var(--f-pixel);letter-spacing:.5px;
  margin-top:26px;line-height:1.7;max-width:70ch}

/* ---- OpenClaw badge ----------------------------------------------------- */
.oc-badge{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  font-family:var(--f-head);font-size:14px;color:var(--parch-2);
  border:2px solid var(--line);padding:11px 15px;transition:.15s;background:rgba(255,255,255,.02)}
.oc-badge:hover{border-color:var(--gold);color:var(--parch)}
.oc-badge b{color:var(--gold);font-size:16px;letter-spacing:.5px}
.oc-badge__mark{color:var(--ember);font-size:13px}
.oc-badge__sub{font-family:var(--f-pixel);font-size:11px;letter-spacing:.5px;color:var(--stone)}

/* ---- Reduced motion ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}