/* ==========================================================
   mindslikemine — SHARED FOUNDATION
   Tokens, reset, the pixel box, buttons and the header.
   Loaded by index.html and book.html, so a colour changed here
   changes it everywhere. Page-specific CSS stays inline in each
   page below this file.
   ========================================================== */

/* ==========================================================
   1. COLOR + TYPE TOKENS
   Change these to re-skin the whole site.
   ========================================================== */
:root{
  --night:      #1a1a2e;   /* deep indigo */
  --night-2:    #26264a;   /* raised dark panel */
  --paper:      #ffe3f1;   /* soft neon pink */
  --paper-2:    #ffc9de;   /* pink shade */
  --paper-hi:   #fff2f8;   /* pink highlight */
  --oak:        #7b2d6b;   /* deep magenta */
  --oak-dark:   #2d1b4e;   /* outline / border */
  --moss:       #06d6a0;   /* teal accent */
  --moss-dark:  #049c76;
  --lamp:       #ffd166;   /* GOLD — primary accent */
  --lamp-dark:  #e0a930;
  --berry:      #ff6b9d;   /* hot pink — secondary accent */
  --ink:        #2d1b4e;   /* body text on light sections */
  --ink-soft:   #6b4a8a;

  --deep: #0d0d1a;
  --dark-edge: #4a4a7a;
  --dark-lo: #14142a;
  --well: #10101f;
  --dim: #9090c0;
  --dim-2: #9a9ac8;      /* light enough to clear 4.5:1 on the dark panels */
  --on-dark: #d8d8f0;
  --on-dark-hi: #f0f0ff;
  --paper-3: #fff0f7;
  --lamp-hi: #ffe08a;
  --lamp-hover: #ffc94d;
  --ground: #049c76;
  --moss-hi: #6ee8c5;
  --moss-btn: #037355;   /* deep enough for white label text to clear 4.5:1 */
  --moss-hover: #02624a;
  --paper-alt: #ffd6ea;

  --px: 4px;               /* base pixel unit */
  --wrap: 1080px;

  /* Swap either of these one line to re-font the entire site.
     Other pixel options: 'Silkscreen', 'Jersey 25', 'VT323', 'Pixelify Sans'
     (add the matching family to the Google Fonts <link> above first).
     To go all-in on Press Start 2P, set --font-body to it as well and
     drop --base-size to 13px, or paragraphs will overflow their boxes. */
  --font-body:    'Monocraft', monospace;
  /* ONE RULE: Press Start 2P is for headings, prices and the logo.
     Anything you read or click is DotGothic16. Nothing else.

     Type scale — every value is a whole number. Press Start 2P sizes
     are multiples of 8 and DotGothic16 sizes are even, because pixel
     fonts only render crisply on their own grid. Never use calc() here. */
  --t-xs: 14px;   /* credits, timecode, meta */
  --t-sm: 16px;   /* nav, buttons, labels */
  --t-md: 18px;   /* body, lists, reviews */
  --t-lg: 20px;   /* hero lede */
  --d-sm: 16px;   /* small display */
  --d-md: 24px;   /* section headings */
  --d-lg: 32px;   /* hero + prices */
  --font-display: 'Press Start 2P', monospace;
}

/* ==========================================================
   2. RESET + BASE
   ========================================================== */
*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--night);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:var(--t-md);
  line-height:1.7;
  -webkit-font-smoothing:none;
  overflow-x:hidden;
}

/* Keeps any pixel art you drop in crisp instead of blurry */
img{max-width:100%;display:block;image-rendering:pixelated}

h1,h2,h3,.ui{font-family:var(--font-display);font-weight:600;line-height:1.6;letter-spacing:0}

a{color:var(--lamp);text-decoration:none}
a:hover{color:var(--paper-hi)}

:focus-visible{outline:var(--px) solid var(--lamp);outline-offset:var(--px)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.eyebrow{
  font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--lamp);display:block;margin-bottom:14px;
}

/* ==========================================================
   3. THE PIXEL BOX
   Notched corners via layered box-shadows — no border-radius,
   no images. This is the core visual device of the whole site.
   ========================================================== */
.px-box{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding:28px;
  margin:var(--px);
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--oak-dark),
    0 var(--px) 0 0 var(--oak-dark),
    calc(var(--px)*-1) 0 0 0 var(--oak-dark),
    var(--px) 0 0 0 var(--oak-dark),
    inset 0 var(--px) 0 0 var(--paper-hi),
    inset var(--px) 0 0 0 var(--paper-hi),
    inset calc(var(--px)*-1) 0 0 0 var(--paper-2),
    inset 0 calc(var(--px)*-1) 0 0 var(--paper-2);
}

