/* ===========================================================
   danushjeyashankar.com — v2 "Obsidian"
   Home: Clennon-style staggered collage, dark premium.
   Interaction language: First Frame — small caps links, gold
   underline sweeps, counters, year tags.
   Palette: obsidian base; each discipline owns a color:
     Narrative — royal red · Stills — deep blue
     AI & Visual Art — emerald · Commercial — gold
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Space+Grotesk:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* FINAL PALETTE — locked by Danush:
     near-true black · oxblood · ink navy · deep pine · gold-3 · bone parchment */
  --obsidian:#050506;
  --obsidian-2:#0a0a0c;
  --obsidian-3:#101013;
  --ink:#e6e0cd;            /* bone parchment text */
  --ink-dim:rgba(230,224,205,0.6);
  --ink-faint:rgba(230,224,205,0.32);
  --hairline:rgba(230,224,205,0.12);

  --gold:#bf9c25;           /* gold 3 */
  --gold-bright:#dcba48;
  --red:#4a0e14;            /* oxblood */
  --red-bright:#8f2531;
  --blue:#060d1d;           /* ink navy */
  --blue-bright:#24407a;
  --emerald:#073124;        /* deep pine */
  --emerald-bright:#17694a;

  --serif:'Playfair Display', serif;
  --sans:'Space Grotesk', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--obsidian); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

::selection{ background:var(--gold); color:var(--obsidian); }

