/* DOG OFFICERS — field console.
   Black ground, gold trace, monospace. Everything is a hard-edged panel in a
   grid; depth comes from offset double borders, never from blur. The only soft
   thing on the page is nothing. */

:root{
  --bg:#050506;
  --panel:#0A0A0C;
  --panel2:#0E0E11;
  --gold:#D9AE4E;
  --gold-d:#8A6E2E;
  --gold-f:rgba(217,174,78,.14);
  --paper:#EDEAE0;
  --dim:#7A7668;
  --dim2:#4E4B42;
  --red:#C4514B;
  --green:#7FB08A;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Cormorant Garamond",Georgia,serif;
  --b:1px solid var(--gold);
  --bf:1px solid var(--gold-f);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--paper);
  font-family:var(--mono); font-size:13px; line-height:1.7; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(to right, rgba(217,174,78,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(217,174,78,.045) 0 1px, transparent 1px 56px);
}
img{max-width:100%}
a{color:inherit; text-decoration:none}
.px{image-rendering:pixelated; image-rendering:crisp-edges}

/* the console frame the whole page sits in */
.wrap{max-width:1560px; margin:0 auto; padding:0}
main.shell{max-width:1560px; margin:0 auto 40px; border:2px solid var(--gold);
           background:var(--bg); box-shadow:10px 10px 0 rgba(217,174,78,.18)}
.pad{padding:0 26px}

h1,h2,h3,h4{margin:0; font-weight:400}
p{margin:0 0 12px}
b{font-weight:500}
code{color:var(--gold); font-size:.92em}

