/* ============================================================================
   StorySitting — design system
   Rebuilt 2026-07-25. The previous version was, verbatim, the most common
   AI-default look: cream #faf6ef ground + Georgia serif + terracotta accent.
   It appeared regardless of subject. This one is derived from the subject.

   SUBJECT: a recorded phone call with an 80-year-old, turned into written prose.
   AUDIENCE: their adult daughter, 35-60, reading on a phone, afraid of running
   out of time, and quietly wondering whether this is a scam.
   THE PAGE'S ONE JOB: get her to spend $5 to have us make the call.

   PALETTE — from the subject's own materials, not a trend:
     --endpaper  warm pale greige, the endpaper of an old book / an almond
                 wall telephone. Deliberately NOT cream.
     --card      mounted paper, like a document laid on the album page
     --recorder  the desaturated green of old recording equipment and
                 telephone-company steel. Primary accent.
     --emulsion  aged photographic amber. Secondary, used sparingly.
   Every text pairing below is >= 4.5:1 on both grounds (verified, not assumed).

   TYPE — three voices, because the product has three:
     Fraunces      the keepsake. Warm old-style display, optical sizing.
     Karla         the interface talking to you. Humanist, warmer than Inter.
     Courier Prime the recording. Transcripts and screenplays are set in
                   Courier; this is the subject's actual vernacular, not decor.
     Lora          the finished chapter prose (loaded on /sample only).

   SIGNATURE: the transcript block. Raw timecoded speech on one side, the
   edited prose on the other, disfluencies left in. It is the product, the
   proof, and the one thing no competitor in this category shows.
   ============================================================================ */

:root{
  --endpaper:#e9e6dd;
  --endpaper-deep:#e0dcd1;
  --card:#fbfaf7;
  --ink:#2a2724;
  --ink-soft:#585149;
  --line:#d6d1c4;
  --hair:#c9c3b3;
  --recorder:#1f5754;
  --recorder-deep:#17423f;
  --emulsion:#8a5d14;

  --measure:37rem;         /* reading column */
  --wide:52rem;            /* the transcript breaks out to here */

  --step--1:0.8125rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:1.5rem;
  --step-3:1.9375rem;
  --step-4:2.5rem;
  --step-5:3.25rem;

  --sans:'Karla',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Fraunces',ui-serif,Georgia,serif;
  --mono:'Courier Prime',ui-monospace,'Courier New',monospace;
  --prose:'Lora',ui-serif,Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--endpaper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 20px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 20px}

/* Sections own their vertical rhythm through one selector only, so nothing
   fights over margins later. */
section{padding:38px 0 0}
section:last-of-type{padding-bottom:8px}

hr.rule{
  height:0;border:0;border-top:1px solid var(--hair);
  margin:44px 0 0;
}

/* ---------------------------------------------------------------- type */
h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.13;
  letter-spacing:-0.018em;
  margin:0 0 16px;
  text-wrap:balance;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-0.01em}
@media(min-width:640px){
  h1{font-size:var(--step-5)}
  h2{font-size:var(--step-4)}
}
p{margin:0 0 17px}
.lede{font-size:var(--step-1);color:var(--ink-soft);line-height:1.55}
.muted{color:var(--ink-soft)}
.small{font-size:var(--step--1)}
a{color:var(--recorder-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ink)}

:focus-visible{
  outline:2.5px solid var(--recorder);
  outline-offset:2px;
  border-radius:2px;
}

/* Eyebrow labels are set in the transcript face — they read as machine
   annotations on a recording, which is what they are. */
.kicker,.label{
  font-family:var(--mono);
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--recorder);
}
.kicker{display:block;margin-bottom:16px}

/* ---------------------------------------------------------------- masthead */
.masthead{padding:20px 0 0;display:flex;align-items:baseline;gap:10px}
.brand{
  font-family:var(--display);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--ink)}