/* ---------- placeholder frames (swap for real images) ---------- */
.ph{
  position:relative; width:100%; height:100%;
  background:
    radial-gradient(ellipse at 65% 30%, rgba(191,156,37,0.10), transparent 55%),
    linear-gradient(150deg, #17171d 0%, #0d0d11 55%, #08080a 100%);
  display:flex; align-items:flex-end;
}
.ph-label{ font-family:var(--mono); font-size:.6rem; color:rgba(230,224,205,0.35); padding:.7rem .9rem; letter-spacing:.02em; }
.ph.t-red{ background:radial-gradient(ellipse at 60% 25%, rgba(143,37,49,0.4), transparent 60%), linear-gradient(150deg,#1a0d11 0%,#0d0d11 60%,#08080a 100%); }
.ph.t-blue{ background:radial-gradient(ellipse at 60% 25%, rgba(36,64,122,0.45), transparent 60%), linear-gradient(150deg,#0d1220 0%,#0c0d13 60%,#08080a 100%); }
.ph.t-emerald{ background:radial-gradient(ellipse at 60% 25%, rgba(23,105,74,0.35), transparent 60%), linear-gradient(150deg,#0c1712 0%,#0c0f0d 60%,#08080a 100%); }
.ph.t-gold{ background:radial-gradient(ellipse at 60% 25%, rgba(191,156,37,0.25), transparent 60%), linear-gradient(150deg,#191408 0%,#100e09 60%,#08080a 100%); }

/* ---------- nav — First Frame language ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.8rem 3rem;
  background:linear-gradient(180deg, rgba(8,8,10,0.85) 0%, transparent 100%);
}
.nav-mark{ font-family:var(--sans); font-weight:500; font-size:.82rem; letter-spacing:.22em; }
.nav-links{ display:flex; gap:2.2rem; list-style:none; }
.nav-links a{
  position:relative; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); padding-bottom:.25rem; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold-bright); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:820px){ .nav{ padding:1.2rem 1.4rem; } .nav-links{ display:none; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- page head (big serif statement) ---------- */
.page-head{ padding:10rem 3rem 3rem; max-width:74rem; }
.page-head .kicker{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-bright); display:block; margin-bottom:1.2rem;
}
.page-head h1{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,6.5vw,5.4rem); line-height:1.02;
}
.page-head h1 em{ font-style:italic; }
.page-head h1 .c-red{ color:var(--red-bright); }
.page-head h1 .c-blue{ color:var(--blue-bright); }
.page-head h1 .c-emerald{ color:var(--emerald-bright); }
.page-head h1 .c-gold{ color:var(--gold-bright); }
.page-head .sub{
  margin-top:1.8rem; font-size:.95rem; color:var(--ink-dim); max-width:40rem; line-height:1.75;
}
.page-head .meta-row{
  display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase;
}
@media (max-width:820px){ .page-head{ padding:7rem 1.4rem 2rem; } }

/* ---------- collage feed (Clennon structure, obsidian skin) ---------- */
.collage{ position:relative; padding:3rem 3rem 7rem; }
.collage-row{ display:flex; gap:2.5rem; margin-bottom:5.5rem; align-items:flex-start; }
.collage-row.rev{ flex-direction:row-reverse; }
.c-item{ display:block; position:relative; }
.c-item .frame{ overflow:hidden; position:relative; }
.c-item .frame::after{
  content:''; position:absolute; inset:0; border:1px solid transparent; transition:border-color .4s;
}
.c-item:hover .frame::after{ border-color:var(--tag-c, var(--gold)); }
.c-item .frame .ph{ transition:transform .8s var(--ease); }
.c-item:hover .frame .ph{ transform:scale(1.025); }
.c-main{ width:56%; }
.c-main .frame{ aspect-ratio:16/10; }
.c-side{ width:30%; margin-top:6rem; }
.c-side .frame{ aspect-ratio:3/4; }
.c-caption{ margin-top:1rem; display:flex; align-items:baseline; gap:1.1rem; }
.c-num{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); }
.c-title{ font-family:var(--serif); font-size:1.45rem; font-weight:400; }
.c-tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tag-c, var(--gold-bright));
  border:1px solid currentColor; border-radius:2px; padding:.2rem .55rem;
}
.c-year{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); margin-left:auto; }
.tag-red{ --tag-c:var(--red-bright); }
.tag-blue{ --tag-c:var(--blue-bright); }
.tag-emerald{ --tag-c:var(--emerald-bright); }
.tag-gold{ --tag-c:var(--gold-bright); }
@media (max-width:900px){
  .collage{ padding:2rem 1.4rem 4rem; }
  .collage-row, .collage-row.rev{ flex-direction:column; gap:2.6rem; margin-bottom:2.6rem; }
  .c-main,.c-side{ width:100%; margin-top:0; }
}

/* ---------- works hub panels ---------- */
.hub{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.hub-panel{
  position:relative; background:var(--obsidian); padding:4.5rem 3rem 3.5rem; min-height:22rem;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  transition:background .5s;
}
.hub-panel .hp-bg{ position:absolute; inset:0; opacity:.5; transition:opacity .5s, transform .8s var(--ease); }
.hub-panel:hover .hp-bg{ opacity:.75; transform:scale(1.02); }
.hub-panel .hp-num{ position:relative; font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); margin-bottom:.8rem; }
.hub-panel h2{ position:relative; font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.4vw,3rem); }
.hub-panel .hp-meta{ position:relative; margin-top:.7rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.hub-panel .hp-arrow{
  position:absolute; top:2.2rem; right:2.4rem; font-family:var(--mono); font-size:.9rem;
  color:var(--ink-faint); transition:color .3s, transform .4s var(--ease);
}
.hub-panel:hover .hp-arrow{ color:var(--tag-c, var(--gold-bright)); transform:translate(4px,-4px); }
@media (max-width:820px){ .hub{ grid-template-columns:1fr; } .hub-panel{ padding:3rem 1.4rem 2.4rem; min-height:15rem; } }

/* ---------- detail grids (project pages) ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; padding:0 3rem 5rem; }
.pgrid .frame{ overflow:hidden; }
.ps-4{ grid-column:span 4; } .ps-5{ grid-column:span 5; } .ps-6{ grid-column:span 6; }
.ps-7{ grid-column:span 7; } .ps-8{ grid-column:span 8; } .ps-12{ grid-column:span 12; }
.frame{ aspect-ratio:4/3; }
.frame.tall{ aspect-ratio:3/4; }
.frame.wide{ aspect-ratio:21/9; }
.pcap{ margin-top:.6rem; font-family:var(--mono); font-size:.65rem; color:var(--ink-faint); letter-spacing:.04em; }
.sec-label{
  padding:4rem 3rem 1.6rem; display:flex; align-items:baseline; gap:1.2rem;
}
.sec-label .n{ font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); }
.sec-label h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.4vw,2.8rem); }
.sec-label p{ width:100%; margin-top:.8rem; color:var(--ink-dim); font-size:.9rem; line-height:1.7; max-width:44rem; }
@media (max-width:900px){
  .pgrid{ padding:0 1.4rem 3rem; gap:.8rem; }
  .ps-4,.ps-5,.ps-6,.ps-7,.ps-8{ grid-column:span 12; }
  .sec-label{ padding:2.6rem 1.4rem 1.2rem; flex-wrap:wrap; }
}

/* ---------- blog / notes ---------- */
.blog-list{ padding:1rem 3rem 6rem; max-width:66rem; }
.blog-entry{
  display:grid; grid-template-columns:8rem 1fr auto; gap:2rem; align-items:baseline;
  padding:2.2rem 0; border-bottom:1px solid var(--hairline); transition:background .3s;
}
.blog-entry:first-child{ border-top:1px solid var(--hairline); }
.blog-entry:hover{ background:rgba(230,224,205,0.025); }
.blog-date{ font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); }
.blog-entry h3{ font-family:var(--serif); font-weight:400; font-size:1.55rem; }
.blog-entry p{ margin-top:.5rem; color:var(--ink-dim); font-size:.88rem; line-height:1.65; max-width:36rem; }
@media (max-width:820px){
  .blog-list{ padding:1rem 1.4rem 4rem; }
  .blog-entry{ grid-template-columns:1fr; gap:.5rem; }
}

/* ---------- shop: "The Vault" — shelf of film cans ---------- */
.vault-shelf{ padding:2.5rem 3rem 1rem; }
.vault-shelf .vs-title{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:1.2rem; display:flex; gap:1rem; align-items:center; }
.vault-shelf .vs-title::after{ content:''; flex:1; height:1px; background:var(--hairline); }
.vault-row{ display:flex; gap:.6rem; align-items:flex-end; min-height:15rem; }
.vault-can{
  position:relative; flex:0 0 4.2rem; height:14rem; cursor:pointer;
  background:linear-gradient(180deg, var(--obsidian-3), var(--obsidian-2));
  border:1px solid var(--hairline); border-bottom:3px solid var(--tag-c, var(--gold));
  overflow:hidden; transition:flex-basis .55s var(--ease), background .4s;
  display:flex; align-items:flex-end;
}
.vault-can .spine{
  position:absolute; top:1rem; left:50%; transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; transition:opacity .3s;
}
.vault-can .can-body{
  opacity:0; padding:1.2rem; width:17rem; transition:opacity .4s .2s;
}
.vault-can .can-body h4{ font-family:var(--serif); font-weight:400; font-size:1.15rem; margin-bottom:.4rem; }
.vault-can .can-body .cb-sub{ font-family:var(--sans); font-size:.78rem; color:var(--ink-dim); line-height:1.5; }
.vault-can .can-body .cb-price{
  margin-top:.8rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--tag-c, var(--gold-bright)); text-transform:uppercase;
}
.vault-can:hover, .vault-can.open{
  flex-basis:19rem; background:linear-gradient(180deg, var(--obsidian-2), var(--obsidian-3));
}
.vault-can:hover .spine, .vault-can.open .spine{ opacity:0; }
.vault-can:hover .can-body, .vault-can.open .can-body{ opacity:1; }
@media (max-width:820px){
  .vault-shelf{ padding:2rem 1.4rem .6rem; }
  .vault-row{ flex-direction:column; align-items:stretch; min-height:0; }
  .vault-can{ height:auto; flex-basis:auto; border-bottom-width:1px; border-left:3px solid var(--tag-c, var(--gold)); }
  .vault-can .spine{ display:none; }
  .vault-can .can-body{ opacity:1; width:100%; }
}

/* ---------- footer — First Frame-style big CTA ---------- */
footer{ border-top:1px solid var(--hairline); padding:5rem 3rem 2.5rem; }
.foot-cta{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,5vw,4rem); line-height:1.05; max-width:20ch; }
.foot-cta a{ color:var(--gold-bright); font-style:italic; position:relative; }
.foot-cta a:hover{ text-decoration:underline; text-underline-offset:6px; }
.foot-row{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.6rem; margin-top:3.5rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.foot-row .links{ display:flex; gap:1.8rem; }
.foot-row a:hover{ color:var(--ink); }
@media (max-width:820px){ footer{ padding:3.5rem 1.4rem 2rem; } }

/* ---------- cycling frames: visuals change while in view ----------
   Any .frame.cycle with multiple .ph (or later, <img>) children
   crossfades between them once scrolled into view. Swap-in-ready:
   when real images replace placeholders the same markup works. */
.frame.cycle{ position:relative; }
.frame.cycle > .ph, .frame.cycle > img{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease);
}
.frame.cycle > .on{ opacity:1; }
.frame.cycle .cycle-dots{
  position:absolute; bottom:.8rem; right:.9rem; z-index:5; display:flex; gap:.35rem;
}
.frame.cycle .cycle-dots span{
  width:5px; height:5px; border-radius:50%; background:rgba(230,224,205,0.3); transition:background .4s;
}
.frame.cycle .cycle-dots span.on{ background:var(--gold-bright); }

