/* Quill & Compass — landing-page section styles.
   Built on the shared tokens in tokens.css (cut paper, woodcut, parchment).
   Framing/ornament comes from decor.css (.qc-frame--cut, .qc-corner, .qc-divider).
   This file styles the content sections + the two egg states (remembers, cursed).

   Palette rule: every colour here is a token from tokens.css, or an alpha of one
   (rgba(28,19,10,…) = --ink-900, rgba(74,51,32,…) = --ink-500). No local hexes,
   no local token declarations — tokens.css is the only palette.

   Type rule: --font-display is a heavy condensed face and dies below 1.6rem.
   Anything under that floor uses --font-body at 600-700 with a little tracking.
   Every font-family in this file was audited against that floor.

   Depth rule: flat shapes, hard edges and warm offset paper shadows. No specular
   highlights, no glass, no glows, no gilt gradient text.
   Mobile-first; reduced-motion respected. */

/* ============================================================
   Shared section rhythm — generous, printed, never centred-all
   ============================================================ */
.pitch,
.faq,
.founding{
  position:relative;
  width:min(64rem,92vw);
  margin-inline:auto;
  padding-block:clamp(2.4rem,8vh,5rem);
}

/* Printed section rule — a cut ink bar with a rubric tick on the end.
   Hard stops only: this is a struck line, not a gradient. */
.pitch-title::after,
.faq-title::after{
  content:"";
  display:block;
  width:4.2rem;
  height:3px;
  margin-top:.85rem;
  background:linear-gradient(90deg,
    var(--ink-900) 0 68%,
    var(--rubric-deep) 68% 100%);
}

/* ============================================================
   PITCH
   ============================================================ */
.pitch-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem,4.4vw,2.9rem);   /* min stays above the 1.6rem display floor */
  line-height:1.06;
  color:var(--ink-900);
  max-width:22ch;
  margin:0 0 1.4rem;
}
/* the emphasis word is rubricated, the way a scribe would pick out a phrase */
.pitch-title em{ font-style:normal; color:var(--rubric-deep); }

.pitch-intro{
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.65;
  color:var(--ink-700);
  max-width:var(--measure);
  margin:0 0 clamp(2rem,5vh,3.2rem);
}
/* the drop-cap is .qc-dropcap (decor.css); just give the line room */
.pitch-intro .qc-dropcap{ margin-top:.06em; }

.pitch-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem,2.4vw,1.6rem);
}
@media (min-width:46rem){
  .pitch-grid{
    grid-template-columns:repeat(2,1fr);
    /* asymmetric rhythm: nudge alternating cards so it never reads as a flat table */
    align-items:start;
  }
  .pitch-grid > .pitch-card:nth-child(even){ margin-top:clamp(1.2rem,3vw,2.4rem); }
  .pitch-grid > .pitch-card:nth-child(4n+1){ margin-top:clamp(.4rem,1vw,.9rem); }
}

.pitch-card{
  /* qc-frame--cut supplies the notched paper frame */
  display:flex;
  flex-direction:column;
}
.pitch-card h3{
  /* under the display floor — body face, worked hard */
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.08rem,2.1vw,1.32rem);
  line-height:1.16;
  color:var(--ink-900);
  margin:0 0 .35rem;
  letter-spacing:.012em;
}
.pitch-card p{
  font-size:clamp(.95rem,1.4vw,1.04rem);
  line-height:1.6;
  color:var(--ink-700);
  margin:0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.66rem,3.6vw,2.4rem);  /* was 1.5rem min — under the display floor */
  line-height:1.08;
  color:var(--ink-900);
  margin:0 0 clamp(1.4rem,4vh,2.4rem);
  max-width:24ch;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:clamp(.7rem,1.6vw,1rem);
}

.faq-item{
  /* qc-frame--cut frame; collapse the default frame padding a touch for list density */
  padding:clamp(1rem,2.4vw,1.5rem) clamp(1.2rem,3vw,2rem);
}
.faq-q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:.75rem;
  /* under the display floor — body face at 700 reads as a heading and stays legible */
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1rem,1.8vw,1.18rem);
  line-height:1.34;
  letter-spacing:.008em;
  color:var(--ink-900);
  outline:none;
}
.faq-q::-webkit-details-marker{ display:none; }   /* kill default triangle */
/* cut-ink marker — a turning nib, rubricated when the answer is open */
.faq-q::before{
  content:"";
  flex:0 0 auto;
  width:.58em;
  height:.58em;
  margin-top:.2em;
  border-right:2px solid var(--ink-500);
  border-bottom:2px solid var(--ink-500);
  transform:rotate(-45deg);
  transition:transform .25s ease-out,border-color .18s linear;
}
.faq-item[open] .faq-q::before{
  transform:rotate(45deg);
  border-right-color:var(--rubric-deep);
  border-bottom-color:var(--rubric-deep);
}
.faq-item[open] .faq-q{ color:var(--rubric-deep); }
.faq-q:focus-visible{
  outline:2px solid var(--ink-900);
  outline-offset:4px;
  border-radius:0;
}
.faq-a{
  margin-top:.85rem;
  padding-left:calc(.58em + .75rem);   /* align under the question text, past the marker */
}
.faq-a p{
  font-size:clamp(.95rem,1.4vw,1.04rem);
  line-height:1.62;
  color:var(--ink-700);
  margin:0;
}

