:root{
    --olive-deep: #3E4A34;
    --olive-mid: #5C6B4C;
    --terracotta: #AE5A38;
    --limestone: #EAE3D2;
    --limestone-soft: #F3EEE1;
    --ink: #262620;
    --ink-soft: #55564C;
    --dove: #F4F1E8;
    --sage: #93A085;
    --border: rgba(38,38,32,0.12);
    --radius: 3px;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--limestone-soft);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
  }
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--terracotta); outline-offset:2px;}

  /* ---- Nav ---- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(243,238,225,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
  }
  .nav-wrap{
    max-width:1160px; margin:0 auto; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .wordmark{
    display:flex; align-items:center; gap:10px;
    font-family:var(--serif); font-weight:600; font-size:1.05rem;
    letter-spacing:0.01em; text-decoration:none; color:var(--olive-deep);
    white-space:nowrap;
  }
  .wordmark svg{ width:22px; height:22px; flex-shrink:0; }
  nav.main-links{ display:flex; gap:4px; flex-wrap:wrap; }
  nav.main-links a{
    font-family:var(--sans); font-size:0.88rem; font-weight:500;
    color:var(--ink-soft); text-decoration:none; display:inline-block;
    padding:8px 12px; border-radius:var(--radius); letter-spacing:0.01em;
    transition:background 0.15s, color 0.15s;
  }
  nav.main-links a:hover{ background:rgba(62,74,52,0.08); color:var(--olive-deep); }
  nav.main-links a.active{ color:var(--dove); background:var(--olive-deep); }

  /* mobile nav toggle */
  .nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; cursor:pointer; }
  @media (max-width:820px){
    nav.main-links{
      display:none; position:absolute; top:100%; left:0; right:0;
      background:var(--limestone-soft); flex-direction:column; padding:8px;
      border-bottom:1px solid var(--border);
    }
    nav.main-links.open{ display:flex; }
    .nav-toggle{ display:block; }
  }

  main{ max-width:1160px; margin:0 auto; padding:0 24px; }
  main{ animation:fadein 0.25s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  .eyebrow{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--terracotta); font-weight:500;
  }

  /* ---- Hero ---- */
  .hero{ padding:96px 0 56px; text-align:center; }
  .hero h1{
    font-family:var(--serif); font-weight:600; font-optical-sizing:auto;
    font-size:clamp(2.4rem, 5.5vw, 4.2rem); line-height:1.05; margin:18px 0 22px;
    color:var(--olive-deep);
  }
  .hero .sub{
    max-width:640px; margin:0 auto; font-size:1.15rem; color:var(--ink-soft);
    line-height:1.65;
  }
  .doors{
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px;
  }
  .btn{
    font-family:var(--sans); font-weight:600; font-size:0.92rem;
    padding:13px 24px; border-radius:var(--radius); border:1px solid transparent;
    cursor:pointer; text-decoration:none; display:inline-block;
    transition:transform 0.15s, box-shadow 0.15s;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{ background:var(--olive-deep); color:var(--dove); }
  .btn-primary:hover{ box-shadow:0 6px 18px rgba(62,74,52,0.28); }
  .btn-ghost{ background:transparent; border-color:var(--border); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--olive-deep); }

  /* ---- Branch divider (signature element) ---- */
  .branch-divider{ display:flex; justify-content:center; margin:64px 0; }
  .branch-divider svg{ width:min(560px, 90%); height:auto; }
  .branch-path{
    fill:none; stroke:var(--olive-mid); stroke-width:1.6;
    stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900;
    transition:stroke-dashoffset 1.6s ease;
  }
  .branch-divider.revealed .branch-path{ stroke-dashoffset:0; }
  .branch-divider.revealed .branch-leaf{ opacity:1; }
  .branch-leaf{ fill:var(--sage); opacity:0; transition:opacity 0.8s ease 0.6s; }

  /* ---- Sections / prose ---- */
  section.block{ padding:8px 0 48px; }
  section.block h2{
    font-family:var(--serif); font-weight:600; font-size:1.9rem; color:var(--olive-deep);
    margin-bottom:18px;
  }
  section.block h3{
    font-family:var(--serif); font-weight:600; font-size:1.25rem; color:var(--olive-deep);
    margin:28px 0 10px;
  }
  section.block p{ color:var(--ink-soft); max-width:760px; }
  section.block p strong{ color:var(--ink); }

  .twocol{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:8px; }
  @media (max-width:720px){ .twocol{ grid-template-columns:1fr; } }
  .twocol h3{ margin-top:0; }
  .isnt-card, .is-card{
    background:var(--dove); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 28px;
  }
  .is-card{ border-left:3px solid var(--olive-deep); }
  .isnt-card{ border-left:3px solid var(--terracotta); }

  /* ---- Methodology principle cards ---- */
  .principle{ margin-bottom:30px; padding-left:20px; border-left:2px solid var(--border); }
  .principle .tag{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--terracotta); display:block; margin-bottom:6px;
  }
  .principle h3{ margin:0 0 8px; font-size:1.15rem; }
  .principle p{ margin:0; }

  /* ---- FAQ ---- */
  .faq-item{ border-bottom:1px solid var(--border); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:20px 4px; font-family:var(--serif); font-weight:600; font-size:1.08rem;
    color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px;
    list-style:none;
  }
  .faq-q::-webkit-details-marker{ display:none; }
  .faq-q::marker{ content:''; }
  .faq-q .mark{ font-family:var(--mono); color:var(--terracotta); font-size:1.1rem; transition:transform 0.2s; flex-shrink:0; }
  .faq-item[open] .faq-q .mark{ transform:rotate(45deg); }
  .faq-a p{ padding:0 4px 22px; color:var(--ink-soft); max-width:760px; }

  /* ---- Get involved tiers ---- */
  .tiers{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px; }
  @media (max-width:720px){ .tiers{ grid-template-columns:1fr; } }
  .tier-card{
    background:var(--dove); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  }
  .tier-card h3{ margin-top:0; font-size:1.05rem; }
  .tier-card p{ font-size:0.94rem; margin:0; }
  .gov-note{
    margin-top:44px; padding:26px 28px; background:var(--olive-deep); color:var(--dove);
    border-radius:var(--radius);
  }
  .gov-note h3{ color:var(--dove); margin-top:0; }
  .gov-note p{ color:rgba(244,241,232,0.88); }

  /* ---- Document page ---- */
  .doc-layout{ display:grid; grid-template-columns:260px 1fr; gap:40px; margin-top:8px; align-items:start; }
  @media (max-width:820px){ .doc-layout{ grid-template-columns:1fr; } }
  .toc{ border-right:1px solid var(--border); padding-right:24px; position:sticky; top:76px; max-height:calc(100vh - 96px); overflow-y:auto; }
  @media (max-width:820px){ .toc{ border-right:none; padding-right:0; border-bottom:1px solid var(--border); padding-bottom:20px; position:static; max-height:none; } }

  .doc-full-text{ max-width:760px; }
  .doc-section{ padding-top:8px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:36px; scroll-margin-top:88px; }
  .doc-section:last-child{ border-bottom:none; }
  .doc-section h3{ margin-top:0; }
  .doc-section h4{
    font-family:var(--serif); font-weight:600; font-size:1.04rem; color:var(--olive-mid);
    margin:24px 0 8px;
  }
  .doc-section h5{ font-family:var(--sans); font-weight:600; font-size:0.95rem; color:var(--ink); margin:16px 0 6px; }
  .doc-section p{ color:var(--ink); max-width:none; }
  .doc-section ul, .doc-section ol{ color:var(--ink); padding-left:22px; margin:10px 0; }
  .doc-section li{ margin-bottom:6px; }
  .doc-section li ul, .doc-section li ol{ margin-top:8px; }
  .doc-section em{ color:var(--ink); }
  .section-feedback-link{ margin-top:18px; }
  .section-feedback-link a{
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em; color:var(--terracotta);
    text-decoration:none; font-weight:500;
  }
  .section-feedback-link a:hover{ text-decoration:underline; }
  .declaration-subtitle{
    font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--olive-mid);
    margin:-4px 0 20px;
  }
  .declaration-note{
    font-size:0.86rem; color:var(--ink-soft); font-style:italic;
    padding:14px 16px; background:var(--limestone); border-radius:var(--radius);
    margin-bottom:20px;
  }
  .draft-status{
    display:inline-block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--terracotta); border:1px solid var(--terracotta);
    padding:5px 11px; border-radius:var(--radius); margin-bottom:20px;
  }
  .toc-title{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
  .toc ol{ list-style:none; margin:0; padding:0; }
  .toc li{ margin-bottom:2px; }
  .toc a{
    display:block; text-decoration:none; font-size:0.88rem; color:var(--ink-soft);
    padding:7px 10px; border-radius:var(--radius); transition:background 0.15s,color 0.15s;
  }
  .toc a:hover{ background:rgba(62,74,52,0.08); color:var(--olive-deep); }
  .toc a .num{ font-family:var(--mono); color:var(--terracotta); margin-right:8px; font-size:0.82rem; }

  .lang-toggle{ display:flex; gap:6px; margin-bottom:24px; }
  .lang-btn{
    font-family:var(--mono); font-size:0.78rem; padding:7px 14px; border-radius:var(--radius);
    border:1px solid var(--border); background:var(--dove); cursor:pointer; color:var(--ink-soft);
  }
  .lang-btn.active{ background:var(--olive-deep); color:var(--dove); border-color:var(--olive-deep); }
  .lang-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .lang-note{ font-size:0.82rem; color:var(--ink-soft); font-style:italic; margin-top:-14px; margin-bottom:24px; }

  .preamble-text{
    font-family:var(--serif); font-size:1.12rem; line-height:1.85; color:var(--ink);
    max-width:700px;
  }
  .preamble-text p{ margin:0 0 20px; color:var(--ink); }

  /* ---- Feedback stub ---- */
  .feedback-note{
    margin-top:36px; padding:18px 22px; background:var(--limestone); border-radius:var(--radius);
    border:1px dashed var(--border); font-size:0.88rem; color:var(--ink-soft);
  }

  /* ---- Feedback form ---- */
  #feedback-form-wrap{ max-width:640px; }
  .ff-label{
    display:block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink-soft); margin:18px 0 6px;
  }
  .ff-input{
    width:100%; font-family:var(--sans); font-size:0.95rem; padding:11px 12px;
    border:1px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--ink);
  }
  .ff-input.ff-invalid{ border-color:var(--terracotta); }
  .ff-error{
    color:var(--terracotta); font-size:0.82rem; margin:6px 0 0; min-height:1em;
  }
  .ff-error:empty{ display:none; }
  #ff-status{ font-size:0.9rem; }
  #ff-status.ff-status-success{
    color:var(--olive-deep); background:var(--dove); border:1px solid var(--olive-deep);
    padding:14px 16px; border-radius:var(--radius); margin-bottom:16px;
  }
  #ff-status.ff-status-error{
    color:var(--terracotta); background:var(--limestone); border:1px solid var(--terracotta);
    padding:14px 16px; border-radius:var(--radius); margin-bottom:16px;
  }
  #ff-status:empty{ display:none; margin:0; padding:0; border:none; }
  textarea.ff-input{ resize:vertical; font-family:var(--sans); }
  .ff-honeypot{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
  .ff-note{ font-size:0.86rem; color:var(--ink-soft); margin-top:0; }

  /* ---- Consent notices (processing / publication / attribution) ---- */
  .ff-notice-box{
    margin:18px 0 6px; padding:16px 18px; background:var(--dove);
    border:1px solid var(--border); border-radius:var(--radius);
  }
  .ff-notice-text{ font-size:0.86rem; color:var(--ink-soft); margin:0 0 10px; }
  .ff-notice-box .ff-notice-text{ margin-bottom:12px; }
  .ff-withdrawal-note{ font-style:italic; }
  .ff-private-note{ font-style:italic; }
  .ff-checkbox-label, .ff-radio-label{
    display:flex; align-items:flex-start; gap:8px; font-size:0.92rem; color:var(--ink);
    margin:8px 0; cursor:pointer;
  }
  .ff-checkbox-label input, .ff-radio-label input{ margin-top:3px; flex-shrink:0; }
  .ff-radio-group{ margin:6px 0; }
  #ff-attribution-wrap{
    margin-top:6px; padding:16px 18px; background:var(--dove);
    border:1px solid var(--border); border-radius:var(--radius);
  }
  #ff-attribution-name-wrap{ margin-top:4px; }

  /* ---- Contributor dashboard (Phase 1B.4a) ---- */
  .dash-guest-note{
    font-size:0.88rem; background:#F4F1E8; border:1px solid rgba(62,74,52,0.2);
    border-radius:3px; padding:12px 14px; max-width:none;
  }
  .dash-count{ font-size:0.85rem; color:var(--ink-soft); }
  .dash-card{
    border:1px solid rgba(38,38,32,0.15); border-radius:4px;
    padding:16px 18px; margin:18px 0;
  }
  .dash-card h3{
    margin:0 0 6px; font-size:1.05rem; display:flex; flex-wrap:wrap;
    align-items:baseline; gap:8px;
  }
  .dash-project{
    font-size:0.78rem; font-weight:400; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--ink-soft);
  }
  .dash-meta{ font-size:0.82rem; color:var(--ink-soft); margin:0 0 10px; }
  .dash-permission, .dash-attribution, .dash-perspectives{
    font-size:0.88rem; margin:4px 0;
  }
  .dash-comment{ margin-top:10px; }
  .dash-comment summary{ cursor:pointer; font-weight:600; color:#3E4A34; font-size:0.88rem; }
  .dash-comment p{ margin:6px 0 0; padding:8px 10px; background:#F4F1E8; border-left:3px solid #3E4A34; }

  /* ---- Contributor-facing submission status (Phase 1B.8) ---- */
  .dash-status-intro{
    font-size:0.88rem; color:var(--ink-soft); max-width:none; margin:14px 0 0;
  }
  .dash-status{
    margin:4px 0 10px; padding:10px 14px; background:var(--dove);
    border:1px solid var(--border); border-radius:var(--radius);
  }
  .dash-status-label{ margin:0; font-size:0.9rem; font-weight:600; color:var(--olive-deep); }
  .dash-status-detail{ margin:4px 0 0; font-size:0.85rem; color:var(--ink-soft); }
  .dash-status-note-label{
    margin:10px 0 0; font-size:0.78rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--ink-soft);
  }
  .dash-status-note{ margin:4px 0 0; font-size:0.88rem; }

  /* ---- Contributor visibility into source usage (Option B) ---- */
  .dash-source-usages{
    margin:10px 0; padding:12px 14px; background:var(--dove);
    border:1px solid var(--border); border-radius:var(--radius);
  }
  .dash-source-usages-heading{
    margin:0 0 6px; font-size:0.85rem; font-weight:600; color:var(--olive-deep);
  }
  .dash-source-usages ul{ margin:0; padding-left:18px; }
  .dash-source-usages li{ font-size:0.85rem; margin:0 0 6px; }
  .dash-source-usages li a{ display:block; color:var(--ink-soft); text-decoration:underline; margin-top:2px; }
  .dash-source-usages-disclaimer{
    margin:8px 0 0; font-size:0.78rem; color:var(--ink-soft); font-style:italic;
  }
  .dash-pagination{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:24px; font-size:0.9rem;
  }
  .dash-page-indicator{ color:var(--ink-soft); }
  .dash-notice{
    font-size:0.9rem; background:#eef3e9; border:1px solid rgba(62,74,52,0.25);
    border-radius:3px; padding:10px 14px; max-width:none;
  }
  .dash-withdraw{ margin:6px 0 0; }
  .dash-withdraw a{ font-size:0.82rem; color:#AE5A38; }

  /* ---- Perspective / experience checkboxes (Phase 1B.3b) ---- */
  .ff-fieldset{
    border:none; margin:0; padding:0;
  }
  .ff-fieldset legend.ff-label{ padding:0; }
  .ff-perspective-help{
    display:block; font-size:0.8rem; color:var(--ink-soft); font-weight:400;
    margin-left:24px;
  }
  #ff-other-perspective-wrap{ margin:6px 0 10px 24px; }

  /* ---- Guest receipt token ---- */
  #ff-receipt:empty{ display:none; }
  .ff-receipt-box{
    background:var(--dove); border:1px solid var(--olive-deep); border-radius:var(--radius);
    padding:16px 18px; margin-bottom:16px;
  }
  .ff-receipt-label{ font-size:0.9rem; color:var(--ink); font-weight:600; margin:0 0 8px; }
  .ff-receipt-code{
    font-family:var(--mono); font-size:0.92rem; word-break:break-all; background:#fff;
    border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin:0 0 8px;
  }
  .ff-receipt-warning{ font-size:0.82rem; color:var(--terracotta); margin:0; }

  /* ---- Public deliberation discovery filters (Option A) ---- */
  .filters{
    display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 4px; padding:0;
  }
  .filters a{
    display:inline-block; min-height:44px; min-width:44px;
    padding:10px 16px; box-sizing:border-box;
    border:1px solid var(--border); border-radius:20px;
    color:var(--olive-deep); text-decoration:none;
    font-size:0.88rem; font-weight:600; line-height:1.2;
    background:var(--dove);
  }
  .filters a:hover{ border-color:var(--olive-mid); }
  .filters a.active{
    background:var(--olive-deep); color:#fff; border-color:var(--olive-deep);
  }

  /* ---- Draft -> deliberation cross-link (Option A) ----
     Deliberately styled as a sibling of .section-feedback-link (same
     family/size/weight) but in the muted ink-soft tone rather than
     the feedback link's terracotta, so it reads as a secondary,
     purely-navigational aside -- not part of the constitutional text,
     and not competing with the feedback call-to-action. */
  .section-deliberation-link{ margin-top:6px; }
  .section-deliberation-link a{
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em; color:var(--ink-soft);
    text-decoration:none; font-weight:500;
  }
  .section-deliberation-link a:hover{ text-decoration:underline; }

  footer.site{
    border-top:1px solid var(--border); margin-top:80px; padding:36px 24px 60px;
    text-align:center; color:var(--ink-soft); font-size:0.86rem;
  }
  footer.site .foot-name{ font-family:var(--serif); color:var(--olive-deep); font-weight:600; margin-bottom:6px; display:block; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .branch-path{ stroke-dashoffset:0 !important; }
    .branch-leaf{ opacity:1 !important; }
  }