/* ---------- link roll (First Frame button animation) ---------- */
.nav-links a.roll{ display:inline-block; overflow:hidden; }
.roll{ position:relative; display:inline-block; overflow:hidden; }
.roll > span{ display:block; transition:transform .38s var(--ease); }
.roll::before{
  content:attr(data-text); position:absolute; left:0; top:100%; width:100%;
  color:var(--gold-bright); transition:transform .38s var(--ease);
}
.roll:hover > span{ transform:translateY(-100%); }
.roll:hover::before{ transform:translateY(-100%); }

/* ---------- This Drop + Project Highlight (SHKR-adapted) ---------- */
.feature-split{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
  padding:5rem 3rem; border-top:1px solid var(--hairline);
}
.feature-split .fs-media{ overflow:hidden; aspect-ratio:4/3; }
.feature-split .fs-media img{ transition:transform .8s var(--ease); }
.feature-split:hover .fs-media img{ transform:scale(1.02); }
.feature-split .fs-kicker{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-bright); display:block; margin-bottom:1rem;
}
.feature-split h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.1; }
.feature-split .fs-date{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); margin-top:.6rem; display:block; }
.feature-split p{ margin-top:1.2rem; color:var(--ink-dim); font-size:.94rem; line-height:1.7; max-width:32rem; }
.feature-split .fs-link{
  display:inline-block; margin-top:1.6rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--gold-bright); padding-bottom:.3rem;
}
@media (max-width:820px){ .feature-split{ grid-template-columns:1fr; padding:3rem 1.4rem; gap:1.6rem; } }

