/* ============================================================
   monopole.cloud — a meteorological field station for magnetism
   retro-futuristic · hero-dominant · humanist · analogous (cold)
   ============================================================ */

:root{
  /* analogous cold-blue arc + one warm phosphor accent */
  --ridge-basalt:#0E1B22;
  --glacier-blue:#16323D;
  --fjord-teal:#1F4A52;
  --instr-cyan:#3B7B83;
  --frost-cyan:#7FB7B0;
  --notebook-cream:#E8E3D2;
  --aged-paper:#C8C0A6;
  --phosphor-amber:#F2A65A;
  --rust-patina:#9C4A2E;
  --hairline:#3B4A52;
  --bolt-hi:#E2E6E9;
  --bolt-mid:#B7BFC4;
  --bolt-lo:#8A9298;

  --serif-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --serif-body:'Newsreader', Georgia, serif;
  --mono-instr:'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease-weather:cubic-bezier(.22,.61,.36,1);
}

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

html{scroll-behavior:smooth;}

body{
  font-family:var(--serif-body);
  background:var(--ridge-basalt);
  color:var(--notebook-cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------------- top rail (minimal nav) ---------------- */
.rail{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background:linear-gradient(to bottom, rgba(14,27,34,.78), rgba(14,27,34,0));
  backdrop-filter:blur(2px);
}
.wordmark{
  font-family:var(--serif-display);
  font-weight:500; font-size:1.18rem; letter-spacing:-.01em;
  color:var(--frost-cyan); text-decoration:none;
  font-optical-sizing:auto;
}
.wordmark .dot{ color:var(--phosphor-amber); filter:drop-shadow(0 0 6px rgba(242,166,90,.65)); }

.rail-nav{ display:flex; gap:clamp(18px,3vw,40px); }
.rail-nav a{
  font-family:var(--mono-instr);
  font-size:.74rem; font-variant:small-caps; letter-spacing:.12em;
  color:var(--frost-cyan); text-decoration:none; position:relative;
  padding:4px 0; opacity:.82;
  transition:opacity .35s var(--ease-weather);
}
.rail-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--phosphor-amber); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease-weather);
  box-shadow:0 0 6px rgba(242,166,90,.6);
}
.rail-nav a:hover{ opacity:1; }
.rail-nav a:hover::after{ transform:scaleX(1); }
.rail-nav a.is-active::after{ transform:scaleX(1); }

.rail-compass{ display:flex; align-items:center; }
.rail-compass .needle{ transform-origin:20px 20px; }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(20px,6vw,90px);
  overflow:hidden;
  background:linear-gradient(to bottom, var(--ridge-basalt) 0%, var(--glacier-blue) 46%, var(--fjord-teal) 100%);
}
.hero-sky{ position:absolute; inset:0; z-index:0; }
.hero-svg{ width:100%; height:100%; display:block; }

.cloudbank{ will-change:transform; }
.cloud-layer{ will-change:transform; }
.cloud-a{ animation:driftA 320s ease-in-out infinite alternate; }
.cloud-b{ animation:driftB 380s ease-in-out infinite alternate; }
.cloud-c{ animation:driftA 360s ease-in-out infinite alternate; }
.cloud-d{ animation:driftB 420s ease-in-out infinite alternate; }
@keyframes driftA{ from{transform:translateX(-60px);} to{transform:translateX(80px);} }
@keyframes driftB{ from{transform:translateX(70px);} to{transform:translateX(-90px);} }

.hero-text{ position:relative; z-index:2; }
.hero-word{
  font-family:var(--serif-display);
  font-weight:400; font-optical-sizing:auto;
  font-size:clamp(3.5rem,14vw,11rem);
  line-height:.92; letter-spacing:-.045em;
  color:var(--notebook-cream);
  text-shadow:0 2px 30px rgba(14,27,34,.4);
}
.hero-dot{
  color:var(--phosphor-amber);
  display:inline-block;
  filter:drop-shadow(0 0 14px rgba(242,166,90,.75));
  animation:phosphorBreathe 3s ease-in-out infinite;
}
@keyframes phosphorBreathe{ 0%,100%{opacity:.7;} 50%{opacity:1;} }

