/* prspct-inspired line-art layer — hard SF, dark author-site */
:root{
  --la-stroke:#c9a36a;
  --la-stroke-soft:#ece7dc;
  --la-panel:#161512;
  --la-outer:#0a0a08;
  --la-frame-green:#1a2218;
}

/* Outer subtle green-black nod + raised panel frame on hero */
.home-hero{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:
    linear-gradient(180deg, var(--la-outer) 0%, transparent 12%),
    linear-gradient(0deg, var(--la-outer) 0%, transparent 8%),
    var(--bg);
  padding-block:clamp(1.5rem,4vw,2.5rem);
  padding-inline:clamp(1rem,3vw,1.75rem);
  margin-inline:calc(var(--gutter) * -0.15);
  /* double-line outer frame via box-shadow */
  box-shadow:
    0 0 0 1px #1a2218,
    0 0 0 2px var(--bg),
    0 0 0 3px #2a3228aa,
    inset 0 0 0 1px #2c2a2488;
}

.home-hero > .kicker{margin-bottom:1rem}

/* Decorative line-art canvas — full viewport, never cropped */
.lineart{
  pointer-events:none;
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  z-index:0;
  overflow:visible;
  opacity:.48;
}
.lineart svg{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  /* meet = show entire drawing; no slice crop of labels/ships */
  max-width:none;
}
.lineart .la-stroke{
  fill:none;
  stroke:var(--la-stroke);
  stroke-width:0.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lineart .la-stroke-thin{
  fill:none;
  stroke:var(--la-stroke);
  stroke-width:0.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.7;
}
.lineart .la-stroke-cream{
  fill:none;
  stroke:var(--la-stroke-soft);
  stroke-width:0.55;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.45;
}
.lineart .la-fill-dot{
  fill:var(--la-stroke);
  stroke:none;
  opacity:.7;
}
.lineart .la-label{
  fill:var(--la-stroke);
  font-family:var(--sans),system-ui,sans-serif;
  font-size:7px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.55;
}
.lineart .la-seal-text{
  fill:var(--la-stroke);
  font-family:var(--sans),system-ui,sans-serif;
  font-size:6.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.75;
}

/* Corner seals as CSS pseudo ornaments on hero */
.home-hero:before,
.home-hero:after{
  content:"";
  position:absolute;
  width:18px;height:18px;
  z-index:2;
  pointer-events:none;
  border-color:var(--accent);
  opacity:.55;
}
.home-hero:before{
  top:8px;left:8px;
  border-top:1px solid;border-left:1px solid;
  box-shadow:inset 3px 3px 0 -2px var(--accent);
}
.home-hero:after{
  bottom:8px;right:8px;
  border-bottom:1px solid;border-right:1px solid;
  box-shadow:inset -3px -3px 0 -2px var(--accent);
}

/* Transmission — double-line blueprint panel */
.tx{
  border:1px solid var(--rule);
  outline:1px solid #3a3630;
  outline-offset:3px;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), #2c2a2444 100%),
    linear-gradient(180deg,#161512f5,#0e0d0bf2);
  padding:clamp(1.15rem,3vw,1.7rem);
  margin:0 0 1.75rem;
  max-width:none;
  width:100%;
  box-shadow:
    0 0 0 1px #0005,
    inset 0 1px 0 #ffffff08,
    inset 0 0 0 1px #c9a36a14;
  position:relative;
  z-index:1;
}
.tx:before{
  content:"";
  position:absolute;
  top:6px;left:6px;right:6px;
  height:1px;
  background:linear-gradient(90deg,transparent,#c9a36a44 20%,#c9a36a44 80%,transparent);
  pointer-events:none;
}
.tx-label{
  font-family:var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-size:.68rem;
  margin:0 0 .85rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.55rem;
  border-bottom:1px solid #2c2a24;
  box-shadow:0 1px 0 #1a1814;
}
.tx-label .live{
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.tx-label .live:before{
  content:"";
  width:.45rem;height:.45rem;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px #c9a36a99;
  animation:tx-pulse 2.4s ease-in-out infinite;
}
.tx-body{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  line-height:1.45;
  color:var(--ink);
  min-height:4.2em;
  margin:0;
}
.tx-body .cursor{
  display:inline-block;
  width:.55ch;height:1em;
  background:var(--accent);
  margin-left:.1ch;
  vertical-align:-.1em;
  animation:tx-blink 1s steps(1) infinite;
}
.tx-meta{
  font-family:var(--sans);
  color:var(--ink-faint);
  font-size:.78rem;
  letter-spacing:.04em;
  margin:.9rem 0 0;
  padding-top:.65rem;
  border-top:1px dashed #2c2a24;
}

/* Series cards — double border, uppercase labels */
.series-grid{
  display:grid;
  gap:1rem;
  margin:2.2rem 0 0;
  position:relative;
  z-index:1;
}
@media (min-width:720px){
  .series-grid{grid-template-columns:1fr 1fr;gap:1.15rem}
}
.series-card{
  border:1px solid var(--rule);
  outline:1px solid #3a363088;
  outline-offset:3px;
  background:
    linear-gradient(180deg,#181610 0%,var(--bg-raised) 100%);
  padding:1.2rem 1.25rem 1.3rem;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:border-color .25s ease, outline-color .25s ease, background .25s ease, transform .25s ease;
  position:relative;
  box-shadow:inset 0 0 0 1px #c9a36a10;
}
.series-card:hover{
  border-color:var(--accent);
  outline-color:#c9a36a55;
  background:#1a1814;
  transform:translateY(-2px);
  color:inherit;
}
.series-card .n{
  font-family:var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:.72rem;
  margin:0 0 .55rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding-bottom:.45rem;
  border-bottom:1px solid #2c2a24;
}
.series-card h2{margin:0 0 .35rem;font-size:1.25rem}
.series-card .altline{
  color:var(--ink-muted);
  font-size:.78rem;
  margin:0 0 .7rem;
  font-family:var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.series-card .hookline{
  color:var(--ink-muted);
  font-size:.95rem;
  margin:0 0 .85rem;
  max-width:28rem;
}
.series-card .go{
  font-family:var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:.72rem;
}
.card-ico{display:inline-flex;color:var(--accent);opacity:.75;flex-shrink:0;line-height:0}
.card-ico svg{display:block}

.home-lead{margin-top:1.6rem;position:relative;z-index:1}
.home-hero .actions,
.home-hero .quiet,
.home-hero > .kicker,
.home-hero > h1,
.home-hero .home-status{position:relative;z-index:1}

/* CTAs — thin double frame */
.home-hero .cta{
  outline:1px solid #3a363055;
  outline-offset:2px;
  box-shadow:inset 0 0 0 1px #c9a36a18;
}

/* Soft star dust (kept minimal under lineart) */
.stars{
  pointer-events:none;
  position:absolute;
  inset:-1rem -1rem auto;
  height:12rem;
  opacity:.22;
  z-index:0;
  background:
    radial-gradient(1px 1px at 10% 20%, #ece7dc66 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #ece7dc44 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 30%, #c9a36a55 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 55%, #ece7dc44 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 18%, #ece7dc33 50%, transparent 51%);
}

/* Proxima badge — blueprint pill */
.proxima-badge{
  position:relative;z-index:1;
  margin:2rem 0 0;
  padding:.55rem .85rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid #2c2a24;
  outline:1px dashed #2c2a2466;
  outline-offset:3px;
  border-radius:0;
  background:#161512aa;
  max-width:100%;
}
.proxima-badge em{font-style:normal;color:var(--accent);font-weight:500}
.proxima-dot{
  width:.4rem;height:.4rem;
  border-radius:50%;
  background:#6ecf8e;
  box-shadow:0 0 6px #6ecf8e88;
  flex-shrink:0;
  animation:tx-pulse 2.8s ease-in-out infinite;
}

/* Home SEO — framed blocks with uppercase label treatment */
.home-seo{
  position:relative;z-index:1;
  margin:2.6rem 0 0;
  max-width:none;
  width:100%;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
  box-shadow:0 -1px 0 #1a1814;
}
.home-seo-answer{
  margin:0 0 1.85rem;
  padding:1rem 1.1rem;
  border:1px solid var(--rule);
  outline:1px solid #3a363066;
  outline-offset:3px;
  background:#16151288;
  box-shadow:inset 0 0 0 1px #c9a36a0c;
}
.home-seo-answer p{margin:0;color:var(--ink-muted)}
.home-seo-block{margin:0 0 1.85rem;padding-top:.15rem}
.home-seo-block h2{
  margin:0 0 .75rem;
  font-size:1.15rem;
  padding-bottom:.45rem;
  border-bottom:1px solid #2c2a24;
  position:relative;
}
.home-seo-block h2:after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:2.5rem;height:1px;
  background:var(--accent);
  opacity:.55;
}
.home-seo-block h3{margin:1rem 0 .35rem;font-size:1.05rem;color:var(--ink)}
.home-seo-block p{max-width:none;width:100%;margin:0 0 .85em;color:var(--ink-muted)}
.home-seo-block p:last-child{margin-bottom:0}
.home-seo-list{margin:.35rem 0 0;padding:0 0 0 1.15rem;color:var(--ink-muted);max-width:none;width:100%}
.home-seo-list li{margin:0 0 .45em}
.home-seo-ol{padding-left:1.25rem}
.home-seo-more{margin-top:1rem!important;font-family:var(--sans);font-size:.85rem}
.home-seo-faq h3{font-family:var(--sans);letter-spacing:.04em;font-weight:500;text-transform:uppercase;font-size:.85rem;color:var(--accent)}
.home-seo-micro{
  padding:.9rem 1rem;
  border:1px dashed #2c2a24;
  background:#12100e66;
}
.home-hero .home-seo{overflow:visible}

@keyframes tx-blink{50%{opacity:0}}
@keyframes tx-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* Mobile: hide densest drawings, keep borders */
@media (max-width:719px){
  .lineart{opacity:.28}
  .lineart .la-dense{display:none}
  .home-hero{
    padding-inline:clamp(.75rem,3vw,1.25rem);
    margin-inline:0;
    box-shadow:
      0 0 0 1px #1a2218,
      0 0 0 2px var(--bg),
      0 0 0 3px #2a322866;
  }
  .proxima-badge{font-size:.62rem;padding:.45rem .7rem}
  .tx,.series-card,.home-seo-answer{outline-offset:2px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .tx-label .live:before,
  .tx-body .cursor,
  .series-card,
  .proxima-dot{animation:none!important;transition:none!important}
  .series-card:hover{transform:none}
}


/* Keep page chrome above fixed lineart wallpaper */
.site{position:relative;z-index:1}
.home-hero .tx,
.home-hero .series,
.home-hero .home-lead,
.home-hero .proxima-badge,
.home-hero .home-seo{position:relative;z-index:1}


/* Line-art lives with home text below atlas embed — not fixed over the whole page */
.home-hero{
  position:relative;
}
.home-hero > .lineart{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.42;
}
.home-hero > .lineart svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* Content above lineart inside hero — exclude decorative .stars (it has height:12rem;
   if it becomes position:relative it creates a huge empty gap above the kicker). */
.home-hero > :not(.lineart):not(.stars){
  position:relative;
  z-index:1;
}
.home-hero > .stars{
  position:absolute !important;
  inset:-1rem -1rem auto !important;
  height:12rem;
  pointer-events:none;
  z-index:0;
}


/* Home hero content width = series-grid (two book cards) — cache-bust w2 */
.home-hero .tx,
.home-hero .series-grid,
.home-hero .home-status,
.home-hero .home-lead,
.home-hero .lead,
.home-hero .actions,
.home-hero .quiet,
.home-hero .home-seo,
.home-hero .home-seo-answer,
.home-hero .proxima-badge{
  max-width:none !important;
  width:100% !important;
  box-sizing:border-box;
}
.home-hero .home-lead p,
.home-hero .lead p,
.home-hero .home-seo-answer,
.home-hero .home-seo-answer p,
.home-hero .home-seo-block p,
.home-hero .home-seo-list,
.home-hero .home-seo-answer.lead{
  max-width:none !important;
  width:100% !important;
}
.home-hero .proxima-badge{
  display:flex;
}


/* After homepage atlas: lock gap to kicker at 20px (beats padding-block) */
.home-hero.home-hero--after-atlas {
  margin-top: 0 !important;
  padding-top: 20px !important;
  padding-block-start: 20px !important;
}