:root {
  --paper: #eee5d3;
  --ink: #211d18;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 11%, rgba(255,255,255,.36) 0 1.5%, transparent 13%),
    radial-gradient(ellipse at 81% 78%, rgba(117,91,56,.055) 0 1%, transparent 18%),
    repeating-linear-gradient(7deg, rgba(94,70,42,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(97deg, rgba(255,255,255,.11) 0 1px, transparent 1px 5px),
    var(--paper);
  font-family: Georgia, "Times New Roman", serif;
}

.sheet {
  position: relative;
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 82px) clamp(28px, 5.5vw, 88px) clamp(56px, 7vw, 108px);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .78fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(34px, 6vw, 100px);
  row-gap: clamp(18px, 2.5vw, 42px);
  overflow: hidden;
}

.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 14px;
  border: 1px solid rgba(89,65,39,.08);
  filter: blur(.35px);
}
.sheet::after { inset: 0; border: 18px solid rgba(118,89,53,.025); }

.brand {
  grid-column: 1;
  grid-row: 1;
  width: clamp(180px, 23vw, 315px);
  position: relative;
  z-index: 2;
}
.logo { display: block; width: 100%; height: auto; }
.wearables {
  margin-top: 34px;
  padding-left: .05em;
  font-size: clamp(22px, 2.25vw, 34px);
  line-height: 1;
  font-style: italic;
  letter-spacing: .02em;
}

.display-art {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: clamp(-8px, -1vw, -2px) 0 0;
  width: 100%;
  transform: translateX(-1.5%);
}
.display-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 1060px;
  object-fit: contain;
  object-position: left top;
}

.right-column {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding-top: clamp(120px, 17vw, 250px);
}
.portrait { margin: 0 0 clamp(34px, 4vw, 62px); }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.bio {
  max-width: 33ch;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.46;
}
.bio p { margin: 0 0 1.45em; }
.bio p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(33,29,24,.35); }
a:hover, a:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 760px) {
  .sheet {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
    padding: 32px 24px 56px;
  }
  .brand { grid-column: 1; grid-row: 1; width: min(58vw, 270px); }
  .display-art { grid-column: 1; grid-row: 2; transform: none; }
  .right-column { grid-column: 1; grid-row: 3; padding-top: 0; }
  .portrait { width: min(78vw, 460px); margin: 0 auto 36px; }
  .bio { max-width: 34ch; font-size: 19px; }
}

/* Mobile and tablet refinement */
figure { margin-left: 0; margin-right: 0; }
img { max-width: 100%; }

@media (max-width: 900px) {
  .sheet {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: clamp(34px, 8vw, 58px);
    padding: clamp(28px, 7vw, 52px) clamp(20px, 6vw, 44px) clamp(52px, 10vw, 78px);
    overflow: visible;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    width: clamp(190px, 54vw, 285px);
  }

  .wearables {
    margin-top: clamp(28px, 7vw, 38px);
    font-size: clamp(24px, 6vw, 31px);
  }

  .display-art {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 680px);
    margin: 0 auto;
    transform: none;
  }

  .display-art img {
    width: 100%;
    max-height: none;
  }

  .right-column {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    align-self: auto;
    padding-top: 0;
  }

  .portrait {
    width: min(78vw, 430px);
    margin: 0 auto clamp(38px, 9vw, 58px);
  }

  .bio {
    width: min(100%, 36ch);
    max-width: none;
    margin: 0 auto;
    font-size: clamp(18px, 4.5vw, 21px);
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .sheet {
    row-gap: 38px;
    padding: 26px 18px 48px;
  }

  .sheet::before { inset: 8px; }
  .sheet::after { border-width: 10px; }

  .brand { width: min(61vw, 245px); }
  .wearables { margin-top: 30px; }

  .display-art {
    width: calc(100% + 8px);
    margin-left: -4px;
  }

  .portrait { width: min(86vw, 390px); }

  .bio {
    width: 100%;
    font-size: 18px;
    line-height: 1.52;
  }

  .bio p { margin-bottom: 1.35em; }

  a {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}