.hero-sub{
  font-family:var(--mono-instr);
  font-size:clamp(.7rem,1.5vw,.86rem);
  font-variant:small-caps; letter-spacing:.12em;
  color:var(--phosphor-amber);
  margin-top:clamp(20px,3vw,34px);
  max-width:54ch; line-height:1.7;
  filter:drop-shadow(0 0 5px rgba(242,166,90,.35));
}
.hero-foot{
  position:absolute; left:clamp(20px,6vw,90px); bottom:26px; z-index:2;
  font-family:var(--mono-instr); font-size:.66rem;
  font-variant:small-caps; letter-spacing:.14em;
  color:var(--frost-cyan); opacity:.6;
}

/* ---------------- BANDS (vertical instrument log) ---------------- */
.band{
  position:relative;
  padding:clamp(64px,9vw,128px) clamp(20px,6vw,90px);
  overflow:hidden;
}
.band--cream{
  background-color:var(--notebook-cream);
  color:var(--ridge-basalt);
  /* 3% strip-chart paper: fine vertical lines, heavier every 5th */
  background-image:
    repeating-linear-gradient(90deg, rgba(59,74,82,.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(59,74,82,.07) 0 1px, transparent 1px 120px);
}
.band--teal{
  background-color:var(--fjord-teal);
  color:var(--notebook-cream);
  background-image:
    radial-gradient(rgba(127,183,176,.06) 1px, transparent 1px);
  background-size:7px 7px;
}
.band--basalt{
  background-color:var(--ridge-basalt);
  color:var(--notebook-cream);
}

.band-inner{
  position:relative; z-index:3;
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:3fr 9fr; gap:0;
}

/* the continuous "axis" hairline down the seam */
.band-inner::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(25% - .5px); width:1px;
  background:var(--hairline); opacity:.55; z-index:1;
}
.band--teal .band-inner::before, .band--basalt .band-inner::before{
  background:var(--frost-cyan); opacity:.28;
}

/* ---- notebook column ---- */
.notebook{
  padding:6px clamp(14px,2.4vw,32px) 0 0;
  display:flex; flex-direction:column; gap:14px;
  align-items:flex-start;
}
.nb-date, .nb-label{
  font-family:var(--mono-instr);
  font-size:.66rem; font-variant:small-caps; letter-spacing:.12em;
  color:var(--aged-paper);
  line-height:1.6;
}
.band--cream .nb-date{ color:var(--rust-patina); opacity:.85; }
.band--cream .nb-label{ color:var(--instr-cyan); }
.notebook--dark .nb-date{ color:var(--frost-cyan); opacity:.7; }
.notebook--dark .nb-label{ color:var(--frost-cyan); opacity:.85; }
.nb-squiggle{ width:60px; height:200px; margin-top:10px; opacity:.7; }
.band--cream .nb-squiggle path{ stroke:var(--instr-cyan); }

/* ---- plate ---- */
.plate{
  padding:0 0 0 clamp(20px,4vw,56px);
  transition:transform .42s var(--ease-weather), box-shadow .42s var(--ease-weather);
  border-radius:2px;
}
.plate.is-hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -12px rgba(63,123,131,.35);
}
/* deliberate out-of-register lag, alternating */
.band[data-reading="01"] .plate{ transform:translateX(8px); }
.band[data-reading="02"] .plate{ transform:translateX(-12px); }
.band[data-reading="03"] .plate{ transform:translateX(6px); }
.band[data-reading="04"] .plate{ transform:translateX(-9px); }
.band[data-reading="05"] .plate{ transform:translateX(10px); }
.band[data-reading="01"] .plate.is-hover{ transform:translate(8px,-6px); }
.band[data-reading="02"] .plate.is-hover{ transform:translate(-12px,-6px); }
.band[data-reading="03"] .plate.is-hover{ transform:translate(6px,-6px); }
.band[data-reading="04"] .plate.is-hover{ transform:translate(-9px,-6px); }
.band[data-reading="05"] .plate.is-hover{ transform:translate(10px,-6px); }

