/* =========================================================
   monopole.one — pastoral observatory + sci-fi HUD
   palette: barn-dark #1C1408 · hayloft #2E2310 · harvest #E8B14C
            lamplight #F4D9A0 · burnt-rust #C4631E · field-green #7A8B3C
            worn-brass #6E5A2E
   type: Bebas Neue (bezel) · Cormorant Garamond (heart) · IBM Plex Mono (data)
   ========================================================= */

:root{
  --barn-dark:#1C1408;
  --hayloft:#2E2310;
  --harvest:#E8B14C;
  --lamplight:#F4D9A0;
  --burnt-rust:#C4631E;
  --field-green:#7A8B3C;
  --worn-brass:#6E5A2E;
  --hex-flat:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --ease-patient:cubic-bezier(.16,1,.3,1);
  --rail-w:clamp(56px,7vw,118px);
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--barn-dark);
  color:var(--lamplight);
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:1.55;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
  letter-spacing:.005em;
}

body::before{
  /* low-angle golden-hour wash from bottom-right */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 88% 96%, rgba(232,177,76,.16), transparent 60%),
    radial-gradient(90% 70% at 8% 4%, rgba(122,139,60,.07), transparent 55%),
    linear-gradient(180deg, rgba(28,20,8,0) 0%, rgba(28,20,8,.55) 100%);
}

/* ============ BOKEH BACKGROUND ============ */
.bokeh-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bokeh-layer{position:absolute;inset:-20%;will-change:transform;}
.bokeh-layer::before,.bokeh-layer::after{content:"";position:absolute;border-radius:50%;}

.bokeh-layer--far{
  filter:blur(78px);opacity:.09;
  background:
    radial-gradient(circle at 14% 22%, var(--harvest) 0 14%, transparent 38%),
    radial-gradient(circle at 78% 70%, var(--lamplight) 0 10%, transparent 34%),
    radial-gradient(circle at 52% 88%, var(--field-green) 0 9%, transparent 30%),
    radial-gradient(circle at 90% 14%, var(--harvest) 0 7%, transparent 26%);
  animation:bokehDriftFar 64s linear infinite alternate;
}
.bokeh-layer--mid{
  filter:blur(54px);opacity:.12;
  background:
    radial-gradient(circle at 30% 60%, var(--harvest) 0 9%, transparent 30%),
    radial-gradient(circle at 66% 26%, var(--lamplight) 0 7%, transparent 24%),
    radial-gradient(circle at 12% 84%, var(--burnt-rust) 0 5%, transparent 20%),
    radial-gradient(circle at 86% 78%, var(--harvest) 0 6%, transparent 22%);
  animation:bokehDriftMid 46s linear infinite alternate;
}
.bokeh-layer--near{
  filter:blur(40px);opacity:.10;
  background:
    radial-gradient(circle at 22% 40%, var(--lamplight) 0 5%, transparent 18%),
    radial-gradient(circle at 74% 58%, var(--harvest) 0 5%, transparent 18%),
    radial-gradient(circle at 48% 14%, var(--field-green) 0 4%, transparent 16%),
    radial-gradient(circle at 60% 92%, var(--harvest) 0 4%, transparent 15%);
  animation:bokehDriftNear 33s linear infinite alternate;
}
.bokeh-cursor{
  position:absolute;width:340px;height:340px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.7);left:-9999px;top:-9999px;
  background:radial-gradient(circle, rgba(244,217,160,.20), rgba(232,177,76,.06) 45%, transparent 70%);
  filter:blur(18px);opacity:0;transition:opacity .6s var(--ease-patient);
  mix-blend-mode:screen;
}
@keyframes bokehDriftFar{from{transform:translate3d(-2%,-1.5%,0) rotate(0);}to{transform:translate3d(3%,2.5%,0) rotate(4deg);}}
@keyframes bokehDriftMid{from{transform:translate3d(2%,1%,0) rotate(0);}to{transform:translate3d(-3%,-2%,0) rotate(-5deg);}}
@keyframes bokehDriftNear{from{transform:translate3d(-1%,2%,0) rotate(0);}to{transform:translate3d(2.5%,-1.5%,0) rotate(3deg);}}

