/* Hallmark · genre: atmospheric · macrostructure: Narrative Workflow · nav: N9 Edge-aligned · footer: Ft5 Statement
 * theme: custom · vibe: "deep sea, bioluminescent, quiet, precise" · paper: oklch(15% 0.02 215) · accent: oklch(82% 0.13 192)
 * display: Geist 600 · body: Geist · mono: Geist Mono · axes: dark / geometric-sans / cool
 * enrichment: Tier B hand-built SVG (the logo's jellyfish) · studied: no · context: user-provided
 */

:root {
  color-scheme: dark;

  --color-paper: oklch(15% 0.02 215);
  --color-paper-2: oklch(19% 0.022 215);
  --color-paper-3: oklch(24% 0.024 215);
  --color-ink: oklch(94% 0.012 200);
  --color-ink-2: oklch(80% 0.014 205);
  --color-muted: oklch(66% 0.016 210);
  --color-rule: oklch(31% 0.02 215);
  --color-accent: oklch(82% 0.13 192);
  --color-accent-ink: oklch(15% 0.02 215);
  --color-focus: oklch(86% 0.17 192);
  --color-fail: oklch(74% 0.13 35);
  --color-bloom: oklch(42% 0.08 200 / 0.32);
  --color-tile: oklch(92% 0.012 75);

  --font-display: "Geist", ui-sans-serif, sans-serif;
  --font-body: "Geist", ui-sans-serif, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --text-sm: 0.875rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --text-display: clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --measure: 62ch;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-thick: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--color-paper);
  background-image: radial-gradient(ellipse 60% 45% at 85% 0%, var(--color-bloom), transparent 70%);
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; font-style: normal; letter-spacing: -0.03em; line-height: 1.05; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
.sprite { position: absolute; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--space-lg);
  border-radius: var(--radius-pill);
  font: 500 var(--text-md) / 1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: var(--rule-hair) solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn--fill { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--fill:hover { background: var(--color-focus); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; border-color: var(--color-rule); color: var(--color-muted); transform: none; }

.link {
  color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.25em; white-space: nowrap;
}
.link:hover { text-decoration-thickness: 2px; }

/* Nav · N9 */
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
  max-width: 76rem; margin: 0 auto;
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font: 600 var(--text-lg) / 1 var(--font-display); letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
}
.wordmark__mark { width: 28px; height: 28px; color: var(--color-accent); }

main { max-width: 76rem; margin: 0 auto; padding: 0 var(--page-gutter); }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero h1 { font-size: var(--text-display); max-width: 14ch; }
.lede { margin-top: var(--space-lg); max-width: var(--measure); font-size: var(--text-lg); color: var(--color-ink-2); }
.hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.hero__jelly { width: clamp(9rem, 20vw, 15rem); color: var(--color-accent); opacity: 0.9; }

/* How work moves · the graph */
.flow, .shipped {
  display: grid; gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
  border-top: var(--rule-thick) solid var(--color-rule);
}
.flow__intro, .shipped__intro { display: grid; gap: var(--space-md); max-width: var(--measure); }
.flow h2, .shipped h2 { font-size: var(--text-2xl); }
.flow__intro p, .shipped__intro p { color: var(--color-ink-2); }

