@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&display=swap');

:root { --ink:#0b1015; --ink2:#0e1318; --card:#0e1419; --gold:#e3ab52; --gold2:#c8924020; --cream:#f5ecd9; --soft:#d9cfbc; --muted:#a39a88; --line:rgba(227,171,82,.28); --hair:rgba(245,236,217,.09);
        --ease:cubic-bezier(.2,.7,.2,1); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--ink); color:var(--cream); font-family:'Inter', 'Segoe UI', system-ui, sans-serif; font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; }
img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--gold); color:var(--ink); }
.wrap { width:min(1200px, 100% - 48px); margin:0 auto; }

/* small caps label with a gold rule in front */
.eyebrow { display:inline-flex; align-items:center; gap:14px; font-size:11.5px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--gold); opacity:.8; }
h1, h2, h3, .serif { font-family:'Playfair Display', Georgia, serif; font-weight:400; letter-spacing:-.01em; }
em { font-style:italic; }

/* nav: transparent over the hero, turns to frosted ink once you scroll */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(11,16,21,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--hair); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; padding:22px 0; transition:padding .5s var(--ease); }
.nav.scrolled .wrap { padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand svg { width:34px; height:34px; }
.brand .a { font-size:10px; font-weight:500; letter-spacing:.38em; text-transform:uppercase; display:block; line-height:1; }
.brand .b { font-family:'Playfair Display'; font-style:italic; font-weight:500; font-size:23px; color:var(--gold); line-height:1; display:block; margin-top:4px; }
.links { display:flex; gap:38px; align-items:center; font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
.links a:not(.btn) { opacity:.75; position:relative; transition:opacity .3s; }
.links a:not(.btn)::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.links a:not(.btn):hover { opacity:1; }
.links a:not(.btn):hover::after { transform:scaleX(1); }

/* buttons: sharp, quiet, spaced capitals */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:17px 32px; border-radius:2px; font-weight:500; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; cursor:pointer; border:1px solid transparent; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.btn.gold { background:var(--gold); color:var(--ink); }
.btn.gold:hover { background:var(--cream); }
.btn.ghost { border-color:rgba(245,236,217,.3); color:var(--cream); background:transparent; }
.btn.ghost:hover { border-color:var(--gold); color:var(--gold); }

/* sections: one continuous dark page, divided by hairlines instead of colour bands */
section { padding:150px 0; position:relative; }
section + section::before, .alt::before { content:""; position:absolute; top:0; left:50%; width:min(1200px, 100% - 48px); height:1px; transform:translateX(-50%); background:linear-gradient(90deg, transparent, var(--line), transparent); }
.alt { background:var(--ink2); }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:64px; }
.head h2 { font-weight:400; font-size:clamp(36px, 4.8vw, 64px); line-height:1.06; margin-top:22px; max-width:700px; }
.head h2 em { color:var(--gold); }
.head p { color:var(--muted); max-width:360px; font-size:15.5px; font-weight:300; }

/* work cards: no boxes, just the image and a caption */
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.card { background:none; border:0; border-radius:0; overflow:visible; cursor:pointer; }
.card .media { aspect-ratio:4/5; overflow:hidden; position:relative; background:#000; border-radius:3px; }
.card .media img, .card .media video { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.card:hover .media img, .card:hover .media video { transform:scale(1.045); }
.card .media::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(245,236,217,.06); pointer-events:none; }
.card .meta { padding:20px 2px 0; }
.card .meta b { font-family:'Playfair Display'; font-size:22px; font-weight:400; display:block; }
.card .meta span { color:var(--muted); font-size:13.5px; font-weight:300; }
.badge { display:inline-block; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); border:0; border-top:1px solid var(--line); border-radius:0; padding:8px 0 0; margin-top:14px; }
.playhint { position:absolute; left:16px; bottom:16px; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; background:rgba(11,16,21,.6); backdrop-filter:blur(6px); border:1px solid rgba(245,236,217,.18); border-radius:2px; padding:7px 12px; pointer-events:none; transition:opacity .3s ease; }
.card.playing .playhint { opacity:0; }

/* work held back until each venue agrees: remove the word "hold" from a card to show it */
.hold { display:none !important; }
.work-hold { text-align:center; font-family:'Playfair Display', Georgia, serif; font-size:clamp(22px, 2.6vw, 32px); line-height:1.4; padding:40px 0 10px; }
.work-hold a { color:var(--gold); border-bottom:1px solid var(--line); }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.plan { padding:44px 36px; display:flex; flex-direction:column; border-left:1px solid var(--hair); }
.plan:first-child { border-left:0; }
.plan.feat { background:linear-gradient(180deg, rgba(227,171,82,.07), rgba(227,171,82,0) 70%); box-shadow:inset 0 1px 0 var(--gold); }
.plan h3 { font-size:26px; font-weight:400; }
.plan .price { font-family:'Playfair Display'; font-size:46px; font-weight:400; color:var(--gold); margin:18px 0 2px; }
.plan .price small { font-family:'Inter'; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:400; }
.plan ul { list-style:none; margin:24px 0 34px; color:var(--soft); font-size:14.5px; font-weight:300; }
.plan li { padding:11px 0; border-top:1px solid var(--hair); }
.plan .btn { margin-top:auto; }
.also { margin-top:34px; color:var(--muted); font-size:14px; font-weight:300; text-align:center; letter-spacing:.02em; }
.also b { color:var(--cream); font-weight:500; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:36px; counter-reset:s; }
.step { border-top:1px solid var(--line); padding-top:26px; }
.step::before { counter-increment:s; content:"0" counter(s); font-family:'Playfair Display'; font-style:italic; font-size:44px; font-weight:400; color:var(--gold); display:block; margin-bottom:12px; line-height:1; }
.step b { font-family:'Playfair Display'; font-weight:400; font-size:22px; display:block; margin-bottom:8px; }
.step p { color:var(--muted); font-size:14.5px; font-weight:300; }

/* form: underlined fields, like writing on a reservation card */
.form { max-width:580px; margin:48px auto 0; display:grid; gap:6px; text-align:left; }
.form input, .form textarea { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(245,236,217,.18); border-radius:0; padding:18px 2px; color:var(--cream); font:inherit; font-size:15.5px; font-weight:300; transition:border-color .4s var(--ease); }
.form input::placeholder, .form textarea::placeholder { color:var(--muted); opacity:.8; }
.form input:focus, .form textarea:focus { outline:none; border-bottom-color:var(--gold); }
.form textarea { min-height:90px; resize:vertical; }
.form .btn { width:100%; margin-top:30px; padding:20px 32px; }
.hp { display:none; }
.form-note { margin-top:14px; font-size:12px; font-weight:300; color:var(--muted); line-height:1.5; }
.form-note a { color:var(--soft); border-bottom:1px solid var(--line); }
.contact-line { margin-top:30px; color:var(--muted); font-size:14px; font-weight:300; }
.contact-line a { color:var(--cream); border-bottom:1px solid var(--line); padding-bottom:2px; }

footer { border-top:1px solid var(--hair); padding:34px 0; color:var(--muted); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer a:hover { color:var(--gold); }

/* film grain + reveals */
.grain { position:fixed; inset:-50%; z-index:100; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.js .reveal { opacity:0; transform:translateY(28px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }

/* work images open like a curtain as they scroll in */
.js .card.reveal .media { clip-path:inset(100% 0 0 0); transition:clip-path 1.6s var(--ease); }
.js .card.reveal.in .media { clip-path:inset(0 0 0 0); }
.work-note { margin-top:40px; color:var(--muted); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; text-align:center; }

/* cursor that says what a click does, over the work (mouse devices only) */
.cursor { position:fixed; left:0; top:0; z-index:150; pointer-events:none; padding:10px 16px; border-radius:999px; background:var(--gold); color:var(--ink); font:500 9.5px/1 'Inter'; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
          opacity:0; transform:translate(-50%,-50%) scale(.6); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.cursor.on { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* full-screen viewer: the work, large, with sound */
.viewer { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:5vh 4vw; background:rgba(6,9,12,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
          opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility 0s linear .6s; }
.viewer.open { opacity:1; visibility:visible; transition:opacity .6s var(--ease); }
.viewer .stage { max-width:100%; max-height:90vh; transform:scale(.97); transition:transform .8s var(--ease); }
.viewer.open .stage { transform:none; }
.viewer video, .viewer img { max-width:92vw; max-height:84vh; width:auto; height:auto; border-radius:3px; box-shadow:0 40px 120px -20px rgba(0,0,0,.9); background:#000; }
.viewer .cap { margin-top:18px; text-align:center; font-family:'Playfair Display'; font-size:20px; }
.viewer .cap span { display:block; margin-top:6px; font-family:'Inter'; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.viewer .close { position:absolute; top:22px; right:26px; background:none; border:1px solid rgba(245,236,217,.25); color:var(--cream); border-radius:2px; padding:11px 16px; font:500 10.5px/1 'Inter'; letter-spacing:.26em; text-transform:uppercase; cursor:pointer; transition:border-color .3s, color .3s; }
.viewer .close:hover { border-color:var(--gold); color:var(--gold); }
body.viewing { overflow:hidden; }

@media (max-width: 860px) {
  .wrap { width:min(1200px, 100% - 40px); }
  .links a:not(.btn) { display:none; }
  .links .btn { padding:12px 18px; font-size:10.5px; letter-spacing:.2em; }
  section { padding:96px 0; }
  .head { flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:44px; }
  .cards, .steps { grid-template-columns:1fr; }
  .cards { gap:44px; }
  .plans { grid-template-columns:1fr; }
  .plan { border-left:0; border-top:1px solid var(--hair); padding:40px 4px; }
  .plan:first-child { border-top:0; }
  .plan.feat { padding:40px 22px; }
  footer .wrap { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .btn, .card .media img, .card .media video { transition:none; } }