/* ==========================================================================
   enwakenment.enwaken.com
   Enwaken house system — night sky, icy blue, Newsreader + Archivo + Plex Mono.

   PALETTE SOURCE OF TRUTH: enwaken.com — the `@theme` block in app/globals.css
   of THIS repo (enwaken-Inc/enwaken-web), whose own source is
   reference/enwaken-home.html. The first block below is a COPY of those
   tokens, names kept identical (minus Tailwind's `color-` prefix) so the two
   can be diffed by eye; the second maps this site's own names onto them.
   Colours with no token are literals taken from enwaken.com's stylesheet and
   say where they came from. Change enwaken.com's palette first, then mirror
   it here.

   The FONTS are enwaken.com's too (app/layout.tsx loads them there; here each
   page's <head> loads them from Google Fonts, since a static page can't use
   next/font). A typeface or weight change on enwaken.com must be mirrored in
   those four <link> tags as well as below.
   ========================================================================== */

:root{
  /* --- enwaken.com tokens (app/globals.css @theme) --- */
  --night:#0a1929;
  --night-lift:#0d2337;
  --night-deep:#061220;
  --snow:#eef5fb;
  --ice:#a6c6de;
  --ice-dim:#6e90ac;
  --polaris:#e4f1ff;
  --accent:#a8cde8;
  --enwakening:#e8c67e;       /* the Enwakening part's colour (.tone-enwakening) */
  --line:rgba(166,198,222,.14);
  --line-soft:rgba(166,198,222,.08);
  --glow:31,74,112;           /* the hero's sky wash, rgba(31,74,112,…), as RGB */
  --halo:150,196,232;         /* the star's halo, rgba(150,196,232,…), as RGB */

  /* --- this site's names, mapped onto them --- */
  --sky:var(--night);
  --edge:var(--line);
  --hair:var(--line-soft);
  --text:#c6dcee;             /* enwaken.com's .door.quiet h3 — between snow and ice */
  --text-dim:var(--ice);      /* enwaken.com's body copy colour */
  --text-mute:var(--ice-dim);
  /* This site is the Enwakening part, so its accent is that part's gold, not
     enwaken.com's default ice blue (the owner, 2026-10-02). The name is older. */
  --icy:var(--enwakening);
  --bright:var(--snow);
  --fade:#b9d6ec;             /* enwaken.com's headline fade (.hero h1 .fade) */

  /* enwaken.com's three faces, in its roles: Newsreader for headlines (light),
     Archivo for body copy, IBM Plex Mono for small uppercase labels. Stacks
     copied from enwaken.com's @theme --font-*. */
  --display:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --measure:38rem;
  --prose:34rem;
  --pad:clamp(1.5rem,6vw,3rem);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;}
body{
  margin:0;
  background:var(--sky);
  color:var(--text-dim);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

/* ---------- polar sky ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.glow{
  /* Kept at 100% width on purpose: a viewport-wider box overflows the root,
     and overflow on <html> propagates to the viewport instead of clipping. */
  position:absolute;top:-14vh;left:0;right:0;
  width:100%;height:min(112vw,1150px);
  z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 62% 40%,
    rgba(var(--glow),.55) 0%,
    rgba(var(--glow),.24) 34%,
    rgba(10,25,41,0) 78%);
}
.star{
  position:absolute;top:15vh;left:71%;
  width:190px;height:190px;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  background:radial-gradient(circle,
    rgba(var(--halo),.30) 0%,
    rgba(90,150,200,.14) 34%,   /* the star's outer halo on enwaken.com */
    rgba(10,25,41,0) 68%);
}
.star::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:18px;height:18px;background:var(--polaris);
  clip-path:polygon(50% 0%,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0% 50%,43% 43%);
}
/* sub-pages keep the sky but give the star back to the home page */
body.page-inner .glow{opacity:.55;}
body.page-inner .star{top:10vh;left:78%;width:130px;height:130px;opacity:.65;}
body.page-inner .star::after{width:12px;height:12px;}

/* ---------- shell ---------- */
.page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;}
.col{
  position:relative;z-index:1;width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--pad);
  text-align:center;
}
.col--head{max-width:74rem;}
.col--hero{max-width:62rem;}
.col--prose{max-width:46rem;text-align:left;}

