/* ─────────────────────────────────────────────────────────────
   nirmaysingh — black, minimal, high contrast
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:        #000000;
  --fg:        #ffffff;
  --dim:       rgba(255, 255, 255, 0.44);
  --dimmer:    rgba(255, 255, 255, 0.28);
  --hairline:  rgba(255, 255, 255, 0.10);
  --wash:      rgba(255, 255, 255, 0.035);

  --brand: linear-gradient(90deg, #5b8fd4 0%, #a48fd0 48%, #5fc4ae 100%);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tech: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* --max stays deliberately narrow, and gives ground as the viewport
     shrinks, so the side gutters keep enough room for the two speaking
     photos on ordinary laptop widths instead of only on big monitors. */
  --pad: clamp(20px, 5vw, 56px);
  --max: clamp(680px, 62vw, 820px);
  --gutter: clamp(22px, 2.4vw, 44px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; margin: 0; padding: 0; }

::selection { background: #ffffff; color: #000000; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Faint film grain so the black doesn't read as flat void */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Masthead ────────────────────────────────────────────── */

.top {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 54px) var(--pad) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.name {
  margin: 0;
  font-family: var(--tech);
  font-size: clamp(34px, 7vw, 68px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.meta { color: var(--dimmer); }

/* ── Hero ────────────────────────────────────────────────── */

main { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.hero {
  position: relative;
  padding: clamp(44px, 10vh, 112px) 0 clamp(72px, 12vh, 130px);
}

/* barely-there brand glow so the hero isn't pure void */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  top: 14%;
  width: 78%;
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(120, 150, 210, 0.16), rgba(95, 196, 174, 0.07) 45%, transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}

.eyebrow {
  display: block;
  color: var(--dimmer);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.building { display: block; width: fit-content; max-width: 100%; }

.building-word {
  display: block;
  font-size: clamp(52px, 13vw, 132px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.building-logo {
  display: block;
  height: clamp(50px, 12.4vw, 126px);
  width: auto;
  margin-top: clamp(8px, 1.6vw, 18px);
  margin-left: -0.03em;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}

.building-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: clamp(26px, 4vw, 40px);
  padding-bottom: 3px;
  color: var(--dim);
  background-image: var(--brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.35s var(--ease), background-size 0.5s var(--ease);
}

.building-go svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}

.building:hover .building-logo { transform: translateX(6px); filter: brightness(1.12); }
.building:hover .building-go { color: var(--fg); background-size: 100% 1px; }
.building:hover .building-go svg { transform: translate(2px, -2px); }

.hero-sub {
  margin: clamp(28px, 4vw, 42px) 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--dim);
  letter-spacing: -0.005em;
}

/* ── Speaking photos ─────────────────────────────────────── */

.shots {
  display: flex;
  gap: clamp(12px, 2.4vw, 24px);
  margin-top: clamp(40px, 6vw, 60px);
}

/* One is near-square (566×582), the other 3:4 (1166×1554). 4:5 is the
   common ratio that costs each of them the least: ~18% off the width of
   the first, ~6% off the height of the second. */
.shot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 232px;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--hairline);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.86);
}

/* Colour layer, revealed by a soft diagonal wipe corner-to-corner.
   The mask is 260% of the frame, so sliding it across sweeps the
   gradient's soft edge over the image. */
.shot .tint {
  position: absolute;
  inset: 0;
  background-image: var(--src);
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--sweep);
          mask-image: var(--sweep);
  -webkit-mask-size: 260% 260%;
          mask-size: 260% 260%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: var(--from);
          mask-position: var(--from);
  transition: -webkit-mask-position 0.9s var(--ease), mask-position 0.9s var(--ease);
}

/* At mask-size 260% the frame sees ~38.5% of the gradient axis at one
   corner and ~61.5%-100% at the other, so the stops sit just outside
   those marks: fully opaque at --to, fully clear at --from. */

