/* ── Iterative.media · Landing page (UI kit) ──────────────────────
   Local layout for the marketing site. Tokens come from the design
   system (../../styles.css); this file only arranges them.
   Mobile-first; calm, spacious, sunset accent used sparingly.
   ----------------------------------------------------------------- */

.lp { background: var(--surface-page); color: var(--text-body); }
/* Brand mark — recolored per palette via a data-URL CSS variable
   (human strokes → --accent, robot strokes → --text-heading). */
.lp-logo {
  background-image: var(--lp-logo-url);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  display: inline-block;
}
.lp-container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.lp-narrow { max-width: 52rem; }

/* ── Nav ───────────────────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--gutter);
  background: color-mix(in oklab, var(--surface-page) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.lp-nav[data-scrolled="true"] { border-bottom-color: var(--border-default); }
.lp-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.lp-brand .lp-logo { width: 34px; height: 34px; }
.lp-brand b { font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--text-heading); }
.lp-brand b .dot { color: var(--coral-ink); }
.lp-nav__links { display: none; align-items: center; gap: var(--space-8); }
.lp-nav__links a { color: var(--text-muted); text-decoration: none; font-size: var(--text-base); font-weight: 500; }
.lp-nav__links a:hover { color: var(--text-accent); }
.lp-nav__right { display: flex; align-items: center; gap: var(--space-5); }

/* ── Hero ──────────────────────────────────────────────────────── */
.lp-hero { position: relative; overflow: clip; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 6rem); }
.lp-hero__mark {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(56vw, 620px); aspect-ratio: 1; opacity: 0.06; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 100%);
          mask-image: radial-gradient(circle, #000 60%, transparent 100%);
}
.lp-hero__inner { position: relative; max-width: 56rem; }
.lp-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 1.06; letter-spacing: -0.025em;
  color: var(--text-heading); margin: var(--space-6) 0 var(--space-6); text-wrap: balance;
}
.lp-hero h1 em { font-style: italic; color: var(--text-accent); }
.lp-hero__sub {
  font-weight: 300; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.6;
  color: var(--text-muted); max-width: 38ch; margin: 0 0 var(--space-8);
}
.lp-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lp-hero__note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-subtle); }

/* ── Section scaffolding ───────────────────────────────────────── */
.lp-section { padding: clamp(4rem, 9vw, 8rem) 0; }
.lp-section--cream { background: var(--surface-cream); }
.lp-section__head { max-width: 44rem; margin-bottom: var(--space-12); }
.lp-section__head h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin: var(--space-4) 0 0;
}

/* ── Manifesto ─────────────────────────────────────────────────── */
.lp-manifesto__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.75rem); }
.lp-manifesto__item { display: flex; gap: var(--space-5); align-items: baseline; }
.lp-manifesto__num { flex: none; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-accent); padding-top: 0.5em; }
.lp-manifesto__line {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.25; color: var(--text-heading); margin: 0; max-width: 26ch;
}
.lp-manifesto__line em { font-style: italic; color: var(--text-accent); }

/* ── How it works · the iteration loop ─────────────────────────── */
.lp-loop { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.lp-step { display: flex; gap: var(--space-5); align-items: flex-start; }
.lp-step__ring {
  flex: none; width: 52px; height: 52px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-emph); background: var(--surface-card);
  display: grid; place-items: center; color: var(--text-accent);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.lp-step h3 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; margin: 0.35rem 0 0.35rem; letter-spacing: -0.01em; }
.lp-step p { margin: 0; color: var(--text-muted); max-width: 40ch; }
.lp-loop__back {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8); padding: var(--space-3) var(--space-5);
  border: 1px dashed var(--border-emph); border-radius: var(--radius-full);
  color: var(--text-accent); font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--accent-tint);
}

/* ── What gets built ───────────────────────────────────────────── */
.lp-built__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.lp-build h3 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 600; margin: var(--space-2) 0 var(--space-3); letter-spacing: -0.015em; }
.lp-build p { color: var(--text-muted); margin: 0 0 var(--space-4); }
.lp-build ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lp-build li { display: flex; gap: var(--space-3); align-items: baseline; color: var(--text-body); font-size: var(--text-base); }
.lp-build li::before { content: "·"; color: var(--coral-ink); font-weight: 700; }

