/* ============================================================
   Onkar Gore — cinematic portfolio
   Near-black canvas · Archivo + Geist Mono · zero chroma
   ------------------------------------------------------------
   No accent hue anywhere: the footage is the only coloured thing
   on the page. Because hue can't signal state, every hover runs on
   value instead — muted at rest, bone on hover. Anything that sits
   at full bone already uses a rule or underline for its hover, not
   a colour change.
   ============================================================ */

:root {
  --bg:        #0a0a0b;
  --bg-lift:   #131315;
  /* One light value for the whole site. The wordmark and the body copy
     used to be two different whites — cool #f2f2f3 against warm bone —
     which read as a mistake wherever they stacked. */
  --bone:      #ede7db;      /* film white — warmer than UI white */
  --fg:        var(--bone);
  --muted:     #8c8c92;
  --muted-2:   #5a5a60;
  --line:      rgba(242, 242, 243, 0.13);
  --accent:    var(--bone);  /* the "accent" is just light */
  --accent-rgb: 237, 231, 219;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  --pad: clamp(1.15rem, 4vw, 4rem);
  --ease: cubic-bezier(0.65, 0.05, 0.1, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #0a0a0b; }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Grain texture ---------- */
.grain {
  position: fixed; inset: -150%;
  z-index: 9000; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-8%, 5%); }
  40% { transform: translate(6%, -8%); }
  60% { transform: translate(-4%, 6%); }
  80% { transform: translate(9%, -3%); }
}
/* the grain layer is the most expensive paint on the page — drop it on phones */
@media (max-width: 700px) { .grain { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 2.4vw, 1.75rem) var(--pad);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
              border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Over the hero the nav has no plate of its own, and the footage behind
   it changes shot to shot — a soft top scrim keeps the links readable
   whatever the frame is doing. Retired once the solid bar takes over. */
.nav::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 220%;
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.7), rgba(10, 10, 11, 0));
  pointer-events: none; z-index: -1;
  transition: opacity .5s var(--ease);
}
.nav.is-past-hero::before { opacity: 0; }
.nav.is-past-hero {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-top: clamp(0.7rem, 1.6vw, 1rem);
  padding-bottom: clamp(0.7rem, 1.6vw, 1rem);
}
/* Centred on the viewport, not between the mark and the links — absolute
   positioning keeps it dead centre no matter how wide those two get. */
.nav__logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  opacity: 0.92;
  transition: opacity .3s var(--ease);
}
.nav__logo:hover, .nav__logo:focus-visible { opacity: 1; }
.nav__logo img {
  display: block; width: auto;
  height: clamp(1.15rem, 2.2vw, 1.6rem);
}
/* below this the centred mark collides with the links — the wordmark on
   the left is already carrying identity at that width */
@media (max-width: 380px) { .nav__logo { display: none; } }

.nav__mark { display: flex; flex-direction: column; line-height: 1; }
.nav__mark span {
  font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.25rem); letter-spacing: -0.025em;
}
.nav__mark em {
  font-family: var(--mono); font-style: normal;
  font-size: clamp(0.62rem, 1.5vw, 0.68rem);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.45rem;
}
.nav__links { display: flex; gap: clamp(1.1rem, 2.6vw, 2.6rem); }
.nav__links a {
  font-family: var(--mono);
  font-size: clamp(0.74rem, 1.6vw, 0.84rem);
  letter-spacing: 0.12em; text-transform: uppercase;
  /* vertical padding is the tap target, not decoration — keeps the row
     at a comfortable touch height without moving the type */
  position: relative; padding: 0.6rem 0 0.5rem;
  color: rgba(var(--accent-rgb), 0.8);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0.32rem;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--accent); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* On a phone the desktop link size can't share the row with the mark —
   CONTACT runs off the edge. Tighten the links and drop the tagline;
   the hero wordmark is already carrying identity at that width. */
