/* ═══════════════════════════════════════════
   RESET & TOKENS
═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bone:   #F2EDE3;
  --bone-2: rgba(242,237,227,0.55);
  --bone-3: rgba(242,237,227,0.18);
  --bone-4: rgba(242,237,227,0.07);
  --ink:    #0A090C;
  --ink-2:  #141217;
  --ink-3:  #1e1c22;
  --crimson:#E62E2E;
  --crim-2: rgba(230,46,46,0.22);
  --crim-3: rgba(230,46,46,0.08);
  --muted:  rgba(242,237,227,0.38);
  --faint:  rgba(242,237,227,0.13);
  --fc: 'Cinzel Decorative',serif;
  --fca:'Cinzel',serif;
  --fb:'Libre Baskerville',serif;
  --fm:'Victor Mono',monospace;
}
html{font-size:16px;height:100%}
html, body{
  min-height:100%;background:var(--ink);color:var(--bone);
  font-family:var(--fb);-webkit-font-smoothing:antialiased;
  cursor:none;overflow-x:hidden;overflow-y:hidden;
}

/* ═══════════════════════════════════════════
   CUSTOM CURSOR — quill nib
═══════════════════════════════════════════ */
#cur{
  position:fixed;z-index:9999;pointer-events:none;
  width:22px;height:22px;
  transform:translate(-2px,-2px) rotate(-45deg);
  transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s;
  will-change: left, top, transform;
  opacity: 1;
}
#cur svg{width:100%;height:100%}
#cur.h{transform:translate(-2px,-2px) rotate(-30deg) scale(1.3)}
#cur.c{transform:translate(2px,2px) rotate(-55deg) scale(0.85)}

