@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root{
 --black:#080808;--near:#101010;--paper:#e9e7e0;--ink:#151515;--soft:#a9a69d;
 --line:rgba(235,233,226,.18);--max:1320px;--pad:clamp(22px,4vw,64px)
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font-family:"Libre Baskerville",Georgia,serif}
a{color:inherit;text-decoration:none} button{font:inherit}
.site-header{height:82px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;position:fixed;inset:0 0 auto;z-index:20;border-bottom:1px solid transparent;transition:.3s;background:linear-gradient(#080808d9,transparent)}
.site-header.scrolled{background:#080808ed;border-color:var(--line);backdrop-filter:blur(12px)}
.mini-mark,.site-nav,.menu-toggle,.eyebrow,.file-meta,.project-meta,.footer,.scroll-cue,.tabs{font-family:"DM Mono",monospace;text-transform:uppercase;letter-spacing:.18em;font-size:11px}
.mini-mark{display:flex;align-items:center;letter-spacing:.22em}.mini-mark i{font-family:Georgia,serif;font-style:normal;font-size:24px;line-height:0;margin:0 3px}
.site-nav{display:flex;gap:34px}.site-nav a{opacity:.72}.site-nav a:hover{opacity:1}
.menu-toggle{display:none;background:none;border:0;color:inherit}
.hero{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-inner{text-align:center;position:relative;z-index:2;width:100%;padding:0 var(--pad)}
.wordmark{font-family:"Times New Roman",Didot,Georgia,serif;font-weight:400;font-size:clamp(56px,11vw,168px);letter-spacing:.14em;line-height:.85;margin:.18em 0 .28em;white-space:nowrap}
.wordmark i{font-style:normal;display:inline-block;font-size:1.06em;margin-left:.01em;margin-right:.02em}

.tagline{font-size:clamp(12px,1.3vw,17px);letter-spacing:.3em}
.moon{position:absolute;width:min(54vw,720px);aspect-ratio:1;border-radius:50%;right:-10vw;top:5vh;opacity:.72;background:radial-gradient(circle at 34% 42%,#c9c7bd 0 1%,#89877f 2%,#343432 22%,#111 55%,#050505 70%);filter:contrast(1.25)}
.moon:after{content:"";position:absolute;inset:-2%;border-radius:50%;background:#080808;transform:translate(-16%,2%);box-shadow:18px 0 40px #ddd2}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);opacity:.6}.scroll-cue span{margin-left:12px}
.section{max-width:var(--max);margin:auto;padding:clamp(80px,10vw,150px) var(--pad)}
.section-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:46px}
.section h2{font-weight:400;font-size:clamp(34px,5vw,70px);margin:.15em 0}
.section-note{max-width:360px;color:var(--soft);font-style:italic;line-height:1.7}
.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px 24px}
.file-card{display:block}.file-visual,.unknown-space{height:clamp(230px,26vw,390px);border:1px solid var(--line);overflow:hidden;position:relative;background:#0d0d0d}
.file-card:hover .file-visual,.file-card:hover .unknown-space{border-color:#e9e7e066}
.file-meta{display:flex;justify-content:space-between;color:var(--soft);margin:15px 0 9px;letter-spacing:.12em}
.file-card h3{font-weight:400;font-size:clamp(28px,3vw,44px);margin:0}.file-card p{color:var(--soft);font-style:italic;font-size:13px}
.fugue-visual{background:radial-gradient(ellipse at 48% 38%,#4c4c48 0,#1a1a19 14%,#080808 60%)}
.ghost-door{position:absolute;width:19%;height:58%;left:40%;bottom:0;border:1px solid #aaa3;box-shadow:0 0 50px #aaa2 inset}
.thirteen-visual{background:#deddd7;color:#191919;display:grid;place-items:center}.thirteen-visual span{font-size:clamp(90px,13vw,190px);opacity:.16}
.resonance-visual{display:grid;place-items:center;background:linear-gradient(90deg,#070707,#181818 50%,#070707)}
.wave{width:90%;height:90px;background:repeating-linear-gradient(90deg,transparent 0 7px,#d8d5ca88 8px 9px,transparent 10px 14px);clip-path:polygon(0 48%,4% 45%,7% 60%,10% 24%,13% 80%,16% 42%,20% 50%,25% 44%,29% 62%,33% 17%,37% 85%,42% 38%,48% 53%,55% 46%,60% 57%,66% 33%,72% 68%,78% 42%,84% 55%,90% 47%,100% 50%,100% 52%,0 52%)}
.unknown-space{display:grid;place-items:center;background:linear-gradient(135deg,#0a0a0a,#111)}.unknown-space span{font:10px "DM Mono";letter-spacing:.25em;color:#777}
.unknown h3{font-size:20px;letter-spacing:.05em}
.crypt-gateway{text-align:center;border-top:1px solid var(--line)}.crypt-gateway p:not(.eyebrow){max-width:620px;margin:0 auto 30px;color:var(--soft);line-height:1.8}
.text-link{font:11px "DM Mono";letter-spacing:.2em;border-bottom:1px solid #aaa;padding-bottom:5px}
.footer{border-top:1px solid var(--line);padding:28px var(--pad);display:flex;justify-content:space-between;color:#777}

/* project pages */
.project-hero{min-height:72svh;padding:140px var(--pad) 60px;max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.breadcrumb{font:10px "DM Mono";letter-spacing:.16em;color:var(--soft);text-transform:uppercase}
.project-title{font-size:clamp(70px,12vw,180px);font-weight:400;line-height:.8;margin:.28em 0}.project-tag{font-style:italic;color:var(--soft);font-size:clamp(15px,2vw,22px);line-height:1.6}
.project-art{height:min(60vh,650px);border:1px solid var(--line);position:relative;overflow:hidden}
.art-fugue{background:radial-gradient(circle at 50% 28%,#5b5b57,#171716 17%,#070707 60%)}.art-fugue:after{content:"";position:absolute;left:44%;bottom:0;width:12%;height:55%;border:1px solid #aaa3}
.art-13{background:#deddd7}.art-13:before{content:"N-013";position:absolute;inset:0;display:grid;place-items:center;color:#1112;font-size:clamp(70px,10vw,150px)}
.art-resonance{background:linear-gradient(#171717,#060606);display:grid;place-items:center}
.tabs{max-width:var(--max);margin:auto;padding:0 var(--pad);display:flex;gap:32px;border-bottom:1px solid var(--line);overflow:auto}.tabs span{padding:18px 0;white-space:nowrap}.tabs span:first-child{border-bottom:1px solid currentColor}
.project-body{max-width:var(--max);margin:auto;padding:80px var(--pad) 130px;display:grid;grid-template-columns:1.4fr .6fr;gap:8vw}
.project-body h2{font-weight:400;font-size:clamp(30px,4vw,52px);line-height:1.25}.project-body p{color:var(--soft);line-height:1.9}
.project-meta{border-top:1px solid var(--line)}.project-meta div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 0}.project-meta b{font-weight:400;color:var(--soft)}
.theme-light{background:#e5e3dc;color:#151515}.theme-light .site-header{background:linear-gradient(#e5e3dce8,transparent)}.theme-light .site-header.scrolled{background:#e5e3dcf0}.theme-light{--line:rgba(20,20,20,.2);--soft:#68665f}.theme-light .footer{color:#666}.theme-light .project-art{border-color:#2224}
.signal{width:90%;height:120px;background:repeating-linear-gradient(90deg,transparent 0 4px,#ddd 5px 6px,transparent 7px 10px);clip-path:polygon(0 50%,5% 47%,9% 65%,13% 15%,17% 84%,21% 35%,27% 58%,33% 30%,39% 76%,45% 12%,51% 88%,57% 42%,64% 60%,71% 25%,78% 70%,84% 43%,91% 55%,100% 49%,100% 52%,0 52%)}

/* crypt/about/unknown */
.page-shell{max-width:var(--max);margin:auto;padding:150px var(--pad) 120px;min-height:100svh}
.page-title{font-size:clamp(60px,10vw,150px);font-weight:400;margin:.2em 0}.lede{max-width:720px;color:var(--soft);font-style:italic;line-height:1.9}
.crypt-list{margin-top:80px;border-top:1px solid var(--line)}.crypt-entry{display:grid;grid-template-columns:130px 1fr auto;gap:30px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}.crypt-entry small{font:10px "DM Mono";letter-spacing:.14em;color:var(--soft)}.crypt-entry h3{font-weight:400;margin:0}.crypt-entry span{font:10px "DM Mono";color:#777}
.about-copy{max-width:780px;margin-top:70px}.about-copy p{font-size:clamp(18px,2.2vw,28px);line-height:1.75}
.denied{display:grid;place-items:center;text-align:center;min-height:100svh;padding:40px}.denied h1{font-size:clamp(50px,9vw,130px);font-weight:400}.denied p{font:11px "DM Mono";letter-spacing:.2em;color:#777}

@media(max-width:760px){
 .site-header{height:66px}.menu-toggle{display:block;color:var(--paper)}.theme-light .menu-toggle{color:var(--ink)}
 .site-nav{display:none;position:absolute;top:66px;left:0;right:0;padding:30px var(--pad);background:#090909;flex-direction:column;border-bottom:1px solid var(--line)}
 .theme-light .site-nav{background:#e5e3dc}.site-nav.open{display:flex}
 .wordmark{font-size:clamp(43px,15vw,76px);letter-spacing:.04em}.moon{width:90vw;right:-48vw;top:13vh}
 .tagline{font-size:10px}.file-grid{grid-template-columns:1fr}.section-head{display:block}.section-note{margin-top:20px}
 .project-hero{grid-template-columns:1fr;padding-top:110px}.project-art{height:46vh}.project-body{grid-template-columns:1fr}
 .crypt-entry{grid-template-columns:1fr;gap:8px}.footer{gap:20px;flex-direction:column}
}

/* ===== V2 HOMEPAGE ===== */
.wordmark-v2{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(16px,2.65vw,52px);
  letter-spacing:0;
  white-space:normal;
}
.wordmark-v2 span,.wordmark-v2 i{display:inline-block}
.wordmark-v2 i{margin:0;font-size:1.07em}

.file-grid-v2{
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.file-grid-v2 .file-card h3{
  font-size:clamp(24px,2vw,35px);
  margin-top:4px;
}
.file-grid-v2 .file-card p{
  font-size:12px;
}
.file-grid-v2 .file-visual{
  height:clamp(260px,30vw,430px);
}
.card-number{
  position:absolute;
  left:18px;
  top:18px;
  z-index:4;
  font:11px "DM Mono",monospace;
  letter-spacing:.16em;
  color:#d8d6ce;
}
.thirteen-thumb{
  background:
    linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
    linear-gradient(90deg,#e5e5e1 0 9%,#d8d8d4 9% 10%,#eeeeea 10% 90%,#d8d8d4 90% 91%,#e5e5e1 91%);
  color:#111;
}
.clinical-door{
  position:absolute;
  width:34%;
  height:58%;
  left:33%;
  bottom:12%;
  background:#d9d9d4;
  border:1px solid #777;
  box-shadow:0 0 0 999px rgba(255,255,255,.04);
}
.clinical-door:before{
  content:"";
  position:absolute;
  left:-58%;
  right:-58%;
  top:-12%;
  height:1px;
  background:#aaa;
  box-shadow:0 90px 0 #bbb,0 180px 0 #ccc;
}
.clinical-door span{
  position:absolute;
  top:44%;
  left:50%;
  transform:translate(-50%,-50%);
  font:11px "DM Mono",monospace;
}
.thirteen-thumb .card-number{color:#222}

.resonance-thumb{
  background:
    linear-gradient(#0b0b0b,#080808),
    repeating-linear-gradient(0deg,transparent 0 7px,#ffffff05 8px 9px);
}
.signal-circle{
  position:absolute;
  width:48%;
  aspect-ratio:1;
  border:1px solid #b9b6ad77;
  border-radius:50%;
  left:26%;
  top:23%;
}
.wave-v2{
  position:absolute;
  width:86%;
  left:7%;
  top:39%;
  opacity:.9;
}

.fugue-thumb{
  background:
    radial-gradient(circle at 66% 58%,#bfc0bd55 0 1%,transparent 2%),
    linear-gradient(#1d2228 0 38%,#14181c 39% 52%,#0a0b0d 53%);
}
.fugue-thumb:before{
  content:"";
  position:absolute;
  inset:52% 0 0;
  background:
    radial-gradient(ellipse at 30% 10%,#23262a 0 18%,transparent 19%),
    radial-gradient(ellipse at 68% 0,#1b1e22 0 22%,transparent 23%),
    linear-gradient(#090a0b,#050505);
}
.horizon{
  position:absolute;left:0;right:0;top:52%;height:1px;background:#c7c4b755;
}
.beacon{
  position:absolute;
  width:3px;height:24%;
  left:68%;bottom:28%;
  background:#a9a9a5;
  box-shadow:0 0 18px #fff8;
}
.beacon:after{
  content:"";
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:#ddd;top:-5px;left:-2px;box-shadow:0 0 24px #fff;
}

.unknown-thumb{
  background:linear-gradient(135deg,#070707,#0d0d0d);
}
.corner{
  position:absolute;width:24px;height:24px;border-color:#bbb7;opacity:.7
}
.corner.tl{left:36px;top:56px;border-left:1px solid;border-top:1px solid}
.corner.tr{right:36px;top:56px;border-right:1px solid;border-top:1px solid}
.corner.bl{left:36px;bottom:56px;border-left:1px solid;border-bottom:1px solid}
.corner.br{right:36px;bottom:56px;border-right:1px solid;border-bottom:1px solid}
.crosshair{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:28px "DM Mono",monospace;color:#aaa;
}

@media(max-width:1000px){
  .file-grid-v2{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .wordmark-v2{gap:clamp(7px,2vw,12px)}
  .file-grid-v2{grid-template-columns:1fr}
}


/* V7 — Living Archive */
.file-card{transition:transform .35s ease,opacity .35s ease}
.file-card:hover{transform:translateY(-5px)}
.file-card .file-visual{transition:filter .4s ease,transform .45s ease}
.file-card:hover .file-visual{transform:scale(1.012)}
.restricted-link{position:relative}
.restricted-link:after{
  content:"CLEARANCE REQUIRED";
  position:absolute;left:22px;bottom:18px;
  font:8px "DM Mono",monospace;letter-spacing:.18em;
  color:rgba(255,255,255,.55);opacity:0;transform:translateY(4px);
  transition:opacity .45s .65s ease,transform .45s .65s ease;
  pointer-events:none
}
.restricted-link:hover:after{opacity:1;transform:translateY(0)}
body{animation:archive-enter .55s ease both}
@keyframes archive-enter{from{opacity:0}to{opacity:1}}


/* V7.1 — Clearance label placement fix
   Keep the delayed reveal INSIDE the image/file frame, not behind the card title. */
.restricted-link:after{
  left:50% !important;
  bottom:auto !important;
  top:48% !important;
  transform:translate(-50%,-50%) !important;
  padding:9px 12px;
  background:rgba(5,5,5,.82);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(232,229,220,.72) !important;
  white-space:nowrap;
  z-index:5;
}
.restricted-link:hover:after{
  opacity:1;
  transform:translate(-50%,-50%) !important;
}


/* =========================================================
   V9 — MOBILE TORTURE CHAMBER
   Preserve the desktop design; make the archive survive
   phones, notches, thumbs and tiny portrait rectangles.
   ========================================================= */

html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%;height:auto}
body{overflow-x:hidden}
a,button{-webkit-tap-highlight-color:transparent}

@media (max-width: 760px){
  :root{--pad:22px}

  .site-header{
    min-height:70px;
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
  .mini-mark{font-size:16px;letter-spacing:.12em}
  .menu-toggle{font-size:9px;letter-spacing:.17em}
  .site-nav{
    left:0;right:0;top:69px;
    padding:24px var(--pad) 28px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .site-nav a{
    display:block;
    padding:13px 0;
    font-size:12px;
    min-height:22px;
  }

  .footer{
    gap:18px;
    flex-direction:column;
    align-items:flex-start;
    padding-left:var(--pad);
    padding-right:var(--pad);
    line-height:1.6;
  }

  /* Archive cards: one confident column, generous touch targets. */
  .archive-grid,
  .projects-grid,
  .file-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
  .file-card{
    transform:none !important;
    min-width:0;
  }
  .file-card .file-visual{
    min-height:250px;
    transform:none !important;
  }
  .restricted-link:after{
    top:46% !important;
    max-width:calc(100% - 44px);
    text-align:center;
  }

  /* Prevent giant editorial words from causing horizontal scroll. */
  h1,h2,h3,.hero-title,.display-title{
    overflow-wrap:normal;
    word-break:normal;
  }
}

/* Small-phone safety net. */
@media (max-width: 430px){
  :root{--pad:18px}
  .mini-mark{font-size:14px}
  .footer{font-size:8px}
}


/* =========================================================
   V10 — PRE-LAUNCH POLISH
   Keyboard visibility, motion preferences, tap behavior.
   ========================================================= */
:focus-visible{
  outline:1px solid rgba(231,227,217,.9);
  outline-offset:5px;
}
a,button{touch-action:manipulation}
button{font:inherit}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* V10.4 — mobile homepage wordmark fit
   Keep it huge, but guarantee the final S stays inside the viewport. */
@media (max-width: 760px){
  .wordmark-v2{
    width:100%;
    max-width:100%;
    gap:clamp(5px,1.45vw,9px) !important;
    padding-left:2px;
    padding-right:2px;
    box-sizing:border-box;
  }

  .wordmark-v2 span,
  .wordmark-v2 i{
    flex:0 1 auto;
  }

  .hero .wordmark-v2,
  .wordmark.wordmark-v2{
    font-size:clamp(58px, 15.6vw, 92px) !important;
    letter-spacing:0 !important;
    transform:none !important;
  }
}

@media (max-width: 430px){
  .hero .wordmark-v2,
  .wordmark.wordmark-v2{
    font-size:15.1vw !important;
  }
  .wordmark-v2{
    gap:1.2vw !important;
  }
}