/* =========================================================
   ARJUN M G — PHOTOGRAPHY
   Design system

   Concept: a working photographer's instrument, not a template.
   Reference points: contact sheets, film frame counters, sprocket
   holes, light-meter needles, darkroom safelight — the actual
   vernacular of the medium, not generic portfolio chrome.

   Colour
   --ink       #14120F   near-black, warm (body ground)
   --paper     #F3EFE6   bone paper (light sections, cards)
   --stone     #8A8377   secondary text on dark
   --stone-2   #56524A   secondary text on light
   --ember     #BD4B23   darkroom-safelight rust — the one accent
   --line      hairline rules, dark ground
   --line-2    hairline rules, light ground

   Type
   Display   'Fraunces'      — optical, warm, a lens-manual serif
   Body      'Inter'         — quiet, legible workhorse
   Utility   'IBM Plex Mono' — frame counters, EXIF-style meta
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,340;0,9..144,440;0,9..144,600;1,9..144,340;1,9..144,440&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#14120F;
  --ink-soft:#1D1A15;
  --paper:#F3EFE6;
  --paper-dim:#EAE4D6;
  --stone:#8A8377;
  --stone-2:#56524A;
  --ember:#BD4B23;
  --ember-soft:#8f3a1c;
  --line: rgba(243,239,230,.14);
  --line-2: rgba(20,18,15,.14);
  --display:'Fraunces', Georgia, serif;
  --body:'Inter', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:16px;
  line-height:1.5;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.05; letter-spacing:-.01em; }
.on-paper{ background:var(--paper); color:var(--ink); }

.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ember); display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--ember); display:inline-block; }

.wrap{ max-width:1320px; margin:0 auto; padding:0 clamp(1.25rem,4vw,4rem); }

/* ---------- Sprocket rule: a recurring motif referencing 35mm film ---------- */
.sprocket-rule{
  height:14px; width:100%;
  background-image:
    radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 22px 14px;
  background-position: 0 center;
  color: var(--line);
  opacity:.9;
}
.on-paper .sprocket-rule{ color: var(--line-2); }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--ember); color:var(--paper);
  padding:.8rem 1.2rem; z-index:2000; font-family:var(--mono); font-size:.8rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ================= NAV ================= */
header.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.25rem,4vw,4rem);
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
  padding:1rem clamp(1.25rem,4vw,4rem);
  background:rgba(20,18,15,.92);
  backdrop-filter:blur(14px);
  border-color:var(--line);
}
.brand{ font-family:var(--display); font-size:1.05rem; letter-spacing:.02em; }
.brand small{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; color:var(--stone); text-transform:uppercase; margin-top:.15rem; }
.nav-links{ display:flex; align-items:center; gap:2.4rem; }
.nav-links a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone); position:relative; padding-bottom:.3rem; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; bottom:0; left:0; right:100%; height:1px; background:var(--ember);
  transition:right .4s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--paper); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-toggle{ display:none; }

@media (max-width: 780px){
  .nav-links{
    position:fixed; inset:0; background:var(--ink); flex-direction:column; justify-content:center; gap:2rem;
    transform:translateY(-100%); transition:transform .5s var(--ease); z-index:850;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ font-size:1.1rem; }
  .nav-toggle{ display:block; z-index:950; font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; }
}

