/* ============================================================
   JAMES APTER — Global Stylesheet
   Shared design tokens, reset, nav, footer, and utilities.
   Page-specific styles live in css/[page].css
   ============================================================ */
 
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&display=swap');
 
/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Primary palette */
  --yellow: #f5d000;
  --blue:   #0000EE;   /* classic hyperlink blue */
  --blue-v: #551A8B;   /* visited link purple */
  --red:    #e8221e;
  --green:  #1abf5a;
 
  /* Neutrals — more white, less cream */
  --ink:    #1a1a1a;
  --cream:  #ffffff;
  --cream2: #f4f4f4;
  --cream3: #e8e8e8;
  --gray:   #666660;
  --gray-l: #aaaaaa;
 
  /* Borders */
  --border: 2px solid var(--ink);
  --bsm:    1px solid var(--ink);
 
  /* Typography */
  --fd: 'Anton', sans-serif;     /* bold condensed display font */
  --fm: 'Space Mono', monospace; /* body/UI mono */
 
  /* Layout */
  --nav-h: 60px;
  --pad-x: 40px;
 
  /* Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
 
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fm);
  background: var(--cream);
  color: var(--ink);
  cursor: crosshair;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
 
/* ── Nav ────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  background: var(--cream);
  border-bottom: var(--border);
}
 
/* Logo: J (yellow) + A (red) + blue dot */
.logo     { display: flex; align-items: center; }
.logo-j,
.logo-a   {
  font-family: var(--fd); font-weight: 700; font-size: 20px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: var(--border); line-height: 1; color: var(--ink);
}
.logo-j   { background: var(--yellow); }
.logo-a   { background: var(--red); color: #fff; margin-left: -1px; }
.logo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); border: var(--bsm);
  margin-left: 5px; flex-shrink: 0;
}
 
.nav-links   { display: flex; gap: 32px; font-size: 11px; letter-spacing: 0.1em; }
.nav-links a { position: relative; transition: color .15s; }
.nav-links a:hover { color: var(--blue); text-decoration: underline; }
.nav-links a.active { color: var(--blue-v); text-decoration: underline; }
.nav-links a::after { display: none; }
 
.nav-avail { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--gray); }
.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
 
/* ── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: var(--border);
  padding: 18px 36px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--gray); letter-spacing: 0.05em;
  background: var(--cream);
}
footer a { border-bottom: 1px solid var(--gray-l); transition: color .15s, border-color .15s; }
footer a:hover { color: var(--ink); border-color: var(--ink); }
.ft-links { display: flex; gap: 20px; }
 
/* ── Marquee ────────────────────────────────────────────────── */
.mq { overflow: hidden; background: var(--yellow); padding: 9px 0; border-bottom: var(--border); }
.mq-inner { display: flex; white-space: nowrap; animation: mq 22s linear infinite; }
.mq-inner span {
  font-size: 10px; letter-spacing: 0.16em;
  padding: 0 36px;
  display: inline-flex; align-items: center; gap: 36px;
}
.mq-inner span::after { content: '✦'; font-size: 8px; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
 
/* ── 4-color accent strip ───────────────────────────────────── */
.accent-strip { display: flex; height: 8px; }
.accent-strip span { flex: 1; }
.accent-strip span:nth-child(1) { background: var(--red); }
.accent-strip span:nth-child(2) { background: var(--blue); }
.accent-strip span:nth-child(3) { background: var(--yellow); }
.accent-strip span:nth-child(4) { background: var(--green); }
 
/* ── Buttons ────────────────────────────────────────────────── */
.btn-p {
  display: inline-block;
  background: var(--ink); color: var(--cream);
  border: var(--border); padding: 13px 26px;
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.09em;
  transition: background .15s, border-color .15s;
}
.btn-p:hover { background: var(--blue); border-color: var(--blue); }
 
.btn-outline {
  display: inline-block;
  background: transparent; color: var(--ink);
  border: var(--border); padding: 10px 22px;
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em;
  transition: background .15s;
}
.btn-outline:hover { background: var(--cream2); }
 
.btn-sm {
  display: inline-block;
  background: var(--ink); color: var(--cream);
  border: var(--border); padding: 10px 20px;
  font-family: var(--fm); font-size: 10px; letter-spacing: 0.09em;
  transition: background .15s, border-color .15s;
  align-self: flex-start;
}
.btn-sm:hover { background: var(--blue); border-color: var(--blue); }
 
.btn-ghost {
  font-size: 11px; letter-spacing: 0.07em; color: var(--gray);
  border-bottom: 1px solid var(--gray-l); padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }
 
/* ── Typography helpers ─────────────────────────────────────── */
.wordart {
  font-family: var(--fd); font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  font-style: normal;
}
 
/* Stroke-only outlined text */
.outline {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
}
 
/* Yellow highlight chip */
.accent-y {
  background: var(--yellow);
  padding: 0 6px;
  display: inline-block;
  transform: rotate(-1deg);
  border: var(--bsm);
}
 
/* Small uppercase label */
.eyebrow { font-size: 10px; letter-spacing: 0.15em; color: var(--gray); margin-bottom: 16px; }
 
/* ── Page title (inner pages) ───────────────────────────────── */
.page-title {
  font-family: var(--fd);
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 700; line-height: 0.9; letter-spacing: -3px;
}
 
/* ── Shared CTA section ─────────────────────────────────────── */
.cta-sec    { padding: 88px var(--pad-x); display: flex; align-items: center; justify-content: center; text-align: center; }
.cta-inner  { max-width: 600px; }
.cta-kick   { font-size: 10px; letter-spacing: 0.2em; color: var(--gray); margin-bottom: 18px; }
.cta-h      { font-family: var(--fd); font-weight: 700; font-size: clamp(36px, 5vw, 58px); line-height: 1.0; letter-spacing: -1.5px; margin-bottom: 36px; }
 
/* ── Fade-up animation ──────────────────────────────────────── */
@keyframes fu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fu  { animation: fu .5s var(--ease) both; }
.fu1 { animation-delay: .07s; }
.fu2 { animation-delay: .14s; }
.fu3 { animation-delay: .24s; }
 
/* ── Reach corner pixel squares ─────────────────────────────── */
.reach-corner      { position: absolute; bottom: 0; right: 0; width: 48px; height: 48px; }
.reach-corner span { position: absolute; width: 24px; height: 24px; display: block; }
.reach-corner span:nth-child(1) { background: var(--red);    bottom: 24px; right: 24px; }
.reach-corner span:nth-child(2) { background: var(--blue);   bottom: 0;    right: 24px; }
.reach-corner span:nth-child(3) { background: var(--yellow); bottom: 24px; right: 0;    }
.reach-corner span:nth-child(4) { background: var(--green);  bottom: 0;    right: 0;    }
 
/* ── Platform badge ─────────────────────────────────────────── */
.platform-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: var(--border); padding: 5px 14px;
  background: white; font-size: 10px; letter-spacing: 0.1em;
  font-weight: 700; margin-bottom: 24px;
}
.p-icon { width: 22px; height: 22px; flex-shrink: 0; }