/* ===== SAGE 3.0 · dark ===== */
/* Premium AI-company direction, 2026. Sage brand thread carried into a dark
   system: near-black ground, mint/sage accents, glass panels, mono detailing.
   All text tokens clear WCAG AA against the ground. No WebGL anywhere. */
:root{
  --ground:#0B0D09; --ground-2:#10130D; --panel:rgba(22,26,19,.72);
  --linen:#F2F1EA; --ink:#EDEFE6; --ink-soft:#ADB4A3; --muted:#7C8471;
  --mint:#A8D5A2; --sage:#6E9266; --sage-ink:#8FBE87; --sage-deep:#46603F;
  --btn:#5E7E54; --btn-h:#6E9163;
  --hair:rgba(237,239,230,.10); --hair-strong:rgba(237,239,230,.18);
  --glow:0 0 0 1px rgba(168,213,162,.14),0 0 40px rgba(110,146,102,.22);
  --lift:0 2px 6px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.45);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.25,1,.5,1);
  --t-fast:.32s; --t-base:.42s; --t-slow:.5s; --rise:14px;
  --serif:"Cormorant Garamond",Garamond,serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"Inter",system-ui,sans-serif;
  --display-serif:"Instrument Serif","Cormorant Garamond",Garamond,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;min-height:100vh;background:var(--ground)}

/* ambient: slow mint aurora on black + grid whisper */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(237,239,230,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,239,230,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.4;will-change:transform}
.aurora .a1{width:60vw;height:60vw;left:-15vw;top:-25vw;background:radial-gradient(circle,#25402180 0%,transparent 65%);
  animation:drift1 44s ease-in-out infinite alternate}
.aurora .a2{width:50vw;height:50vw;right:-12vw;top:14vh;background:radial-gradient(circle,#1c332e99 0%,transparent 65%);
  animation:drift2 56s ease-in-out infinite alternate}
.aurora .a3{width:65vw;height:65vw;left:16vw;bottom:-30vw;background:radial-gradient(circle,#2c452380 0%,transparent 62%);
  animation:drift3 50s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(10vw,8vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-8vw,-6vh) scale(1.1)}}
@keyframes drift3{to{transform:translate(-7vw,-10vh) scale(1.18)}}
#grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}
main,section,nav,footer{position:relative;z-index:1}

/* layout */
.measure{max-width:1140px;margin:0 auto;padding:0 32px}
@media(max-width:900px){.measure{padding:0 22px}}
.chapter{padding:72px 0;position:relative}
.eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--mint);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--mint))}
h2.h{font-family:var(--display-serif);font-weight:400;font-size:clamp(33px,4.8vw,58px);
  line-height:1.06;letter-spacing:-.01em;margin:16px 0 0;color:var(--linen)}
h2.h em{font-style:italic;color:var(--sage-ink)}
.lead{max-width:620px;margin:22px auto 0;font-size:18px;color:var(--ink-soft)}

/* reveal + stagger */
.reveal{opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--t-base) var(--ease-expo),transform var(--t-base) var(--ease-expo)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-expo),transform .6s var(--ease-expo)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.14s}
.stagger.in>*:nth-child(3){transition-delay:.23s}
.stagger.in>*:nth-child(4){transition-delay:.32s}
.stagger.in>*:nth-child(5){transition-delay:.41s}
.stagger.in>*:nth-child(6){transition-delay:.5s}
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* nav */
nav{position:fixed;top:14px;left:18px;right:18px;z-index:80;display:flex;align-items:center;
  justify-content:space-between;padding:10px 14px 10px 22px;border-radius:100px;
  background:rgba(12,14,10,.55);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--hair-strong);
  box-shadow:0 1px 0 rgba(237,239,230,.06) inset,0 16px 40px rgba(0,0,0,.45)}
nav .logo{display:inline-flex;align-items:center;text-decoration:none;transition:opacity var(--t-fast) var(--ease-soft)}
nav a.logo:hover{opacity:.75}
nav .logo-mark{height:46px;width:auto;display:block;filter:invert(1) brightness(1.6) sepia(.12)}
nav .navlinks{display:flex;align-items:center;gap:22px}
nav .navlink{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft)}
nav .navlink:hover{color:var(--mint)}
nav .cta{font-size:13.5px;background:var(--btn);color:#fff;padding:10px 18px;border-radius:30px;
  cursor:pointer;border:0;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;
  line-height:1.15;white-space:nowrap;box-shadow:var(--glow);
  transition:transform var(--t-fast) var(--ease-expo),background var(--t-fast) var(--ease-soft),box-shadow var(--t-fast) var(--ease-expo)}
nav .cta:hover{transform:translateY(-1px);background:var(--btn-h);
  box-shadow:0 0 0 1px rgba(168,213,162,.25),0 0 52px rgba(110,146,102,.4)}
@media(max-width:720px){nav .navlink{display:none}nav .logo-mark{height:38px}}

/* buttons + focus */
.btn{font-size:16px;padding:16px 30px;border-radius:30px;cursor:pointer;border:0;font-weight:600;
  text-decoration:none;display:inline-block;font-family:var(--sans);
  transition:transform .28s var(--ease-expo),box-shadow .28s var(--ease-expo),background var(--t-fast) var(--ease-soft)}
