/* neyham — showcase home: a gallery wall. Subpages keep style.css. */
:root {
  --wall: #f1eee6;
  --wall-2: #e8e3d6;
  --ink: #1b1b1f;
  --ink-2: #4a4740;
  --ink-3: #8a8478;
  --red: #c0302c;
  --gold: #b8862f;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --text: "Cormorant Garamond", Georgia, serif;
  --caps: "Josefin Sans", "Futura", "Avenir Next", sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, #f8f6f0 0%, transparent 70%),
    var(--wall);
  color: var(--ink);
  font: 400 19px/1.55 var(--text);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--red); color: #fff; }

.caps {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ── nav ── */
.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 28px var(--gutter) 0;
}
.bar .mark { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1; }
.bar nav { display: flex; gap: clamp(18px, 3vw, 36px); }
.bar nav a { position: relative; padding-bottom: 4px; color: var(--ink-2); transition: color 0.2s; }
.bar nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.28em;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.bar nav a:hover { color: var(--red); }
.bar nav a:hover::after { transform: none; }

/* ── intro ── */
.intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 48px;
  flex-wrap: wrap;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(36px, 4.5vw, 56px);
}
.intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.intro h1 em { font-style: italic; color: var(--red); }
.intro p {
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink-2);
  max-width: 36em;
}

/* ── the wall ── */
.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 96px) clamp(28px, 3.4vw, 56px);
  padding: 0 var(--gutter);
}
.piece { display: flex; flex-direction: column; gap: 18px; grid-column: span 2; }
.piece:nth-child(4) { grid-column: 2 / span 2; }
.piece:nth-child(5) { grid-column: 4 / span 2; }
.plate {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--wall-2);
  box-shadow:
    0 1px 2px rgba(27, 27, 31, 0.18),
    0 22px 36px -18px rgba(27, 27, 31, 0.45),
    0 40px 80px -40px rgba(27, 27, 31, 0.35);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  overflow: hidden;
}
.plate svg { display: block; width: 100%; height: 100%; }
.plate::after {
  /* paper/pigment grain + gallery light */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 40%, rgba(0, 0, 0, 0.08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.plate:hover, .plate:focus-visible {
  transform: translateY(-8px);
  box-shadow:
    0 2px 4px rgba(27, 27, 31, 0.16),
    0 34px 48px -20px rgba(27, 27, 31, 0.5),
    0 60px 100px -40px rgba(27, 27, 31, 0.4);
}
.plate:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }

.label { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.label .mv {
  grid-row: span 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--red);
  white-space: nowrap;
}
.label h2 { font-family: var(--caps); font-weight: 700; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; }
.label p { font-style: italic; font-size: 17px; color: var(--ink-2); line-height: 1.35; }

/* ── plate motion (on hover) ── */
.plate :is(.sun, .sheep, .bubble, .meter, .record, .drape) { transform-box: fill-box; transform-origin: center; }
.plate .sun { transition: transform 1.2s var(--ease); }
.plate:hover .sun { transform: translate(-14px, 10px); }
.plate .caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.plate .sheep { transition: transform 0.5s var(--ease); }
.plate:hover .sheep { animation: bob 0.5s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-7px) rotate(-2deg); } }
.plate .bubble { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 0% 100%; }
.plate:hover .bubble { transform: scale(1.08) rotate(-3deg); }
.plate .gauge { transition: stroke-dashoffset 1.4s var(--ease); }
.plate:hover .gauge { stroke-dashoffset: 30; }
.plate .meter { transition: transform 1s var(--ease); transform-origin: 0% 50%; }
.plate:hover .meter { transform: scaleX(1.35); }
.plate .wave { opacity: 0.25; }
.plate:hover .wave { animation: wave 1.4s ease-out infinite; }
.plate:hover .wave:nth-of-type(2) { animation-delay: 0.2s; }
.plate:hover .wave:nth-of-type(3) { animation-delay: 0.4s; }
@keyframes wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.plate .record { transition: transform 0.8s var(--ease); }
.plate:hover .record { animation: spin 3.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.plate .drape { transition: transform 0.9s var(--ease); }
.plate:hover .drape { transform: translateY(-18px); }

/* ── wall label dialog ── */
dialog {
  margin: auto;
  width: min(1040px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  border: 0;
  padding: 0;
  background: #faf8f3;
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
  overflow: auto;
}
dialog::backdrop { background: rgba(27, 24, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog[open] { animation: rise 0.5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.sheet { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sheet figure { background: #121214; display: grid; place-items: center; min-height: 100%; }
.sheet figure img { width: 100%; height: 100%; object-fit: cover; }
.sheet.wide { grid-template-columns: 1fr; }
.sheet.wide figure { min-height: 0; }
.sheet.wide figure img { width: auto; max-width: 100%; height: auto; max-height: 62vh; object-fit: initial; }
.sheet.wide .txt { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; column-gap: 48px; align-items: start; }
.sheet.wide .txt > :is(.mv, h3, .after) { grid-column: 1; }
.sheet.wide .txt > :is(.desc, .medium, .links) { grid-column: 2; }
.sheet.wide .txt > .desc { grid-row: 1 / span 2; }
.sheet .txt { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; }
.sheet .mv { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--red); }
.sheet h3 { font-family: var(--caps); font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1; }
.sheet .after { font-style: italic; color: var(--ink-3); font-size: 17px; margin-top: -8px; }
.sheet .desc { font-size: 20px; line-height: 1.5; }
.sheet .medium { font-family: var(--caps); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); border-top: 1px solid #d9d3c4; padding-top: 14px; }
.sheet .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.sheet .links a {
  font-family: var(--caps);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 13px 20px 11px;
  border: 1px solid var(--ink);
  transition: background 0.2s, color 0.2s;
}
.sheet .links a:first-child, .sheet .links a:hover { background: var(--ink); color: #faf8f3; }
.close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 248, 243, 0.92);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.close:hover { color: var(--red); }

/* ── footer ── */
footer {
  margin-top: clamp(96px, 12vw, 180px);
  padding: 36px var(--gutter) 40px;
  border-top: 1px solid #d9d3c4;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
footer p { font-style: italic; color: var(--ink-2); }
footer nav { display: flex; gap: 28px; }
footer nav a:hover { color: var(--red); }

/* ── entrance ── */
.piece { opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 1s var(--ease); }
.piece.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piece, .piece:nth-child(4), .piece:nth-child(5) { grid-column: auto; }
  .sheet { grid-template-columns: 1fr; }
  .sheet:not(.wide) figure { aspect-ratio: 16 / 10; }
  .sheet.wide .txt { display: flex; }
}
@media (max-width: 600px) {
  .wall { grid-template-columns: 1fr; }
  .piece:nth-child(5) { grid-column: auto; }
  .bar nav { gap: 18px; }
  .bar .caps { letter-spacing: 0.2em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .piece { opacity: 1; transform: none; }
}