/* Maison Nur — "Salon Nocturne"
 *
 * The two award studies crossed, per Nur's notes of 2026-09-08.
 *
 *   From The Salon Hang: the photography hung as a collection, and the room's own
 *   colours — the malachite banquettes, the brass. But no plaques. "I don't like the
 *   cards on the hang, it's too busy." The labels came off the pictures entirely; a
 *   group of frames carries one quiet credit line instead of a label on each.
 *
 *   From Nocturne: the accent advancing through the evening, and the fixed rail. But
 *   the rail reads words. "the times on nocturne could confuse guests so let's talk
 *   about early, dinner, late etc." — Early · Dinner · Late · Music · Downstairs.
 *
 * The one loud thing is the DJ lineup, which is pink and set large, because that is
 * what Nur asked to be loud. Everything around it is quiet so that reads.
 *
 * Type is one face from each parent: Archivo (wdth 125) and Instrument Serif.
 */

:root {
  --ink: #0A0806;            /* warm near-black */
  --ink-lift: #14100C;
  --malachite: #0E3A2C;      /* the banquettes — the one field of colour */
  --plaster: #EDE7DA;
  --plaster-dim: #A79F92;    /* 7.6:1 on ink */

  --amber:  #E8B04B;         /* candlelight, early */
  --brass:  #D8B978;         /* the room's metal — 6.7:1 on malachite */
  --ember:  #E0714E;         /* the crimson lamps, lifted to 6.0:1 so it can carry text */
  --pink:   #D67ABD;         /* Studio's own brand colour — 7.0:1 on ink */

  --accent: var(--amber);    /* advances with the chapter */

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --rail: 124px;   /* wide enough for the longest chapter word, 'Downstairs' */
  --hair: 5px;               /* the gap between frames on the wall */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0; background: var(--ink); color: var(--plaster);
  font-family: var(--display); font-variation-settings: "wdth" 100;
  font-size: 16.5px; line-height: 1.62; font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Studio is a mode, not a section — top bar and footer go pink too. Setting the accent
   per-section leaves gold chrome wrapped around pink content. */
body.downstairs { --accent: var(--pink); }

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(1400px, 100% - (var(--gut) * 2)); margin-inline: auto; }
.col { width: min(62ch, 100%); }

.skip { position: absolute; left: -9999px; background: var(--plaster); color: var(--ink); padding: .8rem 1.2rem; z-index: 300; }
.skip:focus { left: 1rem; top: 1rem; }

.protobar {
  background: var(--accent); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem var(--gut); text-align: center; transition: background .9s ease;
}

/* ------------------------------------------------------------------ type */

h1, h2, h3 { margin: 0; }

.d-xl, .d-lg, .d-md {
  font-family: var(--display); font-variation-settings: "wdth" 125;
  font-weight: 700; text-transform: uppercase;
  line-height: .86; letter-spacing: -0.005em; margin: 0; text-wrap: balance;
}
.d-xl { font-size: clamp(2.4rem, 9.5vw, 8.5rem); }
/* .d-xl is sized for a short word. Anything longer than about seven characters uses
   .d-lg — a single unbreakable word wider than its column scrolls the whole document
   sideways without any element's own box ever reporting as too wide. */
.d-lg { font-size: clamp(2.3rem, 7vw, 5.6rem); }
.d-md { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }

/* the narrative voice — the one serif, used for a single line at a time */
.serif-lede {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 2.3rem); line-height: 1.2;
  color: var(--accent); margin: 1.4rem 0 0; max-width: 24ch;
  transition: color .9s ease;
}

p { margin: 0 0 1.15em; max-width: 60ch; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.55; font-weight: 300; margin-top: 1.4rem; }
.dim { color: var(--plaster-dim); }
.fine { color: var(--plaster-dim); font-size: 12.5px; max-width: 78ch; margin: 0 0 .5em; }

.what {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--plaster-dim); margin: 0 0 1.4rem;
}

/* ------------------------------------------------------------------ chrome */

.top { border-bottom: 1px solid rgba(237,231,218,.14); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.1rem 0; }
.id img { width: clamp(150px, 17vw, 230px); }
.top nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(.9rem, 1.8vw, 1.9rem); margin: 0; padding: 0; }
.top nav a {
  text-decoration: none; font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--plaster-dim);
  padding-block: .7rem; display: inline-block;
}
.top nav a:hover, .top nav a[aria-current] { color: var(--accent); }
/* Phones: the links wrap to two rows. Each link keeps its ~44px tap height from the
   padding, so the rows need no extra gap — with it they sat a third of a screen apart.
   Spacing is set so eight links (with a special event's, e.g. Halloween) still make two rows
   at 360px wide; at the old 1.15rem / .13em they made three. */