.lab{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.dimlab{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

/* ── ticker ─────────────────────────────────────────────────────── */
.ticker{overflow:hidden; padding:8px 0; border-bottom:2px solid var(--gold);
        max-width:1560px; margin:0 auto; background:var(--panel)}
.ticker-track{display:flex; gap:40px; white-space:nowrap; width:max-content; animation:slide 80s linear infinite}
.ticker span{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim)}
.ticker span i{color:var(--gold); font-style:normal; margin-left:12px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ── nav row: cells divided by rules ────────────────────────────── */
.bar{display:flex; align-items:stretch; border-bottom:2px solid var(--gold); min-height:62px}
.bar .wrap{display:flex; align-items:stretch; width:100%; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; padding:0 26px; flex:1 1 auto}
.brand img{width:30px; height:30px; border:var(--b)}
.brand b{font-size:17px; letter-spacing:.22em; text-transform:uppercase; font-weight:500}
.brand b::after{content:"■"; color:var(--gold); margin-left:10px; font-size:11px; vertical-align:middle}
.nav{display:flex; align-items:stretch}
.nav a{display:flex; align-items:center; padding:0 30px; border-left:2px solid var(--gold);
       font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); transition:.15s}
.nav a:hover{background:var(--gold); color:#000}
#connect{border:0; border-left:2px solid var(--gold); background:var(--gold); color:#000;
         font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em;
         text-transform:uppercase; padding:0 30px; cursor:pointer; transition:.15s}
#connect:hover{background:var(--paper)}

/* ── hero: two consoles side by side ────────────────────────────── */
.hero{display:grid; grid-template-columns:1fr 1fr; align-items:stretch}
.hero > div:first-child{border-right:2px solid var(--gold); padding:22px 30px 30px}
.mint{padding:22px 30px 30px; display:flex; flex-direction:column}
.eyebrow{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
         color:var(--gold); margin-bottom:13px}
h1{font-family:var(--serif); font-size:clamp(38px,4.6vw,68px); line-height:.96;
   letter-spacing:.04em; text-transform:uppercase; margin-bottom:22px}
h1 em{font-style:normal; color:var(--gold)}
h1{margin-bottom:12px}
.lead{color:var(--paper); font-size:13px; line-height:1.8; max-width:58ch; margin:0 0 18px}
.lead b{color:var(--gold)}

/* stat band — a full-width strip under the hero */
.statband{display:grid; grid-template-columns:repeat(6,1fr); border-top:2px solid var(--gold)}
.statband .stat{border:0; border-right:var(--b); padding:16px 18px; background:transparent}
.statband .stat:last-child{border-right:0}
.statband .stat.wide{grid-column:span 2}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:26px}
.stat{border:var(--b); background:var(--panel); padding:13px 15px}
.stat span{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.stat b{display:block; font-size:17px; letter-spacing:.02em; color:var(--gold); font-weight:500}
.stat.wide{grid-column:span 2}
.stat.wide b{font-size:13px; color:var(--paper)}

/* the plate */
.frame{position:relative}
.frame .plate{position:relative; border:var(--b); background:#000; padding:10px;
              box-shadow:10px 10px 0 rgba(217,174,78,.22)}
.frame .plate::after{content:""; position:absolute; inset:4px; border:var(--bf); pointer-events:none}
.art{line-height:0}
.art img{display:block; width:100%; height:auto; aspect-ratio:1}
.art svg{display:block; width:100%; height:auto}
.tokenno{position:absolute; right:16px; top:16px; font-size:9.5px; letter-spacing:.18em;
         color:var(--gold); background:rgba(0,0,0,.82); border:var(--bf); padding:3px 7px}
.platecap{display:flex; flex-wrap:wrap; gap:8px 26px; margin:0; padding:11px 14px;
          border:var(--b); border-top:0; background:var(--panel);
          font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.platecap span{color:var(--gold)}
.thumbs{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:14px}
.thumbs button{padding:0; border:var(--bf); background:#000; cursor:pointer; opacity:.5; transition:.18s; line-height:0}
.thumbs button img{display:block; width:100%; height:auto; aspect-ratio:1}
.thumbs button svg{display:block; width:100%; height:auto}
.thumbs button[aria-current="true"],.thumbs button:hover{opacity:1; border-color:var(--gold)}

/* ── mint console ───────────────────────────────────────────────── */
.minthead{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.mint h2{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.mint .sub{font-size:12px; line-height:1.8; color:var(--dim); margin:0 0 16px}
.mint .sub b{color:var(--paper)}
.pbar{height:26px; border:var(--b); background:#000; overflow:hidden; margin-bottom:10px}
.pbar-fill{height:100%; width:0; background:var(--gold); transition:width .6s}
.barline{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.14em;
         text-transform:uppercase; color:var(--dim); margin-bottom:20px}
.barline b{color:var(--gold); font-weight:500}
.cells{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px}
.cell{border:var(--b); background:var(--panel); padding:13px 15px; min-height:74px}
.cell span{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
.cell b{display:block; font-size:16px; color:var(--gold); font-weight:500; line-height:1.35}
.cell.note b{font-size:11px; color:var(--paper); letter-spacing:.04em; line-height:1.6}
.freeline{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.sched{font-size:11px; color:var(--paper); margin-bottom:14px}
.mintrow{display:flex; gap:10px; margin-bottom:12px}
.qty{display:flex; align-items:stretch; border:var(--b); background:#000; flex:0 0 auto}
.qty button{width:44px; border:0; background:transparent; color:var(--gold);
            font-family:var(--mono); font-size:17px; cursor:pointer; transition:.15s}
.qty button:hover{background:var(--gold); color:#000}
.qty input{width:74px; background:none; border:0; border-left:var(--b); border-right:var(--b);
           color:var(--paper); text-align:center; font-family:var(--mono); font-size:18px;
           -moz-appearance:textfield}
.qty input:focus{outline:none}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty .max{width:auto; padding:0 14px; font-size:10px; letter-spacing:.16em; border-left:var(--b)}
.btn.big{flex:1; border:2px solid var(--gold); background:var(--gold); color:#000;
         font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.16em;
         text-transform:uppercase; cursor:pointer; transition:.15s; box-shadow:6px 6px 0 rgba(217,174,78,.22)}
.btn.big:hover:not(:disabled){background:var(--paper); border-color:var(--paper)}
.btn.big:disabled{background:transparent; color:var(--dim2); border-color:var(--dim2); box-shadow:none; cursor:not-allowed}
.presets{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:8px}
.presets .chip{border:var(--b); background:transparent; color:var(--paper); font-family:var(--mono);
               font-size:12px; padding:10px 0; cursor:pointer; transition:.15s}
.presets .chip:hover:not(:disabled){background:var(--gold-f)}
.presets .chip[aria-current="true"]{background:var(--gold); color:#000; font-weight:600}
.presets .chip:disabled{border-color:var(--dim2); color:var(--dim2); cursor:not-allowed}
.presetnote{margin:0 0 14px; font-size:10px; letter-spacing:.1em; color:var(--dim)}
.rowline{display:none}                       /* the console shows these as cells instead */
.elig{display:flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.16em;
      text-transform:uppercase; color:var(--dim); margin-top:6px}
.elig::before{content:""; width:7px; height:7px; background:var(--dim2); flex:none}
.elig.ok{color:var(--paper)} .elig.ok::before{background:var(--green)}
.note{min-height:18px; font-size:11.5px; color:var(--dim); margin-top:10px; word-break:break-word}
.note.err{color:var(--red)} .note.ok{color:var(--green)}

/* transaction log panel */
.logbox{margin-top:auto; padding-top:22px; border-top:var(--b)}
.loghead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.loghead .live{color:var(--gold); font-size:10px; letter-spacing:.2em}
.yours{border:0; padding:0}
.yours h4{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 10px}
.yourgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.logempty{font-size:11.5px; color:var(--dim2)}

/* ── sections ───────────────────────────────────────────────────── */
section{border-top:2px solid var(--gold); padding:44px 30px 52px}
.head{margin-bottom:32px; max-width:74ch}
.head .kicker{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
              color:var(--gold); margin-bottom:14px}
.head h2{font-family:var(--serif); font-size:clamp(26px,3.4vw,44px); letter-spacing:.05em;
         text-transform:uppercase; line-height:1.05; margin-bottom:14px}
.head p{color:var(--dim); font-size:12.5px; line-height:1.85; margin:0}

.grid6{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.card{margin:0; border:var(--bf); background:#000; transition:.18s}
.card:hover{border-color:var(--gold)}
.card img{display:block; width:100%; height:auto; aspect-ratio:1}
.card .art svg,.card svg{display:block; width:100%; height:auto}
.card .cap{display:flex; justify-content:space-between; gap:8px; padding:9px 10px;
           border-top:var(--bf); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.card .cap span:first-child{color:var(--gold)}
.art.placeholder{display:flex; align-items:center; justify-content:center; aspect-ratio:1;
                 background:var(--panel2); color:var(--gold); font-size:13px}

.traitgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.traitcol{border:var(--b); background:var(--panel); padding:14px 15px}
.traitcol h4{font-size:10px; letter-spacing:.2em; color:var(--gold); margin:0 0 11px;
             padding-bottom:9px; border-bottom:var(--bf)}
.traitcol ul{list-style:none; margin:0; padding:0}
.traitcol li{display:flex; justify-content:space-between; gap:10px; font-size:11.5px;
             padding:4px 0; color:var(--paper)}
.traitcol li i{font-style:normal; color:var(--dim)}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tile{border:var(--b); background:var(--panel); padding:20px 22px 22px}
.tile .n{font-size:10px; letter-spacing:.2em; color:var(--gold); margin-bottom:12px}
.tile h3{font-size:15px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px}
.tile p{color:var(--dim); font-size:12px; line-height:1.85; margin:0}

#faq details{border:var(--b); background:var(--panel); margin-bottom:10px}
#faq summary{cursor:pointer; list-style:none; padding:15px 18px; font-size:12.5px;
             letter-spacing:.1em; text-transform:uppercase; display:flex;
             justify-content:space-between; gap:18px; align-items:center}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"[ + ]"; color:var(--gold); flex:none; font-size:11px}
#faq details[open] summary::after{content:"[ – ]"}
#faq details p{color:var(--dim); font-size:12px; line-height:1.9; margin:0; padding:0 18px 18px}

footer{border-top:2px solid var(--gold); padding:20px 30px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
      font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.foot .addr{color:var(--gold)}
.foot .addr:hover{background:var(--gold); color:#000}

/* wallet sheet */
.sheet{position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; align-items:center;
       justify-content:center; z-index:80; padding:24px}
.sheet[open]{display:flex}
.sheet .box{background:var(--panel); border:2px solid var(--gold); padding:26px; width:min(420px,100%);
            box-shadow:10px 10px 0 rgba(217,174,78,.2)}
.sheet h3{margin:0 0 18px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.wopt{display:flex; align-items:center; gap:12px; width:100%; margin-bottom:8px; background:transparent;
      border:var(--b); color:var(--paper); padding:12px 14px; cursor:pointer;
      font-family:var(--mono); font-size:12.5px; transition:.15s}
.wopt:hover{background:var(--gold); color:#000}
.wopt img{width:20px; height:20px}
#sheetClose{width:100%; border:var(--bf); background:transparent; color:var(--dim);
            font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
            padding:11px; cursor:pointer; margin-top:6px}
#sheetClose:hover{border-color:var(--gold); color:var(--gold)}

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:1240px){
  .grid6{grid-template-columns:repeat(3,1fr)}
  .traitgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .statband{grid-template-columns:repeat(2,1fr)}
  .statband .stat{border-bottom:var(--b)}
  .statband .stat:nth-child(2n){border-right:0}
  .statband .stat.wide{grid-column:span 2; border-bottom:0}
  .hero{grid-template-columns:1fr}
  .hero > div:first-child{border-right:0; border-bottom:2px solid var(--gold)}
  .nav{order:3; width:100%; overflow-x:auto; border-top:2px solid var(--gold)}
  .nav a{border-left:0; border-right:2px solid var(--gold); padding:12px 20px; white-space:nowrap}
  .brand{flex:1 1 100%; padding:14px 20px; border-bottom:2px solid var(--gold)}
  #connect{width:100%; border-left:0; padding:15px 22px; text-align:center}
  .grid3{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:12.5px}
  main.shell{border-width:1px; box-shadow:5px 5px 0 rgba(217,174,78,.18); margin-bottom:22px}
  .hero > div:first-child,.mint{padding:22px 16px 26px}
  section{padding:32px 16px 38px}
  .grid6{grid-template-columns:repeat(2,1fr)}
  .traitgrid{grid-template-columns:repeat(2,1fr); gap:10px}
  .traitcol{padding:12px 12px}
  .traitcol li{font-size:11px}
  .stats,.cells{grid-template-columns:1fr}
  .statband{grid-template-columns:1fr}
  .statband .stat{border-right:0}
  .stat.wide{grid-column:span 1}
  .presets{grid-template-columns:repeat(3,1fr)}
  .mintrow{flex-wrap:wrap}
  .qty{width:100%}
  .qty button{width:auto; flex:1 1 0; min-width:38px}
  .qty input{flex:2 1 0; width:auto; min-width:0}
  .qty .max{flex:0 0 auto; padding:0 10px}
  .btn.big{width:100%; flex:1 0 100%; padding:16px}
  .yourgrid{grid-template-columns:repeat(4,1fr)}
  footer{padding:16px}
}


/* grid children default to min-width:auto, so one long mono word (a trait name,
   a hash) makes the whole console overflow sideways on a phone. */
.hero,.stats,.cells,.grid6,.grid3,.traitgrid,.thumbs,.presets,.mintrow{min-width:0}
.hero > div,.mint,.stat,.cell,.tile,.traitcol,.card,.frame,.qty{min-width:0}
.stat b,.cell b,.platecap,.lead,.head p,#faq summary{overflow-wrap:anywhere}
.traitcol li span{overflow-wrap:normal; hyphens:none}
.traitcol li i{white-space:nowrap}
h1{overflow-wrap:anywhere}

@media (max-width:560px){
  .traitgrid{grid-template-columns:1fr}
}