/* ============================================================
   NotebookLM Guide — Editorial Layer
   Written FOR the rewritten HTML, not against the old one.

   The previous version tried to make component-driven markup feel
   editorial by stripping it — blanket `:is(div, span, li…){border:none}`
   rules that would have quietly broken any future page. That was CSS
   fighting the HTML. The HTML is now written as prose, so this file
   only styles what is actually there. It strips nothing.

   Principle: machines need structure, people need rhythm.
   The structure stays in the visible HTML (and in the schema).
   The dashboard chrome is gone.
   ============================================================ */

:root{
  /* Type scale with a real drop from display to caption */
  --fs-display: clamp(2.5rem, 5.4vw, 4.1rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.35rem);
  --fs-h3:      1.5rem;
  --fs-lead:    clamp(1.2rem, 1.9vw, 1.45rem);
  --fs-body:    1.06rem;
  --fs-caption: .78rem;

  /* Three widths, deliberately different — this is the cadence */
  --w-narrow: 660px;
  --w-wide:   880px;
  --w-full:   1080px;

  --air:      clamp(64px, 9vw, 128px);    /* between movements */
  --air-big:  clamp(96px, 13vw, 176px);   /* around the big moments */

  --rule: rgba(0,0,0,.09);
}

/* ---- One invisible left edge. Everything hangs off it. ---- */
.ed-open, .ed-prose, .ed-stage, .ed-moment, .ed-cta{
  --_edge: max(clamp(20px, 5vw, 48px), (100vw - var(--w-full)) / 2);
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--_edge);
  margin-block: var(--air);
}
.ed-open > *, .ed-prose > *, .ed-stage > *, .ed-cta > *{
  max-width: var(--w-narrow);
  margin-inline: 0;
}

/* ============================================================
   OPENING — a claim, then air. Nothing else.
   ============================================================ */
.ed-open{ margin-top: clamp(48px, 7vw, 96px); margin-bottom: var(--air-big); }

.ed-eyebrow{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--fs-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold, #9a7a2e);
  margin: 0 0 24px;
}
.ed-open h1{
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -.024em;
  margin: 0 0 32px;
  max-width: 16ch;
}
.ed-lead{
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 500;
  margin: 0 0 24px;
  max-width: 36ch;
}
.ed-sub{
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-2, #4a4a46);
  margin: 0 0 48px;
  max-width: 54ch;
}
.ed-meta{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--fs-caption);
  color: var(--ink-4, #8a8a84);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   PROSE — the connective tissue
   ============================================================ */
.ed-prose h2{
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -.016em;
  margin: 0 0 32px;
  max-width: 20ch;
}
.ed-prose p{
  font-size: var(--fs-body);
  line-height: 1.8;
  margin: 0 0 24px;
  max-width: 66ch;
}
.ed-prose p:last-child{ margin-bottom: 0; }

/* ============================================================
   ★ MOMENT 1 — the diagram gets a stage to itself
   ============================================================ */
.ed-moment{ margin-block: var(--air-big); }
.ed-moment-title{
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -.016em;
  margin: 0 0 48px;
}
.ed-figure{ margin: 0; max-width: var(--w-full); }
.ed-figure svg{ width: 100%; height: auto; display: block; }
.ed-figure figcaption{
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-3, #6a6a64);
  margin-top: 32px;
  max-width: 58ch;
}

/* ============================================================
   ★ MOMENT 2 — list vs synthesis. The idea that earns a spread.
   ============================================================ */
.ed-contrast > *{ max-width: var(--w-full); }

.ed-example{ margin-bottom: 64px; max-width: 60ch; }
.ed-example-label{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold, #9a7a2e);
  margin: 0 0 12px;
}
.ed-example p:not(.ed-example-label){
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin: 0;
}

.ed-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  max-width: var(--w-full);
}
.ed-split-col h3{
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink, #111);
}
.ed-split-def{ font-size: var(--fs-body); line-height: 1.7; margin: 0 0 24px; }
.ed-split-eg{
  font-size: 1.02rem;
  line-height: 1.72;
  font-style: italic;
  color: var(--ink-2, #4a4a46);
  padding-left: 24px;
  border-left: 2px solid var(--rule);
  margin: 0 0 24px;
}
.ed-split-verdict{
  font-size: .96rem;
  line-height: 1.68;
  color: var(--ink-3, #6a6a64);
  margin: 0;
}
.ed-moment-close{
  font-size: var(--fs-lead);
  line-height: 1.62;
  margin: 64px 0 0;
  max-width: 60ch;
}

/* ============================================================
   THE SEVEN STAGES — narrative, with varied width for cadence
   01–02 narrow · 03 wide · 04–06 wide (the engine) · 07 narrow
   ============================================================ */
.ed-stage{ margin-block: 64px; }
.ed-stage--narrow > *{ max-width: var(--w-narrow); }
.ed-stage--wide   > *{ max-width: var(--w-wide); }

.ed-stage-num{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold, #9a7a2e);
  opacity: .38;
  margin: 0 0 8px;
}
.ed-stage h3{ font-size: var(--fs-h3); letter-spacing: -.012em; margin: 0 0 16px; }
.ed-stage p{ font-size: var(--fs-body); line-height: 1.8; margin: 0 0 16px; max-width: 66ch; }
.ed-stage--core p{ font-size: 1.09rem; }   /* the engine carries more weight */

.ed-stage-out{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .84rem !important;
  line-height: 1.7;
  color: var(--ink-3, #6a6a64);
  margin: 24px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  max-width: 60ch;
}
.ed-stage-out span{ color: var(--gold, #9a7a2e); margin: 0 .35em; }
.ed-stage-out strong{ color: var(--ink, #111); font-weight: 600; }

/* ============================================================
   ARTIFACTS — a definition list. A lexicon, not a card wall.
   ============================================================ */
.ed-dl{ margin: 48px 0 0; max-width: var(--w-wide); }
.ed-dl dt{
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.16rem;
  font-weight: 600;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.ed-dl dt:first-of-type{ margin-top: 0; padding-top: 0; border-top: none; }
.ed-dl dd{
  margin: 8px 0 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-2, #4a4a46);
  max-width: 64ch;
}

/* ============================================================
   ★ MOMENT 3 — the prompt as a workbench, not a billboard
   ============================================================ */
.ed-workbench > *{ max-width: var(--w-full); }
.ed-workbench-intro{
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-2, #4a4a46);
  margin: 0 0 48px;
  max-width: 60ch;
}
/* The one filled element on the page. Quiet, wide, generous. */
.ed-workbench .hero-prompt{
  background: var(--gold-bg, #fdf8ee);
  border: none;
  border-left: 2px solid var(--gold, #9a7a2e);
  border-radius: 0;
  padding: clamp(28px, 4vw, 48px);
  max-width: var(--w-full);
}
.ed-workbench .hero-prompt p{ line-height: 1.75; }

/* ============================================================
   CHECKLIST — hairlines between rows, not a box around each.
   (.check-item alone used to contribute 32 borders to this page.)
   ============================================================ */
.ed-check{ list-style: none; margin: 48px 0 0; padding: 0; max-width: var(--w-wide); }
.ed-check li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.ed-check li:last-child{ border-bottom: none; }
.ed-check li span{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold, #9a7a2e);
  flex: 0 0 auto;
}

/* ============================================================
   FAQ — native <details>. Semantic, keyboard-accessible, no JS.
   ============================================================ */
.ed-faq{ border-bottom: 1px solid var(--rule); max-width: var(--w-wide); }
.ed-faq summary{
  cursor: pointer;
  padding: 24px 0;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.ed-faq summary::-webkit-details-marker{ display: none; }
.ed-faq summary::after{
  content: '+';
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 300;
  color: var(--gold, #9a7a2e);
  flex: 0 0 auto;
}
.ed-faq[open] summary::after{ content: '\2212'; }
.ed-faq summary:focus-visible{ outline: 2px solid var(--gold, #9a7a2e); outline-offset: 3px; }
.ed-faq p{
  margin: 0 0 24px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-2, #4a4a46);
  max-width: 64ch;
}

/* ============================================================
   CTA — one action. The alternative is a text link, not a rival box.
   ============================================================ */
.ed-cta{ margin-block: var(--air-big); }
.ed-cta h2{ font-size: var(--fs-h2); letter-spacing: -.016em; margin: 0 0 16px; }
.ed-cta p{
  font-size: var(--fs-body);
  line-height: 1.75;
  margin: 0 0 32px;
  max-width: 58ch;
  color: var(--ink-2, #4a4a46);
}
.ed-cta-action{ margin-bottom: 24px !important; }
.ed-cta-alt{
  font-size: .95rem !important;
  color: var(--ink-3, #6a6a64) !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   MOBILE — the hierarchy must survive the squeeze
   ============================================================ */
@media (max-width: 768px){
  .ed-split{ grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 480px){
  :root{
    --fs-display: clamp(2rem, 9vw, 2.6rem);
    --air: 56px;
    --air-big: 76px;
  }
  .ed-open h1, .ed-lead{ max-width: none; }
  .ed-check li{ flex-direction: column; gap: 8px; }
  .ed-stage-num{ font-size: 2rem; }
}

/* ============================================================
   HERO — iconic.
   "The Grounded Research Loop" is the name people should carry
   away; "Research with AI" is context, not the headline. So the
   name gets the display size and the context becomes the eyebrow.
   ============================================================ */
:root{ --fs-display: clamp(2.9rem, 7vw, 5.2rem); }
.ed-open h1{ max-width: 12ch; letter-spacing: -.03em; line-height: 1.0; }

/* The diagram is the page's signature image — give it room to be one. */
.ed-figure{ max-width: none; }
.ed-figure svg{ max-width: min(1240px, 96vw); }

/* ============================================================
   THE WORKED EXAMPLE — the Loop on one real question
   Readers trust a framework once they see it spend real numbers:
   120 papers in, 35 survive triage, 33 get cited.
   ============================================================ */
.ed-case > *{ max-width: var(--w-full); }
.ed-case-intro{
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-2, #4a4a46);
  margin: 0 0 48px;
  max-width: 60ch;
}
.ed-flow{ list-style: none; margin: 0; padding: 0; max-width: var(--w-full); }
.ed-flow-step{
  display: grid;
  grid-template-columns: 120px 1fr 110px;
  gap: 28px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.ed-flow-step:last-child{ border-bottom: none; }
.ed-flow-stage{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold, #9a7a2e);
}
.ed-flow-what{ font-size: 1.02rem; line-height: 1.7; }
.ed-flow-count{
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .92rem;
  color: var(--ink-3, #6a6a64);
  text-align: right;
}
/* the two steps where the funnel actually narrows carry the weight */
.ed-flow-step--cut .ed-flow-count,
.ed-flow-step--key .ed-flow-count{
  color: var(--ink, #111);
  font-weight: 600;
}
.ed-flow-step--key .ed-flow-what{ font-size: 1.06rem; }

.ed-case-out{
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin: 56px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--gold, #9a7a2e);
  max-width: 64ch;
}

/* ============================================================
   RHYTHM — composition varies, not just width
   ============================================================ */
/* an aside: a quieter second beat inside a stage */
.ed-aside{
  font-size: .98rem !important;
  line-height: 1.7;
  color: var(--ink-3, #6a6a64);
  padding-left: 20px;
  border-left: 2px solid var(--rule);
  max-width: 58ch;
}

/* the one pull quote on the page — the sentence to remember */
.ed-pull{
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.35;
  letter-spacing: -.012em;
  font-style: italic;
  margin: 48px 0;
  padding: 0;
  border: none;
  max-width: 22ch;
  color: var(--ink, #111);
}

/* artifacts: definition, then a concrete instance */
.ed-eg{
  display: block;
  margin-top: 10px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ink-4, #8a8a84);
}
.ed-eg em{ color: var(--ink-3, #6a6a64); font-style: normal; }

/* CTA bridge: earns the transition instead of lurching into a pitch */
.ed-cta-bridge{
  font-size: 1.02rem !important;
  color: var(--ink-3, #6a6a64) !important;
  margin: 0 0 20px !important;
  padding-left: 20px;
  border-left: 2px solid var(--gold, #9a7a2e);
  max-width: 52ch;
}

@media (max-width: 768px){
  .ed-flow-step{ grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .ed-flow-count{ text-align: left; }
  .ed-pull{ max-width: none; font-size: 1.35rem; margin: 36px 0; }
}