@media (max-width: 720px) {
  .top .wrap { gap: .2rem 1.5rem; padding: .9rem 0 .4rem; }
  .top nav ul { row-gap: 0; column-gap: .75rem; }
  .top nav a { letter-spacing: .08em; font-size: 11px; }
}

/* the rail — words, not hours */
.rail {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  width: var(--rail); margin: 0; padding: 0; list-style: none;
  display: none; z-index: 60;
}
.rail a {
  display: block; text-decoration: none; padding: .5rem 0 .5rem 1.15rem;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; color: var(--plaster-dim); border-left: 2px solid transparent;
}
.rail a[data-on="1"] { color: var(--accent); border-left-color: var(--accent); }
@media (min-width: 1181px) {
  .rail { display: block; }
  body { padding-left: var(--rail); }   /* the rail gets a real gutter, not the copy */
}

/* ------------------------------------------------------------------ chapters */

.chapter { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }

/* a chapter that fills the screen behind its own photograph */
.chapter-open { min-height: min(86vh, 820px); display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 7vw, 6rem); }
.chapter-open .bg { position: absolute; inset: 0; overflow: hidden; }
.chapter-open .bg img { width: 100%; height: 100%; object-fit: cover; }
.chapter-open .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.5) 45%, rgba(10,8,6,.93) 100%);
}
.chapter-open .wrap { position: relative; z-index: 2; }

/* the one field of colour — the banquettes */
.chapter-dinner { background: var(--malachite); --accent: var(--brass); }

