/* Layout: a gallery wall. The name beside one rotating piece, then the work hung large, sculpture smaller,
   a music band, the artist; the sketchbook lives on its own page. */
/* One look on purpose: a gallery after hours. Charcoal walls, ivory type, a brass accent, a little film grain. */
:root {
  --wall: #0e0e0f;
  --ink: #f2ede4;         /* warm ivory */
  --muted: #8f897f;
  --line: #262422;
  --frame: #19181a;
  --accent: #c8a56a;      /* brass */
  --top-bg: rgba(14, 14, 15, .72);
  --grain: .06;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--accent); color: var(--wall); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font-family: var(--text); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: 12px; background: var(--wall); padding: 6px 10px; z-index: 5; }

/* Header */
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(var(--gutter-r), calc((100vw - 1400px) / 2 + 20px)) 16px max(var(--gutter), calc((100vw - 1400px) / 2 + 20px));
  background: var(--top-bg); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent; transition: border-color .4s ease;
}
.top.scrolled { border-bottom-color: var(--line); }
.top nav a { position: relative; }
.top nav a.active { color: var(--ink); }
.top nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); }
[data-speed] { will-change: transform; }
.piece button { overflow: hidden; }
.piece img { transition: opacity .3s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.piece button:hover img { transform: scale(1.035); opacity: 1; }
.kicker { color: var(--accent); }
.mark { font-family: var(--display); font-style: italic; font-size: 1.15rem; text-decoration: none; letter-spacing: .02em; }
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.5rem; }
.top nav a { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

main { max-width: 1400px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* Intro: the name beside one rotating piece */
.intro {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(2.5rem, 8vw, 6rem) clamp(2.5rem, 7vw, 5rem);
}
.intro h1 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(3.2rem, 10vw, 9rem); line-height: .92; letter-spacing: -.015em;
  display: flex; flex-direction: column;
}
.intro .first { font-style: italic; }
.intro .last { padding-left: clamp(1.5rem, 7vw, 6rem); }
.kicker {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0; padding-left: clamp(1.5rem, 7vw, 6rem);
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.intro-small { grid-template-columns: 1fr; padding-block: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem); }
.intro-small h1 { font-size: clamp(2.8rem, 8vw, 6rem); }
.intro-small .kicker { padding-left: 0; }

.feature { margin: 0; }
.feature-frame {
  appearance: none; border: 0; padding: 0; background: var(--frame); cursor: zoom-in;
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
}
.feature-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.2s ease;
}
.feature-frame img.on { opacity: 1; }
@media (max-width: 760px) {
  .intro { grid-template-columns: 1fr; }
  .feature { max-width: 520px; }
}

/* Sections and galleries */
.section { padding-block: clamp(1.5rem, 4vw, 3rem); }
.section-title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem); font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05;
  padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line);
}
.gallery { column-gap: clamp(1.25rem, 3vw, 2.75rem); }
.gallery-work { columns: 4 13rem; }

/* Hero: one wide crop, edge to edge, drifting slower than the page */
body { overflow-x: clip; }
.hero { position: relative; width: 100%; height: clamp(220px, 44vw, 70vh); overflow: hidden; background: var(--frame); }
.hero-img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none;
  object-fit: cover; object-position: var(--focus, 50% 50%); will-change: transform;
}

/* Name with the jackalope beside it */
.intro { grid-template-columns: auto auto; justify-content: start; align-items: end; gap: clamp(1rem, 3vw, 2.75rem); }
.sigil {   /* a small, slightly crooked mascot, about the height of a capital letter */
  width: clamp(26px, 2.6vw, 44px); height: auto; margin-bottom: clamp(1.4rem, 3.2vw, 2.6rem); margin-left: -.4rem;
  rotate: 8deg; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); transition: rotate .5s cubic-bezier(.3,1.6,.5,1);
}
.sigil:hover { rotate: -10deg; }

