/* ============================================================
   Anshuman Sharma — portfolio
   One stylesheet for the whole site.
   - HOME (index.html): thin menu + masonry grid + hover card
   - CASE STUDY (holm.html, etc.): editorial sections + image slots
   Shared tokens & type live in :root and are used by both.
   ============================================================ */

:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --muted:#8a8a8a;
  --tile:#eeedeb;          /* neutral placeholder grey for empty tiles */
  --card:#ffffff;          /* the hover title card */
  --line:rgba(10,10,10,.12);

  --sans:'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;

  --pad: clamp(1.25rem, 3vw, 2.5rem);
  --gap: clamp(.9rem, 1.6vw, 1.4rem);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

/* ============================================================
   TOP MENU  (shared by home + case study)
   ============================================================ */
.nav{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;   /* brand | filters | links */
  align-items:baseline;
  gap:1rem;
  padding:clamp(1.1rem,2.2vw,1.6rem) var(--pad);
  font-size:1rem;
  font-weight:500;
}
.brand{justify-self:start;letter-spacing:-.01em}
.menu{justify-self:start;display:flex;gap:1.4rem}
.links{justify-self:end;display:flex;gap:1.4rem}

/* pages without the center filter column (home + case studies) */
.nav--cs{ grid-template-columns:1fr auto; }

.filter{
  font:inherit;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:0;
  position:relative;transition:color .2s ease;
}
.filter:hover,.links a:hover{color:var(--ink)}
.filter::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.filter.is-active{color:var(--ink)}
.filter.is-active::after{transform:scaleX(1)}

.links a{color:var(--muted);transition:color .2s ease}

/* ============================================================
   HOME — masonry grid (CSS columns)
   ============================================================ */
.grid{
  column-count:3;
  column-gap:var(--gap);
  padding:0 var(--pad) var(--pad);
}
@media(max-width:900px){.grid{column-count:2}}
@media(max-width:560px){.grid{column-count:1}}

/* ---------- tile ---------- */
.tile{
  display:block;
  position:relative;
  break-inside:avoid;          /* keep a tile from splitting across columns */
  margin-bottom:var(--gap);
  border-radius:6px;
  overflow:hidden;
  background:var(--tile);
}
.thumb{
  position:relative;
  width:100%;
  background:var(--tile);
}
/* aspect-ratio variants for a varied rhythm (works even before images load) */
.r-square{aspect-ratio:1/1}
.r-tall{aspect-ratio:4/5}
.r-wide{aspect-ratio:4/3}

.thumb img,
.thumb video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .4s ease;
}
.tile:hover .thumb img,
.tile:hover .thumb video{transform:scale(1.03);filter:brightness(.92)}

/* ---------- the white hover card ---------- */
.label{
  position:absolute;
  left:.85rem;bottom:.85rem;          /* pinned bottom-left only */
  max-width:calc(100% - 1.7rem);      /* never overflow the tile */
  width:max-content;                   /* hug the text */
  background:var(--card);
  border-radius:5px;
  padding:.7rem .85rem;
  box-shadow:0 6px 22px rgba(10,10,10,.14);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;       /* card is decorative; the whole tile is the link */
}
.tile:hover .label,
.tile:focus-visible .label{opacity:1;transform:translateY(0)}

/* title + meta share one line and identical type settings */
.label-title,
.label-meta{
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--ink);
  text-transform:none;
}
.label-meta::before{ content:", "; }   /* auto comma between title and meta */

/* ---------- accessibility / motion ---------- */
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* hide a tile when filtered out (toggled from script.js) */
.tile[hidden]{display:none}

/* ============================================================
   CASE STUDY  (holm.html and future project pages)
   Reuses the tokens + fonts above. Monochrome, editorial.
   ============================================================ */
.cs{ padding-bottom:clamp(3rem,8vw,7rem); }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.cs-num{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); margin-bottom:1rem;
}
.cs-prose{ max-width:60ch; }
.cs-prose p{ font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.6; color:var(--ink); }
.cs-prose p + p{ margin-top:1rem; }

/* ---------- hero ---------- */
.cs-hero{
  display:grid;
  grid-template-columns:1fr 1fr;     /* text left, image right */
  align-items:start;                  /* image top-aligns with the title */
  gap:clamp(2rem,5vw,4rem);
  /* full width: left text aligns to the page column, right image
     bleeds to the screen edge (padding-right is 0) */
  padding:clamp(2.5rem,6vw,5rem) 0 0 var(--pad);
}
@media(max-width:820px){
  .cs-hero{
    grid-template-columns:1fr;        /* stack on mobile: text, then image */
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
}
.cs-title{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(3rem,10vw,7rem); line-height:.9;
  letter-spacing:-.03em; margin:.6rem 0 .4rem;
}
.cs-sub{
  font-family:var(--mono); font-size:clamp(.8rem,1.4vw,.95rem);
  letter-spacing:.02em; color:var(--muted); margin-bottom:1.6rem;
}
.cs-lead{
  font-size:clamp(1.15rem,1.8vw,1.6rem); line-height:1.4;
  font-weight:400; max-width:34ch;
}
.cs-lead + .cs-lead{ margin-top:1rem; }   /* spacing between stacked lead paragraphs */

.cs-bleed{ width:100%; }

/* ---------- project meta ---------- */
.cs-meta{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem 1.5rem;
  max-width:1280px; margin:clamp(1.5rem,3vw,2.5rem) auto 0;
  padding:clamp(1.2rem,2vw,1.6rem) var(--pad) 0;
  border-top:1px solid var(--line);
}
.cs-meta .k{
  display:block; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.4rem;
}
.cs-meta .v{ font-size:.95rem; line-height:1.35; }

/* ---------- sections ---------- */
.cs-section{
  max-width:1280px; margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) var(--pad) 0;
}
.cs-section--alt{
  background:var(--tile);
  margin-top:clamp(3rem,7vw,6rem);
  padding-bottom:clamp(3rem,7vw,6rem);
  /* stays a 1280 centered column (same left edge as other sections);
     the grey just bleeds full-width via the shadow + clip below */
  box-shadow:0 0 0 100vmax var(--tile);
  clip-path:inset(0 -100vmax);
}
.cs-section--dark{
  background:#000000;
  margin-top:clamp(3rem,7vw,6rem);
  padding-bottom:clamp(3rem,7vw,6rem);
  box-shadow:0 0 0 100vmax #000000;
  clip-path:inset(0 -100vmax);
}
.cs-section--dark .cs-num{ color:rgba(255,255,255,.4); }
.cs-section--dark .cs-h2{ color:#ffffff; }
.cs-section--dark .cs-prose p{ color:rgba(255,255,255,.65); }

.cs-h2{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.6rem,3.5vw,2.8rem); line-height:1.08;
  letter-spacing:-.02em; max-width:20ch; margin-bottom:1.4rem;
}
.cs-h3{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.01em;
  margin-bottom:.6rem;
}
.cs-h3--spaced{ margin-top:clamp(2rem,4vw,3rem); }

