/* ==========================================================================
   Isaac Originals site design system
   Ported from the /connect funnel: rounded cards, travelling aura trim,
   light streaks, one accent per venture. One stylesheet for every page.
   ========================================================================== */

:root{
  --bg:#0A0A0A;
  --bg-card:#141414;
  --line:rgba(255,255,255,.09);
  --ink:#F5F5F5;
  --muted:#6B6760;
  --cyan:#2DD4FF;
  --gold:#D4A24C;
  --max:1080px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(255,255,255,.2);color:#fff}

/* ===================== LOAD IN ===================== */
/* Sits above everything until the visitor presses Welcome. That press is the
   gesture the browser needs before any sound is allowed, so the music and the
   entrance hit are both hung off it rather than off page load. */
.loader{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s ease,visibility .9s ease;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader video{
  width:94vw;max-width:760px;height:auto;
  opacity:0;animation:deltaIn 1s ease .25s forwards;
}
@keyframes deltaIn{to{opacity:1}}
#welcome-gate{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);
  opacity:0;pointer-events:none;transition:opacity 1.3s ease;
}
#welcome-gate.visible{opacity:1;pointer-events:auto}
/* Against pure black the normal button border all but disappears, so this one
   carries a little more weight and breathes until it is pressed. */
#welcome-btn{
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 rgba(255,255,255,0);
  animation:welcomePulse 3.2s ease-in-out infinite;
}
#welcome-btn:hover{animation:none}
@keyframes welcomePulse{
  0%,100%{box-shadow:0 0 22px rgba(255,255,255,.05);border-color:rgba(255,255,255,.5)}
  50%    {box-shadow:0 0 34px rgba(255,255,255,.16);border-color:rgba(255,255,255,.8)}
}
@media (prefers-reduced-motion: reduce){ #welcome-btn{animation:none} }
/* Nothing behind the curtain should scroll while it is up. */
body.loading{overflow:hidden}
@media (max-width:700px){ #welcome-gate{bottom:12%} }

/* ===================== LIGHT STREAKS ===================== */
#fx{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity 1.4s ease;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
#fx.on{opacity:1}

/* ===================== SHELL ===================== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
main{position:relative;z-index:1}
section{padding:5.5rem 0}
@media (max-width:700px){ section{padding:4rem 0} }

/* ===================== NAV ===================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max); margin:0 auto; padding:0 1.5rem;
  height:76px; display:flex; align-items:center; gap:2rem;
}
.nav-mark{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.nav-mark img{height:34px;width:auto}
.nav-mark span{
  font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.nav-links a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55); padding:.6rem .9rem; border-radius:8px;
  transition:color .25s ease, background .25s ease;
}
.nav-links a:hover,.nav-links a.lit{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a[aria-current="page"]{color:#fff}
/* Only exists on phones. Two hairlines rather than a graphic, so it carries
   the same stroke weight as the delta and the picker outline. */
.menu-btn{display:none}

@media (max-width:760px){
  .nav-in{
    height:62px; gap:0;
    padding-left:max(1rem,env(safe-area-inset-left));
    padding-right:max(1rem,env(safe-area-inset-right));
  }
  .nav-mark span{display:none}
  .nav-mark img{height:30px}

  .lang{margin-left:auto;margin-right:0}
  .music-wrap{margin-left:.55rem}

  .menu-btn{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:40px;padding:0 5px;margin-left:.5rem;flex-shrink:0;
    background:transparent;border:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-btn span{
    display:block;height:1.5px;border-radius:2px;
    background:rgba(255,255,255,.78);
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .nav.open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav.open .menu-btn span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

  /* The panel hangs off the bar, which is the sticky positioned box. */
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,10,10,.97);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--line);
    padding:.45rem .7rem calc(.9rem + env(safe-area-inset-bottom));
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
  }
  .nav.open .nav-links{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-links a{
    padding:.95rem 1rem;font-size:.72rem;letter-spacing:.2em;border-radius:10px;
    color:rgba(255,255,255,.62);
  }
  .nav-links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.06)}
}