/* ---------- masthead ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem 2rem;flex-wrap:wrap;
  padding-top:clamp(1.75rem,5vw,2.75rem);
  text-align:left;
}
.wordmark{
  font-family:var(--body);font-weight:600;
  font-size:1.0625rem;letter-spacing:.24em;
  color:var(--snow);text-decoration:none;
}
.wordmark:hover{color:#fff;}
.nav{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:baseline;}
.nav a{
  font-family:var(--body);font-weight:400;font-size:.9375rem;
  color:var(--text-dim);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--bright);border-bottom-color:var(--edge);}
.nav a[aria-current="page"]{color:var(--bright);border-bottom-color:var(--icy);}
.site{
  font-family:var(--mono);font-weight:400;font-size:.8125rem;
  letter-spacing:.02em;color:var(--text-mute);
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(7rem,25vw,14rem);}
.hero--inner{padding-top:clamp(4rem,12vw,7.5rem);}
.kicker{
  font-family:var(--mono);font-weight:500;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.24em;
  color:var(--icy);max-width:none;margin:0 auto 1.75rem;
}
h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.5rem,9vw,5.75rem);
  line-height:1.02;letter-spacing:-.021em;
  overflow-wrap:break-word;margin:0;
  color:#FFFFFF;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 38%,var(--fade) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-wrap:balance;
}
h1.h1--inner{font-size:clamp(2.25rem,6.5vw,3.9rem);line-height:1.1;}
.lede{
  font-family:var(--body);font-weight:400;
  font-size:clamp(1.0625rem,2.3vw,1.3125rem);
  line-height:1.62;color:var(--text);
  max-width:31rem;margin:1.9rem auto 0;
  text-wrap:pretty;
}
p{margin:1.35rem auto 0;max-width:31rem;color:var(--text-dim);}

/* ---------- long-form prose ---------- */
.prose{
  margin-top:clamp(3.5rem,9vw,5.5rem);
  max-width:var(--prose);
  text-align:left;
}
.prose p{max-width:none;margin:0 0 1.5rem;}
.prose p:last-child{margin-bottom:0;}
.prose h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.4rem,3.6vw,1.75rem);
  line-height:1.2;letter-spacing:-.015em;
  color:var(--bright);
  margin:3.5rem 0 1.25rem;
}
.prose h2:first-child{margin-top:0;}
.prose strong{color:var(--text);font-weight:500;}
.prose em{color:var(--text);}
.prose a{color:var(--icy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:#c3ddf0;}  /* enwaken.com's .cta:hover */
.prose ul{margin:0 0 1.5rem;padding-left:1.15rem;}
.prose li{margin-bottom:.6rem;}
.prose li::marker{color:var(--text-mute);}

.pull{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,3.4vw,1.6rem);
  line-height:1.32;letter-spacing:-.018em;
  color:var(--bright);
  margin:3rem 0;padding-left:1.4rem;
  border-left:2px solid var(--icy);
  max-width:none;
}

.aside{
  margin:2.75rem 0;padding:1.5rem 1.65rem;
  border:1px solid var(--hair);border-radius:4px;
  background:rgba(6,18,32,.5);  /* --night-deep */
}
.aside p{margin:0;font-size:1rem;}
.aside p + p{margin-top:.9rem;}
.aside .label{display:block;margin-bottom:.7rem;}

/* ---------- where to get it ---------- */
.getit{
  margin:3.5rem 0 0;padding-top:1.75rem;
  border-top:1px solid var(--hair);
}
.getit h2{
  font-family:var(--display);font-weight:500;font-size:1.125rem;
  letter-spacing:0;color:var(--bright);margin:0 0 .85rem;
}
.getit p{margin:0 0 1.25rem;max-width:none;font-size:1rem;}
.getit a.go{
  display:inline-block;
  font-family:var(--body);font-weight:500;font-size:.9375rem;
  color:var(--icy);text-decoration:none;
  border-bottom:1px solid var(--edge);padding-bottom:3px;
}
.getit a.go:hover{color:var(--bright);border-bottom-color:var(--icy);}
.getit .disclosure{font-size:.875rem;color:var(--text-mute);margin-top:1.5rem;}

/* ---------- testimonials ---------- */
.voices{margin-top:clamp(3.5rem,9vw,5rem);}
.voices > h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.4rem,3.6vw,1.75rem);
  letter-spacing:-.015em;color:var(--bright);margin:0 0 .6rem;
}
.voices > p.note{margin:0 0 2.25rem;max-width:none;font-size:1rem;color:var(--text-mute);}
.voicegrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:2.25rem 2.5rem;
}
.voice{border-top:1px solid var(--hair);padding-top:1.15rem;}
.voice blockquote{
  margin:0;font-size:.9375rem;line-height:1.66;color:var(--text-dim);
}
.voice cite{
  display:block;margin-top:.9rem;font-style:normal;
  font-family:var(--body);font-weight:500;font-size:.8125rem;
  color:var(--text);
}
.voice .who{
  display:block;margin-top:.15rem;
  font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--text-mute);font-weight:400;
}