.chapter-down { --accent: var(--pink); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the hang */
/* Frames, no labels. Spans are classes so one rule resets them on a phone. */

.hang { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hair); }
.hang.hang-wide { grid-template-columns: repeat(4, 1fr); }
.hang figure { margin: 0; overflow: hidden; background: var(--ink-lift); }
.hang img { width: 100%; height: 100%; object-fit: cover; }
.hang .f-1 { grid-column: span 1; aspect-ratio: 4 / 5; }
.hang .f-2 { grid-column: span 2; aspect-ratio: 16 / 11; }
.hang .f-3 { grid-column: span 3; aspect-ratio: 2 / 1; }
@media (max-width: 900px) {
  .hang, .hang.hang-wide { grid-template-columns: repeat(2, 1fr); }
  .hang .f-1, .hang .f-2, .hang .f-3 { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 460px) {
  .hang, .hang.hang-wide { grid-template-columns: 1fr; }
}
.credit { color: var(--plaster-dim); font-size: 11.5px; letter-spacing: .04em; margin: .7rem 0 0; }

.plate img { width: 100%; }

/* ------------------------------------------------------------------ the lineup */
/* Nur: "DJ lineup instead of this week", "make all this pink like studio",
   "make all the dj lineup big and bold". */

.chapter-music {
  --accent: var(--pink);
  border-top: 1px solid rgba(214,122,189,.32);
  border-bottom: 1px solid rgba(214,122,189,.32);
  background: linear-gradient(180deg, rgba(214,122,189,.07), rgba(214,122,189,0) 60%);
}
.lineup-head { color: var(--pink); }
.pink-lede { color: var(--plaster); max-width: 44ch; }

.nights { margin-top: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid rgba(214,122,189,.4); }
.night {
  display: grid; grid-template-columns: minmax(150px, 200px) 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.3rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid rgba(214,122,189,.4);
}
.dayline { margin: 0; display: flex; flex-direction: column; gap: .2rem; max-width: none; }
.day {
  font-variation-settings: "wdth" 125; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1; color: var(--pink);
  letter-spacing: .02em;
}
.dt { font-size: 12.5px; letter-spacing: .16em; color: var(--pink); }

.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 2.6rem); }
.room {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(237,231,218,.72); margin-bottom: .45rem;
}
.who {
  font-variation-settings: "wdth" 125; font-weight: 700; text-transform: uppercase;
  line-height: .92; font-size: clamp(1.45rem, 3.4vw, 2.9rem);
  color: var(--pink); margin: 0; max-width: none;
}
/* A descriptor under a name — the party, "introducing …" — in the narrative serif, quiet. */
.who small {
  display: block; margin-top: .35rem; font-family: var(--serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.3;
  color: rgba(237,231,218,.72);
}
/* The six unfilled slots stay small. Six "TO BE ANNOUNCED"s at full size would read as
   the loudest thing on the page, which is the opposite of what the section is for. */
.who.tba {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none;
  font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: 0; line-height: 1.3;
  color: rgba(237,231,218,.58);
}
/* A featured party (content/lineup.json "feature"): the name set huge in Studio pink across the
   top of the night, the DJs below as usual. Nur, 2026-10-12: "emphasize EYE in big pink … to get
   attention to the new party." Sized for a short name; longer names step down. */
/* "color" on a feature (2026-10-13): one of the site's own colours, all ≥6:1 on ink. */
.tone-gold { --feat: var(--amber); } .tone-red { --feat: var(--ember); } .tone-cream { --feat: var(--plaster); }
.night.has-feature { background: linear-gradient(90deg, color-mix(in srgb, var(--feat, var(--pink)) 13%, transparent), transparent 78%); }
.feature { grid-column: 1 / -1; margin: 0 0 .2rem; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; }
.feature-name {
  font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase;
  font-size: clamp(5.6rem, 13vw, 10.5rem); line-height: .82; letter-spacing: -.01em;
  color: var(--feat, var(--pink)); text-shadow: 0 0 .35em color-mix(in srgb, var(--feat, var(--pink)) 35%, transparent); overflow-wrap: anywhere;
}
.feature-note {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.2; color: var(--plaster);
}
.tonight .ev .party {
  color: var(--feat, var(--pink)); font-weight: 800; font-size: 1.7em; line-height: .9; letter-spacing: 0;
  margin-right: .35em; text-shadow: 0 0 .35em color-mix(in srgb, var(--feat, var(--pink)) 35%, transparent);
}
@media (max-width: 720px) {
  .night { grid-template-columns: 1fr; gap: .9rem; }
  .dayline { flex-direction: row; align-items: baseline; gap: .8rem; }
  .slots { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ------------------------------------------------------------------ actions */

.gos { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.go {
  display: inline-block; text-decoration: none;
  padding: .95rem 1.7rem; border: 1px solid var(--accent); color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.go:hover { background: var(--accent); color: var(--ink); }
/* Modifiers are written at two classes so a section rule can never quietly outrank them
   — that trap produced black-on-black and pink-on-pink buttons twice in earlier builds. */
.go.go-solid { background: var(--accent); color: var(--ink); }
.go.go-solid:hover { background: transparent; color: var(--accent); }
.go.go-pink { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.go.go-pink:hover { background: transparent; color: var(--pink); }
.go.go-pink-ghost { background: transparent; border-color: var(--pink); color: var(--pink); }
.go.go-pink-ghost:hover { background: var(--pink); color: var(--ink); }
/* Resy sits beside OpenTable, deliberately quieter — OpenTable is the default. */
.go.go-quiet { border-color: transparent; color: var(--plaster-dim); text-decoration: underline; text-underline-offset: .4em; }
.go.go-quiet:hover { background: transparent; color: var(--plaster); }

.deck-link {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.15; color: var(--accent); text-decoration: none; display: inline-block;
  max-width: 20ch; border-bottom: 2px solid var(--accent); padding-bottom: .08em;
}

.room-card { text-decoration: none; display: block; }
.room-card .d-md { display: block; color: var(--accent); }

/* ------------------------------------------------------------------ menus */
/* Nur: "let's have non pdf menus just text on the page." */

.menu-jump { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding-bottom: .4rem; }
.menu-jump a {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plaster-dim); text-decoration: none; padding-block: .7rem; display: inline-block;
}
.menu-jump a:hover { color: var(--accent); }

.menu-set .d-lg { color: var(--accent); }
.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(2rem, 4vw, 3.6rem); margin-top: clamp(2rem, 4vw, 3rem); }
.course { break-inside: avoid; }
.course-head {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(237,231,218,.18);
}
.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li {
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid rgba(237,231,218,.08);
}
.dn { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.dd { display: block; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--plaster-dim); }
.dp { font-size: 14px; font-weight: 400; color: var(--accent); white-space: nowrap; }
.dishes.wine .dn { text-transform: none; font-weight: 300; letter-spacing: 0; font-size: 15px; line-height: 1.4; }
.course-note { color: var(--plaster-dim); font-size: 12.5px; margin: .9rem 0 0; }

.pf-options { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: rgba(237,231,218,.18); border: 1px solid rgba(237,231,218,.18); }
.pf-options li { background: var(--ink); padding: 1.5rem; }
.pf-n { display: block; font-variation-settings: "wdth" 125; font-weight: 700; text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.05; }
.pf-p { display: block; color: var(--accent); font-size: 13px; letter-spacing: .1em; margin-top: .5rem; }
.pf-d { display: block; color: var(--plaster-dim); font-size: 13.5px; margin-top: .5rem; }

/* ------------------------------------------------------------------ odds */

.collection { list-style: none; margin: 0; padding: 0; }
.collection li {
  font-variation-settings: "wdth" 125; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1.5;
  border-bottom: 1px solid rgba(237,231,218,.14); padding: .5rem 0;
}

.quotes { list-style: none; margin: 0; padding: 0; }
.quotes li { border-top: 1px solid rgba(237,231,218,.16); padding: clamp(1.6rem, 3vw, 2.6rem) 0; }
.quotes blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.24; max-width: 34ch; }
.quotes cite {
  display: block; margin-top: 1rem; font-family: var(--display); font-style: normal;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--hair); }
.tiles a { display: block; }
.tiles img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.owed { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2rem; }
.owed h3 { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem; }
.owed p { font-size: 14.5px; color: var(--plaster-dim); }

.pending {
  border-left: 2px solid var(--accent); padding: .9rem 0 .9rem 1.1rem;
  font-size: 13.5px; color: var(--plaster-dim); max-width: 74ch;
}
.pending strong { color: var(--plaster); }

/* Studio's lockup ships dark-on-transparent, so it is masked and filled rather than
   shipped as a second, hand-tinted file. */
.studio-eye {
  display: block; width: clamp(96px, 11vw, 150px); aspect-ratio: 1;
  background: var(--pink); margin-bottom: 1rem;
  -webkit-mask: url(logo-studio.png) center / contain no-repeat;
          mask: url(logo-studio.png) center / contain no-repeat;
}

/* ------------------------------------------------------------------ footer */

.foot { border-top: 1px solid rgba(237,231,218,.14); padding: clamp(2.6rem, 5vw, 4.5rem) 0 2.5rem; margin-top: clamp(2rem, 5vw, 4rem); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
.foot h4 { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { font-size: 14px; color: var(--plaster-dim); line-height: 1.5; }
.foot a { color: var(--plaster-dim); text-decoration: none; padding-block: .45rem; display: inline-block; }
.foot a:hover { color: var(--accent); }
.foot .fine { margin-top: clamp(2rem, 4vw, 3rem); }

/* Nur, 2026-09-29: "make lower level text more visible" and "say Studio". The eyebrow over
   the Studio chapter on the home page and over the Studio page hero reads in the brand pink,
   larger than the standard eyebrow. Same specificity trick as the other modifiers: two
   classes beat the one-class .what rule above. */
.what.what-loud { color: var(--pink); font-size: clamp(13px, 1.3vw, 16px); letter-spacing: .22em; }


/* ------------------------------------------------------------------ the event inquiry form */
/* Tripleseat's lead form, embedded by script on /events (restored 2026-10-02 at Yuval's ask).
   The script writes its own table markup and a black-on-white stylesheet keyed on
   #tripleseat_embed_form; every rule here adds the .inquiry class in front of that id so it
   outranks theirs without !important. Their field ids and classes are the only hooks. */
.inquiry { margin-top: 2.2rem; max-width: 780px; }
.inquiry #tripleseat_embed_form table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.inquiry #tripleseat_embed_form table td { padding: 0 1.2rem 1.15rem 0; vertical-align: top; }
.inquiry #tripleseat_embed_form table td:last-child { padding-right: 0; }
.inquiry #tripleseat_embed_form h2 {
  font-family: var(--display); font-variation-settings: "wdth" 100; font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.4; color: var(--accent);
  margin: 1.2rem 0 .2rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(237,231,218,.18);
}
.inquiry #tripleseat_embed_form label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plaster-dim); margin-bottom: .45rem;
}
.inquiry #tripleseat_embed_form label em {
  font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .5em;
}
.inquiry #tripleseat_embed_form label span.required { color: var(--ember); }
.inquiry #tripleseat_embed_form input[type="text"],
.inquiry #tripleseat_embed_form textarea,
.inquiry #tripleseat_embed_form select {
  width: 100%; box-sizing: border-box; background: var(--ink-lift); color: var(--plaster);
  border: 1px solid rgba(237,231,218,.28); border-radius: 0; padding: .8rem .85rem;
  font-family: var(--display); font-size: 15px; font-weight: 300; line-height: 1.3; -webkit-appearance: none; appearance: none;
}
.inquiry #tripleseat_embed_form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--plaster-dim) 50%), linear-gradient(135deg, var(--plaster-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem;
}
.inquiry #tripleseat_embed_form select option { background: var(--ink-lift); color: var(--plaster); }
.inquiry #tripleseat_embed_form textarea { min-height: 7.5rem; resize: vertical; }
.inquiry #tripleseat_embed_form input[type="text"]:focus,
.inquiry #tripleseat_embed_form textarea:focus,
.inquiry #tripleseat_embed_form select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
/* their sheet pins three fields to pixel widths */
.inquiry #tripleseat_embed_form #lead_guest_count,
.inquiry #tripleseat_embed_form #lead_phone_number,
.inquiry #tripleseat_embed_form #dp_lead_event_date { width: 100%; }
.inquiry #tripleseat_embed_form #lead_phone_number_extension { width: 100%; max-width: 9rem; }
.inquiry #tripleseat_embed_form .referral_source_other { margin-top: .8rem; }
.inquiry #tripleseat_embed_form input.error,
.inquiry #tripleseat_embed_form .errorExplanation {
  background: rgba(224,113,78,.12); border: 1px solid var(--ember); color: var(--plaster);
}
.inquiry #tripleseat_embed_form .errorExplanation { width: auto; padding: .9rem 1rem; margin-bottom: 1.2rem; font-size: 14px; }
.inquiry #tripleseat_embed_form .help-block.danger { color: var(--ember); font-size: 13px; }
.inquiry #tripleseat_embed_form #lead_submit {
  display: inline-block; cursor: pointer; background: var(--accent); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 0; padding: .95rem 1.9rem; margin-top: .4rem;
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease; -webkit-appearance: none; appearance: none;
}
.inquiry #tripleseat_embed_form #lead_submit:hover { background: transparent; color: var(--accent); }
.inquiry #tripleseat_embed_form #lead_form_submit a,
.inquiry #tripleseat_link {
  display: block; margin-top: 1.1rem; color: var(--plaster-dim); font-size: 11.5px; letter-spacing: .04em; text-decoration: none;
}
.inquiry .tsLeadSuccessMessage, .inquiry #tripleseat_embed_form + .tsLeadSuccessMessage {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--accent);
}
@media (max-width: 640px) {
  .inquiry #tripleseat_embed_form table, .inquiry #tripleseat_embed_form tbody,
  .inquiry #tripleseat_embed_form tr, .inquiry #tripleseat_embed_form td { display: block; width: 100%; }
  .inquiry #tripleseat_embed_form table td { padding-right: 0; }
}

