/* Design tokens from the Figma file "dpsaraiva.com" (1920px frames) */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --gutter: 20px;
  --header-h: 197px;     /* top of content, measured from the top of the page */
  --footer-h: 157px;
  --text: 20px;
  --text-lh: 24px;
  --bio: 30px;
  --bio-lh: 40px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "BDO Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--text);
  line-height: var(--text-lh);
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, ul, ol { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; }

/* Matches Figma's "cap height to baseline" text trimming */
p, li, .site-header a, .caption, .label { text-box: trim-both cap alphabetic; }

/* 4-column grid used by every frame: 20px margins, 20px gaps */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--gutter);
}

/* Header */
.site-header {
  height: var(--header-h);
  padding-top: var(--gutter);
  align-items: start;
}
.site-header a { font-weight: 800; justify-self: start; }
.dot {
  grid-column: 4;
  justify-self: end;
  width: 18px;
  height: 18px;
}

/* Footer */
.site-footer {
  height: calc(var(--footer-h) + var(--gutter) * 2);
  padding-top: var(--gutter);
  padding-bottom: var(--gutter);
  align-items: end;
}

/* Home */
.page-home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-home main { flex: 1; }
figure.poster { margin: 0; }
.poster img {
  width: 100%;
  aspect-ratio: 455 / 636;
  object-fit: cover;
}
.poster .caption { display: block; margin-top: 35px; }

/* Work */
.work { align-items: start; }
.projects { grid-column: 1 / 3; }
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gutter);
  padding: 20px 0;
  border-bottom: 2px solid var(--ink);
}
.project:first-child { padding-top: 0; }
.project .meta { display: flex; justify-content: space-between; gap: var(--gutter); }
.project .year { text-align: right; }

.gallery {
  grid-column: 3 / 5;
  display: grid;
  gap: var(--gutter);
}
.gallery .shot {
  aspect-ratio: 930 / 688;
  background: var(--ink);
}

/* Info */
.info { align-items: start; }
.about {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.bio {
  grid-column: 1 / 3;
  font-size: var(--bio);
  line-height: var(--bio-lh);
  min-height: 333px;
  margin-bottom: 20px;
}
.about .block { min-height: 177px; }
.about .block.wide { grid-column: 1 / 3; max-width: 693px; }
.label { text-transform: uppercase; }

.photos {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
/* Crops reproduce the image fills set in Figma */
.photo {
  position: relative;
  aspect-ratio: 455 / 688;
  overflow: hidden;
}
.photo img {
  position: absolute;
  max-width: none;
}
.crop-a { width: 146.54%; height: 129.22%; left: -30.89%; top: 0; }
.crop-b { width: 149.65%; height: 148.22%; left: -18.74%; top: -12.15%; }
.crop-c { width: 149.33%; height: 148.22%; left: -18.7%;  top: -12.15%; }
.crop-d { width: 160.05%; height: 158.63%; left: -0.04%;  top: -43.8%; }

/* Tablet: 2 columns */
@media (max-width: 1100px) {
  :root { --header-h: 120px; --bio: 26px; --bio-lh: 34px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .site-header { row-gap: 0; grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .dot { grid-column: auto; }
  .site-footer { height: auto; padding-top: 80px; row-gap: 20px; }
  .projects, .gallery, .about, .photos { grid-column: 1 / -1; }
  .bio { min-height: 0; margin-bottom: 40px; }
  .about .block { min-height: 0; margin-bottom: 40px; }
}

/* Phone: 1 column */
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 96px; --text: 17px; --text-lh: 21px; --bio: 22px; --bio-lh: 29px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .site-header { grid-template-columns: repeat(4, auto); }
  .poster + .poster { margin-top: 16px; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .bio, .about .block.wide { grid-column: auto; }
  .project { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .photos { gap: 10px; }
}