/* ═══════════════════════════════════════════
   PAPER TEXTURE BACKGROUND
═══════════════════════════════════════════ */
.paper{
  position:fixed;
  inset:0;
  z-index:0;
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(80, 35, 35, 0.35) 0%, rgba(20, 15, 18, 0.9) 70%, var(--ink) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(139, 26, 26, 0.06) 33px, transparent 34px),
    repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(139, 26, 26, 0.04) 33px, transparent 34px);
  background-blend-mode: normal, overlay, overlay;
}
.paper-dust{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: radial-gradient(ellipse at 20% 30%, rgba(139,26,26,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}
.paper-image{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: url('bg_kl.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  filter: brightness(0.5) contrast(1.3);
  will-change: transform;
  transform: translateZ(0);
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    transparent 0%,
    transparent 30%,
    rgba(0,0,0,0.3) 55%,
    rgba(0,0,0,0.6) 80%,
    rgba(0,0,0,0.85) 100%
  );
}
.center-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(ellipse 40% 40% at 50% 50%,
              rgba(139,26,26,0.05) 0%,
              transparent 70%);
}

/* ═══════════════════════════════════════════
   SIDE CHAPTER DIAL
═══════════════════════════════════════════ */
.dial{
  position:fixed;right:32px;top:50%;z-index:100;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.dial-line{width:1px;height:40px;background:var(--faint);margin:0 auto}
.dial-item{
  display:flex;align-items:center;gap:10px;
  cursor:none;padding:4px 0;
  opacity:0;
}
.dial-num{
  font-family:var(--fm);font-size:9px;letter-spacing:0.15em;
  color:var(--muted);transition:color .3s;writing-mode:horizontal-tb;
}
.dial-dot{
  width:5px;height:5px;border-radius:50%;
  border:1px solid var(--muted);
  transition:background .3s,border-color .3s,transform .3s;
}
.dial-item.active .dial-num{color:var(--crimson)}
.dial-item.active .dial-dot{background:var(--crimson);border-color:var(--crimson);transform:scale(1.5)}
.dial-item:hover .dial-num{color:var(--bone)}
.dial-item:hover .dial-dot{border-color:var(--bone)}

/* ═══════════════════════════════════════════
   MAIN WRAPPER
═══════════════════════════════════════════ */
.codex{
  position:fixed;inset:0;z-index:2;
  overflow:hidden;
}

/* ═══════════════════════════════════════════
   CHAPTER SYSTEM
═══════════════════════════════════════════ */
.chapter{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:60px 80px 60px 60px;
  opacity:0;pointer-events:none;
  transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1);
  transform:translateY(30px);
}
.chapter.active{
  opacity:1;pointer-events:all;
  transform:translateY(0);
}
.chapter.out-up{opacity:0;transform:translateY(-40px)}
.chapter.out-down{opacity:0;transform:translateY(40px)}

/* ═══════════════════════════════════════════
   CHAPTER 0 — TITLE SCREEN
═══════════════════════════════════════════ */
#ch0{
  text-align:center;
  background:none;
}
.title-eyebrow{
  font-family:var(--fm);font-size:9px;letter-spacing:0.35em;
  text-transform:uppercase;color:var(--crimson);
  margin-bottom:32px;opacity:0;
}
.title-name{
  font-family:var(--fc);
  font-size:clamp(36px,6vw,82px);
  letter-spacing:0.04em;line-height:1;
  color:var(--bone);margin-bottom:8px;
  overflow:hidden;
}
.title-name .word{display:inline-block;overflow:hidden}
.title-name .char{
  display:inline-block;opacity:0;
  transform:translateY(100%);
}
.title-subtitle{
  font-family:var(--fca);font-size:clamp(11px,1.4vw,15px);
  letter-spacing:0.3em;text-transform:uppercase;
  color:var(--muted);margin-bottom:56px;opacity:0;
}
.title-quote{
  position:relative;
  display:block;
  width:100%;
  text-align:center;
  margin-top:6px;
  margin-bottom:32px;
  opacity:0;
  min-height:3em;
  cursor:none;
}
.tq-zh{
  display:block;
  font-family:var(--fc);
  font-size:clamp(15px,2.2vw,22px);
  letter-spacing:0.14em;
  line-height:1.4;
  background:linear-gradient(135deg,#c23a3a 0%,#8B1A1A 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:opacity .4s ease, filter .4s ease, transform .5s ease;
  will-change:opacity,filter,transform;
}
.tq-char{
  display:inline-block;
  transition:opacity .35s ease, transform .45s cubic-bezier(.4,0,.6,1), letter-spacing .45s ease;
}
.tq-en{
  display:block;
  position:absolute;
  top:0;left:0;right:0;
  font-family:var(--fb);
  font-style:italic;
  font-size:clamp(11px,1.3vw,14px);
  letter-spacing:0.04em;
  line-height:1.7;
  color:var(--bone-2);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.tq-word{
  display:inline-block;
  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.8,.3,1), filter .4s ease;
}
.title-quote.tq-translating .tq-char{
  opacity:0;
  transform:translateY(-6px) scale(0.9);
  letter-spacing:0.22em;
}
.title-quote.tq-translating .tq-word{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.title-quote.tq-translating .tq-en{
  opacity:1;
}
.title-rule{
  width:1px;height:0;background:var(--crimson);
  margin:0 auto 48px;transition:height .8s ease;
}
.title-rule.grown{height:64px}
.title-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--fm);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--muted);cursor:none;
  border:1px solid var(--faint);
  padding:12px 28px;
  transition:color .3s,border-color .3s,background .3s;
}
.title-cta:hover{color:var(--bone);border-color:var(--bone-2);background:var(--bone-4)}
.title-cta-arrow{font-size:14px;transition:transform .3s}
.title-cta:hover .title-cta-arrow{transform:translateX(4px)}