/* Reel: four tiles across the full width, each fading through the main pieces on its own beat */
.reel {
  width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px);
  padding-inline: clamp(6px, .8vw, 12px);
}
.reel-tile {
  appearance: none; border: 0; padding: 0; margin: 0; background: var(--frame); cursor: zoom-in;
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
}
.reel-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.6s ease, transform 6s ease-out; transform: scale(1.06);
}
.reel-tile img.on { opacity: 1; transform: scale(1); }
@media (max-width: 640px) { .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .reel-tile img { transition: none; transform: none; } }
.gallery-sculpture { columns: 3 14rem; }
.gallery-sketchbook { columns: 4 11rem; column-gap: clamp(.9rem, 2vw, 1.5rem); }
.gallery-music { columns: 3 12rem; column-gap: clamp(.9rem, 2vw, 1.5rem); }
.piece { break-inside: avoid; margin: 0 0 clamp(1.25rem, 3.5vw, 2.75rem); }
.gallery-sketchbook .piece, .gallery-music .piece { margin-bottom: clamp(.9rem, 2vw, 1.5rem); }
.piece button { appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.piece img { width: 100%; background: var(--frame); transition: opacity .3s ease; }
.piece button:hover img { opacity: .9; }
.piece figcaption { margin-top: .6rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.piece .t { font-family: var(--display); font-style: italic; font-size: 1rem; }
.piece .m { color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; padding-top: .2rem; }

/* Music band */
.music { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.music .section-title { margin-bottom: 1.25rem; }
.roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.roles li { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.3; }
.music .gallery-music { padding-top: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 760px) {
  .music { grid-template-columns: 1fr; }
  .music .gallery-music { padding-top: 0; }
}

/* Sketchbook link */
.more { padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem); }
.more-link {
  font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: .15rem;
}
.more-link:hover { color: var(--accent); }

/* About */
.about {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start; padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--line);
}
.portrait { margin: 0; }
.portrait img { width: 100%; }
.portrait-ph { aspect-ratio: 4 / 5; background: var(--frame); }
.bio h2 {
  margin: 0 0 1.25rem; font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05;
}
.bio p { max-width: 62ch; margin: 0 0 1rem; font-size: 1.05rem; }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .portrait { max-width: 460px; }
}

/* Footer */
.foot {
  max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 2rem var(--gutter-r) max(2rem, env(safe-area-inset-bottom, 0px)) var(--gutter);
  border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem;
}

/* Lightbox */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--wall); color: var(--ink);
}
.lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.lightbox::backdrop { background: var(--wall); }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4.5rem 0 2rem; min-width: 0; }
.lb-figure img { max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; object-fit: contain; }
.lb-figure figcaption { text-align: center; font-size: .85rem; color: var(--muted); }
.lb-figure figcaption .t { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink); display: block; }
.lb-close, .lb-nav { appearance: none; background: none; border: 0; cursor: pointer; color: var(--muted); font: inherit; }
.lb-close {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: var(--gutter-r);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.lb-nav { font-size: 1.6rem; padding: 1rem clamp(.5rem, 3vw, 2.5rem); }
.lb-bar {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); left: var(--gutter);
  display: flex; align-items: center; gap: 1.25rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.lb-play { appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); font: inherit; letter-spacing: .16em; padding: .3rem .8rem; cursor: pointer; border-radius: 999px; }
.lb-play[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.lb-figure img { transition: opacity .35s ease; }
.lb-figure img.swap { opacity: 0; }
.lb-close:hover, .lb-nav:hover { color: var(--ink); }
@media (max-width: 640px) {
  .lightbox[open] { grid-template-columns: minmax(0, 1fr); }
  .lb-nav { position: absolute; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .lb-prev { left: var(--gutter); }
  .lb-next { right: var(--gutter-r); }
  .lb-figure { padding-inline: var(--gutter); }
}

@media (prefers-reduced-motion: no-preference) {
  .piece { animation: hang .6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes hang { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
}
@media (prefers-reduced-motion: reduce) { .feature-frame img { transition: none; } }