/* ============================================================
   THE LOOKING GLASS PROTOCOL — Shaman Poet
   Looking Glass Legendary Productions
   ============================================================ */

:root{
  --ink:#05060d;
  --ink-2:#0a0d1a;
  --ink-3:#111528;
  --line:rgba(232,200,122,.22);
  --gold:#e8c87a;
  --gold-soft:#f3e0b0;
  --cyan:#7fe3e0;
  --violet:#b79ef5;
  --sapphire:#5b8dd9;
  --text:#dfe3ef;
  --text-dim:#9aa2bb;
  --maxw:1180px;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --display:'Cinzel',var(--serif);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* starfield ---------------------------------------------- */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(91,141,217,.20), transparent 60%),
    radial-gradient(900px 600px at 12% 8%, rgba(183,158,245,.14), transparent 62%),
    radial-gradient(1000px 800px at 50% 108%, rgba(127,227,224,.10), transparent 60%),
    var(--ink);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 18%, #cfe4ff, transparent),
    radial-gradient(1.6px 1.6px at 42% 72%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 88% 58%, #ffe9bd, transparent),
    radial-gradient(1.3px 1.3px at 8% 82%, #fff, transparent),
    radial-gradient(1px 1px at 55% 44%, #bcd8ff, transparent),
    radial-gradient(1.2px 1.2px at 33% 12%, #fff, transparent),
    radial-gradient(1px 1px at 78% 88%, #fff, transparent);
  background-size:520px 520px,700px 700px,600px 600px,760px 760px,660px 660px,540px 540px,820px 820px,900px 900px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-soft)}

/* header ------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(5,6,13,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{font-family:var(--display);font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap;font-weight:600}
.brand small{display:block;font-family:var(--serif);font-size:11px;letter-spacing:.18em;color:var(--text-dim);margin-top:2px;font-variant:normal}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);font-family:var(--display);font-weight:600;
  padding:6px 0;border-bottom:1px solid transparent;transition:.2s;
}
nav a:hover,nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

.navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--gold);
  border-radius:6px;padding:8px 12px;font-size:18px;cursor:pointer;line-height:1}

/* hero --------------------------------------------------- */
.hero{padding:110px 0 90px;text-align:center;position:relative}
.eyebrow{
  font-family:var(--display);font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 26px;
}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.5rem,7.5vw,5.4rem);
  line-height:1.04;margin:0 0 26px;letter-spacing:.02em;
  background:linear-gradient(160deg,#fff 8%,var(--gold-soft) 42%,var(--gold) 72%,#c89b45 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
  font-size:clamp(1.15rem,2.6vw,1.6rem);font-style:italic;
  color:var(--gold-soft);margin:0 auto 40px;max-width:34ch;
}
.hero p.lede{max-width:60ch;margin:0 auto 44px;color:var(--text-dim);font-size:1.08rem}

/* buttons ------------------------------------------------ */
.btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 32px;border-radius:2px;border:1px solid var(--gold);
  color:var(--gold);transition:.22s;cursor:pointer;
}
.btn:hover{background:var(--gold);color:var(--ink);box-shadow:0 0 34px rgba(232,200,122,.34)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.ghost{border-color:rgba(223,227,239,.3);color:var(--text)}
.btn.ghost:hover{background:rgba(223,227,239,.1);color:#fff;box-shadow:none}

/* sections ----------------------------------------------- */
section{padding:86px 0}
.section-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.9rem);
  color:var(--gold);text-align:center;margin:0 0 18px;letter-spacing:.03em;
}
.section-sub{text-align:center;color:var(--text-dim);max-width:62ch;margin:0 auto 60px;font-size:1.04rem}
.rule{width:120px;height:1px;margin:0 auto 44px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.band{background:linear-gradient(180deg,transparent,rgba(17,21,40,.66),transparent);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* pull quote --------------------------------------------- */
.pull{
  text-align:center;font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,3.4vw,2.15rem);line-height:1.42;
  color:var(--gold-soft);max-width:22ch;margin:0 auto;letter-spacing:.02em;
}
.pull.wide{max-width:32ch}
.attrib{text-align:center;color:var(--text-dim);font-size:.82rem;
  letter-spacing:.22em;text-transform:uppercase;margin-top:26px;font-family:var(--display)}

/* book grid ---------------------------------------------- */
.books{display:grid;gap:52px 34px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.book{text-align:center}
.book .shot{
  display:block;border-radius:3px;overflow:hidden;position:relative;
  box-shadow:0 22px 52px rgba(0,0,0,.72), 0 0 0 1px rgba(232,200,122,.2);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s;
  background:var(--ink-3);
}
.book .shot:hover{transform:translateY(-9px) scale(1.015);
  box-shadow:0 30px 68px rgba(0,0,0,.82), 0 0 0 1px var(--gold), 0 0 44px rgba(232,200,122,.24)}
.book img{width:100%;height:auto;display:block}
.book .vol{font-family:var(--display);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cyan);margin:20px 0 7px}
.book h3{font-family:var(--display);font-size:1.06rem;margin:0 0 10px;color:var(--gold-soft);
  font-weight:600;letter-spacing:.03em;line-height:1.3}
.book .q{font-style:italic;color:var(--text-dim);font-size:.95rem;margin:0 0 14px;line-height:1.5}
.book .status{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-dim);font-family:var(--display)}
.book .status.live{color:var(--cyan)}

/* prose -------------------------------------------------- */
.prose{max-width:none}
.prose h2{font-family:var(--display);color:var(--gold);font-size:1.75rem;
  margin:56px 0 18px;letter-spacing:.02em;font-weight:600}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);color:var(--gold-soft);font-size:1.2rem;
  margin:38px 0 12px;letter-spacing:.06em;font-weight:600}
