:root {
  --ink: #171717;
  --paper: #f4f0e8;
  --paper-deep: #e5ddcf;
  --red: #e44736;
  --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); font-size: .76rem; font-weight: 760; letter-spacing: .035em; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.042em; text-wrap: balance; }
h1 { max-width: 700px; margin-top: 1.25rem; font-size: clamp(3.7rem, 7.5vw, 6.8rem); line-height: .88; }
.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__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: 1rem 10rem 3.4rem 8rem repeat(3, 5.5rem) minmax(6rem, 1fr); height: 48rem; padding: 1.45rem; overflow: hidden; background: var(--paper); }
.idea-number { color: var(--red); 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: -.04em; line-height: .94; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.idea-audience { align-self: start; color: var(--muted); font-size: .84rem; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.idea-assessment { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); grid-template-rows: 2.9rem .9rem 1.25rem .75rem; column-gap: .8rem; align-content: start; padding: .9rem 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid #bdb3a4; }
.idea-score { grid-column: 1; grid-row: 1; align-self: end; color: var(--red); font-family: var(--display); font-size: 3.35rem; letter-spacing: -.075em; line-height: .76; }
.idea-metric-label { color: var(--muted); font-size: .66rem; font-weight: 760; letter-spacing: .025em; }
.idea-score-label { grid-column: 1; grid-row: 2; align-self: start; }
.idea-cost { grid-column: 1; grid-row: 3; align-self: end; margin-top: .85rem; font-size: .89rem; font-weight: 780; line-height: 1.15; }
.idea-cost-label { grid-column: 1; grid-row: 4; align-self: start; }
.idea-factors { grid-column: 2; grid-row: 1 / 5; align-self: center; display: grid; gap: .24rem; }
.idea-factors p { color: var(--muted); font-size: .73rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.idea-factors span { color: var(--ink); font-weight: 760; }
.idea-detail { align-self: start; overflow: hidden; padding-top: 1.1rem; }
.idea-detail h3 { color: var(--ink); font-size: .77rem; font-weight: 800; letter-spacing: .02em; }
.idea-detail p { margin-top: .33rem; color: var(--muted); font-size: .9rem; line-height: 1.45; text-wrap: pretty; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.idea-detail--first-step { align-self: stretch; margin-top: .45rem; padding-top: 1.25rem; border-top: 1.5px solid var(--red); }
.idea-detail--first-step p { -webkit-line-clamp: 4; }
.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 { height: auto; grid-template-rows: auto; gap: 1.3rem; }
  .idea-title { padding-top: 1rem; }
  .idea-assessment { min-height: 8rem; }
  .idea-detail { min-height: 0; padding-top: 0; }
  .idea-detail--first-step { min-height: 0; margin-top: 0; }
}

@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: .68rem; }
  .brand svg { width: 1.38rem; height: 1.38rem; }
  .back-link { font-size: .76rem; }
  .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-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; }
}