/* ===================== TYPE ===================== */
.eyebrow{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:500;
}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.4rem,6.5vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:1.15rem;letter-spacing:0;line-height:1.3}
.lede{font-size:clamp(1rem,1.6vw,1.18rem);color:rgba(255,255,255,.72);max-width:46ch}
.body{color:rgba(255,255,255,.68);max-width:62ch}
.body p + p{margin-top:1.15rem}
.verse{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:92svh; display:flex; align-items:center;
  overflow:hidden; padding:6rem 0 5rem;
}
/* The delta is composited into the photograph itself, not layered over it, so
   the mesquite canopy and the cloud mass genuinely occlude it. Dark pixels in
   the frame hide it completely, bright cloud fades it out. Nothing to position
   here, which also means it can never drift out of register on a resize. */
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background:url('../images/hero.jpg') 50% 40% / cover no-repeat;
  opacity:.58;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(10,10,10,.94) 0%, rgba(10,10,10,.86) 26%,
                              rgba(10,10,10,.42) 48%, rgba(10,10,10,.12) 74%,
                              rgba(10,10,10,.34) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(10,10,10,.18) 46%, rgba(10,10,10,.5) 100%);
}
.hero .wrap{position:relative;z-index:2;max-width:1340px;width:100%}
.hero-copy{max-width:30rem}
@media (max-width:1100px){
  .hero-photo{background-position:54% 38%;opacity:.44}
}
@media (max-width:700px){
  .hero{min-height:88svh}
  .hero-photo{background-position:53% 32%;opacity:.32}
  .hero-copy{max-width:100%}
}

