/* Shared layer (Oct 2026 restyle: grotesk + paper + sculptures).
   Linked AFTER each page's inline <style>, so these tokens and components
   win over the per-page defaults without rewriting every page's CSS. */

:root {
  --paper:   #F1E6DD;
  --paper-2: #E8DBD0;
  --ink:     #141414;
  --ink-60:  rgba(20,20,20,0.72);
  --ink-25:  rgba(20,20,20,0.14);
  --sans:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --serif:   var(--sans);            /* legacy name: every heading is grotesk now */

  /* legacy aliases used by older page CSS */
  --white:     #F1E6DD;
  --white-rgb: 241, 230, 221;
  --bg-warm:   #E8DBD0;
  --blue:      #141414;
  --blue-rgb:  20, 20, 20;
  --blue-lt:   rgba(20,20,20,0.05);
  --blue-dark: #4A4540;
  --blue-mid:  rgba(241,230,221,0.74);
  --blue-pale: rgba(241,230,221,0.92);
  --card-dark: #141414;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.035em; }
em { font-style: italic; }
::selection { background: var(--ink); color: var(--paper); }

/* ── Header ───────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: start;
  gap: 24px;
  padding: 20px 32px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.3s;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header a { color: inherit; text-decoration: none; }
.site-header a:hover,
.site-header a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.site-header .sh-name { font-weight: 500; }
.site-header .sh-clock { font-variant-numeric: tabular-nums; }
.site-header .sh-right { justify-self: end; text-align: right; }
.site-header.on-dark { color: var(--paper); }
.site-header a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding: 16px 20px; }
  .site-header .sh-clock { display: none; }
  .site-header .sh-nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-header .sh-right { grid-column: 2; grid-row: 2; }
}

/* ── Footnote marker ──────────────────────────────── */
.fn { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-60); }

/* ── Sculpture slot: still image first, WebGL fades over it ─────────── */
/* :where() = zero specificity, so each page's own positioning of the slot wins */
:where(.sculpt) { position: relative; }
.sculpt-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;            /* transparent cutout (background removed on Replicate) */
  transition: opacity 0.8s var(--ease, ease);
  pointer-events: none;
}
.sculpt-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease, ease);
  pointer-events: none;
}
.sculpt.sculpt-live .sculpt-canvas { opacity: 1; }
.sculpt.sculpt-live .sculpt-still { opacity: 0; }

/* ── Small shared bits ────────────────────────────── */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }

#cursor { background: var(--ink); }

/* ── Case-study hero: paper, title left, sculpture right ─────────────── */
.cs-hero {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: end;
  min-height: min(86vh, 820px);
  padding: 120px 32px 48px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.cs-hero-text { position: relative; z-index: 1; }
.cs-back {
  display: inline-block;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 56px;
}
.cs-label { font-size: 13px; color: var(--ink-60); margin-bottom: 20px; }
.cs-title {
  font-size: clamp(52px, 7.2vw, 124px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.cs-title em { font-style: italic; color: inherit; }
.cs-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 32px;
  font-size: 13px;
}
.cs-live::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); margin-right: 8px;
  animation: cs-pulse 2s ease-in-out infinite;
}
.cs-sculpt {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  justify-self: end;
  align-self: center;
}
.cs-cover { margin: 0; background: var(--paper-2); }
.cs-cover img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: cover; }
@keyframes cs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.wip-pill.on-light,
.pcard-meta .wip-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ink-25);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.wip-pill.on-light::before,
.pcard-meta .wip-pill::before { background: var(--ink); }

/* At a glance strip: sentence-case Obys labels */
.glance { background: var(--paper); border-top: 1px solid var(--ink-25); padding-left: 32px; padding-right: 32px; }
@media (max-width: 900px) { .glance { padding-left: 20px; padding-right: 20px; } }
.glance-label, .glance-term {
  font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
.glance-label::before { content: '(1) '; color: var(--ink-60); }
.glance-term::before { content: '('; }
.glance-term::after { content: ')'; }

@media (max-width: 900px) {
  .cs-hero { grid-template-columns: 1fr; min-height: auto; padding: 104px 20px 32px; }
  .cs-back { margin-bottom: 32px; }
  .cs-sculpt { max-width: 340px; justify-self: center; order: -1; margin-bottom: -8px; }
}

/* ── Work page: text-toggle filters + sculpture accents on cards ─────── */
.filter-row { gap: 4px 20px; }
.filter-btn,
.filter-btn:hover,
.filter-btn.active,
.filter-btn.active-blue {
  background: none; border: none; padding: 4px 0;
  font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--ink-60);
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active-blue { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.filter-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.page-label { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-60); font-weight: 400; }
.page-label::before { content: '(1) '; }

.pcard-body { position: relative; }
.pcard-sculpt {
  position: absolute; right: 0; top: -64px;
  width: 104px; height: 104px; object-fit: contain;
  pointer-events: none;
  transition: transform 0.6s var(--ease, ease);
}
.pcard:hover .pcard-sculpt { transform: translateY(-6px) rotate(-4deg); }
.pcard-featured .pcard-sculpt { position: static; display: block; width: 160px; height: 160px; margin: 0 0 16px auto; }
.pcard-meta, .pcard-cred { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 400; }
.pcard-title { font-weight: 500; letter-spacing: -0.035em; }
.pcard-body .pcard-meta, .pcard-body .pcard-title { padding-right: 112px; }
.pcard-featured .pcard-body .pcard-meta, .pcard-featured .pcard-body .pcard-title { padding-right: 0; }
@media (max-width: 900px) {
  .pcard-sculpt { width: 80px; height: 80px; top: -48px; }
  .pcard-body .pcard-meta, .pcard-body .pcard-title { padding-right: 88px; }
  .pcard-featured .pcard-sculpt { position: absolute; width: 80px; height: 80px; margin: 0; }
  .pcard-featured .pcard-body .pcard-meta, .pcard-featured .pcard-body .pcard-title { padding-right: 88px; }
}
@media (prefers-reduced-motion: reduce) { .pcard:hover .pcard-sculpt { transform: none; } }

/* Old pages used tracked caps for small labels; the grotesk system is sentence case */
.back-link,
.body-label,
.filter-btn,
.glance-label,
.glance-term,
.live-text,
.page-label,
.pager-dir,
.pager-home,
.pcard-cred,
.pcard-meta,
.project-label,
.speak-link,
.speak-meta,
.speaking-label,
.turnaround-label,
.wall-preview-label {
  text-transform: none;
  letter-spacing: 0;
}