:root{
    --paper:#E9EDF2;
    --ink:#000000;
    --blood:#8B1E24;
    --bg:var(--paper);
    --fg:var(--ink);
    --night:0;           /* 0 = paper, 1 = night; set by scroll */
    --hair:rgba(0,0,0,.22);
    --sv:0px;            /* scroll velocity, for afterimages */
    --sa:0;              /* afterimage strength 0..1 */
    --type:'Archivo', Arial, Helvetica, sans-serif;
    --display:var(--type);
    --text:var(--type);
  }
  /* Colours are driven by scroll position (see script); these only set the starting point. */
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:var(--paper); --fg:var(--ink);} }
  :root[data-theme="dark"]{ --bg:var(--paper); --fg:var(--ink); }

  *{box-sizing:border-box}
  html{background:var(--bg);scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:var(--text);
    font-size:clamp(17px, 0.45vw + 15px, 20px);
    line-height:1.65;
    font-weight:400;
    letter-spacing:-.012em;
    font-synthesis:none;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;

  }
  .mark{transition:background-color .4s ease}
  ::selection{background:var(--blood);color:var(--paper)}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--blood);outline-offset:4px}
  img{max-width:100%}

  .wrap{width:min(92vw,1180px);margin:0 auto;position:relative}
  .col{max-width:58ch}

  /* ---------- atmosphere layers ---------- */
  .fog{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:var(--night);overflow:hidden}
  .puff{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
  .puff.a{width:70vmax;height:70vmax;left:-20vmax;top:-10vmax;background:radial-gradient(circle,rgba(200,205,215,.13) 0%,rgba(200,205,215,.05) 35%,rgba(200,205,215,0) 68%);animation:driftA 52s ease-in-out infinite alternate}
  .puff.b{width:60vmax;height:60vmax;right:-25vmax;top:20vh;background:radial-gradient(circle,rgba(190,195,205,.11) 0%,rgba(190,195,205,.04) 40%,rgba(190,195,205,0) 70%);animation:driftB 67s ease-in-out infinite alternate}
  .puff.c{width:80vmax;height:50vmax;left:10vw;bottom:-30vmax;background:radial-gradient(ellipse,rgba(180,185,195,.10) 0%,rgba(180,185,195,.03) 45%,rgba(180,185,195,0) 70%);animation:driftC 80s ease-in-out infinite alternate}
  @keyframes driftA{from{transform:translate(0,0) scale(1)}to{transform:translate(18vmax,12vmax) scale(1.25)}}
  @keyframes driftB{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-22vmax,-14vmax) scale(.9)}}
  @keyframes driftC{from{transform:translate(0,0) scale(1)}to{transform:translate(-14vmax,-10vmax) scale(1.3)}}

  .grain{
    position:fixed;inset:-100% -100% 0 0;width:200%;height:200%;z-index:4;pointer-events:none;
    opacity:.075;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .55 0 0 0 0 .55 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation:grain .7s steps(7) infinite;
  }
  @keyframes grain{
    0%{transform:translate(0,0)}14%{transform:translate(-3%,-4%)}28%{transform:translate(-7%,2%)}42%{transform:translate(2%,-7%)}
    57%{transform:translate(-5%,5%)}71%{transform:translate(6%,-2%)}85%{transform:translate(-2%,7%)}100%{transform:translate(4%,4%)}
  }

  /* ---------- wordmark as mask: colour follows --fg ---------- */
  .mark{
    display:block;
    aspect-ratio:1400/591;
    background:var(--fg);
    -webkit-mask:url("assets/drakula-logo-mask.webp") center/contain no-repeat;
            mask:url("assets/drakula-logo-mask.webp") center/contain no-repeat;
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(16px,4vw,44px);
    pointer-events:none;
  }
  .nav::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);border-bottom:1px solid var(--hair);opacity:0;transition:opacity .25s ease}
  body.past-hero .nav::before{opacity:1}
  .nav .mark{width:78px;opacity:0;visibility:hidden;transition:opacity .5s ease}
  body.past-hero .nav .mark,.nav .mark:focus-visible{opacity:1;visibility:visible}
  .nav a{
    pointer-events:auto;
    font-family:var(--display);
    font-size:15px;font-weight:600;letter-spacing:.005em;
    text-decoration:none;
    border-bottom:1px solid currentColor;
    padding-bottom:2px;
  }

  /* ---------- hero ---------- */
  .hero{
    min-height:100svh;
    display:grid;
    grid-template-rows:1fr auto 1fr;
    place-items:center;
    padding:10vh 0 6vh;
    position:relative;
  }
  .stage{
    grid-row:2;
    position:relative;
    width:min(86vw,980px,120svh);
    aspect-ratio:1400/591;
  }
  .stage .mark{position:absolute;inset:0;width:100%;}
  /* The original wordmark stays solid; only its optical echoes animate. */
  .stage .base{opacity:1;transform:none}
  .stage .echo{opacity:0;will-change:transform,opacity;transition:opacity 1.6s cubic-bezier(.2,.8,.2,1), transform 1.8s cubic-bezier(.2,.8,.2,1)}
  .stage .e1{ --k:.55; --o:.28; transform:translate(calc(var(--ex,0px)*var(--k)), calc(var(--ey,0px)*var(--k) + var(--b1,0px))) }
  .stage .e2{ --k:1.15; --o:.14; transform:translate(calc(var(--ex,0px)*var(--k)), calc(var(--ey,0px)*var(--k) + var(--b2,0px))) }
  .stage .e3{ --k:1.9;  --o:.06; transform:translate(calc(var(--ex,0px)*var(--k)), calc(var(--ey,0px)*var(--k) + var(--b3,0px))) }
  body.in .stage .base{opacity:1;transform:none}
  body.in .stage .echo{opacity:var(--o)}
  body:not(.in) .stage .e1{transform:translateY(-70px)}
  body:not(.in) .stage .e2{transform:translateY(90px)}
  body:not(.in) .stage .e3{transform:translateY(-150px)}
  body.settled .stage .echo{transition:opacity .6s ease}

  .tag{
    grid-row:3;align-self:start;
    margin-top:clamp(20px,4vh,48px);
    font-size:clamp(20px,2.2vw,28px);
    font-style:normal;font-weight:500;
    opacity:1;transform:none;
    text-align:center;
  }
  body.in .tag{opacity:1;transform:none}
  .thread{
    position:absolute;left:50%;bottom:0;width:1px;height:9vh;background:currentColor;
    transform-origin:top;transform:scaleY(0);
    transition:transform 1.4s cubic-bezier(.2,.8,.2,1) 1.3s;opacity:.55;
  }
  body.in .thread{transform:scaleY(1)}

  /* ---------- sections ---------- */
  main{position:relative;z-index:2}
  section{padding:clamp(72px,11vh,140px) 0;position:relative}
  h2{
    font-family:var(--display);font-weight:800;
    font-size:clamp(2.6rem,7vw,6.4rem);
    line-height:1.05;letter-spacing:-.045em;
    margin:0 0 .5em;text-transform:none;
    position:relative;
  }
  h2 .t{position:relative;z-index:1;display:block}
  h2 .ghost{
    position:absolute;inset:0;display:block;pointer-events:none;
    opacity:calc(var(--sa) * var(--go,.3));
  }
  h2 .g1{ --go:.3; transform:translateY(calc(var(--sv) * -0.55)) }
  h2 .g2{ --go:.12; transform:translateY(calc(var(--sv) * -1.25)) }
  p{margin:0 0 1.1em}
  .lead{font-size:clamp(20px,1.5vw + 12px,27px);line-height:1.35;font-weight:500;letter-spacing:-.025em}
  .quiet{opacity:.72}
  .dur{font-family:var(--display);font-size:1.02rem;letter-spacing:.06em;margin:-.2em 0 1.6em;opacity:.8}
  .line{
    font-size:clamp(22px,2.4vw,34px);
    font-style:normal;font-weight:500;line-height:1.25;
    margin:2.2em 0 0;max-width:24ch;
  }
  .line small{display:block;font-style:normal;font-size:.95rem;margin-top:.9em;opacity:.7;font-weight:400}

  /* reveal from the dark */
  .js .rv{opacity:0;transform:translateY(18px);filter:blur(10px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s), filter 1.1s ease var(--d,0s)}
  .js .rv.vis{opacity:1;transform:none;filter:blur(0)}

  /* intro */
  .intro{padding-top:clamp(90px,16vh,190px)}
  .intro .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:start}
  @media (max-width:820px){ .intro .grid{grid-template-columns:1fr} }

  /* hypnosis: text + candle-lit portrait */
  .show{border-top:1px solid var(--hair)}
  .show .grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(28px,6vw,96px);align-items:start}
  @media (max-width:860px){ .show .grid{grid-template-columns:1fr} }
  .side{padding-top:clamp(0px,4vh,48px)}
  .side .lead{font-style:normal}
  .portrait{
    position:relative;aspect-ratio:3/2;overflow:hidden;background:#000;
    margin:.4em 0 1.6em;
    touch-action:pan-y;
  }
  .portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) contrast(1.04) brightness(1.08)}
  .portrait .lamp{
    position:absolute;inset:0;background:#000;
    -webkit-mask:radial-gradient(circle at var(--lx,62%) var(--ly,42%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 9%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.8) 40%, #000 60%);
            mask:radial-gradient(circle at var(--lx,62%) var(--ly,42%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 9%, rgba(0,0,0,.4) 22%, rgba(0,0,0,.8) 40%, #000 60%);
    opacity:.82;
  }
  .portrait figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
    font-style:normal;font-weight:500;font-size:.95em;color:var(--paper);opacity:.7;
    background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none;
  }

  /* The audience enters the light between the two performances. */
  .photo{padding:0;background:#000;color:var(--paper);isolation:isolate}
  .photo figure{position:relative;max-width:1600px;margin:0 auto;overflow:hidden}
  .photo .frame{position:relative;overflow:hidden;filter:brightness(var(--scene-light,1))}
  .photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--scene-scale,1));transform-origin:50% 44%;filter:grayscale(.65) contrast(1.1);will-change:transform}
  .photo .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.16) 12%,transparent 30%,transparent 48%,rgba(0,0,0,.65) 76%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.25),transparent 22%,transparent 78%,rgba(0,0,0,.25))}
  .photo figcaption{position:absolute;z-index:1;inset:auto 0 0;width:min(92vw,1180px);margin:0 auto;padding:0 0 clamp(34px,4vw,64px)}
  .photo figcaption p{margin:0;font:500 clamp(30px,4vw,54px)/1.04 var(--type);letter-spacing:-.045em;max-width:16ch}
  .curtains{display:none;position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
  .js .curtains{display:block}
  .curtain{position:absolute;top:0;bottom:0;width:50.5%;background-color:#080709;background-image:linear-gradient(180deg,rgba(0,0,0,.65),transparent 25%,transparent 70%,rgba(0,0,0,.7)),repeating-linear-gradient(90deg,#030304 0%,#0e0c0f 4%,#292329 10%,#171217 14%,#050405 20%,#010102 24%);will-change:transform}
  .curtain-left{left:0;transform-origin:left center;transform:translateX(calc(var(--curtain-open,0) * -104%)) scaleX(calc(1 - var(--curtain-open,0) * .12));box-shadow:inset -14px 0 22px #000,inset -1px 0 rgba(226,123,133,.15)}
  .curtain-right{right:0;background-position:right top;transform-origin:right center;transform:translateX(calc(var(--curtain-open,0) * 104%)) scaleX(calc(1 - var(--curtain-open,0) * .12));box-shadow:inset 14px 0 22px #000,inset 1px 0 rgba(226,123,133,.15)}

  /* magic: text over the smoke */
  .smoke{overflow:hidden;background:#000;color:var(--paper)}
  .smoke .bgimg{
    position:absolute;inset:-12% 0;width:100%;height:124%;
    object-fit:cover;object-position:78% 40%;
    opacity:.9;transform:translateY(var(--py,0px));will-change:transform;
  }
  .smoke::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.2) 75%, rgba(0,0,0,.05) 100%),
               linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
  }
  .smoke .wrap{z-index:1}
  @media (min-width:861px){ .smoke .grid{grid-template-columns:7fr 5fr} }
  .smoke .side{padding-top:min(38vh,420px)}
  @media (max-width:860px){
    .smoke .bgimg{object-position:72% 20%;opacity:.8}
    .smoke::after{background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.88) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 12%)}
    .smoke .side{padding-top:0}
  }

  /* character */
  .traits{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
  .traits li{border-bottom:1px solid var(--hair)}
  .traits button{appearance:none;background:none;border:0;color:inherit;font:inherit;text-align:left;display:block;width:100%;cursor:pointer;padding:18px 0}
  .traits .w{
    font-family:var(--display);text-transform:none;
    font-size:clamp(1.55rem,3.9vw,3.4rem);line-height:1.05;
    display:block;position:relative;
    transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .traits .w::before{
    content:attr(data-w);position:absolute;inset:0;pointer-events:none;
    opacity:calc(var(--sa)*.28);transform:translateY(calc(var(--sv)*-0.7));
  }
  .traits .w::after{
    content:attr(data-w);position:absolute;inset:0;
    opacity:0;transform:translateY(0);
    transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .traits .x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
  .traits .x > div{overflow:hidden}
  .traits .x p{margin:0;padding:0 0 22px;max-width:52ch;font-size:1.05em;font-weight:300;opacity:0;transform:translateY(6px);transition:opacity .45s ease .1s, transform .5s ease .1s}
  .traits li.open .x{grid-template-rows:1fr}
  .traits li.open .x p{opacity:1;transform:none}
  .traits li.open .w{transform:translateX(.35em)}
  .traits li.open .w::after{opacity:.16;transform:translateY(-.14em)}

  /* invitation: hands in the dark, a slow pulse */
  .invite{overflow:hidden;padding-bottom:clamp(40px,8vh,100px)}
  .invite .bgimg{
    position:absolute;inset:-10% 0;width:100%;height:120%;
    object-fit:cover;object-position:center 40%;opacity:.42;
    transform:translateY(var(--py,0px));will-change:transform;
    filter:grayscale(.3);
  }
  .invite::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.55) 70%, var(--bg) 100%);
  }
  .pulse{
    position:absolute;left:-10%;top:10%;width:70vmax;height:70vmax;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(139,30,36,.26) 0%, rgba(139,30,36,.08) 30%, rgba(139,30,36,0) 62%);
    animation:beat 1.35s ease-in-out infinite;transform-origin:center;
  }
  @keyframes beat{0%{transform:scale(1);opacity:.55}14%{transform:scale(1.06);opacity:.9}28%{transform:scale(1);opacity:.6}42%{transform:scale(1.05);opacity:.8}60%{transform:scale(1);opacity:.55}100%{transform:scale(1);opacity:.55}}
  .invite .wrap{z-index:1}
  .invite h2{max-width:none}
  .contact{margin-top:2.4em;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;font-size:1.1em}
  .contact a{text-decoration:none;border-bottom:1px solid var(--blood);padding-bottom:2px}
  .btn{
    display:inline-block;margin-top:2.6em;
    font-family:var(--display);font-size:1.05rem;letter-spacing:.08em;text-transform:none;
    text-decoration:none;border:1px solid currentColor;padding:18px 30px;
    position:relative;overflow:hidden;transition:color .35s ease, border-color .35s ease;
  }
  .btn::before{content:"";position:absolute;inset:0;background:var(--blood);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .btn span{position:relative}
  .btn:hover{color:var(--paper);border-color:var(--blood)}
  .btn:hover::before{transform:none}
  .sign{margin-top:2.2em;font-style:normal}

  footer{
    padding:34px 0 40px;font-size:.9em;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 32px;
    border-top:1px solid var(--hair);position:relative;z-index:2;
  }
  footer .mark{width:96px}

  /* cursor with afterimages (desktop only) */
  .cur{position:fixed;left:0;top:0;z-index:99;pointer-events:none;width:10px;height:10px;border-radius:50%;background:#fff;mix-blend-mode:difference;transform:translate(-50%,-50%);opacity:0}
  .cur.c2{width:7px;height:7px}.cur.c3{width:5px;height:5px}.cur.c4{width:3px;height:3px}
  @media (pointer:fine){
    body.cur-on{cursor:none}
    body.cur-on a, body.cur-on button, body.cur-on .portrait{cursor:none}
    body.cur-on .cur{opacity:1}
    body.cur-on .cur.c2{opacity:.6} body.cur-on .cur.c3{opacity:.35} body.cur-on .cur.c4{opacity:.2}
    body.cur-on.cur-hot .cur.c1{width:26px;height:26px;transition:width .25s ease,height .25s ease}
  }

  @media (max-width:600px){ .stage{width:94vw} .hero{padding-top:14vh} }

  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.01ms !important;animation:none !important}
    .stage .echo{transform:none !important}
    .js .rv{opacity:1;transform:none;filter:none}
    h2 .ghost,.traits .w::before{display:none}
    .portrait .lamp{display:none}
    .grain{animation:none}
  }

