/* Shared base styles for desoto.me/research/. Carried over from the global (non-viz) part of
   ai_archive.html's stylesheet on Oct 10, 2026, plus the research-site chrome at the end.
   Each piece's own styles live inline in its page, between the PIECE-CSS markers. */
:root{
    --ink:#1a1a2e;
    --ink-soft:#3a3a52;
    --ink-faint:#6b6b80;
    --paper:#fbf7f0;
    --paper-deep:#f3eddf;
    --rule:#e6dfd1;
    --card:#ffffff;
    --shadow:0 1px 0 rgba(26,26,46,.04), 0 8px 24px rgba(26,26,46,.06);

    /* topic accents */
    --frontier:#1d4ed8;   --frontier-soft:#dbeafe;
    --safety:#dc2626;     --safety-soft:#fee2e2;
    --business:#0d9488;   --business-soft:#ccfbf1;
    --policy:#7c2d12;     --policy-soft:#fed7aa;
    --society:#c2410c;    --society-soft:#ffedd5;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* ============ APP SHELL ============ */
  .app{display:grid;grid-template-columns:300px 1fr;height:100vh;overflow:hidden}

  /* ============ LEFT NAV ============ */
  .nav{background:var(--paper-deep);border-right:1px solid var(--rule);display:flex;flex-direction:column;min-height:0}
  .nav-head{padding:18px 18px 12px;border-bottom:1px solid var(--rule)}
  .nav-head .brand{font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
  .nav-head .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px;font-weight:600}
  .nav-list{flex:1;overflow-y:auto;padding:6px 0 80px}
  .nav-list::-webkit-scrollbar{width:8px}
  .nav-list::-webkit-scrollbar-thumb{background:rgba(26,26,46,.18);border-radius:4px}
  .nav-date{padding:14px 18px 6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;font-family:Georgia,serif;font-style:italic;letter-spacing:.08em;text-transform:none}
  .nav-item{display:block;width:100%;padding:9px 16px 10px 18px;border:none;background:transparent;text-align:left;cursor:pointer;border-left:3px solid transparent;font:inherit;color:var(--ink);transition:background .12s,border-color .12s}
  .nav-item:hover{background:rgba(26,26,46,.04)}
  .nav-item.active{background:var(--card);border-left-color:var(--ink)}
  .nav-item.active.t-frontier{border-left-color:var(--frontier)}
  .nav-item.active.t-safety{border-left-color:var(--safety)}
  .nav-item.active.t-business{border-left-color:var(--business)}
  .nav-item.active.t-policy{border-left-color:var(--policy)}
  .nav-item.active.t-society{border-left-color:var(--society)}
  .nav-item .topic{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;display:inline-block;margin-bottom:3px}
  .nav-item.t-frontier .topic{color:var(--frontier)}
  .nav-item.t-safety .topic{color:var(--safety)}
  .nav-item.t-business .topic{color:var(--business)}
  .nav-item.t-policy .topic{color:var(--policy)}
  .nav-item.t-society .topic{color:var(--society)}
  .nav-item .ttl{font-family:Georgia,serif;font-size:14px;line-height:1.25;font-weight:700;color:var(--ink);display:block}
  .nav-item .src{font-size:10px;color:var(--ink-faint);margin-top:3px;letter-spacing:.04em}

  .nav-foot{position:absolute;bottom:0;left:0;width:300px;padding:10px 18px;background:var(--paper-deep);border-top:1px solid var(--rule);border-right:1px solid var(--rule);font-size:10px;color:var(--ink-faint);letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
  .nav-foot .keys{font-family:Georgia,serif;font-style:italic}

  /* ============ MAIN ============ */
  .main{overflow-y:auto;position:relative}
  .main::-webkit-scrollbar{width:10px}
  .main::-webkit-scrollbar-thumb{background:rgba(26,26,46,.18);border-radius:5px}
  .stage{max-width:1180px;margin:0 auto;padding:48px 56px 80px;min-height:100%}

  /* article card */
  .card{display:none;flex-direction:column;animation:fadeUp .25s ease}
  .card.active{display:flex}
  @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  @media print{
    html, body { height: auto !important; overflow: visible !important; background: #fff; }
    .app { display: block !important; height: auto !important; overflow: visible !important; }
    .nav, .nav-foot, .prevnext, .counter, .no-print { display: none !important; }
    .main { overflow: visible !important; height: auto !important; position: static !important; }
    .stage { max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
    .card { display: none !important; }
    .card.active { display: flex !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .card.active * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  .topline{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:28px;gap:24px}
  .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
  .card.t-frontier .eyebrow{color:var(--frontier)}
  .card.t-safety .eyebrow{color:var(--safety)}
  .card.t-business .eyebrow{color:var(--business)}
  .card.t-policy .eyebrow{color:var(--policy)}
  .card.t-society .eyebrow{color:var(--society)}

  h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,3.6vw,52px);line-height:1.04;font-weight:700;letter-spacing:-.015em}
  h1 .accent{color:var(--ink)}
  .card.t-frontier h1 .accent{color:var(--frontier)}
  .card.t-safety h1 .accent{color:var(--safety)}
  .card.t-business h1 .accent{color:var(--business)}
  .card.t-policy h1 .accent{color:var(--policy)}
  .card.t-society h1 .accent{color:var(--society)}

  .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);text-align:right;white-space:nowrap;flex-shrink:0}
  .meta .src{display:block;margin-top:6px;font-size:11px;letter-spacing:0;text-transform:none;font-family:Georgia,serif;font-style:italic;color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted var(--rule);padding-bottom:1px;max-width:280px;overflow:hidden;text-overflow:ellipsis}
  .meta .src:hover{color:var(--ink);border-bottom-color:var(--ink-soft)}

  .deck{font-family:Georgia,serif;font-size:18px;color:var(--ink-soft);font-style:italic;line-height:1.5;max-width:780px;margin-bottom:36px}

  h2{font-family:Georgia,serif;font-size:22px;margin-bottom:10px;font-weight:700}
  h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;font-weight:700}
  p{font-size:15px;color:var(--ink-soft)}

  /* reusable visualization blocks */
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
  .grid-5050{display:grid;grid-template-columns:42% 58%;gap:32px;margin-bottom:28px}
  .grid-6040{display:grid;grid-template-columns:60% 40%;gap:32px;margin-bottom:28px}

  .panel{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:22px 22px;box-shadow:var(--shadow)}
  .panel.tinted{background:var(--paper-deep);box-shadow:none}

  .hero-num{font-family:Georgia,serif;font-size:clamp(64px,8vw,124px);font-weight:700;line-height:.92;letter-spacing:-.03em}
  .hero-num .u{font-size:.32em;font-weight:400;letter-spacing:.04em;color:var(--ink-soft)}
  .hero-lbl{font-family:Georgia,serif;font-size:18px;color:var(--ink);margin-top:14px;line-height:1.35;max-width:520px}
  .hero-foot{font-size:13px;color:var(--ink-soft);margin-top:10px;line-height:1.4}

  .card.t-frontier .hero-num{color:var(--frontier)}
  .card.t-safety .hero-num{color:var(--safety)}
  .card.t-business .hero-num{color:var(--business)}
  .card.t-policy .hero-num{color:var(--policy)}
  .card.t-society .hero-num{color:var(--society)}

  .stack{display:flex;flex-direction:column;gap:10px}
  .layer{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--card);border:1px solid var(--rule);border-radius:5px}
  .layer .lname{font-family:Georgia,serif;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);padding-top:2px}
  .layer .lbody h4{font-family:Georgia,serif;font-size:17px;font-weight:700;margin-bottom:4px}
  .layer .lbody p{font-size:13px;line-height:1.4;margin:0}
  .card.t-frontier .layer{border-left:3px solid var(--frontier)}
  .card.t-frontier .layer .lname{color:var(--frontier)}

  .pull{margin-top:auto;padding:22px 26px;border-left:4px solid var(--ink);background:var(--paper-deep);font-family:Georgia,serif;font-style:italic;font-size:18px;line-height:1.45;color:var(--ink);border-radius:0 4px 4px 0}
  .pull .who{display:block;font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px;font-family:-apple-system,sans-serif;font-weight:700}
  .card.t-frontier .pull{border-left-color:var(--frontier)}
  .card.t-safety .pull{border-left-color:var(--safety)}
  .card.t-business .pull{border-left-color:var(--business)}
  .card.t-policy .pull{border-left-color:var(--policy)}
  .card.t-society .pull{border-left-color:var(--society)}

  .kv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .kv .item{padding:14px 16px;background:var(--card);border:1px solid var(--rule);border-radius:4px}
  .kv .item .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:4px}
  .kv .item .v{font-family:Georgia,serif;font-size:16px;color:var(--ink);line-height:1.3;font-weight:700}
  .kv .item .n{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.35}

  /* article-specific block: gauge for adoption */
  .gauge{padding:22px 22px;background:var(--card);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow)}
  .gauge .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
  .gauge .label{font-size:13px;color:var(--ink-soft)}
  .gauge .pct{font-family:Georgia,serif;font-size:46px;font-weight:700;color:var(--business);line-height:1}
  .gauge-track{height:32px;background:var(--paper-deep);border-radius:3px;overflow:hidden;position:relative;border:1px solid var(--rule)}
  .gauge-fill{position:absolute;top:0;left:0;bottom:0;background:var(--business)}
  .gauge-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-faint);margin-top:8px;letter-spacing:.04em}

  /* article-specific block: access matrix */
  .access{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .access .col{padding:18px 18px;border-radius:4px}
  .access .col.in{background:var(--policy-soft);border-left:3px solid var(--policy)}
  .access .col.out{background:#f4f4f5;border-left:3px solid #6b6b80}
  .access h4{font-family:Georgia,serif;font-size:14px;font-weight:700;margin-bottom:10px;color:var(--ink);letter-spacing:.04em;text-transform:uppercase;font-size:11px}
  .access ul{list-style:none}
  .access li{padding:5px 0;font-size:13px;color:var(--ink);line-height:1.35;border-bottom:1px dashed rgba(26,26,46,.12)}
  .access li:last-child{border-bottom:none}
  .access li b{font-family:Georgia,serif}
  .access .col.in li::before{content:"✓ ";color:var(--policy);font-weight:700}
  .access .col.out li::before{content:"— ";color:var(--ink-faint)}

  /* prev/next floating controls inside main */
  .prevnext{position:fixed;bottom:20px;right:24px;display:flex;gap:8px;z-index:50}
  .ctrl{background:var(--ink);color:var(--paper);border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:20px;font-family:Georgia,serif;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s,transform .1s;box-shadow:0 4px 14px rgba(26,26,46,.25)}
  .ctrl:hover{background:#000;transform:translateY(-1px)}
  .ctrl:disabled{opacity:.3;cursor:default;transform:none}
  .counter{position:fixed;bottom:30px;left:316px;font-family:Georgia,serif;font-style:italic;font-size:13px;color:var(--ink-faint);z-index:50}

  @media (max-width:900px){
    .app{grid-template-columns:1fr;height:auto}
    .nav{position:sticky;top:0;z-index:20;max-height:50vh}
    .nav-foot{position:relative;width:100%}
    .stage{padding:32px 22px 100px}
    .topline{flex-direction:column;align-items:flex-start;gap:12px}
    .meta{text-align:left}
    .grid-2,.grid-3,.grid-5050,.grid-6040,.kv,.access{grid-template-columns:1fr}
    .counter{left:18px;bottom:18px}
  }

  .nav-head .disclaimer{font-size:11.5px;line-height:1.4;color:var(--ink-faint);margin-top:8px;font-family:Georgia,serif;font-style:italic}
  .site-note{margin:56px 0 0;padding-top:16px;border-top:1px solid var(--rule);font-size:12.5px;line-height:1.55;color:var(--ink-faint);max-width:760px}
  .site-note b{color:var(--ink-soft, var(--ink));font-weight:700}
@media print{
  @page { size: Letter; margin: 0.5in 0.55in; }
}

/* ===================== research site chrome (Oct 2026) ===================== */
html{scroll-padding-top:72px}
html,body{height:auto}
.rs-bar{position:sticky;top:0;z-index:40;background:rgba(251,247,240,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.rs-in{max-width:1180px;margin:0 auto;padding:10px 56px;display:flex;align-items:center;gap:18px;font-size:13px}
.rs-home{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.rs-home:hover{text-decoration:underline}
.rs-note{flex:1;color:var(--ink-faint);font-family:Georgia,serif;font-style:italic;line-height:1.35}
.rs-note a{color:var(--ink-soft)}
.rs-copy{font:700 11px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);background:#fff;color:var(--ink);padding:8px 12px;cursor:pointer;white-space:nowrap}
.rs-copy:hover{background:var(--paper-deep)}
.rs-copy.done{background:var(--ink);color:var(--paper)}
.rs-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-faint)}
.rs-foot a{font-weight:700;color:var(--ink);text-decoration:none}
@media (max-width:900px){
  .rs-in{padding:9px 16px;flex-wrap:wrap;gap:6px 14px}
  .rs-note{order:3;flex-basis:100%;font-size:12px}
  .rs-copy{margin-left:auto}
}
@media print{ .rs-bar,.rs-foot{display:none!important} }