@layer theme {
  :root,:host {
    --font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing:.25rem;
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }
}

@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong {
    font-weight:bolder
  }
  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,ul,menu {
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }
  img,video {
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
  ::file-selector-button {
    margin-inline-end:4px
  }
  ::placeholder {
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit {
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
  ::-webkit-datetime-edit {
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }
  ::file-selector-button {
    appearance:button
  }
  ::-webkit-inner-spin-button {
    height:auto
  }
  ::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
}

@layer components;
@layer utilities {
  .visible {
    visibility:visible
  }
  .relative {
    position:relative
  }
  .start {
    inset-inline-start:var(--spacing)
  }
  .table {
    display:table
  }
}

:root {
  --font-display:"Cinzel Decorative", serif;
  --font-heading:"Cinzel", serif;
  --font-body:"Josefin Sans", sans-serif;
  --black:#000;
  --ink:#222;
  --white:#fff;
  --cream:var(--white);
  --paper:var(--white);
  --wine:#7e1318;
  --wine-deep:#420b0e;
  --red:#b90000;
  --gold:#c2a22e;
  --line:#7e131830
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}

body {
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  text-rendering:optimizelegibility;
  -webkit-font-smoothing:antialiased;
  margin:0;
  font-weight:300
}

a {
  color:inherit;
  -webkit-tap-highlight-color:#c2a22e33;
  text-decoration:none
}

a,summary {
  touch-action:manipulation
}

a:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}

.magic-pointer {
  z-index:100;
  left:var(--pointer-x,-100px);
  top:var(--pointer-y,-100px);
  pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle,#c2a22e1f,#c2a22e00 68%);
  border-radius:50%;
  width:190px;
  height:190px;
  transition:opacity .25s;
  position:fixed;
  transform:translate(-50%,-50%)
}

[data-reveal] {
  opacity:0;
  transition:opacity .85s cubic-bezier(.2,.75,.2,1) var(--delay,0s), transform .85s cubic-bezier(.2,.75,.2,1) var(--delay,0s);
  transform:translateY(34px)
}

[data-reveal].is-visible {
  opacity:1;
  transform:translateY(0)
}

.site-header {
  z-index:20;
  color:#fff;
  border-bottom:1px solid #ffffff29;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
  width:100%;
  height:108px;
  padding:0 4.5vw;
  display:grid;
  position:absolute;
  top:0;
  left:0
}

.brand {
  align-items:center;
  width:fit-content;
  display:inline-flex
}

.brand-logo {
  width:225px;
  height:auto;
  display:block
}

.site-header nav {
  letter-spacing:.08em;
  gap:30px;
  font-size:12px;
  font-weight:400;
  display:flex
}

.site-header nav a {
  opacity:.76;
  transition:opacity .2s
}

.site-header nav a:hover {
  opacity:1
}

.header-cta {
  letter-spacing:.06em;
  justify-self:end;
  align-items:center;
  gap:14px;
  font-size:12px;
  font-weight:700;
  display:flex
}

.header-cta span {
  color:#c2a22e
}

.hero {
  color:#fff;
  background:radial-gradient(circle at 24% 52%, var(--wine) 0, var(--wine-deep) 34%, var(--black) 74%);
  grid-template-columns:48% 52%;
  align-items:center;
  min-height:820px;
  padding:150px 7vw 80px;
  display:grid;
  position:relative;
  overflow:hidden
}

.hero:before {
  content:"";
  opacity:.075;
  mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg,#0000 0 7px,#fff 7px 8px);
  position:absolute;
  inset:0
}

.hero-copy {
  z-index:3;
  max-width:650px;
  position:relative
}

.hero-entrance {
  animation:1s cubic-bezier(.2,.75,.2,1) both heroRise
}

.kicker {
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 30px;
  font-size:10px;
  font-weight:400
}

h1 {
  font:400 clamp(64px, 6vw, 94px)/.96 var(--font-display);
  letter-spacing:-.02em;
  margin:0
}

h1 em {
  color:var(--gold);
  font-style:normal;
  font-weight:400
}

.hero-intro {
  max-width:450px;
  font:300 17px/1.7 var(--font-body);
  color:#ffffffba;
  margin:38px 0 0 5px
}

.hero-actions {
  align-items:center;
  gap:36px;
  margin:38px 0 0 5px;
  display:flex
}

.button {
  letter-spacing:.08em;
  border:1px solid;
  justify-content:space-between;
  align-items:center;
  min-width:225px;
  padding:17px 19px;
  font-size:15px;
  font-weight:700;
  transition:transform .2s,background .2s;
  display:inline-flex
}

.button:hover {
  transform:translateY(-2px)
}

.button-primary {
  color:#222;
  background:#c2a22e;
  border-color:#c2a22e
}

.text-link {
  letter-spacing:.07em;
  border-bottom:1px solid #ffffff57;
  padding:11px 0;
  font-size:11px;
  font-weight:400
}

.text-link span {
  color:#c2a22e;
  margin-left:10px
}

.hero-art {
  z-index:2;
  perspective:1500px;
  height:590px;
  position:relative
}

.playing-card {
  border-radius:13px;
  position:absolute;
  box-shadow:0 35px 80px #0000006b
}

.card-back {
  background:#000;
  border:1px solid #c2a22e94;
  width:282px;
  height:416px;
  padding:12px;
  animation:7.4s ease-in-out infinite floatBack;
  top:95px;
  left:15%;
  transform:rotate(-17deg)
}

.card-pattern {
  background:repeating-radial-gradient(circle at 50%, var(--wine-deep) 0 5px, var(--black) 6px 11px);
  height:100%;
  color:var(--gold);
  border:1px solid #c2a22e80;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  display:flex
}

.card-pattern span {
  font:26px var(--font-heading);
  letter-spacing:.18em;
  background:#420b0e;
  border:1px solid;
  padding:12px
}

.card-pattern i {
  font-size:48px;
  font-style:normal
}

.card-front {
  color:#420b0e;
  background:linear-gradient(145deg,#fff,#fff);
  border:1px solid #fff;
  width:300px;
  height:440px;
  animation:6.2s ease-in-out infinite floatFront;
  top:56px;
  left:43%;
  transform:rotate(7deg)
}

.card-front:after {
  content:"";
  border:1px solid #7e131847;
  border-radius:8px;
  position:absolute;
  inset:13px
}

.card-corner {
  z-index:2;
  font:24px/1 var(--font-heading);
  flex-direction:column;
  align-items:center;
  display:flex;
  position:absolute
}

.card-corner small {
  color:var(--gold);
  font-size:13px
}

.card-corner.top {
  top:24px;
  left:25px
}

.card-corner.bottom {
  bottom:24px;
  right:25px;
  transform:rotate(180deg)
}

.card-center {
  z-index:2;
  text-align:center;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  display:flex;
  position:absolute;
  inset:0
}

.card-center i {
  color:var(--gold);
  margin-bottom:23px;
  font-size:49px;
  font-style:normal
}

.card-center strong {
  font:400 28px/1.08 var(--font-heading)
}

.card-center small {
  letter-spacing:.28em;
  margin-top:24px;
  font-size:7px
}

.orbit {
  border:1px solid #c2a22e3d;
  border-radius:50%;
  position:absolute
}

.orbit-one {
  width:510px;
  height:510px;
  animation:24s linear infinite orbitSpin;
  top:14px;
  left:2%
}

.orbit-two {
  width:620px;
  height:260px;
  animation:12s ease-in-out infinite orbitWobble;
  top:160px;
  left:-8%;
  transform:rotate(-19deg)
}

.spark {
  color:#c2a22e;
  position:absolute
}

.spark-one {
  font-size:25px;
  animation:2.7s ease-in-out infinite twinkle;
  top:60px;
  right:12%
}

.spark-two {
  font-size:16px;
  animation:2.1s ease-in-out .5s infinite twinkle;
  bottom:100px;
  left:6%
}

.spark-three {
  font-size:25px;
  animation:1.9s ease-in-out 1s infinite twinkle;
  top:240px;
  right:3%
}

.hero-note {
  z-index:3;
  writing-mode:vertical-rl;
  align-items:center;
  gap:20px;
  display:flex;
  position:absolute;
  bottom:34px;
  right:4.5vw
}

.hero-note span {
  letter-spacing:.22em;
  color:#c2a22e;
  font-size:7px
}

.hero-note p {
  font:400 12px var(--font-heading);
  color:#ffffff80;
  margin:0
}

.hero-media {
  z-index:1;
  background:var(--black);
  margin:0;
  position:absolute;
  inset:108px 0 0 48%;
  overflow:hidden
}

.hero-media:after {
  content:"";
  background:linear-gradient(90deg, var(--black) 0, #0000006b 18%, #00000005 55%), linear-gradient(0deg, #0000004d, transparent 45%);
  position:absolute;
  inset:0
}

.hero-media img {
  object-fit:cover;
  object-position:center 59%;
  width:100%;
  height:100%;
  animation:12s ease-in-out infinite alternate photoDrift;
  transform:scale(1.015)
}

.hero-media figcaption {
  z-index:2;
  color:#ffffffb3;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:8px;
  position:absolute;
  bottom:28px;
  right:34px
}

.studio-story {
  grid-template-columns:.8fr 1.05fr .6fr;
  align-items:center;
  gap:24px;
  padding:130px 0;
  display:grid
}

.studio-story-copy {
  padding-right:40px
}

.section-label {
  letter-spacing:.24em;
  text-transform:uppercase;
  margin:0;
  font-weight:700
}

.studio-story-copy h2,.programs-panel h2 {
  font:400 clamp(42px, 4.5vw, 64px)/1.05 var(--font-display);
  letter-spacing:-.015em;
  margin:24px 0 30px
}

.studio-story-copy>p:not(.section-label) {
  color:#222222b8;
  margin:0 0 20px;
  font-size:17px;
  line-height:1.75
}

.studio-primary-photo,.studio-secondary-photo,.programs-photo,.agenda-photo,.museum-image,.shows-visual {
  background:var(--black);
  margin:0;
  position:relative;
  overflow:hidden
}

.studio-primary-photo {
  height:690px
}

.studio-secondary-photo {
  align-self:end;
  height:500px;
  margin-bottom:45px
}

.studio-primary-photo img,.studio-secondary-photo img,.programs-photo img,.agenda-photo img,.museum-image img,.shows-visual img {
  object-fit:cover;
  width:100%;
  height:100%
}

.studio-primary-photo img {
  object-position:center 42%
}

.studio-secondary-photo img {
  object-position:center 48%
}

.studio-primary-photo figcaption,.studio-secondary-photo figcaption {
  max-width:88%;
  color:var(--white);
  letter-spacing:.12em;
  text-transform:uppercase;
  background:#000000c7;
  padding:13px 17px;
  font-size:8px;
  position:absolute;
  bottom:0;
  right:0
}

.programs-section {
  min-height:760px;
  color:var(--white);
  background:var(--black);
  grid-template-columns:47% 53%;
  display:grid
}

.programs-photo {
  min-height:760px
}

.programs-photo:after {
  content:"";
  background:linear-gradient(90deg, transparent 55%, var(--black));
  position:absolute;
  inset:0
}

.programs-photo img {
  object-position:center 46%
}

.programs-panel {
  flex-direction:column;
  justify-content:center;
  padding:90px 8vw 90px 6vw;
  display:flex
}

.programs-panel h2 {
  max-width:650px;
  margin-bottom:45px
}

.program-list {
  border-top:1px solid #fff3
}

.program-list article {
  border-bottom:1px solid #fff3;
  padding:24px 0
}

.program-list article>p {
  color:var(--gold);
  letter-spacing:.2em;
  margin:0 0 8px;
  font-size:10px;
  font-weight:700
}

.program-list h3 {
  font:400 23px var(--font-heading);
  margin:0 0 9px
}

.program-list span {
  color:#fff9;
  font-size:17px;
  line-height:1.6
}

.programs-panel .button {
  margin-top:34px
}

.experience-strip {
  z-index:5;
  background:var(--paper);
  grid-template-columns:repeat(3,1fr);
  max-width:1240px;
  margin:-35px auto 0;
  display:grid;
  position:relative;
  box-shadow:0 24px 70px #00000021
}

.experience-card {
  border-right:1px solid var(--line);
  grid-template-columns:38px 1fr;
  gap:15px;
  min-height:230px;
  padding:42px 38px;
  transition:background .25s,color .25s;
  display:grid;
  position:relative
}

.experience-card:last-child {
  border-right:0
}

.experience-card:hover {
  background:var(--wine);
  color:#fff
}

.experience-number {
  font:400 12px var(--font-heading);
  color:var(--gold)
}

.experience-card p {
  color:var(--gold);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 12px;
  font-size:9px
}

.experience-card h2 {
  font:400 26px var(--font-heading);
  margin:0 0 13px
}

.experience-text {
  opacity:.63;
  max-width:260px;
  font-size:12px;
  line-height:1.65;
  display:block
}

.experience-arrow {
  color:var(--gold);
  position:absolute;
  bottom:25px;
  right:28px
}

.mini-footer {
  color:#222;
  font:400 15px var(--font-heading);
  justify-content:space-between;
  padding:95px 7vw 45px;
  display:flex
}

.mini-footer a {
  font:10px var(--font-body);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wine)
}

.section-shell {
  width:min(1180px,100% - 48px);
  margin:0 auto
}

.section-label {
  color:#222;
  letter-spacing:.24em;
  align-items:center;
  gap:12px;
  font-size:8px;
  display:flex
}

.section-label span {
  border:1px solid var(--line);
  width:26px;
  height:26px;
  color:var(--gold);
  font:400 10px var(--font-heading);
  border-radius:50%;
  place-items:center;
  display:grid
}

.section-label.light {
  color:#ffffff8c
}

.section-label.light span {
  border-color:#ffffff3b
}

.word-ribbon {
  white-space:nowrap;
  color:#2222222e;
  font:400 clamp(22px, 3vw, 42px)/1 var(--font-heading);
  letter-spacing:.04em;
  align-items:center;
  padding:42px 0 37px;
  display:flex;
  overflow:hidden
}

.word-ribbon i {
  color:var(--gold);
  opacity:.8;
  font-size:13px
}

.ribbon-track {
  align-items:center;
  gap:35px;
  width:max-content;
  animation:22s linear infinite alternate ribbonMove;
  display:flex
}

.manifesto {
  grid-template-columns:.75fr 1.2fr .9fr;
  align-items:start;
  gap:60px;
  padding:120px 0 72px;
  display:grid
}

.manifesto-heading>p {
  color:var(--wine);
  font:400 16px var(--font-heading);
  margin:0 0 18px
}

.manifesto h2,.agenda h2,.museum h2,.shows h2,.faq h2 {
  font:400 clamp(44px, 5vw, 72px)/1.02 var(--font-display);
  letter-spacing:-.018em;
  margin:0
}

.manifesto h2 em,.agenda h2 em,.museum h2 em,.shows h2 em,.faq h2 em {
  color:var(--gold);
  font-style:normal;
  font-weight:400
}

.manifesto-copy {
  padding-top:45px
}

.manifesto-copy p {
  color:#222;
  margin:0 0 22px;
  font-size:13px;
  line-height:1.82
}

.dark-link {
  border-bottom:1px solid var(--ink);
  color:var(--wine);
  letter-spacing:.1em;
  text-transform:uppercase;
  justify-content:space-between;
  align-items:center;
  margin-top:32px;
  padding:15px 0;
  font-size:15px;
  display:flex
}

.learning-grid {
  border:1px solid var(--line);
  background:var(--paper);
  grid-template-columns:1.35fr 1fr 1fr;
  margin-bottom:130px;
  display:grid
}

.learning-card {
  border-right:1px solid var(--line);
  flex-direction:column;
  justify-content:space-between;
  min-height:260px;
  padding:34px;
  display:flex;
  position:relative
}

.learning-card:last-child {
  border-right:0
}

.learning-main {
  background:var(--wine);
  color:#fff
}

.learning-icon {
  color:var(--gold);
  font:30px var(--font-heading)
}

.learning-card p {
  color:var(--gold);
  letter-spacing:.22em;
  margin:0 0 12px;
  font-size:8px
}

.learning-card h3 {
  font:400 26px/1.1 var(--font-heading);
  margin:0 0 10px
}

.learning-card div>span {
  color:#222;
  max-width:250px;
  font-size:11px;
  line-height:1.6;
  display:block
}

.learning-main div>span {
  color:#ffffffa3
}

.learning-card>a {
  color:var(--gold);
  position:absolute;
  top:27px;
  right:28px
}

.agenda {
  color:#fff;
  background:#000;
  position:relative;
  overflow:hidden
}

.agenda:before {
  content:"";
  opacity:.07;
  background:repeating-linear-gradient(120deg,#0000 0 10px,#fff 10px 11px);
  position:absolute;
  inset:0
}

.agenda-inner {
  padding:110px 0 130px;
  position:relative
}

.agenda-aura {
  filter:blur(14px);
  background:radial-gradient(circle,#7e13184a,#0000 67%);
  border-radius:50%;
  width:780px;
  height:780px;
  animation:7s ease-in-out infinite auraPulse;
  position:absolute;
  top:140px;
  left:50%;
  transform:translate(-50%)
}

.agenda-top {
  grid-template-columns:1.05fr .58fr .62fr;
  align-items:end;
  gap:55px;
  margin-bottom:75px;
  display:grid
}

.agenda-kicker {
  color:var(--gold);
  font:400 15px var(--font-heading);
  margin:0 0 16px
}

.agenda h2 {
  margin-top:22px;
  font-size:clamp(46px,4.8vw,68px)
}

.agenda-photo {
  height:390px
}

.agenda-photo:after {
  content:"";
  border:1px solid #c2a22e40;
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 80px #00000059
}

.agenda-photo img {
  object-position:center 60%
}

.agenda-intro {
  color:#ffffff9e;
  margin:0 0 8px;
  font-size:16px;
  line-height:1.8
}

.event-list {
  border-top:1px solid #ffffff2e
}

.event {
  border-bottom:1px solid #ffffff2e;
  grid-template-columns:100px .65fr 1.5fr auto;
  align-items:center;
  gap:35px;
  min-height:145px;
  padding:22px 0;
  display:grid
}

.event-date {
  flex-direction:column;
  display:flex
}

.event-date strong {
  font:400 30px/1 var(--font-heading);
  color:var(--gold)
}

.event-date span,.event-type {
  color:#ffffff75;
  letter-spacing:.23em;
  margin-top:7px;
  font-size:7px
}

.event-name h3 {
  font:400 27px/1.05 var(--font-heading);
  margin:0 0 8px
}

.event-name p {
  color:#ffffff85;
  margin:0;
  font-size:11px;
  line-height:1.6
}

.event>a {
  color:var(--gold);
  letter-spacing:.08em;
  border-bottom:1px solid #c2a22e99;
  align-self:center;
  padding:12px 0;
  font-size:9px
}

.featured-event {
  background:var(--wine);
  border-bottom-color:#0000;
  margin:0 -28px;
  padding:24px 28px
}

.calendar-wrap {
  z-index:2;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background:#0000007a;
  border:1px solid #ffffff2b;
  padding:34px;
  position:relative;
  box-shadow:0 30px 90px #0000003d
}

.calendar-heading {
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-bottom:28px;
  display:flex
}

.calendar-heading>div:first-child>span {
  color:var(--gold);
  letter-spacing:.25em;
  font-size:7px
}

.calendar-heading h3 {
  font:400 33px var(--font-heading);
  margin:7px 0 0
}

.calendar-heading h3 em {
  color:var(--gold);
  font-style:normal;
  font-weight:400
}

.calendar-legend {
  color:#ffffff94;
  gap:23px;
  font-size:12px;
  display:flex
}

.calendar-legend span {
  align-items:center;
  gap:8px;
  display:flex
}

.calendar-legend i {
  border-radius:50%;
  width:7px;
  height:7px;
  display:block
}

.calendar-mobile-hint {
  color:#ffffff80;
  letter-spacing:.06em;
  margin:0 0 13px;
  font-size:9px;
  display:none
}

.calendar-grid {
  border-top:1px solid #ffffff21;
  border-left:1px solid #ffffff21;
  grid-template-columns:repeat(7,minmax(0,1fr));
  display:grid
}

.calendar-weekday {
  color:#fff6;
  letter-spacing:.22em;
  text-align:center;
  border-bottom:1px solid #ffffff21;
  border-right:1px solid #ffffff21;
  padding:12px 10px;
  font-size:7px
}

.calendar-day {
  border-bottom:1px solid #ffffff21;
  border-right:1px solid #ffffff21;
  min-height:125px;
  padding:12px;
  transition:background .25s;
  position:relative
}

.day-number {
  color:#ffffff7a;
  font:12px var(--font-heading)
}

.has-event .day-number {
  color:#fff
}

.calendar-event {
  color:#fff;
  border-radius:2px;
  align-items:flex-start;
  gap:6px;
  padding:9px;
  font-size:12px;
  line-height:1.35;
  transition:transform .22s,box-shadow .22s;
  display:flex;
  position:absolute;
  inset:39px 7px 7px;
  overflow:hidden
}

.calendar-event:hover {
  transform:translateY(-3px);
  box-shadow:0 9px 22px #00000047
}

.calendar-event i {
  color:var(--gold);
  font-style:normal;
  animation:2.3s ease-in-out infinite twinkle
}

.calendar-event span {
  flex:1
}

.calendar-event b {
  color:var(--gold);
  font-weight:400
}

.show-event {
  background:linear-gradient(135deg,#7e1318,#420b0e);
  border:1px solid #c2a22e3d
}

.workshop-event {
  background:linear-gradient(135deg, var(--ink), var(--black));
  border:1px solid #b900004d
}

.event-cards {
  z-index:2;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:48px;
  display:grid;
  position:relative
}

.event-card {
  background:#ffffff09;
  border:1px solid #ffffff29;
  grid-template-columns:95px 1fr;
  gap:24px;
  min-height:250px;
  padding:29px;
  transition:transform .3s,border-color .3s,background .3s;
  display:grid;
  position:relative;
  overflow:hidden
}

.event-card:after {
  content:"✦";
  color:#c2a22e0d;
  font:130px var(--font-heading);
  transition:transform .5s,color .5s;
  position:absolute;
  top:-30px;
  right:-17px;
  transform:rotate(12deg)
}

.event-card:hover {
  background:#7e131826;
  border-color:#c2a22e8c;
  transform:translateY(-5px)
}

.event-card:hover:after {
  color:#c2a22e1a;
  transform:rotate(35deg)scale(1.05)
}

.event-card-date {
  z-index:2;
  border-right:1px solid #ffffff24;
  flex-direction:column;
  align-items:center;
  padding-right:24px;
  display:flex;
  position:relative
}

.event-card-date span {
  color:var(--gold);
  letter-spacing:.23em;
  font-size:7px
}

.event-card-date strong {
  font:400 50px/1 var(--font-heading);
  margin:7px 0 5px
}

.event-card-date small {
  color:#fff6;
  letter-spacing:.18em;
  font-size:7px
}

.event-card-copy {
  z-index:2;
  position:relative
}

.event-card-copy>p {
  color:var(--gold);
  letter-spacing:.2em;
  margin:0 0 13px;
  font-size:10px
}

.event-card-copy h3 {
  font:400 27px var(--font-heading);
  margin:0 0 11px
}

.event-card-copy>span {
  color:#ffffff8c;
  font-size:15px;
  line-height:1.6;
  display:block
}

.event-card-copy>small {
  color:#ffffffc7;
  letter-spacing:.08em;
  margin-top:13px;
  font-size:13px;
  display:block
}

.ticket-button {
  z-index:2;
  color:var(--ink);
  background:var(--gold);
  letter-spacing:.08em;
  grid-column:2;
  justify-content:space-between;
  align-self:end;
  align-items:center;
  margin-top:8px;
  padding:14px 15px;
  font-size:13px;
  font-weight:700;
  transition:color .2s,background .2s,transform .2s;
  display:flex;
  position:relative
}

.ticket-button:hover {
  color:var(--white);
  background:var(--wine);
  transform:translate(3px)
}

.museum {
  color:#fff;
  background:var(--black);
  grid-template-columns:58% 42%;
  min-height:860px;
  display:grid;
  position:relative;
  overflow:hidden
}

.museum-gallery {
  background:var(--wine-deep);
  grid-template-rows:repeat(3,1fr);
  grid-template-columns:1.1fr .9fr;
  gap:2px;
  min-height:860px;
  padding:2px;
  display:grid
}

.museum-image-main {
  grid-row:1/4
}

.museum-image img {
  transition:transform .7s cubic-bezier(.2,.75,.2,1)
}

.museum-image:hover img {
  transform:scale(1.035)
}

.museum-image-main img {
  object-position:center 48%
}

.museum-image:not(.museum-image-main) img {
  object-position:center 45%
}

.museum-artifacts {
  background:radial-gradient(circle at 50% 48%,#7e1318 0 38%,#420b0e 72%);
  place-items:center;
  min-height:730px;
  display:grid;
  position:relative;
  overflow:hidden
}

.artifact-orbit {
  border:1px solid #c2a22e3b;
  border-radius:50%;
  position:absolute
}

.orbit-large {
  width:520px;
  height:520px;
  animation:30s linear infinite reverse orbitSpin
}

.orbit-small {
  width:590px;
  height:230px;
  animation:12s ease-in-out infinite artifactOrbit;
  transform:rotate(-20deg)
}

.artifact-card {
  color:var(--gold);
  background:linear-gradient(145deg,#fff,#fff);
  border:1px solid #c2a22ea6;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  display:flex;
  position:absolute;
  box-shadow:0 32px 65px #00000052
}

.artifact-card-one {
  width:180px;
  height:275px;
  margin-left:-140px;
  animation:7s ease-in-out infinite artifactOne;
  transform:rotate(-13deg)
}

.artifact-card-two {
  width:170px;
  height:250px;
  color:var(--gold);
  background:repeating-radial-gradient(circle at 50%, var(--wine-deep) 0 5px, var(--black) 6px 12px);
  margin-top:75px;
  margin-left:170px;
  animation:6.4s ease-in-out .4s infinite artifactTwo;
  transform:rotate(11deg)
}

.artifact-card span {
  font:38px var(--font-heading);
  margin-bottom:34px
}

.artifact-card strong {
  font:400 18px var(--font-heading);
  letter-spacing:.14em
}

.artifact-card small {
  letter-spacing:.2em;
  margin-top:10px;
  font-size:6px
}

.artifact-coin {
  z-index:4;
  color:#420b0e;
  background:radial-gradient(circle,#c2a22e,#c2a22e);
  border:2px solid #c2a22e;
  border-radius:50%;
  place-items:center;
  width:80px;
  height:80px;
  animation:5s ease-in-out infinite coinFloat;
  display:grid;
  position:absolute;
  top:21%;
  right:12%;
  box-shadow:0 18px 34px #0000004d
}

.artifact-spark {
  color:var(--gold);
  animation:2.3s ease-in-out infinite twinkle;
  position:absolute
}

.a-spark-one {
  font-size:24px;
  top:24%;
  left:11%
}

.a-spark-two {
  font-size:31px;
  animation-delay:.8s;
  bottom:20%;
  right:9%
}

.museum-content {
  background:#000;
  flex-direction:column;
  justify-content:center;
  padding:95px 7vw 95px 5vw;
  display:flex
}

.museum-date {
  color:var(--gold);
  letter-spacing:.25em;
  margin:50px 0 20px;
  font-size:8px
}

.museum h2 {
  font-size:clamp(42px,4.2vw,62px);
  line-height:1.06
}

.museum-content>p:not(.museum-date) {
  color:#ffffff94;
  max-width:440px;
  margin:35px 0;
  font-size:16px;
  line-height:1.8
}

.museum-button {
  color:#fff;
  border-color:#ffffff52
}

.shows {
  min-height:850px;
  color:var(--white);
  background:var(--black);
  position:relative;
  overflow:hidden
}

.shows-visual {
  position:absolute;
  inset:0
}

.shows-visual:after {
  content:"";
  background:linear-gradient(90deg,#000000eb 0,#0000009e 46%,#0003 100%),linear-gradient(#0000 45%,#000000bf);
  position:absolute;
  inset:0
}

.shows-visual img {
  object-position:center 44%
}

.shows-content {
  z-index:2;
  padding-top:155px;
  position:relative
}

.shows-kicker {
  color:var(--gold);
  letter-spacing:.22em;
  margin:38px 0 22px;
  font-size:9px;
  font-weight:700
}

.shows h2 {
  max-width:650px;
  font:400 clamp(48px, 5.5vw, 76px)/1.03 var(--font-display);
  margin:0
}

.shows-content>p:last-child {
  color:#ffffffb3;
  max-width:500px;
  margin:30px 0 0;
  font-size:16px;
  line-height:1.75
}

.shows-services {
  z-index:2;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:#000000ad;
  border-top:1px solid #ffffff38;
  grid-template-columns:repeat(3,1fr);
  width:auto;
  display:grid;
  position:absolute;
  bottom:0;
  left:max(24px,50% - 590px);
  right:max(24px,50% - 590px)
}

.shows-services article {
  border-right:1px solid #ffffff2b;
  min-height:170px;
  padding:33px
}

.shows-services article:last-child {
  border-right:0
}

.shows-services h3 {
  font:400 20px var(--font-heading);
  margin:0 0 14px
}

.shows-services p {
  color:#fff9;
  margin:0;
  font-size:15px;
  line-height:1.65
}

.faq {
  padding:20px 0 130px
}

.faq-layout {
  grid-template-columns:.8fr 1fr;
  gap:100px;
  margin-top:55px;
  display:grid
}

.faq h2 {
  font-size:clamp(48px,5vw,76px)
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  cursor:pointer;
  font:400 16px var(--font-heading);
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:25px 0;
  list-style:none;
  display:flex
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary span {
  color:var(--gold);
  font:22px var(--font-body);
  transition:transform .2s
}

.faq-list details[open] summary span {
  transform:rotate(45deg)
}

.faq-list details p {
  color:#222;
  margin:2px 45px 24px 0;
  font-size:16px;
  line-height:1.7
}

.contact {
  text-align:center;
  color:#fff;
  background:var(--wine-deep);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:600px;
  padding:80px 24px;
  display:flex;
  position:relative;
  overflow:hidden
}

.contact:before {
  content:"";
  z-index:1;
  background:linear-gradient(90deg,#420b0ef5,#000000b3);
  position:absolute;
  inset:0
}

.contact:after {
  display:none
}

.contact-photo {
  object-fit:cover;
  object-position:center 58%;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}

.contact-star {
  z-index:2;
  color:var(--gold);
  margin-bottom:30px;
  font-size:40px;
  position:relative
}

.contact>p {
  z-index:2;
  color:var(--gold);
  letter-spacing:.26em;
  margin:0 0 18px;
  font-size:8px;
  position:relative
}

.contact h2 {
  z-index:2;
  font:400 clamp(62px, 8vw, 112px)/.96 var(--font-display);
  letter-spacing:-.02em;
  margin:0;
  position:relative
}

.contact>span {
  z-index:2;
  color:#ffffff9e;
  max-width:500px;
  margin:27px 0 33px;
  font-size:16px;
  line-height:1.7;
  position:relative
}

.contact-button {
  z-index:2;
  color:var(--ink);
  border-color:var(--gold);
  background:var(--gold);
  position:relative
}

.contact-button b {
  font-weight:400
}

.contact-actions {
  z-index:2;
  gap:12px;
  display:flex;
  position:relative
}

.contact-button-secondary {
  color:#fff;
  border-color:#ffffff57
}

.contact-star {
  animation:8s linear infinite starSpin
}

.site-footer {
  color:#ffffffc2;
  background:#000;
  grid-template-columns:1.1fr .9fr .7fr 1fr;
  align-items:start;
  gap:45px;
  padding:72px 5vw 55px;
  display:grid
}

.footer-brand {
  color:#fff
}

.footer-brand-logo {
  width:235px
}

.site-footer>p {
  margin:4px 0 0;
  font-size:15px;
  line-height:1.7
}

.footer-links {
  letter-spacing:.1em;
  text-transform:uppercase;
  flex-direction:column;
  gap:11px;
  font-size:9px;
  font-weight:400;
  display:flex
}

.footer-note {
  color:var(--gold);
  font:400 14px var(--font-heading);
  justify-self:end
}

.mobile-dock {
  display:none
}

@keyframes heroRise {
  0% {
    opacity:0;
    transform:translateY(28px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes floatBack {
  0%,to {
    transform:rotate(-17deg)translateY(0)
  }
  50% {
    transform:rotate(-14deg)translateY(-13px)
  }
}

@keyframes floatFront {
  0%,to {
    transform:rotate(7deg)translateY(0)
  }
  50% {
    transform:rotate(4deg)translateY(-18px)
  }
}

@keyframes orbitSpin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes orbitWobble {
  0%,to {
    transform:rotate(-19deg)scale(1)
  }
  50% {
    transform:rotate(-8deg)scale(1.04)
  }
}

@keyframes twinkle {
  0%,to {
    opacity:.35;
    transform:scale(.75)rotate(0)
  }
  50% {
    opacity:1;
    transform:scale(1.22)rotate(22deg)
  }
}

@keyframes ribbonMove {
  0% {
    transform:translate(-5%)
  }
  to {
    transform:translate(-24%)
  }
}

@keyframes auraPulse {
  0%,to {
    opacity:.55;
    transform:translate(-50%)scale(.85)
  }
  50% {
    opacity:1;
    transform:translate(-50%)scale(1.08)
  }
}

@keyframes artifactOrbit {
  0%,to {
    transform:rotate(-20deg)scale(1)
  }
  50% {
    transform:rotate(8deg)scale(1.07)
  }
}

@keyframes artifactOne {
  0%,to {
    transform:rotate(-13deg)translateY(0)
  }
  50% {
    transform:rotate(-9deg)translateY(-17px)
  }
}

@keyframes artifactTwo {
  0%,to {
    transform:rotate(11deg)translateY(0)
  }
  50% {
    transform:rotate(7deg)translateY(-21px)
  }
}

@keyframes coinFloat {
  0%,to {
    transform:translateY(0)rotateY(0)
  }
  50% {
    transform:translateY(-18px)rotateY(180deg)
  }
}

@keyframes starSpin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes photoDrift {
  0% {
    transform:scale(1.015)
  }
  to {
    transform:scale(1.055)
  }
}

@media (width<=900px) {
  .site-header {
    grid-template-columns:1fr auto;
    height:86px;
    padding:0 24px
  }
  .site-header nav {
    display:none
  }
  .hero {
    min-height:auto;
    padding:140px 24px 0;
    display:block
  }
  .hero-copy {
    z-index:4;
    padding-bottom:72px
  }
  h1 {
    font-size:clamp(60px,11vw,82px)
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:18px
  }
  .hero-media {
    height:600px;
    margin:0 -24px;
    position:relative;
    inset:auto
  }
  .hero-media:after {
    background:linear-gradient(#0000 52%,#00000073)
  }
  .studio-story {
    grid-template-columns:1fr 1fr;
    padding:96px 0
  }
  .studio-story-copy {
    grid-column:1/-1;
    max-width:680px;
    padding:0 0 30px
  }
  .studio-primary-photo,.studio-secondary-photo {
    height:550px;
    margin:0
  }
  .programs-section {
    grid-template-columns:1fr
  }
  .programs-photo {
    min-height:560px
  }
  .programs-photo:after {
    background:linear-gradient(0deg, var(--black), transparent 35%)
  }
  .programs-panel {
    padding:82px 9vw
  }
  .agenda-top {
    grid-template-columns:1fr 1fr
  }
  .agenda-intro {
    grid-column:1/-1;
    max-width:520px
  }
  .calendar-wrap {
    padding:25px
  }
  .calendar-day {
    min-height:92px
  }
  .calendar-event {
    padding:7px;
    font-size:12px
  }
  .event-cards,.museum {
    grid-template-columns:1fr
  }
  .museum-gallery {
    min-height:700px
  }
  .museum-content {
    padding:82px 9vw
  }
  .shows-services {
    width:auto;
    left:24px;
    right:24px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:48px
  }
  .site-footer {
    grid-template-columns:1fr 1fr
  }
  .footer-note {
    justify-self:start
  }
}

@media (width<=720px) {
  html {
    scroll-padding-top:78px
  }
  body {
    padding-bottom:calc(64px + env(safe-area-inset-bottom))
  }
  [data-reveal] {
    transition-duration:.62s;
    transform:translateY(18px)
  }
  .magic-pointer {
    display:none
  }
  .section-shell {
    width:calc(100% - 40px)
  }
  .site-header {
    background:linear-gradient(#000000b8,#0000);
    border-bottom:0;
    gap:12px;
    height:76px;
    padding:0 16px;
    position:absolute
  }
  .brand-logo {
    width:145px
  }
  .header-cta {
    border:1px solid #c2a22eb3;
    min-height:44px;
    padding:0 14px;
    font-size:10px
  }
  .header-cta span {
    margin-left:2px
  }
  .hero {
    min-height:max(680px,100svh);
    padding:118px 20px calc(38px + env(safe-area-inset-bottom));
    background:var(--black);
    align-items:flex-end;
    display:flex
  }
  .hero:before {
    z-index:2;
    opacity:1;
    pointer-events:none;
    background:linear-gradient(#00000085 0%,#00000038 22%,#140002c4 52%,#000000f7 100%),repeating-linear-gradient(115deg,#0000 0 8px,#ffffff09 8px 9px)
  }
  .hero-copy {
    width:100%;
    max-width:520px;
    padding:0
  }
  .hero-media {
    z-index:0;
    height:auto;
    margin:0;
    position:absolute;
    inset:0
  }
  .hero-media:after {
    background:linear-gradient(90deg,#0000002e,#0000 70%)
  }
  .hero-media img {
    object-position:center 46%;
    animation:none;
    transform:scale(1.01)
  }
  .hero-media figcaption {
    display:none
  }
  .kicker {
    letter-spacing:.17em;
    margin-bottom:18px;
    font-size:9px;
    line-height:1.55
  }
  h1 {
    font-size:clamp(46px,13.5vw,58px);
    line-height:.98
  }
  .hero-intro {
    color:#ffffffd1;
    max-width:32ch;
    margin:22px 0 0;
    font-size:16px;
    line-height:1.55
  }
  .hero-actions {
    gap:10px;
    width:100%;
    margin:26px 0 0
  }
  .hero-actions .button {
    width:100%;
    min-width:0;
    min-height:52px;
    padding:15px 18px;
    font-size:11px
  }
  .text-link {
    align-self:center;
    align-items:center;
    min-height:44px;
    display:inline-flex
  }
  .section-label {
    font-size:9px;
    line-height:1.5
  }
  .studio-story {
    grid-template-columns:1fr;
    gap:14px;
    padding:68px 0
  }
  .studio-story-copy {
    grid-column:auto;
    padding:0 0 24px
  }
  .studio-story-copy h2,.programs-panel h2 {
    margin:18px 0 24px;
    font-size:clamp(36px,10.5vw,42px);
    line-height:1.08
  }
  .studio-story-copy>p:not(.section-label) {
    margin-bottom:17px;
    font-size:16px;
    line-height:1.65
  }
  .dark-link {
    align-items:center;
    min-height:48px;
    font-size:11px;
    display:inline-flex
  }
  .studio-primary-photo {
    height:min(108vw,430px)
  }
  .studio-secondary-photo {
    height:260px;
    margin:0
  }
  .studio-primary-photo figcaption,.studio-secondary-photo figcaption {
    font-size:9px;
    line-height:1.4;
    inset:auto 12px 12px
  }
  .programs-photo {
    min-height:350px
  }
  .programs-photo img {
    object-position:center 42%
  }
  .programs-panel {
    padding:64px 20px 68px
  }
  .programs-panel h2 {
    margin-bottom:28px
  }
  .program-list article {
    padding:22px 0
  }
  .program-list article>p {
    font-size:9px
  }
  .program-list h3 {
    font-size:21px
  }
  .program-list span {
    max-width:34ch;
    font-size:17px;
    line-height:1.55
  }
  .programs-panel .button,.museum-button {
    width:100%;
    min-width:0;
    min-height:50px
  }
  .agenda-inner {
    padding:72px 0 88px
  }
  .agenda-top {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:40px
  }
  .agenda h2 {
    margin-top:15px;
    font-size:clamp(38px,11vw,44px)
  }
  .agenda-photo {
    height:310px
  }
  .agenda-intro {
    margin:0;
    font-size:16px;
    line-height:1.65
  }
  .agenda-aura {
    width:520px;
    height:520px
  }
  .calendar-wrap {
    margin:0;
    padding:20px 12px 14px
  }
  .calendar-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px
  }
  .calendar-heading h3 {
    font-size:26px
  }
  .calendar-legend {
    gap:18px;
    width:100%;
    font-size:10px
  }
  .calendar-mobile-hint {
    display:none
  }
  .calendar-scroll {
    padding:0;
    overflow:visible
  }
  .calendar-grid {
    width:100%;
    min-width:0
  }
  .calendar-weekday {
    letter-spacing:.1em;
    padding:9px 1px;
    font-size:7px
  }
  .calendar-day {
    min-height:52px;
    padding:7px 5px
  }
  .day-number {
    font-size:11px
  }
  .calendar-event {
    z-index:2;
    box-shadow:none;
    background:0 0;
    border:0;
    border-radius:0;
    padding:0;
    inset:0
  }
  .calendar-event:hover {
    box-shadow:none;
    transform:none
  }
  .calendar-event i,.calendar-event span,.calendar-event b {
    display:none
  }
  .calendar-event:after {
    content:"";
    border-radius:50%;
    width:5px;
    height:5px;
    position:absolute;
    bottom:7px;
    left:50%;
    transform:translate(-50%)
  }
  .show-event:after {
    background:var(--gold);
    box-shadow:0 0 9px #c2a22ee6
  }
  .workshop-event:after {
    background:var(--red);
    box-shadow:0 0 9px #b90000e6
  }
  .event-cards {
    grid-template-columns:1fr;
    gap:10px;
    margin-top:30px
  }
  .event-card {
    grid-template-columns:62px 1fr;
    gap:14px;
    min-height:0;
    padding:18px 16px 16px
  }
  .event-card:after {
    font-size:90px
  }
  .event-card-date {
    padding-right:14px
  }
  .event-card-date strong {
    margin:5px 0 4px;
    font-size:34px
  }
  .event-card-date span,.event-card-date small {
    font-size:8px
  }
  .event-card-copy>p {
    margin-bottom:8px;
    font-size:8px;
    line-height:1.45
  }
  .event-card-copy h3 {
    margin-bottom:8px;
    font-size:21px;
    line-height:1.12
  }
  .event-card-copy>span {
    display:none
  }
  .event-card-copy>small {
    margin-top:0;
    font-size:13px;
    line-height:1.5
  }
  .ticket-button {
    grid-column:1/-1;
    min-height:48px;
    margin-top:4px;
    padding:14px 16px;
    font-size:16px
  }
  .museum {
    grid-template-columns:1fr;
    min-height:0
  }
  .museum-gallery {
    grid-template-rows:repeat(2,230px);
    grid-template-columns:1fr 1fr;
    min-height:460px
  }
  .museum-image-main {
    grid-row:auto
  }
  .museum-content {
    padding:64px 20px 68px
  }
  .museum-date {
    margin:28px 0 16px;
    font-size:9px
  }
  .museum h2 {
    font-size:clamp(36px,10.5vw,42px)
  }
  .museum-content>p:not(.museum-date) {
    margin:26px 0;
    font-size:15px;
    line-height:1.7
  }
  .shows {
    min-height:0
  }
  .shows-visual:after {
    background:linear-gradient(0deg,#000000f5 0,#000000b8 60%,#0000006b 100%)
  }
  .shows-visual img {
    object-position:center 36%
  }
  .shows-content {
    padding-top:78px;
    padding-bottom:48px
  }
  .shows-kicker {
    margin:24px 0 16px;
    font-size:9px;
    line-height:1.5
  }
  .shows h2 {
    font-size:clamp(38px,11vw,45px)
  }
  .shows-content>p:last-child {
    margin-top:24px;
    font-size:16px;
    line-height:1.65
  }
  .shows-services {
    grid-template-columns:1fr;
    width:calc(100% - 40px);
    margin:0 auto 64px;
    position:relative;
    bottom:auto;
    left:auto;
    right:auto
  }
  .shows-services article {
    border-bottom:1px solid #ffffff2b;
    border-right:0;
    min-height:0;
    padding:22px
  }
  .shows-services article:last-child {
    border-bottom:0
  }
  .shows-services h3 {
    margin-bottom:8px;
    font-size:19px
  }
  .shows-services p {
    font-size:15px;
    line-height:1.55
  }
  .faq {
    padding:72px 0 84px
  }
  .faq-layout {
    gap:28px;
    margin-top:30px
  }
  .faq h2 {
    font-size:clamp(36px,10.5vw,42px)
  }
  .faq-list summary {
    gap:18px;
    min-height:64px;
    padding:18px 0;
    font-size:16px;
    line-height:1.35
  }
  .faq-list details p {
    margin:-2px 34px 21px 0;
    font-size:15px;
    line-height:1.65
  }
  .contact {
    min-height:520px;
    padding:68px 20px 82px
  }
  .contact>p {
    line-height:1.5
  }
  .contact h2 {
    font-size:clamp(52px,15vw,68px)
  }
  .contact>span {
    margin:23px 0 28px;
    font-size:16px;
    line-height:1.6
  }
  .contact-actions {
    flex-direction:column;
    width:100%;
    max-width:360px
  }
  .contact-actions .button {
    width:100%;
    min-width:0;
    min-height:50px
  }
  .site-footer {
    grid-template-columns:1fr;
    gap:28px;
    padding:54px 20px 92px
  }
  .footer-brand-logo {
    width:190px
  }
  .site-footer>p {
    font-size:13px
  }
  .footer-links {
    grid-template-columns:1fr 1fr;
    gap:0;
    display:grid
  }
  .footer-links a {
    align-items:center;
    min-height:44px;
    display:flex
  }
  .mobile-dock {
    z-index:60;
    min-height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    color:#ffffffb8;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    background:#000000f0;
    border-top:1px solid #ffffff24;
    grid-template-columns:repeat(4,1fr);
    display:grid;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    box-shadow:0 -14px 35px #00000047
  }
  .mobile-dock a {
    letter-spacing:.05em;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    min-width:0;
    min-height:64px;
    font-size:9px;
    font-weight:600;
    display:flex
  }
  .mobile-dock a span {
    color:var(--gold);
    font:12px var(--font-body)
  }
  .mobile-dock-primary {
    color:#fff;
    background:linear-gradient(180deg, var(--wine), var(--wine-deep))
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,:before,:after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
  [data-reveal] {
    opacity:1;
    transform:none
  }
}

:root {
  --wine-bright:#9c1c23;
  --wine-shadow:#210305;
  --rose-mist:#d2b6b7
}

a {
  -webkit-tap-highlight-color:#7e131847
}

a:focus-visible,summary:focus-visible {
  outline-color:var(--wine-bright)
}

.magic-pointer {
  background:radial-gradient(circle,#7e131833,#7e131800 68%)
}

.header-cta span,.text-link span {
  color:var(--rose-mist)
}

.kicker {
  border-left:2px solid var(--wine-bright);
  color:#ffffffad;
  padding-left:14px
}

h1 em {
  color:#0000;
  background:linear-gradient(90deg,#fff 0%,#d9c7c8 52%,#a67d80 100%);
  -webkit-background-clip:text;
  background-clip:text
}

.button-primary,.ticket-button,.contact-button {
  color:var(--white);
  background:linear-gradient(125deg, var(--wine-bright) 0%, var(--wine) 38%, var(--wine-deep) 70%, #080808 100%);
  border-color:#fff3;
  box-shadow:0 14px 34px #420b0e4d
}

.button-primary:hover,.ticket-button:hover,.contact-button:hover {
  color:var(--white);
  background:linear-gradient(125deg, #b2242c 0%, var(--wine) 45%, #080808 100%)
}

.studio-primary-photo figcaption,.studio-secondary-photo figcaption {
  background:linear-gradient(110deg,#000000eb,#420b0ee0)
}

.dark-link {
  color:var(--wine);
  border-bottom-color:#7e13187a
}

.programs-section {
  background:linear-gradient(135deg, #050505 0%, var(--wine-shadow) 48%, var(--wine-deep) 72%, #000 100%)
}

.programs-photo:after {
  background:linear-gradient(90deg, transparent 42%, #21030599 72%, var(--wine-shadow) 100%)
}

.programs-panel {
  background:radial-gradient(circle at 100% 15%,#9c1c232e,#0000 34%),linear-gradient(145deg,#0000000d,#210305c7)
}

.program-list article>p {
  color:var(--rose-mist)
}

.museum-button {
  background:linear-gradient(110deg,#7e131861,#0000006b);
  border-color:#ffffff42
}

.museum-button:hover {
  background:linear-gradient(110deg, var(--wine), var(--black))
}

.agenda {
  background:radial-gradient(circle at 78% 12%,#9c1c233d,#0000 32%),radial-gradient(circle at 18% 72%,#420b0e57,#0000 34%),linear-gradient(155deg,#030303 0%,#160204 46%,#050505 72%,#000 100%)
}

.agenda:before {
  opacity:.035
}

.agenda-aura {
  background:radial-gradient(circle,#7e131861,#0000 68%)
}

.agenda-kicker,.calendar-heading>div:first-child>span {
  color:var(--rose-mist)
}

.agenda-photo:after {
  border-color:#7e131894
}

.calendar-wrap {
  background:radial-gradient(circle at 80% 0,#7e13182e,#0000 32%),linear-gradient(145deg,#0a0a0ad1,#200305b3);
  border-color:#9c1c234d;
  box-shadow:0 34px 95px #0006
}

.calendar-heading h3 em {
  color:var(--rose-mist)
}

.legend-show {
  background:#b44249;
  box-shadow:0 0 14px #b44249ad
}

.legend-workshop {
  background:#747474;
  box-shadow:0 0 12px #fff3
}

.calendar-day.has-event {
  background:linear-gradient(145deg,#7e131838,#00000024)
}

.calendar-day.has-event:hover {
  background:linear-gradient(145deg,#9c1c2357,#00000038)
}

.calendar-event i,.calendar-event b {
  color:#ffffffbd
}

.show-event {
  background:linear-gradient(135deg, var(--wine-bright), var(--wine-deep) 62%, #120102);
  border-color:#9c1c2385
}

.workshop-event {
  background:linear-gradient(135deg, #242424, #080808 68%, var(--wine-shadow));
  border-color:#9c1c2352
}

.event-card {
  background:radial-gradient(circle at 100% 0,#7e131826,#0000 38%),linear-gradient(145deg,#ffffff09,#2103054d);
  border-color:#9c1c233d
}

.event-card:after {
  color:#7e13181f
}

.event-card:hover {
  background:linear-gradient(145deg,#7e131847,#00000080);
  border-color:#9c1c23a6
}

.event-card:hover:after {
  color:#9c1c2329
}

.event-card-date span,.event-card-copy>p {
  color:var(--rose-mist)
}

.museum-content {
  background:radial-gradient(circle at 0% 48%, #7e13183d, transparent 38%), linear-gradient(145deg, var(--wine-shadow), #050505 52%, #000 100%)
}

.museum-date {
  color:var(--rose-mist)
}

.shows-visual:after {
  background:linear-gradient(90deg,#000000f0 0%,#210305c7 46%,#420b0e57 100%),linear-gradient(#0000 44%,#000000d1)
}

.shows-kicker {
  color:var(--rose-mist)
}

.shows-services {
  background:linear-gradient(105deg,#000000e0,#420b0ed1,#000c);
  border-top-color:#9c1c236b
}

.shows-services article {
  border-right-color:#9c1c2347
}

.faq-list summary span {
  color:var(--wine-bright)
}

.contact:before {
  background:radial-gradient(circle at 28% 34%,#9c1c2357,#0000 30%),linear-gradient(105deg,#000000f2,#420b0ee6 52%,#000000c7)
}

.contact>p {
  color:var(--rose-mist)
}

.site-footer {
  background:linear-gradient(115deg, #000 0%, var(--wine-shadow) 58%, #000 100%)
}

.footer-note {
  color:var(--rose-mist)
}

.event-list-heading {
  border-bottom:1px solid #ffffff29;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin:58px 2px 18px;
  padding-bottom:15px;
  display:flex
}

.event-list-heading p,.event-list-heading span {
  margin:0
}

.event-list-heading p {
  color:var(--rose-mist);
  letter-spacing:.2em;
  font-size:9px;
  font-weight:700
}

.event-list-heading span {
  color:#ffffff7a;
  letter-spacing:.06em;
  font-size:15px
}

@media (width<=720px) {
  .header-cta {
    background:linear-gradient(120deg,#7e131880,#00000038);
    border-color:#9c1c23b3
  }
  .hero:before {
    background:linear-gradient(#0000008f 0%,#0000002e 22%,#2a0306d1 52%,#000000fa 100%),repeating-linear-gradient(115deg,#0000 0 8px,#ffffff07 8px 9px)
  }
  .programs-photo:after {
    background:linear-gradient(0deg, var(--wine-shadow), transparent 42%)
  }
  .show-event:after {
    background:#b44249;
    box-shadow:0 0 9px #b44249bf
  }
  .workshop-event:after {
    background:#777;
    box-shadow:0 0 8px #ffffff3d
  }
  .shows-visual:after {
    background:linear-gradient(#0000006b 0%,#2a0306c7 38%,#000000f7 100%)
  }
  .mobile-dock a span {
    color:#ffffffa6
  }
  .mobile-dock-primary {
    background:linear-gradient(145deg, var(--wine-bright), var(--wine-deep) 68%, #080808)
  }
  .mobile-dock-primary span {
    color:#fff
  }
  main {
    overflow:clip
  }
  section[id] {
    scroll-margin-top:20px
  }
  h1,h2,h3 {
    text-wrap:balance
  }
  p {
    text-wrap:pretty
  }
  .section-shell {
    width:calc(100% - 32px)
  }
  .site-header {
    height:72px;
    padding-inline:16px
  }
  .brand-logo {
    width:clamp(132px,39vw,148px)
  }
  .header-cta {
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-color:#ffffff38;
    justify-content:center;
    min-width:102px;
    padding-inline:12px;
    box-shadow:0 8px 24px #00000038
  }
  .hero {
    min-height:max(650px,100svh);
    padding:104px 16px calc(30px + env(safe-area-inset-bottom))
  }
  .hero-copy {
    max-width:420px
  }
  .kicker {
    max-width:34ch;
    margin-bottom:16px;
    padding-left:11px
  }
  h1 {
    font-size:clamp(44px,13vw,58px);
    line-height:1
  }
  .hero-intro {
    max-width:31ch;
    margin-top:20px;
    font-size:15.5px
  }
  .hero-actions {
    margin-top:24px
  }
  .hero-actions .button {
    min-height:54px
  }
  .hero-media img {
    object-position:center 43%
  }
  .studio-story {
    gap:10px;
    padding:62px 0
  }
  .studio-story-copy {
    padding-bottom:18px
  }
  .studio-primary-photo {
    height:min(104vw,400px)
  }
  .studio-secondary-photo {
    height:220px
  }
  .programs-photo {
    min-height:300px
  }
  .programs-panel {
    background:radial-gradient(circle at 100% 0,#9c1c2333,#0000 38%),linear-gradient(150deg,#0000001f,#210305e6);
    padding:56px 16px 62px
  }
  .program-list article {
    padding:20px 0
  }
  .agenda-inner {
    padding:64px 0 76px
  }
  .agenda-top {
    gap:18px;
    margin-bottom:32px
  }
  .agenda-photo {
    height:250px
  }
  .agenda-photo img {
    object-position:center 52%
  }
  .agenda-intro {
    max-width:36ch;
    font-size:15px
  }
  .calendar-wrap {
    background:radial-gradient(circle at 90% 0,#9c1c2333,#0000 34%),linear-gradient(150deg,#080808f0,#240306e0);
    border-radius:4px;
    padding:18px 10px 12px;
    box-shadow:0 22px 55px #00000057
  }
  .calendar-heading {
    gap:13px;
    margin-bottom:14px;
    padding:0 4px
  }
  .calendar-heading h3 {
    font-size:25px
  }
  .calendar-legend {
    gap:14px;
    font-size:9px
  }
  .calendar-day {
    min-height:48px;
    padding:6px 3px
  }
  .calendar-event:after {
    width:6px;
    height:6px;
    bottom:6px
  }
  .event-list-heading {
    border-bottom:1px solid #ffffff29;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
    margin:34px 2px 14px;
    padding-bottom:12px;
    display:flex
  }
  .event-list-heading p,.event-list-heading span {
    margin:0
  }
  .event-list-heading p {
    color:var(--rose-mist);
    letter-spacing:.18em;
    font-size:16px;
    font-weight:700
  }
  .event-list-heading span {
    color:#ffffff7a;
    text-align:right;
    max-width:15ch;
    font-size:9px;
    line-height:1.35
  }
  .event-cards {
    gap:12px;
    margin-top:0
  }
  .event-card {
    background:radial-gradient(circle at 100% 0,#9c1c232e,#0000 42%),linear-gradient(145deg,#ffffff0b,#1802049e);
    border-radius:4px;
    grid-template-columns:58px minmax(0,1fr);
    gap:13px;
    padding:17px 14px 14px
  }
  .event-card-date {
    padding-right:12px
  }
  .event-card-date strong {
    font-size:32px
  }
  .event-card-copy h3 {
    font-size:20px
  }
  .event-card-copy>small {
    color:#ffffffa6
  }
  .ticket-button {
    border-radius:2px;
    min-height:50px;
    box-shadow:0 10px 24px #21030547
  }
  .museum-gallery {
    grid-template-rows:repeat(2,190px);
    min-height:380px
  }
  .museum-content {
    padding:58px 16px 62px
  }
  .shows-content {
    padding-top:68px;
    padding-bottom:38px
  }
  .shows-services {
    width:calc(100% - 32px);
    margin-bottom:56px
  }
  .shows-services article {
    padding:20px
  }
  .faq {
    padding:64px 0 74px
  }
  .contact {
    min-height:500px;
    padding-inline:16px
  }
  .site-footer {
    padding:48px 16px 88px
  }
  .mobile-dock {
    min-height:calc(62px + env(safe-area-inset-bottom));
    background:linear-gradient(110deg,#000000f7,#210305f7);
    border-top-color:#9c1c2357;
    box-shadow:0 -12px 34px #0000006b
  }
  .mobile-dock a {
    gap:4px;
    min-height:62px;
    font-size:8px
  }
  .mobile-dock-primary {
    box-shadow:inset 1px 0 #ffffff17,inset -1px 0 #ffffff17
  }
}

@media (width<=390px) {
  .section-shell {
    width:calc(100% - 28px)
  }
  .site-header {
    padding-inline:14px
  }
  .brand-logo {
    width:128px
  }
  .header-cta {
    min-width:94px;
    min-height:42px;
    padding-inline:10px;
    font-size:9px
  }
  .hero {
    padding-inline:14px
  }
  h1 {
    font-size:clamp(42px,13.2vw,50px)
  }
  .hero-intro {
    font-size:15px
  }
  .studio-story-copy h2,.programs-panel h2,.agenda h2,.museum h2,.shows h2,.faq h2 {
    font-size:36px
  }
  .calendar-weekday {
    letter-spacing:.06em;
    font-size:6.5px
  }
  .calendar-day {
    min-height:45px
  }
  .event-card {
    grid-template-columns:54px minmax(0,1fr);
    padding-inline:12px
  }
  .event-card-date strong {
    font-size:30px
  }
  .event-card-copy h3 {
    font-size:19px
  }
  .museum-gallery {
    grid-template-rows:repeat(2,170px);
    min-height:340px
  }
}

@media (hover:none) and (pointer:coarse) {
  .button:hover,.event-card:hover,.calendar-day.has-event:hover {
    transform:none
  }
}
/* Agenda dinámica conectada con Google Calendar */
.calendar-event-more {
  display:block;
  margin-top:.35rem;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72
}

.calendar-empty {
  grid-column:1/-1;
  padding:3rem 1rem;
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase
}

.agenda-empty {
  padding:2rem 0;
  text-align:center;
  opacity:.8
}