/* =========================================================================
   LODESTONE ENTERPRISE - shared design system
   "An observatory at night." Deep ink, soft off-white, one lodestone glow.
   ========================================================================= */

/* ---------- Fonts (self-hosted, no third-party request) ---------- */
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 600;font-display:swap;
  src:url('fonts/newsreader-opsz-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;
  src:url('fonts/newsreader-opsz-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('fonts/hanken-grotesk-wght-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --ink:        #0c0d11;
  --ink-2:      #101218;
  --ink-3:      #15171f;
  --ink-edge:   #080910;

  --paper:      #ece7da;
  --paper-dim:  #a29e93;
  --paper-faint:#6f6c64;

  --line:       rgba(236,231,218,.10);
  --line-2:     rgba(236,231,218,.17);

  --amber:      #d7a04b;
  --amber-2:    #ecbd72;
  --amber-deep: #b3791f;
  --amber-glow: rgba(215,160,75,.16);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(22px, 5vw, 64px);

  --ease: cubic-bezier(.22,.7,.24,1);
}

/* ---------- Light variant (Paper & Ink) ---------- */
.theme-light{
  --ink:        #efe9db;
  --ink-2:      #e9e2d1;
  --ink-3:      #e3dccb;
  --ink-edge:   #f4efe4;

  --paper:      #211e17;
  --paper-dim:  #6a6458;
  --paper-faint:#928c7e;

  --line:       rgba(33,30,23,.12);
  --line-2:     rgba(33,30,23,.2);

  --amber:      #b3791f;
  --amber-2:    #976016;
  --amber-deep: #8a571a;
  --amber-glow: rgba(179,121,31,.12);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* leave room for the fixed nav when jumping to in-page anchors */
section[id],header[id]{scroll-margin-top:96px;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--amber-glow);color:var(--paper);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.section{position:relative;padding-block:clamp(84px,12vw,168px);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);
  display:inline-flex;align-items:center;gap:12px;
  margin:0 0 28px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--amber);opacity:.6;display:inline-block;
}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{
  content:"";width:26px;height:1px;background:var(--amber);opacity:.6;display:inline-block;
}

.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.018em;
  margin:0;
  color:var(--paper);
}
.display .it{font-style:italic;font-weight:300;}
.d-hero{font-size:clamp(58px,11vw,148px);}
.d-xl{font-size:clamp(40px,6.5vw,84px);}
.d-l{font-size:clamp(33px,4.6vw,60px);}
.d-m{font-size:clamp(27px,3.4vw,42px);}

.lede{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(18px,2vw,23px);
  line-height:1.55;
  color:var(--paper);
  letter-spacing:.002em;
  max-width:34ch;
  margin:0;
}
.prose{
  font-size:clamp(16px,1.45vw,18.5px);
  font-weight:300;
  line-height:1.72;
  color:var(--paper-dim);
  max-width:60ch;
  text-wrap:pretty;
}
.prose strong{color:var(--paper);font-weight:500;}
.muted{color:var(--paper-dim);}
.faint{color:var(--paper-faint);}
.amber{color:var(--amber);}

/* small mono accents (coordinates / status) */
.mono{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  letter-spacing:.16em;font-size:11.5px;text-transform:uppercase;font-weight:500;
  color:var(--paper-faint);
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--amber);
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:2px;
  background:var(--bg);color:#15110a;border:1px solid var(--bg);
  cursor:pointer;transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s ease;
  box-shadow:0 0 0 rgba(215,160,75,0);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -16px rgba(215,160,75,.7);}
.btn .ar{transition:transform .4s var(--ease);}
.btn:hover .ar{transform:translate(3px,-3px);}
.btn-ghost{
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:2px;
  background:transparent;color:var(--paper);border:1px solid var(--line-2);
  cursor:pointer;transition:border-color .35s ease, color .35s ease, transform .4s var(--ease);
}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px);}

/* text link with arrow */
.tlink{
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;color:var(--paper);
  transition:color .3s ease,gap .3s var(--ease);
}
.tlink .ar{color:var(--amber);transition:transform .35s var(--ease);}
.tlink:hover{color:var(--amber);gap:13px;}
.tlink:hover .ar{transform:translate(3px,-3px);}

/* status pill */
.pill{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--paper-dim);
}
.pill::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 var(--amber-glow);
  animation:pulse 3.4s var(--ease) infinite;
}
.pill.soon::before{background:var(--paper-faint);animation:none;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(215,160,75,.5);}
  70%{box-shadow:0 0 0 9px rgba(215,160,75,0);}
  100%{box-shadow:0 0 0 0 rgba(215,160,75,0);}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line);
}
.nav-in{
  max-width:var(--wrap);margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{
  font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:11px;color:var(--paper);
}
.wordmark .gem{
  width:9px;height:9px;background:var(--amber);
  transform:rotate(45deg);border-radius:1px;
  box-shadow:0 0 14px 1px var(--amber-glow);
}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:13.5px;font-weight:400;letter-spacing:.04em;color:var(--paper-dim);
  position:relative;transition:color .3s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--amber);
  transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--paper);}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  font-size:13px!important;color:var(--paper)!important;
  border:1px solid var(--line-2);padding:9px 17px;border-radius:2px;
  transition:border-color .3s ease,color .3s ease!important;
}
.nav-cta::after{display:none;}
.nav-cta:hover{border-color:var(--amber);color:var(--amber)!important;}
@media(max-width:720px){.nav-links .hide-sm{display:none;}}
@media(max-width:420px){.wordmark{font-size:19px;}}

