/* ============================================================
   Come About Press — night navigation system, v2
   ground #0E232B · brass #D69A4C · foam #EDEFE8
   Spectral (display) · IBM Plex Mono (utility)
   ============================================================ */

:root{
  --abyss:#0A1B21;
  --deep:#0E232B;
  --teal-soft:#132B34;
  --teal-line:#1D3E49;
  --brass:#D69A4C;
  --brass-deep:#B47F38;
  --brass-glow:rgba(214,154,76,.14);
  --foam:#EDEFE8;
  --foam-dim:#A9B6B1;
  --foam-faint:#5F757C;
  /* light band — cool blue-gray, "fog bank" */
  --paper:#E5EDF1;
  --paper-line:rgba(21,46,54,.08);
  --paper-rule:rgba(21,46,54,.22);
  --ink:#152E36;
  --ink-dim:#425B63;
  --ink-faint:#7C8C8A;
  --brass-ink:#9A6A2B;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--deep);
  color:var(--foam);
  font-family:'Spectral',Georgia,serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--brass);color:var(--abyss)}

.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.mono{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;font-weight:500}

/* ---------- chart grid backdrop ---------- */
.chart-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.chart-bg .gl{stroke:var(--teal-soft);stroke-width:1;fill:none}
.chart-bg .gl-major{stroke:var(--teal-line);stroke-width:1;fill:none}
main,header,footer{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;transition:.35s;
}
.nav.scrolled{background:rgba(10,27,33,.86);backdrop-filter:blur(10px);border-bottom-color:var(--teal-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;max-width:1140px;margin:0 auto}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{height:30px;width:auto}
.brand span{font-family:'Spectral';font-weight:400;font-size:1.06rem;letter-spacing:.05em}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{text-decoration:none;color:var(--foam-dim);transition:color .25s}
.navlinks a:hover{color:var(--foam)}
.navlinks a.bear{color:var(--brass)}
.menu-btn{display:none;background:none;border:none;color:var(--foam);cursor:pointer;font-family:'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;font-size:.68rem}
@media(max-width:760px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--abyss);border-bottom:1px solid var(--teal-line);flex-direction:column;gap:0;padding:8px 0}
  .navlinks.open{display:flex}
  .navlinks a{padding:15px 28px;width:100%;border-top:1px solid var(--teal-soft)}
  .menu-btn{display:block}
}

/* ---------- buttons ---------- */
.btn{
  font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;font-weight:500;text-decoration:none;padding:15px 26px;cursor:pointer;
  border:1px solid var(--brass);color:var(--abyss);background:var(--brass);transition:.3s;display:inline-block;
}
.btn:hover{background:var(--brass-deep);border-color:var(--brass-deep)}
.btn.ghost{background:transparent;color:var(--foam);border-color:var(--teal-line)}
.btn.ghost:hover{border-color:var(--foam)}

