/* Hallmark · macrostructure: Workbench (the tool is the hero) · tone: utilitarian, warm · anchor hue: brand orange
 * genre: modern-minimal · theme: custom, ipsion.ai brand tokens kept (Inter + Space Grotesk, orange accent) on warm paper
 * nav: N1a (two anchors + one action) · footer: Ft5 statement · enrichment: Tier C generated still + real product screens
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */
:root {
  --color-paper: oklch(95% 0.018 80);
  --color-paper-2: oklch(98% 0.008 80);
  --color-card: oklch(99.5% 0.003 80);
  --color-ink: oklch(19% 0.012 285);
  --color-ink-2: oklch(42% 0.012 285);
  --color-ink-3: oklch(55% 0.012 285);
  --color-line: oklch(86% 0.018 80);
  --color-accent: oklch(70% 0.19 43);
  --color-accent-ink: oklch(54% 0.17 43);
  --color-on-accent: oklch(18% 0.03 43);
  --color-focus: oklch(55% 0.2 290);
  --color-ok: oklch(48% 0.12 150);
  --color-bad: oklch(50% 0.19 25);
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); --text-display: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms; --dur: 220ms;
  --max-w: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.02em; line-height: 1.1; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
code { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------- top ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: var(--max-w); margin: 0 auto; padding: var(--space-md) var(--space-lg); }
.mark { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); text-decoration: none; white-space: nowrap; }
.mark img { border-radius: 6px; }
.top-links { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 500; }
.top-links a { text-decoration: none; white-space: nowrap; color: var(--color-ink-2); transition: color var(--dur-fast) var(--ease-out); }
.top-links a:hover { color: var(--color-ink); }
.top-links .top-cta { color: var(--color-ink); border: 1px solid var(--color-ink); border-radius: 999px; padding: 7px 14px; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.top-links .top-cta:hover { background: var(--color-ink); color: var(--color-paper-2); }

/* ---------- hero: the tool itself ---------- */
.hero { position: relative; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); }
.hero-art { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.hero-art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: right top; }
.hero-copy { position: relative; }
.hero h1 { font-size: var(--text-display); font-weight: 700; max-width: 13ch; }
.lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; margin-top: var(--space-md); }

.make { margin-top: var(--space-lg); max-width: 560px; }
.make-label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.make-row { display: flex; gap: var(--space-xs); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 6px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.make-row:focus-within { border-color: var(--color-ink); }
.make.bad .make-row { border-color: var(--color-bad); }
.make input[type=url] { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; padding: 10px 10px; outline: none; }
.make input::placeholder { color: var(--color-ink-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.go { flex: none; border: 0; cursor: pointer; font: 600 var(--text-base)/1 var(--font-body); white-space: nowrap; color: var(--color-on-accent); background: var(--color-accent); border-radius: var(--radius-sm); padding: 0 18px; min-height: 46px;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.go:hover { background: oklch(74% 0.18 43); }
.go:active { transform: translateY(1px); }
.go:disabled { cursor: progress; background: var(--color-line); color: var(--color-ink-2); transform: none; }
.make-note { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); min-height: 1.6em; }
.make.bad .make-note { color: var(--color-bad); font-weight: 500; }

.result { margin-top: var(--space-lg); max-width: 620px; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); }
.result:focus { outline: none; }
.result h2 { font-size: var(--text-xl); }
.result h2::before { content: "✓ "; color: var(--color-ok); }
.r-name { color: var(--color-ink-2); margin: var(--space-2xs) 0 var(--space-md); }
.r-line { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; }
.r-k { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-v { overflow-wrap: anywhere; font-weight: 500; }
a.r-v { color: var(--color-accent-ink); }
.copy, .again { border: 1px solid var(--color-line); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.copy:hover, .again:hover { border-color: var(--color-ink); }
.copy:active, .again:active { background: var(--color-line); }
.copy.done { color: var(--color-ok); border-color: var(--color-ok); }
.r-hint { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); }
.again { margin-top: var(--space-lg); }

/* ---------- sections ---------- */
.guests { max-width: var(--max-w); margin: 0 auto; padding: var(--space-3xl) var(--space-lg) 0; }
.sec-head { max-width: 60ch; margin-bottom: var(--space-xl); }
.sec-head h2 { font-size: var(--text-2xl); }
.sec-head p { color: var(--color-ink-2); margin-top: var(--space-xs); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.shots figure:nth-child(2) { margin-top: var(--space-2xl); }
figure { margin: 0; }
.shots img { border: 1px solid var(--color-line); border-radius: var(--radius-lg); width: 100%; }
figcaption { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); max-width: 34ch; }
figcaption b { color: var(--color-ink); }



/* ---------- footer ---------- */
.foot { max-width: var(--max-w); margin: var(--space-3xl) auto 0; padding: var(--space-lg) var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-line); color: var(--color-ink-2); font-size: var(--text-sm); }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
.foot-brand { color: var(--color-ink); font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.foot-links a { white-space: nowrap; }
.foot-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); margin: var(--space-lg) 0 0; }
.foot-notes dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); }
.foot-notes dd { margin: var(--space-2xs) 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-ink-3); max-width: 44ch; }
@media (max-width: 759px) {
  .foot-notes { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm) var(--space-sm); }
  .foot-notes > div { display: contents; }
  .foot-notes dt { padding-top: 0.2em; }
  .foot-notes dd { margin: 0; max-width: none; }
}

/* ---------- wide: the tool on the left, the photograph on the right ---------- */
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-2xl); align-items: center; padding-top: var(--space-lg); }
  .hero-art { order: 2; }
  .hero-art img { aspect-ratio: 4 / 5; max-height: 640px; }
}
@media (max-width: 899px) {
  .hero-art img { aspect-ratio: 16 / 10; }
  .hero-copy { margin-top: var(--space-lg); }
  .top-links a:not(.top-cta) { display: none; }
  .shots { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; gap: var(--space-md); margin: 0 calc(-1 * var(--space-lg)); padding: 0 var(--space-lg) var(--space-sm); scroll-snap-type: x mandatory; }
  .shots figure { scroll-snap-align: center; }
  .shots figure:nth-child(2) { margin-top: 0; }
  .guests { padding-top: var(--space-2xl); }
}
@media (max-width: 520px) {
  .top, .hero, .guests, .foot { padding-left: var(--space-md); padding-right: var(--space-md); }
  .shots { margin: 0 calc(-1 * var(--space-md)); padding: 0 var(--space-md) var(--space-sm); }
  .make-row { flex-direction: column; padding: 6px; }
  .go { min-height: 48px; }
  .r-line { grid-template-columns: minmax(0, 1fr) auto; }
  .r-k { grid-column: 1 / -1; margin-bottom: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}