/* SUPHERB / THE POSTER ATELIER — colour-led visual direction */
:root {
  --bg:#110d15; --ink:#f7f0e4; --gold:#e5bd73; --muted:#c1b7bb;
  --line:rgba(243,191,108,.3);
  --violet:#ab63dc; --pink:#f38cbd; --emerald:#4dd0a7; --citrus:#f6ce59;
}
html {scroll-padding-top:110px}
body {
  background:linear-gradient(180deg,#1a0d20,#120e18 27%,#121215 55%,#0f1111);
  color:var(--ink);
}
main {display:flex;flex-direction:column}
main>.hero,main>.chapter-divider {display:none}
#posters {order:-4}
#discover {order:-3}
.site-header {
  grid-template-columns:1fr auto auto;
  background:linear-gradient(90deg,rgba(24,11,33,.97),rgba(18,16,24,.96));
  border-bottom:1px solid rgba(231,170,97,.47);
  box-shadow:0 12px 45px rgba(31,6,30,.35);
}
.site-header .brand {
  color:#f7e8cb;text-shadow:0 0 25px rgba(228,139,209,.12);
}
.site-header .brand span {color:#e5bd73}
.site-header nav {gap:28px}
.site-header nav a {font-size:10px;letter-spacing:1.5px}
.site-header nav a:hover {color:#f1cb8a}
.site-header .header-edition {color:#dbb6cd}
.poster-section {padding:0;background:transparent;border-top:0}
.poster-stage {
  min-height:780px;position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  align-items:center;gap:3%;padding:76px 5% 68px;
  background:
    radial-gradient(ellipse 33% 50% at 76% 43%,rgba(231,76,142,.32),transparent 90%),
    radial-gradient(ellipse 36% 48% at 89% 7%,rgba(87,68,217,.26),transparent 100%),
    radial-gradient(ellipse 42% 60% at 18% 86%,rgba(11,141,126,.24),transparent 100%),
    linear-gradient(118deg,#191023 0%,#21132c 36%,#141821 72%,#171018 100%);
}
.poster-stage::before {
  content:"";position:absolute;inset:0;z-index:-1;opacity:.3;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);
}
.poster-stage::after {
  content:"";position:absolute;inset:20px;z-index:-1;border:1px solid rgba(241,198,125,.1);
  pointer-events:none;
}
.stage-orbit {
  position:absolute;border:1px solid rgba(246,195,111,.1);border-radius:50%;pointer-events:none;
}
.stage-orbit-one {width:850px;height:850px;right:-240px;top:-220px}
.stage-orbit-two {width:600px;height:600px;right:-110px;top:-105px;border-color:rgba(236,149,224,.11)}
.stage-copy {position:relative;z-index:5;padding-top:10px}
.stage-kicker {
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  color:#f6c993!important;font-size:10px!important;letter-spacing:2.1px;max-width:none!important;
}
.stage-kicker .sparkle {font-size:18px;color:#f9e0a2}
.kicker-rule {display:inline-block;width:32px;height:1px;background:#d69f81}
.stage-copy h1 {
  font-family:'Playfair Display',Georgia,serif;font-size:clamp(74px,7.5vw,117px);
  font-weight:500;letter-spacing:-.07em;line-height:1.02;
  margin:38px 0 28px;color:#fff2de;
  text-shadow:0 12px 40px #0006;
}
.stage-copy h1 em {
  font-style:italic;white-space:nowrap;letter-spacing:-.075em;
  color:#ffe1a0;
  background:linear-gradient(145deg,#fff1c6 2%,#eeb97c 44%,#c989e2 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.poster-section .stage-description {
  max-width:465px;color:#d8cbd6;font-size:15px;line-height:1.95;
  text-shadow:0 1px 15px #0004;
}
.stage-actions {display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:39px}
.stage-button,.stage-link {
  display:inline-flex;align-items:center;justify-content:space-between;gap:30px;
  min-height:54px;padding:16px 20px;font-size:12px;letter-spacing:.7px;
  transition:transform .25s,box-shadow .25s,background .25s;
}
.stage-button {
  background:linear-gradient(125deg,#f4d399,#c4925e);
  color:#251322;border:1px solid #ffe3ab;font-weight:600;
  box-shadow:0 10px 35px #f7c97a25;
}
.stage-button:hover {transform:translateY(-3px);box-shadow:0 16px 45px #f7c97a45}
.stage-link {padding-inline:0;color:#f9e0cc;border-bottom:1px solid #dba6bd}
.stage-link:hover {color:#fff;transform:translateX(4px)}
.stage-button span {
  position:relative;display:inline-block;width:14px;height:14px;font-size:0;
}
.stage-button span::before {
  content:"";position:absolute;top:1px;right:1px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
}
.stage-button span::after {
  content:"";position:absolute;top:7px;right:1px;width:14px;height:1px;
  background:currentColor;transform:rotate(-45deg);transform-origin:right center;
}
.stage-signature {
  display:flex;flex-wrap:wrap;gap:18px 24px;margin-top:70px;padding-top:19px;
  border-top:1px solid rgba(234,185,123,.3);color:#d5afc8;
  font-size:9px;letter-spacing:1.8px;
}
.stage-signature span:not(:last-child)::after {content:"✦";margin-left:23px;color:#eac67d}
.stage-gallery {
  position:relative;height:675px;min-width:0;
  filter:drop-shadow(0 40px 42px rgba(5,4,8,.37));
}
.stage-card {
  position:absolute;display:block;border:0;padding:0;background:transparent;
  cursor:pointer;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease;
}
.stage-card img {
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;
  border:4px solid #1e1727;outline:1px solid #f2c6819c;
  box-shadow:0 15px 35px #000a,0 0 26px rgba(202,106,171,.3);
}
.stage-center {width:56%;left:22%;top:1%;z-index:3;transform:rotate(-1deg)}
.stage-left {width:43%;left:0;top:14%;z-index:2;transform:rotate(-11deg)}
.stage-right {width:43%;right:0;top:15%;z-index:2;transform:rotate(11deg)}
.stage-center:hover {transform:translateY(-18px) rotate(0deg) scale(1.04);z-index:5}
.stage-left:hover {transform:translate(-8px,-15px) rotate(-5deg) scale(1.06);z-index:5}
.stage-right:hover {transform:translate(8px,-15px) rotate(5deg) scale(1.06);z-index:5}
.stage-gallery-caption {
  position:absolute;bottom:0;right:2%;color:#f3cfa8;
  font-size:9px;letter-spacing:2px;text-shadow:0 2px 10px #000c;
}
.poster-ticker {
  width:100%;overflow:hidden;padding:18px 0;background:linear-gradient(90deg,#9c3b7b,#d3a25b,#268d78,#8a4dba);
  border-block:1px solid #f8d7ac5c;color:#fff9e9;
  box-shadow:0 8px 25px #2f0d3380;
}
.poster-ticker div {
  width:max-content;font:600 11px 'DM Sans',sans-serif;letter-spacing:3px;
  white-space:nowrap;animation:ticker 33s linear infinite;
}
.poster-ticker span {padding:0 25px;color:#ffe2a7}
@keyframes ticker {to{transform:translateX(-50%)}}
.poster-section>.section-head {
  margin:0!important;padding:115px 5% 62px;
  background:radial-gradient(ellipse at 10% 40%,rgba(124,51,116,.25),transparent 55%),#17121c;
}
.poster-section>.section-head h2 {
  font-size:clamp(58px,6.5vw,94px);text-shadow:0 0 38px #bb698b20;
}
.poster-section>.section-head h2 em {
  color:#f6c887;background:linear-gradient(115deg,#f7d595,#da8cb5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.poster-section>.archive-subhead {
  margin:0;padding:22px 5%;background:#1b1720;
  border-color:rgba(231,179,100,.35);color:#e1c5a0;
  scroll-margin-top:100px;
}
.poster-section>.archive-grid {
  padding:50px 5% 115px;background:
  radial-gradient(ellipse at 85% 12%,rgba(40,131,126,.11),transparent 45%),#15151b;
  gap:45px 24px;
}
.poster-section .archive-grid .piece {padding:8px 8px 0;background:linear-gradient(165deg,#38213c,#1a1920 70%);border:1px solid #805e6b75;box-shadow:0 14px 36px #0004}
.poster-section .archive-grid .piece:nth-child(4n+2) {background:linear-gradient(165deg,#244d47,#1b1b20 75%)}
.poster-section .archive-grid .piece:nth-child(4n+3) {background:linear-gradient(165deg,#57432b,#1b1b20 75%)}
.poster-section .archive-grid .piece:nth-child(4n+4) {background:linear-gradient(165deg,#2d2855,#1b1b20 75%)}
.poster-section .archive-grid .piece img {border:1px solid #dbad7690;background:#0c0c11}
.poster-section .archive-grid .piece>span {padding:17px 11px 18px;border-color:#c5a27855}
.poster-section .archive-grid .piece b {color:#fff2e0}
.poster-section .archive-grid .piece small {color:#e8ba80}
#discover {
  position:relative;overflow:hidden;padding:125px 5% 130px;
  border-top:1px solid #8e6a7880;border-bottom:1px solid #b48a7c77;
  background:
    radial-gradient(ellipse at 10% 0%,rgba(191,71,134,.25),transparent 49%),
    radial-gradient(ellipse at 90% 80%,rgba(60,184,148,.2),transparent 47%),
    linear-gradient(135deg,#261426,#171a23 62%,#14201e);
}
#discover::before {
  content:"✦";position:absolute;top:30px;right:5%;
  color:#d8a9c725;font-size:290px;line-height:1;pointer-events:none;
}
.finder-heading {display:flex;align-items:end;justify-content:space-between;gap:40px;position:relative}
.finder-heading .eyebrow {font-size:10px;color:#f1bf85}
.finder-heading h2 {
  font-size:clamp(60px,6vw,93px);line-height:1.04;margin:21px 0 25px;
  max-width:850px;color:#fff2e6;
}
.finder-heading h2 em {color:#efaccd}
.finder-heading>p {font-size:14px;line-height:1.9;max-width:390px;color:#d5c8cd}
.finder-note {
  position:relative;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:12px 0 36px;color:#beaeb8;font-size:12px;line-height:1.6;
}
.finder-note .note-star {color:#f4d197;font-size:16px}
.finder-toolbar {
  position:relative;display:flex;gap:11px;align-items:center;flex-wrap:wrap;
  padding:22px 0 25px;border-top:1px solid #e1b89455;border-bottom:1px solid #e1b89455;
}
.finder-toolbar .filter-label {
  margin-right:16px;color:#f1d0ab;font-size:10px;letter-spacing:1.8px;
}
.finder-filter,.finder-surprise {
  min-height:43px;padding:11px 17px;border:1px solid #c7a5a66b;
  border-radius:40px;background:#2a1d2b;color:#e6d6db;
  font:12px 'DM Sans',sans-serif;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,border-color .2s;
}
.finder-filter:hover,.finder-filter:focus-visible {border-color:#f4d3a4}
.finder-filter[aria-pressed="true"] {
  background:linear-gradient(115deg,#f1ca88,#e5a5bd);border-color:#ffe4b9;
  color:#2d1724;font-weight:600;
}
.finder-surprise {margin-left:auto;background:transparent;color:#ffdbac;border-color:#c7a074}
.finder-surprise:hover {background:#f0c887;color:#261623;transform:translateY(-2px)}
.finder-status {font-size:12px;color:#cdb6c6;margin:23px 0 27px}
.finder-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.finder-card {
  --card-accent:#e9a3ce;position:relative;min-width:0;display:grid;grid-template-rows:auto 1fr;
  overflow:hidden;background:linear-gradient(155deg,#281c2f,#171922 75%);
  border:1px solid color-mix(in srgb,var(--card-accent) 45%,transparent);
  box-shadow:0 15px 38px #0004;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.finder-card:hover,.finder-card.is-spotlight {
  transform:translateY(-6px);border-color:var(--card-accent);
  box-shadow:0 20px 48px #0007,0 0 38px color-mix(in srgb,var(--card-accent) 15%,transparent);
}
.finder-card[data-tone="citrus"] {--card-accent:#f0d36a}
.finder-card[data-tone="emerald"] {--card-accent:#69d1b5}
.finder-card[data-tone="rose"] {--card-accent:#f48ac5}
.finder-card[data-tone="violet"] {--card-accent:#a998f1}
.finder-card[data-tone="gold"] {--card-accent:#e7bd85}
.finder-media {display:grid;grid-template-columns:44% 1fr;min-height:215px;background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--card-accent) 25%,#211726),#12141b)}
.finder-media img {width:100%;height:100%;max-height:230px;object-fit:contain;object-position:center;background:#0c0d11}
.finder-media-text {align-self:center;padding:20px 14px 20px 19px}
.finder-media-text span {
  display:block;color:var(--card-accent);font-size:9px;letter-spacing:1.8px;
}
.finder-media-text strong {
  display:block;margin-top:13px;font:clamp(26px,2.7vw,43px) 'Playfair Display',Georgia,serif;
  color:#fff0db;letter-spacing:-.045em;line-height:1.08;overflow-wrap:anywhere;
}
.finder-body {padding:25px 26px 26px;display:flex;flex-direction:column}
.finder-lineage {
  color:var(--card-accent);font-size:11px;letter-spacing:.7px;
  line-height:1.5;margin:0 0 16px;
}
.finder-description {color:#d7cbd3;font-size:13px;line-height:1.85;margin:0 0 20px;flex:1}
.finder-tags {display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}
.finder-tags span {
  font-size:10px;letter-spacing:.5px;color:#f4e5de;
  padding:7px 9px;border:1px solid #aa94a063;background:#ffffff08;
}
.finder-links {display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #d3ad9660;padding-top:17px}
.finder-view {
  border:0;padding:0;background:transparent;color:#fff0d5;
  cursor:pointer;text-align:left;font-size:12px;text-decoration:underline;text-decoration-color:var(--card-accent);
  text-underline-offset:5px;
}
.finder-source {font-size:11px;color:var(--card-accent);white-space:nowrap}
.finder-source:hover {text-decoration:underline}
.finder-footnote {font-size:11px;line-height:1.8;color:#b9aab3;margin:28px 0 0;max-width:850px}
.vault-section {
  background:
    radial-gradient(ellipse at 10% 50%,#6d247c3a,transparent 55%),
    radial-gradient(ellipse at 90% 40%,#036d5840,transparent 55%),
    linear-gradient(145deg,#231329,#101c20);
}
.vault-section .section-head h2 em {color:#eac08c}
.gallery .piece img {border:2px solid #cb96788c;box-shadow:0 0 24px #b6638730}
.feature {
  background:
    radial-gradient(ellipse at 95% 15%,#b661512f,transparent 55%),
    radial-gradient(ellipse at 5% 75%,#0b795b2b,transparent 48%),#211923;
}
.feature h2 em {color:#ffc084}
.feature-media::before {border-color:#d9af8a91}
#photography {
  background:
    radial-gradient(ellipse at 85% 5%,rgba(119,71,156,.17),transparent 45%),
    linear-gradient(#171b1a,#141715);
}
#photography>.section-head h2 {color:#f0e1cf}
.identity {
  background:
    radial-gradient(ellipse at 90% 0%,#9659b14d,transparent 50%),
    radial-gradient(ellipse at 0% 85%,#0a7b6b33,transparent 55%),
    linear-gradient(115deg,#20152a,#19211e);
}
.identity h2 em {color:#f6c38b}
footer {background:linear-gradient(90deg,#1c1421,#121819)}
@media(max-width:1200px) {
  .site-header .header-edition {display:none}
  .site-header {grid-template-columns:1fr auto}
  .site-header nav {gap:21px}
  .poster-stage {grid-template-columns:.8fr 1.2fr;gap:1%;min-height:680px}
  .stage-gallery {height:590px}
  .stage-copy h1 {font-size:clamp(68px,7.5vw,100px)}
  .stage-signature {margin-top:42px}
}
@media(max-width:900px) {
  .site-header nav {gap:18px}
  .site-header nav a {font-size:9px;letter-spacing:1px}
  .poster-stage {grid-template-columns:1fr;gap:26px;padding-top:65px}
  .stage-copy {max-width:670px}
  .stage-copy h1 {font-size:clamp(74px,11vw,112px);margin:30px 0}
  .stage-gallery {width:min(100%,700px);height:610px;margin:auto}
  .stage-center {width:52%;left:24%}
  .stage-left,.stage-right {width:41%}
  .stage-signature {margin-top:40px}
  .finder-heading {display:block}
  .finder-heading>p {max-width:600px}
  .finder-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder-surprise {margin-left:0}
}
@media(max-width:600px) {
  .site-header {gap:16px}
  .site-header nav {flex-wrap:wrap;justify-content:space-between;gap:8px 12px}
  .site-header nav a {font-size:9px;letter-spacing:.8px}
  .poster-stage {padding:32px 5% 55px;gap:10px}
  .poster-stage::after {inset:9px}
  .stage-gallery {order:-1;width:100%;height:350px;margin-top:20px}
  .stage-center {width:52%;left:24%;top:0}
  .stage-left,.stage-right {width:42%;top:12%}
  .stage-gallery-caption {bottom:0;font-size:7px;letter-spacing:1px}
  .stage-copy {padding-top:0}
  .stage-kicker {font-size:8px!important;letter-spacing:.9px;gap:7px}
  .stage-kicker .sparkle {font-size:15px}
  .kicker-rule {width:18px}
  .stage-copy h1 {font-size:clamp(62px,13vw,80px);margin:24px 0 24px}
  .poster-section .stage-description {font-size:14px;line-height:1.75}
  .stage-actions {margin-top:28px;gap:7px 19px}
  .stage-button {min-height:48px;padding:13px 17px}
  .stage-link {min-height:48px}
  .stage-signature {margin-top:37px;gap:10px 14px;font-size:8px;letter-spacing:.8px}
  .stage-signature span:not(:last-child)::after {margin-left:10px}
  .poster-ticker {padding:13px 0}
  .poster-ticker div {font-size:9px;letter-spacing:2px}
  .poster-section>.section-head {padding:70px 5% 38px}
  .poster-section>.section-head h2 {font-size:clamp(53px,10vw,66px)}
  .poster-section>.archive-grid {padding:35px 5% 85px;gap:25px 13px}
  .poster-section .archive-grid .piece {padding:5px 5px 0}
  .poster-section .archive-grid .piece>span {padding:12px 5px 13px}
  #discover {padding:78px 5% 90px}
  .finder-heading h2 {font-size:clamp(55px,11vw,76px)}
  .finder-toolbar {gap:8px}
  .finder-toolbar .filter-label {width:100%;margin-bottom:5px}
  .finder-filter,.finder-surprise {padding:10px 13px;min-height:40px;font-size:11px}
  .finder-grid {grid-template-columns:1fr;gap:18px}
  .finder-media {min-height:190px}
  .finder-media img {max-height:220px}
  .finder-media-text strong {font-size:35px}
  .finder-body {padding:22px}
}
@media(max-width:420px) {
  .poster-section>.archive-grid {grid-template-columns:1fr;gap:32px}
  .stage-gallery {height:300px}
  .stage-copy h1 {font-size:clamp(55px,13vw,62px)}
  .stage-signature span:last-child {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .poster-ticker div {animation:none}
  .stage-card {transition:none}
  .stage-center:hover {transform:rotate(-1deg)}
  .stage-left:hover {transform:rotate(-11deg)}
  .stage-right:hover {transform:rotate(11deg)}
}