/* Integration: retained optical direction, current content and mobile rhythm. */
:root{--accent:#8b1e24}
html{scroll-padding-top:90px}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a,button{outline-offset:5px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:12px;z-index:100;background:var(--fg);color:var(--bg);padding:12px 16px;transform:translateY(-180%);font:16px Arial,sans-serif}
.skip-link:focus{transform:none}
.accent{color:var(--accent)}
.nav .mark{border:0}
.nav-links{display:flex;gap:clamp(24px,4vw,52px);align-items:center}
.nav a{min-height:40px;display:inline-flex;align-items:center;gap:10px}
.nav .mark:focus-visible{visibility:visible;opacity:1}
.stage{margin:0;line-height:1}
.hero-meta{position:absolute;bottom:5vh;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:30px;font-family:var(--text);font-size:16px}
.hero-meta p{margin:0}
.show-types{display:grid;gap:3px;line-height:1.45;letter-spacing:-.01em}
.show-types span{display:block}
.hero-meta a{text-decoration:none;display:inline-flex;gap:20px;align-items:center;min-height:44px}
.hero .thread{bottom:0;height:7vh;background:var(--accent);opacity:.7}
.tag{padding:0 20px;max-width:100%;line-height:1.3;font-weight:500;letter-spacing:-.03em}
.logo-fallback{display:none;width:100%;height:100%;mix-blend-mode:multiply}
@supports not ((mask-image:url('')) or (-webkit-mask-image:url(''))){
  .stage .mark{display:none}.logo-fallback{display:block}.is-night .logo-fallback{filter:invert(1);mix-blend-mode:screen}
  .nav .mark::after,footer .mark::after{content:'DRAKULA';font:20px var(--display);letter-spacing:.04em}
}
.wrap,.grid,.col,.side{min-width:0}
h2{font-size:clamp(2.25rem,5.3vw,5rem);line-height:1.06;letter-spacing:-.05em;font-weight:800;overflow-wrap:normal}
.intro h2{font-size:clamp(2rem,4.6vw,4rem)}
.dur{color:var(--accent);text-transform:uppercase;font-size:14px;font-weight:600;letter-spacing:.065em;margin:0 0 22px;opacity:1}
.line{margin-top:1.65em;font-weight:500;letter-spacing:-.035em;line-height:1.25}
.show-link{display:inline-flex;align-items:center;gap:22px;border-bottom:1px solid var(--hair);text-decoration:none;min-height:44px;margin-top:12px;padding-bottom:4px;font-size:16px;font-weight:500}
.show-link:hover{border-color:var(--accent)}
.portrait{margin:0 0 28px;aspect-ratio:3/2}
.portrait-mirror{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.portrait-mirror img{transition:opacity 1.3s ease,filter 1.3s ease}
.portrait-mirror.reflection-gone img{opacity:0;filter:blur(12px)}
.portrait .lamp{pointer-events:none}
.portrait figcaption{font-size:15px;font-weight:400;line-height:1.4;opacity:1;padding:38px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.smoke{--accent:#e27b85}
.smoke .side{padding-top:clamp(180px,27vh,300px)}
.smoke .show-link{border-color:rgba(233,237,242,.35)}
.smoke .bgimg{filter:grayscale(.25)}
.traits button{position:relative;display:flex;gap:24px;align-items:flex-start;justify-content:space-between;padding:22px 0}
.traits .w{font-size:clamp(1.35rem,2.9vw,2.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.2;overflow-wrap:normal}
.traits .w::after{content:attr(data-w)}
.traits .trait-toggle{font-family:var(--text);font-size:28px;line-height:1;flex:0 0 24px;text-align:center;color:var(--accent);transition:transform .3s}
.traits li.open .trait-toggle{transform:rotate(45deg)}
.traits li.open .w{transform:translateX(.15em)}
.traits .x p{font-size:18px;line-height:1.65;font-weight:400}
:root:not(.js) .traits .x{grid-template-rows:1fr}
:root:not(.js) .traits .x p{opacity:1;transform:none}
:root:not(.js) .smoke{background:#000}
:root:not(.js) .smoke::after{background:linear-gradient(90deg,#000d,#0007)}
:root:not(.js) .invite{background:#000;color:#e9edf2}
:root:not(.js) .invite::before{background:linear-gradient(180deg,#000,#0007 50%,#000)}
.invite .pulse{opacity:.55;animation-duration:2.8s}
.booking{margin-top:38px;border-top:1px solid var(--hair);padding-top:22px}
.booking-status{font-size:23px;font-weight:500;letter-spacing:-.025em;margin-bottom:8px}
.booking .quiet{font-size:16px}
footer{align-items:center;font-size:15px;line-height:1.5}
footer p{margin:0}
footer .mark{width:clamp(108px,12vw,144px);height:auto;min-height:46px}
.footer-shows{justify-self:end;text-align:right;font-size:14px}
.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--hair);padding-top:12px}
.footer-copyright{font-size:12px;letter-spacing:.035em;opacity:.72}
#motion-toggle{display:inline-flex;align-items:center;gap:8px;font:13px/1.3 var(--text);background:none;color:inherit;border:0;padding:10px 0;min-height:44px;cursor:pointer}
#motion-toggle::before{content:"";display:block;width:7px;height:9px;border-left:2px solid currentColor;border-right:2px solid currentColor;opacity:.65}
#motion-toggle[aria-pressed="true"]::before{width:0;height:0;border:5px solid transparent;border-left:7px solid currentColor;border-right:0}
#motion-toggle:disabled{cursor:default;opacity:.65}
.motion-off *,.tab-hidden .puff,.tab-hidden .grain,.tab-hidden .pulse{animation-play-state:paused!important}
.motion-off{scroll-behavior:auto}
.motion-off .stage .echo{transform:none!important}
.motion-off .ghost,.motion-off .traits .w::before,.motion-off .lamp{display:none}
.motion-off .rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.motion-off .portrait-mirror img{transition:none}
.motion-off .photo .frame{filter:none}
.motion-off .photo img{transform:none;will-change:auto}
.motion-off .curtains{display:none}
@media(max-width:860px){
  .show .grid{gap:44px}.show .side{padding-top:0}
  .smoke .side{padding-top:20px}
  .smoke::after{background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.65) 55%,rgba(0,0,0,.87)),linear-gradient(180deg,var(--bg),transparent 12%,transparent 90%,var(--bg))}
  .smoke .bgimg{object-position:72% center}
  .portrait{max-width:640px}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 40px)}
  .nav{padding:12px 20px}
  .nav a{font-size:14px}
  .nav .mark{width:68px}
  .hero{min-height:0;display:flex;flex-direction:column;padding:clamp(112px,17svh,154px) 0 32px;gap:0}
  .stage{width:94vw;flex:none}
  .tag{margin:26px 0 0;font-size:clamp(19px,4.6vw,25px);font-weight:500}
  .hero-meta{position:static;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-top:32px;gap:20px;font-size:14px;line-height:1.4}
  .hero-meta .show-types{font-size:13px;gap:4px}
  .hero-meta a{justify-self:end;gap:10px}
  .hero .thread{display:none}
  section{padding:66px 0}
  .intro{padding-top:64px;padding-bottom:72px}
  .intro .grid{gap:24px}
  .intro h2{font-size:clamp(1.9rem,8.2vw,3.7rem)}
  h2{font-size:clamp(2.1rem,9.6vw,4.2rem);margin-bottom:.6em}
  .lead{font-size:22px;line-height:1.4}
  .line{font-size:clamp(22px,5.7vw,28px);margin-top:28px}
  .dur{font-size:14px;margin-bottom:16px}
  .traits button{gap:16px;padding:20px 0}
  .traits .w{font-size:clamp(1.25rem,5.4vw,2rem)}
  .traits .x p{font-size:17px}
  .invite{padding-bottom:72px}
  .invite .bgimg{object-position:36% center;opacity:.34}
  footer{padding:24px 0 22px;gap:22px 16px;font-size:14px}
  footer .mark{width:108px}
  .footer-shows{font-size:13px;gap:4px}
  .footer-bottom{padding-top:10px;gap:8px 16px}
  #motion-toggle{font-size:12px}
}
@media(max-width:380px){
  .hero-meta{gap:12px;font-size:13px}.hero-meta a{gap:8px}
  .portrait figcaption{font-size:14px;padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage .base,.tag{opacity:1!important;transform:none!important}
  .js .rv{opacity:1;transform:none;filter:none}
  .portrait-mirror img{transition:none}
  .photo .frame{filter:none}
  .photo img{transform:none;will-change:auto}
  .js .curtains{display:none}
}

/* Two continuous scenes: the performance and the invitation. */
.hypnosis-scene{overflow:hidden;isolation:isolate;background:#000;color:var(--paper);--accent:#e27b85}
.hypnosis-scene .hypnosis-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,96px);align-items:start;z-index:2;pointer-events:none}
.hypnosis-grid .col{max-width:33rem}
.hypnosis-grid .col{pointer-events:auto}
.hypnosis-scene .portrait{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;aspect-ratio:auto;max-width:none;max-height:none;isolation:isolate}
.hypnosis-scene .portrait img{width:110%;max-width:none;height:100%;object-position:49% 40%;transform:translateX(8%);filter:grayscale(.3) contrast(1.05) brightness(1.08)}
.hypnosis-scene .portrait-mirror.reflection-gone img{opacity:0;filter:blur(12px)}
.hypnosis-scene .portrait .lamp{opacity:.28}
.hypnosis-scene .portrait-mirror:focus-visible{outline-offset:-6px}
.hypnosis-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.62) 42%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.18)),linear-gradient(180deg,#000,transparent 16%,transparent 75%,#000)}
.hypnosis-scene .hypnosis-signature{padding-top:clamp(180px,27vh,300px)}
.reflector-line{font-size:16px;line-height:1.5;font-weight:400;letter-spacing:-.01em;color:#dbe0e5;margin:0}
.caption-rule{display:block;width:26px;height:1px;background:var(--accent);margin:0 0 13px}
.participation-note{margin:30px 0 16px;padding:0 0 0 20px;border-left:1px solid rgba(233,237,242,.35)}
.participation-note h3{margin:0 0 8px;font:500 17px/1.4 var(--type);letter-spacing:-.015em}
.participation-note p{margin:0;max-width:40ch;font-size:16px;line-height:1.65;color:#aeb6c0;letter-spacing:0}
.hypnosis-scene .show-link{margin-top:18px;font-size:15px;min-height:44px}
.photo{padding:0}
.photo .frame{height:clamp(460px,55vw,780px)}
.photo img{object-position:center 30%}
.photo+.smoke{border-top:0}
.finale{padding-top:clamp(90px,10vw,156px);padding-bottom:clamp(68px,8vw,120px);background:#000;color:#e9edf2}
.finale .bgimg{z-index:0;inset:0 -8% auto auto;width:90%;height:100%;object-position:35% 45%;opacity:.48;filter:grayscale(.65) contrast(1.07);transform:none;will-change:auto;-webkit-mask:radial-gradient(ellipse closest-side at 50% 50%,#000 25%,rgba(0,0,0,.85) 55%,transparent 100%);mask:radial-gradient(ellipse closest-side at 50% 50%,#000 25%,rgba(0,0,0,.85) 55%,transparent 100%)}
.finale::before{z-index:1;pointer-events:none;background:linear-gradient(180deg,#000 0%,transparent 20%,transparent 65%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 42%,transparent 76%)}
.finale .wrap{z-index:2}
.finale .pulse{z-index:1;width:54vmax;height:54vmax;left:48%;top:-10%;background:radial-gradient(circle,rgba(139,30,36,.11),rgba(139,30,36,.03) 30%,transparent 62%)}
.finale .finale-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(50px,8vw,120px);align-items:end}
.invitation-main,.event-details{min-width:0}
.finale h2{font-size:clamp(2.65rem,5.8vw,5.1rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:32px}
.invitation-copy{max-width:31ch}
.invitation-copy .lead{font-size:22px;margin-bottom:9px}
.invitation-copy>p:last-child{font-size:16px;line-height:1.6;color:#b6bec9;margin:0}
.finale .booking{margin-top:36px;padding-top:20px;border-top:1px solid rgba(233,237,242,.2);max-width:30rem}
.finale .booking-status{font-size:16px;font-weight:500;letter-spacing:0;margin-bottom:7px}
.finale .booking .quiet{font-size:14px;color:#aab3be;line-height:1.5;opacity:1;margin:0}
.event-details{padding:26px 0 0;border-top:1px solid rgba(233,237,242,.48);align-self:end}
.details-title{margin:0 0 24px;font:400 13px/1.4 var(--type);letter-spacing:.1em;text-transform:uppercase;color:#aeb7c2}
.event-details .traits{border:0}
.event-details .traits li{border-color:rgba(233,237,242,.18)}
.event-details .traits li:last-child{border-bottom:0}
.event-details .traits button{padding:17px 0;gap:20px;min-height:56px;align-items:center}
.event-details .traits li:first-child button{padding-top:0;min-height:39px}
.event-details .traits .w{font:500 clamp(17px,1.6vw,21px)/1.3 var(--type);letter-spacing:-.02em;color:#e9edf2;transform:none;opacity:1}
.event-details .traits li.open .w{transform:none}
.event-details .traits .w::before,.event-details .traits .w::after{display:none}
.event-details .trait-toggle{flex:0 0 14px;font-size:22px;font-weight:400;color:#b7bfc9;line-height:1}
.event-details .open .trait-toggle{color:var(--accent)}
.event-details .traits .x p{font:400 16px/1.65 var(--type);letter-spacing:0;color:#afb8c3;padding-bottom:22px;max-width:42ch}
@media(max-width:980px) and (min-width:861px){
  .hypnosis-scene .hypnosis-grid{gap:38px}
  .participation-note{padding-left:15px}
  .finale .finale-layout{gap:46px;grid-template-columns:1fr 1fr}
  .finale h2{font-size:clamp(2.5rem,5vw,3.5rem)}
}
@media(max-width:860px){
  .hypnosis-scene .hypnosis-grid{grid-template-columns:1fr;gap:38px}
  .hypnosis-grid .col{max-width:36rem}
  .hypnosis-scene .hypnosis-signature{padding-top:20px}
  .hypnosis-scene::after{background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.43) 60%,rgba(0,0,0,.18)),linear-gradient(180deg,#000,transparent 15%,transparent 72%,#000)}
  .finale .finale-layout{grid-template-columns:1fr;gap:44px}
  .finale h2{max-width:12ch;font-size:clamp(2.65rem,8.6vw,4.7rem)}
  .invitation-main{max-width:620px}
  .event-details{max-width:620px;width:100%;padding-top:22px}
  .details-title{margin-bottom:24px}
  .event-details .traits .w{font-size:18px}
  .finale .bgimg{width:140%;height:clamp(560px,145vw,820px);inset:0 auto auto 5%;object-position:18% center;opacity:.5}
  .finale::before{background:linear-gradient(180deg,#000 0%,transparent 18%,transparent 45%,#000 80%),linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.14) 75%)}
}
@media(max-width:700px){
  .hypnosis-scene .hypnosis-grid{gap:32px}
  .participation-note{margin:26px 0 10px;padding-left:16px}
  .participation-note h3{font-size:16px}
  .participation-note p{font-size:16px;line-height:1.6}
  .reflector-line{font-size:14px}
  .caption-rule{margin-bottom:10px;width:22px}
  .photo .frame{height:auto;aspect-ratio:3/2}
  .photo img{object-position:51% 28%}
  .photo .frame::after{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.12) 12%,transparent 30%,transparent 58%,rgba(0,0,0,.65) 88%,#000 100%)}
  .photo figcaption{position:relative;inset:auto;width:calc(100% - 40px);margin:-30px auto 0;padding:0 0 30px}
  .photo figcaption p{font-size:clamp(30px,8.2vw,42px)}
  .finale{padding:76px 0 48px}
  .finale h2{font-size:clamp(2.4rem,9.5vw,4rem);margin-bottom:25px}
  .invitation-copy .lead{font-size:21px}
  .finale .booking{margin-top:27px;padding-top:18px}
  .finale .finale-layout{gap:40px}
  .details-title{font-size:12px;margin-bottom:22px}
  .event-details .traits .w{font-size:17px}
  .event-details .traits .x p{font-size:16px;line-height:1.6}
  .event-details .traits button{padding:17px 0}
}