/* ===========================================================
   JANYA AGGARWAL — ARCHITECTURE PORTFOLIO
   Shared design system
   =========================================================== */

:root{
  --bg: #F7F7F5;
  --ink: #121212;
  --mute: #8A8A86;
  --line: #D8D7D2;
  --red: #C0272D;
  --red-glow: #FF4B4B;
  --header-h: 70px;
  --ticker-h: 38px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;}

.display{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 36px; background:var(--bg);
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
.logo{font-size:18px; letter-spacing:0.04em; text-decoration:none;}
header.site-header nav a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none; margin-left:28px;
  position:relative; padding-bottom:3px;
}
header.site-header nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--red);transition:width .25s ease;}
header.site-header nav a:hover::after{width:100%;}

/* ---------- coordinate ticker ---------- */
.ticker{
  height:var(--ticker-h);
  padding:0 36px; border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; color:var(--mute);
  display:flex; align-items:center; gap:10px;
}
.ticker .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
#tickerText{transition:opacity .4s ease;}

/* ---------- HOME hero ---------- */
.hero{position:relative; height:82vh; overflow:hidden; background:#0B0B0B;}
.hero img{width:100%;height:100%;object-fit:contain;display:block;}
.hero-caption{
  position:absolute; left:36px; bottom:32px; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,0.6);
}
.hero-caption .num{font-family:'IBM Plex Mono',monospace;color:var(--red-glow);font-size:13px;letter-spacing:.1em;}
.hero-caption h1{font-size:54px;line-height:1; margin-top:6px;}
.hero-caption a{
  display:inline-block;margin-top:14px;color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:3px;
}
.statement{
  max-width:520px; margin:56px auto 72px; padding:0 24px; text-align:center;
  font-size:13px; line-height:1.45; letter-spacing:.01em; color:var(--mute);
}
.statement strong{color:var(--ink); font-weight:500;}

/* ---------- section labels ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:48px 36px 18px; border-bottom:1px solid var(--ink);
}
.section-head h2{font-size:34px;}
.section-head span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mute);}

/* ---------- index/catalogue ---------- */
.catalogue{padding-bottom:60px;}
.row{
  display:grid; grid-template-columns:70px 1fr 220px 140px; align-items:center;
  padding:22px 36px; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); transition:background .2s ease;
}
.row:hover{background:#EFEFEA;}
.row .n{font-family:'IBM Plex Mono',monospace; color:var(--red); font-size:14px;}
.row .title{font-family:'Big Shoulders',sans-serif; font-weight:600; font-size:22px; text-transform:uppercase;}
.row .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute); letter-spacing:.04em;}
.row .arrow{justify-self:end; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mute); opacity:0; transition:opacity .2s ease;}
.row:hover .arrow{opacity:1; color:var(--red);}
.row.featured{background:var(--ink); color:#F7F7F5;}
.row.featured .meta{color:#999;}
.row.featured:hover{background:#000;}
.row.disabled{opacity:.4; cursor:default; pointer-events:none;}

/* ---------- project page (shared skeleton) ---------- */
.project{position:relative;}
.project-nav{
  display:flex; justify-content:space-between; padding:18px 36px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em;
}
.project-nav a{text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;}

.carousel{position:relative; height:74vh; overflow:hidden; background:#0B0B0B;}
.carousel img, .carousel video{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .6s ease;
}
.carousel img.active{opacity:1;}
.carousel-controls{
  position:absolute; bottom:22px; right:36px; display:flex; gap:10px; z-index:10;
}
.carousel-controls button{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.35);
  color:#fff; font-family:'IBM Plex Mono',monospace; cursor:pointer;
}
.dots{position:absolute;bottom:22px;left:36px;display:flex;gap:8px;z-index:10;}
.dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);}
.dots span.active{background:var(--red-glow);}

.titleblock{
  border-top:2px solid currentColor; border-bottom:1px solid currentColor;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:0 36px;
}
.titleblock div{padding:18px 22px; border-right:1px solid var(--line);}
.titleblock div:last-child{border-right:none;}
.titleblock label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  color:var(--red); text-transform:uppercase; margin-bottom:6px;
}
.titleblock p{font-family:'IBM Plex Mono',monospace; font-size:13px;}

.description{max-width:720px; margin:40px auto; padding:0 36px; font-size:12px; line-height:1.62;}
.description p{margin-bottom:13px; color:var(--mute);}

.gallery-strip{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:30px 36px;}
.gallery-strip img{width:100%; display:block; object-fit:contain; height:340px; background:#0B0B0B;}

.next-project{
  display:flex; justify-content:space-between; align-items:center;
  padding:30px 36px; border-top:1px solid var(--line); margin-top:30px;
}
.next-project .label{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute); letter-spacing:.08em;}
.next-project .title{font-family:'Big Shoulders',sans-serif; font-weight:700; font-size:28px; text-transform:uppercase;}
.next-project a{text-decoration:none;}

/* ---------- dark mood variant ---------- */
.dark{background:var(--ink); color:#F2F0EA;}
.dark .titleblock div{border-right:1px solid #2A2A2A;}
.dark .titleblock label{color:var(--red-glow);}
.dark .next-project{border-top:1px solid #2A2A2A;}
.dark .description p{color:#9A9A95;}
.dark .row{border-bottom:1px solid #2A2A2A;}
.dark .section-head{border-bottom:1px solid #F2F0EA;}
.dark header.site-header{background:var(--ink); border-bottom:1px solid #2A2A2A;}
.dark .ticker{border-bottom:1px solid #2A2A2A; color:#9A9A95;}
.dark footer.site-footer{color:#9A9A95;}

footer.site-footer{padding:50px 36px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute);}

/* ---------- thesis flipbook ---------- */
.book-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:50px 20px; background:#0B0B0B; min-height:84vh; position:relative; gap:22px;
}
.book{
  position:relative; width:min(880px,92vw); aspect-ratio:1.546/1;
  perspective:2600px;
}
.page-static{
  position:absolute; top:0; width:50%; height:100%; overflow:hidden; background:#EFEFEA; z-index:2;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.08);
}
.page-static.left{left:0; visibility:hidden;}
.page-static.right{left:50%;}
.page-static img{width:100%;height:100%;object-fit:cover;display:block;}
.page-flip{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-style:preserve-3d; transform-origin:left center; z-index:1;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
  transform:rotateY(0deg);
}
.page-flip.no-transition{transition:none;}
.page-flip .face{
  position:absolute; top:0; left:0; width:100%; height:100%;
  backface-visibility:hidden; background:#EFEFEA; overflow:hidden;
}
.page-flip .face img{width:100%;height:100%;object-fit:cover;display:block;}
.page-flip .face.back{transform:rotateY(180deg);}
.book::after{
  content:''; position:absolute; top:0; left:50%; width:1px; height:100%;
  background:rgba(0,0,0,0.25); box-shadow:0 0 14px rgba(0,0,0,0.3); z-index:3; pointer-events:none;
}
.book-nav-row{display:flex; align-items:center; gap:18px;}
.book-nav-row button{
  width:40px; height:40px; border:1px solid #444; background:transparent; color:#F2F0EA;
  font-family:'IBM Plex Mono',monospace; font-size:16px; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.book-nav-row button:hover{border-color:var(--red-glow); color:var(--red-glow);}
.book-nav-row button:disabled{opacity:.3; cursor:default;}
#bookProgress{color:#9A9A95; font-size:11px; letter-spacing:.08em;}