/* Dark variant — used for the players so they read like hardware */
.px-box.dark{
  background:var(--night-2);
  color:var(--paper);
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--deep),
    0 var(--px) 0 0 var(--deep),
    calc(var(--px)*-1) 0 0 0 var(--deep),
    var(--px) 0 0 0 var(--deep),
    inset 0 var(--px) 0 0 var(--dark-edge),
    inset var(--px) 0 0 0 var(--dark-edge),
    inset calc(var(--px)*-1) 0 0 0 var(--dark-lo),
    inset 0 calc(var(--px)*-1) 0 0 var(--dark-lo);
}

/* ==========================================================
   4. BUTTONS — press down 4px on click, like a real key
   ========================================================== */
.btn{
  display:inline-block;
  font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--lamp);color:var(--oak-dark);
  padding:15px 20px;margin:var(--px);
  border:0;cursor:pointer;
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--oak-dark),
    0 var(--px) 0 0 var(--oak-dark),
    calc(var(--px)*-1) 0 0 0 var(--oak-dark),
    var(--px) 0 0 0 var(--oak-dark),
    inset 0 var(--px) 0 0 var(--lamp-hi),
    inset 0 calc(var(--px)*-1) 0 0 var(--lamp-dark);
  transition:transform .06s steps(1);
}
.btn:hover{background:var(--lamp-hover);color:var(--oak-dark)}
.btn:active{transform:translateY(var(--px))}

.btn.ghost{
  background:transparent;color:var(--paper);
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--paper),
    0 var(--px) 0 0 var(--paper),
    calc(var(--px)*-1) 0 0 0 var(--paper),
    var(--px) 0 0 0 var(--paper);
}
.btn.ghost:hover{background:var(--paper);color:var(--oak-dark)}

.btn.moss{background:var(--moss-btn);color:var(--paper-hi);
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--oak-dark),
    0 var(--px) 0 0 var(--oak-dark),
    calc(var(--px)*-1) 0 0 0 var(--oak-dark),
    var(--px) 0 0 0 var(--oak-dark),
    inset 0 var(--px) 0 0 var(--moss-hi),
    inset 0 calc(var(--px)*-1) 0 0 var(--moss-dark);
}
.btn.moss:hover{background:var(--moss-hover);color:var(--paper-hi)}

/* ==========================================================
   5. HEADER
   ========================================================== */
header{
  position:sticky;top:0;z-index:50;
  background:var(--night);
  box-shadow:0 var(--px) 0 0 var(--oak-dark);
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;max-width:var(--wrap);margin:0 auto}

.logo{font-weight:600;font-family:var(--font-display);font-size:var(--d-sm);color:var(--paper);letter-spacing:.02em}
.logo b{color:var(--lamp)}

nav ul{display:flex;gap:26px;list-style:none}
nav a{font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
nav a:hover{color:var(--lamp)}

/* 44px box so the only mobile nav control is comfortably tappable —
   the glyph itself is much smaller than the target it sits in. */
.menu-btn{
  display:none;background:none;border:0;color:var(--paper);
  font-family:system-ui,sans-serif;font-size:24px;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
  margin-right:calc(var(--px)*-2);
}

/* ==========================================================
   6. HEADER, SMALL SCREENS
   Lives here rather than with each page's own responsive block,
   because the header itself is shared — a page that forgot to
   copy these ends up with the full nav overflowing on a phone.
   ========================================================== */
@media (max-width:760px){
  body{font-size:17px}
  nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--night);
    padding:12px 24px 20px;box-shadow:0 var(--px) 0 0 var(--oak-dark);
  }
  nav ul.open{display:flex}
  nav li{padding:12px 0}
  .menu-btn{display:flex}
}

/* ==========================================================
   7. FOOTER
   Shared markup, so shared styling. Both pages use it verbatim
   apart from links that have to reach across pages.
   ========================================================== */
footer{padding:56px 0 44px;background:var(--night-2);box-shadow:0 calc(var(--px)*-1) 0 0 var(--oak-dark)}
.foot{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot h3{font-weight:600;font-family:var(--font-display);font-size:var(--d-sm);color:var(--paper-hi);margin-bottom:12px}
.foot ul{list-style:none}
.foot li{margin-bottom:8px;font-size:var(--t-sm)}
/* Referral offer — set in its own panel so it reads as an offer rather
   than another column of links. */
.referral{
  margin-bottom:40px;padding:20px 24px;text-align:center;
  font-size:var(--t-sm);line-height:1.6;color:var(--on-dark);
  background:var(--night);
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--deep),
    0 var(--px) 0 0 var(--deep),
    calc(var(--px)*-1) 0 0 0 var(--deep),
    var(--px) 0 0 0 var(--deep);
}
.referral b{color:var(--lamp);font-weight:600}

.copyright{margin-top:36px;font-size:var(--t-xs);color:var(--dim-2)}