/* ------------------------------------------------------------------ Studio's forms */
/* Table reservation and guest list (/studio-reservations, /studio-guestlist), rebuilt here
   2026-10-06 after studiomaisonnur.com was pointed at this site. Same field language as the
   Tripleseat form above, in Studio's pink. Posts to /api/studio. */
.form { max-width: 640px; margin-top: 2.2rem; }
.form fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; min-width: 0; }
.form legend { padding: 0; margin: 0 0 .5rem; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plaster-dim); }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form .grid { grid-template-columns: 1fr; } }
.form label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plaster-dim); margin-bottom: .45rem; }
.form label small { font-weight: 300; letter-spacing: .04em; text-transform: none; color: var(--plaster-dim); }
.form input {
  width: 100%; box-sizing: border-box; background: var(--ink-lift); color: var(--plaster);
  border: 1px solid rgba(237,231,218,.28); border-radius: 0; padding: .8rem .85rem;
  font-family: var(--display); font-size: 15px; font-weight: 300; line-height: 1.3; -webkit-appearance: none; appearance: none;
}
.form input::placeholder { color: rgba(237,231,218,.35); }
.form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.form input[aria-invalid="true"] { border-color: var(--ember); background: rgba(224,113,78,.1); }
.form input[type="date"] { color-scheme: dark; min-height: 3rem; }
.form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .4rem; }
.form button.go { cursor: pointer; font-family: var(--display); }
.form .note { margin: 0; font-size: 13.5px; color: var(--plaster-dim); max-width: none; }
.form .note.err { color: var(--ember); }
.form .done { display: none; }
.form.is-done fieldset, .form.is-done .actions { display: none; }
.form.is-done .done { display: block; }
.form .done .serif-lede { color: var(--accent); }