.ch-label{
  position:absolute;top:36px;left:60px;
  font-family:var(--fm);font-size:8.5px;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.ch-label::before{content:'';width:24px;height:1px;background:var(--crimson)}

.corner{
  position:fixed;  /* changed from absolute to fixed */
  width:18px;
  height:18px;
  opacity:0.5;
  z-index:200;  /* increased z-index to stay above everything */
}
.corner-tl{top:20px;left:20px;border-top:1px solid var(--crimson);border-left:1px solid var(--crimson)}
.corner-tr{top:20px;right:50px;border-top:1px solid var(--crimson);border-right:1px solid var(--crimson)}
.corner-bl{bottom:50px;left:20px;border-bottom:1px solid var(--crimson);border-left:1px solid var(--crimson)}
.corner-br{bottom:50px;right:50px;border-bottom:1px solid var(--crimson);border-right:1px solid var(--crimson)}

/* ═══════════════════════════════════════════
   CHAPTER I — THE PERSON
═══════════════════════════════════════════ */
#ch1{
  flex-direction:row;
  gap:64px;
  align-items:center;
  justify-content:center;
  max-width:1100px;margin:0 auto;
  width:100%;
}
.dossier-photo{
  flex-shrink:0;
  position:relative;
  width:230px;
}
.photo-frame{
  width:220px;height:272px;
  background:var(--ink-3);
  border:1px solid var(--bone-3);
  transform:rotate(-2.5deg);
  position:relative;overflow:hidden;
  box-shadow:8px 8px 0 rgba(0,0,0,0.5),0 0 40px rgba(0,0,0,0.4);
}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:sepia(0.25) contrast(1.05);
  display:block;
}
.photo-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(160deg,#1a1820,#0d0c10);
}
.photo-initials{
  font-family:var(--fc);font-size:52px;color:var(--bone-3);
  letter-spacing:0.08em;
}
.photo-ph-label{
  font-family:var(--fm);font-size:8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--faint);
}
.photo-tab{
  position:absolute;bottom:-1px;left:0;right:0;
  background:var(--ink-2);padding:8px 12px;
  border-top:1px solid var(--bone-3);
  font-family:var(--fm);font-size:9px;letter-spacing:0.12em;
  color:var(--muted);text-align:center;
}
.stamp{
  position:absolute;top:18px;right:-12px;
  font-family:var(--fca);font-size:11px;letter-spacing:0.18em;
  color:var(--crimson);border:2px solid var(--crimson);
  padding:4px 8px;transform:rotate(15deg);
  opacity:0.75;white-space:nowrap;
  text-transform:uppercase;
}
.tape{
  position:absolute;top:-14px;left:50%;margin-left:-28px;
  width:56px;height:22px;
  background:rgba(242,237,227,0.07);
  border:1px solid rgba(242,237,227,0.1);
}
.dossier-facts{flex:1;max-width:480px}
.dossier-eyebrow{
  font-family:var(--fm);font-size:8px;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--crimson);
  margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.dossier-eyebrow::after{content:'';flex:1;height:1px;background:var(--crim-2)}
.dossier-heading{
  font-family:var(--fca);font-size:clamp(22px,3vw,36px);
  letter-spacing:0.06em;font-weight:600;
  color:var(--bone);margin-bottom:28px;line-height:1.1;
}
.fact-row{
  display:flex;align-items:baseline;gap:0;
  border-bottom:1px solid var(--faint);
  padding:9px 0;
}
.fact-key{
  font-family:var(--fm);font-size:8.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--crimson);
  width:120px;flex-shrink:0;
}
.fact-val{
  font-family:var(--fm);font-size:11px;letter-spacing:0.05em;
  color:var(--bone-2);
}
.fact-val .cursor-blink{
  display:inline-block;width:7px;height:11px;
  background:var(--bone-2);animation:cblink 1s step-end infinite;
  vertical-align:middle;margin-left:2px;
}
@keyframes cblink{0%,100%{opacity:1}50%{opacity:0}}
.dossier-bio{
  margin-top:24px;
  font-family:var(--fb);font-size:13px;line-height:1.85;
  font-style:italic;color:var(--muted);
}
.dossier-bio em{color:var(--bone-2);font-style:normal}

