/* ===========================================================================
   Synapticpunk site styles.

   The design was authored in Claude Design as a .dc.html canvas file, which
   renders through a React runtime (x-import / sc-if / sc-for / DCLogic). That
   runtime is a design tool, not a web framework, so it is deliberately NOT
   shipped here. The six design-system components the page uses — Button, Card,
   Badge, Plate, Toast, Input — are reimplemented below as plain CSS classes,
   transcribed from their JSX source so the visual result matches.

   Tokens are NOT redefined here. Everything below consumes styles.css.
   =========================================================================== */

/* ---------------------------------------------------------------- primitives */

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

.sp-grain-layer {
  position: absolute;
  inset: 0;
  background-image: var(--texture-grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}

iframe.sp-visually-hidden { border: 0; }

.sp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------- Button */
/* components/actions/Button.jsx — primary/secondary/ghost, sm/md/lg, notched. */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  height: var(--control-h-md);
  padding: 0 var(--control-pad-x-md);
  font: var(--type-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  transition: var(--transition-control);
  /* notch: the clipped bottom-right corner, md size */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  box-shadow: var(--shadow-cut-1);
  appearance: none;
}

.sp-btn--sm { height: var(--control-h-sm); padding: 0 var(--control-pad-x-sm); font-size: var(--text-2xs);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.sp-btn--lg { height: var(--control-h-lg); padding: 0 var(--control-pad-x-lg); font-size: var(--text-sm);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }

.sp-btn--block { width: 100%; }

.sp-btn--primary   { background: var(--accent-primary); color: var(--accent-primary-ink); border-color: transparent; }
.sp-btn--primary:hover  { background: var(--accent-primary-hover); }
.sp-btn--primary:active { background: var(--accent-primary-press); }

.sp-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.sp-btn--secondary:hover  { background: var(--bg-field); }
.sp-btn--secondary:active { background: rgba(255,255,255,0.10); }

.sp-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; box-shadow: none; }
.sp-btn--ghost:hover  { background: var(--bg-field); }
.sp-btn--ghost:active { background: rgba(255,255,255,0.10); }

.sp-btn:hover  { transform: translateY(var(--lift-y)); box-shadow: var(--shadow-cut-2); }
.sp-btn--ghost:hover { box-shadow: none; }
.sp-btn:active { transform: scale(var(--press-scale)); }

/* A clip-path would cut an outset focus ring, so clipped controls take it inset.
   (Design system, "Interaction states".) */
.sp-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--bg-page), inset 0 0 0 4px var(--focus-ring);
}

.sp-btn[disabled], .sp-btn[aria-disabled="true"] {
  background: var(--bg-field);
  border-color: var(--border-hairline);
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------- Card */
/* components/surfaces/Card.jsx — ink tone, 20px radius, cut-2 shadow, grain. */

.sp-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-cut-2);
  transition: var(--transition-lift);
}

.sp-card__body { position: relative; z-index: 1; padding: var(--space-6); }
.sp-card__body--lg { padding: var(--space-8); }
.sp-card__media { position: relative; }

/* ---------------------------------------------------------------- Card media */

.sp-card__media img { display: block; }

/* The card's last row: meta on the left, artist on the right. Paired on one
   line rather than pinned to the card corner so the two stay on the same
   baseline even if a card in the pair is stretched taller than its content. */
.card-footline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Off the artwork now, so it takes the card's own palette — no per-image
   colour and no shadow. */
.sp-card__credit {
  font: var(--type-data);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}

/* Three studies of Fenix — marker, pencil, papercut — run full bleed across
   the card: no padding, no gutters, three equal columns butted together, the
   same edge-to-edge treatment as the Crooked Hold'em card's artwork.

   aspect-ratio rather than a fixed height on purpose. Each column is a third
   of the card, and all three sources sit within ~1% of 3:4, so a 3:4 box means
   object-fit has almost nothing to crop — the papercut keeps its paper-doll
   tabs, which a taller box would slice off. It also stays correct as the card
   width changes instead of only at one viewport. */
.sp-card__media--triptych {
  display: flex;
  align-items: stretch;
}
.sp-card__media--triptych img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* Height-matched to the Fenix triptych beside it. That strip is three 3:4
   columns, so its height is always 4/9 of the card width — which makes 9/4 the
   ratio that keeps the two cards' artwork the same height at every width,
   rather than a fixed pixel height that would only line up at one viewport.
   The cost is vertical crop: the source is 821x527 (~1.56) against a 2.25 box,
   so about a third of its height is cut. object-position holds the upper part,
   where the composition sits. */
.sp-card__media--art img {
  width: 100%;
  aspect-ratio: 9 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 22%;
}

