:root{
    /* structuredwandering palette — SBM-family neutrals + gold, travel-teal accent.
       Sister-site to structurebeatsmagic.com: same structural greys, navy, gold
       payoff and shadow system; the blue accent is retuned to a deep teal
       (sea / horizon / journey) so the travel site reads as its own brand while
       staying visibly in the family. See STYLEGUIDE.md. */
    --bg:#f7f8fa; --surface:#fff; --ink:#0f2b2b; --ink-soft:#475569; --ink-faint:#94a3b8;
    --accent:#0d7d7d; --accent-dk:#0a5f5f; --gold:#b88a1b; --line:#e2e8f0; --navy:#0f2b2b;
    --maxw:1080px; --radius:16px; --shadow:0 10px 30px rgba(15,23,42,.07);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  a{color:var(--accent);text-decoration:none}
  a:hover{color:var(--accent-dk)}

  header.site{position:sticky;top:0;z-index:10;background:rgba(247,248,250,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
  .brand{font-weight:700;font-size:18px;color:var(--ink);white-space:nowrap;flex-shrink:0}
  .brand span{color:var(--accent)}
  nav.main{display:flex;align-items:center;flex-wrap:nowrap}
  nav.main > a, .navgroup > .navtop{color:var(--ink-soft);margin-left:22px;font-size:15px;font-weight:500;white-space:nowrap;cursor:pointer;background:none;border:none;font-family:inherit}
  nav.main > a:hover, .navgroup:hover > .navtop{color:var(--ink)}
  .nav-cta{background:var(--accent);color:#fff !important;padding:.5rem .9rem;border-radius:8px;font-weight:600}
  .nav-cta:hover{background:var(--accent-dk)}
  /* dropdown groups (desktop: hover) */
  .navgroup{position:relative;display:inline-block}
  .navgroup > .navtop::after{content:" \25be";color:var(--ink-faint);font-size:11px}
  .navmenu{display:none;position:absolute;top:100%;left:18px;min-width:190px;background:var(--surface);
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.5rem 0;z-index:20}
  /* A hover-dropdown is absolutely positioned and can overhang the sibling links
     to its right (e.g. "Writing"), stealing their first click. The dropdown only
     needs to sit under its OWN group, so cap its width to the group and let it
     grow leftward — never rightward over a sibling. */
  .navmenu{left:0;right:auto;min-width:0;width:max-content;max-width:240px}
  .navgroup:hover .navmenu{display:block}
  .navmenu a{display:block;margin:0;padding:.6rem 1.1rem;font-size:14.5px;color:var(--ink-soft);white-space:nowrap}
  .navmenu a:hover{color:var(--accent);background:var(--bg)}
  /* hamburger (CSS-only, checkbox toggle — no JS) */
  .nav-toggle{display:none}
  .burger{display:none;cursor:pointer;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);flex-shrink:0}
  .burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:4px 0;transition:.2s}
  /* 5 grouped top items; collapse to hamburger on tablet/mobile */
  @media(max-width:860px){
    .burger{display:block}
    nav.main{position:fixed;top:64px;left:0;right:0;background:var(--surface);
      border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
      padding:.5rem 0;box-shadow:var(--shadow);display:none;
      /* the drawer expands every dropdown inline, so the item list can exceed the
         viewport height. Cap it to the space below the 64px header and let it
         scroll — otherwise the last entries (Writing + the enterprise CTA) fall
         off the bottom of the screen with no way to reach them on a phone. */
      max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
    nav.main > a, .navgroup > .navtop{margin:0;padding:.9rem 24px;font-size:16px;border-bottom:1px solid var(--line);display:block;width:100%;text-align:left}
    /* in the drawer, dropdowns just expand inline */
    .navgroup{display:block}
    .navgroup > .navtop::after{display:none}
    .navmenu{display:block;position:static;border:none;box-shadow:none;border-radius:0;padding:0;min-width:0;background:transparent}
    .navmenu a{padding:.7rem 24px .7rem 40px;font-size:15px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
    .nav-cta{margin:.6rem 24px;text-align:center;border-radius:8px}
    .nav-toggle:checked ~ nav.main{display:flex}
    .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
    .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  }

  .hero{padding:6rem 0 4rem;text-align:center}
  .hero .eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .eb-break{display:none} /* eyebrow line-breaks: hidden on desktop (one line), shown on mobile */
  .hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;margin:1rem auto;max-width:14ch}
  .hero .lede{font-size:1.25rem;color:var(--ink-soft);max-width:46ch;margin:0 auto 2rem}
  .formula{display:inline-block;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:1rem 1.5rem;border-radius:var(--radius);font-size:1.05rem;font-weight:600;letter-spacing:.01em;box-shadow:var(--shadow)}
  .formula .op{color:var(--ink-faint);margin:0 .3rem}
  .formula .arrow{color:var(--gold);margin:0 .4rem}
  .formula .result{color:var(--gold)}
  .cta-row{margin-top:2.2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
  .hero h1{text-wrap:balance}
  /* Mobile hero: the title wrapped to too many ragged lines and the formula pill
     spanned edge-to-edge, reading like a nav bar. Tighten both. */
  @media(max-width:600px){
    .hero{padding:2.5rem 1rem 2.5rem}
    /* eyebrow: the wide letter-spacing + uppercase ran into the screen edge and
       broke awkwardly. Tighten spacing + force 3 clean lines via .eb-break. */
    .hero .eyebrow{font-size:11px;letter-spacing:.08em;max-width:30ch;margin:0 auto;line-height:1.5}
    .eb-break{display:inline}
    .hero h1{font-size:1.9rem;line-height:1.15;max-width:18ch}
    .hero .lede{font-size:1.08rem;max-width:34ch}
    /* Formula is a light card everywhere (see base rule); on phones just shrink
       it so it fits and the operators wrap cleanly. */
    .formula{box-shadow:none;font-size:.9rem;padding:.75rem 1rem;line-height:1.9;max-width:100%}
    .formula .op{margin:0 .15rem}
    .formula .arrow{color:var(--gold);margin:0 .25rem}
    .formula .result{color:var(--gold)}
  }
  .btn{padding:.7rem 1.3rem;border-radius:10px;font-weight:600;font-size:15px;display:inline-block}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{background:var(--accent-dk)}
  .btn-ghost{color:var(--ink);border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

  /* scroll-margin-top offsets the 64px sticky header so an anchor jump (#writing,
     #principles, …) lands with the section title in view, not hidden behind it. */
  section{padding:4rem 0;border-top:1px solid var(--line);scroll-margin-top:80px}
  .section-eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:center}
  h2.section-title{font-size:clamp(1.6rem,3.5vw,2.3rem);text-align:center;letter-spacing:-.01em;margin:.6rem auto 1rem;max-width:20ch}
  .section-lede{text-align:center;color:var(--ink-soft);max-width:54ch;margin:0 auto 3rem;font-size:1.08rem}

  /* 6 principle cards -> a clean 3x2 grid on desktop (was auto-fit 4+2, which
     left a gap). Falls back to 2 cols on tablet, 1 on mobile. */
  .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
  @media(max-width:820px){.principles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.principles{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
  .card .k{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .card h3{margin:.5rem 0 .4rem;font-size:1.15rem}
  .card p{margin:0;color:var(--ink-soft);font-size:.97rem}

  .two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  @media(max-width:760px){.two{grid-template-columns:1fr}}
  .impl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
  .impl .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .impl h3{margin:.4rem 0 .8rem;font-size:1.35rem}
  .impl ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-soft)}
  .impl li{margin:.45rem 0}
  .impl .proof{margin-top:1rem;font-size:.9rem;color:var(--ink-faint);font-style:italic}

  .bankers{background:var(--navy);color:#e6f0ee;border-radius:var(--radius);padding:2.2rem;margin-top:1.5rem}
  .bankers h3{color:#fff;margin:.2rem 0 1rem;font-size:1.3rem}
  .bankers .bb{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  @media(max-width:760px){.bankers .bb{grid-template-columns:1fr}}
  .bankers .col .h{font-weight:700;color:var(--gold);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
  .bankers p{color:#bcd6d3;margin:.3rem 0;font-size:.97rem}
  .bankers .punch{margin-top:1.4rem;font-size:1.05rem;color:#fff;border-top:1px solid #243349;padding-top:1.2rem}

  /* 4 sample cards -> a clean 2x2 grid on desktop (was auto-fit 3+1, which left a
     gap). Single column on mobile. */
  .samples{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
  @media(max-width:640px){.samples{grid-template-columns:1fr}}
  .sample{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
  .sample .badge{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
  .sample h3{margin:.4rem 0 .5rem;font-size:1.15rem}
  .sample p{color:var(--ink-soft);font-size:.95rem;margin:0 0 .8rem}

  .enterprise{background:linear-gradient(135deg,#0f2b2b,#1e293b);color:#fff;border-radius:var(--radius);padding:3rem 2.5rem;text-align:center;box-shadow:var(--shadow)}
  .enterprise h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.3rem auto 1rem;max-width:22ch}
  .enterprise p{color:#bcd6d3;max-width:50ch;margin:0 auto 1.8rem;font-size:1.08rem}
  .enterprise .btn-gold{background:var(--gold);color:#1a1505}
  .enterprise .btn-gold:hover{background:#a87d18}

  footer{padding:3rem 0;border-top:1px solid var(--line);text-align:center;color:var(--ink-faint);font-size:14px}
  footer .formula-mini{color:var(--ink-soft);font-weight:600;margin-bottom:.6rem}

  /* figures / images */
  figure{margin:2.5rem 0 0}
  figure.bleed{margin:2.5rem auto 0;max-width:920px}
  figure img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
  figure figcaption{text-align:center;color:var(--ink-faint);font-size:.85rem;margin-top:.7rem}
  .hero-figure{margin:2.5rem auto 0;max-width:760px}
  .hero-figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
  /* text-rich hero infographic (3:2, many small labels) needs more width to stay legible */
  .hero-figure-wide{max-width:1040px}
  .hero-figure-wide figcaption{text-align:center;color:var(--ink-faint);font-size:.9rem;margin-top:.9rem;max-width:60ch;margin-left:auto;margin-right:auto}

  /* inline pipeline diagram */
  .pipe{display:flex;align-items:stretch;gap:0;justify-content:center;flex-wrap:wrap;margin:2.5rem 0 0}
  .pipe .stage{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;text-align:center;box-shadow:var(--shadow)}
  .pipe .stage .n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .pipe .stage h4{margin:.4rem 0 .3rem;font-size:1.05rem;color:var(--accent)}
  .pipe .stage p{margin:0;font-size:.88rem;color:var(--ink-soft)}
  .pipe .arrow{display:flex;align-items:center;color:var(--gold);font-size:1.6rem;font-weight:700;padding:0 .6rem}
  @media(max-width:680px){.pipe{flex-direction:column}.pipe .arrow{transform:rotate(90deg);padding:.3rem 0}}
  .pipe .scales{flex-basis:100%;text-align:center;color:var(--ink-faint);font-size:.85rem;margin-top:1rem}

  /* who it's for / not for */
  .fit{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
  @media(max-width:680px){.fit{grid-template-columns:1fr}}
  .fit .col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow)}
  .fit .col.yes{border-top:3px solid var(--accent)}
  .fit .col.no{border-top:3px solid var(--ink-faint)}
  .fit .col h3{margin:0 0 .8rem;font-size:1.1rem}
  .fit .col ul{margin:0;padding-left:1.1rem;color:var(--ink-soft)}
  .fit .col li{margin:.5rem 0}

  /* writing / articles */
  .posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
  .post{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.6rem;box-shadow:var(--shadow);color:inherit;transition:transform .15s,border-color .15s}
  .post:hover{transform:translateY(-2px);border-color:var(--accent);color:inherit}
  .post .post-face{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
  .post h3{margin:.5rem 0 .5rem;font-size:1.2rem;line-height:1.25;color:var(--ink)}
  .post p{margin:0;color:var(--ink-soft);font-size:.95rem;font-style:italic}

  /* why next-level */
  .nl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
  .nl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
  .nl-card.nl-accent{border:1.5px solid var(--accent)}
  .nl-k{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
  .nl-card p{margin:0;color:var(--ink-soft);font-size:.97rem}
  .nl-foot{max-width:60ch;margin:2.2rem auto 0;text-align:center;color:var(--ink-soft);font-size:1.05rem}

  /* influences */
  .infl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
  .book{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
  .book .t{font-weight:700;font-size:1rem;color:var(--ink)}
  .book .a{font-size:.85rem;color:var(--ink-faint);margin:.15rem 0 .5rem}
  .book .why{font-size:.9rem;color:var(--ink-soft);margin:0}
  .infl-note{text-align:center;color:var(--ink-faint);font-size:.9rem;margin-top:1.8rem}

  /* the stack */
  .stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
  .tool{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.4rem;box-shadow:var(--shadow)}
  .tool .tn{font-weight:700;font-size:1.02rem;color:var(--ink)}
  .tool .tr{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:.2rem 0 .5rem}
  .tool p{margin:0;color:var(--ink-soft);font-size:.92rem}
  .stack-note{text-align:center;color:var(--ink-soft);max-width:58ch;margin:2rem auto 0;font-size:1rem}

  /* interaction flow */
  .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.6rem;align-items:center;margin-top:2.5rem}
  @media(max-width:760px){.flow{grid-template-columns:1fr;gap:1rem}.flow .fa{transform:rotate(90deg)}}
  .flow .fcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow);align-self:stretch}
  .flow .fcol .fh{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
  .flow .fcol ul{margin:0;padding-left:1.05rem;color:var(--ink-soft);font-size:.92rem}
  .flow .fcol li{margin:.3rem 0}
  .flow .fa{color:var(--gold);font-size:1.6rem;font-weight:700;text-align:center}

  /* building blocks (sovereignty) */
  .blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
  .block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);border-left:3px solid var(--accent)}
  .block .bk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
  .block h3{margin:0 0 .5rem;font-size:1.1rem}
  .block p{margin:0;color:var(--ink-soft);font-size:.93rem}
  .block .eu{display:inline-block;margin-top:.6rem;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.05em}
  .sov-lede strong{color:var(--ink)}

  /* personal domains (icon cards) */
  .domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.1rem}
  .domain{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);text-align:center;transition:transform .15s,border-color .15s}
  .domain:hover{transform:translateY(-3px);border-color:var(--accent)}
  .domain .ic{width:46px;height:46px;margin:0 auto .9rem;display:block;color:var(--accent)}
  .domain h3{margin:0 0 .4rem;font-size:1.08rem}
  .domain p{margin:0;color:var(--ink-soft);font-size:.9rem}
  .domain .fav{display:block;margin-top:.7rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}

  /* system components */
  .comp-hero{background:var(--navy);color:#e6f0ee;border-radius:var(--radius);padding:2.4rem;margin-bottom:1.5rem;text-align:center;box-shadow:var(--shadow)}
  .comp-hero .ce{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
  .comp-hero h3{color:#fff;font-size:1.4rem;margin:.2rem 0 .8rem}
  .comp-hero p{color:#bcd6d3;max-width:54ch;margin:0 auto;font-size:1rem}
  .cascade{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0}
  .cascade span{background:#123a3a;color:#cfe8e6;border-radius:8px;padding:.4rem .8rem;font-size:.8rem;font-weight:600}
  .cascade i{color:var(--gold);font-style:normal;font-weight:700}
  .sources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
  .src{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.3rem;box-shadow:var(--shadow)}
  .src .sh{font-weight:700;font-size:1rem;color:var(--ink)}
  .src p{margin:.35rem 0 0;color:var(--ink-soft);font-size:.9rem}
  .intent{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);padding:1.8rem;margin-top:1.5rem;box-shadow:var(--shadow)}
  .intent .ik{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
  .intent h3{margin:0 0 .6rem;font-size:1.25rem}
  .intent p{margin:0;color:var(--ink-soft)}

  /* validation loop */
  .loop2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:1rem}
  .lp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.4rem;box-shadow:var(--shadow);position:relative}
  .lp .ln{font-size:13px;font-weight:800;color:var(--gold)}
  .lp h4{margin:.3rem 0 .4rem;font-size:1.02rem}
  .lp p{margin:0;color:var(--ink-soft);font-size:.9rem}
  .loop-note{text-align:center;max-width:58ch;margin:2rem auto 0;color:var(--ink-soft);font-size:1.02rem}
  .loop-note strong{color:var(--ink)}

  /* applications grid (compact) */
  .apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
  .app{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;box-shadow:var(--shadow)}
  .app .an{font-weight:700;font-size:.95rem;color:var(--ink)}
  .app p{margin:.2rem 0 0;color:var(--ink-soft);font-size:.85rem}

  /* own-your-data callout */
  .own{background:linear-gradient(135deg,#0f2b2b,#123a3a);color:#fff;border-radius:var(--radius);padding:2.4rem;text-align:center;box-shadow:var(--shadow);margin-top:1.5rem}
  .own h3{color:#fff;font-size:1.4rem;margin:.2rem 0 .8rem}
  .own p{color:#bcd6d3;max-width:56ch;margin:0 auto;font-size:1.02rem}
  .own .tag2{display:inline-block;margin-top:1rem;color:var(--gold);font-weight:700;font-size:.9rem}

  /* exchange / sharing */
  .exch{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;margin-top:1rem}
  @media(max-width:680px){.exch{grid-template-columns:1fr}.exch .ea{transform:rotate(90deg)}}
  .ecol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
  .ecol.inb{border-top:3px solid var(--accent)}
  .ecol.outb{border-top:3px solid var(--gold)}
  .ecol .eh{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
  .ecol.inb .eh{color:var(--accent)} .ecol.outb .eh{color:var(--gold)}
  .ecol h3{margin:0 0 .5rem;font-size:1.15rem}
  .ecol p{margin:0 0 .6rem;color:var(--ink-soft);font-size:.93rem}
  .ecol ul{margin:0;padding-left:1.05rem;color:var(--ink-soft);font-size:.9rem}
  .ecol li{margin:.3rem 0}
  .ea{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:1.5rem;font-weight:700}
  .share-note{text-align:center;max-width:60ch;margin:1.8rem auto 0;color:var(--ink-soft);font-size:1rem}

  /* play / lego */
  .play{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
  @media(max-width:760px){.play{grid-template-columns:1fr}}
  .play .pt h3{font-size:1.5rem;margin:0 0 .8rem;letter-spacing:-.01em}
  .play .pt p{color:var(--ink-soft);margin:0 0 1rem}
  .play .pt .em{color:var(--ink);font-weight:600}
  .bricks{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .brick{padding:.55rem .9rem;border-radius:8px;font-size:.82rem;font-weight:700;color:#fff}
  .b1{background:#0d7d7d}.b2{background:#b88a1b}.b3{background:#0f2b2b}.b4{background:#2ea3a3}.b5{background:#0a5f5f}.b6{background:#475569}
  .play-flow{text-align:center;margin-top:2rem;color:var(--ink-soft);font-size:1.05rem}
  .play-flow strong{color:var(--ink)}

  /* intelligence systems */
  .intel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
  .isys{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);border-top:3px solid var(--accent)}
  .isys .it{font-weight:700;font-size:1.08rem;color:var(--ink)}
  .isys .ist{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:.3rem 0 .5rem}
  .isys p{margin:0;color:var(--ink-soft);font-size:.92rem}
  .st-built{color:#15803d}.st-progress{color:var(--accent)}.st-vision{color:var(--ink-faint)}
  .intel-note{text-align:center;max-width:60ch;margin:2rem auto 0;color:var(--ink-soft);font-size:1rem}
  .intel-note strong{color:var(--ink)}

/* vault structure section */
.vault{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
@media(max-width:760px){.vault{grid-template-columns:1fr}}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow)}
.vcard .vk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.vcard h3{margin:0 0 .6rem;font-size:1.2rem}
.vcard p{margin:0 0 .7rem;color:var(--ink-soft);font-size:.95rem}
.vtree{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.82rem;line-height:1.6;background:#0f2b2b;color:#cfe8e6;border-radius:10px;padding:1.1rem 1.3rem;overflow-x:auto;margin:.3rem 0 0}
.vtree .c{color:var(--gold)}
.vtree .m{color:#7f9cb8}
.dr{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:.8rem}
.drx{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.drx .drk{font-weight:800;color:var(--accent);font-size:.95rem}
.drx p{margin:.2rem 0 0;font-size:.82rem;color:var(--ink-soft)}

/* obsidian / frontmatter / dataview */
.fm-demo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem;align-items:start}
@media(max-width:760px){.fm-demo{grid-template-columns:1fr}}
.code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.82rem;line-height:1.55;background:#0f2b2b;color:#cfe8e6;border-radius:10px;padding:1.1rem 1.3rem;overflow-x:auto}
.code .key{color:#8fb3d9}.code .val{color:#cfe8e6}.code .hl{color:var(--gold)}.code .cm{color:#6b86a3}
.code .tag2{color:#7dd3a8}

/* working environment */
.env-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.env{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.env .ek{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.env h3{margin:0 0 .5rem;font-size:1.1rem}
.env p{margin:0;color:var(--ink-soft);font-size:.92rem}
.access{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.access .node{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;font-size:.85rem;font-weight:600;box-shadow:var(--shadow)}
.access .node.core{background:var(--navy);color:#fff;border-color:var(--navy)}
.access .ax{color:var(--gold);font-weight:700}

/* curated sources + personas */
.csrc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.csrc .c{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.2rem;box-shadow:var(--shadow)}
.csrc .c .ch{font-weight:700;font-size:.97rem;color:var(--ink)}
.csrc .c p{margin:.25rem 0 0;font-size:.88rem;color:var(--ink-soft)}
.persona-arch{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
@media(max-width:680px){.persona-arch{grid-template-columns:1fr}}
.parch{border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.parch.eng{background:var(--surface);border:1px solid var(--line)}
.parch.per{background:#0f2b2b;color:#e6f0ee;border:1px solid #123a3a}
.parch h4{margin:0 0 .6rem;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.parch.eng h4{color:var(--accent)} .parch.per h4{color:var(--gold)}
.parch ul{margin:0;padding-left:1.1rem;font-size:.92rem}
.parch.eng ul{color:var(--ink-soft)} .parch.per ul{color:#bcd6d3}
.parch li{margin:.3rem 0}

/* metadata / DAM explainer */
.meta-ex{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
@media(max-width:680px){.meta-ex{grid-template-columns:1fr}}
.mx{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.mx .mk{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.mx h3{margin:0 0 .5rem;font-size:1.15rem}
.mx p{margin:0;color:var(--ink-soft);font-size:.93rem}
.mfig{margin:1.5rem 0 0}
.mfig img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.mfig figcaption{font-size:.82rem;color:var(--ink-faint);margin-top:.6rem;text-align:center}

/* in-page table of contents */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--shadow);margin:0 auto 1rem;max-width:var(--maxw)}
.toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}
.toc-group .tg{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.toc-group a{display:block;color:var(--ink-soft);font-size:.92rem;padding:.2rem 0;text-decoration:none}
.toc-group a:hover{color:var(--accent)}
.toc-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;text-align:center}

.hero-proof{max-width:54ch;margin:1.4rem auto 0;color:var(--ink-soft);font-size:1.02rem;font-weight:500}

/* capture types */
.captures{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.cap{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.3rem;box-shadow:var(--shadow)}
.cap .cgrp{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.cap .row{display:flex;gap:.5rem;margin:.35rem 0;font-size:.9rem}
.cap .row code{font-family:ui-monospace,Consolas,monospace;color:var(--accent);font-size:.82rem;flex:0 0 92px}
.cap .row span{color:var(--ink-soft)}
.cap-naming{font-family:ui-monospace,Consolas,monospace;font-size:.9rem;background:#0f2b2b;color:#cfe8e6;border-radius:8px;padding:.6rem .9rem;display:inline-block;margin:.3rem 0}
.cap-naming b{color:var(--gold)}

/* about / personal strip */
.about{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about .about-photos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.about .about-photos img{width:100%;height:170px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line)}
.about .about-photos img.tall{grid-row:span 2;height:100%}
.about h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .8rem;letter-spacing:-.01em}
.about p{color:var(--ink-soft);margin:0 0 1rem}
.about .sig{font-weight:700;color:var(--ink)}

/* --- Book library index (ADR-068 references-layer) --- */
.lib-section{margin:2.5rem 0}
.lib-section h2{font-size:1.25rem;margin:0 0 1rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.lib-section h2 .muted{font-weight:400;font-size:.9rem;color:var(--ink-faint)}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.lib-card{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;box-shadow:var(--shadow);color:var(--ink)}
.lib-card:hover{color:var(--ink);border-color:var(--accent)}
.lib-thumb{flex:0 0 auto;width:56px;margin:0;border-radius:4px;overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.18);background:var(--line)}
.lib-thumb img{display:block;width:56px;height:auto;object-fit:cover}
.lib-thumb--none{width:56px;height:74px;border-radius:4px;
  background:repeating-linear-gradient(135deg,var(--line),var(--line) 6px,transparent 6px,transparent 12px)}
.lib-card-body{min-width:0;flex:1 1 auto}
.lib-card h3{font-size:1rem;margin:0 0 .35rem;line-height:1.3}
.lib-card .muted{font-size:.82rem;color:var(--ink-faint);margin:0}
.lib-card .book-rating{color:var(--gold);letter-spacing:1px;font-size:.85rem}