/* ============================================================
   FOUNDING TABLE (email capture) — printed stationery on parchment
   ============================================================ */
.founding{ width:min(48rem,92vw); }
.founding-card{
  /* qc-frame--cut frame; the four corner flourishes live in markup */
  text-align:left;
}
.founding-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.66rem,3.4vw,2.3rem);  /* was 1.5rem min — under the display floor */
  line-height:1.08;
  color:var(--ink-900);
  margin:0 0 1rem;
  max-width:20ch;
}
.founding-intro{
  font-size:clamp(.98rem,1.5vw,1.1rem);
  line-height:1.62;
  color:var(--ink-700);
  max-width:54ch;
  margin:0 0 1.6rem;
}
.founding-form{ display:block; }
.founding-label{
  display:block;
  /* .84rem — well under the display floor; body face, tracked, small-caps feel */
  font-family:var(--font-body);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-700);
  margin-bottom:.55rem;
}
.founding-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
/* a real ruled field: uninked paper, a struck ink baseline, hard corners,
   and the flat offset shadow a cut sheet casts (not a glow, not an inset gloss) */
.founding-row input{
  flex:1 1 15rem;
  min-width:0;
  background:var(--paper-100);
  border:1px solid rgba(74,51,32,.45);
  border-bottom:2px solid var(--ink-500);
  border-radius:0;
  padding:.8rem .95rem;
  color:var(--ink-900);
  caret-color:var(--ink-900);
  font-family:var(--font-body);
  font-size:1rem;
  box-shadow:2px 2px 0 rgba(28,19,10,.12);
  transition:border-color .16s linear,box-shadow .16s linear;
}
.founding-row input::placeholder{ color:var(--ink-soft); opacity:1; }
/* the old ring was rgba(gold,.15) — effectively invisible on paper.
   Ink border + a rubric ring that you cannot miss. */
.founding-row input:focus,
.founding-row input:focus-visible{
  outline:2px solid var(--rubric-deep);
  outline-offset:2px;
  border-color:var(--ink-900);
  box-shadow:2px 2px 0 rgba(28,19,10,.2);
}
/* the submit button reuses .btn-gold + .qc-btn-accent wrapper from existing CSS */
.founding-note{
  font-family:var(--font-body);
  font-size:.82rem;
  color:var(--ink-soft);
  margin:.9rem 0 0;
  max-width:46ch;
  line-height:1.55;
}
/* error: a rubric correction in the margin */
.founding-note.is-error{
  color:var(--rubric-deep);
  font-weight:600;
  padding-left:.65rem;
  border-left:2px solid var(--rubric);
}
/* success state — replaces the form content */
.founding-success{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--ink-900);
  font-size:clamp(1.05rem,1.8vw,1.2rem);
  line-height:1.5;
  margin:0;
  padding-top:.9rem;
  border-top:2px solid var(--rubric-deep);
}

/* ============================================================
   FOOTER additions (builds on existing .site-foot)
   ============================================================ */
.foot-tag{
  color:var(--ink-700);
  font-size:.95rem;
  margin:0 0 1.4rem;
}
.foot-nav{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  align-items:center;
  margin:1.6rem auto .4rem;
}
.foot-nav a{
  /* .92rem — body face at 600, not the display face */
  font-family:var(--font-body);
  font-weight:600;
  color:var(--ink-700);
  text-decoration:none;
  font-size:.92rem;
  letter-spacing:.012em;
  border-bottom:1px solid rgba(74,51,32,.35);
  padding-bottom:.14rem;
  transition:color .18s ease, border-color .18s ease;
}
.foot-nav a:hover{
  color:var(--rubric-deep);
  border-color:rgba(156,43,28,.55);
}
.foot-nav a:focus-visible{
  outline:2px solid var(--ink-900);
  outline-offset:3px;
  border-radius:0;
}
.foot-legal{
  max-width:56ch;
  margin:1.6rem auto 0;
  padding-top:1.4rem;
  border-top:1px solid rgba(74,51,32,.28);
  color:var(--ink-soft);
  font-size:.78rem;
  line-height:1.6;
}
.foot-legal p{ margin:0 0 .4rem; }
.foot-legal p:last-child{ margin-bottom:0; }