/* ---------- newsletter (SHKR footer move) ---------- */
.newsletter{ margin-top:3rem; max-width:26rem; }
.newsletter .nl-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:.9rem; }
.newsletter form{ display:flex; border-bottom:1px solid var(--hairline); }
.newsletter input{
  flex:1; background:none; border:none; outline:none; color:var(--ink);
  font-family:var(--sans); font-size:.9rem; padding:.7rem 0;
}
.newsletter input::placeholder{ color:var(--ink-faint); }
.newsletter button{
  background:none; border:none; cursor:pointer; color:var(--gold-bright);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.newsletter button:hover{ color:var(--ink); }

/* ---------- richness layer ---------- */

/* film grain overlay, sitewide */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-1%,1%); }
  50%{ transform:translate(1%,-1%); } 75%{ transform:translate(-1%,-1%); } 100%{ transform:translate(0,0); }
}

/* full-bleed hero head (home): statement over drifting media */
.hero-head{
  position:relative; min-height:94svh; max-width:none;
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:5rem;
}
.hero-head .head-media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-head .head-media .ph,
.hero-head .head-media img{ animation:heroDrift 22s ease-in-out infinite alternate; }
.c-item .frame img{ transition:transform .8s var(--ease); }
.c-item:hover .frame img{ transform:scale(1.025); }
@keyframes heroDrift{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.06) translate(-1.2%,-1.4%); }
}
.hero-head .head-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,6,0.5) 0%, rgba(5,5,6,0.15) 45%, rgba(5,5,6,0.94) 100%);
}
.hero-head .kicker, .hero-head h1, .hero-head .meta-row{ position:relative; z-index:2; }
.hero-head h1{ font-size:clamp(3rem,8.5vw,7.5rem); line-height:1.0; }

/* staggered line entrance for headlines */
.line-reveal .lr{
  display:block; opacity:0; transform:translateY(50px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.line-reveal.play .lr{ opacity:1; transform:translateY(0); }
.line-reveal .lr:nth-child(2){ transition-delay:.18s; }
.line-reveal .lr:nth-child(3){ transition-delay:.36s; }

/* oversized footer wordmark — First Frame-style outline type */
.foot-mark{
  font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,7.2vw,6.5rem); line-height:.95;
  letter-spacing:.01em; margin:3.5rem -0.05em 0;
  color:transparent; -webkit-text-stroke:1px rgba(230,224,205,0.22);
  user-select:none; white-space:nowrap; overflow:hidden;
  transition:-webkit-text-stroke-color .5s;
}
.foot-mark:hover{ -webkit-text-stroke-color:rgba(220,186,72,0.5); }

/* caption slide-up on collage hover */
.c-item .c-caption{ transition:transform .5s var(--ease); }
.c-item:hover .c-caption{ transform:translateX(6px); }

/* ---------- counters (First Frame) ---------- */
.corner-counter{
  position:fixed; bottom:2rem; right:3rem; z-index:90;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--ink-faint);
  pointer-events:none;
}
@media (max-width:820px){ .corner-counter{ display:none; } }