.prose p{margin:0 0 22px}
.prose blockquote{
  margin:34px 0;padding:22px 0 22px 30px;border-left:2px solid var(--gold);
  font-style:italic;color:var(--gold-soft);font-size:1.1rem;
}
.prose blockquote p:last-child{margin:0}
.prose ul{padding-left:22px;margin:0 0 22px}
.prose li{margin-bottom:11px}
.first-letter::first-letter{
  font-family:var(--display);float:left;font-size:4.1rem;line-height:.84;
  padding:6px 12px 0 0;color:var(--gold);font-weight:700;
}

/* cards -------------------------------------------------- */
.cards{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{
  background:linear-gradient(165deg,rgba(17,21,40,.9),rgba(10,13,26,.72));
  border:1px solid var(--line);border-radius:4px;padding:34px 28px;
  transition:.28s;
}
.card:hover{border-color:rgba(232,200,122,.5);transform:translateY(-4px);
  box-shadow:0 20px 46px rgba(0,0,0,.5)}
.card h3{font-family:var(--display);color:var(--gold);margin:0 0 14px;
  font-size:1.14rem;letter-spacing:.05em;font-weight:600}
.card p{margin:0;color:var(--text-dim);font-size:1rem}
.card .num{font-family:var(--display);font-size:2.3rem;color:var(--cyan);
  display:block;margin-bottom:10px;line-height:1;opacity:.85}

/* film --------------------------------------------------- */
.film{max-width:920px;margin:0 auto 60px}
.frame{
  position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
  box-shadow:0 26px 62px rgba(0,0,0,.7);
}
.frame iframe,.frame video,.frame img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.frame .pending{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;
  background:linear-gradient(165deg,rgba(17,21,40,.86),rgba(5,6,13,.94));
}
.frame .pending span{font-family:var(--display);letter-spacing:.24em;text-transform:uppercase;
  font-size:11.5px;color:var(--cyan)}
.frame .pending strong{font-family:var(--display);font-size:1.35rem;color:var(--gold);font-weight:600}
.frame .pending em{color:var(--text-dim);font-size:.94rem;font-style:normal;max-width:44ch}
.film h3{font-family:var(--display);color:var(--gold-soft);font-size:1.3rem;
  margin:26px 0 8px;letter-spacing:.03em;font-weight:600}
.film .meta{color:var(--text-dim);font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;font-family:var(--display);margin:0 0 14px}
.film p{color:var(--text-dim)}

/* signup ------------------------------------------------- */
.signup{
  background:linear-gradient(165deg,rgba(17,21,40,.94),rgba(10,13,26,.8));
  border:1px solid var(--line);border-radius:5px;padding:52px 40px;
  max-width:660px;margin:0 auto;text-align:center;
  box-shadow:0 26px 66px rgba(0,0,0,.55);
}
.signup h3{font-family:var(--display);color:var(--gold);font-size:1.6rem;margin:0 0 14px;font-weight:600}
.signup p{color:var(--text-dim);margin:0 0 28px}
.signup .fineprint{font-size:.82rem;color:var(--text-dim);margin:22px 0 0;opacity:.8}
.setup-note{
  border:1px dashed rgba(232,200,122,.45);border-radius:4px;
  padding:20px 22px;color:var(--gold-soft);font-size:.92rem;
  background:rgba(232,200,122,.05);margin-top:26px;text-align:left;
}
.setup-note b{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;
  display:block;margin-bottom:7px;font-family:var(--display)}

/* footer ------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding:64px 0 46px;margin-top:40px;
  background:rgba(5,6,13,.6)}
.social{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 34px}
.social a{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:2px;padding:11px 20px;
  font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);transition:.22s;font-weight:600;
}
.social a:hover{border-color:var(--gold);color:var(--gold);background:rgba(232,200,122,.07)}
.social svg{width:15px;height:15px;fill:currentColor;flex:none}
.foot-note{text-align:center;color:var(--text-dim);font-size:.88rem;margin:0 0 8px}
.foot-note.tiny{font-size:.78rem;opacity:.62}
.foot-mark{text-align:center;font-family:var(--display);letter-spacing:.3em;
  text-transform:uppercase;font-size:11px;color:var(--gold);margin:0 0 26px;opacity:.75}

/* responsive --------------------------------------------- */
@media(max-width:860px){
  body{font-size:18px}
  .navtoggle{display:block}
  nav{
    position:absolute;top:100%;left:0;right:0;
    background:rgba(5,6,13,.98);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  nav.open{max-height:420px}
  nav ul{flex-direction:column;gap:0;padding:12px 24px 22px}
  nav a{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05)}
  .hero{padding:74px 0 60px}
  section{padding:64px 0}
  .books{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:36px 20px}
  .signup{padding:38px 24px}
  .prose blockquote{padding-left:20px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* gallery ------------------------------------------------ */
.gallery{columns:3 300px;column-gap:20px}
.tile{margin:0 0 20px;break-inside:avoid;position:relative;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);
  box-shadow:0 16px 40px rgba(0,0,0,.6);transition:.3s}
.tile:hover{border-color:rgba(232,200,122,.55);transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(0,0,0,.75)}
.tile img{width:100%;height:auto;display:block}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-family:var(--display);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);
  background:linear-gradient(transparent,rgba(5,6,13,.94));
  opacity:0;transition:.28s;
}
.tile:hover figcaption{opacity:1}
@media(max-width:640px){.gallery{columns:2 150px;column-gap:12px}.tile{margin-bottom:12px}
  .tile figcaption{opacity:1;font-size:9px;letter-spacing:.14em;padding:20px 10px 9px}}

