/* ==========================================================================
   base.css — shared across every page
   Variables · reset · typography · cursor · topbar
   ========================================================================== */

/* -- 1. Design tokens ----------------------------------------------------- */
:root {
  --bg:      oklch(0.16 0.012 80);
  --bg-2:    oklch(0.20 0.014 80);
  --ink:     oklch(0.96 0.01  90);
  --ink-2:   oklch(0.78 0.012 90);
  --ink-3:   oklch(0.55 0.012 90);
  --line:    oklch(0.30 0.012 90 / 0.5);
  --acc:     oklch(0.88 0.22  120);
  --acc-ink: oklch(0.18 0.05  120);
}

/* -- 2. Reset ------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-emoji: text;
  overflow-x: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--acc); color: var(--acc-ink); }

.arr,
.ll-arr,
.scroll-nudge span:last-child,
.soc > span:last-child,
.next a > span:last-child {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-variant-emoji: text;
}

/* -- 3. Utility classes --------------------------------------------------- */
.mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.syne {
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 40px;
}
.section-label::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--ink-3);
}

/* -- 4. Custom cursor ----------------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  transition: width .25s, height .25s, background .25s;
}
.cursor-ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  transition: width .35s, height .35s, border-color .35s, background .35s;
}
.cursor-ring.hover {
  width: 70px; height: 70px;
  background: rgba(255, 255, 255, .06);
  border-color: #fff;
}
.cursor-dot.hover { width: 0; height: 0; }

/* Touch / mobile: hide custom cursor, use the real one */
@media (hover: none) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* -- 5. Topbar ------------------------------------------------------------ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  mix-blend-mode: difference;
}
/* Back-link in the topbar of every subpage. Pill-shaped so it reads
   as a button rather than plain text. */
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  transition: color .25s, border-color .25s, background .25s, padding .25s;
}
.topbar a:hover {
  color: var(--acc);
  border-color: var(--acc);
  padding-right: 16px;
}
.topbar .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  margin-right: 8px;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* URL play — bottom-left tag */
.urlplay {
  position: fixed;
  left: 28px; bottom: 22px;
  z-index: 50;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  mix-blend-mode: difference;
}
.urlplay .slash { color: var(--acc); }


/* -- 6. Responsive (shared across every page) ----------------------------
   Three phone breakpoints. Page-specific layouts live in home.css /
   case-study.css / about-long.css and cascade after these global tweaks. */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .topbar { padding: 14px 18px; font-size: 10px; }
}
@media (max-width: 640px) {
  .topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  /* Shrink the long right-hand tagline; the "← back / title"
     link on the left is what actually gets used. */
  .topbar > div:last-child { font-size: 9px; opacity: .55; }
  /* Keep the URL-play tag but shrink it a touch. */
  .urlplay { left: 16px; bottom: 14px; font-size: 9px; letter-spacing: .06em; }
  .section-label { font-size: 10px; margin-bottom: 28px; }
  .section-label::before { width: 20px; }
}
@media (max-width: 420px) {
  .topbar > div:last-child { display: none; }
  .topbar { justify-content: flex-start; }
}