/* ================================================================
   Platinum Ventures — shared styles
   Pages: index.html · thesis.html · lab.html · contact.html
   ================================================================ */
:root{
  --bg:#070d1f;
  --text:#f5f8fe;
  --body:rgba(220,231,251,.72);
  --line:#7fa3f0;
  --line45:rgba(127,163,240,.45);
  --hairline:rgba(127,163,240,.16);
  --overlaybg:#0c1631;
  --accent:#2b62e8;
}
*{margin:0; box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg); overflow-x:hidden;
     font-family:"Inter",system-ui,sans-serif; color:var(--text);
     -webkit-font-smoothing:antialiased}

/* content pages get a faint glow up top so they aren't flat black */
body.sub{background-image:radial-gradient(640px 420px at 82% -12%,rgba(127,163,240,.09),transparent)}

/* ---------------- chrome ---------------- */
header{position:fixed; top:0; left:0; right:0; z-index:10; display:flex;
       justify-content:space-between; align-items:center; padding:22px 28px;
       background:linear-gradient(to bottom,rgba(7,13,31,.85),rgba(7,13,31,0))}
.wordmark{font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:14px;
          letter-spacing:.3em; text-transform:uppercase; color:var(--text);
          text-decoration:none; white-space:nowrap}
.nav-links{display:flex; align-items:center; gap:12px; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
           font-size:10.5px; letter-spacing:.24em; text-transform:uppercase}
.nav-links a{color:var(--line); text-decoration:none; transition:color .2s}
.nav-links a:hover, .nav-links a.active{color:var(--text)}
.nav-links .sep{color:var(--line45); user-select:none}
.menu-btn{display:none; background:none; border:0; padding:4px 2px;
          font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:11px;
          letter-spacing:.24em; text-transform:uppercase; color:var(--line); cursor:pointer}
.menu-btn:hover{color:var(--text)}
a:focus-visible, button:focus-visible{outline:1px solid var(--line); outline-offset:3px}

.overlay{position:fixed; inset:0; z-index:9; background:var(--overlaybg); display:flex;
         flex-direction:column; align-items:center; justify-content:center; gap:38px}
.overlay[hidden]{display:none}
.overlay a{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:13px;
           letter-spacing:.3em; text-transform:uppercase; color:var(--line); text-decoration:none}
.overlay a:hover{color:var(--text)}

footer{position:relative; z-index:1; display:flex; justify-content:space-between;
       align-items:baseline; gap:14px; flex-wrap:wrap; padding:20px 28px;
       border-top:1px solid var(--hairline);
       font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10px;
       letter-spacing:.2em; text-transform:uppercase; color:var(--line)}
footer a{color:inherit; text-decoration:none}
footer a:hover{color:var(--text)}

/* ---------------- home (sphere hero) ---------------- */
.runway{height:420vh}
#field{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none}

/* ambient canvas on content pages */
#amb{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none}
main{position:relative; z-index:1}
.hero{min-height:100vh; display:flex; align-items:flex-end; padding:0 28px 15vh}
.hero-inner{max-width:640px}
.kicker{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10px;
        letter-spacing:.38em; text-transform:uppercase; color:var(--accent);
        margin-bottom:16px}
.hero h1{font-family:"Fraunces",Georgia,serif; font-weight:300;
         font-size:clamp(28px,4vw,44px); line-height:1.18; letter-spacing:.01em;
         color:var(--text); margin:0; text-shadow:0 0 24px rgba(7,13,31,.55)}
.hero p{font-size:14px; color:var(--line); margin:14px 0 0; line-height:1.6;
        text-shadow:0 0 18px rgba(7,13,31,.55)}
@media (prefers-reduced-motion:no-preference){
  .hero-inner{opacity:0; transform:translateY(12px); animation:rise .6s ease-out .1s forwards}
  @keyframes rise{to{opacity:1; transform:none}}
}

/* ---------------- homepage content sections ---------------- */
.scrollgap{height:55vh}
.home-section{position:relative; z-index:1; max-width:1020px; margin:0 auto;
              padding:0 28px}
.home-section h2{font-family:"Fraunces",Georgia,serif; font-weight:300;
                 font-size:clamp(24px,3.2vw,36px); line-height:1.2; color:var(--text);
                 margin-top:14px; text-shadow:0 0 20px rgba(7,13,31,.6)}
