/* Supherb / Volume 01: editorial presentation layer.
   Scoped to hero, Vault, artwork, posters and identity.
   The photography collection and its controls retain their existing styling. */
:root {
  --bg: #0d0e0d;
  --ink: #f1ede5;
  --gold: #d0b17a;
  --muted: #aba9a0;
  --line: rgba(199,170,113,.23);
}
body {
  background: radial-gradient(ellipse 60% 800px at 100% 5%,rgba(53,28,71,.22),transparent 70%),var(--bg);
  -webkit-font-smoothing: antialiased;
}
::selection {background:#bda06e;color:#10100f}
.site-header {
  height:95px; display:grid;grid-template-columns:1fr auto 1fr;gap:35px;align-items:center;
  padding:15px 5%;border-color:var(--line);background:rgba(13,14,13,.9);
  box-shadow:0 12px 48px rgba(0,0,0,.18);
}
.site-header .brand {font-size:37px;line-height:.85;white-space:nowrap}
.site-header .brand span {margin-top:13px;font-size:8px;letter-spacing:3.6px;color:var(--gold)}
.site-header nav {gap:36px;justify-content:center}
.site-header nav a {
  padding:5px 0;position:relative;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:#d5d1c9;white-space:nowrap;
}
.site-header nav a::after {
  content:"";position:absolute;height:1px;background:var(--gold);
  bottom:5px;left:0;right:100%;transition:right .35s ease;
}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after,.site-header nav a[aria-current="location"]::after {right:0}
.site-header .header-edition {justify-self:end;color:var(--gold);font-size:10px;letter-spacing:2px;white-space:nowrap}
.hero {
  min-height:min(820px,calc(100svh - 95px));padding:80px 5% 96px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;
  position:relative;isolation:isolate;
}
.hero::before {
  content:"";position:absolute;inset:7% 0 0 47%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(93,51,116,.28),transparent 62%);
  pointer-events:none;
}
.hero .intro {position:relative;align-self:center;padding:32px 0 0}
.hero-kicker {display:flex;gap:18px;align-items:center;max-width:430px}
.hero-kicker .eyebrow {margin:0;flex:0 0 auto;font-size:10px;letter-spacing:2.5px}
.hero-rule {height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent)}
.hero-issue {color:#8d8a80;font-size:10px;letter-spacing:2px}
.hero h1 {
  font-size:clamp(72px,7.35vw,122px);line-height:1.01;
  letter-spacing:-.07em;margin:44px 0 35px;text-wrap:balance;
}
.hero h1 em {font-style:italic;color:#d5b77d;white-space:nowrap}
.hero .lede {font-size:15px;line-height:2;color:#b5b2aa;letter-spacing:.08px}
.hero-actions {display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:45px}
.hero-actions .cta,.hero-actions .secondary-cta {
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:36px;margin:0;padding:15px 0;max-width:none;
  font-size:12px;letter-spacing:.7px;
  transition:color .25s,border-color .25s;
}
.hero-actions .cta {min-width:205px;border-bottom:1px solid var(--gold);color:#eee7d7}
.hero-actions .secondary-cta {color:#a5a49e;border-bottom:1px solid #4a4a42}
.hero-actions a:hover {color:var(--gold);border-color:var(--gold)}
.hero-actions a span {position:relative;display:inline-block;width:14px;height:14px;font-size:0}
.hero-actions a span::before {
  content:"";position:absolute;top:1px;right:1px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
}
.hero-actions a span::after {
  content:"";position:absolute;top:7px;right:1px;width:14px;height:1px;
  background:currentColor;transform:rotate(-45deg);transform-origin:right center;
}
.hero-bottom {
  display:flex;justify-content:space-between;gap:16px;max-width:500px;
  margin-top:94px;padding-top:17px;border-top:1px solid var(--line);
  color:#979487;font-size:9px;letter-spacing:2px;line-height:1.6;
}
.hero-bottom span:last-child span {color:var(--gold);margin-left:8px}
.hero-art {
  position:relative;align-self:center;justify-self:center;width:min(100%,560px);max-width:none;
  transform:rotate(1.2deg);filter:drop-shadow(0 35px 55px rgba(0,0,0,.55));
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s ease;
}
.hero-art::before {
  content:"";position:absolute;inset:-16px;pointer-events:none;
  border:1px solid rgba(194,162,109,.23);transform:translate(10px,9px);z-index:-1;
}
.hero-art::after {
  content:"";position:absolute;left:0;right:0;bottom:37px;height:40%;
  background:linear-gradient(0deg,rgba(15,10,21,.26),transparent);pointer-events:none;
}
.hero-art:hover {transform:rotate(0) translateY(-8px);filter:drop-shadow(0 45px 70px rgba(71,30,86,.3))}
.hero-art>img {border:1px solid rgba(196,157,98,.42);box-shadow:0 0 0 7px rgba(11,10,12,.5)}
.hero-art .hero-art-corner {
  position:absolute;top:-39px;left:0;padding:0;color:var(--gold);
  font-size:9px;letter-spacing:2.6px;
}
.hero-art>span:last-child {position:relative;z-index:1;padding-top:19px;font-size:10px;letter-spacing:1.6px}
.chapter-divider {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 5%;border-block:1px solid var(--line);
  color:#a79d89;font-size:9px;letter-spacing:2.8px;
}
.chapter-divider span:first-child {
  font:italic 23px 'Playfair Display',Georgia,serif;letter-spacing:-.5px;color:var(--gold);
}
.vault-section {
  padding-top:125px;padding-bottom:135px;
  background:radial-gradient(ellipse at 12% 65%,rgba(91,50,100,.09),transparent 47%);
}
.vault-section .section-head,.poster-section .section-head {margin-bottom:63px}
.vault-section .section-head h2,.poster-section .section-head h2 {
  font-size:clamp(56px,6vw,94px);line-height:1.1;
}
.vault-section .section-head em,.poster-section .section-head em {font-style:italic}
.vault-section .section-head p:not(.eyebrow),.poster-section .section-head p:not(.eyebrow) {font-size:14px;max-width:350px}
.gallery {gap:26px}
.gallery .piece {position:relative}
.gallery .piece::before {
  position:absolute;top:17px;left:18px;z-index:1;content:"EXHIBIT / 001";
  background:rgba(10,10,11,.77);backdrop-filter:blur(8px);
  padding:11px 12px;color:#e0c393;font-size:9px;letter-spacing:1.9px;
  border:1px solid rgba(213,182,125,.3);pointer-events:none;
}
.gallery .piece:nth-child(2)::before {content:"EXHIBIT / 002"}
.gallery .piece:nth-child(3)::before {content:"EXHIBIT / 003"}
.gallery .piece img {
  aspect-ratio:4/5;object-fit:contain;background:#121114;border:1px solid #44362f;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s ease,box-shadow .6s ease;
}
.gallery .piece:hover img {
  transform:translateY(-7px);filter:brightness(1.06);
  box-shadow:0 24px 45px #0009,0 0 38px #5d426030;
}
.gallery .piece>span {padding:22px 4px 0;border-color:var(--line)}
.gallery .piece b {font-size:32px}
.gallery .piece small {font-size:10px}
.feature {
  position:relative;grid-template-columns:1fr 1fr;gap:11%;
  padding-top:130px;padding-bottom:130px;overflow:hidden;
  background:linear-gradient(115deg,#171615,#0f1010 65%);
}
.feature::before {
  content:"02";position:absolute;top:5%;right:2%;
  font:340px 'Playfair Display',Georgia,serif;line-height:1;
  color:rgba(205,177,126,.035);pointer-events:none;
}
.feature-media {position:relative;max-width:530px;margin-left:7%}
.feature-media::before {
  content:"";position:absolute;inset:-25px 25px 46px -25px;
  border:1px solid rgba(197,170,115,.32);pointer-events:none;
}
.feature-stamp {
  position:absolute;right:12px;top:-45px;font-size:9px;
  letter-spacing:2.2px;color:var(--gold);
}
.feature .piece {max-width:none;position:relative;width:100%}
.feature .piece img {aspect-ratio:4/5;object-fit:contain;border:1px solid rgba(190,160,113,.38)}
.feature .piece>span {border-color:var(--line)}
.feature-copy {position:relative;z-index:1}
.feature-copy h2 {
  font-size:clamp(54px,5.2vw,82px);line-height:1.13;margin:33px 0 32px;
}
.feature-copy h2 em {font-style:italic}
.feature-copy>p:not(.eyebrow) {font-size:15px;line-height:2;max-width:380px}
.feature-copy .text-link {margin-top:35px;font-size:12px;letter-spacing:1px}
.feature-copy .text-link span {margin-left:35px;position:relative;display:inline-block;width:14px;height:14px;font-size:0}
.feature-copy .text-link span::before {
  content:"";position:absolute;right:1px;top:1px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
}
.feature-copy .text-link span::after {
  content:"";position:absolute;right:1px;top:7px;width:14px;height:1px;
  background:currentColor;transform:rotate(-45deg);transform-origin:right center;
}
.feature-index {display:block;margin-top:105px;color:#766e61;font-size:10px;letter-spacing:3px}
.poster-section {padding-top:130px;padding-bottom:145px;background:#111210}
.archive-subhead {
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:18px 0;margin:0 0 35px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font-size:10px;letter-spacing:2.2px;color:#a7a08e;
}
.archive-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:55px 22px}
.archive-grid .piece {position:relative}
.archive-grid .piece::after {
  content:"↗";position:absolute;top:13px;right:14px;width:34px;height:34px;
  border:1px solid #ccb37d99;border-radius:50%;display:grid;place-items:center;
  background:#12100f99;color:#edddbf;font-size:16px;
  opacity:0;transform:translate(-5px,5px);
  transition:opacity .3s,transform .3s;pointer-events:none;
}
.archive-grid .piece:hover::after,.archive-grid .piece:focus-visible::after {
  opacity:1;transform:translate(0,0);
}
.archive-grid .piece img {
  aspect-ratio:4/5;object-fit:contain;border-radius:0;border:1px solid #3d372e;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease,box-shadow .45s ease;
}
.archive-grid .piece:hover img {
  transform:translateY(-5px);filter:brightness(1.09);
  box-shadow:0 20px 35px #0008;
}
.archive-grid .piece>span {display:block;padding:17px 0 0;border-color:#3e3b33}
.archive-grid .piece b {
  display:block;font:21px 'Playfair Display',Georgia,serif;
  line-height:1.25;letter-spacing:-.4px;min-height:52px;
}
.archive-grid .piece small {
  display:block;color:#ac9670;margin:12px 0 0;
  letter-spacing:1.6px;font-size:9px;
}
.gallery .piece small,.archive-grid .piece small {font-family:'DejaVu Sans','DM Sans',sans-serif}
.identity {
  position:relative;overflow:hidden;padding-top:145px;padding-bottom:145px;
  background:radial-gradient(ellipse at 85% 55%,rgba(106,72,31,.1),transparent 55%),#171814;
}
.identity::before {
  content:"SUPHERB";position:absolute;bottom:-.19em;right:-.01em;
  font:clamp(180px,26vw,410px) 'Playfair Display',Georgia,serif;
  letter-spacing:-.075em;line-height:1;color:rgba(218,191,137,.04);
  pointer-events:none;white-space:nowrap;
}
.identity h2 {
  position:relative;font-size:clamp(65px,8vw,128px);max-width:1000px;
  letter-spacing:-.055em;line-height:1.07;margin:34px 0 80px;
}
.identity h2 em {font-style:italic}
.identity-bottom {position:relative;align-items:end;border-top:1px solid var(--line);padding-top:35px}
.identity-bottom p {font-size:15px;line-height:1.95;max-width:480px}
.swatches {gap:9px}
.swatches i {width:46px;height:46px;border:3px solid #171814;outline:1px solid #82765f;border-radius:50%}
footer {border-color:var(--line);background:#0b0c0b}
footer .brand {color:#ebdfc9}
.motion-ready [data-reveal] {transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.25,1)}
.motion-ready [data-reveal]:not(.is-visible) {opacity:0;transform:translateY(30px)}
@media(max-width:1150px) {
  .site-header {grid-template-columns:1fr auto}
  .site-header nav {justify-content:end}
  .header-edition {display:none}
  .hero {gap:4%;padding-top:60px}
  .hero h1 {font-size:clamp(68px,7.7vw,100px)}
  .hero-bottom {margin-top:60px}
  .archive-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px) {
  .site-header {height:80px}
  .hero {min-height:auto;gap:55px;padding:70px 5% 75px;grid-template-columns:1fr}
  .hero .intro {padding-top:0}
  .hero h1 {font-size:clamp(70px,12vw,108px)}
  .hero-bottom {margin-top:55px}
  .hero-art {width:min(85%,520px)}
  .chapter-divider {padding-block:19px}
  .chapter-divider span:last-child {display:none}
  .vault-section,.poster-section {padding-top:85px;padding-bottom:90px}
  .gallery {gap:18px}
  .gallery .piece b {font-size:26px}
  .gallery .piece>span {display:block}
  .gallery .piece small {margin:10px 0}
  .feature {padding-top:105px;padding-bottom:100px;gap:65px;grid-template-columns:1fr}
  .feature-media {margin-left:24px;width:min(80%,490px)}
  .feature-copy h2 {font-size:clamp(56px,8vw,75px)}
  .feature-index {margin-top:55px}
  .identity {padding-top:100px;padding-bottom:100px}
  .archive-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 18px}
}
@media(max-width:600px) {
  .site-header {height:auto;min-height:80px;padding:18px 5%;grid-template-columns:1fr;gap:18px}
  .site-header .brand {font-size:32px}
  .site-header .brand span {font-size:7px;margin-top:10px}
  .site-header nav {justify-content:space-between;width:100%;gap:10px}
  .site-header nav a {min-height:30px;font-size:10px;letter-spacing:1.2px}
  .hero {padding-top:54px;gap:60px}
  .hero h1 {font-size:clamp(65px,14vw,94px);margin:35px 0 25px}
  .hero-kicker .eyebrow {font-size:9px;letter-spacing:1.8px}
  .hero-issue {display:none}
  .hero .lede {font-size:14px}
  .hero-actions {gap:7px 22px;margin-top:32px}
  .hero-actions .cta {min-width:175px}
  .hero-actions .secondary-cta {font-size:11px}
  .hero-bottom {margin-top:54px;font-size:8px;letter-spacing:1.3px}
  .hero-art {width:89%}
  .hero-art .hero-art-corner {font-size:8px;top:-31px}
  .chapter-divider {font-size:8px;letter-spacing:1.5px}
  .chapter-divider span:first-child {font-size:19px}
  .vault-section .section-head,.poster-section .section-head {margin-bottom:32px}
  .vault-section .section-head h2,.poster-section .section-head h2 {font-size:clamp(47px,11vw,68px)}
  .gallery {grid-template-columns:1fr;gap:40px}
  .gallery .piece img {max-height:none}
  .gallery .piece b {font-size:30px}
  .gallery .piece>span {display:flex}
  .feature {gap:57px}
  .feature-media {width:calc(100% - 28px);margin-left:22px}
  .feature-media::before {inset:-16px 16px 30px -16px}
  .feature-stamp {top:-36px;right:0;font-size:8px}
  .feature-copy h2 {font-size:clamp(48px,11vw,65px)}
  .feature-index {margin-top:50px}
  .archive-subhead {font-size:8px;letter-spacing:1.1px}
  .archive-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:33px 14px}
  .archive-grid .piece b {font-size:17px;min-height:63px}
  .archive-grid .piece small {font-size:8px;letter-spacing:.8px}
  .archive-grid .piece>span {padding-top:13px}
  .identity h2 {font-size:clamp(52px,11vw,80px);margin-bottom:55px}
  .identity-bottom p {font-size:14px}
  .swatches {margin-top:35px}
  .swatches i {width:41px;height:41px}
}
@media(prefers-reduced-motion:no-preference) {
  .hero .intro {animation:hero-enter .9s cubic-bezier(.2,.8,.2,1) both}
  .hero-art {animation:art-enter 1.1s cubic-bezier(.2,.8,.2,1) .12s both}
  @keyframes hero-enter {
    from {opacity:0;transform:translateY(25px)}
    to {opacity:1;transform:translateY(0)}
  }
  @keyframes art-enter {
    from {opacity:0;clip-path:inset(4% 3% 4% 3%)}
    to {opacity:1;clip-path:inset(0)}
  }
}
@media(max-width:420px) {
  .archive-grid {grid-template-columns:1fr;gap:42px}
  .archive-grid .piece b {min-height:0;font-size:21px}
  .hero h1 {font-size:clamp(58px,14vw,65px)}
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready [data-reveal] {transition:none!important}
  .motion-ready [data-reveal]:not(.is-visible) {opacity:1;transform:none}
  .hero-art:hover,.gallery .piece:hover img,.archive-grid .piece:hover img {transform:none}
}