/* jonahpeterschild.com — bespoke stylesheet.
   Register: match his current site. A wall of work, a wordmark, an email. Warm near-
   monochrome, almost no chrome, generous negative space. Let the work carry it. */

:root {
  --paper: #f6f3ed;   /* warm bone */
  --ink:   #1a1815;   /* near-black, warm */
  --muted: #8c857a;   /* captions, footer */
  --line:  #ddd6c9;   /* hairlines */
  --pad:   clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1400px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------------- nav — wordmark + hamburger, almost invisible ---------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(246,243,237,0.86); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { font-size: 15px; letter-spacing: 0.02em; }
.nav-toggle { display: none; background: none; border: 0; font-size: 20px; color: var(--ink); cursor: pointer; line-height: 1; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }

@media (max-width: 620px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 58px; left: 0; right: 0; display: none;
    flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 6px var(--pad) 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 14px; }
}

/* ---------------- the work grid ---------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding-top: 58px;         /* clear the fixed nav */
}
.piece { position: relative; margin: 0; overflow: hidden; }
.piece.wide { grid-column: span 2; }
.piece img, .piece .tile { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.piece.wide img, .piece.wide .tile { aspect-ratio: 8/3; }
.piece:hover img, .piece:hover .tile { transform: scale(1.02); }
/* caption fades up on hover — quiet, only when you ask for it */
.piece figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 18px 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #f6f3ed; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  opacity: 0; transition: opacity .3s;
}
.piece:hover figcaption { opacity: 1; }

/* ---------------- placeholder tiles (until real photos) ---------------- */
.tile { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background: #cfc7b8; }
.tile span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 12px; }
.tile--wood     { background: linear-gradient(145deg, #6f4e34, #4d3421); }
.tile--oak      { background: linear-gradient(145deg, #b79b74, #8f7350); }
.tile--steel    { background: linear-gradient(145deg, #8b9299, #5c636b); }
.tile--graphite { background: linear-gradient(145deg, #3c3c3e, #232325); }
.tile--patina   { background: linear-gradient(145deg, #9a7b4f, #6d5334); }
.tile--oak span { color: rgba(20,18,15,0.5); }

/* ---------------- info — one line, then the email ---------------- */
.info { padding: clamp(60px, 12vw, 130px) 0; }
.info .wrap { max-width: 640px; }
.info p { margin: 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; }
.info .inq { margin-top: 26px; font-size: 15px; color: var(--muted); }
.info .inq a { color: var(--ink); border-bottom: 1px solid var(--line); }
.info .inq a:hover { border-color: var(--ink); }

/* ---------------- footer — a single hairline ---------------- */
footer.site { border-top: 1px solid var(--line); padding: 24px 0; }
footer.site .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }

/* ---------------- responsive ---------------- */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .piece.wide { grid-column: span 2; }
}
@media (max-width: 440px) {
  .grid { grid-template-columns: 1fr; }
  .piece.wide { grid-column: span 1; }
  .piece.wide img, .piece.wide .tile { aspect-ratio: 4/3; }
}