/* ---------- hero ---------- */
.hero{position:relative;padding:180px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--brass);margin-bottom:34px}
.eyebrow .tick{height:1px;width:50px;background:var(--brass);opacity:.7}
h1{font-family:'Spectral';font-weight:300;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.16;letter-spacing:-.015em}
h1 .drift-line-1{display:block;color:var(--foam-dim)}
h1 .drift-line-2{display:block;margin-top:.35em}
h1 em{font-style:italic;font-weight:400;color:var(--brass);white-space:nowrap}
.lede{margin-top:32px;max-width:540px;font-size:1.16rem;line-height:1.58;color:var(--foam-dim)}
.lede em{font-style:italic;color:var(--foam)}
.hero-cta{margin-top:44px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* hero load sequence */
.rise{opacity:0;transform:translateY(16px);animation:rise .9s ease forwards}
.rise.d1{animation-delay:.1s}.rise.d2{animation-delay:.28s}.rise.d3{animation-delay:.46s}.rise.d4{animation-delay:.64s}
@keyframes rise{to{opacity:1;transform:none}}

/* compass instrument */
.instrument{position:relative;display:flex;justify-content:center;align-items:center}
.instrument svg{width:100%;max-width:360px;height:auto;filter:drop-shadow(0 0 44px var(--brass-glow))}
.inst-ring{stroke:var(--teal-line);stroke-width:1.5;fill:none}
.inst-ring-2{stroke:var(--teal-line);stroke-width:1;fill:none;opacity:.6}
.inst-tick{stroke:var(--foam-faint);stroke-width:1}
.inst-tick-major{stroke:var(--foam-dim);stroke-width:1.5}
.inst-label{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:1px;fill:var(--foam-dim)}
.inst-bearing{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;fill:var(--brass)}
.needle-wrap{
  transform-origin:200px 200px;
  animation:
    swing 2.4s cubic-bezier(.3,1.35,.35,1) .5s both,
    wobble 7s ease-in-out 2.9s infinite alternate;
}
@keyframes swing{from{transform:rotate(-16deg)}to{transform:rotate(47deg)}}
@keyframes wobble{from{transform:rotate(46.1deg)}to{transform:rotate(47.9deg)}}
.needle-n{fill:var(--brass)}
.needle-s{fill:var(--foam-faint)}
@media(max-width:900px){
  .hero{padding-top:150px}
  .hero-grid{grid-template-columns:1fr}
  .instrument{display:none}
}

/* ---------- drift line (signature) ---------- */
.driftline{margin-top:70px;position:relative}
.driftline svg{width:100%;height:auto}
.dl-drift{stroke:var(--foam-faint);stroke-width:1.6;fill:none;stroke-dasharray:2 7;stroke-linecap:round}
.dl-turnpt{fill:var(--brass);opacity:0}
.dl-course{stroke:var(--brass);stroke-width:1.8;fill:none;stroke-linecap:round}
.dl-arrow{fill:var(--brass);opacity:0}
.dl-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;fill:var(--foam-faint);opacity:0}
.dl-label.brass{fill:var(--brass)}
@keyframes dlpt{to{opacity:1}}
/* draw-on masks — animation starts when .go lands (scroll into view) */
.dl-mask-a,.dl-mask-b{stroke:#fff;stroke-width:8;fill:none;stroke-dasharray:1000;stroke-dashoffset:1000}
.driftline.go .dl-mask-a{animation:dldraw 1.9s ease-out .1s forwards}
.driftline.go .dl-mask-b{animation:dldraw 1.3s ease-in-out 1.95s forwards}
.driftline.go .dl-turnpt{animation:dlpt .5s ease 1.8s forwards}
.driftline.go .dl-arrow{animation:dlpt .4s ease 3.2s forwards}
.driftline.go .dl-l1{animation:dlpt .8s ease .6s forwards}
.driftline.go .dl-l2{animation:dlpt .8s ease 3s forwards}
@keyframes dldraw{to{stroke-dashoffset:0}}

/* ---------- statement ---------- */
.statement{border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line);padding:72px 0;background:var(--abyss)}
.statement p{font-family:'Spectral';font-weight:300;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.36;max-width:900px;letter-spacing:-.01em}
.statement p span{color:var(--brass);font-style:italic}

/* ---------- sections ---------- */
.sec{padding:104px 0;position:relative}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;padding-bottom:22px;border-bottom:1px solid var(--teal-line);flex-wrap:wrap;gap:12px}
.sec-head h2{font-family:'Spectral';font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.01em}
.sec-head .mono{color:var(--brass)}
.sec-intro{max-width:640px;color:var(--foam-dim);font-size:1.08rem;line-height:1.6;margin:26px 0 10px}
.brasslabel{color:var(--brass)}

