:root {
  --paper: #f1eee6;
  --white: #fbfaf6;
  --ink: #11110f;
  --muted: #69685f;
  --line: rgba(17, 17, 15, .22);
  --soft-line: rgba(17, 17, 15, .1);
  --mono: "SFMono-Regular", "Roboto Mono", "Courier New", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.shell { padding-inline: 28px; }
.topbar {
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(241, 238, 230, .94);
  backdrop-filter: blur(12px);
}
.brand { font-size: .88rem; letter-spacing: .06em; font-weight: 600; }
.status, .nav, .mono { font: .72rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ink); margin-right: 9px; }
.nav { justify-self: end; display: flex; gap: 22px; }
.nav a, .back-link { border-bottom: 1px solid transparent; }
.nav a:hover, .nav a:focus-visible, .back-link:hover, .back-link:focus-visible { border-color: var(--ink); }

.object-hero {
  min-height: calc(100svh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(370px, .92fr);
  border-bottom: 1px solid var(--line);
}
.image-panel {
  position: relative;
  padding: 42px;
  border-right: 1px solid var(--line);
  background-image: linear-gradient(var(--soft-line) 1px, transparent 1px), linear-gradient(90deg, var(--soft-line) 1px, transparent 1px);
  background-size: 24px 24px;
  display: grid;
  place-items: center;
}
.image-frame { position: relative; width: min(680px, 100%); border: 1px solid var(--line); background: var(--white); }
.image-frame img { aspect-ratio: 1 / 1; object-fit: cover; }
.image-frame.poster-frame { width: min(510px, 100%); background: var(--paper); box-shadow: 0 18px 48px rgba(17,17,15,.12); }
.image-frame.poster-frame img { aspect-ratio: 3 / 4; object-fit: contain; }
.measure-x, .measure-y { position: absolute; font: .65rem/1 var(--mono); color: var(--muted); text-transform: uppercase; }
.measure-x { left: 42px; right: 42px; top: 21px; border-top: 1px solid var(--line); padding-top: 5px; text-align: center; }
.measure-y { top: 42px; bottom: 42px; right: 17px; border-right: 1px solid var(--line); writing-mode: vertical-rl; padding-right: 5px; text-align: center; }
.object-copy { padding: 38px 42px 32px; display: flex; flex-direction: column; }
.object-topline { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.object-copy h1 { margin: auto 0 28px; font-size: clamp(3.5rem, 6.4vw, 7.9rem); line-height: .83; letter-spacing: -.075em; font-weight: 500; text-transform: uppercase; }
.poster-object .object-copy h1 { font-size: clamp(3.2rem, 5.2vw, 6.4rem); letter-spacing: -.065em; }
.object-copy h1 span { display: block; }
.intro { max-width: 39ch; font-size: clamp(1.15rem, 1.65vw, 1.45rem); line-height: 1.42; letter-spacing: -.02em; margin: 0 0 36px; }
.state { border-top: 1px solid var(--ink); padding-top: 12px; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.state strong { font: 500 1.15rem/1.2 var(--sans); letter-spacing: -.02em; }
.state span { color: var(--muted); }

.visual-study { border-bottom: 1px solid var(--line); }
.visual-study-head {
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 30px;
  padding-top: 52px;
  padding-bottom: 26px;
}
.visual-study-head h2 { margin: 0; font-size: clamp(2.8rem, 6vw, 6.8rem); line-height: .86; letter-spacing: -.06em; font-weight: 500; text-transform: uppercase; }
.visual-study-head p { margin: 0; max-width: 48ch; justify-self: end; font-size: 1rem; line-height: 1.5; }
.study-image { margin: 0; padding: 28px; border-top: 1px solid var(--line); background: var(--white); }
.study-image img { max-height: 1100px; width: 100%; object-fit: contain; }
.study-image figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; font: .72rem/1.4 var(--mono); text-transform: uppercase; }
.study-image.poster-study { display: grid; place-items: center; padding: clamp(32px, 7vw, 100px); background: #e4dfd3; }
.study-image.poster-study a { display: block; width: min(820px, 100%); border: 1px solid var(--line); box-shadow: 0 22px 60px rgba(17,17,15,.13); }
.study-image.poster-study img { aspect-ratio: 3 / 4; max-height: none; object-fit: contain; }
.study-image.poster-study figcaption { width: min(820px, 100%); }

.page-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.page-card { margin: 0; display: flex; flex-direction: column; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-card:nth-child(4n) { border-right: 0; }
.page-card:nth-last-child(-n+4) { border-bottom: 0; }
.page-card a { display: block; border: 1px solid var(--soft-line); background: #dad6cb; overflow: hidden; }
.page-card img { aspect-ratio: 2 / 3; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.page-card a:hover img, .page-card a:focus-visible img { transform: scale(1.018); }
.page-card figcaption { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding-top: 12px; font: .68rem/1.4 var(--mono); text-transform: uppercase; }
.page-card figcaption span:last-child { text-align: right; color: var(--muted); }

.details { display: grid; grid-template-columns: .78fr 1.22fr; border-bottom: 1px solid var(--line); }
.details-aside { border-right: 1px solid var(--line); padding: 28px 28px 100px; }
.details-main { padding: 28px 28px 100px; }
.section-label { margin: 0 0 70px; font: .72rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.spec-list { margin: 0; }
.spec-row { display: grid; grid-template-columns: minmax(120px, .7fr) 1fr; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); font: .72rem/1.5 var(--mono); text-transform: uppercase; }
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row dt, .spec-row dd { margin: 0; }
.spec-row dt { color: var(--muted); }
.statement { margin: 0; max-width: 22ch; font-size: clamp(2.1rem, 4.3vw, 5.2rem); line-height: 1.01; letter-spacing: -.055em; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.note { padding: 26px 28px 90px; border-right: 1px solid var(--line); }
.note:last-child { border-right: 0; }
.note h2 { margin: 0 0 64px; font: .72rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.note p { margin: 0; max-width: 38ch; font-size: 1rem; line-height: 1.55; }

.release {
  min-height: 390px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-block: 50px 28px;
}
.release h2 { margin: 0; max-width: 10ch; font-size: clamp(3rem, 6vw, 7rem); line-height: .86; letter-spacing: -.065em; font-weight: 500; text-transform: uppercase; }
.release-copy { justify-self: end; width: min(100%, 540px); }
.release-copy p { margin: 0 0 30px; font-size: 1rem; line-height: 1.5; max-width: 45ch; }
.release-link { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--ink); padding: 12px 0 18px; font: .72rem/1.3 var(--mono); text-transform: uppercase; }
.release-link:hover, .release-link:focus-visible { padding-left: 8px; }
.object-nav { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.object-nav a { padding: 28px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; text-transform: uppercase; }
.object-nav a:first-child { border-right: 1px solid var(--line); }
.object-nav a:hover, .object-nav a:focus-visible { background: var(--white); }
.object-nav strong { font-size: clamp(1.5rem, 3vw, 3.4rem); line-height: .95; letter-spacing: -.04em; font-weight: 500; }
footer { min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; padding-top: 28px; padding-bottom: 24px; }
.footer-top { display: flex; justify-content: space-between; gap: 20px; font: .72rem/1.4 var(--mono); text-transform: uppercase; }
.footer-word { font-size: clamp(4rem, 11vw, 12rem); line-height: .72; letter-spacing: -.085em; text-transform: uppercase; margin-left: -.055em; }

@media (max-width: 900px) {
  .shell { padding-inline: 18px; }
  .topbar { grid-template-columns: 1fr auto; }
  .status { display: none; }
  .object-hero { grid-template-columns: 1fr; }
  .image-panel { min-height: 620px; border-right: 0; border-bottom: 1px solid var(--line); }
  .object-copy { min-height: 570px; }
  .details { grid-template-columns: 1fr; }
  .details-aside { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 70px; }
  .notes { grid-template-columns: 1fr; }
  .note { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 60px; }
  .note:last-child { border-bottom: 0; }
  .page-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .page-card:nth-child(2n) { border-right: 0; }
  .page-card:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .page-card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .topbar { height: 62px; }
  .brand { font-size: .75rem; }
  .nav { font-size: .66rem; gap: 14px; }
  .nav a:not(:last-child) { display: none; }
  .image-panel { min-height: 470px; padding: 32px 0; }
  .measure-x { left: 0; right: 0; top: 18px; }
  .measure-y { display: none; }
  .object-copy { min-height: 500px; padding: 28px 0; }
  .object-copy h1 { font-size: clamp(3.3rem, 16vw, 5.4rem); }
  .poster-object .object-copy h1 { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .details-aside, .details-main, .note { padding-left: 0; padding-right: 0; }
  .visual-study-head { grid-template-columns: 1fr; gap: 24px; min-height: 230px; }
  .visual-study-head p { justify-self: start; }
  .study-image { padding: 18px 0; }
  .study-image figcaption { flex-direction: column; gap: 5px; }
  .page-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .page-card, .page-card:nth-child(2n), .page-card:nth-child(4n), .page-card:nth-last-child(-n+4), .page-card:nth-last-child(-n+2) { flex: 0 0 82vw; border-right: 1px solid var(--line); border-bottom: 0; scroll-snap-align: start; padding: 14px; }
  .page-card:last-child { border-right: 0; }
  .section-label { margin-bottom: 44px; }
  .release { grid-template-columns: 1fr; gap: 70px; min-height: 450px; }
  .release-copy { justify-self: start; }
  .object-nav { grid-template-columns: 1fr; }
  .object-nav a:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .object-nav a { padding-inline: 18px; min-height: 130px; }
  .footer-top { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }