/* Quaillustrative — visual identity
   Palette: ink navy, aged paper, amber (the QRM "new/extended" color from
   the source diagrams), plum for combination/synthesis, forest for the
   qualitative echo. Two type families: a serif for scholarly authority,
   a plain sans for interface and reading.
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:        #14213D;
  --ink-soft:   #2B3A5C;
  --paper:      #F7F3E9;
  --paper-deep: #EFE8D8;
  --amber:      #E0872A;
  --amber-deep: #B96A1B;
  --plum:       #4B2E63;
  --forest:     #33553A;
  --line:       rgba(20,33,61,0.16);
  --text:       #211C14;
  --text-soft:  #55503F;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --max: 72ch;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(20,33,61,0.035) 1px, transparent 1px);
  background-size:3px 3px;
  z-index:0;
}
a{ color:var(--amber-deep); }
img{ max-width:100%; display:block; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }

/* ---- Nav ---- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.nav .wordmark{
  font-family:var(--serif); font-weight:700; font-size:1.15rem;
  color:var(--ink); text-decoration:none; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:8px;
}
.nav .wordmark span.accent{ color:var(--amber-deep); }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{
  color:var(--ink-soft); text-decoration:none; font-size:.95rem; font-weight:500;
}
.nav-links a:hover{ color:var(--ink); }
.nav .cta-small{
  background:var(--ink); color:var(--paper); padding:9px 18px;
  border-radius:2px; font-weight:500; font-size:.9rem;
}
.nav .cta-small:hover{ background:var(--ink-soft); }
.nav-toggle{
  display:none; background:none; border:none; color:var(--ink);
  padding:8px; cursor:pointer; align-items:center; justify-content:center;
}

/* ---- Hero ---- */
.hero{ padding:76px 0 88px; }
.hero-inner{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px;
  align-items:center;
}
.hero .kicker{
  font-family:var(--sans); font-weight:600; color:var(--amber-deep);
  font-size:.95rem; margin:0 0 14px;
}
.hero h1{
  font-family:var(--serif); font-weight:700; font-size:3.1rem; line-height:1.08;
  margin:0 0 22px; color:var(--ink); letter-spacing:-.01em;
}
.hero p.lead{
  font-size:1.15rem; color:var(--text-soft); max-width:52ch; margin:0 0 30px;
}
.hero .actions{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:13px 26px; border-radius:2px;
  font-weight:500; font-size:.98rem; text-decoration:none; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.btn-primary:hover{ background:var(--amber-deep); border-color:var(--amber-deep); color:var(--paper); }
.btn-ghost{ color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* onion motif — the hero's characteristic image, drawn as concentric
   rings that echo the research onion, animated once on load */
.hero-motif{ display:flex; align-items:center; justify-content:center; }
.hero-motif svg{ width:100%; height:auto; max-width:340px; }
.ring{ fill:none; stroke:var(--ink); opacity:0; transform-origin:170px 170px; }
.ring.amber{ stroke:var(--amber); }
.ring.plum{ stroke:var(--plum); }
@keyframes ringIn{ from{ opacity:0; transform:scale(.85);} to{ opacity:1; transform:scale(1);} }
.ring{ animation:ringIn .7s ease forwards; }
.ring:nth-child(1){ animation-delay:.05s; }
.ring:nth-child(2){ animation-delay:.18s; }
.ring:nth-child(3){ animation-delay:.31s; }
.ring:nth-child(4){ animation-delay:.44s; }
.ring:nth-child(5){ animation-delay:.57s; }
.motif-label{
  font-family:var(--serif); font-size:.85rem; fill:var(--ink-soft);
}

/* ---- Section scaffolding ---- */
section{ padding:64px 0; border-bottom:1px solid var(--line); }
section.no-border{ border-bottom:none; }
.eyebrow{
  font-size:.85rem; color:var(--text-soft); margin:0 0 8px;
}
.eyebrow b{ color:var(--amber-deep); font-weight:600; }
h2{
  font-family:var(--serif); font-size:2rem; color:var(--ink);
  margin:0 0 20px; letter-spacing:-.005em; max-width:24ch;
}
.section-lead{ max-width:var(--max); color:var(--text-soft); font-size:1.05rem; }

/* ---- Positioning statement ---- */
.positioning{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line); margin-top:36px;
}
.positioning > div{
  padding:26px 24px; border-right:1px solid var(--line);
}
.positioning > div:last-child{ border-right:none; }
.positioning .tag{
  font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:10px; display:inline-block;
}
.positioning .tag.q1{ color:var(--ink-soft); }
.positioning .tag.q2{ color:var(--forest); }
.positioning .tag.q3{ color:var(--amber-deep); }
.positioning h3{ font-family:var(--serif); margin:0 0 8px; font-size:1.15rem; color:var(--ink); }
.positioning p{ margin:0; color:var(--text-soft); font-size:.95rem; }

/* ---- Onion layer walk-through ---- */
.layers{ counter-reset:layer; margin-top:40px; }
.layer{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:26px 0; border-top:1px solid var(--line);
}
.layer:first-child{ border-top:none; }
.layer .num{
  counter-increment:layer;
  font-family:var(--serif); font-size:1.6rem; color:var(--amber-deep);
}
.layer .num::before{ content: counter(layer, decimal-leading-zero); }
.layer h4{ font-family:var(--serif); margin:0 0 6px; font-size:1.15rem; color:var(--ink); }
.layer p{ margin:0; color:var(--text-soft); }
.layer .qrm-add{
  display:inline-block; margin-top:8px; font-size:.85rem; color:var(--amber-deep);
  background:rgba(224,135,42,0.12); padding:3px 9px; border-radius:2px;
}

/* ---- Figures ---- */
figure{ margin:36px 0 0; }
figure img{ border:1px solid var(--line); background:#fff; }
figcaption{
  font-size:.9rem; color:var(--text-soft); margin-top:10px; max-width:var(--max);
}

/* ---- Traffic-light example callout ---- */
.example{
  background:var(--paper-deep); border:1px solid var(--line); padding:36px;
  margin-top:36px;
}
.example h3{ font-family:var(--serif); margin-top:0; color:var(--ink); }

/* ---- Ecosystem / other ventures ---- */
.eco-primary{
  display:block; border:1px solid var(--line); background:#fff;
  padding:32px; text-decoration:none; color:inherit; margin-top:36px;
  transition:border-color .12s ease;
}
.eco-primary:hover{ border-color:var(--ink-soft); }
.eco-primary-label{
  font-size:.8rem; font-weight:600; color:var(--amber-deep);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.eco-primary h3{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); margin:0 0 10px; }
.eco-primary p{ color:var(--text-soft); margin:0 0 14px; max-width:var(--max); }
.eco-primary .eco-link{ color:var(--amber-deep); font-weight:600; font-size:.95rem; }

.eco-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }
.eco-card{
  display:block; border:1px solid var(--line); padding:22px;
  text-decoration:none; color:inherit; background:#fff;
  transition:border-color .12s ease;
}
.eco-card:hover{ border-color:var(--ink-soft); }
.eco-card h4{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); margin:0 0 8px; }
.eco-card p{ font-size:.88rem; color:var(--text-soft); margin:0; }