/* ===================== CARDS + AURA TRIM ===================== */
@property --aura{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.card{
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  padding:1.9rem 1.75rem; display:block;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:2px; pointer-events:none; opacity:0; z-index:5;
  transition:opacity .3s ease;
  filter:drop-shadow(0 0 7px var(--auraC,#fff)) drop-shadow(0 0 16px var(--auraGlow,rgba(255,255,255,.45)));
  background:conic-gradient(from var(--aura),
    transparent 0deg, var(--auraC,#fff) 18deg, #fff 46deg,
    var(--auraC,#fff) 74deg, rgba(255,255,255,.06) 108deg, transparent 146deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
a.card:hover,a.card:active,a.card.lit{transform:translateY(-3px)}
a.card:hover::before,a.card:active::before,a.card.lit::before{
  opacity:1; animation:auraSpin 2.2s linear infinite;
}
@keyframes auraSpin{ to{ --aura:360deg } }
/* Touch devices skip the two drop-shadow passes: same read, far cheaper. */
@media (hover:none){ .card::before{filter:none} }

/* ===================== VENTURES ===================== */
.ventures{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:2.75rem}
@media (max-width:760px){ .ventures{grid-template-columns:1fr} }

.vent{display:flex;flex-direction:column;min-height:210px}
.vent-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.vent-name{font-size:1.22rem;font-weight:600;letter-spacing:.01em;transition:color .3s ease,text-shadow .3s ease}
.vent-desc{font-size:.86rem;color:rgba(255,255,255,.62);margin-top:.75rem;flex:1;line-height:1.6}
.vent-host{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-top:1.15rem;
}
.status{
  display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;white-space:nowrap;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.44);
}
.dot{width:6px;height:6px;border-radius:999px;background:#fff;box-shadow:0 0 7px rgba(255,255,255,.5)}

.vent.omnis:hover,.vent.omnis.lit{border-color:rgba(255,255,255,.5);
  box-shadow:0 0 30px rgba(255,255,255,.14),0 0 70px rgba(255,255,255,.05)}
.vent.apex{--auraC:#2DD4FF;--auraGlow:rgba(45,212,255,.55)}
.vent.apex:hover,.vent.apex.lit{border-color:rgba(45,212,255,.55);
  box-shadow:0 0 34px rgba(45,212,255,.28),0 0 80px rgba(45,212,255,.1)}
.vent.apex:hover .vent-name,.vent.apex.lit .vent-name{color:var(--cyan);text-shadow:0 0 18px rgba(45,212,255,.55)}
.vent.kit{--auraC:#D4A24C;--auraGlow:rgba(212,162,76,.55)}
.vent.kit:hover,.vent.kit.lit{border-color:rgba(212,162,76,.55);
  box-shadow:0 0 34px rgba(212,162,76,.3),0 0 80px rgba(212,162,76,.12)}
.vent.kit:hover .vent-name,.vent.kit.lit .vent-name{color:var(--gold);text-shadow:0 0 18px rgba(212,162,76,.6)}

/* Not a link. In development, and it should not look like a door. */
.vent.forge{
  border-color:rgba(255,255,255,.05);cursor:default;
  background:linear-gradient(160deg,#141414 0%,rgba(20,20,20,.35) 55%,rgba(10,10,10,0) 100%);
}
.vent.forge .vent-name,.vent.forge .vent-desc,.vent.forge .vent-host{opacity:.42}
.vent.forge .status{color:rgba(255,255,255,.3)}
.vent.forge .dot{background:rgba(255,255,255,.3);box-shadow:none}

/* I.O insignia stamped into a card corner */
.stamp{
  position:absolute;right:1.15rem;bottom:1rem;width:19%;max-width:78px;
  opacity:.07;pointer-events:none;z-index:1;transition:opacity .4s ease;
}
.card:hover .stamp,.card.lit .stamp{opacity:.2}

/* ===================== THESIS BLOCK ===================== */
.thesis{position:relative;overflow:hidden}
.thesis-photo{
  position:absolute;inset:0;z-index:0;
  background:url('../images/orion.jpg') 62% 30% / cover no-repeat;opacity:.4;
}
.thesis-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left, rgba(10,10,10,.95) 0%, rgba(10,10,10,.7) 45%, rgba(10,10,10,.35) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 26%, transparent 74%, var(--bg) 100%);
}
.thesis .wrap{position:relative;z-index:2}
.pull{
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.45;font-weight:500;
  color:#fff;max-width:26ch;letter-spacing:-.01em;
}

/* ===================== PHASES (Journey) ===================== */
.phase{display:grid;gap:2.5rem;grid-template-columns:1fr 1fr;align-items:center;margin-top:4rem}
.phase:nth-child(even) .phase-media{order:2}
/* A phase with no image spans the column and centres, so the missing photo
   reads as a deliberate pause rather than a hole. */
.phase-solo{
  grid-template-columns:1fr;justify-items:center;text-align:center;
  padding:6.5rem 0 7rem;position:relative;
}
.phase-solo p{margin-left:auto;margin-right:auto}
/* Just the traced delta standing behind the year. No panel, no photograph,
   nothing to crop badly at any width. */
.phase-solo::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-66%);
  width:min(300px,60vw);aspect-ratio:400/420;
  background:url('../images/delta-connect.png') 50% 50% / contain no-repeat;
  opacity:.15;
  filter:drop-shadow(0 0 60px rgba(255,255,255,.3));
}
.phase-solo > div{position:relative;z-index:1}
.phase-solo .phase-year{color:rgba(255,255,255,.66)}
.phase-solo h3{text-shadow:0 2px 18px rgba(10,10,10,.75)}
@media (max-width:820px){
  .phase-solo{padding:4.5rem 0 5rem}
}
@media (max-width:820px){
  .phase{grid-template-columns:1fr;gap:1.5rem;margin-top:3rem}
  .phase:nth-child(even) .phase-media{order:0}
}
.phase-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.phase-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
@media (max-width:820px){ .phase-media{aspect-ratio:3/2} }
.phase-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.65),transparent 60%);
}
.phase-year{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.phase h3{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin-top:.7rem}
.phase p{margin-top:1.1rem;color:rgba(255,255,255,.66);max-width:52ch}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.95rem 1.6rem;border:1px solid rgba(255,255,255,.3);border-radius:10px;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:#fff;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  /* A real <button> arrives with the browser's own grey fill and its own
     font. Both have to be cleared or the Welcome button renders white text
     on a near-white slab. */
  background:transparent;font-family:inherit;cursor:pointer;
}
.btn:hover,.btn.lit{background:#fff;color:#000;border-color:#fff}
.btn.ghost{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.btn.ghost:hover,.btn.ghost.lit{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn svg{width:15px;height:15px}
.btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}

/* ===================== PORTRAIT (About) ===================== */
.portrait-grid{display:grid;gap:3rem;grid-template-columns:minmax(0,320px) 1fr;align-items:start}
@media (max-width:820px){ .portrait-grid{grid-template-columns:1fr;gap:2rem} }
.portrait{border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative}
.portrait img{width:100%;filter:grayscale(.2)}

/* ===================== VIEW COUNT ===================== */
/* Same small caps treatment as the nav links, so it reads as part of the set
   rather than as a widget bolted on. Hidden until a real number arrives: an
   empty or zero counter looks broken, and no counter looks deliberate. */
/* Lives at the bottom right, alongside the Connect link. */
.foot-right{display:flex;align-items:center;gap:1.5rem}
.views{
  display:none;align-items:center;gap:.36rem;flex-shrink:0;
  font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.3);white-space:nowrap;
}
.views.on{display:inline-flex}
.views b{font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.1em}
.views i{
  width:4px;height:4px;border-radius:50%;background:#2DD4FF;
  box-shadow:0 0 6px rgba(45,212,255,.65);flex-shrink:0;
  animation:viewPulse 2.6s ease-in-out infinite;
}
@keyframes viewPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .views i{animation:none} }
@media (max-width:700px){ .foot-right{gap:1rem} }

/* ===================== LANGUAGE ===================== */
/* Sits between the nav links and the music dot. Same small caps treatment as
   every other control up there, so it reads as part of the set. */
.lang{position:relative;flex-shrink:0;margin-left:1.1rem}
#lang-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:8px;
  padding:.42rem .6rem;cursor:pointer;font-family:inherit;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.6);
  transition:color .25s ease,border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
#lang-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}
#lang-btn svg{width:11px;height:11px;transition:transform .25s ease}
.lang.open #lang-btn{color:#fff;border-color:rgba(255,255,255,.4)}
.lang.open #lang-btn svg{transform:rotate(180deg)}

#lang-menu{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:9.5rem;
  background:rgba(16,16,16,.97);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border:1px solid var(--line);border-radius:10px;padding:.3rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  z-index:60;
}
.lang.open #lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
#lang-menu button{
  display:flex;align-items:center;gap:.7rem;width:100%;
  background:transparent;border:0;border-radius:7px;cursor:pointer;
  padding:.6rem .7rem;font-family:inherit;font-size:.78rem;
  color:rgba(255,255,255,.62);text-align:left;
  transition:background .2s ease,color .2s ease;
}
#lang-menu button i{
  font-style:normal;font-size:.58rem;letter-spacing:.16em;
  color:rgba(255,255,255,.32);min-width:1.5rem;
}
#lang-menu button:hover{background:rgba(255,255,255,.07);color:#fff}
#lang-menu button[aria-selected="true"]{color:#fff}
#lang-menu button[aria-selected="true"] i{color:rgba(255,255,255,.6)}