/* ================= HERO ================= */
.hero{
  min-height:auto; display:flex; flex-direction:column; justify-content:center;
  position:relative; padding:9rem clamp(1.25rem,4vw,4rem) 4.5rem;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; padding-bottom:0;
}
.hero-name{
  font-size:clamp(3rem,8vw,6.6rem); font-weight:340; line-height:.94;
}
.hero-name em{ font-style:italic; color:var(--ember); font-weight:340; }
.hero-copy{ max-width:34ch; color:var(--stone); font-size:.98rem; padding-bottom:.4rem; }
.hero-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line);
}
.hero-frame img{ filter:grayscale(8%) contrast(1.05); }
.hero-frame .tag{
  position:absolute; bottom:0; left:0; right:0; padding:1rem 1.1rem;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

/* ================= SECTION SCAFFOLDING ================= */
.section{ padding:6.5rem clamp(1.25rem,4vw,4rem); border-bottom:1px solid var(--line); }
.section.tight{ padding-top:4rem; padding-bottom:4rem; }
.section-head{
  display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:end; margin-bottom:3.4rem;
}
.section-title{ font-size:clamp(2rem,4.6vw,3.4rem); }
.section-desc{ max-width:42ch; color:var(--stone); font-size:.92rem; line-height:1.75; padding-bottom:.3rem; justify-self:end; text-align:right; }
@media (max-width:760px){ .section-head{ grid-template-columns:1fr; } .section-desc{ text-align:left; justify-self:start; } }

/* ================= FEATURED / CONTACT-SHEET GRID ================= */
.sheet{ display:grid; grid-template-columns:repeat(12,1fr); gap:2px; }
.frame{
  position:relative; overflow:hidden; background:var(--ink-soft); cursor:pointer;
}
.frame img{ filter:grayscale(12%) contrast(1.04); transform:scale(1.015); transition:transform .8s var(--ease), filter .5s; }
.frame:hover img{ transform:scale(1.06); filter:grayscale(0%) contrast(1.08); }
.frame .fnum{
  position:absolute; top:.7rem; left:.7rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--paper); background:rgba(20,18,15,.55); padding:.25rem .5rem; opacity:0; transition:opacity .35s;
}
.frame .fcap{
  position:absolute; bottom:0; left:0; right:0; padding:2.2rem .9rem .9rem;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.frame:hover .fcap, .frame:hover .fnum{ opacity:1; transform:translateY(0); }
.frame .fcap span{ display:block; color:var(--stone); font-size:.6rem; margin-top:.15rem; font-family:var(--mono); letter-spacing:.14em; }

/* ================= FILTER BAR ================= */
.filter-bar{
  position:sticky; top:64px; z-index:400; background:rgba(20,18,15,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); display:flex; gap:0; overflow-x:auto; padding:0 clamp(1.25rem,4vw,4rem);
  scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar{ display:none; }
.filter-bar button{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone);
  padding:1.1rem 1.3rem; white-space:nowrap; border-bottom:2px solid transparent; transition:color .3s, border-color .3s;
}
.filter-bar button:hover{ color:var(--paper); }
.filter-bar button.active{ color:var(--paper); border-color:var(--ember); }

/* ================= STATEMENT ================= */
.statement{ text-align:center; padding:8rem clamp(1.25rem,4vw,4rem); }
.statement blockquote{
  font-family:var(--display); font-size:clamp(1.7rem,4vw,3rem); font-weight:340; line-height:1.35; max-width:24ch; margin:0 auto 1.6rem;
}
.statement blockquote em{ font-style:italic; color:var(--ember); }
.statement cite{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); font-style:normal; }

/* ================= CARDS (journal / disciplines) ================= */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--ink); padding:2.2rem; display:flex; flex-direction:column; gap:.9rem; min-height:220px; }
.card .fnum{ font-family:var(--mono); font-size:.66rem; color:var(--ember); letter-spacing:.1em; }
.card h3{ font-size:1.35rem; font-weight:400; }
.card p{ color:var(--stone); font-size:.88rem; line-height:1.7; }
@media (max-width:860px){ .card-grid{ grid-template-columns:1fr; } }

/* ================= JOURNAL LIST ================= */
.post-row{
  display:grid; grid-template-columns:120px 1fr auto; gap:2rem; align-items:baseline;
  padding:2.1rem 0; border-bottom:1px solid var(--line);
}
.post-row .pdate{ font-family:var(--mono); font-size:.7rem; color:var(--stone); letter-spacing:.06em; }
.post-row h3{ font-size:1.5rem; font-weight:400; }
.post-row p{ color:var(--stone); font-size:.85rem; margin-top:.4rem; max-width:60ch; }
.post-row .read{ font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); white-space:nowrap; }
@media (max-width:700px){ .post-row{ grid-template-columns:1fr; gap:.5rem; } }