.btn.primary{background:var(--btn);color:#fff;box-shadow:var(--glow)}
.btn.primary:hover{transform:translateY(-2px);background:var(--btn-h);
  box-shadow:0 0 0 1px rgba(168,213,162,.3),0 0 64px rgba(110,146,102,.45)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-strong)}
.btn.ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn:focus-visible,.cta:focus-visible,.navlink:focus-visible,button:focus-visible,
a:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.cta:focus-visible{border-radius:30px}

/* panels */
.glass{background:var(--panel);border:1px solid var(--hair);border-radius:18px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--lift)}
.glass.edge{position:relative}
.glass.edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(168,213,162,.35),transparent 32%,transparent 68%,rgba(168,213,162,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lifty{transition:transform .34s var(--ease-expo),box-shadow .34s var(--ease-expo)}
.lifty:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.55),var(--glow)}

@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(168,213,162,.4)}100%{box-shadow:0 0 0 18px rgba(168,213,162,0)}}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(168,213,162,.16)}}

/* display type */
@property --g1{syntax:"<color>";inherits:false;initial-value:#F2F1EA}
@property --g2{syntax:"<color>";inherits:false;initial-value:#C9D8C0}
@property --g3{syntax:"<color>";inherits:false;initial-value:#A8D5A2}
.display{font-family:var(--display-serif);font-weight:400;font-size:clamp(44px,6.2vw,88px);
  line-height:1.08;letter-spacing:-.02em;padding-bottom:.12em;color:var(--linen)}
.display.grad{background:linear-gradient(115deg in oklch,var(--g1),var(--g2) 55%,var(--g3));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sageGrad 18s ease-in-out infinite alternate}
@keyframes sageGrad{to{--g1:#E8EDE2;--g2:#A8D5A2;--g3:#F2F1EA}}
@keyframes heroArrive{0%{opacity:0;transform:translateY(var(--rise));filter:blur(8px)}
  70%{filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
.arrive{animation:heroArrive var(--t-slow) var(--ease-expo) 50ms both}
.display.grad.arrive{animation:sageGrad 18s ease-in-out infinite alternate,heroArrive var(--t-slow) var(--ease-expo) 50ms both}
@media(prefers-reduced-motion:reduce){.display.grad,.display.grad.arrive{animation:none;color:var(--linen);-webkit-text-fill-color:var(--linen)}}

.countup{font-variant-numeric:tabular-nums}
@keyframes sweep{from{background-position:-200% 0}to{background-position:200% 0}}
.sweep-once.in{background-image:linear-gradient(100deg,transparent 30%,rgba(168,213,162,.22) 50%,transparent 70%);
  background-size:200% 100%;background-repeat:no-repeat;animation:sweep 1.2s var(--ease-soft) .3s 1}

/* footer */
footer{padding:70px 0 60px;text-align:center;border-top:1px solid var(--hair)}
footer .sig{margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
footer .sig a{color:var(--sage-ink);text-decoration:none}
footer .legal-links{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
footer .legal-links a{color:var(--muted);text-decoration:none}
footer .legal-links a:hover{color:var(--mint)}

/* blog / article */
.article{max-width:680px;margin:0 auto;padding:160px 32px 80px;position:relative;z-index:1}
.article .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);font-weight:500}
.article h1{font-family:var(--display-serif);font-weight:400;font-size:clamp(34px,5vw,52px);
  line-height:1.1;letter-spacing:-.015em;margin:14px 0 0;color:var(--linen)}
.article h1 em{font-style:italic;color:var(--sage-ink)}
.article .dateline{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.article .body{margin-top:38px}
.article .body p{margin:0 0 18px;font-size:17.5px;line-height:1.75;color:#C6CCBB}
.article .body p.big{font-family:var(--serif);font-size:22px;line-height:1.55;color:var(--linen);margin:30px 0 26px}
.article .body h2{font-family:var(--display-serif);font-weight:400;font-size:29px;line-height:1.2;
  margin:42px 0 14px;color:var(--linen)}
.article .body ul{margin:0 0 18px 22px}
.article .body li{margin-bottom:8px;color:#C6CCBB}
.article .body .pull{border-left:2px solid var(--sage);padding:4px 0 4px 22px;margin:28px 0;
  font-family:var(--display-serif);font-style:italic;font-size:21px;color:var(--sage-ink);line-height:1.45}
.article .cta-box{margin-top:48px;padding:28px 30px;text-align:left}
.article .cta-box p{margin:0 0 16px;font-size:16px;color:var(--ink-soft)}
.postlist{max-width:680px;margin:0 auto;padding:160px 32px 80px;position:relative;z-index:1}
.postcard{display:block;text-decoration:none;color:inherit;padding:26px 28px;margin-bottom:16px;
  transition:transform var(--t-fast) var(--ease-expo),box-shadow var(--t-fast) var(--ease-expo)}
.postcard:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(0,0,0,.55),var(--glow)}
.postcard .pk{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);font-weight:500}
.postcard h3{font-family:var(--display-serif);font-weight:400;font-size:26px;line-height:1.2;margin:8px 0 8px;color:var(--linen)}
.postcard p{font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.postcard .pdate{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.scrollcue{margin-top:48px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);animation:bob 2.4s ease-in-out infinite;display:inline-block}
@keyframes bob{50%{transform:translateY(6px)}}