/* ═══════════════════════════════════════════
   CHAPTER II — THE WORK
═══════════════════════════════════════════ */
#ch2{
  align-items:flex-start;
  justify-content:flex-start;
  padding-top:120px;
  overflow-y:auto;
  max-height: calc(100vh - 60px);
}
.work-header{width:100%;margin-bottom:20px;flex-shrink:0}
.work-eyebrow{
  font-family:var(--fm);font-size:8px;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--crimson);
  margin-bottom:10px;display:flex;align-items:center;gap:12px;
}
.work-eyebrow::after{content:'';width:48px;height:1px;background:var(--crim-2)}
.work-heading{
  font-family:var(--fca);font-size:clamp(22px,3vw,36px);
  letter-spacing:0.06em;color:var(--bone);
}
.work-section{width:100%;margin-bottom:32px;flex-shrink:0}
.work-section-label{
  font-family:var(--fm);font-size:9px;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--crimson);
  margin-bottom:16px;
  margin-top:8px;
  display:flex;align-items:center;gap:10px;
}
.work-section-label::before{content:'';width:14px;height:1px;background:var(--crimson)}
.work-section-label::after{content:'';flex:1;height:1px;background:rgba(242,237,227,0.06)}
.collective-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(240px, 280px));
  gap:20px;
  width:100%;
  justify-content: center;
}
.collective-header {
  width: 100%;
  text-align: center;
  margin-bottom: 28px;
}

.collective-title {
  font-family: var(--fca);
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 0.15em;
  color: var(--crimson);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.collective-subtitle {
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-style: italic;
}
.collective-subtitle::before {
  content: '— ';
  color: var(--crimson);
  letter-spacing: 0.1em;
}
.coll-card{
  position:relative;
  width:100%;
  max-width: 280px;
  margin: 0 auto;
  overflow:hidden;
  border:1px solid var(--faint);
  background:#000000;
  cursor:none;
  transition:border-color .4s,transform .42s cubic-bezier(.4,0,.2,1);
}
.coll-card:not(.pending):hover{
  border-color:rgba(139,26,26,0.55);
  transform:translateY(-6px);
}
.coll-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center top;
  filter:brightness(0.18) sepia(0.4);
  transform:scale(1.04) translateY(0%);
  transition:filter .5s ease, transform 5s cubic-bezier(.25,.46,.45,.94);
  will-change:filter,transform;
}
.coll-card:not(.pending):hover .coll-img{
  filter:brightness(0.45) sepia(0.12);
  transform:scale(1.0) translateY(-12%);
}
.coll-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(10,9,12,1) 0%,
    rgba(10,9,12,0.7) 35%,
    rgba(10,9,12,0.15) 65%,
    transparent 100%);
}
.coll-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
  transition: filter 0.5s ease, transform 5s cubic-bezier(.25,.46,.45,.94);
  will-change: filter, transform;
}
.coll-card:not(.pending):hover .coll-video {
  filter: brightness(1) contrast(1.05);
  transform: scale(1.0) translateY(-8%);
}
.pending .coll-video {
  display: none;
}
.coll-card:not(.pending):hover .coll-video {
  filter: brightness(0.7) sepia(0.05);
  transform: scale(1.0) translateY(-8%);
}
.coll-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 14px 14px;
  z-index:3;
}
.coll-volume{
  font-family:var(--fm);font-size:7px;letter-spacing:0.22em;
  color:var(--crimson);text-transform:uppercase;margin-bottom:5px;
}
.coll-name{
  font-family:var(--fca);font-size:clamp(14px,1.6vw,18px);letter-spacing:0.07em;
  color:var(--bone);line-height:1.1;margin-bottom:4px;
  transition:color .3s;
}
.coll-card:not(.pending):hover .coll-name{color:var(--crimson)}
.coll-tagline{
  font-family:var(--fm);font-size:7px;letter-spacing:0.1em;
  color:var(--muted);line-height:1.5;
  opacity:0;transform:translateY(5px);
  transition:opacity .35s .05s, transform .35s .05s;
}
.coll-card:not(.pending):hover .coll-tagline{opacity:1;transform:translateY(0)}
.coll-status{
  position:absolute;top:10px;left:12px;
  font-family:var(--fm);font-size:7px;letter-spacing:0.14em;
  text-transform:uppercase;z-index:4;
  padding:3px 7px;border:1px solid;
}
.coll-status.live{color:#4ade80;border-color:rgba(74,222,128,0.25);background:rgba(74,222,128,0.05)}
.coll-status.wip{color:rgba(139,26,26,0.8);border-color:rgba(139,26,26,0.2);background:rgba(139,26,26,0.04)}
.coll-link-btn{
  position:absolute;bottom:12px;right:12px;
  font-family:var(--fm);font-size:7px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--crimson);z-index:5;
  opacity:0;transform:translateX(5px);
  transition:opacity .3s, transform .3s;
}
.coll-card:not(.pending):hover .coll-link-btn{opacity:1;transform:translateX(0)}
.pending .coll-img{filter:none;background:linear-gradient(160deg,#0e0c14,#0a0810)!important}
.coll-pending-overlay{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.coll-pending-ring{
  width:36px;height:36px;
  border:1px solid rgba(139,26,26,0.2);
  border-top-color:rgba(139,26,26,0.55);
  border-radius:50%;
  animation:ring-spin 3s linear infinite;
}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.coll-pending-name{
  font-family:var(--fca);font-size:15px;letter-spacing:0.1em;
  color:rgba(242,237,227,0.2);
}
.coll-pending-sub{
  font-family:var(--fm);font-size:7px;letter-spacing:0.22em;
  text-transform:uppercase;color:rgba(139,26,26,0.35);
}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(22px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(22px) rotate(-360deg)}
}
@keyframes flicker{0%,100%{opacity:0.5}45%{opacity:1}65%{opacity:0.7}}
.sites-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:100%;
}
.site-card{
  border:1px solid var(--faint);
  background:rgba(10,9,12,0.5);
  position:relative;overflow:hidden;
  cursor:none;height:110px;
  transition:border-color .3s,transform .32s cubic-bezier(.4,0,.2,1);
}
.site-card:hover{
  border-color:rgba(242,237,227,0.2);
  transform:translateY(-3px);
}
/* .site-thumb removed — no thumbnails in Exhibits section
.site-thumb{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  opacity:0;
  transition:opacity .45s ease;
  filter:brightness(0.14) sepia(0.5);
}*/
.site-body{
  position:relative;z-index:2;
  padding:13px 14px;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
}
.site-tag{
  font-family:var(--fm);font-size:7px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--crimson);
}
.site-title{
  font-family:var(--fca);font-size:13px;letter-spacing:0.06em;
  color:var(--bone);transition:color .3s;line-height:1.1;
}
.site-card:hover .site-title{color:var(--crimson)}
.site-url{
  font-family:var(--fm);font-size:7px;letter-spacing:0.05em;
  color:var(--faint);transition:color .25s;
}
.site-card:hover .site-url{color:var(--muted)}
.site-arrow{
  position:absolute;bottom:10px;right:12px;
  font-family:var(--fm);font-size:7px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--crimson);
  opacity:0;transform:translateX(5px);
  transition:opacity .28s,transform .28s;
}
.site-card:hover .site-arrow{opacity:1;transform:translateX(0)}
.case-file{display:none}.file-thumb{display:none}
.void-txt{font-family:var(--fm);font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);line-height:2.5}