/* The plain pages — privacy, terms, refunds, contact. Kept apart from .foot-nav
   above because that list is the SEO link graph (long descriptive lines, stacked);
   these are four short obligations and belong inline with the disclaimer they sit
   over. Mirrors .qc-foot__legal-nav in site-foot.css so the same four routes look
   the same on the pages that use the other footer. */
.foot-legal-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.1rem .9rem;margin:0 0 .9rem;
}
.foot-legal-nav a{
  position:relative;
  color:var(--ink-700);font-family:var(--font-body);font-weight:700;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:.2rem 0;
  border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
/* a hairline drawn in the gap, not a pipe character — a screen reader should
   read four links, not four links and three vertical bars */
.foot-legal-nav a + a::before{
  content:"";position:absolute;left:-.47rem;top:.35em;bottom:.35em;
  width:1px;background:rgba(74,51,32,.34);
}
.foot-legal-nav a:hover{ color:var(--ink-900);border-bottom-color:var(--ink-500); }
.foot-legal-nav a:focus-visible{ outline:2px solid var(--rubric-deep);outline-offset:3px; }
.foot-legal-nav a[aria-current="page"]{ color:var(--rubric-deep);border-bottom-color:var(--rubric-deep); }

/* ============================================================
   EGG: 'It will remember…' rotating line (from eggs.json)
   Sits inside .hero-content, just under the lede.
   ============================================================ */
.remembers{
  display:block;
  margin:-.6rem 0 1.5rem;
  min-height:1.5em;
  font-family:var(--font-body);
  font-size:clamp(.92rem,1.4vw,1.06rem);
  color:var(--ink-700);
}
.rem-lead{ color:var(--ink-soft); }
.rem-word{
  display:inline-block;
  /* --ember-text is the AA-legible emphasis colour on parchment */
  color:var(--ember-text);
  font-style:italic;
  opacity:0;
  transform:translateY(2px);
  transition:opacity .42s ease-out,transform .42s ease-out;
}
.rem-word.is-in{ opacity:1; transform:translateY(0); }

/* ============================================================
   EGG: Konami 'cursed candlelight' (from eggs.json)
   Toggled on <body>; injects .cursed-note itself.
   Re-imagined for paper: the page SCORCHES. An ember bloom off-centre,
   then charred brown creeping in from the edges — multiplied into the
   parchment so it stains the sheet rather than switching on a dark UI.
   ============================================================ */
.cursed::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:35;
  pointer-events:none;
  background:
    radial-gradient(38% 34% at 63% 27%,rgba(199,94,26,.30) 0,rgba(199,94,26,0) 72%),
    radial-gradient(46% 42% at 50% 48%,transparent 0,rgba(154,60,10,.34) 54%,rgba(74,51,32,.72) 79%,rgba(28,19,10,.9) 100%);
  animation:candleFlicker 2.6s ease-in-out infinite;
  mix-blend-mode:multiply;
}
.cursed--still::before{ animation:none; opacity:.9; }
/* the hero canvas burns sepia instead of going cold-and-dark */
.cursed #atmos{ filter:sepia(.55) saturate(1.4) hue-rotate(-12deg) contrast(1.08) brightness(.94); }
.cursed-note{
  position:fixed;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  z-index:38;
  margin:0;
  pointer-events:none;
  font-family:var(--font-rubric);
  /* position:fixed, so it lands wherever the page has scrolled to — worst case the
     paper-300 ground, where --rubric is 2.82:1. --rubric-deep holds 5.18:1 anywhere
     on the sheet; the ink misregistration plate below is unchanged. */
  color:var(--rubric-deep);
  font-size:clamp(1.66rem,3vw,2.2rem);   /* rubric/display face — above the 1.6rem floor */
  letter-spacing:.05em;
  line-height:1.2;
  text-align:center;
  /* hard 1px offset = two-colour misregistration, a printed device, not a halo */
  text-shadow:1px 1px 0 rgba(28,19,10,.35);
  opacity:0;
  animation:cursedIn 1s ease-out forwards;
}
.cursed-note.out{ animation:cursedOut .8s ease-in forwards; }

/* the scorch breathes; the note bleeds into the paper as it arrives */
@keyframes candleFlicker{ 0%,100%{opacity:.86} 45%{opacity:.97} 55%{opacity:.8} 70%{opacity:.93} }
@keyframes cursedIn{ from{opacity:0;filter:blur(5px)} to{opacity:1;filter:blur(0)} }
@keyframes cursedOut{ to{opacity:0} }

@media (prefers-reduced-motion:reduce){
  .foot-legal-nav a{ transition:none; }
  .rem-word{ opacity:1; transform:none; transition:none; }
  .faq-q::before{ transition:none; }
  .cursed-note{ animation:none; opacity:1; }
  .cursed-note.out{ animation:none; opacity:0; transition:opacity .4s; }
  /* keep a static stain so the egg is still visible, just not flickering */
  .cursed::before{ animation:none !important; opacity:.9; }
}