/* ---------- chart paper (light band) ---------- */
.paper{
  background:var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
  background-size:110px 110px;
  color:var(--ink);
  border-top:1px solid var(--teal-line);
  border-bottom:1px solid var(--teal-line);
}
.paper ::selection{background:var(--ink);color:var(--paper)}
.paper .brasslabel{color:var(--brass-ink)}
.paper .sec-head{border-bottom-color:var(--paper-rule)}
.paper .sec-head .mono{color:var(--brass-ink)}
.paper .sec-intro{color:var(--ink-dim)}
/* featured on paper */
.paper .featured{background:rgba(255,255,255,.38);border-color:var(--paper-rule)}
.paper .featured:hover{border-color:var(--ink-faint)}
.paper .featured .kicker{color:var(--brass-ink)}
.paper .featured .sub,.paper .featured p.desc{color:var(--ink-dim)}
.paper .featured .status{color:var(--ink-faint)}
.paper .featured .status b{color:var(--brass-ink)}
.paper .featured:hover .cover{box-shadow:0 24px 44px rgba(21,46,54,.28),0 0 0 1px var(--brass-glow)}
/* legs on paper */
.paper .leg::before{background:var(--paper-rule)}
.paper .leg::after{background:var(--paper);border-color:var(--ink-faint)}
.paper .leg:hover::before{background:var(--brass-ink)}
.paper .leg:hover::after{background:var(--brass-ink);border-color:var(--brass-ink)}
.paper .leg .role{color:var(--brass-ink)}
.paper .leg .role span{color:var(--ink-faint)}
.paper .leg .sub{color:var(--ink-faint)}
.paper .leg p.desc{color:var(--ink-dim)}
.paper .leg .status{color:var(--ink-faint)}
.paper .leg:hover .cover{box-shadow:0 26px 48px rgba(21,46,54,.3),0 0 0 1px var(--brass-glow)}

/* ---------- placeholder covers ---------- */
.cover{
  aspect-ratio:2/3;background:linear-gradient(160deg,var(--teal-soft),var(--abyss) 70%);
  border:1px solid var(--teal-line);position:relative;display:flex;flex-direction:column;
  justify-content:space-between;padding:11% 10%;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.cover::before{content:"";position:absolute;inset:7px;border:1px solid var(--brass);opacity:.4;pointer-events:none}
.cover .c-num{
  position:absolute;right:-4%;bottom:-7%;font-family:'Spectral';font-weight:300;font-style:italic;
  font-size:7.4rem;line-height:1;color:var(--teal-line);opacity:.85;user-select:none;
}
.cover .c-top{font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:8px}
.cover .c-top::after{content:"";height:1px;flex:1;background:var(--brass);opacity:.45}
.cover .c-title{font-family:'Spectral';font-weight:400;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.22;letter-spacing:-.01em;position:relative;z-index:1}
.cover .c-foot{font-family:'IBM Plex Mono',monospace;font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--foam-faint);position:relative;z-index:1}

/* ---------- featured (What Now?) ---------- */
.featured{
  display:grid;grid-template-columns:190px 1fr;gap:46px;align-items:center;
  margin-top:44px;padding:40px;border:1px solid var(--teal-line);background:rgba(10,27,33,.55);
  text-decoration:none;position:relative;transition:border-color .35s;
}
.featured::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--brass);transition:width .5s ease}
.featured:hover{border-color:var(--foam-faint)}
.featured:hover::after{width:100%}
.featured:hover .cover{transform:translateY(-6px);box-shadow:0 24px 44px rgba(0,0,0,.4),0 0 0 1px var(--brass-glow);border-color:var(--brass-deep)}
.featured .kicker{color:var(--brass);margin-bottom:14px}
.featured h3{font-family:'Spectral';font-weight:400;font-size:2rem;line-height:1.1;letter-spacing:-.01em}
.featured .sub{margin-top:8px;font-style:italic;color:var(--foam-dim);font-size:1.05rem}
.featured p.desc{margin-top:16px;color:var(--foam-dim);max-width:560px;font-size:1.02rem;line-height:1.58}
.featured .status{margin-top:22px;color:var(--foam-faint)}
.featured .status b{color:var(--brass);font-weight:500}
@media(max-width:700px){.featured{grid-template-columns:1fr;gap:30px;padding:28px}.featured .cover{max-width:190px}}