/* ---------- stats ---------- */
.cs-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3.5rem);
  border-top:1px solid var(--line); padding-top:clamp(1.5rem,3vw,2.5rem);
}
.stat-num{
  display:block; font-family:var(--sans); font-weight:300;
  font-size:clamp(2.6rem,6vw,4.5rem); line-height:1;
  letter-spacing:-.03em; margin-bottom:.7rem;
}
.stat-label{
  display:block; font-size:.92rem; line-height:1.45; color:var(--muted);
  max-width:34ch;
}

/* ---------- findings / analysis split ---------- */
.cs-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(1.5rem,3vw,2.5rem);
}

/* ---------- why radio ---------- */
.cs-why{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  margin:clamp(1rem,2vw,2rem) 0 clamp(2rem,4vw,3rem);
}
.why-mark{
  font-family:var(--mono); font-size:.78rem; color:var(--muted);
  display:block; margin-bottom:.8rem;
}
.why-item p{ color:var(--ink); font-size:1rem; line-height:1.5; max-width:36ch; }

/* ---------- collage / gallery ---------- */
.cs-collage{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.5vw,1.2rem); margin-top:clamp(1.5rem,3vw,2.5rem);
}
.cs-collage--2{ grid-template-columns:repeat(2,1fr); }
.cs-gallery{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(.8rem,1.5vw,1.2rem); margin-top:clamp(1.5rem,3vw,2.5rem);
}

/* ---------- image slots / placeholders ---------- */
.slot{
  position:relative; overflow:hidden; border-radius:6px;
  background:var(--tile); width:100%;
}
.cs-section .slot{ margin-top:clamp(1.5rem,3vw,2.5rem); }
.cs-collage .slot,
.cs-gallery .slot{ margin-top:0; }       /* grids handle their own spacing */
.cs-bleed.slot{ border-radius:0; margin-top:clamp(1.5rem,3vw,2.5rem); }
.cs-hero + .cs-bleed.slot{ margin-top:0; }   /* hero image sits flush with the render below */

.r-21x9{ aspect-ratio:21/9; }
.r-16x9{ aspect-ratio:16/9; }
.r-3x2 { aspect-ratio:3/2; }
.r-4x3 { aspect-ratio:4/3; }
.r-1x1 { aspect-ratio:1/1; }
.r-3x4 { aspect-ratio:3/4; }
.r-2x3 { aspect-ratio:2/3; }

.slot img,
.slot video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Two portrait images on top, one wide image full-width below */
.cs-collage--stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;                 /* match the gap on your other collages */
}

/* third figure breaks out to span the full row */
.cs-collage--stack .slot:nth-child(3) {
  grid-column: 1 / -1;
}

/* wide aspect for the full-width panel (in case r-16x9 isn't defined) */
.cs-collage--stack .r-16x9 {
  aspect-ratio: 16 / 9;
}

/* stack everything in a single column on small screens */
@media (max-width: 640px) {
  .cs-collage--stack { grid-template-columns: 1fr; }
}
.ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.4rem; text-align:center;
  border:1.5px dashed var(--line); border-radius:inherit; padding:1rem;
}
.ph-tag{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}
.ph-dim{ font-family:var(--mono); font-size:.68rem; color:var(--muted); }

/* ---------- case-study footer ---------- */
.cs-foot{
  max-width:1280px; margin:clamp(3rem,7vw,6rem) auto 0;
  padding:clamp(1.5rem,3vw,2rem) var(--pad);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.cs-back{ font-size:1rem; text-decoration:none; color:var(--ink); }
.cs-back:hover{ color:var(--muted); }
.cs-foot-meta{ font-family:var(--mono); font-size:.74rem; color:var(--muted); }

/* ---------- scroll reveal (case study) ---------- */
.reveal-on .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal-on .reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE (case study)
   ============================================================ */
@media(max-width:820px){
  .cs-meta{ grid-template-columns:repeat(2,1fr); }
  .cs-stats{ grid-template-columns:1fr; }
  .cs-split,
  .cs-why{ grid-template-columns:1fr; }
  .cs-collage{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  .cs-meta{ grid-template-columns:1fr 1fr; }
  .cs-collage,
  .cs-collage--2,
  .cs-gallery{ grid-template-columns:1fr; }
  .cs-foot{ flex-direction:column; align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
  .tile:hover .thumb img{transform:none}
  .reveal-on .reveal{ opacity:1; transform:none; }
}