@media (max-width: 560px) {
  .nav__mark em { display: none; }
  .nav__links { gap: 0.9rem; }
  .nav__links a {
    font-size: 0.68rem; letter-spacing: 0.08em;
    padding: 0.8rem 0 0.7rem;   /* ~39px tap target */
  }
  .nav__links a::after { bottom: 0.52rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh; min-height: 540px;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
  filter: saturate(0.9) contrast(1.05);
}
.hero__scrim {
  position: absolute; inset: 0;
  /* Weighted to the bottom third so the wordmark always has a plate to
     sit on, whatever the footage is doing in that part of the frame. */
  background:
    linear-gradient(to top,
      rgba(10,10,11,0.96) 0%,
      rgba(10,10,11,0.88) 18%,
      rgba(10,10,11,0.48) 44%,
      rgba(10,10,11,0.18) 70%,
      rgba(10,10,11,0.55) 100%);
}
/* The wordmark is the whole hero: pinned to the bottom edge, running
   the full width of the viewport. Nothing else competes with it. */
.hero__inner {
  position: absolute; left: 0; right: 0;
  /* lifted off the bottom edge to leave room for the scroll cue */
  bottom: clamp(4rem, 10vh, 6.5rem);
  /* inset from the viewport edges — the mark scales down with the box
     and stays centred, since the SVG just fills whatever width it gets */
  padding: 0 clamp(1rem, 4.5vw, 5rem);
}

/* ---------- Hero wordmark ----------
   Solid bone, no chroma: at this scale the letterforms are the whole
   composition, and an outline just competes with the texture in the
   footage. The only colour in the hero is the film itself.
   SVG rather than CSS type: textLength pins the word to the viewport
   edges exactly at every width, with no vw guesswork and no overflow. */
.hero__mark { margin: 0; line-height: 0; }
.hero__mark svg {
  display: block; width: 100%; height: auto; overflow: visible;
  /* soft matte under the type — it lifts off the frame without a hard
     edge, the way a title card sits over a grade */
  filter: drop-shadow(0 0.5rem 2.5rem rgba(10, 10, 11, 0.6));
}
.hero__mark text {
  font-family: var(--display);
  /* user units. 151 is measured, not guessed: "onkmadeit" advances 6.572em
     at 800/125%, so its natural width lands on textLength and the
     tracking is left untouched. */
  font-size: 151px;
  font-weight: 800;
  font-stretch: 125%;        /* Archivo's width axis, pushed wide */
  fill: var(--bone);
}

/* ---------- Scroll cue ----------
   Lives inside the hero, so it leaves the screen on its own as you
   scroll — no JS needed to dismiss it. */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(0.9rem, 2.8vh, 1.75rem);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  color: var(--bone); opacity: 0.7;
  transition: opacity .3s var(--ease);
  animation: hero-bob 1.9s var(--ease) infinite;
}
.hero__scroll:hover,
.hero__scroll:focus-visible { opacity: 1; }
.hero__scroll svg {
  width: 1.4rem; height: 1.4rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 6px rgba(10, 10, 11, 0.7));
}
/* the translate has to be restated in the keyframes — it is doing the
   horizontal centring as well as the bob */
@keyframes hero-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; transform: translate(-50%, 0); }
}

/* ---------- Section scaffolding ---------- */
section { padding: clamp(3.5rem, 12vh, 10rem) var(--pad); }
.section-head__label {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  /* quiet eyebrow — the bone tick beside it carries the emphasis */
  color: var(--muted); margin-bottom: 1.3rem;
}
.section-head__label::before {
  content: ''; width: 18px; height: 1px; background: var(--accent); flex: none;
}
/* ---------- Creators ----------
   Sits in the gap between the hero and the first category, so it uses
   the work section's top padding rather than adding its own. */
/* Tight to the hero above and the first category below — this is a
   credibility strip, not a section of its own. */
.clients { padding-top: clamp(2rem, 5vh, 3.5rem); padding-bottom: 0; }
.clients .cat__label { text-align: center; }
/* space-between, not equal columns: the entries are different widths, so
   equal columns left visibly uneven gaps between them. */
.clients__list {
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .clients__list { flex-direction: column; justify-content: flex-start; }
}

.client__link {
  display: flex; align-items: center; gap: clamp(0.85rem, 1.6vw, 1.15rem);
  padding: 0.5rem 0;
}
.client__pfp {
  width: clamp(5.25rem, 8vw, 7rem);
  height: clamp(5.25rem, 8vw, 7rem);
  flex: none;
  border-radius: 50%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.client__link:hover .client__pfp { transform: scale(1.06); }
.client__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.client__name {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -0.025em;
  color: var(--muted); transition: color .3s var(--ease);
}
.client__link:hover .client__name { color: var(--accent); }
/* Instagram verified badge — all three accounts carry it */
.client__badge { width: 0.82em; height: 0.82em; flex: none; }
.client__badge-bg { fill: #0095f6; }
.client__badge-tick {
  fill: none; stroke: #fff; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.client__handle,
.client__meta {
  font-family: var(--mono); font-size: clamp(0.68rem, 1.05vw, 0.78rem); letter-spacing: 0.06em;
  color: var(--muted-2);
  /* long handles must not blow out the column */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client__meta b { font-weight: 500; color: var(--muted); }

/* follows the creators strip directly, so it supplies only a small gap */
.work {
  padding-top: clamp(1.75rem, 4.5vh, 3rem);
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

/* ---------- Work categories ----------
   No section title: the work is grouped, and each group's own label
   does the naming. Small mono caps sitting just above the images —
   the label is a caption for the grid, not a headline over it. */
.cat + .cat { margin-top: clamp(2.75rem, 8vh, 6rem); }
.cat__label {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(0.64rem, 1.4vw, 0.72rem);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.15rem);
}

/* ---------- Work grid ----------
   Two up, big. Masonry made sense for ten mixed tiles; with a curated
   pair per category it left ragged holes, so the grid is explicit now. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
@media (max-width: 620px) { .grid { grid-template-columns: minmax(0, 1fr); } }

/* Three across, full bleed like the landscape grids. Don't cap the media
   height here: with aspect-ratio set, a max-height makes the browser
   shrink the tile's width to keep the ratio, which leaves gaps between
   the columns instead of filling the row. */
.grid--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .grid--portrait { grid-template-columns: minmax(0, 1fr); } }

.tile { cursor: pointer; }
.tile__media {
  position: relative; overflow: hidden;
  background: var(--bg-lift);
  aspect-ratio: 16 / 9;
}
.tile--tall .tile__media { aspect-ratio: 9 / 16; }
/* a full-bleed 9:16 tile eats an entire phone screen */
@media (max-width: 620px) {
  .tile--tall .tile__media { aspect-ratio: 4 / 5; }
}
.tile__media img,
.tile__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .6s var(--ease);
}
.tile__media video { opacity: 0; }
.tile.is-playing .tile__media video { opacity: 1; }
.tile.is-playing .tile__media img { opacity: 0; }
.tile:hover .tile__media img,
.tile:hover .tile__media video { transform: scale(1.045); }

.tile__media::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--line); pointer-events: none;
  transition: border-color .4s var(--ease);
}
/* View count sits on the footage itself — boxed so it reads over any
   frame, and above the ::after hairline so the border can't cross it. */
