/* ==========================================================
   Arhan Sarkar — Portfolio
   Shared styles for every page.
   Change the colors and font in ":root" to restyle the site.
   ========================================================== */

:root {
  --bg: #f3f2ee;          /* off-white page background */
  --ink: #1d1d1b;         /* main text */
  --grey: #8b8a85;        /* secondary text */
  --line: #d9d8d2;        /* thin divider lines */
  --placeholder: #e2e1db; /* grey boxes where your work will go */
  --accent: #fff04a;      /* lemon yellow */

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 2.2vw, 32px); /* space at the page edges */
  --gap: clamp(12px, 1.4vw, 20px);    /* space between grid items */
  --radius: 14px;
}

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

.label {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.muted { color: var(--grey); }

/* Small lemon square used as a Bauhaus-style marker */
.square {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  background: var(--accent);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  vertical-align: 0.08em;
}

/* ---------- Header (4 columns, like Alex Laurent) ---------- */

.site-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--gutter);
}
.site-header ul { list-style: none; }
.site-header .name { color: var(--ink); }
.site-header .tagline { max-width: 26ch; margin-top: 2px; }
.site-header .col-right { text-align: right; }
.site-header a:hover,
.site-header a[aria-current="page"] {
  background: var(--accent);
  color: var(--ink);
}

/* ---------- Home: intro statement ---------- */

.intro {
  padding: clamp(48px, 9vw, 140px) var(--gutter) clamp(40px, 6vw, 96px);
}
.intro h1 {
  font-size: clamp(30px, 4.6vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 20ch;
}
.intro h1 .soft { color: var(--grey); }

/* ---------- Filter bar ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 0 var(--gutter) var(--gap);
}
.filters button {
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--grey);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
}
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--accent);
}

/* ---------- Home: work grid (2 across, 3 across, 1 full) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--gap) * 2) var(--gap);
  padding: 0 var(--gutter);
}
.card { grid-column: span 4; }
.card.half { grid-column: span 6; }
.card.full { grid-column: span 12; }
.card[hidden] { display: none; }

/* When filtered, every visible card becomes the same size */
.grid.is-filtered .card { grid-column: span 4; }

.media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--placeholder);
}
.card.half .media { aspect-ratio: 3 / 2; }
.card.full .media { aspect-ratio: 21 / 9; }
.grid.is-filtered .card .media { aspect-ratio: 4 / 3; }

.media > img,
.media > video,
.media > .ph {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card:hover .media > * { transform: scale(1.025); }

/* Placeholder content inside empty boxes */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--grey);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* "Motion" badge in the corner of video pieces */
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-info {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
}
.card-info h3 {
  font-size: 15px;
  font-weight: 500;
}
.card:hover .card-info h3 { background: var(--accent); }

/* ---------- Disciplines line ---------- */

.disciplines {
  padding: clamp(80px, 12vw, 180px) var(--gutter) clamp(60px, 8vw, 120px);
  font-size: clamp(24px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.disciplines .square { margin: 0 0.25em; }

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--gutter);
  border-top: 1px solid var(--line);
}
.about p {
  grid-column: 2 / span 2;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35;
  max-width: 38ch;
}

/* ---------- Work page: one project per row (like Coska) ---------- */

.work-list {
  list-style: none;
  padding: clamp(32px, 5vw, 72px) var(--gutter) 0;
}
.work-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.work-row[hidden] { display: none; }
.work-row h2 {
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.work-row:hover h2 span { background: var(--accent); }

.tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
}
.work-row .media { aspect-ratio: 16 / 9; }
.work-row:hover .media > * { transform: scale(1.025); }

/* ---------- Footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: clamp(60px, 8vw, 120px) var(--gutter) var(--gutter);
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 8vw, 120px);
}
.site-footer .cta {
  grid-column: 2 / span 2;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.site-footer .cta a { border-bottom: 2px solid var(--accent); }
.site-footer .cta a:hover { background: var(--accent); }
.site-footer ul { list-style: none; text-align: right; }
.site-footer .copy { grid-column: 1 / -1; padding-top: clamp(40px, 6vw, 80px); }

/* ---------- Tablet ---------- */

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .site-header .col-services { display: none; }
  .site-header .col-right { text-align: left; }
  .card, .card.half, .grid.is-filtered .card { grid-column: span 6; }
  .card.full { grid-column: span 12; }
  .card.full .media { aspect-ratio: 16 / 9; }
  .about p { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer .cta { grid-column: 1 / -1; }
  .site-footer ul { text-align: left; }
}

/* ---------- Phone ---------- */

@media (max-width: 600px) {
  .card, .card.half, .card.full,
  .grid.is-filtered .card { grid-column: span 12; }
  .card .media, .card.half .media, .card.full .media { aspect-ratio: 4 / 3; }
  .work-row { grid-template-columns: 1fr; }
  .work-row .media { order: -1; }
  .disciplines .square { margin: 0 0.15em; }
}

/* Respect people who turn off animation in their system settings */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}