/* ═══════════════════════════════════════════
   CHAPTER III — THE SIGNAL
═══════════════════════════════════════════ */
#ch3{
  flex-direction:row;
  gap:72px;
  align-items:center;
  justify-content:center;
  max-width:1000px;margin:0 auto;width:100%;
}
.book-panel{flex-shrink:0}
.book-cover{
  width:188px;height:270px;
  position:relative;
  transform:rotate(2deg);
  box-shadow:12px 12px 0 rgba(0,0,0,0.6),-2px -2px 0 rgba(139,26,26,0.4);
  cursor:none;
  transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s;
}
.book-cover:hover{transform:rotate(0deg) scale(1.04);box-shadow:18px 18px 0 rgba(0,0,0,0.5),-2px -2px 0 rgba(139,26,26,0.5)}
.book-cover-inner{
  width:100%;height:100%;
  background:linear-gradient(160deg,#1a0a0a,#0d0506);
  border:1px solid rgba(139,26,26,0.5);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:24px 16px;text-align:center;
  position:relative;overflow:hidden;
}
.book-cover-inner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 30%,rgba(139,26,26,0.15) 50%,transparent 70%);
  animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.book-cover-inner::after{
  content:'';
  position:absolute;inset:0;
  border:6px solid transparent;
  border-image:linear-gradient(160deg,rgba(139,26,26,0.6),transparent,rgba(139,26,26,0.3)) 1;
}
.book-ornament{
  font-size:28px;margin-bottom:16px;opacity:0.6;
  font-family:var(--fb);color:var(--crimson);
}
.book-title-txt{
  font-family:var(--fca);font-size:18px;letter-spacing:0.1em;
  color:var(--bone);line-height:1.2;margin-bottom:6px;
}
.book-sub-txt{
  font-family:var(--fm);font-size:7.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--crimson);margin-bottom:20px;
}
.book-author{
  font-family:var(--fb);font-style:italic;font-size:11px;
  color:var(--muted);border-top:1px solid rgba(139,26,26,0.3);
  padding-top:12px;width:100%;text-align:center;
  letter-spacing:0.06em;
}
.book-cta{
  display:block;margin-top:16px;
  font-family:var(--fm);font-size:8px;letter-spacing:0.18em;
  text-transform:uppercase;text-decoration:none;
  color:var(--crimson);border:1px solid var(--crim-2);
  padding:7px 16px;text-align:center;
  transition:background .2s,color .2s;cursor:none;
}
.book-cta:hover{background:var(--crimson);color:var(--bone)}
.signal-panel{flex:1;max-width:400px}
.signal-eyebrow{
  font-family:var(--fm);font-size:8px;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--crimson);
  margin-bottom:20px;display:flex;align-items:center;gap:12px;
}
.signal-eyebrow::after{content:'';flex:1;height:1px;background:var(--crim-2)}
.signal-heading{
  font-family:var(--fca);font-size:clamp(22px,2.8vw,34px);
  letter-spacing:0.06em;color:var(--bone);
  margin-bottom:28px;
}
.freq-bars{
  display:flex;align-items:flex-end;gap:4px;
  height:36px;margin-bottom:28px;
}
.freq-bar{
  width:6px;border-radius:1px;
  background:var(--crimson);opacity:0.7;
  animation:freq var(--d,0.8s) ease-in-out infinite alternate;
}
@keyframes freq{from{height:4px}to{height:var(--h,20px)}}
.signal-socials{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.sig-soc{
  display:flex;align-items:center;gap:16px;
  padding:12px 16px;
  border:1px solid var(--faint);
  text-decoration:none;cursor:none;
  transition:border-color .25s,background .25s;
}
.sig-soc:hover{border-color:var(--bone-3);background:var(--bone-4)}
.sig-soc-icon{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--faint);flex-shrink:0;
}
.sig-soc-icon svg{width:13px;height:13px;fill:var(--bone-2)}
.sig-soc-info{flex:1}
.sig-soc-name{
  font-family:var(--fm);font-size:9px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--bone-2);
  display:block;margin-bottom:2px;
}
.sig-soc-handle{font-family:var(--fm);font-size:9px;color:var(--muted)}
.sig-soc-arrow{
  font-family:var(--fm);font-size:11px;color:var(--faint);
  transition:color .2s,transform .2s;
}
.sig-soc:hover .sig-soc-arrow{color:var(--bone);transform:translateX(4px)}
.signal-contact{
  font-family:var(--fm);font-size:9px;letter-spacing:0.14em;
  color:var(--muted);line-height:2;
}
.signal-contact a{
  color:var(--bone-2);text-decoration:none;
  border-bottom:1px solid var(--faint);
  transition:color .2s,border-color .2s;
  cursor:none;
}
.signal-contact a:hover{color:var(--crimson);border-color:var(--crimson)}

