/* ============ TOKENS ============ */
  :root {
    color-scheme: light dark;
    /* Category hues — canonical wayfinding (site-wide constants) */
    --hue-connect: 32;  /* amber — warmth of people */
    --hue-decide: 268;  /* violet — dignity of deliberation */
    --hue-work: 152;    /* green — growth and trade */
    --hue-know: 204;    /* blue — clarity */
    --hue-ground: 24;   /* bronze — the earth under it all */

    /* Light (dawn ivory) */
    --bg: #faf7f1;
    --bg-raise: #ffffff;
    --ink: #262019;
    --ink-soft: #5c5346;
    --line: #e6ddcf;
    --c-connect: #8f4f00; --c-connect-soft: #ffedd2;
    --c-decide:  #5b45b4; --c-decide-soft:  #ece6ff;
    --c-work:    #176a49; --c-work-soft:    #d9f3e5;
    --c-know:    #10608f; --c-know-soft:    #dceffb;
    --c-ground:  #7a5a38; --c-ground-soft:  #f2e7d8;
    --glow-alpha: .35;
    --scrim: rgba(250,247,241,.86);

    /* Type scale — fluid major third */
    --t-xs: clamp(.72rem, .68rem + .2vw, .8rem);
    --t-s:  clamp(.86rem, .8rem + .3vw, .95rem);
    --t-m:  clamp(1rem, .95rem + .35vw, 1.125rem);
    --t-l:  clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
    --t-xl: clamp(1.7rem, 1.4rem + 1.6vw, 2.4rem);
    --t-hero: clamp(2.3rem, 1.6rem + 3.8vw, 4.2rem);

    /* Space (4px base) + radius + motion */
    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem; --s8:2rem; --s12:3rem; --s16:4rem;
    --r-s:.5rem; --r-m:1rem; --r-l:1.5rem;
    --ease: cubic-bezier(.33,.8,.35,1);
    --breathe: 9s;
  }
  @media (prefers-color-scheme: dark) { :root {
    --bg:#191510; --bg-raise:#241e17; --ink:#f2eadc; --ink-soft:#bcae99; --line:#3a3125;
    --c-connect:#ffb355; --c-connect-soft:#3d2a10;
    --c-decide:#b9a3ff;  --c-decide-soft:#2c2345;
    --c-work:#5fd6a0;    --c-work-soft:#123526;
    --c-know:#6fc2f2;    --c-know-soft:#0f2c40;
    --c-ground:#d3ab77;  --c-ground-soft:#332818;
    --glow-alpha:.5; --scrim: rgba(25,21,16,.82);
  } }
  :root[data-theme=light] {
    --bg:#faf7f1; --bg-raise:#ffffff; --ink:#262019; --ink-soft:#5c5346; --line:#e6ddcf;
    --c-connect:#8f4f00; --c-connect-soft:#ffedd2; --c-decide:#5b45b4; --c-decide-soft:#ece6ff;
    --c-work:#176a49; --c-work-soft:#d9f3e5; --c-know:#10608f; --c-know-soft:#dceffb;
    --c-ground:#7a5a38; --c-ground-soft:#f2e7d8; --glow-alpha:.35; --scrim:rgba(250,247,241,.86);
  }
  :root[data-theme=dark] {
    --bg:#191510; --bg-raise:#241e17; --ink:#f2eadc; --ink-soft:#bcae99; --line:#3a3125;
    --c-connect:#ffb355; --c-connect-soft:#3d2a10; --c-decide:#b9a3ff; --c-decide-soft:#2c2345;
    --c-work:#5fd6a0; --c-work-soft:#123526; --c-know:#6fc2f2; --c-know-soft:#0f2c40;
    --c-ground:#d3ab77; --c-ground-soft:#332818; --glow-alpha:.5; --scrim:rgba(25,21,16,.82);
  }

  * { box-sizing: border-box; margin: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg); color: var(--ink);
    font: 400 var(--t-m)/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  .wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--s6); }

  /* ============ HEADER ============ */
  header.site {
    position: sticky; top: 0; z-index: 40;
    background: var(--scrim); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  /* i18n-navwrap */
header.site .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s6); padding-block: var(--s3); }
  .brand { display:flex; align-items:center; gap:var(--s2); font-weight:700; letter-spacing:.02em; text-decoration:none; }
  .brand-mark { width:1.6rem; height:1.6rem; border-radius:50%;
    background: conic-gradient(hsl(var(--hue-connect) 80% 55%), hsl(var(--hue-decide) 70% 62%), hsl(var(--hue-know) 75% 55%), hsl(var(--hue-work) 65% 45%), hsl(var(--hue-connect) 80% 55%)); }
  nav.top { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-left:auto; font-size:var(--t-s); align-items:center; }
  nav.top a { text-decoration:none; color:var(--ink-soft); padding:var(--s1) var(--s2); border-radius:var(--r-s); }
  nav.top a:hover, nav.top a:focus-visible { color:var(--ink); background:var(--c-ground-soft); }
  .theme-btn { border:1px solid var(--line); background:var(--bg-raise); color:var(--ink);
    border-radius:999px; padding:var(--s1) var(--s3); font-size:var(--t-xs); cursor:pointer; }

  /* ============ HERO — dawn mesh + conic frame + compass ============ */
  .hero { position:relative; overflow:hidden; }
  /* [PHOTO] production: slideshow/dawn.webp (or licensed dawn-over-land backdrop) sits here,
     under the mesh, at low opacity with the scrim keeping text AA at every frame. */
  .mesh, .mesh::before {
    content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  }
  .mesh {
    background:
      radial-gradient(42% 55% at 18% 30%, hsl(var(--hue-connect) 90% 62% / .22), transparent 70%),
      radial-gradient(45% 60% at 82% 20%, hsl(var(--hue-decide) 80% 66% / .18), transparent 70%),
      radial-gradient(50% 60% at 70% 85%, hsl(var(--hue-work) 70% 55% / .16), transparent 70%),
      radial-gradient(40% 50% at 25% 90%, hsl(var(--hue-know) 80% 60% / .16), transparent 70%);
    animation: drift-a calc(var(--breathe) * 3) var(--ease) infinite alternate;
  }
  .mesh::before {
    background:
      radial-gradient(35% 45% at 60% 40%, hsl(var(--hue-ground) 70% 60% / .14), transparent 70%);
    animation: drift-b calc(var(--breathe) * 4) var(--ease) infinite alternate;
  }
  @keyframes drift-a { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }
  @keyframes drift-b { from { transform: translate3d(2%, 1%, 0) rotate(0deg); } to { transform: translate3d(-2%, -2%, 0) rotate(4deg); } }

  .hero .wrap { position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr;
    gap: var(--s12); align-items:center; padding-block: var(--s16); }
  @media (max-width: 56rem) { .hero .wrap { grid-template-columns: 1fr; padding-block: var(--s12); } }

  .eyebrow { display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-xs);
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
  .eyebrow::before { content:""; width:2rem; height:2px; border-radius:2px;
    background: linear-gradient(90deg, var(--c-connect), var(--c-decide), var(--c-know), var(--c-work)); }
  h1 { font-size:var(--t-hero); line-height:1.05; letter-spacing:-.02em; margin:var(--s4) 0; font-weight:800; }
  h1 .lift { background: linear-gradient(100deg, var(--c-connect), var(--c-decide) 45%, var(--c-know) 75%, var(--c-work));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sub { font-size:var(--t-l); line-height:1.45; color:var(--ink-soft); max-width:34ch; }
  .cta-row { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s8); }
  .btn { display:inline-block; border-radius:999px; padding:.8em 1.5em; font-weight:650; font-size:var(--t-s);
    text-decoration:none; border:1px solid transparent; transition: transform .25s var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .btn-primary { background:var(--ink); color:var(--bg); }
  .btn-ghost { border-color:var(--line); background:var(--bg-raise); color:var(--ink); }

  /* Conic spinning frame (pure transform — GPU cheap) */
  .frame { position:relative; overflow:hidden; border-radius:var(--r-l); padding:2px; }
  .frame::before { content:""; position:absolute; left:50%; top:50%; width:260%; aspect-ratio:1;
    transform: translate(-50%,-50%) rotate(0turn);
    background: conic-gradient(
      hsl(var(--hue-connect) 85% 60%), hsl(var(--hue-decide) 75% 65%),
      hsl(var(--hue-know) 80% 58%), hsl(var(--hue-work) 70% 50%),
      hsl(var(--hue-connect) 85% 60%));
    animation: turn 16s linear infinite; }
  @keyframes turn { to { transform: translate(-50%,-50%) rotate(1turn); } }
  .frame-inner { position:relative; background:var(--bg-raise); border-radius: calc(var(--r-l) - 2px); }

  /* Compass */
  .compass { display:block; width:100%; height:auto; padding: var(--s6); }
  .compass text { font: 650 13px system-ui, sans-serif; fill: var(--ink); }
  .compass .cat-sub { font-size:10px; font-weight:400; fill:var(--ink-soft); }
  .compass .ring { fill:none; stroke:var(--line); stroke-width:1.5; }
  .compass .spoke { stroke:var(--line); stroke-width:1; opacity:.8; }
  .compass .core { animation: breathe var(--breathe) var(--ease) infinite alternate; transform-origin:center; transform-box:fill-box; }
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
  .compass .node-hit { cursor:pointer; }
  .compass .node-hit:hover circle.dot, .compass .node-hit:focus circle.dot { r: 9; }
  .orbiter { transform-origin: 210px 210px; animation: turn-flat 40s linear infinite; }
  @keyframes turn-flat { to { transform: rotate(1turn); } }

  /* ============ CATEGORY WAYFINDING CHIPS ============ */
  .catnav { display:flex; flex-wrap:wrap; gap:var(--s3); padding-block: var(--s6); border-block:1px solid var(--line); }
  .chip { --c: var(--c-ground); --cs: var(--c-ground-soft);
    display:inline-flex; align-items:center; gap:.5em; padding:.5em 1em; border-radius:999px;
    background:var(--cs); color:var(--c); font-weight:650; font-size:var(--t-s); text-decoration:none;
    border:1px solid transparent; }
  .chip:hover, .chip:focus-visible { border-color: var(--c); }
  .chip svg { width:1em; height:1em; }
  .chip.connect { --c:var(--c-connect); --cs:var(--c-connect-soft); }
  .chip.decide { --c:var(--c-decide); --cs:var(--c-decide-soft); }
  .chip.work { --c:var(--c-work); --cs:var(--c-work-soft); }
  .chip.know { --c:var(--c-know); --cs:var(--c-know-soft); }

  /* ============ SECTIONS ============ */
  section.cat { padding-block: var(--s16); }
  section.cat .head { display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s8); }
  section.cat h2 { font-size:var(--t-xl); letter-spacing:-.01em; }
  section.cat .head .kicker { font-size:var(--t-s); color:var(--ink-soft); max-width:52ch; }
  .cat-mark { display:inline-flex; align-items:center; gap:.5em; font-size:var(--t-xs);
    text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
  .cat-mark i { width:.9em; height:.9em; border-radius:3px; display:inline-block; }
  #decide .cat-mark { color:var(--c-decide); } #decide .cat-mark i { background:var(--c-decide); }
  #work .cat-mark { color:var(--c-work); } #work .cat-mark i { background:var(--c-work); }
  #connect .cat-mark { color:var(--c-connect); } #connect .cat-mark i { background:var(--c-connect); }
  #know .cat-mark { color:var(--c-know); } #know .cat-mark i { background:var(--c-know); }

  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap:var(--s6); }

  /* ============ APP CARD ============ */
  .card { --c: var(--c-ground); --cs: var(--c-ground-soft);
    position:relative; background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--r-m);
    padding:var(--s6); display:flex; flex-direction:column; gap:var(--s3);
    transition: transform .3s var(--ease); }
  .card::before { content:""; position:absolute; inset:-1px; border-radius:var(--r-m); z-index:-1;
    background: radial-gradient(60% 60% at 50% 0%, var(--c), transparent 75%);
    opacity:0; transition: opacity .35s var(--ease); filter: none; }
  .card:hover { transform: translateY(-4px); }
  .card:hover::before { opacity: var(--glow-alpha); }
  .card.connect { --c:var(--c-connect); --cs:var(--c-connect-soft); }
  .card.decide { --c:var(--c-decide); --cs:var(--c-decide-soft); }
  .card.work { --c:var(--c-work); --cs:var(--c-work-soft); }
  .card.know { --c:var(--c-know); --cs:var(--c-know-soft); }
  .card .top { display:flex; align-items:center; gap:var(--s2); }
  .card .glyph { width:2.4rem; height:2.4rem; border-radius:var(--r-s); background:var(--cs); color:var(--c);
    display:grid; place-items:center; }
  .card .glyph svg { width:1.3rem; height:1.3rem; }
  .card h3 { font-size:var(--t-l); line-height:1.2; }
  .card p { color:var(--ink-soft); font-size:var(--t-s); flex:1; }
  .pill { margin-left:auto; font-size:var(--t-xs); font-weight:700; padding:.25em .8em; border-radius:999px; }
  .pill.live { background:var(--c-work-soft); color:var(--c-work); }
  .pill.soon { border:1px dashed var(--c); color:var(--c); }
  .card .meta { display:flex; align-items:center; gap:var(--s3); font-size:var(--t-xs); color:var(--ink-soft); }
  .card .meta [data-tier] { font-weight:650; color:var(--c); }
  .card .actions { display:flex; gap:var(--s3); }
  .link-more { --c2: var(--c); background:none; border:none; padding:0; cursor:pointer;
    font: 650 var(--t-s) system-ui, sans-serif; color:var(--c2); display:inline-flex; align-items:center; gap:.35em; }
  .link-more::after { content:"→"; transition: transform .25s var(--ease); }
  .link-more:hover::after { transform: translateX(4px); }

  /* Coming-soon card: turning dashed conic edge */
  .card.soon-card { overflow:hidden; border-style:dashed; }
  .card.soon-card::after { content:""; position:absolute; left:50%; top:50%; width:280%; aspect-ratio:1;
    transform: translate(-50%,-50%); pointer-events:none; opacity:.14;
    background: conic-gradient(var(--c) 0 12%, transparent 12% 50%, var(--c) 50% 62%, transparent 62%);
    animation: turn 22s linear infinite; }

  /* ============ FEDERATION DIAGRAM (Decide) ============ */
  .diagram-panel { background:var(--bg-raise); border:1px solid var(--line); border-radius:var(--r-l);
    padding:var(--s8); margin-bottom:var(--s8); overflow-x:auto; }
  .diagram-panel figcaption { font-size:var(--t-s); color:var(--ink-soft); margin-top:var(--s4); max-width:64ch; }
  .fed { display:block; width:100%; min-width:34rem; height:auto; }
  .fed text { font: 650 12.5px system-ui, sans-serif; fill:var(--ink); }
  .fed .lbl-soft { font-weight:400; font-size:11px; fill:var(--ink-soft); }
  .fed .village circle.hull { fill:var(--c-decide-soft); stroke:var(--c-decide); stroke-width:1.5; }
  .fed .link { stroke:var(--c-decide); stroke-width:1.5; stroke-dasharray:4 5; fill:none; opacity:.55; }
  .fed .mandate { fill:none; stroke:var(--c-decide); stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw-ring 10s var(--ease) infinite; }
  @keyframes draw-ring { 0%,15% { stroke-dashoffset:400; opacity:.9; } 55%,88% { stroke-dashoffset:0; opacity:.9; } 100% { stroke-dashoffset:0; opacity:0; } }
  .fed .pulse { fill:var(--c-decide); }
  .fed .stamp { opacity:0; animation: stamp-in 10s var(--ease) infinite; transform-origin:center; transform-box:fill-box; }
  @keyframes stamp-in { 0%,55% { opacity:0; transform:scale(.6); } 65%,88% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1); } }

  /* ============ COMMON GROUND BAND ============ */
  .ground-band { background:
      linear-gradient(hsl(var(--hue-ground) 30% 50% / .08), hsl(var(--hue-ground) 30% 50% / .08));
    border-block:1px solid var(--line); padding-block:var(--s16); }
  /* [PHOTO] production: slideshow/ground.webp low-opacity backdrop behind this band */
  .ground-band h2 { font-size:var(--t-xl); margin-bottom:var(--s2); }
  .ground-band .lede { color:var(--ink-soft); max-width:60ch; margin-bottom:var(--s8); }
  .pillars { display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:var(--s6); }
  .pillar { display:flex; gap:var(--s3); align-items:flex-start; }
  .pillar .glyph { flex:none; width:2.2rem; height:2.2rem; border-radius:var(--r-s);
    background:var(--c-ground-soft); color:var(--c-ground); display:grid; place-items:center; }
  .pillar .glyph svg { width:1.2rem; height:1.2rem; }
  .pillar h3 { font-size:var(--t-m); }
  .pillar p { font-size:var(--t-s); color:var(--ink-soft); }

  /* ============ STORY ============ */
  .story { padding-block:var(--s16); }
  .story .frame-inner { padding: var(--s12); }
  .story h2 { font-size:var(--t-xl); max-width:24ch; margin-bottom:var(--s4); }
  .story p { color:var(--ink-soft); max-width:64ch; margin-bottom:var(--s4); }
  .story strong { color:var(--ink); }

  footer.site { border-top:1px solid var(--line); padding-block:var(--s8); font-size:var(--t-s); color:var(--ink-soft); }
  footer.site .wrap { display:flex; flex-wrap:wrap; gap:var(--s6); justify-content:space-between; }

  /* ============ READ-MORE OVERLAY ============ */
  .overlay { position:fixed; inset:0; z-index:60; display:none; }
  .overlay.open { display:block; }
  .overlay .backdrop { position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity .3s var(--ease); }
  .overlay.open .backdrop { opacity:1; }
  .sheet { position:absolute; right:0; top:0; bottom:0; width:min(34rem, 92vw); background:var(--bg-raise);
    border-left:1px solid var(--line); padding:var(--s8); overflow-y:auto;
    transform: translateX(100%); transition: transform .35s var(--ease); }
  .overlay.open .sheet { transform:none; }
  .sheet .cat-tag { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
  .sheet h3 { font-size:var(--t-xl); margin:var(--s2) 0 var(--s4); }
  .sheet h4 { font-size:var(--t-m); margin:var(--s6) 0 var(--s1); }
  .sheet p { color:var(--ink-soft); font-size:var(--t-s); }
  .sheet .close { position:absolute; top:var(--s4); right:var(--s4); border:1px solid var(--line);
    background:var(--bg); color:var(--ink); border-radius:999px; width:2.2rem; height:2.2rem; cursor:pointer; font-size:1rem; }
  .sheet .ready { margin-top:var(--s6); padding:var(--s4); border-radius:var(--r-s);
    background:var(--c-ground-soft); color:var(--ink); font-size:var(--t-s); }

  /* ============ REDUCED MOTION — static, complete states ============ */
  @media (prefers-reduced-motion: reduce) {
    .mesh, .mesh::before, .frame::before, .card.soon-card::after,
    .compass .core, .orbiter, .btn, .card { animation:none !important; transition:none !important; }
    .fed .mandate { animation:none; stroke-dashoffset:0; opacity:.9; }
    .fed .stamp { animation:none; opacity:1; transform:none; }
    .fed .pulse, .fed animateMotion { display:none; }
    .overlay .backdrop, .sheet { transition:none; }
  }
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:.6em 1em;border-radius:0 0 var(--r-s) 0;}
.skip-link:focus{left:0;}

.compass .core.node-hit{cursor:pointer;}
.compass .core.node-hit:hover circle,.compass .core.node-hit:focus-visible circle{stroke-width:2.5;}
.compass .core.node-hit:focus-visible{outline:none;}

.lang-switch{display:inline-flex;gap:.3rem;align-items:center;font-size:var(--t-xs);margin-right:var(--s2);}
.lang-switch a{text-decoration:none;color:var(--ink-soft);padding:0 .1rem;}
.lang-switch a:hover,.lang-switch a:focus-visible{color:var(--ink);}
.lang-switch a[aria-current="page"]{font-weight:700;color:var(--ink);text-decoration:underline;}
.lang-switch .sep{opacity:.4;}