/* ------------------------------------------------------------------ tonight */
/* One band under the top bar on the home page: what's on tonight, or the next night, from
   the same LINEUP as the DJ section. Pink because it is Studio's programme; a house-only
   night still reads in the band's pink chrome with the room named in the text. */
.tonight {
  border-bottom: 1px solid rgba(214,122,189,.32);
  background: linear-gradient(90deg, rgba(214,122,189,.12), rgba(214,122,189,.02) 70%);
}
.tonight .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.6rem; padding: .85rem 0; }
.tonight .tag { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); white-space: nowrap; }
.tonight .ev {
  flex: 1 1 320px; margin: 0; max-width: none;
  font-variation-settings: "wdth" 125; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.15; letter-spacing: .01em; color: var(--plaster);
}
.tonight .ev .rm { color: var(--pink); font-size: .72em; letter-spacing: .14em; margin-right: .35em; }
.tonight .ev .sep { color: rgba(214,122,189,.6); font-weight: 300; margin: 0 .2em; }
.tonight .ev small {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .95em; color: rgba(237,231,218,.72); margin-left: .45em;
}
.tonight .acts { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.tonight .go { padding: .65rem 1.1rem; font-size: 11px; }
.tonight .more { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--plaster-dim); text-decoration: none; white-space: nowrap; }
.tonight .more:hover { color: var(--pink); }
.tonight[hidden] { display: none; }
@media (max-width: 720px) {
  /* Phones (Tim's screenshot, 2026-10-13): "EYE STUDIO FLIRTY 800 & DJ / THANK YOU" ran together
     as one wrapped sentence. The party gets its own line; room + names read underneath. */
  .tonight .ev .party { display: block; font-size: 2.1em; margin: 0 0 .12em; }
  .tonight .ev { line-height: 1.2; text-wrap: balance; }
  .tonight .wrap { gap: .5rem 1rem; padding: .8rem 0; }
  .tonight .acts { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ special events */
/* content/specials.json (Halloween, 2026-10-13): a pink menu link, a page of flyers with a
   ticket button per night, and a run-up line in the tonight band. */
.top nav .nav-special a { color: var(--pink); }
.top nav .nav-special a:hover, .top nav .nav-special a[aria-current] { color: var(--plaster); }
.special-night {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center; padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid rgba(214,122,189,.25);
}
.special-night:first-child { border-top: 0; padding-top: 0; }
.special-night .flyer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 1px rgba(237,231,218,.12); }
.special-night .what { margin-bottom: .6rem; }
.special-name {
  font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase;
  /* sized so a ten-letter word (MASQUERADE) fits the column whole; breaks fall between words */
  font-size: clamp(2rem, 3.9vw, 3.6rem); line-height: .9; letter-spacing: -.01em; margin: 0 0 1rem;
  color: var(--pink); text-shadow: 0 0 .35em rgba(214,122,189,.35); overflow-wrap: break-word; text-wrap: balance;
}
.special-when { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.65rem); margin: 0 0 1.2rem; }
.special-djs { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.special-djs li {
  font-variation-settings: "wdth" 125; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.35;
}
.special-djs .room { display: block; color: var(--pink); font-size: .55em; letter-spacing: .16em; line-height: 1.2; margin-top: .5rem; }
@media (max-width: 860px) {
  .special-night { grid-template-columns: 1fr; }
  .special-night .flyer { max-width: 30rem; }
}
.feature-note a { color: inherit; text-decoration-color: rgba(214,122,189,.6); text-underline-offset: .18em; }
.tonight .also {
  flex-basis: 100%; order: 3; display: block; padding-top: .55rem; border-top: 1px solid rgba(214,122,189,.22);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plaster); text-decoration: none;
}
.tonight .also .party-sm { color: var(--pink); font-weight: 800; margin-right: .5em; }
.tonight .also:hover { color: var(--pink); }