/* ---------- series (the four legs) ---------- */
.legs{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:48px}
.leg{
  text-decoration:none;display:flex;flex-direction:column;gap:0;position:relative;
  padding-top:26px;
}
.leg::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--teal-line);transition:background .4s}
.leg::after{
  content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--deep);border:1px solid var(--foam-faint);transition:.4s;
}
.leg:hover::before{background:var(--brass)}
.leg:hover::after{background:var(--brass);border-color:var(--brass)}
.leg:hover .cover{transform:translateY(-8px);box-shadow:0 26px 48px rgba(0,0,0,.45),0 0 0 1px var(--brass-glow);border-color:var(--brass-deep)}
.leg .role{color:var(--brass);margin-bottom:16px}
.leg .role span{color:var(--foam-faint)}
.leg h3{font-family:'Spectral';font-weight:400;font-size:1.34rem;line-height:1.16;letter-spacing:-.01em;margin-top:20px}
.leg .sub{margin-top:7px;font-style:italic;color:var(--foam-faint);font-size:.92rem}
.leg p.desc{margin-top:12px;color:var(--foam-dim);font-size:.95rem;line-height:1.55;flex:1}
.leg .status{margin-top:16px;color:var(--foam-faint)}
@media(max-width:980px){.legs{grid-template-columns:repeat(2,1fr);gap:40px 26px}}
@media(max-width:560px){.legs{grid-template-columns:1fr}}

/* ---------- ethos ---------- */
.ethos-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:40px}
.ethos-grid p{color:var(--foam-dim);font-size:1.08rem;line-height:1.66}
.ethos-grid p+p{margin-top:20px}
.ethos-big{font-family:'Spectral';font-weight:300;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.34;letter-spacing:-.01em;color:var(--foam)}
.ethos-big em{color:var(--brass)}
@media(max-width:820px){.ethos-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- signal / bearings ---------- */
.signal{background:var(--abyss);border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line)}
.signal-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.signal h2{font-family:'Spectral';font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.01em;line-height:1.2}
.signal p{margin-top:16px;color:var(--foam-dim);line-height:1.6}
.sig-form{display:flex;gap:0;border:1px solid var(--teal-line);background:var(--deep)}
.sig-form input{
  flex:1;background:transparent;border:none;outline:none;color:var(--foam);
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;padding:17px 20px;letter-spacing:.04em;
}
.sig-form input::placeholder{color:var(--foam-faint)}
.sig-form .btn{border:none;border-left:1px solid var(--brass)}
.sig-note{margin-top:12px;color:var(--foam-faint);font-size:.86rem}
@media(max-width:820px){.signal-inner{grid-template-columns:1fr;gap:34px}}