.home-section .lead{text-shadow:0 0 16px rgba(7,13,31,.6)}
.home-section .cards{margin-top:36px}
.home-section .card{background:rgba(7,13,31,.55); backdrop-filter:blur(6px)}
.cardlink{display:inline-block; margin-top:14px;
          font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10px;
          letter-spacing:.2em; text-transform:uppercase; color:var(--line);
          text-decoration:none; transition:color .2s}
.cardlink:hover{color:var(--text)}
.chain{margin-top:28px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px;
       font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10.5px;
       letter-spacing:.18em; text-transform:uppercase; color:var(--line); line-height:2}
.chain .arrow{color:var(--line45)}

/* ---------------- content pages ---------------- */
.page{position:relative; z-index:1; max-width:760px; margin:0 auto;
      padding:160px 28px 100px}
.page.wide{max-width:1020px}
.page h1{font-family:"Fraunces",Georgia,serif; font-weight:300;
         font-size:clamp(30px,4.5vw,48px); line-height:1.15; letter-spacing:.01em;
         color:var(--text)}
.lead{margin-top:20px; font-size:16px; line-height:1.8; color:var(--body); max-width:58ch}

.section{margin-top:64px}
.section h2{font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:22px;
            color:var(--text); margin-bottom:16px}
.section p{font-size:14.5px; line-height:1.9; color:var(--body); max-width:62ch;
           margin-bottom:16px}
.section p:last-child{margin-bottom:0}
hr.rule{height:1px; background:var(--hairline); border:0; margin:64px 0 0}

/* thesis — the stack-reading factors, a quiet ledger */
.factors{list-style:none; margin-top:24px; border-top:1px solid var(--hairline)}
.factors li{display:flex; gap:28px; padding:18px 0; align-items:baseline;
            border-bottom:1px solid var(--hairline)}
.factors .term{flex:0 0 158px; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
               font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
               color:var(--line)}
.factors .def{color:var(--body); font-size:14.5px; line-height:1.85; max-width:56ch}
@media (max-width:640px){
  .factors li{flex-direction:column; gap:7px}
  .factors .term{flex:none}
}

.taglist{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.taglist span{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10px;
              letter-spacing:.2em; text-transform:uppercase; color:var(--line);
              border:1px solid var(--hairline); padding:8px 14px; border-radius:999px}
.taglist.big{gap:12px}
.taglist.big span{font-size:12.5px; padding:13px 22px; letter-spacing:.22em;
                  color:var(--text); border-color:var(--line45)}

/* two-up feature cards: fill the row, carry more presence */
.cards.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards.two .card{padding:34px 36px}
.cards.two .card h3{font-size:23px; margin:14px 0 12px}
.cards.two .card p{font-size:14.5px; line-height:1.8}

/* the lab — project cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
       gap:18px; margin-top:48px}
.card{border:1px solid var(--hairline); border-radius:10px; padding:24px;
      background:rgba(127,163,240,.04); transition:border-color .2s}
.card:hover{border-color:var(--line45)}
.card .tag{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:9px;
           letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
.card h3{font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:19px;
         color:var(--text); margin:12px 0 8px}
.card p{font-size:13.5px; line-height:1.7; color:var(--body)}

/* contact */
.contact-email{display:inline-block; margin-top:36px; font-family:"Fraunces",Georgia,serif;
               font-weight:300; font-size:clamp(22px,3vw,34px); color:var(--text);
               text-decoration:none; border-bottom:1px solid var(--line45); padding-bottom:6px;
               transition:border-color .2s}
.contact-email:hover{border-color:var(--text)}
.contact-meta{margin-top:56px; display:flex; gap:64px; flex-wrap:wrap;
              font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:11px;
              letter-spacing:.18em; text-transform:uppercase; color:var(--line); line-height:2.3}
.contact-meta strong{display:block; color:var(--text); font-weight:400}
.contact-meta a{color:inherit; text-decoration:none; transition:color .2s}
.contact-meta a:hover{color:var(--text)}

@media (max-width:640px){
  header{padding:16px 20px}
  .nav-links{display:none}
  .menu-btn{display:block}
  .hero{padding:0 20px 13vh}
  footer{padding:18px 20px}
  .page{padding:130px 20px 80px}
  .contact-meta{gap:36px}
}