/* ---- Book panel ---- */
.book-panel{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px;
  align-items:start; margin-top:36px;
}
.book-card{
  border:1px solid var(--line); background:#fff; padding:30px;
}
.book-card-label{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin:0 0 6px; }
.book-card-sub{ font-size:.9rem; color:var(--text-soft); margin:0 0 22px; }
.book-specs{ display:grid; gap:0; border-top:1px solid var(--line); }
.book-specs div{
  display:grid; grid-template-columns:110px 1fr; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--text);
}
.book-specs span{ color:var(--text-soft); font-size:.85rem; }

/* ---- Evidence / CV strip ---- */
.evidence{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:36px; }
.evidence .stat{ border-top:2px solid var(--ink); padding-top:12px; }
.evidence .stat .n{ font-family:var(--serif); font-size:1.8rem; color:var(--ink); }
.evidence .stat .d{ font-size:.88rem; color:var(--text-soft); }

/* ---- Copilot CTA band ---- */
.cta-band{
  background:var(--ink); color:var(--paper); padding:64px 0;
}
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ color:var(--paper); margin:0; max-width:20ch; }
.cta-band p{ color:#C8CEDD; max-width:44ch; margin:10px 0 0; }
.cta-band .btn-primary{ border-color:var(--amber); }

/* ---- Footer ---- */
footer{ padding:32px 0 48px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer p{ margin:0; font-size:.85rem; color:var(--text-soft); }

/* ================= COPILOT PAGE ================= */
.copilot-shell{ padding:56px 0 90px; }
.copilot-head{ max-width:var(--max); margin-bottom:44px; }
.copilot-head h1{
  font-family:var(--serif); font-size:2.3rem; color:var(--ink); margin:0 0 14px;
}
.progress{ display:flex; gap:6px; margin:28px 0 0; }
.progress .dot{ height:4px; flex:1; background:var(--line); border-radius:2px; }
.progress .dot.done{ background:var(--amber); }
.progress .dot.current{ background:var(--ink); }

.step{ display:none; max-width:640px; }
.step.active{ display:block; }
.step .step-eyebrow{ color:var(--amber-deep); font-weight:600; font-size:.9rem; margin-bottom:6px; }
.step h2{ font-size:1.6rem; margin-bottom:10px; }
.step p.help{ color:var(--text-soft); margin-bottom:26px; }

.option-grid{ display:grid; gap:12px; }
.option{
  border:1px solid var(--line); padding:16px 18px; cursor:pointer;
  display:flex; align-items:flex-start; gap:12px; background:#fff;
  transition:border-color .12s ease, background .12s ease;
}
.option:hover{ border-color:var(--ink-soft); }
.option.selected{ border-color:var(--amber-deep); background:rgba(224,135,42,0.08); }
.option input{ margin-top:3px; accent-color:var(--amber-deep); }
.option .o-title{ font-weight:600; color:var(--ink); }
.option .o-desc{ font-size:.88rem; color:var(--text-soft); margin-top:2px; }

textarea, input[type=text], input[type=email]{
  width:100%; font-family:var(--sans); font-size:1rem; padding:12px 14px;
  border:1px solid var(--line); background:#fff; color:var(--text);
}
textarea{ min-height:110px; resize:vertical; }

.step-actions{ display:flex; justify-content:space-between; margin-top:32px; }
.btn-plain{
  background:none; border:none; color:var(--ink-soft); font-family:var(--sans);
  font-size:.95rem; cursor:pointer; padding:12px 4px;
}
.btn-next{
  background:var(--ink); color:var(--paper); border:none; padding:13px 28px;
  font-size:.98rem; cursor:pointer; border-radius:2px;
}
.btn-next:hover{ background:var(--ink-soft); }
.btn-next:disabled{ background:var(--line); color:var(--text-soft); cursor:not-allowed; }

/* results */
#result{ max-width:760px; }
.result-card{
  border:1px solid var(--line); background:#fff; padding:32px; margin-top:20px;
}
.result-row{ display:grid; grid-template-columns:160px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.result-row:first-child{ border-top:none; }
.result-row .rk{ font-size:.85rem; font-weight:600; color:var(--amber-deep); text-transform:uppercase; letter-spacing:.03em; }
.result-row .rv{ color:var(--text); }
.result-note{
  margin-top:22px; padding:16px 18px; background:var(--paper-deep); border-left:3px solid var(--amber);
  font-size:.95rem; color:var(--text-soft);
}
.capture{ margin-top:32px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.capture input{ flex:1; min-width:220px; }
.small-note{ font-size:.8rem; color:var(--text-soft); margin-top:8px; }

@media (max-width:820px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-motif{ order:-1; max-width:220px; margin:0 auto; }
  .positioning{ grid-template-columns:1fr; }
  .positioning > div{ border-right:none; border-bottom:1px solid var(--line); }
  .evidence{ grid-template-columns:1fr 1fr; }
  .book-panel{ grid-template-columns:1fr; }
  .eco-grid{ grid-template-columns:1fr 1fr; }
  .layer{ grid-template-columns:40px 1fr; }
}

@media (max-width:700px){
  .nav-wrap{ position:relative; flex-wrap:nowrap; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:16px 32px 22px; z-index:30;
    box-shadow:0 8px 16px rgba(20,33,61,0.08);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:10px 0; width:100%; }
  .nav .cta-small{ margin-top:8px; text-align:center; }
}