:root { --paper: #f8f6f2; --ink: #29272b; --muted: #777277; --accent: #e87572; --line: #d9d4d2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Open Sans", sans-serif; }
.portfolio-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; width: min(1200px, calc(100% - 5rem)); margin: 0 auto; padding: 3rem 0 4rem; border-bottom: 1px solid var(--line); }
.portfolio-header a { color: var(--muted); font: 700 .72rem/1 Roboto, sans-serif; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
.portfolio-header a:hover { color: var(--accent); }
.portfolio-about { justify-self: end; }
.portfolio-kicker { margin: 0 0 .35rem; color: var(--accent); font: 700 .7rem/1 Roboto, sans-serif; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
h1 { margin: 0; font: 900 clamp(4rem, 10vw, 8rem)/.8 "Big Shoulders", sans-serif; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 3vw, 3.5rem); align-items: start; width: min(1400px, calc(100% - 6rem)); margin: 0 auto; padding: 3.5rem 0 7rem; }
.portfolio-grid figure { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin: 0; padding: .65rem; overflow: hidden; background: #e9e5e1; }
.portfolio-grid img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; cursor: zoom-in; transition: transform .45s ease; }
.portfolio-grid figure:hover img { transform: scale(1.04); }
.portfolio-grid figcaption { position: absolute; right: .75rem; bottom: .75rem; left: .75rem; padding: .65rem .75rem; color: #fff; background: rgba(25, 23, 25, .7); font: 700 .68rem/1.2 Roboto, sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .25s ease; }
.portfolio-grid figure:hover figcaption { opacity: 1; }
.portfolio-page .artwork-preview-controls { display: none; }
.portfolio-page .artwork-preview-caption {
  right: 50%;
  bottom: 1.75rem;
  left: auto;
  width: max-content;
  max-width: calc(100% - 3rem);
  transform: translateX(50%);
  text-align: center;
}
@media (max-width: 800px) {
  .portfolio-header, .portfolio-grid { width: min(100% - 2rem, 600px); }
  .portfolio-header { grid-template-columns: 1fr 1fr; align-items: center; padding: 2rem 0 3rem; }
  .portfolio-header > div { grid-column: 1 / -1; grid-row: 1; }
  .portfolio-back { grid-column: 1; grid-row: 2; }
  .portfolio-about { grid-column: 2; grid-row: 2; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding-top: 2rem; }
  .portfolio-grid img { min-height: 0; }
}