/* ── In the studio (Folio) ─────────────────────────────────────── */
.lp-studio__grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; align-items: center; }
.lp-studio__frame {
  border-radius: var(--radius-xl); border: 1px solid var(--border-default);
  background: radial-gradient(120% 95% at 50% 18%, var(--accent-tint), var(--surface-sunken));
  padding: var(--space-6);
}
.lp-studio__sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.lp-studio__shot {
  aspect-ratio: 3 / 4; border-radius: var(--radius-sm);
  background: var(--surface-card); border: 1px solid var(--border-default);
}
.lp-studio__shot--accent {
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 24%, var(--surface-card)), var(--surface-card));
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border-default));
}
/* Folio — live prototype preview in a browser window */
.lp-folio { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-emph); background: var(--surface-card); box-shadow: var(--shadow-lg); }
.lp-folio__bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-default); }
.lp-folio__dots { display: flex; gap: 6px; }
.lp-folio__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-emph); display: block; }
.lp-folio__url { font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }
.lp-folio__view { position: relative; aspect-ratio: 4 / 3; background: var(--void-deep, #0F0B14); }
.lp-folio__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Folio wordmark over a 70% scrim, centered on the screenshot. */
.lp-folio__overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(11, 11, 12, 0.85); }
.lp-folio__overlay img { width: min(62%, 340px); height: auto; display: block; mix-blend-mode: screen; }
.lp-folio__view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.lp-folio__hint { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; text-align: center; padding: 24px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-subtle); }
.lp-studio__cta { margin-top: var(--space-2); }
.lp-studio__meta { display: flex; flex-direction: column; gap: var(--space-4); }
.lp-studio__badges { display: flex; gap: var(--space-2); }
.lp-studio__meta h3 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.1; margin: 0;
}
/* Folio name set as text in the meta column. */
.lp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-studio__meta p { color: var(--text-muted); margin: 0; max-width: 46ch; }
.lp-studio__status { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-subtle) !important; }

/* ── Why one person ────────────────────────────────────────────── */
.lp-why__grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; align-items: center; }
.lp-why__portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden;
  background: radial-gradient(120% 95% at 50% 34%, var(--accent-tint), var(--surface-sunken));
  border: 1px solid var(--border-default); display: grid; place-items: center;
  position: relative;
}
.lp-why__logo-wrap { position: relative; width: 62%; aspect-ratio: 1 / 1; }
.lp-why__logo, .lp-why__surge { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The energy front — logo-shaped bright band that sweeps through on draw. */
.lp-why__surge {
  -webkit-mask: var(--lp-logo-url) center / contain no-repeat;
          mask: var(--lp-logo-url) center / contain no-repeat;
  background: linear-gradient(90deg, transparent 0 30%, color-mix(in oklab, var(--accent) 65%, white) 50%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 260% 100%; background-position: -50% 0;
  opacity: 0; mix-blend-mode: screen; pointer-events: none;
}
/* Armed by JS = hidden until it scrolls into view, then draws itself. */
.lp-why__portrait[data-anim] .lp-why__logo { clip-path: inset(0 100% 0 0); }
.lp-why__portrait[data-anim="drawn"] .lp-why__logo { animation: lp-why-draw 1.5s var(--ease-out) forwards; }
.lp-why__portrait[data-anim="drawn"] .lp-why__surge { animation: lp-why-surge 1.5s var(--ease-out) forwards; }
@keyframes lp-why-draw {
  0%   { clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 0 transparent); }
  20%  { filter: drop-shadow(0 0 13px var(--accent)); }
  100% { clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 0 transparent); }
}
@keyframes lp-why-surge {
  0%   { background-position: -50% 0; opacity: 0; }
  15%  { opacity: 0.6; }
  85%  { opacity: 0.6; }
  100% { background-position: 165% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-why__portrait[data-anim] .lp-why__logo { clip-path: none; }
  .lp-why__surge { display: none; }
}
.lp-why__lead { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.3; color: var(--text-heading); margin: 0 0 var(--space-6); letter-spacing: -0.01em; }
.lp-why__lead em { font-style: italic; color: var(--text-accent); }
.lp-why p { color: var(--text-muted); margin: 0 0 var(--space-4); max-width: 52ch; }
.lp-sign { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--text-body); margin-top: var(--space-6); }

/* ── Contact ───────────────────────────────────────────────────── */
.lp-contact__card { text-align: center; max-width: 40rem; margin: 0 auto; }
.lp-contact h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-4) 0 var(--space-5); }
.lp-contact p { color: var(--text-muted); font-size: var(--text-md); margin: 0 auto var(--space-8); max-width: 36ch; }
.lp-contact__form { display: flex; gap: var(--space-3); max-width: 30rem; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.lp-contact__form > div { flex: 1 1 16rem; text-align: left; }
.lp-contact__ok { margin-top: var(--space-6); color: var(--sage); font-size: var(--text-base); }

/* ── Footer ────────────────────────────────────────────────────── */
.lp-footer { border-top: 1px solid var(--border-default); padding: var(--space-12) 0; }
.lp-footer__inner { display: flex; flex-direction: column; gap: var(--space-8); justify-content: space-between; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.lp-footer__links a { color: var(--text-muted); text-decoration: none; font-size: var(--text-base); }
.lp-footer__links a:hover { color: var(--text-accent); }
.lp-footer__fine { color: var(--text-subtle); font-size: var(--text-sm); font-family: var(--font-mono); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .lp-nav__links { display: flex; }
  .lp-loop { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-12); }
  .lp-built__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .lp-footer__inner { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  /* Keep the links on one line; if the row gets tight, the whole group wraps
     to the next line rather than breaking a single link ("Contact") off. */
  .lp-footer__links { flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
}
@media (min-width: 960px) {
  .lp-why__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); }
  .lp-studio__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
  .lp-loop { grid-template-columns: repeat(4, 1fr); }
}