/* ============================================================
   SHARED BASE — design tokens + chrome common to the "sheet"
   pages (index.html, privacy.html, 404.html). Page-specific
   rules live in their own stylesheet (index.css, privacy.css,
   404.css) and are loaded alongside this file.
   ============================================================ */
:root{
  --paper:   #333333;  /* card / page background   */
  --coal:    #1f1f1f;  /* card / page background   */
  --ink:     #ffffff;  /* primary text + borders   */
  --cobalt:  #3e83c8;  /* spot color 1              */
  --coral:   #3756cb;  /* spot color 2              */
  --mint:    #FFFFFF;  /* spot color 3              */
  --line:    3px;       /* border weight             */
  --shadow:  10px 10px 0; /* offset "misregistration" shadow */
}

*{ box-sizing:border-box; }
html{ -webkit-tap-highlight-color: transparent; }

body{
  margin:0; min-height:100vh; background: var(--coal);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.03) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.03) 0, transparent 40%);
  display:flex; justify-content:center; padding: 56px 16px;
  font-family:'Space Grotesk', sans-serif; color: var(--ink);
}

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:2px; }

/* ---------- the "sheet" = branding card ----------
   Pages set their own max-width / breakpoint box-shadow via
   a page-specific `.sheet{ max-width:...px; }` rule. */
.sheet{
  width:100%; background: var(--paper);
  border: var(--line) solid var(--paper);
  box-shadow: var(--shadow) var(--coral);
  position:relative;
}

/* ---------- masthead / page nav (shared across all pages) ---------- */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--ink); color: var(--paper);
  font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  border-bottom: var(--line) solid var(--ink);
}
.masthead .issue{ padding:10px 14px; opacity:.75; white-space:nowrap; }
.tabs{ display:flex; }
.tabs a{
  padding:10px 14px;
  border-left:1px solid rgba(241,236,222,.25);
  transition: background .15s ease, color .15s ease;
}
.tabs a:hover{ background: rgba(241,236,222,.1); }
.tabs a.active{ background: var(--coral); color: var(--ink); font-weight:700; }

/* ---------- link card component (index.html + 404.html) ---------- */
.linkcard{ position:relative; display:block; }
.linkcard-dup{
  position:absolute; inset:0;
  background: var(--tag, var(--cobalt));
  border: var(--line) solid var(--ink);
  transform: translate(5px,5px);
  transition: transform .15s ease;
}
.linkcard-front{
  position:relative;
  display:flex; align-items:stretch;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  transition: transform .15s ease;
}
.linkcard:hover .linkcard-front{ transform: translate(-2px,-2px); }
.linkcard:hover .linkcard-dup{ transform: translate(7px,7px); }
.linkcard:active .linkcard-front{ transform: translate(0,0); }

.arrow{
  flex:0 0 40px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono', monospace;
  opacity:.6;
}

/* ---------- footer ---------- */
footer{
  border-top: var(--line) solid var(--ink);
  padding: 18px 28px 24px;
  text-align:center;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.65;
}

@media (prefers-reduced-motion: reduce){
  .linkcard-front, .linkcard-dup{ transition:none; }
}