.graph {
  display: grid; gap: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.graph__map { position: relative; display: grid; }
.graph__nodes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg);
}
.graph__nodes li { position: relative; display: grid; min-width: 0; }
.graph__nodes li + li::before {
  content: "→"; position: absolute; top: 50%; left: calc(-1 * var(--space-lg)); width: var(--space-lg);
  translate: 0 -50%; text-align: center;
  font: 400 var(--text-md) / 1 var(--font-mono); color: var(--color-muted);
}
.node {
  display: grid; justify-items: center; gap: var(--space-xs);
  padding: var(--space-md) var(--space-xs);
  font: 500 var(--text-md) / 1 var(--font-body); white-space: nowrap;
  color: var(--color-ink-2); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.node:hover { color: var(--color-ink); border-color: var(--color-accent); }
.node:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.node[aria-selected="true"] { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.node__loop { width: 1.1rem; height: 1.1rem; color: var(--color-accent); flex: none; }
.node[aria-selected="true"] .node__loop { color: var(--color-accent-ink); }

/* The return path: from Ship back under the line to Brief */
.graph__back {
  position: relative; margin: 0 10%; height: 2rem;
  border: var(--rule-thick) dashed var(--color-muted); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: grid; place-items: end center;
}
.graph__back::before {
  content: ""; position: absolute; top: -2px; left: -7px;
  border: 6px solid transparent; border-top: 0; border-bottom: 8px solid var(--color-muted);
}
.graph__back span {
  translate: 0 55%; padding: 0 var(--space-sm);
  background: var(--color-paper-2);
  font: 400 var(--text-sm) / 1.4 var(--font-mono); color: var(--color-ink-2); white-space: nowrap;
}
.graph__legend {
  display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-muted);
}

.panel { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.panel[hidden] { display: none; }
.panel h3 { font-size: var(--text-xl); }
.panel dl { margin: var(--space-md) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.panel dt { font: 500 var(--text-sm) / 1.4 var(--font-mono); color: var(--color-accent); }
.panel dd { margin: var(--space-2xs) 0 0; color: var(--color-ink); }

/* Products */
.products { display: grid; gap: var(--space-2xl); }
.product--shot {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-xl); align-items: center;
}
.product--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
.product--flip .shot { order: 2; }
.shot { margin: 0; }
.shot img {
  width: 100%; border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
}
.product__text { display: grid; gap: var(--space-sm); justify-items: start; max-width: 34rem; }
.product h3 { font-size: var(--text-xl); }
.product p { color: var(--color-ink-2); }

.product-pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.product--small {
  display: grid; gap: var(--space-sm); justify-items: start;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.pair-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); width: 100%; margin-bottom: var(--space-xs); }
.pair-art img { background: var(--color-tile); border-radius: var(--radius-sm); }
.product__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.pair-mark { width: 4.5rem; color: var(--color-accent); margin-bottom: var(--space-xs); }

/* Beliefs */
.beliefs { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-thick) solid var(--color-rule); }
.beliefs h2, .notes h2, .contact h2 { font-size: var(--text-2xl); }
.beliefs dl { margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.beliefs dt { font: 600 var(--text-lg) / 1.3 var(--font-display); letter-spacing: -0.01em; }
.beliefs dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); max-width: 46ch; }

/* Notes */
.notes { padding-block: var(--space-2xl); }
.notes > p { margin-top: var(--space-lg); max-width: var(--measure); color: var(--color-ink-2); }
.notes ul { list-style: none; margin: var(--space-lg) 0 0; padding: 0; max-width: 48rem; }
.notes li { border-top: var(--rule-hair) solid var(--color-rule); }
.notes li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.notes a {
  display: block; padding: var(--space-md) 0;
  text-decoration: none; color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.notes a::after { content: " ↗"; color: var(--color-muted); }
.notes a:hover { color: var(--color-accent); }

/* Contact */
.contact { padding-block: var(--space-2xl) var(--space-3xl); display: grid; gap: var(--space-lg); justify-items: start; }
.contact p { max-width: var(--measure); color: var(--color-ink-2); font-size: var(--text-lg); }

/* Footer · Ft5 */
.foot {
  max-width: 76rem; margin: 0 auto;
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
  display: grid; gap: var(--space-lg);
}
.foot__line { font: 600 clamp(1.75rem, 5vw, 3.25rem) / 1.05 var(--font-display); letter-spacing: -0.03em; max-width: 22ch; }
.foot__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-muted);
}
.foot__meta a { color: var(--color-muted); }
.foot__meta a:hover { color: var(--color-accent); }

@media (max-width: 40rem) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl) var(--space-2xl); }
  .hero__jelly { order: -1; width: 5.5rem; }
  .product--shot, .product--flip { grid-template-columns: minmax(0, 1fr); }
  .product--flip .shot { order: 0; }
  .shot { max-width: 13rem; }
  .product-pair, .beliefs dl, .panel dl { grid-template-columns: minmax(0, 1fr); }

  /* The graph turns vertical; the return path runs up the left side */
  .graph__map { padding-left: 2.25rem; }
  .graph__nodes { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .graph__nodes li + li::before {
    content: "↓"; top: calc(-1 * var(--space-md)); left: 50%; width: auto; height: var(--space-md);
    translate: -50% 0; display: grid; place-items: center;
  }
  .node { grid-auto-flow: column; justify-content: center; padding: var(--space-sm); }
  .graph__back {
    position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 1.5rem; height: auto; margin: 0;
    border: var(--rule-thick) dashed var(--color-muted); border-right: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    place-items: center start;
  }
  .graph__back::before {
    left: auto; right: -8px; top: -7px;
    border: 6px solid transparent; border-right: 0; border-left: 8px solid var(--color-muted);
  }
  .graph__back span { translate: -50% 0; writing-mode: vertical-rl; rotate: 180deg; padding: var(--space-xs) 0; }
}
@media (min-width: 40.01rem) and (max-width: 56rem) {
  .product-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}