/* ────────────────────────────────────────────────────────────────────
   Zinnia Labs — finalised homepage
   Direction A (editorial polymath), locked: rust palette, Instrument
   Serif, spacious density.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* palette · rust on warm paper */
  --paper:        #f1e7dc;
  --ink:          #2a1a12;
  --ink-2:        #3e2718;
  --muted:        #9a7d6a;
  --rule:         rgba(42, 26, 18, .16);
  --accent:       #c0421f;
  --accent-soft:  #e8a48a;

  /* type */
  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* layout */
  --gutter:   48px;
  --row-pad:  140px;       /* spacious */
  --max:      1180px;

  /* motion */
  --ease:     cubic-bezier(.2, .65, .2, 1);
}

/* ── reset / base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }

.site { width: 100%; }
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.inline-link {
  border-bottom: .5px solid var(--rule);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.inline-link:hover { color: var(--accent); border-color: currentColor; }

/* ── navigation ───────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: .5px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.mark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -.01em;
}
.mark .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  transform: translateY(-3px);
  display: inline-block;
}
.mark small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-links a {
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--accent); }

/* ── hero ─────────────────────────────────────────────────────────── */
.ed-hero {
  position: relative;
  padding-top: 80px;
  padding-bottom: var(--row-pad);
  overflow: hidden;
  isolation: isolate;
}

/* cursor-following accent blob (positioned by main.js via --mx / --my) */
.ed-hero-accent {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --mx: 50%;
  --my: 40%;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    color-mix(in oklab, var(--accent) 22%, transparent) 0%,
    color-mix(in oklab, var(--accent) 6%, transparent) 35%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.ed-hero:hover .ed-hero-accent { opacity: 1; }

.ed-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 12px;
}
.ed-meta b { color: var(--ink); font-weight: 500; }

.ed-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9.2vw, 128px);
  line-height: .96;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.ed-display em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* The hero headline reads as three stacked lines, so the cycling role
   never reflows the page when it grows from "a darkroom" to something
   longer. Each line owns its own row. */
.ed-display-line {
  display: block;
}
.ed-display-role {
  /* Reserve exactly one line of headline height (with a sliver of room
     for descenders) so the rest of the page never jumps as the role
     types in and out. We DO NOT clip here — the JS shifts .ed-role left
     when the typed string would otherwise wrap, and any leftward
     overflow falls under the existing overflow:hidden on .ed-hero
     (which catches it at the viewport edge). */
  min-height: 1.15em;
  line-height: 1;
}
.ed-role {
  display: inline-block;
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  position: relative;
  white-space: nowrap;
  transition: transform .12s linear;
  will-change: transform;
}
.ed-role::after {
  content: ",";
  color: var(--ink);
  font-style: normal;
  /* Pull the comma flush against the caret (which carries its own
     margin-left). */
  margin-left: -.04em;
}
.ed-role-text { display: inline-block; }
.caret {
  display: inline-block;
  width: .05em;
  height: .78em;
  background: var(--accent);
  margin-left: .04em;
  vertical-align: -.04em;
  animation: blink 1.05s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.ed-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.lede {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 32ch;
  text-wrap: pretty;
  margin: 0;
}
.ed-side {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  border-top: .5px solid var(--rule);
  padding-top: 18px;
}
.ed-side dl {
  margin: 0;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 18px;
}
.ed-side dt { color: var(--ink-2); font-weight: 500; }
.ed-side dd { margin: 0; color: var(--ink); }

/* ── section scaffolding ─────────────────────────────────────────── */
.section {
  padding-top: var(--row-pad);
  padding-bottom: var(--row-pad);
  border-top: .5px solid var(--rule);
}
.section-head {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  margin-bottom: 64px;
  align-items: start;
}
.section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .6em;
}
.section-num b { color: var(--accent); font-weight: 500; margin-right: 8px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--accent); }
.section-sub {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 50ch;
  margin-top: 18px;
  font-weight: 400;
}

/* ── shared · single-column row list (work + studio) ──────────────── */
.row-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.case {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 28px 0;
  border-top: .5px solid var(--rule);
  transition: padding-left .25s var(--ease), color .25s var(--ease);
}
.case:last-child { border-bottom: .5px solid var(--rule); }
.case:hover { padding-left: 10px; color: var(--accent); }
.case:hover h5 { color: var(--accent); }
.case h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.case p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
}
.case .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 6px;
}

/* ── 04 · now & contact ──────────────────────────────────────────── */
.now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.now-list { display: flex; flex-direction: column; }
.now-list .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: .5px solid var(--rule);
  align-items: baseline;
}
.now-list .row:last-child { border-bottom: .5px solid var(--rule); }
.now-list .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.now-list .v {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 400;
}
.now-list .v small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
  display: block;
  margin-top: 4px;
  text-transform: none;
  line-height: 1.4;
}

.contact-card {
  border: .5px solid var(--rule);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: color-mix(in oklab, var(--ink) 3%, var(--paper));
}
.contact-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.contact-blurb {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.contact-links {
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
}
.contact-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: .5px solid var(--rule);
  text-transform: uppercase;
  transition: color .2s var(--ease);
}
.contact-links a:last-child { border-bottom: .5px solid var(--rule); }
.contact-links a span:last-child {
  color: var(--muted);
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  transition: color .2s var(--ease);
}
.contact-links a:hover span:last-child { color: var(--accent); }

/* ── footer ──────────────────────────────────────────────────────── */
.foot {
  border-top: .5px solid var(--rule);
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot .big {
  font-family: var(--serif);
  font-size: clamp(72px, 14vw, 160px);
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--ink);
  font-weight: 400;
  text-transform: none;
  flex: 1;
}
.foot .big em { font-style: italic; color: var(--accent); }
.foot .col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  min-width: 140px;
}
.foot .col b { color: var(--ink); font-weight: 500; }
.foot .copyline {
  width: 100%;
  border-top: .5px solid var(--rule);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── scroll reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .caret { animation: none; }
  html { scroll-behavior: auto; }
  .ed-hero-accent { display: none; }
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root { --row-pad: 96px; --gutter: 32px; }
  .ed-grid,
  .now-grid { grid-template-columns: 1fr; gap: 40px; }
  .section-head { grid-template-columns: 1fr; gap: 12px; }
  .nav-links { display: none; }
}

@media (max-width: 600px) {
  :root { --row-pad: 72px; --gutter: 24px; }
  .ed-meta { font-size: 10px; }
  .case { grid-template-columns: 1fr; }
  .case .tag { padding-top: 0; }
}