/* card as link ------------------------------------------- */
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover h3{color:var(--gold-soft)}

/* home art strip ----------------------------------------- */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:6px}
.strip img{width:100%;height:230px;object-fit:cover;display:block;border-radius:3px;
  border:1px solid var(--line);filter:saturate(.85) brightness(.88);transition:.32s}
.strip a:hover img{filter:none;border-color:var(--gold);transform:translateY(-4px)}
@media(max-width:860px){.strip{grid-template-columns:repeat(3,1fr)}.strip img{height:150px}}

/* poem ---------------------------------------------------- */
.poem{
  margin:44px auto;max-width:640px;padding:46px 40px;
  border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(165deg,rgba(17,21,40,.85),rgba(5,6,13,.6));
  box-shadow:0 26px 62px rgba(0,0,0,.5);position:relative;
}
.poem::before,.poem::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.poem::before{top:20px}
.poem::after{bottom:20px}
.poem .lines{
  font-family:var(--serif);font-size:1.16rem;line-height:2.05;
  color:var(--gold-soft);font-style:italic;margin:0;text-align:left;
}
.poem .lines .close{font-style:normal;color:var(--text-dim);font-size:.96rem}
.poem .cite{
  margin:32px 0 0;text-align:center;font-family:var(--display);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);line-height:2;
}
.poem .cite b{color:var(--cyan);font-weight:600}
@media(max-width:640px){.poem{padding:34px 22px}.poem .lines{font-size:1.03rem;line-height:1.95}}