/* ---------- footer ---------- */
footer{padding:72px 0 40px;border-top:1px solid var(--teal-line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px}
.foot-grid img{height:52px;width:auto}
.foot-tag{margin-top:20px;color:var(--foam-dim);max-width:280px;line-height:1.55;font-size:.98rem}
.foot-coord{margin-top:18px;color:var(--foam-faint)}
.foot-grid h4{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--brass);margin-bottom:20px;font-weight:500}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:12px}
.foot-grid li a{text-decoration:none;color:var(--foam-dim);transition:color .25s;font-size:.98rem}
.foot-grid li a:hover{color:var(--foam)}
.foot-base{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:26px;border-top:1px solid var(--teal-soft);color:var(--foam-faint);flex-wrap:wrap;gap:10px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
.rv.rv2{transition-delay:.12s}.rv.rv3{transition-delay:.24s}.rv.rv4{transition-delay:.36s}

/* ============================================================
   BOOK PAGES
   ============================================================ */
.bp-hero{padding:180px 0 90px}
.bp-grid{display:grid;grid-template-columns:280px 1fr;gap:70px;align-items:start}
.bp-grid .cover{box-shadow:0 30px 60px rgba(0,0,0,.45)}
.bp-grid .cover .c-title{font-size:1.5rem}
.bp-grid .cover .c-num{font-size:9rem}
.bp-kicker{display:flex;align-items:center;gap:14px;color:var(--brass);margin-bottom:26px}
.bp-kicker .tick{height:1px;width:44px;background:var(--brass);opacity:.7}
.bp-hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.06}
.bp-sub{margin-top:16px;font-style:italic;font-size:1.25rem;color:var(--foam-dim)}
.bp-status{margin-top:26px;color:var(--foam-faint)}
.bp-status b{color:var(--brass);font-weight:500}
.bp-prose{margin-top:40px;max-width:600px}
.bp-prose p{color:var(--foam-dim);font-size:1.12rem;line-height:1.7}
.bp-prose p+p{margin-top:22px}
.bp-prose p strong{color:var(--foam);font-weight:400}
.bp-note{
  margin-top:44px;max-width:600px;padding:22px 26px;border:1px solid var(--teal-line);
  border-left:2px solid var(--brass);color:var(--foam-dim);font-size:.98rem;line-height:1.6;background:rgba(10,27,33,.5);
}
.bp-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:860px){
  .bp-hero{padding-top:150px}
  .bp-grid{grid-template-columns:1fr}
  .bp-grid .cover{max-width:240px}
}

/* series strip */
.strip-sec{padding:80px 0;border-top:1px solid var(--teal-line);background:var(--abyss)}
.strip-head{color:var(--brass);margin-bottom:40px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.strip::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--teal-line)}
.strip a{text-decoration:none;position:relative;padding:26px 18px 0 0}
.strip a::before{
  content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--deep);border:1px solid var(--foam-faint);transition:.35s;
}
.strip a:hover::before{border-color:var(--brass)}
.strip a.cur::before{background:var(--brass);border-color:var(--brass);box-shadow:0 0 14px var(--brass-glow)}
.strip .s-role{color:var(--foam-faint);display:block;margin-bottom:8px}
.strip a.cur .s-role{color:var(--brass)}
.strip .s-title{font-family:'Spectral';font-weight:400;font-size:1.06rem;line-height:1.2;color:var(--foam-dim);transition:color .3s}
.strip a:hover .s-title{color:var(--foam)}
.strip a.cur .s-title{color:var(--foam)}
@media(max-width:760px){
  .strip{grid-template-columns:1fr;gap:26px}
  .strip::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .strip a{padding:0 0 0 26px}
}
/* strip on chart paper */
.strip-sec.paper{
  background:var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
  background-size:110px 110px;
}
.paper .strip-head{color:var(--brass-ink)}
.paper .strip::before{background:var(--paper-rule)}
.paper .strip a::before{background:var(--paper);border-color:var(--ink-faint)}
.paper .strip a:hover::before{border-color:var(--brass-ink)}
.paper .strip a.cur::before{background:var(--brass-ink);border-color:var(--brass-ink)}
.paper .strip .s-role{color:var(--ink-faint)}
.paper .strip a.cur .s-role{color:var(--brass-ink)}
.paper .strip .s-title{color:var(--ink-dim)}
.paper .strip a:hover .s-title,.paper .strip a.cur .s-title{color:var(--ink)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
  .rise,.rv{opacity:1;transform:none}
  .dl-mask-a,.dl-mask-b{stroke-dashoffset:0 !important;animation:none !important}
  .dl-turnpt,.dl-arrow,.dl-label{opacity:1 !important;animation:none !important}
  .needle-wrap{transform:rotate(47deg);animation:none}
}