/* PRISMA LAB — white gallery, museum-plinth layout.
   Ink on white; one rotating accent per work. Instant cuts, no decorative motion. */

:root{
  --white:#ffffff;
  --ink:#0c0c0e;
  --grey:#4a4a4d;      /* body copy, AA on white */
  --hairline:#e3e3e5;
  --plinth:#f2f2f3;
  --accent:#1c4fd6;    /* overwritten per piece via data-accent */
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--ink); color:var(--white); }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:var(--white); padding:10px 18px;
  font-size:13px; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------- type helpers ---------- */
.microlabel{
  font-size:11px; font-weight:600; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink);
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav-mark{
  font-weight:600; font-size:13px; letter-spacing:0.18em;
  text-decoration:none;
}
.nav nav{ display:flex; gap:clamp(14px,3vw,34px); align-items:center; }
.nav nav a{
  font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.nav nav a:hover{ border-bottom-color:var(--ink); }
.nav-cta{ border:1px solid var(--ink) !important; padding:8px 14px !important; }
.nav-cta:hover{ background:var(--ink); color:var(--white) !important; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; cursor:crosshair;
}
.hero-copy{
  position:relative; z-index:2; pointer-events:none;
  padding:0 var(--pad) clamp(120px, 18vh, 190px);
  max-width:860px;
}
.hero-copy .microlabel{ margin-bottom:18px; }
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(44px, 8.5vw, 118px);
  line-height:0.98; letter-spacing:-0.01em;
  margin-bottom:22px;
}
.hero-title em{ font-style:italic; }
.hero-sub{
  max-width:52ch; color:var(--grey); font-size:clamp(14px,1.4vw,17px);
  background:rgba(255,255,255,0.7);
}
.hero-label{
  position:absolute; z-index:2; right:var(--pad); bottom:26px;
  max-width:280px;
}
.hero-label figcaption{ display:flex; flex-direction:column; gap:4px; text-align:right; align-items:flex-end; }

/* ---------- wall label shared ---------- */
.wl-title{ font-family:var(--serif); font-size:22px; font-weight:400; line-height:1.2; }
.wl-title em{ font-style:italic; }
.wl-meta{ font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); line-height:1.7; }
.wl-seed{
  font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:8px;
}
.wl-seed::before{
  content:""; width:9px; height:9px; flex:none;
  background:var(--accent); /* ties the label to its work; decorative only */
}
.hero-label .wl-seed{ justify-content:flex-end; }
.wl-note{ font-size:13.5px; color:var(--grey); line-height:1.65; margin-top:10px; }
.reseed{
  margin-top:12px; align-self:flex-start;
  background:none; border:1px solid var(--ink); color:var(--ink);
  font:inherit; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:9px 14px; cursor:pointer;
}
.reseed:hover{ background:var(--ink); color:var(--white); }
.hero-label .reseed{ align-self:flex-end; background:rgba(255,255,255,0.85); }
.hero-label .reseed:hover{ background:var(--ink); }

/* ---------- statement ---------- */
.statement{
  padding:clamp(90px,14vh,170px) var(--pad);
  border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.statement-text{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px, 3.6vw, 44px); line-height:1.25;
  max-width:22em;
}
.statement-text em{ font-style:italic; }
.statement-sign{
  margin-top:28px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--grey);
}

/* ---------- room heads ---------- */
.room-head{
  padding:clamp(70px,10vh,120px) var(--pad) clamp(40px,6vh,70px);
  border-top:1px solid var(--hairline);
  max-width:980px;
}
.room-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5vw,64px); line-height:1.05; margin-top:14px;
}
.room-note{ margin-top:18px; max-width:60ch; color:var(--grey); font-size:15px; }

/* ---------- collection / plinths ---------- */
.collection{ padding-bottom:clamp(60px,8vh,110px); }
.piece{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap:clamp(28px,4vw,64px);
  align-items:end;
  padding:clamp(46px,7vh,90px) var(--pad);
  max-width:1240px; margin:0 auto;
}
.piece-flip{ grid-template-columns: minmax(240px,320px) minmax(0,1fr); }
.piece-flip .plinth{ order:2; }
.piece-flip .wall-label{ order:1; }

.plinth{ display:flex; flex-direction:column; align-items:center; }
.frame{
  width:100%;
  max-width:640px;
  border:1px solid var(--ink);
  padding:clamp(10px,1.8vw,20px);
  background:var(--white);
  box-shadow:0 34px 50px -42px rgba(12,12,14,0.35);
}
.frame canvas{
  display:block; width:100%; aspect-ratio:1/1;
  cursor:crosshair; background:var(--white);
}
.plinth-base{
  width:min(46%, 240px); height:clamp(26px,3.4vw,44px);
  background:var(--plinth);
  border:1px solid var(--hairline); border-top:none;
  clip-path:polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.wall-label{
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--hairline);
  padding:22px 22px 24px;
  background:var(--white);
  max-width:340px;
}

