/* Pyxaris — shared styles.
   One stylesheet for every page. No build step, no dependencies. */

:root{
  --bg:#04060a;
  --ink:#e9e7e2;
  --muted:#7d8794;
  --accent:#8fb4c9;
  --rule:rgba(233,231,226,.10);
  --pad:clamp(22px, 5vw, 56px);
  --measure:64ch;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

/* ---------- backdrop ---------- */

#sky{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

.veil{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 108%, rgba(143,180,201,.12) 0%, rgba(143,180,201,0) 62%),
    radial-gradient(88% 68% at 50% 42%, rgba(4,6,10,0) 42%, rgba(4,6,10,.84) 100%);
}

/* Interior pages scroll, so the fixed backdrop needs a floor of solid colour
   underneath the content or the text rides over bare canvas. */
.page{
  position:relative;
  z-index:2;
}

/* ---------- header + navigation ---------- */

.site-header{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,4vw,48px);
  padding:var(--pad);
  flex-wrap:wrap;
}

.wordmark{
  font-size:15px;
  font-weight:300;
  letter-spacing:.28em;
  text-indent:.28em;
  color:var(--ink);
  border:none;
  white-space:nowrap;
}
.wordmark .x{color:var(--accent)}
.wordmark:hover{color:var(--ink)}
.wordmark:hover .x{color:var(--ink)}

.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.6vw,34px);
  flex-wrap:wrap;
}

.site-nav a{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  border:none;
  padding:4px 0;
  position:relative;
}

.site-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
}

.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{transform:scaleX(1)}

.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]::after{
  transform:scaleX(1);
  background:var(--rule);
}

/* ---------- home hero ---------- */

.hero{
  min-height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:clamp(20px,3.4vh,34px);
  padding:0 var(--pad) clamp(40px,8vh,90px);
}

.mark{
  font-size:clamp(38px, 11.5vw, 132px);
  font-weight:300;
  letter-spacing:.20em;
  text-indent:.20em;
  line-height:1;
  white-space:nowrap;
}
.mark .x{color:var(--accent)}

.lede{
  font-size:clamp(14px, 1.9vw, 19px);
  font-weight:300;
  color:rgba(233,231,226,.80);
  max-width:34ch;
  letter-spacing:.015em;
  text-wrap:balance;
}

.sub{
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--muted);
}

.rule{
  width:min(320px, 46vw);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--rule) 18%, var(--rule) 82%, transparent);
}

.scroll-hint{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(125,135,148,.7);
  border:none;
  margin-top:clamp(8px,2vh,20px);
}
.scroll-hint:hover{color:var(--accent)}

/* ---------- content ---------- */

.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--pad);
}

.section{
  padding:clamp(56px,11vh,120px) 0;
  border-top:1px solid var(--rule);
}
.section:first-of-type{border-top:none}

.eyebrow{
  font-size:11px;
  font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;
}

h1{
  font-size:clamp(29px, 5vw, 50px);
  font-weight:300;
  line-height:1.16;
  letter-spacing:.004em;
  text-wrap:balance;
  margin-bottom:clamp(22px,3.6vh,34px);
}

h2{
  font-size:clamp(20px, 2.7vw, 27px);
  font-weight:300;
  line-height:1.28;
  text-wrap:balance;
  margin-bottom:18px;
}

h3{
  font-size:11px;
  font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--accent);
  margin:clamp(34px,5vh,52px) 0 16px;
}

p{
  color:rgba(233,231,226,.78);
  font-weight:300;
  margin-bottom:18px;
  text-wrap:pretty;
  max-width:62ch;
}

p.lead{
  font-size:clamp(17px,2.1vw,21px);
  color:rgba(233,231,226,.90);
  line-height:1.55;
}

p:last-child{margin-bottom:0}

strong{color:var(--ink);font-weight:400}

em{font-style:normal;color:var(--accent)}

ul{list-style:none;max-width:62ch;margin-bottom:18px}

li{
  color:rgba(233,231,226,.78);
  font-weight:300;
  padding-left:22px;
  position:relative;
  margin-bottom:12px;
}

li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
}

/* two-column feature grid, used on the home page */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(28px,4vw,54px);
  margin-top:8px;
}
.grid p{margin-bottom:0}
.grid h3{margin-top:0}

/* a pulled-out statement */
.statement{
  font-size:clamp(19px,2.6vw,26px);
  font-weight:300;
  line-height:1.4;
  color:var(--ink);
  max-width:30ch;
  text-wrap:balance;
  border-left:1px solid rgba(143,180,201,.4);
  padding-left:clamp(18px,2.6vw,30px);
  margin:clamp(30px,5vh,46px) 0;
}

/* what we do not discuss / status notes */
.note{
  border:1px solid var(--rule);
  padding:clamp(20px,3vw,28px);
  margin:clamp(30px,5vh,46px) 0;
  max-width:62ch;
}
.note p{margin-bottom:0;color:rgba(233,231,226,.72);font-size:15px}
.note p + p{margin-top:14px}

/* founder blocks */
.person{
  padding-top:clamp(30px,5vh,44px);
  margin-top:clamp(30px,5vh,44px);
  border-top:1px solid var(--rule);
}
.person:first-of-type{border-top:none;margin-top:0;padding-top:0}

.person .name{
  font-size:clamp(19px,2.4vw,23px);
  font-weight:300;
  color:var(--ink);
  margin-bottom:4px;
}

.person .role{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:20px;
}

/* next-page links */
.next{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(16px,3vw,32px);
  margin-top:clamp(40px,6vh,64px);
  padding-top:clamp(28px,4vh,40px);
  border-top:1px solid var(--rule);
}
.next a{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  border:none;
}
.next a:hover{color:var(--accent)}

/* ---------- links ---------- */

a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(233,231,226,.18);
  padding-bottom:1px;
  transition:color .25s ease, border-color .25s ease;
}
a:hover{color:var(--accent);border-color:rgba(143,180,201,.55)}
a:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:2px}

.skip{position:absolute;left:-9999px;z-index:20}
.skip:focus{
  left:var(--pad);
  top:var(--pad);
  background:var(--bg);
  padding:10px 14px;
  border:1px solid var(--accent);
}

/* ---------- footer ---------- */

.site-footer{
  position:relative;
  z-index:2;
  border-top:1px solid var(--rule);
  margin-top:clamp(60px,10vh,120px);
}

.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding-top:32px;
  padding-bottom:40px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  max-width:none;
}

.site-footer a{border:none}
.site-footer a:hover{color:var(--accent)}

.foot-links{display:flex;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap}

/* ---------- responsive ---------- */

@media (max-width:640px){
  .site-header{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .site-nav{gap:16px}
  .site-nav a{font-size:10px;letter-spacing:.14em}
  .hero{min-height:calc(100vh - 170px)}
  .site-footer .wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    font-size:10px;
  }
  .statement{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}