/* left photo sweeps in from its top-left corner */
.shot-l {
  --sweep: linear-gradient(135deg, #000 0%, #000 39%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0) 100%);
  --from: 100% 100%;
  --to: 0% 0%;
}

/* right photo mirrors it — in from its top-right corner */
.shot-r {
  --sweep: linear-gradient(225deg, #000 0%, #000 39%, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0) 100%);
  --from: 0% 100%;
  --to: 100% 0%;
}

/* 4:5 crops width off the first photo and height off the second,
   so only one axis of object-position actually does anything. */
.shot-l img, .shot-l .tint { object-position: 58% 50%; background-position: 58% 50%; }
.shot-r img, .shot-r .tint { object-position: 50% 20%; background-position: 50% 20%; }

.shot:hover .tint {
  -webkit-mask-position: var(--to);
          mask-position: var(--to);
}

/* From here up the photos move out into the side gutters and flank the
   hero, while the text column keeps its alignment with the sections
   below. The width is whatever the gutter actually has spare — measured
   rather than guessed — so it never collides with the text or the
   viewport edge. Below this it falls back to a row under the hero. */
@media (min-width: 960px) {
  .shots { display: contents; }

  .shot {
    position: absolute;
    top: clamp(44px, 7vh, 92px);
    width: clamp(124px, calc((100vw - var(--max)) / 2 + var(--pad) - var(--gutter) - 34px), 250px);
    max-width: none;
    margin: 0;
  }

  .shot-l { right: calc(100% + var(--gutter)); }
  .shot-r { left:  calc(100% + var(--gutter)); }
}

/* ── Section shell ───────────────────────────────────────── */

.block { padding: clamp(48px, 8vw, 84px) 0; border-top: 1px solid var(--hairline); }

.block-title {
  color: var(--dimmer);
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-weight: 500;
}

/* ── Links ───────────────────────────────────────────────── */

.links li + li { border-top: 1px solid var(--hairline); }

.links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: padding-left 0.4s var(--ease), color 0.25s var(--ease);
}

.links .handle {
  color: var(--dimmer);
  text-transform: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s var(--ease);
}

.links a:hover { padding-left: 14px; }
.links a:hover .handle { color: var(--dim); }

/* ── Press ───────────────────────────────────────────────── */

.press li + li { border-top: 1px solid var(--hairline); }

.press a {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto 18px;
  align-items: center;
  gap: clamp(12px, 2.4vw, 26px);
  padding: clamp(18px, 2.4vw, 24px) clamp(8px, 1.6vw, 16px);
  margin: 0 clamp(-16px, -1.6vw, -8px);
  transition: background-color 0.35s var(--ease);
}

/* gradient hairline that draws in from the left on hover */
.press a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--brand);
  transition: width 0.55s var(--ease);
}

.press .idx { color: var(--dimmer); transition: color 0.3s var(--ease); }

.press .body { min-width: 0; display: block; }

.press .headline {
  display: block;
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

.press .outlet {
  display: block;
  margin-top: 8px;
  color: var(--dimmer);
  line-height: 1.45;
  transition: color 0.3s var(--ease);
}

/* fixed width so the arrow column lines up on rows with no year */
.press .year {
  min-width: 32px;
  text-align: right;
  color: var(--dimmer);
  transition: color 0.3s var(--ease);
}

.press .go {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--dimmer);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), color 0.3s var(--ease);
}

.press a:hover { background-color: var(--wash); }
.press a:hover::after { width: 100%; }
.press a:hover .idx,
.press a:hover .outlet,
.press a:hover .year { color: var(--dim); }
.press a:hover .go { opacity: 1; transform: translate(0, 0); color: var(--fg); }

/* ── Footer ──────────────────────────────────────────────── */

.bottom {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad) 40px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--dimmer);
}

.bottom a { transition: color 0.25s var(--ease); }
.bottom a:hover { color: var(--fg); }

/* ── Focus ───────────────────────────────────────────────── */

a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Small screens ───────────────────────────────────────── */

@media (max-width: 640px) {
  .press a { grid-template-columns: 30px 1fr auto; gap: 12px; }
  .press .go { display: none; }
  .links a { flex-direction: column; align-items: flex-start; gap: 6px; }
  .links .handle { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}