/* ---------- process ---------- */
.steps{
  list-style:none;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px,3vw,48px);
  padding:0 var(--pad) clamp(80px,10vh,130px);
  max-width:1240px; margin:0 auto;
}
.step{ border-top:1px solid var(--ink); padding-top:18px; }
.step-no{
  font-size:12px; font-weight:600; letter-spacing:0.2em; color:var(--grey);
}
.step h3{
  font-family:var(--serif); font-weight:400; font-size:26px; margin:10px 0 10px;
}
.step p{ font-size:14px; color:var(--grey); }

/* ---------- commissions ---------- */
.bands{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);
  padding:0 var(--pad);
  max-width:1240px; margin:0 auto;
}
.band{
  border:1px solid var(--hairline);
  padding:clamp(22px,2.6vw,34px);
  display:flex; flex-direction:column;
}
.band-feature{ border-color:var(--ink); }
.band-name{
  font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
}
.band-price{
  font-family:var(--serif); font-size:clamp(30px,3.4vw,44px); font-weight:400;
  margin:14px 0 12px;
}
.band-desc{ font-size:14px; color:var(--grey); flex:1; }
.band-fine{
  margin-top:18px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey);
}

/* ---------- enquiry ---------- */
.enquiry{
  max-width:760px; margin:clamp(56px,8vh,90px) auto clamp(90px,12vh,140px);
  padding:0 var(--pad);
}
.enquiry-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,38px);
  margin-bottom:26px;
}
.enquiry-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field-wide{ grid-column:1 / -1; }
.field label{
  font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
}
.field input, .field select, .field textarea{
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--white);
  border:none; border-bottom:1px solid var(--ink);
  border-radius:0; padding:8px 2px;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230c0c0e'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
  padding-right:22px;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-width:2px; padding-bottom:7px;
}
.field input.invalid{ border-bottom-color:#b3261e; }
.enquiry-submit{
  margin-top:28px;
  background:var(--ink); color:var(--white);
  border:1px solid var(--ink);
  font:inherit; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  padding:15px 30px; cursor:pointer;
}
.enquiry-submit:hover{ background:var(--white); color:var(--ink); }
.enquiry-confirm{ margin-top:16px; font-size:14px; color:var(--ink); min-height:1.5em; }

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--ink);
  padding:34px var(--pad) 44px;
  display:flex; flex-direction:column; gap:10px;
  font-size:13px; color:var(--grey);
}
.footer a{ color:var(--ink); }
.footer nav a{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--ink);
}
.footer-fine{ font-size:12px; }

/* ---------- 404 ---------- */
.lost{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:100px var(--pad) 60px; gap:0;
}
.lost .frame{ max-width:380px; width:min(70vw,380px); }
.lost-frame-inner{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--hairline);
}
.lost-404{
  font-family:var(--serif); font-size:clamp(64px,12vw,120px); line-height:1; color:var(--ink);
}
.lost .wall-label{ margin-top:34px; text-align:left; }
.lost-home{
  margin-top:30px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--ink); padding:12px 22px; color:var(--ink);
}
.lost-home:hover{ background:var(--ink); color:var(--white); }

/* ---------- guide ---------- */
.guide{
  max-width:820px; margin:0 auto;
  padding:130px var(--pad) 80px;
}
.guide-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(38px,6vw,66px); line-height:1.05;
  margin:10px 0 16px;
}
.guide-intro{ color:var(--grey); max-width:60ch; }
.guide section{ border-top:1px solid var(--hairline); margin-top:52px; padding-top:34px; }
.guide h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); margin-bottom:14px;
}
.guide h2 .g-no{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.2em;
  color:var(--grey); display:block; margin-bottom:8px;
}
.guide p, .guide li{ color:var(--grey); font-size:15px; }
.guide p + p{ margin-top:12px; }
.guide ul, .guide ol{ padding-left:20px; margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.guide code{
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:0.86em;
  background:var(--plinth); border:1px solid var(--hairline); padding:1px 5px;
}
.guide strong{ color:var(--ink); font-weight:600; }
.guide table{ border-collapse:collapse; width:100%; margin-top:12px; font-size:14px; }
.guide th, .guide td{ border:1px solid var(--hairline); padding:8px 10px; text-align:left; color:var(--grey); }
.guide th{ color:var(--ink); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .piece, .piece-flip{ grid-template-columns:1fr; align-items:start; }
  .piece-flip .plinth{ order:1; }
  .piece-flip .wall-label{ order:2; }
  .wall-label{ max-width:640px; width:100%; margin:0 auto; }
  .plinth-base{ display:none; }
  .steps{ grid-template-columns:1fr; }
  .bands{ grid-template-columns:1fr; }
  .hero-label{ position:relative; right:auto; bottom:auto; margin:0 var(--pad) 30px; max-width:none; }
  .hero-label figcaption{ text-align:left; align-items:flex-start; }
  .hero-label .reseed{ align-self:flex-start; }
  .hero-copy{ padding-bottom:24px; }
}
@media (max-width: 560px){
  .enquiry-grid{ grid-template-columns:1fr; }
  .nav nav{ gap:12px; }
  .nav nav a{ font-size:11px; letter-spacing:0.08em; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:0.001s !important; animation-duration:0.001s !important; }
}