/* source card --------------------------------------------- */
.source{
  margin:44px auto 0;max-width:660px;padding:28px 30px;
  border:1px solid var(--line);border-left:2px solid var(--cyan);border-radius:3px;
  background:rgba(17,21,40,.5);
}
.source .kicker{font-family:var(--display);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.source p{margin:0 0 12px;font-size:1rem;color:var(--text-dim)}
.source .q{color:var(--gold-soft);font-style:italic;font-size:1.08rem}
.source a{font-size:.94rem}

/* epigraph ------------------------------------------------ */
.epigraph{
  max-width:740px;margin:0 auto;padding:52px 40px;text-align:center;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.epigraph .mark{
  font-family:var(--display);font-size:4.6rem;line-height:.6;color:var(--gold);
  opacity:.28;display:block;margin-bottom:14px;
}
.epigraph q{
  display:block;quotes:none;font-family:var(--display);font-weight:600;
  font-size:clamp(1.25rem,3.1vw,1.95rem);line-height:1.5;letter-spacing:.02em;
  background:linear-gradient(160deg,#fff 10%,var(--gold-soft) 45%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.epigraph .by{
  margin:28px 0 0;font-family:var(--display);font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);line-height:2.1;
}
.epigraph .by b{color:var(--cyan);font-weight:600}
.epigraph .by a{color:var(--text-dim);border-bottom:1px solid rgba(232,200,122,.3)}
.epigraph .by a:hover{color:var(--gold)}
@media(max-width:640px){.epigraph{padding:38px 18px}}



/* --- Nefarious reels grid --- */
.reelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:22px}
.reel{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,rgba(17,21,40,.7),rgba(6,8,16,.9));
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.reel:hover{transform:translateY(-4px);border-color:rgba(232,200,122,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(232,200,122,.18)}
.reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#05060d}
.reel figcaption{padding:13px 15px 16px;display:block}
.reel .rnum{display:block;font-family:var(--display);font-size:10.5px;letter-spacing:.3em;
  color:var(--gold-soft);opacity:.75;margin-bottom:5px}
.reel strong{display:block;font-family:var(--display);font-size:1rem;letter-spacing:.06em;
  color:var(--gold);margin-bottom:6px}
.reel em{display:block;font-style:italic;font-size:.9rem;color:var(--text-dim);line-height:1.5}
@media(max-width:640px){.reelgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}


/* ================= AUTHOR DOSSIER — the archive reads the author ================= */
.dossier{margin:54px 0 40px;padding:36px 34px 34px;position:relative;border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 15% 0%,rgba(91,141,217,.10),transparent 60%),
    linear-gradient(180deg,rgba(17,21,40,.85),rgba(5,6,13,.94));
  box-shadow:inset 0 0 0 1px rgba(232,200,122,.06),0 26px 70px rgba(0,0,0,.55)}
.dossier:before,.dossier:after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.85}
.dossier:before{top:10px;left:10px;border-right:0;border-bottom:0}
.dossier:after{bottom:10px;right:10px;border-left:0;border-top:0}
.dossier-head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:26px}
.stamp{display:inline-block;font-family:var(--display);font-size:10px;letter-spacing:.42em;
  color:var(--ink);background:var(--gold);padding:5px 12px 4px;border-radius:2px;
  transform:rotate(-1.2deg);box-shadow:0 0 22px rgba(232,200,122,.45)}
.dfile{font-family:var(--display);font-size:11px;letter-spacing:.34em;color:var(--text-dim);
  text-transform:uppercase;margin:16px 0 8px}