/* -------------------------------------------------------------------- Badge */
/* components/display/Badge.jsx — neutral and brand tones, with dot. */

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  font: var(--type-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 1px solid;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.sp-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

.sp-badge--neutral { background: var(--bg-field); color: var(--text-secondary); border-color: var(--border-subtle); }
.sp-badge--brand {
  background: color-mix(in oklab, var(--violet-500) 20%, transparent);
  color: var(--violet-300);
  border-color: color-mix(in oklab, var(--violet-500) 45%, transparent);
}

/* -------------------------------------------------------------------- Plate */
/* components/surfaces/Plate.jsx — nested cut-paper chassis, ink tone, 1 layer. */

.sp-plate { position: relative; }
.sp-plate__shell {
  background: var(--ink-700);
  border-radius: calc(var(--radius-lg) + 6px);
  padding: 10px;
  box-shadow: var(--shadow-cut-3);
}
.sp-plate__inner {
  position: relative;
  background: var(--ink-800);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--edge-cut), var(--shadow-cut-1);
  color: var(--text-primary);
}
.sp-plate__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-metal);
  margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------- Toast */
/* components/feedback/Toast.jsx — success tone, coloured top rule. */

.sp-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--ink-800);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--status-success);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-cut-3);
  padding: var(--space-4);
  animation: sp-toast-in var(--dur-base) var(--ease-settle);
}
@keyframes sp-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sp-toast__pip {
  width: 8px; height: 8px;
  margin-top: 6px;
  flex: 0 0 8px;
  background: var(--status-success);
  border-radius: var(--radius-pill);
}
.sp-toast__title { font: var(--type-subheading); font-size: var(--text-sm); color: var(--text-primary); }
.sp-toast__body  { font: var(--type-body-sm); color: var(--text-secondary); margin-top: 2px; }

/* -------------------------------------------------------------------- Input */
/* components/forms/Input.jsx — uppercase label, field, error text. */

.sp-field { display: flex; flex-direction: column; gap: var(--space-2); }

.sp-field__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sp-field__input {
  width: 100%;
  background: var(--bg-field);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: var(--type-body);
  padding: 0 var(--space-4);
  height: var(--control-h-md);
  transition: var(--transition-control);
  outline: none;
}
.sp-field__input::placeholder { color: var(--text-muted); }
.sp-field__input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-primary) 22%, transparent);
}
.sp-field__input[aria-invalid="true"] { border-color: var(--status-danger); }

.sp-field__error { font: var(--type-body-sm); color: var(--status-danger); }
.sp-field__error:empty { display: none; }

/* =============================================================== page chrome */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(20, 24, 27, 0.96);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header__bar {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 28px; display: block; }

.site-nav { display: flex; gap: var(--space-6); margin-left: auto; align-items: center; }
.site-nav a {
  font: var(--type-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  color: var(--text-muted);
  transition: var(--transition-control);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text-secondary); }
/* Matches both aria-current="true" (scroll-spy, in-page sections) and
   aria-current="page" (the roadmap link, which is a real page). */
.site-nav a[aria-current] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--violet-500); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-deepfield);
  border-bottom: 1px solid var(--border-hairline);
}
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
}
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); }
.hero__inner {
  position: relative;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-24) var(--space-8) var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}
.hero__title {
  font: var(--type-display);
  font-size: 80px;
  text-transform: uppercase;
  margin: 0;
  color: var(--paper-000);
  max-width: 16ch;
  text-wrap: balance;
}
.hero__lead {
  font: var(--type-body);
  font-size: var(--text-lg);
  color: var(--paper-200);
  max-width: 52ch;
  margin: 0;
}
.hero__actions { display: flex; gap: var(--space-4); justify-content: center; align-items: center; margin-top: var(--space-2); }

/* ------------------------------------------------------------------ eyebrow */

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-brand);
}
.eyebrow--violet { color: var(--violet-300); }

/* -------------------------------------------------------------------- world */

.world {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-24) var(--space-8) 0;
}
.world__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: start;
}
.world__col { display: flex; flex-direction: column; gap: var(--space-5); }
.world__heading { font: var(--type-title); text-transform: uppercase; margin: 0; text-wrap: balance; }
.world__rule { width: 64px; height: 2px; background: var(--violet-500); }
.world__body { font: var(--type-body); font-size: var(--text-md); color: var(--text-secondary); margin: 0; max-width: 60ch; }
.world__ask { font: var(--type-title); font-size: var(--text-xl); text-transform: none; color: var(--text-primary); margin: var(--space-2) 0 0; }

.world__build { margin-top: var(--space-20); display: flex; flex-direction: column; gap: var(--space-8); }

.rule-row { display: flex; align-items: center; gap: var(--space-6); }
.rule-row .eyebrow { white-space: nowrap; }
.rule-row__line { height: 1px; flex: 1; background: var(--border-hairline); }

