/* La Socieda: the architectural gallery layer.
   The generated room is decorative concept art; artist media stays original. */
:root {
  --ink: #0c0e0c;
  --ink-soft: #171914;
  --surface: #22231c;
  --cream: #f1ecdf;
  --gold: #cfad73;
  --gold-light: #f0d7a5;
  --line: rgba(220, 196, 147, .22);
}
body { background: #0c0e0c; isolation: isolate; }
.site-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0c0e0c; }
.site-atmosphere__image { position: absolute; inset: -8%; background: url('assets/studio-vault.webp') 68% 45% / cover no-repeat; opacity: .33; transform: scale(1.08); will-change: transform; }
.site-atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 11, 9, .64), rgba(8, 11, 9, .18) 55%, rgba(8, 11, 9, .35)), linear-gradient(0deg, #0c0e0c, transparent 28%, transparent 70%, rgba(10, 12, 10, .3)); }
.site-atmosphere__lines { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(90deg, transparent calc(50% - .5px), #c9af7866 50%, transparent calc(50% + .5px)); background-size: 14.28% 100%; mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent); }
.site-atmosphere__grain { position: absolute; inset: 0; opacity: .035; background-image: url('assets/material-grain.svg'); }
body[data-page='videos'] .site-atmosphere__image { opacity: .19; }
body[data-page='contact'] .site-atmosphere__image { opacity: .5; }
main { position: relative; }

/* A precise metal navigation rail, carried into every route. */
.site-header { background: linear-gradient(180deg, rgba(24, 26, 21, .95), rgba(11, 13, 11, .92)); box-shadow: 0 1px 0 rgba(255, 229, 181, .07), 0 12px 45px rgba(0, 0, 0, .22); backdrop-filter: blur(18px); }
.site-header::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: linear-gradient(90deg, transparent, #e0c28a77, transparent); }
.brand img { filter: drop-shadow(0 0 14px #ad824d33); }
.brand-type { letter-spacing: .02em; }
.desktop-nav { height: 42px; padding: 4px; gap: 2px; border: 1px solid #c8ae7730; background: linear-gradient(145deg, #25271f77, #11130e99); box-shadow: inset 0 1px 0 #ffffff08, 0 4px 18px #0003; }
.desktop-nav a { height: 32px; padding: 0 15px; font-size: 10px; letter-spacing: .02em; }
.desktop-nav a::after { bottom: -1px; width: 14px; height: 1px; border-radius: 0; }
.desktop-nav a[aria-current='page'] { color: #f3ddaf; background: linear-gradient(135deg, #ae8c4433, #82622b13); box-shadow: inset 0 0 0 1px #d4b87a25; }
.desktop-nav a:hover { color: #f5dfb2; background: #c8a76e12; }
.motion-toggle { padding: 10px 0 10px 15px; border-left: 1px solid var(--line); }
.button { position: relative; overflow: hidden; border: 1px solid transparent; box-shadow: 0 9px 25px #0002; transition: transform .35s var(--ease), background .35s, box-shadow .35s; }
.button::before { content: ''; position: absolute; inset: -70% -35%; background: linear-gradient(105deg, transparent 32%, #fff4 48%, transparent 60%); transform: translateX(-90%) skewX(-20deg); transition: transform .65s var(--ease); pointer-events: none; }
.button:hover::before { transform: translateX(90%) skewX(-20deg); }
.button:hover { box-shadow: 0 13px 35px #0004; transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-gold { color: #191a12; background: linear-gradient(125deg, #e3c793, #c4a169 65%, #d6b97e); border-color: #ead4a699; box-shadow: inset 0 1px 0 #fff6, 0 7px 24px #0004; }
.button-cream { color: #17190f; background: linear-gradient(135deg, #f5efdf, #dcd2ba); border-color: #fff6; }
.text-link { text-underline-offset: 5px; }
.text-link:hover { color: var(--gold-light); }
.icon-button { background: linear-gradient(140deg, #373b2c55, #11150f88); box-shadow: inset 0 1px 0 #ffffff0b; border-color: #d2b57955; }
.icon-button:hover { box-shadow: inset 0 0 16px #dbb87719, 0 5px 15px #0004; }
.mobile-menu { background: linear-gradient(100deg, rgba(10, 13, 10, .98), rgba(17, 20, 14, .83)), url('assets/studio-vault.webp') 65% center / cover; box-shadow: 0 25px 65px #0009; }
.mobile-menu > a { border-bottom-color: #d4b57c38; }
.mobile-menu > a[aria-current='page'] { color: var(--gold-light); }
.mobile-menu > a > span { display: inline-block; min-width: 32px; }
.mobile-menu > p { padding-top: 20px; border-top: 1px solid #d7bc8450; }

/* The opening is now a physical room, with the portraits suspended in it. */
.hero-stage { background: #11150f; }
.hero-architecture { position: absolute; inset: -7%; background: linear-gradient(90deg, rgba(6, 9, 7, .38), rgba(6, 9, 7, .16) 44%, transparent), url('assets/studio-vault.webp') 64% center / cover no-repeat; opacity: .76; transform: scale(1.03); will-change: transform; }
.hero-ambient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0a0d0add, #0a0d0a50 40%, #0a0d0a10 75%), linear-gradient(0deg, #0d100de8, transparent 28%, transparent 76%, #0d100d35); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; color: #dcc38f; background: #26271980; border: 1px solid #c8ad7050; padding: 8px 11px; box-shadow: inset 0 1px 0 #fff1; }
.hero-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold-light); }
.hero-copy h1 { text-shadow: 0 8px 32px #0006; }
.hero-copy .gold-type { background: linear-gradient(115deg, #ead5a7 7%, #c6a66b 32%, #e5c88b 48%, #a27e46 75%, #d6b577); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { color: #d1cbbd; }
.hero-meta { color: #ded1b6; }
.hero-meta span:last-child { color: #b7aa8f; }
/* A filter on this shared scene flattens its 3D children and makes the
   whole record cover the portraits. Keep the planes intersecting; the
   individual photo frames and record already provide their own shadows. */
.hero-sculpture { --record-depth: calc(16.34643cqw - 9.41088cqh - 22.66006px); --record-drop: 45px; --record-slide: 0px; filter: none; container-type: size; }
.sculpture-shadow { transform: translateZ(-300px) rotate(-9deg); }
.portrait-slip { padding: 11px 11px 28px; background: linear-gradient(130deg, #ceba8d 0, #605845 1%, #191d17 8%, #2e3024 52%, #0d100d 92%, #a28a5f 100%); box-shadow: 1px 1px 0 #f6dca766, 3px 4px 0 #161b11, inset 0 0 0 2px #e8d8a622; }
.portrait-slip img { filter: saturate(.88) contrast(1.04); }
.portrait-slip::after { inset: 11px 11px 28px; background: linear-gradient(145deg, #ffe9b526, transparent 30%, transparent 66%, #09100533); box-shadow: inset 0 0 0 1px #e5d2a933; }
.portrait-slip span { color: #e1d2b1; bottom: 8px; font-size: 6px; letter-spacing: .07em; }
/* Recede only España80's plane so the existing record cuts through the photo.
   Scaling about the perspective eye preserves its projected position and angle. */
.slip-one {
  --espana-lift: 50px;
  --espana-depth: calc(-2.77240cqw + 10.80200cqh - var(--espana-lift) * .230868 + var(--record-depth));
  --espana-recession: .016;
  --espana-eye-x: -25.5cqw;
  --espana-eye-y: calc(-5.5cqh - var(--espana-lift));
  --espana-scale: calc(1 + var(--espana-recession));
  transform: translate3d(calc(var(--espana-eye-x) * var(--espana-recession)), calc(-1 * var(--espana-lift) + var(--espana-eye-y) * var(--espana-recession)), calc(1000px + (var(--espana-depth) - 1000px) * var(--espana-scale))) rotateY(14deg) rotateZ(-9deg) scale3d(var(--espana-scale), var(--espana-scale), var(--espana-scale));
}
.slip-two { --izad-lift: -80px; transform: translateY(var(--izad-lift)) rotateY(-14deg) rotateZ(9deg); }
.slip-two span { left: auto; right: 10px; font-size: 8px; text-align: right; transform: translateZ(24px); }

/* The cut meets the beginning of iZad's caption. Moving the record within
   that plane keeps the portraits fixed and leaves the full center label clear. */
.vinyl-assembly { transform: translate3d(var(--record-slide), var(--record-drop), calc(var(--record-depth) - var(--record-slide) * .144237636 + var(--record-drop) * .230868191)) rotateX(13deg) rotateY(8deg) rotateZ(-18deg) scale(var(--record-scale, 1)); }
.vinyl-record { box-shadow: inset 0 0 0 5px #131810, inset 0 0 0 7px #5c5a41, 0 0 30px #c89a4029; }
.record-light { background: conic-gradient(from 30deg, transparent, #fbdda313 24deg, transparent 72deg, transparent 150deg, #fff1bc24 171deg, transparent 198deg, transparent); }
.ambient-ring { border-color: #d8ba7955; box-shadow: inset 0 0 0 6px #b7954b06, 0 0 0 24px #b7954b05; opacity: .7; }
.floor-lines { opacity: .65; }
.hero-bottom { padding-top: 22px; border-top: 1px solid #d3b67a33; }
.hero-genres { color: #baae91; }
.scroll-orbit { background: #181c1444; border-color: #d5b88277; box-shadow: inset 0 1px 0 #e5d3a911; }
.marquee { padding: 13px 0; background: linear-gradient(90deg, #9d804d, #e0c793 42%, #b99759); box-shadow: 0 -1px 0 #e3cfac, 0 8px 30px #0005; }

/* Record sleeves sit on a layered gallery shelf. */
.releases-section { position: relative; background: linear-gradient(160deg, #1b1f16ee, #0d110ce8 52%, #23251ae6); border-bottom: 1px solid #bb9c6540; }
.releases-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #e9c88704 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.section-top > .eyebrow { color: #d2b781; }
.home-release-grid { position: relative; align-items: start; gap: 20px; }
.home-release-grid .release-card { padding: 14px 12px 12px; border: 1px solid #ccae7340; background: linear-gradient(150deg, #464b3233, #10170c99 52%, #252d1b66); box-shadow: inset 0 1px 0 #dcca9e16, 10px 15px 35px #0004; }
.home-release-grid .release-art { margin-bottom: 20px; }
.home-release-grid .release-card h3 { font-size: 19px; }
.home-release-grid .release-meta-line > span { font-size: 7px; }
.home-release-grid .release-meta-bottom { border-color: #d5b57740; }
.release-sleeve { box-shadow: 4px 5px 0 #0b100b, 5px 6px 0 #dbc79a45, 12px 17px 24px #0006; }
.release-sleeve::after { box-shadow: inset 0 0 0 1px #ffffff25; background: linear-gradient(120deg, #ffedc422, transparent 32%, transparent 65%, #0005); }
.release-listen { background: #10150be6; border-color: #dcc08788; }
.release-save { border: 1px solid #bfa57130; background: #060a0544; }
.release-save:hover { border-color: #d9ba79aa; color: #e7c995; }
.roster-invitation { box-shadow: inset 0 1px 0 #d4b87a4d, inset 0 -1px 0 #d4b87a4d, 0 20px 80px #0004; }
.roster-photo-wall { opacity: .64; }
.roster-photo-wall::after { background: radial-gradient(ellipse at 49% 46%, #080d0870, #090d09b8), linear-gradient(0deg, #0a100cd9, transparent 26%, transparent 75%, #0a100c66); }
.roster-invite-copy h2 { text-shadow: 0 8px 35px #0007; }
.roster-invite-copy p { color: #d8d0bf; }
.roster-invite-bottom { color: #d7c7a6; }
.film-section { background: linear-gradient(120deg, #0a0e0bcc, #171c10bb); }
.film-feature { padding: 22px; background: linear-gradient(140deg, #252b1b80, #080f078c); border: 1px solid #c5a66555; box-shadow: inset 0 1px 0 #eee2b91a, 0 25px 65px #0004; }
.film-image { border: 1px solid #d2ba8366; box-shadow: 0 12px 32px #0006; }
.film-play { box-shadow: 0 0 0 12px #e5c78a0d, 0 0 0 13px #e5c78a28; background: #e0c38aa6; border-color: #f6dfb1; }
.film-copy { padding: 16px 12px; }
.home-manifesto { background: radial-gradient(ellipse at 20% 40%, #78613933, transparent 65%); }
.home-manifesto h2 { text-shadow: 0 5px 25px #0007; }
.manifesto-seal { filter: drop-shadow(0 12px 35px #000a); }

/* A gallery room behind the existing, reversible artist camera. */
.artist-stage { background: #11160f; }
.artist-atmosphere::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #081009e6 0%, #0c120a88 38%, #0c120a05 75%), url('assets/studio-vault.webp') 66% center / cover no-repeat; opacity: .73; }
.artist-atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0c140dcc, transparent 25%, transparent 80%, #0a100a70); }
.journey-orbit { border-color: #d7bd8055; box-shadow: 0 0 0 9px #c8a86407; }
.journey-horizon { opacity: .85; }
.journey-word { color: #eee0b703; -webkit-text-stroke-color: #d9bb7b35; }
.artist-toolbar { padding-bottom: 18px; border-bottom: 1px solid #d6b47438; }
.artist-toolbar h1 { text-shadow: 0 8px 30px #0006; }
.view-toggle { background: linear-gradient(130deg, #353f2677, #080e0899); border-color: #d7bd7e6b; box-shadow: inset 0 1px 0 #e9d29a16; }
.view-toggle:hover { background: #a5843d33; }
.journey-panel { border-color: #c2a574; background: linear-gradient(135deg, #a0916b, #303a23 2%, #10190e 9%, #222f1a 76%, #b09865); box-shadow: 0 0 0 1px #030904, 3px 4px 0 #646a4c, 7px 8px 0 #080e07, 15px 32px 52px #000a, -1px -1px 0 #e4cd98; }
.journey-panel::after { background: linear-gradient(125deg, #e0c37d2e, transparent 27%, transparent 65%, #2126104d); box-shadow: inset 0 0 0 1px #e1cd9f44; }
.journey-photo { filter: saturate(.9) contrast(1.04); }
.panel-number { background: #111a0fcc; border-color: #ddc38866; color: #ecdfc0; }
.journey-bottom { border-top-color: #e2c48766; }
.artist-index > button { border: 1px solid #bbac752b; background: #111a0c40; }
.artist-index > button[aria-current='true'] { background: linear-gradient(135deg, #e3c78d, #b49152); box-shadow: 0 2px 13px #c3994422; border-color: #e9d19c; }
.artist-overview { padding-top: 20px; background: linear-gradient(180deg, #0c140a77, #091008dd); }
.artist-card { padding: 12px 12px 18px; border: 1px solid #c0a57440; background: linear-gradient(145deg, #30391f55, #0c160bcc 72%); box-shadow: inset 0 1px 0 #eddbad0c, 8px 18px 40px #0004; }
.artist-card-image { border-color: #d2bc8759; box-shadow: 0 5px 18px #0005; }
.artist-card-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, #efd99a15, transparent 40%); box-shadow: inset 0 0 0 1px #fff1; }
.artist-card h2 { color: #ece6d6; }
.artist-card-foot { border-color: #ccb17b44; }

/* The closing frame feels like the last room in the same exhibition. */
.site-footer { background: linear-gradient(90deg, #070d09f5, #0b110ae6 60%, #0b110ad4), url('assets/studio-vault.webp') 70% 58% / cover; border-top: 1px solid #c9af7766; box-shadow: inset 0 1px 0 #e6cc9122; }
.site-footer::before { content: ''; position: absolute; top: 0; right: 7%; width: 1px; height: 180px; background: linear-gradient(#d7bb7a88, transparent); pointer-events: none; }
.footer-top { border-bottom-color: #cbb27b44; }
.footer-invitation > span:nth-child(2) { text-shadow: 0 8px 30px #0008; }
.footer-invitation em { color: #ccb27b; }
.footer-invitation > .icon { padding: 12px; box-sizing: content-box; border: 1px solid #d5bb7d55; background: #d9b86e0a; }
.footer-brand-copy { padding: 23px; border: 1px solid #cdb57938; background: linear-gradient(130deg, #6f704b17, #10190ca3); box-shadow: inset 0 1px 0 #d9c59b15; }
.footer-wordmark { color: #d0b37710; -webkit-text-stroke: 1px #d0b37745; text-shadow: 0 12px 50px #0007; }
.footer-bottom { border-top-color: #c5aa7140; }
.page.is-entering { animation-duration: .65s; }

@media (min-width: 1200px) {
  .home-release-grid { grid-template-columns: 1.38fr 1fr 1fr 1fr 1fr; align-items: end; }
  .home-release-grid .release-card:first-child { padding: 20px 18px 16px; background: linear-gradient(145deg, #6c63432f, #1b23144d); border-color: #dfbf7880; }
  .home-release-grid .release-card:first-child h3 { font-size: 23px; }
  .home-release-grid .release-card:nth-child(even) { margin-bottom: 35px; }
}
@media (min-width: 851px) {
  .artist-details { padding: 25px 28px; background: linear-gradient(130deg, #25351a88, #091308d9); border: 1px solid #c6ae744f; border-left: 2px solid #d4b47b; box-shadow: 0 16px 50px #0003, inset 0 1px 0 #e9dca311; }
  .artist-name { font-size: clamp(39px, 4.5vw, 73px); line-height: 1.15; }
  .artist-kicker { border-bottom: 1px solid #c5b27c30; padding-bottom: 13px; }
}
@media (max-width: 1150px) {
  .desktop-nav a { padding: 0 11px; font-size: 10px; }
  .site-header { gap: 20px; }
  .home-release-grid { gap: 16px; }
  .home-release-grid .release-card { padding: 12px 10px; }
  .hero-eyebrow { font-size: 7px; }
}
@media (max-width: 850px) {
  body[data-page] .site-atmosphere__image { opacity: .25; background-position: 61% center; }
  .site-header { backdrop-filter: blur(12px); }
  .motion-toggle { border-left: 0; padding: 8px; }
  .hero-architecture { opacity: .68; background-position: 62% center; }
  .hero-sculpture { --record-depth: calc(16.12985cqw - 12.84217cqh - 31.89479px); --record-drop: 55px; --record-slide: 0px; }
  .slip-one { --espana-lift: 25px; --espana-depth: calc(-2.55582cqw + 14.08004cqh - var(--espana-lift) * .230868 + var(--record-depth)); --espana-recession: .007; --espana-eye-y: calc(-2cqh - var(--espana-lift)); }
  .slip-two { --izad-lift: -40px; }
  .hero-eyebrow { font-size: 7px; padding: 7px 8px; }
  .hero-eyebrow::before { width: 12px; }
  .hero-bottom { padding-top: 16px; }
  .film-feature { padding: 17px; }
  .artist-details { text-shadow: 0 2px 15px #000b; }
  .artist-atmosphere::before { background-position: 59% center; opacity: .66; }
  .artist-grid { gap: 28px 20px; }
  .artist-card { padding: 10px 10px 15px; }
  .footer-brand-copy { padding: 20px; }
}
@media (max-width: 600px) {
  body[data-page] .site-atmosphere__image { opacity: .22; }
  .site-atmosphere__grain { display: none; }
  .hero-ambient::after { background: linear-gradient(0deg, #09110bd9, transparent 35%, #07100888 65%); }
  .hero-architecture { background-position: 57% center; opacity: .6; }
  .hero-sculpture { --record-depth: calc(16.70429cqw - 11.19764cqh - 22.76522px); --record-drop: 45px; --record-slide: -10px; }
  .slip-one { --espana-lift: 20px; --espana-depth: calc(-1.95007cqw + 12.22654cqh - var(--espana-lift) * .230868 + var(--record-depth)); --espana-recession: .005; --espana-eye-x: -29cqw; --espana-eye-y: calc(-4.5cqh - var(--espana-lift)); }
  .slip-two { --izad-lift: -30px; }
  .hero-eyebrow { font-size: 5.5px; letter-spacing: .07em; }
  .portrait-slip { padding: 7px 7px 20px; }
  .portrait-slip::after { inset: 7px 7px 20px; }
  .portrait-slip span { font-size: 4px; bottom: 6px; }
  .slip-two span { right: 4px; font-size: 6px; transform: translateZ(26px); }
  .hero-bottom { padding-top: 12px; }
  .marquee { padding: 10px 0; }
  .home-release-grid { gap: 24px 15px; }
  .home-release-grid .release-card { padding: 10px 9px 11px; }
  .home-release-grid .release-meta-line > span { font-size: 5px; letter-spacing: 0; }
  .home-release-grid .release-card h3 { font-size: 16px; }
  .home-release-grid .release-art { margin-bottom: 15px; }
  .home-release-grid .release-card p { font-size: 9px; }
  .home-release-grid .release-meta-bottom { font-size: 6px; }
  .film-feature { padding: 12px; }
  .film-copy { padding: 10px 4px; }
  .artist-toolbar { padding-bottom: 11px; }
  .artist-atmosphere::before { background-position: 61% center; opacity: .6; }
  .artist-index > button { border-color: #c2ab6b33; }
  .artist-card { padding: 7px 7px 12px; }
  .artist-card h2 { font-size: 22px; }
  .artist-overview { padding-top: 10px; }
  .artist-grid { gap: 24px 15px; }
  .artist-card-foot { gap: 3px; }
  .artist-card-foot .text-link { font-size: 8px; }
  .artist-card-foot > span { font-size: 4.5px; }
  .footer-invitation > .icon { padding: 7px; width: 25px; height: 25px; }
  .footer-brand-copy { padding: 16px 14px; }
}
/* Let wide and short windows scroll the full composition into view. */
@media (max-height: 760px) and (min-width: 851px), (min-aspect-ratio: 8/5) and (min-width: 851px) {
  .hero-travel { height: clamp(900px, 65vw, 1100px); min-height: 0; }
  .hero-stage { position: relative; top: 0; height: 100%; min-height: 0; }
  .hero-sculpture { max-width: 850px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-atmosphere__image, .hero-architecture { transform: none !important; will-change: auto; }
  .button::before { display: none; }
}
.is-reduced .site-atmosphere__image, .is-reduced .hero-architecture { transform: none !important; will-change: auto; }
.is-reduced .button::before { display: none; }
@media print { .site-atmosphere { display: none; } }