.brand-mark{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------------------------------------------------------------- hero */
header.hero{padding:40px 0 4px}
header.hero .lede{max-width:33rem}
.hero-cta{margin-top:26px}
.btn-sub{display:block;margin-top:12px;font-size:var(--step--1);color:var(--ink-soft)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:.005em;
  color:#fff;
  background:var(--recorder);
  border:0;
  border-radius:3px;
  padding:15px 26px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 0 var(--recorder-deep);
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:var(--recorder-deep);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-wide{display:block;width:100%;text-align:center}

/* ---------------------------------------------------------------- THE SIGNATURE
   A recording rendered as the artifact it is. Timecodes and speaker labels in
   Courier; the edited prose beside it in the keepsake face. Disfluencies are
   left in on purpose — that is the evidence a real person said it. */
.tape{
  max-width:var(--wide);
  margin:26px auto 0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.tape-head{
  display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;
  padding:12px 18px;
  background:var(--endpaper-deep);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.tape-head b{color:var(--ink);font-weight:700}
/* Separators are drawn, not typed, so a wrap can never orphan a middot on its
   own line — which is exactly what the hand-written version did at 390px. */
.tape-head span::before{content:"\00b7";margin-right:12px}
@media(max-width:520px){
  .tape-head{display:block}
  .tape-head span{display:block}
  .tape-head span::before{content:none;margin:0}
}
.tape-body{display:grid;grid-template-columns:1fr}
@media(min-width:720px){
  .tape-body{grid-template-columns:1fr 1fr}
}
.tape-col{padding:20px 20px 22px}
.tape-col + .tape-col{border-top:1px solid var(--line)}
@media(min-width:720px){
  .tape-col + .tape-col{border-top:0;border-left:1px solid var(--line)}
}
.tape-col > .label{display:block;margin-bottom:14px}

/* raw transcript */
.tscript{font-family:var(--mono);font-size:.875rem;line-height:1.75;margin:0}
.tscript div{margin-bottom:11px;display:grid;grid-template-columns:4.1rem 1fr;gap:0 8px}
.tscript time{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tscript b{color:var(--recorder);font-weight:700;display:block}
.tscript span{display:block;color:var(--ink)}

/* the same words, edited */
.tprose{font-family:var(--display);font-size:1.0625rem;line-height:1.6;color:var(--ink);margin:0}
.tprose p{margin:0 0 13px}
.tprose p:last-child{margin:0}

.tape-foot{
  padding:12px 18px;border-top:1px solid var(--line);
  background:var(--endpaper-deep);
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.03em;
}

/* ---------------------------------------------------------------- timed steps
   Numbered 01/02/03 markers would be decoration here. Duration is the thing
   the reader actually wants to know ("how long is this going to take, and how
   much of it lands on my parent?"), so the marker carries the duration. */
.timed{list-style:none;padding:0;margin:24px 0 0}
.timed li{
  display:grid;grid-template-columns:5.6rem 1fr;gap:0 18px;
  padding-bottom:22px;
}
.timed li:last-child{padding-bottom:4px}
.timed .when{
  font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--recorder);
  padding-top:.32em;
  border-top:2px solid var(--recorder);
}
.timed b{display:block;font-family:var(--display);font-size:1.125rem;font-weight:600;margin-bottom:3px}
.timed p{margin:0;color:var(--ink-soft);font-size:1rem}

/* ---------------------------------------------------------------- cards */
.honest,.price-card,.who,.excerpt,.disclose{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
}
.honest{padding:20px 22px;margin-top:22px;border-left:3px solid var(--recorder)}
.honest h3{margin:0 0 12px;font-size:1.0625rem;color:var(--recorder-deep)}
.honest ul{margin:0;padding-left:19px}
.honest li{margin-bottom:10px;color:var(--ink-soft)}
.honest li:last-child{margin-bottom:0}
.honest li strong{color:var(--ink)}

.who{padding:19px 22px;margin-top:22px;font-size:1rem;color:var(--ink-soft)}
.who strong{color:var(--ink)}

.disclose{
  padding:16px 19px;margin:0 0 28px;
  border-left:3px solid var(--emulsion);
  font-size:1rem;color:var(--ink-soft);
}
.disclose strong{color:var(--ink)}

/* ---------------------------------------------------------------- pricing
   A price list, set like one: the amount and what it buys on one line, hairline
   between rows. Not three feature-columns nobody compares. */
.price-card{padding:6px 22px 20px;margin-top:22px}
.prow{
  display:grid;grid-template-columns:5.4rem 1fr;gap:0 16px;
  padding:17px 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.prow:last-of-type{border-bottom:0}
.prow .amt{
  font-family:var(--display);font-size:1.75rem;font-weight:600;
  letter-spacing:-0.03em;color:var(--ink);line-height:1;
}
.prow .what{font-size:1rem}
.prow .what b{display:block;font-family:var(--sans);font-weight:700;margin-bottom:2px}
.prow .what span{color:var(--ink-soft)}
.prow.free .amt{color:var(--recorder);font-size:1.25rem}
.nonref{
  display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;color:var(--emulsion);
  letter-spacing:.02em;
}

/* ---------------------------------------------------------------- excerpt */
.excerpt{padding:22px 22px 18px;margin-top:22px}
.excerpt .label{display:block;margin-bottom:14px}
.excerpt blockquote{margin:0;font-family:var(--display);font-size:1.1875rem;line-height:1.55}
.excerpt blockquote p{margin:0}
.excerpt blockquote em{font-style:italic;color:var(--recorder-deep)}

/* ---------------------------------------------------------------- chapter prose */
.chapter{font-family:var(--prose);font-size:1.125rem;line-height:1.78;color:var(--ink)}
.chapter p{margin:0 0 21px}
.chapter p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-size:3.6em;line-height:.83;
  padding:.06em .07em 0 0;color:var(--recorder);font-weight:600;
}

/* ---------------------------------------------------------------- FAQ */
.faq{margin-top:20px}
.faq details{
  border-bottom:1px solid var(--line);
}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:15px 34px 15px 0;position:relative;
  font-weight:700;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:19px;color:var(--recorder);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{padding-bottom:6px}
.faq .a{padding:0 0 17px;color:var(--ink-soft)}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin:0}

/* ---------------------------------------------------------------- form */
form{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:22px 20px;margin-top:22px;
}
.field{margin-bottom:17px}
label{
  display:block;font-size:.875rem;font-weight:700;margin-bottom:6px;color:var(--ink);
}
.req{color:var(--emulsion)}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;padding:11px 12px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:3px;
}
input:focus,textarea:focus{
  outline:none;border-color:var(--recorder);
  box-shadow:0 0 0 3px rgba(31,87,84,.16);
}
textarea{min-height:96px;resize:vertical;line-height:1.55}
.hint{font-size:.8125rem;color:var(--ink-soft);margin-top:5px}
.consent{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--endpaper);border:1px solid var(--line);border-radius:3px;padding:13px;
}
.consent input{margin-top:2px;width:24px;height:24px;flex:none;accent-color:var(--recorder)}
.consent label{font-weight:400;font-size:.875rem;margin:0;color:var(--ink-soft)}
button.cta{
  display:block;width:100%;margin-top:4px;
  font-family:var(--sans);font-size:1.0625rem;font-weight:700;
  color:#fff;background:var(--recorder);
  border:0;border-radius:3px;padding:15px;cursor:pointer;
  box-shadow:0 1px 0 var(--recorder-deep);
  transition:background .15s ease;
}
button.cta:hover{background:var(--recorder-deep)}
button.cta:disabled{opacity:.62;cursor:progress}
.form-note{
  margin-top:13px;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.02em;
}
.err{
  display:none;margin-bottom:15px;padding:12px 14px;
  background:#f7ebe6;border:1px solid #ddb6a5;border-left:3px solid #9c3f1c;
  border-radius:3px;color:#7d3216;font-size:.9375rem;
}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- comparison */
.tbl-scroll{
  overflow-x:auto;margin-top:22px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;
}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.9375rem}
table.cmp th,table.cmp td{
  padding:13px 15px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
table.cmp thead th{
  background:var(--endpaper-deep);
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap;
}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tr.us{background:#f2f5f3}
table.cmp tr.us .who-cell{color:var(--recorder-deep)}
table.cmp .who-cell{font-weight:700;white-space:nowrap}
table.cmp td small{display:block;font-weight:400;color:var(--ink-soft);font-size:12px}
.yes{color:var(--recorder-deep);font-weight:700}
.no{color:var(--emulsion);font-weight:700}
.checked,.src{font-size:.875rem;color:var(--ink-soft);margin-top:12px}
.src a{color:var(--ink-soft)}
.lose{
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--emulsion);border-radius:4px;
  padding:20px 22px;margin-top:22px;
}
.lose h3{margin:0 0 12px;font-size:1.0625rem;color:var(--emulsion)}
.lose ul{margin:0;padding-left:19px}
.lose li{margin-bottom:11px;color:var(--ink-soft)}
.lose li:last-child{margin-bottom:0}
.lose li strong{color:var(--ink)}

/* ---------------------------------------------------------------- legal */
.legal{font-size:1rem}
.legal h2{font-size:1.375rem;margin:34px 0 10px}
.legal ul{padding-left:20px}
.legal li{margin-bottom:9px;color:var(--ink-soft)}
.legal li strong{color:var(--ink)}
.legal .updated{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);
  letter-spacing:.03em;text-transform:uppercase;
}

/* ---------------------------------------------------------------- footer */
footer{
  margin-top:48px;padding:26px 0 54px;
  border-top:1px solid var(--hair);
  font-size:.875rem;color:var(--ink-soft);
}
footer nav{margin-bottom:13px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
footer nav a{margin-right:14px;white-space:nowrap;color:var(--ink-soft)}
footer p{margin:0 0 9px}
footer p:last-child{margin:0}