/* ============ TRAILING FIELD LINE ============ */
.fieldline{
  position:fixed;left:50%;top:0;width:min(900px,86vw);height:140vh;
  transform:translateX(-46%);z-index:1;pointer-events:none;opacity:.0;
  transition:opacity 1.2s var(--ease-patient);
  filter:drop-shadow(0 0 6px rgba(196,99,30,.45));
}
.fieldline.is-on{opacity:.7;}
#fieldlinePath{stroke-dasharray:2600;stroke-dashoffset:2600;}

/* ============ HUD RAIL ============ */
.hud-rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:20;
  border-right:1px solid rgba(110,90,46,.5);
  background:linear-gradient(180deg, rgba(28,20,8,.86), rgba(46,35,16,.72));
  backdrop-filter:blur(2px);
  font-family:"IBM Plex Mono",monospace;color:var(--worn-brass);
  display:flex;flex-direction:column;align-items:center;
  padding:18px 6px;overflow:hidden;
  transition:opacity .8s var(--ease-patient);
}
.hud-rail__bracket{position:absolute;font-size:18px;color:var(--harvest);line-height:1;opacity:.8;}
.hud-rail__bracket--tl{top:6px;left:6px;}
.hud-rail__bracket--bl{bottom:6px;left:6px;}

.hud-rail__ticks{
  position:absolute;left:0;top:0;bottom:0;width:10px;
  background:repeating-linear-gradient(180deg, var(--worn-brass) 0 1px, transparent 1px 14px);
  opacity:.5;
}
.hud-rail__ticks::after{
  /* longer ticks every 5 */
  content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  background:repeating-linear-gradient(180deg, var(--harvest) 0 1.4px, transparent 1.4px 70px);
  opacity:.55;
}

.hud-rail__cross{
  position:absolute;width:40px;height:40px;left:50%;top:120px;
  transform:translate(-50%,-50%);color:var(--harvest);
  filter:drop-shadow(0 0 5px rgba(232,177,76,.6));
  transition:transform .9s var(--ease-patient);
}

.hud-rail__readout{
  margin-top:auto;margin-bottom:14px;width:100%;
  display:flex;flex-direction:column;gap:8px;
}
.hud-line{display:flex;flex-direction:column;gap:1px;font-size:8.5px;letter-spacing:.06em;}
.hud-key{color:var(--worn-brass);text-transform:uppercase;font-size:7px;letter-spacing:.16em;}
.hud-val{color:var(--harvest);font-size:9.5px;letter-spacing:.04em;text-shadow:0 0 6px rgba(232,177,76,.35);}
.hud-val.is-event{color:var(--burnt-rust);}

.hud-rail__wave{width:100%;margin-bottom:6px;text-align:center;}
.hud-rail__wave svg{width:100%;height:30px;display:block;opacity:.85;}
.hud-rail__wavelabel{font-size:6.5px;letter-spacing:.22em;color:var(--field-green);opacity:.7;}

@media (max-width:760px){
  .hud-rail__readout{display:none;}
  .hud-rail__wave{display:none;}
  .hud-rail__cross{top:80px;}
}

/* ============ LAYOUT SHELL ============ */
.instrument{
  position:relative;z-index:5;
  margin-left:var(--rail-w);
  padding:0 clamp(14px,4vw,68px);
  max-width:1320px;
}
@media (min-width:1500px){.instrument{margin-left:auto;margin-right:auto;}}

.section-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.28em;color:var(--worn-brass);
  text-transform:uppercase;margin:0 0 6px;
}
.marginalia{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--harvest);opacity:.78;font-size:clamp(15px,1.6vw,20px);
  margin-bottom:26px;
}
.marginalia em{font-style:italic;}

/* ============ HEX PRIMITIVE ============ */
.hex{
  position:relative;background:var(--hayloft);
  clip-path:var(--hex-flat);
  -webkit-clip-path:var(--hex-flat);
  transition:background .9s var(--ease-patient), filter .9s var(--ease-patient), transform .9s var(--ease-patient);
}
.hex__inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14% 18%;
}
.hex__label{
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(13px,1.5vw,19px);letter-spacing:.14em;
  color:var(--worn-brass);text-transform:uppercase;line-height:1.05;
}
.hex__prose{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--lamplight);font-size:clamp(12.5px,1.18vw,16px);line-height:1.5;
  margin-top:8px;opacity:0;transform:translateY(6px);
  transition:opacity 1.1s var(--ease-patient), transform 1.1s var(--ease-patient);
}
.hex__prose--small{font-size:clamp(11.5px,1vw,13.5px);}
.hex__prose em{font-style:italic;}

