/* ──────────────────────────────────────────────────────────────────────────
   site.css — shared foundation + chrome for every page except index.html.
   index.html keeps its own inlined styles (verified, do not regress); this file
   mirrors the same design tokens so sub-pages (articles, listing) match exactly.
   Source of truth for tokens: design-system.md.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#f8f6f2;--panel:#ffffff;--ink:#1c1612;--dim:rgba(28,22,18,.62);--muted:#948572;
  --line:rgba(28,22,18,.12);--line-strong:rgba(28,22,18,.22);--blue:#01567e;--blue-soft:#bfdfec;--err:#a23a2e;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,sans-serif;
  --fs-display:clamp(2.8rem,6vw,5.5rem);--fs-section:clamp(1.9rem,3.4vw,3rem);
  --fs-title:clamp(1.35rem,2vw,1.7rem);--fs-body-l:clamp(1.02rem,1.2vw,1.15rem);--fs-label:.72rem;
  --container:1180px;--measure:42rem;--gutter:clamp(1.5rem,5vw,4rem);--ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}
:focus:not(:focus-visible){outline:none;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.5;overflow-x:hidden;width:100%;max-width:100%;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:var(--bg);padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-size:.9rem;font-weight:500;text-decoration:none;}
.skip-link:focus{left:0;}
main{overflow-x:hidden;width:100%;max-width:100%;position:relative;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 70% at 50% -10%,rgba(1,86,126,.05),transparent 60%);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.10;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");}

/* #bg-net (the drifting capital-network canvas) is created + styled by finance-bg.js,
   mounted as body's first child at z-index 0 so it sits behind the gradient + grain. */

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:3;}
.eyebrow{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}
.accent{color:var(--blue);}
.accent-i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue);}

.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;stroke:currentColor;fill:none;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;}
.ico--lg{width:42px;height:42px;color:var(--blue);stroke-width:9;}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);will-change:opacity,transform;}
[data-reveal].in{opacity:1;transform:none;}

.btn{font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:-.005em;background:var(--ink);color:var(--bg);text-decoration:none;border:none;cursor:pointer;padding:.78rem 1.4rem;border-radius:10px;display:inline-flex;align-items:center;gap:.5rem;transition:transform .4s var(--ease),opacity .4s var(--ease);}
.btn:hover{transform:translateY(-1px);opacity:.92;}
.btn:active{transform:translateY(0) scale(.985);}
.btn--ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px);opacity:1;}
.btn--lg{padding:.95rem 1.7rem;font-size:1rem;}
.btn .arr{transition:transform .4s var(--ease);}
.btn:hover .arr{transform:translateX(3px);}

.announce{border-bottom:1px solid var(--line);position:relative;z-index:4;background:var(--blue-soft);}
.announce__inner{display:flex;align-items:center;justify-content:center;gap:.6rem;padding-block:.7rem;font-size:.82rem;color:var(--ink);text-align:center;}
.announce__dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;}
.announce a{color:var(--blue);text-decoration:none;font-weight:500;border-bottom:1px solid rgba(1,86,126,.4);padding-bottom:1px;}
.announce a:hover{border-color:var(--blue);}

.nav{position:sticky;top:0;z-index:50;background:rgba(248,246,242,.78);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid var(--line);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:1rem;}
.wordmark{font-family:var(--serif);font-size:1.35rem;font-weight:400;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;gap:.4rem;align-items:baseline;}
.wordmark span{color:var(--muted);font-size:1rem;}
.nav__links{display:flex;gap:2.1rem;align-items:center;}
.nav__links a:not(.btn){font-size:.92rem;color:var(--dim);text-decoration:none;transition:color .4s var(--ease);}
.nav__links a:not(.btn):hover{color:var(--ink);}
.nav__links a[aria-current="page"]:not(.btn){color:var(--ink);}
@media (max-width:860px){.nav__links a:not(.btn){display:none;}}

.footer{border-top:1px solid var(--line);padding-block:clamp(4rem,9vh,7rem) 3.5rem;margin-top:clamp(5rem,12vh,9rem);}
.footer__sentence{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:400;line-height:1.3;letter-spacing:-.02em;max-width:24ch;color:var(--ink);}
.glyph{display:inline-flex;align-items:center;justify-content:center;width:.86em;height:.86em;border:1.5px solid var(--blue);border-radius:50%;vertical-align:-.06em;margin-inline:.1em;position:relative;}
.glyph::after{content:"";width:.26em;height:.26em;border-radius:50%;background:var(--blue);}
.glyph--ring::after{background:transparent;border:1.5px solid var(--blue);width:.4em;height:.4em;}
.glyph--dot::after{width:.2em;height:.2em;}
.footer__meta{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.footer__links{display:flex;gap:1.8rem;flex-wrap:wrap;}
.footer__links a,.footer__copy{font-size:.86rem;color:var(--muted);text-decoration:none;}
.footer__links a{transition:color .4s var(--ease);}
.footer__links a:hover{color:var(--ink);}

/* ── reusable motion utilities ──────────────────────────────────────────────
   The homepage's icon motion, promoted here so every page shares one vocabulary.
   Drop a class on any element. All are disabled under prefers-reduced-motion.
     .float        gentle perpetual rise/fall   (hero / figure icons)
     .bob          subtler perpetual float
     .pulse-soft   gentle opacity+scale breathe (accent dots, small icons)
   Reveal variants (element also needs data-reveal so reveal.js toggles .in):
     data-reveal                      default: fade + slide up (site-wide)
     data-reveal class="reveal-pop"   scale / pop in
   Hover:
     .hover-arrow   nudges a child .ico/.arr right on hover (matches .paper/.post) */
@keyframes icoFloat{0%,100%{translate:0 0;}50%{translate:0 -5px;}}
@keyframes icoBob{0%,100%{translate:0 0;}50%{translate:0 -3px;}}
@keyframes icoPulseSoft{0%,100%{opacity:.6;scale:1;}50%{opacity:1;scale:1.1;}}
.float{animation:icoFloat 5.5s var(--ease) infinite;will-change:transform;}
.bob{animation:icoBob 6s var(--ease) infinite;will-change:transform;}
.pulse-soft{animation:icoPulseSoft 3.2s ease-in-out infinite;}
[data-reveal].reveal-pop{opacity:0;transform:none;scale:.6;transition:opacity .6s var(--ease),scale .6s var(--ease);}
[data-reveal].reveal-pop.in{opacity:1;scale:1;}
.hover-arrow .ico,.hover-arrow .arr{transition:transform .4s var(--ease);}
.hover-arrow:hover .ico,.hover-arrow:hover .arr{transform:translateX(3px);}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;scale:none;translate:none;transition:none;}
  html{scroll-behavior:auto;}
  *{animation:none!important;}
  .float,.bob,.pulse-soft,.reveal-pop{scale:none!important;translate:none!important;opacity:1!important;}
}