/* ---------- Motif: starfield + field lines ---------- */
.motif{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.motif canvas{position:absolute;inset:0;width:100%;height:100%;}
.fieldlines{position:absolute;inset:-10% -5%;width:110%;height:120%;opacity:.5;
  transform-origin:50% 50%;}
/* Lines draw on once via motion.js (dash off each path's real length), then hold.
   non-scaling-stroke must stay OFF here, or the dash maths break under the slice
   scaling. With JS off, paths show solid + static (graceful fallback). */
.fieldlines path{fill:none;stroke:var(--amber);stroke-width:1;opacity:.35;}
.js .fieldlines path{opacity:0;}
.theme-light .fieldlines path{stroke:var(--amber-deep);}
@keyframes breathe{
  0%,100%{transform:scale(1) rotate(0deg);}
  50%{transform:scale(1.04) rotate(1.2deg);}
}
/* glow wash behind hero focal point */
.glow{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, var(--amber-glow) 0%, transparent 68%);
  filter:blur(8px);
}
.hero-edge{
  position:absolute;left:0;right:0;bottom:0;height:240px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--ink));
}

/* ---------- Scroll reveal (gated on .js so no-JS shows everything) ---------- */
.js [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:var(--d,0s);
}
.js [data-reveal].in{opacity:1;transform:none;}
.js [data-reveal="fade"]{transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;}
  html{scroll-behavior:auto;}
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- Thesis mapping list ---------- */
.thesis-map{display:flex;flex-direction:column;gap:0;margin-top:8px;}
.thesis-map .row{
  display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:clamp(16px,3vw,42px);
  align-items:baseline;padding:24px 0;border-top:1px solid var(--line);
}
.thesis-map .row:last-child{border-bottom:1px solid var(--line);}
.thesis-map .vn{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,30px);color:var(--amber);}
.thesis-map .vt{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,29px);color:var(--paper);line-height:1.3;}

/* ---------- How we build principles ---------- */
.principles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:8px;
}
.principles .p{background:var(--ink);padding:30px 26px;}
.theme-light .principles .p{background:var(--ink);}
.principles .pi{font-family:var(--serif);font-style:italic;color:var(--amber);font-size:15px;margin-bottom:16px;display:block;}
.principles .pt{font-family:var(--serif);font-weight:300;font-size:21px;color:var(--paper);margin:0 0 9px;line-height:1.2;}
.principles .pd{font-size:14px;color:var(--paper-dim);font-weight:300;line-height:1.6;margin:0;}
@media(max-width:860px){.principles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.principles{grid-template-columns:1fr;}}

/* ---------- Founder placeholder ---------- */
.founder{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(30px,5vw,72px);align-items:center;}
.portrait{
  position:relative;aspect-ratio:4/5;border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(215,160,75,.05) 10px 11px),
    var(--ink-2);
  display:flex;align-items:center;justify-content:center;
}
.portrait .tag{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-faint);border:1px dashed var(--line-2);padding:8px 14px;border-radius:2px;
}
.portrait .corner{position:absolute;width:14px;height:14px;border:1px solid var(--amber);opacity:.6;}
.portrait .corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;}
.portrait .corner.tr{top:10px;right:10px;border-left:0;border-bottom:0;}
.portrait .corner.bl{bottom:10px;left:10px;border-right:0;border-top:0;}
.portrait .corner.br{bottom:10px;right:10px;border-left:0;border-top:0;}
@media(max-width:680px){.founder{grid-template-columns:1fr;}.portrait{max-width:260px;}}

/* ---------- Contact ---------- */
.mail{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,4.4vw,56px);color:var(--paper);
  display:inline-block;position:relative;letter-spacing:-.01em;
  transition:color .35s ease;
}
.mail::after{content:"";position:absolute;left:0;bottom:.05em;height:1px;width:100%;
  background:var(--line-2);transition:background .35s ease;}
.mail:hover{color:var(--amber);}
.mail:hover::after{background:var(--amber);}

/* ---------- Footer ---------- */
.foot{padding:clamp(50px,7vw,82px) 0 46px;border-top:1px solid var(--line);}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;}
.foot-cols{display:flex;gap:clamp(40px,7vw,96px);flex-wrap:wrap;}
.foot-col h4{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);font-weight:500;margin:0 0 16px;}
.foot-col a,.foot-col p{font-size:14.5px;color:var(--paper-dim);font-weight:300;margin:0 0 9px;display:block;transition:color .3s ease;}
.foot-col a:hover{color:var(--amber);}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(44px,6vw,72px);padding-top:26px;border-top:1px solid var(--line);}
.foot-base p{margin:0;}

/* utility */
.stack-s{display:flex;flex-direction:column;gap:14px;}
.row-c{display:flex;align-items:center;}
.wrap-btns{display:flex;gap:14px;flex-wrap:wrap;}
.maxw-30{max-width:30ch;}
.center{text-align:center;}
.mt-s{margin-top:18px;}.mt-m{margin-top:30px;}.mt-l{margin-top:48px;}