/* ---------- reading list (home) ---------- */
.readon{margin-top:clamp(4rem,11vw,6.5rem);text-align:left;}
.readon > .label{display:block;text-align:center;margin-bottom:2rem;}
.readon ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.readon li{border-top:1px solid var(--hair);}
.readon li:last-child{border-bottom:1px solid var(--hair);}
.readon a{
  display:block;padding:1.35rem 0;text-decoration:none;
}
.readon a:hover .rt{color:#fff;}
.readon .rt{
  display:block;font-family:var(--display);font-weight:500;
  font-size:1.125rem;letter-spacing:0;color:var(--bright);
}
.readon .rd{
  display:block;margin-top:.3rem;font-size:.9375rem;color:var(--text-dim);
}

/* ---------- the snowfield ---------- */
.horizon{position:relative;z-index:0;height:1px;margin-top:clamp(5.5rem,15vw,9rem);}
.snowfield{
  position:absolute;left:-30%;right:-30%;top:0;height:760px;
  border-top:1px solid var(--edge);
  border-radius:50% 50% 0 0 / 110px 110px 0 0;
  background:linear-gradient(180deg,
    rgba(var(--glow),.30) 0%,
    rgba(var(--glow),.14) 26%,
    rgba(10,25,41,0) 72%);
  pointer-events:none;
}
.tracks{position:absolute;left:0;right:0;top:58px;width:100%;height:150px;pointer-events:none;}

/* ---------- part three (home) ---------- */
.parts{margin-top:clamp(5rem,14vw,8rem);display:flex;flex-direction:column;gap:clamp(3rem,8vw,4.5rem);}
.numeral{
  display:block;font-family:var(--mono);font-weight:500;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--text-mute);
  margin-bottom:.9rem;
}
.part h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,4.2vw,1.9rem);
  line-height:1.16;letter-spacing:-.015em;margin:0;color:var(--bright);
}
.part p{margin-top:.85rem;}
.third{padding-top:clamp(4.5rem,12vw,7rem);}
.third .numeral{color:var(--icy);}
.third h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,6vw,3.1rem);
  line-height:1.14;letter-spacing:-.018em;margin:0;
  color:#FFFFFF;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 34%,var(--fade) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-wrap:balance;
}
.third p{margin-top:1.5rem;}
.close{margin-top:clamp(4.5rem,12vw,7rem);}
.close .pullc{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,3.4vw,1.5rem);
  line-height:1.35;letter-spacing:-.018em;
  color:var(--bright);margin:0 auto;max-width:31rem;
}

/* ---------- footer ---------- */
footer{
  margin-top:auto;
  padding-top:clamp(5rem,13vw,8rem);
  padding-bottom:clamp(2.5rem,7vw,4rem);
}
.colophon{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--hair);padding-top:1.25rem;text-align:left;
}
.label{
  font-family:var(--mono);font-weight:500;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--text-mute);
}

/* "An Enwaken project" in the footer is the way back to enwaken.com. */
.colophon a.label{text-decoration:none;}
.colophon a.label:hover{color:var(--text);}

a:focus-visible,
.wordmark:focus-visible{
  outline:2px solid var(--icy);
  outline-offset:3px;
  border-radius:2px;
}

@media (max-width:40rem){
  .masthead{gap:.9rem;}
  .nav{gap:1.1rem;}
}
@media (max-width:30rem){
  .masthead{flex-direction:column;align-items:flex-start;}
  .colophon{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}

/* the newsletter line slot (filled by enwaken.com/shared/nav.js) */
.enw-foot-slot{margin-top:1rem;text-align:left;}