/* lit hex bezel + glow */
.hex--lit{
  background:#332712;
  filter:drop-shadow(0 0 0 transparent);
}
.hex--lit::before{
  content:"";position:absolute;inset:0;clip-path:var(--hex-flat);-webkit-clip-path:var(--hex-flat);
  background:
    radial-gradient(circle at 50% 46%, rgba(232,177,76,.14), transparent 66%),
    linear-gradient(160deg, rgba(232,177,76,.08), transparent 60%);
  pointer-events:none;
}
.hex--lit::after{
  /* drawn bezel border via inset hex outline */
  content:"";position:absolute;inset:1.4px;clip-path:var(--hex-flat);-webkit-clip-path:var(--hex-flat);
  background:var(--harvest);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.6px;
  opacity:.0;transition:opacity 1s var(--ease-patient);
}
.hex--lit.is-on::after{opacity:.85;}
.hex--lit.is-on{filter:drop-shadow(0 6px 30px rgba(232,177,76,.18));}
.hex--lit.is-on .hex__label{color:var(--harvest);text-shadow:0 0 12px rgba(232,177,76,.4);}
.hex--lit.is-on .hex__prose{opacity:1;transform:none;}

/* pole glyph */
.hex[data-pole]::after{}
.hex[data-pole]>.hex__inner::after{
  content:attr(data-pole-glyph);
}
.hex--lit .hex__inner{position:absolute;}
.hex--lit[data-pole]::after{}
.hex .hex__pole{}

/* small N glyph rendered via pseudo on inner */
.hex[data-pole="N"] .hex__inner::before{
  content:"N";position:absolute;top:14%;right:18%;
  font-family:"Bebas Neue",sans-serif;font-size:10px;letter-spacing:.1em;
  color:var(--worn-brass);opacity:.45;
}
.hex--giant .hex__inner::before,.hex--logbook .hex__inner::before{display:none;}

/* dim & skeleton */
.hex--dim{background:var(--hayloft);}
.hex--dim .hex__label{opacity:.55;}

.hex--skeleton{background:var(--hayloft);overflow:hidden;}
.hex--skeleton .hex__label{opacity:.28;}
.hex--skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(110,90,46,.0) 38%, rgba(232,177,76,.13) 50%, rgba(110,90,46,0) 62%, transparent 70%);
  background-size:240% 100%;
  animation:shimmerSweep 2.6s var(--ease-patient) infinite;
}
@keyframes shimmerSweep{0%{background-position:160% 0;}100%{background-position:-60% 0;}}

/* scanned state */
.hex--scanned{position:relative;}
.hex--scanned .scanline{
  position:absolute;top:0;bottom:0;width:2px;left:-4px;
  background:linear-gradient(180deg, transparent, var(--harvest), transparent);
  box-shadow:0 0 14px 3px rgba(232,177,76,.55);
  animation:scanSweep 1.1s linear forwards;
}
@keyframes scanSweep{from{left:-4px;opacity:0;}10%{opacity:1;}90%{opacity:1;}to{left:calc(100% + 4px);opacity:0;}}

/* ============ 1. APERTURE ============ */
.aperture{
  min-height:92vh;display:flex;align-items:center;justify-content:center;
  position:relative;padding:60px 0 30px;
}
.aperture__bleed{position:absolute;inset:0;pointer-events:none;}
.bleed-hex{
  position:absolute;width:200px;height:173px;background:var(--hayloft);
  clip-path:var(--hex-flat);-webkit-clip-path:var(--hex-flat);opacity:.5;
}
.bleed-hex--a{top:-50px;left:-60px;}
.bleed-hex--b{top:80px;left:60px;opacity:.32;}
.bleed-hex--c{bottom:-40px;left:-30px;opacity:.4;}
.bleed-hex--d{top:-60px;right:-50px;opacity:.45;}
.bleed-hex--e{bottom:30px;right:40px;opacity:.3;}
.bleed-hex--f{bottom:-60px;right:-70px;opacity:.5;}