/* ═══════════════════════════════════════════
   STATUS LINE
═══════════════════════════════════════════ */
.statusline{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 60px;
  border-top:1px solid var(--faint);
  background:rgba(10,9,12,0.8);
  backdrop-filter:blur(8px);
  opacity:0;
}
.sl-left{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:8px;letter-spacing:0.16em;color:var(--muted);
}
.sl-dot{width:5px;height:5px;border-radius:50%;background:#4ade80;animation:cblink 3s ease-in-out infinite}
.sl-right{
  font-family:var(--fm);font-size:8px;letter-spacing:0.14em;color:var(--muted);
}

/* ═══════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════ */
.mobile-nav { display: none; }

@media(max-width:900px){
  html, body{overflow-y:auto !important;overflow-x:hidden !important;cursor:auto}
  #cur{display:none}
  .dial{display:none}
  .codex{position:relative;overflow:visible;height:auto;display:block;}
  .chapter{
    position:relative;
    opacity:1;
    pointer-events:all;
    transform:none;
    padding:72px 24px 60px;
    min-height:85vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .chapter.active{
    opacity:1;
    transform:none;
  }
  .chapter.out-up,.chapter.out-down{
    opacity:1;
    transform:none;
  }
  .mobile-nav {
    display: flex;
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: transparent;
    pointer-events: none;
  }
  .mobile-nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    cursor: pointer;
    pointer-events: all;
    position: relative;
    overflow: hidden;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    transition: width 0.3s cubic-bezier(.4,0,.2,1), background 0.3s, border-color 0.3s;
    background: transparent;
  }
  .mobile-nav-item.expanded {
    width: 86px;
    background: rgba(10, 9, 12, 0.88);
    border: 1px solid rgba(139,26,26,0.3);
    backdrop-filter: blur(12px);
  }
  .mobile-nav-item .nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(242,237,227,0.35);
    flex-shrink: 0;
    margin: 0 5px;
    transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  }
  .mobile-nav-item.active .nav-dot {
    background: var(--crimson);
    border-color: var(--crimson);
    box-shadow: 0 0 6px rgba(139,26,26,0.6);
    transform: scale(1.3);
  }
  .mobile-nav-item .nav-label {
    font-family: var(--fm);
    font-size: 7px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242,237,227,0.5);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s 0.05s;
    pointer-events: none;
  }
  .mobile-nav-item.expanded .nav-label {
    opacity: 1;
  }
  .mobile-nav-item.active .nav-label {
    color: var(--crimson);
  }
  .chapter { padding-right: 24px; }
  #ch0 {
    min-height: 100dvh;
    padding-top: 20vh;
    padding-bottom: 60px;
    justify-content: center;
  }
  #ch1{flex-direction:column;gap:40px;padding-top:60px;padding-bottom:20px;align-items:center}
  .dossier-photo{width:180px}
  .photo-frame{width:170px;height:210px}
  .dossier-facts{max-width:100%}
  #ch2{padding-top:0;align-items:flex-start}
  #ch2 {overflow-y: visible !important;height: auto !important;max-height: none !important;}
  .collective-grid{grid-template-columns:1fr;gap:10px}
  .coll-card{max-width:100%;height:auto}
  .coll-video {width: 100%;height: auto;}
  .coll-tagline{opacity:1;transform:none}
  .coll-link-btn{opacity:1;transform:none}
  .sites-grid{grid-template-columns:1fr 1fr;gap:7px}
  .site-card{height:100px}
  .site-arrow{opacity:1;transform:none}
  #ch3{flex-direction:column;gap:40px;padding-top:80px;align-items:center}
  .signal-panel{max-width:100%}
  .statusline{padding:10px 20px;right:0;display:flex}
