:root {
  --ink: #171717;
  --paper: #f4f0e8;
  --paper-deep: #e5ddcf;
  --red: #e44736;
  --red-ink: #b83224;
  --red-light: #f15a4b;
  --muted: #625d53;
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: .8rem 1rem; color: var(--ink); background: var(--paper); font-weight: 700; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100% - 3rem, 1280px); margin-inline: auto; }

.generator { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; color: var(--paper); background: var(--ink); }
.generator::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.site-header { display: flex; align-items: center; justify-content: space-between; padding-top: max(1.35rem, env(safe-area-inset-top)); }
.brand { display: inline-flex; align-items: center; gap: .62rem; color: var(--paper); font-size: .8rem; font-weight: 760; letter-spacing: -.015em; }
.brand svg { width: 1.72rem; height: 1.72rem; fill: var(--red); }
.back-link { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; color: rgba(244, 240, 232, .82); font-size: .88rem; font-weight: 650; transition: color 180ms var(--ease); }
.back-link span { color: var(--red); font-size: 1.08rem; }
.back-link:hover { color: var(--paper); }

.generator__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .81fr); gap: clamp(4rem, 11vw, 12rem); padding-top: clamp(5rem, 10vw, 8.5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.generator__intro { display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { color: var(--red-light); font-size: .76rem; font-weight: 760; letter-spacing: .035em; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.038em; text-wrap: balance; }
h1 { max-width: 700px; margin-top: 1.25rem; font-size: clamp(3.7rem, 7.5vw, 6rem); line-height: .9; }
.intro-copy { max-width: 33rem; margin-top: 2rem; color: rgba(244, 240, 232, .76); font-size: clamp(1rem, 1.4vw, 1.17rem); line-height: 1.55; text-wrap: pretty; }
.idea-map { width: min(100%, 480px); height: auto; margin-top: auto; padding-top: clamp(3.2rem, 7vw, 6rem); overflow: visible; }
.map-line { fill: none; stroke: rgba(244, 240, 232, .34); stroke-width: 1.4; }
.map-dot--light { fill: var(--paper); }
.map-dot--red { fill: var(--red); }
.map-dot--outline { fill: none; stroke: var(--paper); stroke-width: 1.4; }
.idea-map text { fill: rgba(244, 240, 232, .64); font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.idea-map text:nth-of-type(4) { fill: var(--red); }

.idea-form { align-self: start; padding: clamp(1.6rem, 3vw, 2.5rem); color: var(--ink); background: var(--paper); }
.form-title { margin-bottom: 1.85rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.choice-window { min-width: 0; margin: 0; padding: 1.4rem 0; border: 0; border-top: 1.5px solid #bdb3a4; }
.choice-window:last-of-type { border-bottom: 1.5px solid #bdb3a4; }
.choice-window[aria-invalid="true"] { border-color: var(--red); }
.choice-window legend { padding: 0; color: var(--muted); font-size: .78rem; font-weight: 760; letter-spacing: .025em; }
.choice-help { margin-top: .4rem; color: var(--muted); font-size: .77rem; line-height: 1.4; }
.choice-options { display: grid; gap: .55rem; margin-top: 1rem; }
.choice-options--two, .choice-options--budget { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-options--segments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-option { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: .65rem; align-items: start; min-height: 52px; padding: .75rem; color: var(--ink); background: var(--paper-deep); cursor: pointer; transition: color 180ms var(--ease), background-color 180ms var(--ease); }
.choice-option input { appearance: none; width: 1.05rem; height: 1.05rem; margin: .13rem 0 0; border: 1.5px solid #756e62; border-radius: 50%; background: transparent; transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.choice-option input[type="checkbox"] { border-radius: 0; }
.choice-option input:checked { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 3px var(--paper-deep); }
.choice-option:has(input:checked) { color: var(--paper); background: var(--ink); }
.choice-option:has(input:checked) input:checked { box-shadow: inset 0 0 0 3px var(--ink); }
.choice-option strong, .choice-option small { display: block; }
.choice-option strong { font-size: .82rem; line-height: 1.3; }
.choice-option small { margin-top: .22rem; color: #736c61; font-size: .7rem; font-weight: 550; line-height: 1.35; }
.choice-option:has(input:checked) small { color: rgba(244, 240, 232, .64); }
.choice-option:hover { background: #d8cebd; }
.choice-option:has(input:checked):hover { background: var(--ink); }
.choice-option:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.form-note { margin-top: 1.3rem; color: var(--muted); font-size: .78rem; line-height: 1.48; }
button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.4rem; width: 100%; min-height: 54px; margin-top: 1.25rem; padding: .75rem .95rem .75rem 1rem; border: 0; border-radius: 0; color: var(--paper); background: var(--red); font-size: .94rem; font-weight: 760; transition: color 180ms var(--ease), background-color 180ms var(--ease); }
button span { font-size: 1.2rem; }
button:hover:not(:disabled) { color: var(--paper); background: var(--ink); }
button:disabled { cursor: wait; color: rgba(244, 240, 232, .7); background: #8d8375; }
.form-status { min-height: 1.3em; margin-top: .8rem; color: var(--muted); font-size: .83rem; line-height: 1.45; }

.results { padding-top: clamp(5.5rem, 12vw, 11rem); padding-bottom: clamp(5rem, 10vw, 9rem); }
.results .eyebrow { color: var(--red-ink); }
.results__heading { display: grid; grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: start; }
.results h2 { max-width: 760px; font-size: clamp(2.9rem, 6vw, 5.6rem); line-height: .91; }
.ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(3.6rem, 7vw, 6.5rem); background: #bdb3a4; }
.idea-card { display: grid; grid-template-rows: auto minmax(8rem, auto) minmax(5.6rem, auto) auto; gap: 1.2rem; min-height: 25rem; padding: 1.45rem; overflow: hidden; background: var(--paper); }
.idea-number { color: var(--red-ink); font-size: .78rem; font-weight: 800; letter-spacing: .05em; }
.idea-title { align-self: start; padding-top: 1.2rem; font-family: var(--display); font-size: clamp(2rem, 2.8vw, 2.7rem); font-weight: 400; letter-spacing: -.038em; line-height: .96; }
.idea-description { align-self: start; max-width: 30ch; color: var(--muted); font-size: .98rem; line-height: 1.48; text-wrap: pretty; }
.idea-potential { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: end; align-self: end; padding-top: 1rem; border-top: 1.5px solid var(--ink); }
.idea-potential::before { grid-column: 1 / -1; display: block; height: 5px; content: ""; background: linear-gradient(90deg, var(--red) var(--potential), #cfc5b6 var(--potential)); }
.idea-potential span { color: var(--muted); font-size: .76rem; font-weight: 760; }
.idea-potential strong { color: var(--ink); font-family: var(--display); font-size: 1.55rem; font-weight: 400; letter-spacing: -.04em; line-height: .8; }
.disclaimer { max-width: 39rem; margin-top: 2rem; color: var(--muted); font-size: .84rem; line-height: 1.5; }

@media (max-width: 900px) {
  .generator__layout { grid-template-columns: 1fr; gap: 3.5rem; }
  .idea-map { margin-top: 0; }
  .idea-form { max-width: 680px; }
  .ideas { grid-template-columns: 1fr; }
  .idea-card { min-height: 0; grid-template-rows: auto; gap: 1.3rem; }
  .idea-title { padding-top: 1rem; }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 2.25rem, 1280px); }
  .site-header { padding-top: max(1rem, env(safe-area-inset-top)); }
  .brand { gap: .45rem; font-size: .75rem; }
  .brand svg { width: 1.38rem; height: 1.38rem; }
  .back-link { font-size: .82rem; }
  .generator__layout { padding-top: 4.25rem; padding-bottom: 3.5rem; }
  h1 { font-size: clamp(3.4rem, 16vw, 5rem); }
  .intro-copy { margin-top: 1.5rem; font-size: .98rem; }
  .idea-map { padding-top: 2.5rem; }
  .idea-form { margin-inline: calc((100vw - min(100vw - 2.25rem, 1280px)) / -2); padding: 1.45rem 1.125rem; }
  .choice-window legend, .choice-help, .form-note, .form-status { font-size: .875rem; }
  .choice-option strong { font-size: .9rem; }
  .choice-option small { font-size: .8125rem; }
  .choice-options--two, .choice-options--budget, .choice-options--segments, .results__heading { grid-template-columns: 1fr; }
  .results__heading { gap: 1rem; }
  .results h2 { font-size: clamp(2.75rem, 12.5vw, 4.2rem); }
  .ideas { margin-top: 3.2rem; }
}

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