.card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.kicker {
  font: var(--type-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-metal);
}
.card-title { font: var(--type-heading); text-transform: uppercase; margin: var(--space-4) 0; }
.card-copy { font: var(--type-body-sm); color: var(--text-secondary); margin: 0 0 var(--space-4); max-width: 56ch; }
.card-copy:last-child { margin-bottom: 0; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.card-meta {
  font: var(--type-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.world__outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.world__outro p {
  font: var(--type-title);
  font-size: var(--text-xl);
  text-transform: none;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
  max-width: 44ch;
  text-wrap: balance;
}
.link-underline {
  font: var(--type-body);
  font-size: var(--text-base);
  color: var(--text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--text-brand);
  padding-bottom: 2px;
  transition: var(--transition-control);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
}
.link-underline:hover { color: var(--paper-000); border-bottom-color: var(--paper-000); }

/* --------------------------------------------------------------------- join */

.join {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-24) var(--space-8);
}
.join__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.join__col { display: flex; flex-direction: column; gap: var(--space-5); }
.join__heading { font: var(--type-title); text-transform: uppercase; margin: 0; text-wrap: balance; }
.join__lead { font: var(--type-body); font-size: var(--text-md); color: var(--text-secondary); margin: 0; max-width: 46ch; }
.join__note { font: var(--type-body-sm); color: var(--text-secondary); }

.join__form { display: grid; gap: var(--space-5); }
.join__form h3 { font: var(--type-heading); text-transform: uppercase; margin: 0; }
.join__names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.join__fineprint { font: var(--type-body-sm); color: var(--text-muted); }
.join__sent { display: flex; flex-direction: column; gap: var(--space-6); }
.join__queued {
  font: var(--type-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--border-hairline); background: var(--bg-void); }
.site-footer__bar {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.site-footer__bar img { height: 22px; display: block; }
.site-footer__legal { margin-left: auto; font: var(--type-body-sm); font-size: 12px; color: var(--text-muted); }

/* ============================================== the universe map artboard */
/* The map is a fixed 1920x1080 poster, not a responsive layout — it was
   authored as a single artboard. Rather than re-flow it (which would be a
   redesign, not an import), the sheet is rendered at native size and scaled
   to fit the viewport. Below the floor scale it stops shrinking and the frame
   pans horizontally, because the smallest type on it is 6.5px and scaling
   that below about half is illegible. --map-scale is set by scripts/site.js. */

.icn {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.map-frame {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* transform: scale() is a paint-time effect — the element keeps its full
   1920x1080 layout box, so the frame would scroll across 1920px while only
   960px is visible. The negative margins (set alongside --map-scale in
   scripts/site.js) pull the layout box down to the painted size, so the
   scrollbar only appears when there is really something off-screen. */
.map-sheet {
  transform-origin: top left;
  transform: scale(var(--map-scale, 1));
  flex: none;
}

.map-hint {
  font: var(--type-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}
.map-hint[hidden] { display: none; }

/* ================================================================= roadmap */
/* The email gate that used to live here was removed 2026-09-01 — the roadmap
   is open, and linked from the header nav on both pages. */

.roadmap {
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6) var(--space-12);
}
.roadmap__placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

/* =================================================================== mobile */
/* Transcribed from "Synapticpunk Home Mobile.dc.html" (390px artboard). */

/* Three nav items + the CTA crowd the bar below full desktop width.
   Tighten the gaps rather than letting the labels wrap. */
@media (max-width: 1040px) {
  .site-header__bar { gap: var(--space-6); padding: 0 var(--space-6); }
  .site-nav { gap: var(--space-4); }
}

@media (max-width: 900px) {
  .world__intro { grid-template-columns: 1fr; gap: var(--space-8); }
  .card-pair { grid-template-columns: 1fr; }
  .join__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__title { font-size: 52px; }
}

@media (max-width: 640px) {
  .site-header__bar { height: 56px; padding: 0 20px; gap: 16px; }
  .site-header__logo img { height: 22px; }

  /* On mobile the nav drops to its own row beneath the bar. */
  .site-nav {
    margin-left: 0;
    gap: 20px;
    padding: 0 20px 10px;
    border-top: 0;
  }
  .site-nav a { font-size: var(--text-2xs); padding-bottom: 4px; }
  .site-header__bar .sp-btn { margin-left: auto; }

  .hero__inner { padding: 56px 20px 48px; align-items: flex-start; text-align: left; gap: 20px; }
  .hero__title { font-size: 38px; max-width: none; }
  .hero__lead { font-size: var(--text-base); max-width: none; }
  .hero__actions { width: 100%; }
  .hero__actions .sp-btn { width: 100%; }

  .world { padding: 56px 20px 0; }
  .world__heading { font-size: var(--text-2xl); }
  .world__body { font-size: var(--text-base); max-width: none; }
  .world__ask { font-size: var(--text-md); }
  .world__rule { width: 56px; }
  .world__build { margin-top: 24px; gap: 16px; }
  .card-pair { gap: 16px; }

  .sp-card__body { padding: 20px; }
  .sp-card__body--lg { padding: 20px; }
  .card-title { font-size: var(--text-md); margin: 14px 0; }
  .card-copy { max-width: none; margin-bottom: 14px; }

  .join { padding: 56px 20px; }
  .join__heading { font-size: var(--text-2xl); }
  .join__lead { font-size: var(--text-base); max-width: none; }
  .join__names { grid-template-columns: 1fr; }
  .join__form { gap: 16px; }
  .join__form h3 { font-size: var(--text-md); }

  .world__outro p { font-size: var(--text-md); }

  .site-footer__bar { padding: 32px 20px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer__bar img { height: 20px; }
  .site-footer__legal { margin-left: 0; }

  .roadmap { padding: 56px 20px; }
}