.corner-tl,
.corner-tr,
.corner-bl,
.corner-br {
  opacity: 0.2 !important;
}
.corner-tr,
.corner-br {
  right: 20px;
}
.corner-bl,
.corner-br {
  bottom: 60px;
  z-index: 100;
}
  a,.case-file,.book-cta,.sig-soc,.title-cta{cursor:pointer}
}

/* --- Mobile Layout Fixes --- */
@media (max-width: 900px) {
  /* Separated padding: #ch1 gets 90px, but #ch2 and #ch3 get much more space for giant titles */
  #ch1 {
    padding-top: 90px !important;
  }
  #ch2, #ch3 {
    padding-top: 140px !important;
  }

  /* Fixes the giant titles so they push content down instead of overlapping */
  h1, h2, .ch-title, .work-heading {
    position: relative !important;
    margin-bottom: 40px !important;
    line-height: 1.2 !important;
  }

  /* Adjusts the label and forces it to sit visually ABOVE other elements */
  .ch-label {
    top: 24px;
    left: 24px;
    z-index: 10 !important;
  }

  /* Stacks the archive/work items vertically so text isn't squashed */
  .work-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Allows the inner text columns to take up the full screen width */
  .work-item > div,
  .work-item > span {
    width: 100% !important;
    text-align: left !important;
  }
}