/*
  pen.scriben.ai

  The newsroom design language from home.scriben.ai/press, not the waitlist page: Newsreader
  serif at weight 400, one brass accent, hairline rules, and no cards, pills or shadows.
  Tokens are copied from home/styles.css so the two pages cannot drift apart.

  SINGLE SCREEN is the brief. The whole questionnaire sits inside one viewport: the pitch on the
  left, every question on the right in a two-column grid. Nothing scrolls on a laptop.

  The one deliberate escape hatch: the question grid may scroll INSIDE itself if a viewport is
  genuinely too short (a small laptop in landscape, a phone). A form that cannot be reached is
  worse than one that scrolls, so the layout degrades to scrolling rather than clipping.
*/

@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Medium.ttf") format("truetype");
  font-style: normal; font-weight: 500; font-display: swap;
}

:root {
  --ink: #171611;
  --ink-soft: #35332c;
  --paper: #fafaf7;
  --paper-bright: #ffffff;
  --line: rgba(23, 22, 17, .18);
  --hair: rgba(23, 22, 17, .09);
  --muted: #666860;
  --brass: #aa7622;
  --brass-bright: #d2a34c;
  --acid: #e8ef9b;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--acid); color: var(--ink); }

.skip-link {
  position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px;
  color: var(--paper); background: var(--ink); transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* The house kicker: mono, tiny, wide-tracked. */
.kicker {
  margin: 0; color: var(--muted); font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: .17em;
  line-height: 1.3; text-transform: uppercase;
}

/* ============ single-screen frame ============ */
.frame {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}

.bar {
  padding: 14px clamp(20px, 3vw, 46px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.bar img { height: 22px; width: auto; }
.bar nav { display: flex; gap: 26px; }
.bar nav a {
  color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; padding-bottom: 2px;
  border-bottom: 1px solid transparent; transition: color 150ms ease, border-color 150ms ease;
}
.bar nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.stage {
  min-height: 0;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 76px);
  padding: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 46px) clamp(16px, 2vw, 28px);
}

/* ============ left: the ask ============ */
.ask { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.ask h1 {
  margin: 14px 0 0; max-width: 13ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 3.4vw, 54px); letter-spacing: -.042em; line-height: .96;
  text-wrap: balance;
}
.ask .lede {
  margin: 16px 0 0; max-width: 34ch; color: #5d594f;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5;
}

/* One hairline row, set on a single line — not a badge, not a stacked block. */
.offer {
  margin: 20px 0 0; padding: 11px 0 0; border-top: 1px solid var(--ink);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.offer b { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -.03em; }


/*
  The photograph is the quiet anchor of the column, not the subject of the page.

  Size it by WIDTH and let the height follow. All three photos are cropped to exactly
  1000x1250 (4:5) at source, so a declared aspect-ratio means nothing is ever cropped here.
  An earlier rule pinned a fixed ~210px height on a frame that wanted ~490px, and
  object-fit:cover took the difference out of the middle — which cut both faces off at the
  forehead. Never pin a height on this image.
*/
.ask figure { margin: 22px 0 0; min-height: 0; }
.ask figure img {
  width: min(100%, 232px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.92);
}

/* On a short viewport the photo is decoration — drop it rather than crop it back into faces. */
@media (max-height: 760px) {
  .ask figure { display: none; }
}

/* ============ right: the questions ============ */
.sheet { min-width: 0; display: flex; flex-direction: column; }

form { min-height: 0; display: flex; flex-direction: column; flex: 1; }

.questions {
  list-style: none; margin: 0; padding: 0; min-height: 0; flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px clamp(24px, 3vw, 54px);
  align-content: start;
  overflow: auto;            /* only engages when the viewport is genuinely too short */
  scrollbar-width: thin;
}

.q { padding: 0 0 16px; min-width: 0; }

.q-label {
  margin: 0 0 9px; display: flex; gap: 10px; align-items: baseline;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(15px, 1.2vw, 19px); letter-spacing: -.02em; line-height: 1.16;
}
.q-n { flex: none; color: var(--brass); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; }

/* Squared hairline options that invert when chosen — editorial, not a rounded SaaS pill. */
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choices label {
  padding: 5px 11px; border: 1px solid var(--line); cursor: pointer;
  font-size: 12.5px; line-height: 1.25; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label:hover { border-color: var(--ink); }
.choices label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Inputs are ruled lines, like a form on paper. */
.q textarea, .q input[type="email"] {
  width: 100%; padding: 4px 0 7px; border: 0; border-bottom: 1px solid var(--line);
  background: none; resize: none; font-size: 14px; line-height: 1.45;
}
.q textarea { height: 44px; }
.q textarea:focus, .q input:focus { outline: 0; border-bottom-color: var(--brass); }
.q textarea::placeholder, .q input::placeholder { color: #a9a49a; }

.q-help { margin: 0 0 6px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

/* ============ foot ============ */
.foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.foot button {
  padding: 11px 26px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  transition: background 150ms ease, color 150ms ease;
}
.foot button:hover { background: transparent; color: var(--ink); }
.foot button[disabled] { opacity: .4; cursor: default; }
.foot .kicker { max-width: 42ch; }

.error { margin: 0; padding: 8px 0 0; color: #c64e26; font-size: 13px; }

/* ============ role picker ============ */
.picker { place-content: center; text-align: left; padding-inline: clamp(20px, 3vw, 46px); }
.picker h1 {
  margin: 16px 0 34px; max-width: 18ch; font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5vw, 78px); letter-spacing: -.045em; line-height: .94;
}
.picker-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1000px; }
.pick { padding: 24px 26px 26px 0; border-top: 1px solid var(--ink); transition: background 160ms ease; }
.pick + .pick { padding-left: 26px; border-left: 1px solid var(--hair); }
.pick:hover { background: rgba(23, 22, 17, .035); }
.pick b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(25px, 2.4vw, 38px); letter-spacing: -.035em; line-height: 1;
}
.pick em { display: block; margin-top: 10px; color: var(--muted); font-style: normal; font-size: 13.5px; line-height: 1.4; }


/* ============ done ============ */
.done { place-content: center; padding-inline: clamp(20px, 3vw, 46px); }
.done h2 {
  margin: 16px 0 0; max-width: 16ch; font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5vw, 80px); letter-spacing: -.045em; line-height: .94;
}
.done p { margin: 24px 0 0; max-width: 46ch; color: #5d594f; font-size: 17px; line-height: 1.5; }
.done-links { margin-top: 34px; display: flex; gap: 26px; flex-wrap: wrap; }
.done-links a {
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  transition: border-color 150ms ease;
}
.done-links a:hover { border-bottom-color: var(--ink); }

/* ============ narrow ============ */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; gap: 24px; }
  .ask figure { display: none; }
  .ask h1 { max-width: 20ch; }
  .picker-row { grid-template-columns: 1fr; }
  .pick + .pick { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  /* A phone cannot hold seven questions at once; let the page scroll rather than clip them. */
  .frame { height: auto; min-height: 100dvh; }
  .questions { grid-template-columns: 1fr; overflow: visible; }
  .stage { padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}