/* ================= ARTICLE (journal post) ================= */
.article-head{ padding:9rem clamp(1.25rem,4vw,4rem) 3rem; border-bottom:1px solid var(--line); }
.article-head h1{ font-size:clamp(2rem,5vw,3.6rem); max-width:20ch; margin:1rem 0; }
.article-meta{ display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--mono); font-size:.68rem; color:var(--stone); letter-spacing:.08em; text-transform:uppercase; }
.article-body{ max-width:68ch; margin:0 auto; padding:4rem clamp(1.25rem,4vw,4rem); font-size:1.02rem; line-height:1.85; color:#DDD7C9; }
.article-body p{ margin-bottom:1.5rem; }
.article-body h2{ font-size:1.5rem; margin:2.6rem 0 1.1rem; color:var(--paper); }
.article-body figure{ margin:2.6rem 0; }
.article-body figure img{ aspect-ratio:3/2; }
.article-body figcaption{ font-family:var(--mono); font-size:.68rem; color:var(--stone); letter-spacing:.06em; margin-top:.7rem; text-align:center; }
.article-body blockquote{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--ember); border-left:2px solid var(--ember); padding-left:1.4rem; margin:2rem 0; }

/* ================= ABOUT ================= */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:start; }
.about-portrait{ aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); position:sticky; top:7rem; }
.about-name{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:1.6rem; max-width:16ch; }
.about-body p{ color:var(--stone); font-size:1rem; line-height:1.85; margin-bottom:1.3rem; }
.disc-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem; }
.disc-list span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper);
  border:1px solid var(--line); padding:.5rem .9rem;
}
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } .about-portrait{ position:static; max-width:340px; } }

/* ================= FAQ (AEO) ================= */
.faq-item{ border-bottom:1px solid var(--line); padding:1.6rem 0; }
.faq-item h3{ font-size:1.05rem; font-weight:500; font-family:var(--body); display:flex; justify-content:space-between; gap:1rem; cursor:pointer; }
.faq-item p{ color:var(--stone); font-size:.9rem; line-height:1.75; margin-top:.8rem; max-width:62ch; }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.clink{ display:block; padding:1.6rem 0; border-top:1px solid var(--line); }
.clink:last-child{ border-bottom:1px solid var(--line); }
.clink .ct{ display:block; font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:.5rem; }
.clink .cv{ font-family:var(--display); font-size:1.5rem; transition:color .3s; }
.clink:hover .cv{ color:var(--ember); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:1rem; } }

/* ================= FOOTER ================= */
footer{
  padding:3rem clamp(1.25rem,4vw,4rem); display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; color:var(--stone); font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
}
footer a{ color:var(--stone); }
footer a:hover{ color:var(--ember); }
.foot-links{ display:flex; gap:1.6rem; }

/* ================= REVEAL ================= */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:translateY(0); }

/* ================= LIGHTBOX ================= */
#lb{
  position:fixed; inset:0; z-index:2000; background:rgba(10,9,7,.97); display:flex; flex-direction:column;
  align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
#lb.open{ opacity:1; visibility:visible; }
#lb img{ max-width:min(88vw,1100px); max-height:74vh; width:auto; object-fit:contain; border:1px solid var(--line); }
#lb .lb-cap{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-top:1.3rem; text-align:center; }
#lb .lb-close{ position:absolute; top:1.6rem; right:1.6rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
#lb .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:1.4rem; padding:1rem; }
#lb .lb-prev{ left:1rem; } #lb .lb-next{ right:1rem; }

/* ================= UTIL ================= */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; padding:1rem 1.6rem; border:1px solid var(--paper); color:var(--paper); transition:.3s;
}
.btn:hover{ background:var(--ember); border-color:var(--ember); }
.btn.ghost{ border-color:var(--line); color:var(--stone); }
.btn.ghost:hover{ color:var(--paper); border-color:var(--paper); background:none; }