.dossier-head h2{font-family:var(--display);color:var(--gold);font-size:1.9rem;margin:0 0 14px;line-height:1.2}
.dnote{color:var(--text-dim);font-style:italic;line-height:1.75;max-width:64ch;margin:0}

/* coordinate lock */
.coord{margin:0 0 34px;padding:24px 22px 20px;border:1px solid rgba(127,227,224,.22);
  background:linear-gradient(180deg,rgba(10,20,34,.7),rgba(5,8,16,.6))}
.ceyebrow{font-family:var(--display);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 18px}
.crow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.cell{padding:16px 14px;border:1px solid var(--line);border-radius:3px;text-align:center;
  background:rgba(5,7,15,.6);position:relative;overflow:hidden}
.cell:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.cell span{display:block;font-family:var(--display);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.cell strong{display:block;font-family:var(--display);font-size:1.45rem;color:var(--gold);
  letter-spacing:.06em;margin-bottom:8px;text-shadow:0 0 26px rgba(232,200,122,.4)}
.cell em{display:block;font-size:.83rem;color:var(--text-dim);font-style:italic;line-height:1.5}
.cfoot{margin:18px 0 0;font-size:.9rem;color:var(--text-dim);line-height:1.7}

.dsub{font-family:var(--display);color:var(--gold-soft);font-size:1.02rem;letter-spacing:.24em;
  text-transform:uppercase;margin:34px 0 20px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* instruments */
.disciplines{list-style:none;counter-reset:none;padding:0;margin:0;display:grid;gap:2px}
.disciplines li{position:relative;padding:18px 20px 18px 74px;color:var(--text);line-height:1.72;
  border-left:2px solid rgba(232,200,122,.20);background:rgba(255,255,255,.012);transition:.25s}
.disciplines li:hover{background:rgba(232,200,122,.05);border-left-color:var(--gold)}
.disciplines .ix{position:absolute;left:22px;top:18px;font-family:var(--display);font-size:.86rem;
  letter-spacing:.1em;color:var(--gold);opacity:.55}
.disciplines strong{display:block;font-family:var(--display);color:var(--gold);font-size:1.06rem;
  letter-spacing:.05em;margin-bottom:5px}
.disciplines li.flag{border-left-color:var(--cyan);
  background:linear-gradient(90deg,rgba(127,227,224,.10),transparent 70%)}
.disciplines li.flag .ix,.disciplines li.flag strong{color:var(--cyan)}

.studies p{color:var(--text);line-height:1.82;margin:0 0 16px;max-width:72ch}
.studies strong{font-family:var(--display);color:var(--gold-soft);letter-spacing:.03em}
.studies .keep{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--display);font-style:normal;color:var(--gold);letter-spacing:.1em;font-size:1.02rem}
@media(max-width:640px){
  .dossier{padding:26px 18px}
  .dossier-head h2{font-size:1.45rem}
  .disciplines li{padding:16px 14px 16px 60px}
  .disciplines .ix{left:16px}
}

/* ============================================================
   ARTIFACT LAYER — the object in the hand
   ============================================================ */
.lgp-field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
body>*:not(.lgp-field){position:relative;z-index:1}

/* the seam — reading progress as a drawn gold line */
.lgp-seam{position:fixed;top:0;left:0;right:0;height:2px;z-index:99;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,rgba(232,200,122,0),var(--gold),var(--cyan));
  box-shadow:0 0 16px rgba(232,200,122,.75);transition:transform .12s linear}

/* the iris — it looks at you */
.lgp-iris{position:relative;display:inline-block;width:26px;height:26px;margin-right:11px;
  flex:0 0 26px;vertical-align:middle}
.lgp-iris .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,200,122,.55)}
.lgp-iris .r2{inset:5px;border-color:rgba(127,227,224,.45);animation:lgpSpin 14s linear infinite}
.lgp-iris .pupil{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(232,200,122,.95);
  transition:transform .16s cubic-bezier(.2,.7,.3,1)}
@keyframes lgpSpin{to{transform:rotate(360deg)}}
header .wrap,.topbar .wrap{display:flex;align-items:center}

/* unsealing */
.lgp-seal{opacity:0;transform:translateY(16px);filter:blur(2px);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1),filter .72s}
.lgp-open{opacity:1;transform:none;filter:none}

