/* ==========================================================================
   BASE.CSS
   Shared design system for the whole site: colors, fonts, textures,
   and reusable components (cutout cards, stickers, buttons, stamps, nav).
   Both index.html and style-guide.html load this file first.
   ========================================================================== */

:root{
  --ink:#000000;        /* base background, text, borders */
  --moss:#8DB355;        /* labels on black, sticker chips, accent shapes */
  --butter:#FFEA93;      /* highlight-marker on black sections, tape, CTA hover */
  --signal:#D90000;      /* CTA button, stamps, "red thread" accent */
  --paper:#F4EFE1;       /* neutral light section background, card faces */
  --paper-dim:#e9e1cb;   /* secondary/dimmer text on black sections */

  --cutout-border: 3px solid var(--ink);
  --cutout-shadow: 7px 7px 0 var(--ink);
  --cutout-shadow-sm: 4px 4px 0 var(--ink);
}

*{ box-sizing:border-box; margin:0; padding:0; }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  font-family:'Work Sans', sans-serif;
  background:var(--ink);
  color:var(--paper);
  line-height:1.55;
  overflow-x:hidden;
}

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--signal); color:var(--paper); }
:focus-visible{ outline:3px solid var(--butter); outline-offset:3px; }

h1,h2,h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.05;
  text-transform:uppercase;
}

code{ font-family:'Space Mono', monospace; background:rgba(0,0,0,.08); padding:.15em .4em; }
.on-ink code{ background:rgba(255,255,255,.1); }

/* ---------- eyebrow labels ---------- */
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.2rem;
}
.eyebrow::before{ content:''; width:26px; height:2px; background:currentColor; display:inline-block; }
.on-ink .eyebrow{ color:var(--moss); }
.on-paper .eyebrow{ color:var(--signal); }

/* ---------- section wrappers ---------- */
section{ position:relative; }
.on-ink{ background:var(--ink); color:var(--paper); }
.on-paper{ background:var(--paper); color:var(--ink); }

.wrap{ max-width:1180px; margin:0 auto; padding:7rem 6vw; position:relative; z-index:2; }

/* ---------- grain overlay (site-wide, fixed) ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- halftone dot textures ---------- */
.halftone{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.halftone.on-ink-tex{ background-image:radial-gradient(var(--moss) 1.4px, transparent 1.6px); background-size:16px 16px; opacity:.14; }
.halftone.on-paper-tex{ background-image:radial-gradient(var(--ink) 1.2px, transparent 1.6px); background-size:16px 16px; opacity:.06; }

/* ---------- torn paper edge divider (one shape, reused via <use>) ---------- */
.torn-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.torn-edge{ position:absolute; left:0; right:0; bottom:-1px; height:44px; line-height:0; z-index:3; }
.torn-edge svg{ width:100%; height:100%; display:block; }
.torn-edge.to-paper{ color:var(--paper); }
.torn-edge.to-ink{ color:var(--ink); }
.torn-edge.thread::after{
  content:''; position:absolute; left:0; right:0; top:6px; height:2px;
  background:var(--signal); opacity:.85;
}

/* ---------- tape strip decoration ---------- */
.tape{
  position:absolute; width:74px; height:26px;
  background:rgba(255,234,147,.88);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.15);
}

/* ---------- signature cutout / sticker system ---------- */
.cutout{
  background:var(--paper); color:var(--ink);
  border:var(--cutout-border); box-shadow:var(--cutout-shadow);
}
.sticker{
  display:inline-flex; align-items:center;
  font-family:'Space Mono', monospace; font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.06em; padding:.55em 1em;
  border:2px solid var(--ink); box-shadow:var(--cutout-shadow-sm);
  color:var(--ink); background:var(--paper);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sticker:hover{ transform:translate(-2px,-2px) rotate(0deg); box-shadow:6px 6px 0 var(--ink); }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Space Mono', monospace; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:.9rem;
  padding:1em 1.8em;
  background:var(--signal); color:var(--paper);
  border:var(--cutout-border); box-shadow:var(--cutout-shadow);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--butter); color:var(--ink); transform:translate(-3px,-3px) rotate(-1deg); box-shadow:10px 10px 0 var(--ink); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--ink); }

mark{ background:var(--butter); color:var(--ink); padding:0 .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.on-paper mark{ background:var(--moss); }

/* ---------- shared animations ---------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 5vw;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,234,147,.2);
}
.logo-stamp{
  width:46px; height:46px; border-radius:50%;
  border:2px dashed var(--butter);
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton', sans-serif; font-size:.95rem; color:var(--butter);
  flex:none;
}
.nav-links{ display:flex; gap:1.6rem; list-style:none; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a{
  font-family:'Space Mono', monospace; font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--paper);
  padding-bottom:3px; border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nav-links a:hover{ border-color:var(--moss); color:var(--moss); }

/* ---------- footer ---------- */
.footer-strip{
  position:relative; background:var(--paper); color:var(--ink);
  padding:2.2rem 6vw 2.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  font-family:'Space Mono', monospace; font-size:.75rem; letter-spacing:.05em;
}
.back-top{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:var(--ink); font-family:'Space Mono', monospace; font-size:.7rem; font-weight:700;
  box-shadow:var(--cutout-shadow-sm); background:var(--butter);
  flex:none;
}

/* ---------- shared responsive ---------- */
@media (max-width:900px){
  .wrap{ padding:6.5rem 6vw 5.5rem; }
}
@media (max-width:600px){
  nav{ padding:.9rem 5vw; }
  .nav-links{ display:none; }
}