.band-title{
  font-family:var(--serif-display);
  font-weight:500; font-optical-sizing:auto;
  font-size:clamp(1.8rem,4vw,3.2rem);
  line-height:1.08; letter-spacing:-.02em;
  margin-bottom:clamp(22px,3vw,38px);
}
.band--cream .band-title{ color:var(--ridge-basalt); }
.band--teal .band-title, .band--basalt .band-title{ color:var(--notebook-cream); }

.band-body{
  font-family:var(--serif-body);
  font-size:1.125rem; line-height:1.7; font-weight:400;
  max-width:62ch;
  color:inherit;
}
.band-body em{ font-style:italic; color:var(--rust-patina); }
.band--teal .band-body em, .band--basalt .band-body em{ color:var(--phosphor-amber); }
.band-body--light{ color:var(--notebook-cream); }

.closing-line{
  font-family:var(--serif-body);
  font-style:italic;
  font-size:1.05rem; line-height:1.7;
  margin-top:26px; max-width:62ch;
  color:var(--frost-cyan); opacity:.85;
}

/* ---- diagram plates ---- */
.diagram{
  margin-bottom:clamp(28px,4vw,46px);
  max-width:560px;
}
.diag-svg{
  width:100%; height:auto; display:block;
  overflow:visible;
}
.diag-svg .amber-node{
  transition:filter .42s var(--ease-weather);
}
.plate.is-hover .amber-node{
  filter:url(#phosphor) drop-shadow(0 0 9px rgba(242,166,90,.95));
}
.diag-cap{
  font-family:var(--mono-instr);
  font-size:9px; font-variant:small-caps; letter-spacing:.1em;
  fill:var(--instr-cyan);
}
.band--cream .diag-cap{ fill:var(--rust-patina); }
.diag-cap--light{ fill:var(--frost-cyan); }
.diag-eq{
  font-family:var(--mono-instr);
  font-size:11px; letter-spacing:.02em;
  fill:var(--instr-cyan);
}
.band--cream .diag-eq{ fill:var(--ridge-basalt); opacity:.78; }

/* hover-reveal labels on the diagrams */
.hover-label{
  font-family:var(--mono-instr);
  font-size:8.5px; font-variant:small-caps; letter-spacing:.1em;
  fill:var(--phosphor-amber);
  opacity:0; transition:opacity .42s var(--ease-weather);
}
.diagram.is-hover .hover-label{ opacity:.92; }
.maxwell{ }

/* ---- anodized bolt ---- */
.bolt{
  position:absolute; top:14px; right:14px; z-index:4;
  width:12px; height:12px;
}
.bolt svg{ width:100%; height:100%; display:block;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(242,166,90,.5);
}

/* ---- basalt-band returning clouds ---- */
.band-bg-clouds{
  position:absolute; top:0; left:0; right:0; height:60%;
  z-index:1; opacity:.85; overflow:hidden;
}
.band-bg-clouds svg{ width:100%; height:100%; }
.plate--basalt{ }

/* ---------------- FOOTER (barograph scale) ---------------- */
.barometer{
  background:var(--ridge-basalt);
  padding:clamp(36px,5vw,60px) clamp(20px,6vw,90px) clamp(28px,4vw,44px);
  border-top:1px solid var(--hairline);
}
.baro-scale{
  position:relative; height:28px; margin-bottom:18px;
}
.baro-line{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--frost-cyan); opacity:.4;
}
.baro-tick{
  position:absolute; bottom:0; width:1px; height:8px;
  background:var(--frost-cyan); opacity:.4;
}
.baro-tick--major{ height:16px; opacity:.6; }
.baro-tick--major::after{
  content:""; position:absolute; left:-2px; bottom:-1px;
  width:5px; height:1px; background:var(--phosphor-amber);
  box-shadow:0 0 5px rgba(242,166,90,.6);
}
.baro-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  font-family:var(--mono-instr);
  font-size:.66rem; font-variant:small-caps; letter-spacing:.12em;
  color:var(--frost-cyan); opacity:.7;
}
.baro-copy{ color:var(--aged-paper); opacity:.7; text-align:center; flex:1 1 auto; }