.tile__views {
  position: absolute; top: 0.65rem; right: 0.65rem; z-index: 2;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.75vw, 0.7rem);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone);
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(237, 231, 219, 0.5);
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(7px) saturate(1.1);
  pointer-events: none;   /* plain counts must not eat the tile's click */
}
/* when the count links to the post it becomes its own target */
a.tile__views {
  pointer-events: auto;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
a.tile__views:hover,
a.tile__views:focus-visible {
  background: rgba(10, 10, 11, 0.8);
  border-color: var(--accent);
}
.tile:hover .tile__media::after,
.tile:focus-visible .tile__media::after { border-color: var(--accent); }

/* Stacked, not spread. With space-between the credit was pushed to the far
   right of its own column, landing beside the NEXT tile's title and reading
   as if it belonged to it. */
.tile figcaption {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  padding: 0.95rem 0.1rem 0;
}
.tile__title {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em;
  color: var(--muted);
  transition: color .3s var(--ease);
}
/* value, not hue: the title lifts to full bone as the tile wakes up */
.tile:hover .tile__title,
.tile:focus-visible .tile__title { color: var(--accent); }
.tile__meta {
  font-family: var(--mono); font-size: clamp(0.66rem, 0.9vw, 0.76rem);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2);
}
/* ---------- Why Us ----------
   No panel: centred type straight on the near-black ground, so the
   section reads as a pause between the work grid and the contact. */
/* padding lives on .why, so the section adds none of its own */
.about { border-top: none; padding: 0; }
.contact .section-head__label { display: inline-flex; }

.why {
  padding: clamp(1.75rem, 4vw, 3rem) var(--pad);
  text-align: center;
}
.why__title {
  font-weight: 800; font-stretch: 125%;
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--bone);
}
.why__eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.66rem, 1.2vw, 0.78rem);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-top: clamp(0.9rem, 2.2vw, 1.5rem);
}
.why__body {
  margin: clamp(0.9rem, 2vw, 1.5rem) auto 0;
  /* wide measure so the lines run long rather than stacking narrow */
  max-width: 92ch;
  display: flex; flex-direction: column; gap: 0.75em;
}
.why__body p {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.45; letter-spacing: -0.01em;
  color: rgba(var(--accent-rgb), 0.78);
}

/* ---------- Contact ---------- */
.contact {
  padding-top: clamp(2rem, 5vh, 3.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.contact__email {
  display: inline-block; margin: clamp(1.2rem, 3vh, 1.8rem) 0 clamp(1.8rem, 4vh, 2.5rem);
  font-weight: 800; letter-spacing: -0.04em;
  /* long address — vw-driven so it never overflows a narrow screen */
  font-size: clamp(1.35rem, 7vw, 5.5rem); line-height: 1.05;
  max-width: 100%; word-break: break-word;
  position: relative;
  transition: color .3s var(--ease);
}
.contact__email::after {
  content: ''; position: absolute; left: 0; bottom: -0.06em; width: 100%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
/* already at full bone, so the sweeping rule is the whole hover */
.contact__email:hover::after { transform: scaleX(1); transform-origin: left; }
.contact__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.contact__socials a {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); transition: color .3s;
}
.contact__socials a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 2rem var(--pad);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(6,6,7,0.94);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  padding-top: clamp(3.5rem, 8vw, 4rem);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  width: min(1100px, 100%);
  transform: translateY(18px) scale(0.98); transition: transform .5s var(--ease);
}
.lightbox.is-open .lightbox__stage { transform: none; }
.lightbox__stage video {
  width: 100%; max-height: 74vh; background: #000;
  border: 1px solid var(--line);
}
.lightbox__caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.lightbox__title { font-size: clamp(1.05rem, 3vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; }
.lightbox__meta {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 4vw, 3rem);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 0.2rem; /* comfortable tap target */
  transition: color .3s var(--ease);
}
.lightbox__close:hover { color: var(--accent); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.001ms !important; }
}