.hex--giant{
  width:min(80vh,560px);height:min(72vh,486px);
  display:flex;align-items:center;justify-content:center;
}
.hex__reticle{position:absolute;inset:-2%;width:104%;height:104%;pointer-events:none;}
#apertureReticle{filter:drop-shadow(0 0 8px rgba(232,177,76,.5));transition:stroke-dashoffset 1.8s var(--ease-patient);}

.aperture__inner{padding:10% 12%;}
.aperture__eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.32em;
  color:var(--worn-brass);text-transform:uppercase;margin-bottom:14px;
}
.wordmark{
  font-family:"Bebas Neue",sans-serif;font-weight:400;
  font-size:clamp(40px,8.4vw,108px);letter-spacing:.1em;line-height:.92;
  color:var(--harvest);text-shadow:0 0 28px rgba(232,177,76,.32);
  margin-bottom:14px;
}
.aperture__line{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(15px,2vw,24px);color:var(--lamplight);max-width:30ch;margin:0 auto 24px;
  opacity:.9;
}
.aperture__scroll{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.26em;
  color:var(--field-green);text-transform:uppercase;opacity:.7;
  animation:scrollPulse 3.4s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{opacity:.3;}50%{opacity:.8;}}

/* ============ 2. COMB ============ */
.comb{padding:48px 0 64px;position:relative;}
.comb__grid{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
/* arranged as rows of hexes; rows offset for honeycomb interlock.
   We instead break into wrapping rows manually using nth-child grouping. */
.comb__grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  column-gap:clamp(8px,1.4vw,20px);
  row-gap:0;
  justify-items:center;align-items:center;
}
.comb__grid .hex{
  width:100%;aspect-ratio:1/0.866;max-width:230px;margin:0;
}
/* honeycomb offset: even rows shifted right by half a cell, rows overlap */
.comb__grid .hex:nth-child(n+6):nth-child(-n+10),
.comb__grid .hex:nth-child(n+16):nth-child(-n+20){
  transform:translateX(50%);
}
.comb__grid .hex:nth-child(n+6){margin-top:calc(-1 * (clamp(0px,1vw,18px) + 6.5%));}
/* tighten vertical interlock */
.comb__grid{margin-top:0;}
.comb__grid .hex{margin-bottom:calc(-7% );}

/* feature hexes get a slight scale to be readable */
.hex--feature{z-index:3;}
.hex--feature .hex__inner{padding:11% 13%;}

@media (max-width:920px){
  .comb__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .comb__grid .hex:nth-child(n){transform:none;margin-top:-7%;}
  .comb__grid .hex:nth-child(3n+2){transform:translateX(0);}
  .comb__grid .hex:nth-child(n+4){margin-top:-7%;}
}
@media (max-width:560px){
  .comb__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .comb__grid .hex{margin-top:-6%;}
  .hex__prose{font-size:12px;}
}

/* ============ 3. THE LONG WATCH ============ */
.watch{padding:40px 0 56px;position:relative;}
.watch__track{
  display:flex;gap:clamp(14px,2.4vw,40px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:18px 6px 26px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--worn-brass) transparent;
}
.watch__track::-webkit-scrollbar{height:6px;}
.watch__track::-webkit-scrollbar-thumb{background:var(--worn-brass);border-radius:3px;}
.watch__track::-webkit-scrollbar-track{background:rgba(110,90,46,.12);}