@media (max-width:760px){
  .lang{margin-left:.5rem}
  #lang-btn{padding:.36rem .45rem;font-size:.56rem;gap:.28rem}
}

/* ===================== MUSIC TOGGLE ===================== */
/* Sonar rings, same idea as the original site's visualizer but done in CSS
   so it costs nothing. Rings only expand while the bed is actually playing. */
/* Grid stacking puts the dot and both rings on exactly one centre. The old
   half-of-the-width margins drifted by a pixel and it showed. */
.music-wrap{display:flex;align-items:center;gap:.55rem;margin-left:.4rem;flex-shrink:0}
/* The label types itself in on the first visit so the dot reads as a control
   rather than a decoration, then types itself back out. Same face and the
   same tracking as every other small caption on the site. */
.music-label{
  font-size:.56rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.5);white-space:nowrap;line-height:1;
  display:inline-flex;align-items:center;
  opacity:0;transition:opacity .5s ease;
}
.music-label.on{opacity:1}
.music-label.on::after{
  content:"";width:1px;height:.85em;margin-left:.34em;
  background:currentColor;animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (max-width:760px){ .music-label{display:none} }
@media (prefers-reduced-motion: reduce){ .music-label.on::after{animation:none} }

#music{
  display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;
  background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#music i,#music::before,#music::after{grid-area:1/1}
#music i{
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .3s ease,box-shadow .3s ease;
}
#music.on i{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
#music::before,#music::after{
  content:"";width:6px;height:6px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;opacity:0;
}
#music.on::before,#music.on::after{animation:sonar 2.4s ease-out infinite}
#music.on::after{animation-delay:1.2s}
#music:hover i{background:rgba(255,255,255,.8)}
@keyframes sonar{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(4.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  #music.on::before,#music.on::after{animation:none}
}

/* ===================== K.I.T. ===================== */
/* These used to sit in a <style> block inside kit.html. Soft navigation swaps
   the article and nothing else, so a page that carries its own styles in its
   head loses them the moment you arrive by clicking rather than by loading.
   Anything page specific belongs here, in the one sheet every page already
   has. */
.kit-page .card{--auraC:#D4A24C;--auraGlow:rgba(212,162,76,.5)}
.kit-page .card:hover,.kit-page .card.lit{
  border-color:rgba(212,162,76,.5);
  box-shadow:0 0 30px rgba(212,162,76,.22),0 0 70px rgba(212,162,76,.08);
}
.kit-page .eyebrow{color:rgba(212,162,76,.7)}
.kit-page .dot{background:var(--gold);box-shadow:0 0 7px rgba(212,162,76,.6)}
.tools{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:2.75rem}
@media (max-width:760px){ .tools{grid-template-columns:1fr} }
.scripture{
  border-left:2px solid rgba(212,162,76,.5);padding-left:1.5rem;
  font-weight:300;color:rgba(255,255,255,.8);max-width:44ch;
}

/* ===================== FOOTER ===================== */
footer{border-top:1px solid var(--line);padding:2.75rem 0;position:relative;z-index:1}
.foot-in{
  max-width:var(--max);margin:0 auto;padding:0 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.72rem;color:var(--muted);
}
.foot-in a{color:rgba(255,255,255,.55);transition:color .2s ease}
.foot-in a:hover{color:#fff}

/* ===================== REVEAL ===================== */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #fx{display:none}
}

/* ===================== PHONE NAV OVERRIDES =====================
   These have to sit at the end of the file. The language picker and the music
   dot declare their own margins further down than the nav block does, and at
   equal specificity the later rule wins, which pinned both controls to the
   left of the bar with a hole on the right. */
@media (max-width:760px){
  .lang{margin-left:auto;margin-right:0}
  .music-wrap{margin-left:.6rem;margin-right:0}
  /* Fully opaque. At 97% the headline behind it ghosted through the panel. */
  .nav.open .nav-links{background:#0A0A0A}
  .nav-links{background:#0A0A0A}
}