:root{
  --bg: #ecebe7;
  --ink: #2d3136;
  --meat-dark: #4f2b25;
  --meat-mid:  #7a4a43;

  --col-max: 760px;
  --gutter: clamp(22px, 6vw, 72px);
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Serif 4", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{
  width: min(var(--col-max), calc(100% - (2 * var(--gutter))));
  margin: 0 auto;
  padding: clamp(34px, 7vw, 72px) 0 clamp(56px, 10vw, 110px);
}

/* Main Title */

.mast{
  margin: 0 0 clamp(20px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--meat-dark);
  text-align: left;
  font-size: clamp(3.2rem, 8vw, 5rem);
  line-height: 0.95;
}


/* Sections */

.work{
  margin-top: clamp(60px, 10vw, 110px);
}

.work-title{
  margin: 0 0 18px;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
}

.work-title a{
  color: var(--meat-mid);
  text-decoration: none;
}

.work-title a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero image smaller + centered */

.hero{
  margin: 0 0 18px;
}

.hero img{
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

/* Thumbnails */

.thumbs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}

.thumbs img{
  display: block;
  width: 100%;
  height: auto;
}

/* Clickable images */

.imglink{
  display: block;
}

.imglink img{
  cursor: zoom-in;
}

.signature{
  margin-top: clamp(80px, 12vw, 140px);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.signature a{
  color: rgba(45,49,54,0.45);
  text-decoration: none;
}

.signature a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile */

@media (max-width: 640px){
  .thumbs{
    grid-template-columns: 1fr;
  }
}