/* gold-leaf corner brackets — the plate around the content */
.dossier,.signup,.band>.wrap>.card,.reel,.book{position:relative}
.plate{position:relative;padding:30px 28px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,21,40,.55),rgba(5,6,13,.75))}
.plate:before,.plate:after{content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--gold);opacity:.8;pointer-events:none}
.plate:before{top:8px;left:8px;border-right:0;border-bottom:0}
.plate:after{bottom:8px;right:8px;border-left:0;border-top:0}

/* display type — let it breathe like the covers */
.hero h1,.prose h2,.dossier-head h2{letter-spacing:.045em}
.eyebrow{opacity:.9}

/* instruments respond */
.book:hover .shot img,.film:hover .frame{filter:saturate(1.12) brightness(1.06)}
.book .shot img{transition:filter .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.book:hover .shot img{transform:translateY(-3px) scale(1.012)}
a.btn{position:relative;overflow:hidden}
a.btn:after{content:"";position:absolute;inset:0;background:
  linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 46%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
a.btn:hover:after{transform:translateX(120%)}


/* ---- container repair: .prose{max-width:none} was flattening every long-form page ---- */
.wrap.prose,.wrap.narrow,.wrap.narrow.prose{max-width:900px;margin-left:auto;margin-right:auto}
.dossier .studies p,.dnote{max-width:none}
/* stamp: letter-spacing was clipping the final glyph */
.stamp{padding-right:8px;text-indent:.42em}


/* --- plain answers: built to be extracted --- */
.answers{margin:44px 0 10px}
.qa{padding:18px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa h3{font-family:var(--display);color:var(--gold-soft);font-size:1.04rem;
  letter-spacing:.03em;margin:0 0 9px}
.qa p{margin:0;color:var(--text);line-height:1.78}

/* ============================================================
   STACKING REPAIR — mobile menu fix, 2026-08-21
   ------------------------------------------------------------
   `body>*:not(.lgp-field){position:relative;z-index:1}` above has
   specificity 0-1-1, which outranks `.site-head` at 0-1-0. It was
   silently overriding the header: position went sticky -> relative
   and z-index 60 -> 1, the same layer as <main>. Equal z-index means
   DOM order wins, and <main> comes after <header>, so on phones the
   open dropdown painted BEHIND the page text and taps landed on the
   article instead of the menu links. Desktop was unaffected because
   the nav sits inline there and never overlaps <main>.
   Re-asserted here, after the offending rule, at matching specificity.
   ============================================================ */
body>.site-head{position:sticky;top:0;z-index:60}
body>.lgp-seam{position:fixed;top:0;left:0;right:0;z-index:99}

/* iOS Safari needs the prefix or the header blur silently no-ops */
.site-head{-webkit-backdrop-filter:blur(14px)}

@media(max-width:860px){
  /* SECOND BUG: .brand is white-space:nowrap inside a flex row, and the
     brand + injected iris are wider than a phone. A flex item defaults to
     min-width:auto, so it refused to shrink and physically overlapped the
     ☰ button — tapping the menu hit the brand link and reloaded Home.
     Let it shrink and wrap, and put the toggle on its own layer. */
  .site-head .wrap{gap:10px}
  .brand{min-width:0;flex:1 1 auto;white-space:normal;font-size:12.5px;
    letter-spacing:.14em;line-height:1.3}
  .brand small{white-space:normal;font-size:9px;letter-spacing:.08em;margin-top:1px}
  .lgp-iris{flex:0 0 20px;width:20px;height:20px;margin-right:8px}
  .navtoggle{flex:0 0 auto;position:relative;z-index:80}

  /* the panel itself sits above the page, and is scrollable if the
     phone's text size makes seven items taller than the screen.
     Fully opaque — at .98 the hero type still ghosted through behind
     the menu, which is what made it read as "dropped into the text". */
  nav{z-index:70;background:#05060d;box-shadow:0 22px 46px rgba(0,0,0,.62)}
  nav.open{max-height:min(72vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* comfortable thumb targets */
  nav a{padding:15px 0;min-height:44px;display:flex;align-items:center}
  .navtoggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
}