/* ---------------- scroll reveal ----------------
   Bands fade up 24px when ~20% in view; the trigger is wired in
   script.js with an IntersectionObserver, staggered child-by-child. */
[data-anim]{ }
[data-anim] .notebook, [data-anim] .plate{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-weather), transform .7s var(--ease-weather);
}
/* keep the out-of-register x-offsets while hidden */
[data-anim] .band[data-reading] .plate{}
.band[data-reading="01"][data-anim] .plate{ transform:translate(8px,24px); }
.band[data-reading="02"][data-anim] .plate{ transform:translate(-12px,24px); }
.band[data-reading="03"][data-anim] .plate{ transform:translate(6px,24px); }
.band[data-reading="04"][data-anim] .plate{ transform:translate(-9px,24px); }
.band[data-reading="05"][data-anim] .plate{ transform:translate(10px,24px); }

.band.is-revealed .notebook{ opacity:1; transform:translateY(0); transition-delay:.04s; }
.band[data-reading="01"].is-revealed .plate{ opacity:1; transform:translateX(8px); transition-delay:.12s; }
.band[data-reading="02"].is-revealed .plate{ opacity:1; transform:translateX(-12px); transition-delay:.12s; }
.band[data-reading="03"].is-revealed .plate{ opacity:1; transform:translateX(6px); transition-delay:.12s; }
.band[data-reading="04"].is-revealed .plate{ opacity:1; transform:translateX(-9px); transition-delay:.12s; }
.band[data-reading="05"].is-revealed .plate{ opacity:1; transform:translateX(10px); transition-delay:.12s; }
/* re-apply hover transforms after reveal */
.band[data-reading="01"].is-revealed .plate.is-hover{ transform:translate(8px,-6px); }
.band[data-reading="02"].is-revealed .plate.is-hover{ transform:translate(-12px,-6px); }
.band[data-reading="03"].is-revealed .plate.is-hover{ transform:translate(6px,-6px); }
.band[data-reading="04"].is-revealed .plate.is-hover{ transform:translate(-9px,-6px); }
.band[data-reading="05"].is-revealed .plate.is-hover{ transform:translate(10px,-6px); }

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .rail-nav{ gap:16px; }
  .band-inner{ grid-template-columns:1fr; gap:32px; }
  .band-inner::before{ display:none; }
  .notebook{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px; padding-right:0; }
  .nb-squiggle{ width:42px; height:120px; margin-top:0; }
  .plate, .plate.is-hover,
  .band[data-reading] .plate,
  .band[data-reading].is-revealed .plate,
  .band[data-reading].is-revealed .plate.is-hover{
    transform:translateX(0) !important; padding-left:0;
  }
  .band[data-reading][data-anim] .plate{ transform:translateY(24px) !important; }
  .band[data-reading].is-revealed .plate{ transform:translateY(0) !important; }
  .hero-foot{ font-size:.58rem; max-width:70vw; }
}

@media (max-width:520px){
  .rail{ padding:14px 18px; flex-wrap:wrap; gap:8px; }
  .rail-compass{ display:none; }
  .band-body{ font-size:1.05rem; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  [data-anim] .notebook, [data-anim] .plate{ opacity:1 !important; }
  .band[data-reading="01"] .plate{ transform:translateX(8px); }
  .band[data-reading="02"] .plate{ transform:translateX(-12px); }
  .band[data-reading="03"] .plate{ transform:translateX(6px); }
  .band[data-reading="04"] .plate{ transform:translateX(-9px); }
  .band[data-reading="05"] .plate{ transform:translateX(10px); }
}