.watch-hex{
  flex:0 0 auto;width:clamp(260px,30vw,360px);aspect-ratio:1/1.04;
  scroll-snap-align:center;
}
.watch-hex .hex__inner{padding:16% 16%;}
.watch-hex__year{
  font-family:"Bebas Neue",sans-serif;font-size:clamp(18px,2.4vw,30px);
  letter-spacing:.12em;color:var(--harvest);text-shadow:0 0 14px rgba(232,177,76,.4);
  margin-bottom:2px;
}
.watch-hex .hex__label{font-size:11px;letter-spacing:.18em;margin-bottom:6px;}
.watch-hex__cap{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--lamplight);font-size:clamp(12px,1.1vw,15px);line-height:1.48;
  opacity:0;transform:translateY(8px);
  transition:opacity 1.1s var(--ease-patient), transform 1.1s var(--ease-patient);
}
.watch-hex.is-here .watch-hex__cap{opacity:1;transform:none;}
.watch-hex__log{
  font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.08em;
  color:var(--worn-brass);margin-top:9px;text-transform:uppercase;
}
.hex--event.is-on .hex__label,.hex--event .watch-hex__year{color:var(--burnt-rust);}
.hex--event.is-on::after{background:var(--burnt-rust);}
.hex--event.is-on{filter:drop-shadow(0 6px 30px rgba(196,99,30,.24));}

.watch__hint,.logbook__hint{
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.22em;
  color:var(--worn-brass);text-transform:uppercase;text-align:center;margin-top:8px;opacity:.6;
}

/* ============ 4. LOGBOOK ============ */
.logbook{padding:36px 0 56px;}
.hex--logbook{
  width:min(560px,90%);aspect-ratio:1/0.7;margin:14px auto 0;
}
.logbook__inner{padding:9% 12%;gap:10px;}
.logbook .hex__label{margin-bottom:4px;}
.logbook__form{
  display:flex;align-items:flex-start;gap:8px;width:100%;max-width:380px;
  border-bottom:1px solid var(--worn-brass);padding-bottom:6px;
}
.logbook__prompt{
  font-family:"IBM Plex Mono",monospace;color:var(--harvest);font-size:14px;line-height:1.6;
}
.logbook__input{
  flex:1;background:transparent;border:none;outline:none;resize:none;overflow:hidden;
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--lamplight);
  letter-spacing:.02em;line-height:1.6;caret-color:var(--harvest);
}
.logbook__input::placeholder{color:var(--worn-brass);opacity:.7;}
.logbook__hint{margin-top:6px;opacity:.5;letter-spacing:.14em;}

.logbook__echoes{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:20px;
}
.echo-hex{
  width:clamp(120px,14vw,170px);aspect-ratio:1/0.866;
  background:var(--hayloft);clip-path:var(--hex-flat);-webkit-clip-path:var(--hex-flat);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10% 14%;opacity:0;transform:scale(.85);
  animation:echoIn 1.2s var(--ease-patient) forwards;
}
@keyframes echoIn{to{opacity:1;transform:none;}}
.echo-hex span{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:11px;color:var(--lamplight);opacity:.7;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* ============ 5. LAST CELL ============ */
.lastcell{
  min-height:88vh;display:flex;align-items:center;justify-content:center;padding:40px 0 80px;
}
.lastcell .hex--giant{width:min(64vh,460px);height:min(58vh,420px);}
#lastHex{background:var(--hayloft);}
#lastHex.is-on{background:#2b210f;filter:drop-shadow(0 6px 36px rgba(232,177,76,.14));}
.lastcell__inner{padding:12% 14%;gap:14px;}
.lastcell__line{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(15px,2vw,24px);color:var(--lamplight);max-width:24ch;line-height:1.5;
  opacity:.45;transition:opacity 1.4s var(--ease-patient);
}
#lastHex.is-on .lastcell__line{opacity:.95;}
.lastcell__sig{
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.24em;
  color:var(--worn-brass);text-transform:uppercase;opacity:.6;
}

/* ============ BOOT VEIL (skeleton entrance) ============ */
.boot-veil{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, rgba(28,20,8,0), rgba(28,20,8,.0) 60%, rgba(28,20,8,.0));
  opacity:0;transition:opacity 1s var(--ease-patient);
}
body.is-loading .instrument,body.is-loading .hud-rail__readout,body.is-loading .hud-rail__wave{
  /* keep readouts in skeleton text state via JS; visual handled there */
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .bokeh-layer{animation:none !important;}
  .hex--skeleton::after{animation:none;background:linear-gradient(115deg,transparent,rgba(232,177,76,.07),transparent);}
  .aperture__scroll{animation:none;opacity:.6;}
  .hud-rail__cross{transition:none;}
  html{scroll-behavior:auto;}
}