/* ---------- fonts ---------- */
.f-it    { font-family: 'Inter Tight', sans-serif; font-weight: 400; }
.f-it-md { font-family: 'Inter Tight', sans-serif; font-weight: 500; }
.f-it-sb { font-family: 'Inter Tight', sans-serif; font-weight: 600; }
.f-is-md { font-family: 'Instrument Sans', sans-serif; font-weight: 500; }
.f-mr    { font-family: 'Manrope', sans-serif; font-weight: 400; }
.f-mr-md { font-family: 'Manrope', sans-serif; font-weight: 500; }
.f-mr-sb { font-family: 'Manrope', sans-serif; font-weight: 600; }
.f-mr-b  { font-family: 'Manrope', sans-serif; font-weight: 700; }
.f-on-b  { font-family: 'Onest', sans-serif; font-weight: 700; }
/* TT Commons is a commercial font — Onest is the closest free fallback */
.f-tt    { font-family: 'Onest', 'Inter Tight', sans-serif; font-weight: 600; }
.f-tt-b  { font-family: 'Onest', 'Inter Tight', sans-serif; font-weight: 700; }

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: 'Inter Tight', sans-serif;
}
a { color: inherit; }

/* ---------- project page header ---------- */
.back {
  position: absolute;
  top: clamp(20px, 2.6vw, 50px);
  left: clamp(16px, 1.77vw, 34px);
  display: inline-flex;
  padding: 8px;
  margin: -8px;
  z-index: 10;
}
.back svg { display: block; width: clamp(20px, 1.4vw, 27px); height: auto; }

.lead-wrap {
  width: min(1028px, 100% - 2*clamp(20px, 3vw, 34px)); margin-inline: auto;
  padding: clamp(70px, 6vw, 30px) 0 0;
}
@media (min-width: 1100px) { .lead-wrap { padding-top: 30px; } }

.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  background: #f4f1f1;
  border-radius: 10px;
  padding: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.0833;
  color: #000;
  white-space: nowrap;
}

.lead { margin-top: 30px; }
.lead p {
  margin: 0;
  color: #808080;
  font-size: clamp(17px, 1.5625vw, 30px);
  line-height: 1.1667;
  word-break: break-word;
}
.lead p + p { margin-top: 1.1667em; }
.lead strong { font-weight: 600; }
.lead a { font-weight: 600; text-decoration: underline; }

.interlude { padding-top: 0; padding-bottom: 0; }
.interlude .lead { margin-top: clamp(30px, 3vw, 60px); margin-bottom: clamp(30px, 3vw, 60px); }

/* project galleries start right after the lead */
.lead-wrap + main { margin-top: clamp(40px, 5.2vw, 100px); }
.proj-foot { height: clamp(40px, 5vw, 100px); }

/* ---------- scaled design canvases ---------- */
.canvas { position: relative; width: min(1028px, 100% - 2*clamp(20px, 3vw, 34px)); margin-inline: auto; overflow: hidden; }
.canvas > .cv { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ---------- media card galleries (structure matches suradsgn.com) ---------- */
.cards {
  display: grid;
  row-gap: clamp(8px, 1.04vw, 20px);
  width: min(1028px, 100% - 2*clamp(20px, 3vw, 34px)); margin-inline: auto;
}
.cards-block {
  display: flex;
  column-gap: clamp(8px, 1.04vw, 20px);
}
.card-xl { width: 100%; }
.card-lg { width: 66.666%; }
.card-md { width: 50%; }
.card-sm { width: 33.333%; }
.cards .card { border-radius: clamp(10px, 1.04vw, 20px); overflow: hidden; align-self: start; }
.cards .card img, .cards .card video {
  display: block;
  width: 100%;
  border-radius: inherit;
}
/* reserve space while media loads so the page doesn't jump */
.cards .card video:not([src]) { aspect-ratio: 16 / 9; background: #f4f1f1; }
@media (max-width: 640px) {
  .cards { row-gap: 10px; }
  .cards-block { display: grid; row-gap: 10px; }
  .cards-block .card { width: 100%; }
}

/* ---------- video placeholders ---------- */
.ph { background: #f4f1f1; }
.ph::after {
  content: '▶  video';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.35);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 24px;
  white-space: nowrap;
}
.ph video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ph.ph-loaded { background: transparent; }
.ph.ph-loaded::after { display: none; }

/* ---------- index page ---------- */
.hero {
  padding: clamp(40px, 5.6vw, 108px) 0 0;
}
.avatar {
  width: 146px;
  height: 198px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.avatar img {
  position: absolute;
  width: 134.47%;
  height: 116.66%;
  left: -17.11%;
  top: -12.48%;
  max-width: none;
  object-fit: cover;
}
.hero-row {
  position: relative;
  width: min(1028px, 100% - 2*clamp(20px, 3vw, 34px)); margin-inline: auto;
  margin-top: 50px;
}
.loc {
  margin: 0 0 24px;
  color: #808080;
  font-size: clamp(17px, 1.5625vw, 30px);
  line-height: 1.1667;
}
@media (min-width: 1480px) {
  /* pin to the page's left margin (34px at 1920 design width) */
  .loc { position: absolute; left: calc(548px - 50vw); top: 0; width: max-content; margin: 0; }
}
.intro {
  margin: 0;
  color: #808080;
  font-size: clamp(17px, 1.5625vw, 30px);
  line-height: 1.1667;
}
.intro strong { font-weight: 600; }

/* project cards on the index page */
.projects {
  width: min(1028px, 100% - 2*clamp(20px, 3vw, 34px)); margin-inline: auto;
  margin-top: clamp(50px, 5.2vw, 100px);
}
.projects .card { display: block; text-decoration: none; }
.projects .card + .card, .projects .card + .card-static, .projects .card-static + .card { margin-top: 80px; }
.card-media {
  position: relative;
  aspect-ratio: 1022 / 575;
  border-radius: 20px;
  overflow: hidden;
}
.card-media .tags { position: absolute; left: 12px; top: 14px; }
.card-media .pill { background: #fff; }
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  font-size: clamp(20px, 1.5625vw, 30px);
  font-weight: 600;
  line-height: 1.1667;
}
.card-title svg { flex: none; width: clamp(22px, 1.4vw, 27px); height: auto; }
.card:hover .card-title span { text-decoration: underline; }
.card-static { cursor: default; }

/* footer */
.foot {
  width: min(1028px, 100% - 2*clamp(20px, 3vw, 34px)); margin-inline: auto;
  margin-top: clamp(60px, 6vw, 120px);
  padding-bottom: clamp(60px, 6vw, 120px);
}
.foot p { margin: 0; font-size: clamp(17px, 1.5625vw, 30px); line-height: 1.1667; }
.foot-links { display: flex; gap: 40px; margin-bottom: 30px !important; }
.foot-links a { color: #000; text-decoration: underline; }
.foot-line { color: #808080; margin-top: 10px !important; }
.foot-line a { color: inherit; text-decoration: none; }

@media (max-width: 700px) {
  .pill { padding: 7px 9px; border-radius: 8px; }
  .projects .card + .card, .projects .card + .card-static, .projects .card-static + .card { margin-top: 48px; }
  .card-media, .card-media img { border-radius: 14px; }
  .ph::after { font-size: 14px; padding: 8px 16px; }
}