/* © 2026 House Left LLC. houseleft.com — one stylesheet for every page.
   Brenda's direction: near-black grounds, photographs under a dark TRANSPARENT overlay, WHITE type,
   no gold anywhere, no heavy bold (two weights only: 300 and 400; never bold in legal text).
   Fonts are self-hosted from /fonts (SIL Open Font License; the licences sit beside the files). */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/montserrat-latin-normal.woff2) format('woff2');
}

:root {
  color-scheme: dark;
  --ink: #0a0a0a;
  --tile: #111111;
  --paper: #f8f6f2;
  --white: #ffffff;
  --t1: rgba(255, 255, 255, .92);
  --t2: rgba(248, 246, 242, .66);
  --t3: rgba(248, 246, 242, .56);
  --hair: rgba(255, 255, 255, .12);
  --hair-2: rgba(255, 255, 255, .24);
  --display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --text: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --gutter: 16px;
  --max: 1240px;
  --measure: 42rem;
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--t1);
  font-family: var(--text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1024px) { body { font-size: 16px; } }
img { max-width: 100%; height: auto; }
:target { scroll-margin-top: 24px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; color: var(--white); margin: 0; line-height: 1.08; letter-spacing: -.005em; overflow-wrap: break-word; }
h1 { font-size: clamp(2.6rem, 8.6vw, 5.4rem); }
h2 { font-size: clamp(2.05rem, 5.4vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); line-height: 1.15; }
h4 { font-size: 1.35rem; line-height: 1.2; }
h1 em, h2 em, h3 em, .display em { font-style: italic; }
h1, h2, h3, .display { text-wrap: balance; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 400; color: var(--white); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(255, 255, 255, .45); }
a:hover { text-decoration-color: currentColor; color: var(--white); }
:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; font-size: 13px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* SMALL TYPE: eyebrows, labels, captions */
.eyebrow {
  display: block;
  font-family: var(--text); font-weight: 400; font-size: 10.5px; line-height: 1.5;
  letter-spacing: .32em; text-transform: uppercase; color: var(--t2);
  margin: 0 0 22px; max-width: none;
}
h2.eyebrow { font-family: var(--text); font-size: 10.5px; line-height: 1.5; letter-spacing: .32em; color: var(--t2); }
.label { font-weight: 400; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--t2); }
/* A lede opens a section in a line or two; the rest of the paragraph is body text. */
.lede { font-weight: 300; font-size: clamp(1rem, 2.4vw, 1.14rem); color: var(--white); max-width: 34rem; }
.display { font-family: var(--display); font-weight: 300; color: var(--white); font-size: clamp(2.05rem, 5.6vw, 3.6rem); line-height: 1.1; max-width: 32ch; }
/* The italic half of a headline starts its own line, so a sentence is never split across the two. */
.display em, h2 em { display: block; }
h1 + .sub, h2 + .sub { margin-top: .55em; }
.sub { font-family: var(--display); font-style: italic; font-weight: 300; color: var(--white); font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.3; }
.muted { color: var(--t2); }
.small { font-size: 13px; line-height: 1.7; color: var(--t2); }

/* BUTTONS: square corners; solid white for the first action, a hairline outline for the rest */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 14px 26px;
  font-family: var(--text); font-weight: 400; font-size: 10.5px; line-height: 1.3;
  letter-spacing: .24em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--white); background: transparent; border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: rgba(255, 255, 255, .08); border-color: var(--white); color: var(--white); }
.btn--solid { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--solid:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 10px; }
/* A label that wraps breaks evenly (no word alone on the second line); at 320px a little less
   tracking keeps the longest labels on one line. */
.btn { text-wrap: balance; }
@media (max-width: 359px) { .btn { letter-spacing: .16em; padding-left: 18px; padding-right: 18px; } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; max-width: none; }
@media (max-width: 599px) { .actions:has(.btn ~ .btn) .btn { flex: 1 1 100%; } }
.quiet-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 28px 0 0; max-width: none; }
.quiet-links a, a.more {
  font-weight: 400; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--t1); border-bottom: 1px solid var(--hair-2); padding-bottom: 3px;
}
.quiet-links a:hover, a.more:hover { color: var(--white); border-bottom-color: var(--white); }

/* HEADER: transparent over the first section, as on the live site (not fixed). It has no band of
   its own: the screen on each photograph fades in under it (.hero::before, .stage::before). */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 40; padding-bottom: 24px; background: none; }
.header-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.brand { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1; color: var(--white); text-decoration: none; white-space: nowrap; letter-spacing: .01em; }
.brand em { font-style: italic; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.nav a {
  display: inline-block; padding: 10px 0;
  font-weight: 400; font-size: 10.5px; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--t1); border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); border-bottom-color: currentColor; }
.nav-toggle { display: none; }

/* Phone, tablet and small laptop with scripts on: a Menu button opens the navigation as a panel
   (site.js uses the same 1240px). Without scripts the links simply wrap under the name. */
@media (max-width: 1239px) {
  .js .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 16px;
    background: none; border: 0; color: var(--white); cursor: pointer;
    font-family: var(--text); font-weight: 400; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  }
  .js .nav { display: none; }
  .js .site-header.is-open { position: fixed; inset: 0; background: var(--ink); overflow-y: auto; }
  html.menu-open { overflow: hidden; }
  .js .site-header.is-open .header-in { align-content: flex-start; }
  .js .site-header.is-open .nav { display: block; width: 100%; padding: 8px 0 28px; }
  .js .site-header.is-open .nav ul { flex-direction: column; gap: 0; }
  .js .site-header.is-open .nav a {
    font-family: var(--display); font-size: 1.85rem; letter-spacing: 0; text-transform: none;
    padding: 10px 0; border-bottom: 0; color: var(--t1);
  }
  .js .site-header.is-open .nav a[aria-current="page"] { color: var(--white); font-style: italic; }
  html:not(.js) .nav { width: 100%; }
  html:not(.js) .nav ul { gap: 0 16px; }
}

/* HERO: full-bleed photograph, dark transparent screen, white type at the bottom left.
   Until tools/fetch-images.sh has run, the frame shows its own dark tone instead. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(92svh, 940px);
  padding: 152px 0 clamp(48px, 8vw, 104px);
  background: radial-gradient(120% 90% at 75% 10%, #1d1d1d 0%, #121212 45%, var(--ink) 100%);
}
.hero--text { min-height: 0; padding-top: clamp(168px, 22vw, 240px); background: radial-gradient(90% 120% at 85% 0%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%), var(--ink); }
.hero-media { position: absolute; inset: 0; z-index: -2; background: inherit; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.hero:not(.hero--text)::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, .72) 0, rgba(10, 10, 10, .38) 90px, rgba(10, 10, 10, 0) 240px),
    linear-gradient(to top, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, .9) 8%, rgba(10, 10, 10, .72) 26%, rgba(10, 10, 10, .38) 52%, rgba(10, 10, 10, .2) 78%, rgba(10, 10, 10, .42) 100%),
    linear-gradient(to right, rgba(10, 10, 10, .5), rgba(10, 10, 10, 0) 55%);
}
.hero-inner { position: relative; }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.hero h1 em { display: block; }
.hero--home h1 { max-width: none; font-size: clamp(2.3rem, 8.6vw, 5.4rem); }
.hero .eyebrow, .stage .eyebrow { color: var(--t1); }
.hero .lede { margin-top: 22px; }
.hero .sub { margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-inner { animation: rise 1.1s ease .1s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Per-page framing of the hero photographs (from Squarespace's focal points, then checked on a
   1440 and a 390 screen with the pictures in place, 2026-10-08). */
.hero--designers .hero-media img { object-position: 41% 44%; }
.hero--pageantia .hero-media img { object-position: 52% 100%; }
.hero--ts .hero-media img { object-position: 50% 20%; }
@media (min-width: 900px) {
  .hero--designers .hero-media img { object-position: 41% 12%; }
  .hero--producers .hero-media img { object-position: 50% 65%; }
}
/* Phones: keep the text off the bright parts (The Tower's giant letters, the crown's sparkle); the
   home photograph shows the gown and the spotlights. */
@media (max-width: 599px) {
  .hero--ts .hero-media img { object-position: 100% 50%; }
  .hero--pageantia .hero-media img { object-position: 70% 100%; }
  .hero--home .hero-media img { object-position: 20% 50%; }
  .hero-media--contact img { object-position: 72% 50%; }
}
/* Times Square on tablets and small laptops: the photograph's left edge (not The Tower's letters)
   under the type. Its screen is the page's own (THE PAGES → TIMES SQUARE, .ts-hero). */
@media (min-width: 600px) and (max-width: 1279px) { .hero--ts .hero-media img { object-position: 0% 20%; } }
/* PAGEANTÍA: darker on the left where the type sits, and never below .35 anywhere, so the photograph
   always sits under a screen (the menu crosses its top right). */
.hero.hero--pageantia::before {
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, .5) 0, rgba(10, 10, 10, 0) 240px),
    linear-gradient(to right, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .7) 35%, rgba(10, 10, 10, .42) 70%, rgba(10, 10, 10, .35) 100%),
    linear-gradient(to top, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, 0) 45%);
}

/* SECTIONS */
.section { padding: clamp(72px, 11vw, 136px) 0; border-top: 1px solid var(--hair); }
.section--band { background: var(--tile); }
.section--flush { border-top: 0; }
/* A closing band: a display line, the button and the contact lines, no taller than they need. */
.section--close { padding: clamp(56px, 8vw, 96px) 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); max-width: 52rem; }
.section-head h2 + p, .section-head h2 + .lede { margin-top: 22px; }
.stack > * + * { margin-top: 1.1em; }
.split { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 0; }
  .split > * + * { border-left: 1px solid var(--hair); padding-left: clamp(40px, 5vw, 72px); }
  .split > :first-child { padding-right: clamp(40px, 5vw, 72px); }
}

/* LISTS */
.lines { list-style: none; border-top: 1px solid var(--hair); max-width: 52rem; }
.lines > li { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.lines > li > p { margin: 0; }
.dash { list-style: none; }
.dash > li { position: relative; padding-left: 26px; margin: 0 0 10px; max-width: var(--measure); }
.dash > li::before { content: ''; position: absolute; left: 0; top: .95em; width: 14px; height: 1px; background: var(--t3); }
.steps { list-style: none; counter-reset: step; border-top: 1px solid var(--hair); max-width: 52rem; }
.steps > li { counter-increment: step; position: relative; padding: 22px 0 22px 64px; border-bottom: 1px solid var(--hair); }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--display); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--t3); }
.names { list-style: none; columns: 2; column-gap: 28px; }
@media (min-width: 760px) { .names { columns: 3; } }
@media (min-width: 1100px) { .names { columns: 4; } }
.names li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--hair); font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--white); }
.nw { white-space: nowrap; }
.inline-dots { font-family: var(--display); font-weight: 300; font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.6; color: var(--white); max-width: 60rem; }

/* TILES: hairline columns on the ground (no filled boxes) */
.tiles { display: grid; gap: 56px clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles--2, .tiles--3, .tiles--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .tiles--5 { grid-template-columns: repeat(2, 1fr); } .tiles--5 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .tiles--5 { grid-template-columns: repeat(6, 1fr); }
  .tiles--5 > :nth-child(-n+3) { grid-column: span 2; }
  .tiles--5 > :nth-child(n+4) { grid-column: span 3; }
}
.tile { position: relative; padding: 28px 0 0; border-top: 1px solid var(--hair-2); display: flex; flex-direction: column; }
.tile h3 { margin-bottom: 10px; }
.tile .sub { font-size: 1.2rem; font-weight: 400; margin: 0 0 16px; }
.tile .num { display: block; margin: 0 0 18px; font-family: var(--text); font-weight: 400; font-size: 10.5px; line-height: 1.5; letter-spacing: .32em; color: var(--t3); }
.tile .label { margin: 0 0 14px; }
.tile .actions { margin-top: auto; padding-top: 26px; }
.tile p:not(.label):not(.sub):not(.actions) { font-size: 14.5px; }
/* A heading that wraps must not push its row's copy out of line (the services sit 3 over 2): the
   tiles of a row share their row lines (subgrid: index, name, sub-line, text), with no fixed height
   that would leave a gap under a heading that fits on one line. */
@media (min-width: 1024px) {
  .tiles--5 { row-gap: 0; }
  .tiles--5 > .tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding-bottom: 56px; }
  .tiles--5 > .tile:nth-child(n+4) { padding-bottom: 0; }
}

/* HOME: the studio's facts as one quiet line under the hero (no KPI boxes) */
.proof-line { display: block; max-width: none; margin: 0 0 22px; padding-top: clamp(40px, 6vw, 64px); line-height: 1.9; color: var(--t1); }
@media (max-width: 420px) { .proof-line .nw:first-child { white-space: normal; } }

/* IMAGES IN FRAMES */
.frame { display: block; position: relative; overflow: hidden; margin: 0; background: radial-gradient(120% 100% at 70% 20%, #1c1c1c 0%, #121212 60%, #0e0e0e 100%); }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--cover { aspect-ratio: 17 / 22; }
img.is-missing { opacity: 0; }
.frame.img-missing { display: none; }
.frame-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--display); font-weight: 300; font-style: italic; font-size: 1.25rem; color: var(--t2); }

/* VIDEO SLOTS: a dark 16:9 frame; site.js puts the poster and Play button in it when the slot has a
   video (data-video, this site's own file; or data-youtube), and the player once Play is pressed.
   The player fills the frame exactly as the button did, so nothing moves. */
.video { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(120% 100% at 50% 30%, #1b1b1b 0%, #101010 70%); border: 1px solid var(--hair); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* This site's own video: the whole picture, on black where it is not 16:9. */
.video-frame video { display: block; background: #000; object-fit: contain; }
.video-frame video:focus-visible { outline-offset: -6px; }
/* The poster and Play button stand in for the player until it is pressed (site.js). */
.video-poster { all: unset; position: absolute; inset: 0; display: block; cursor: pointer; }
.video-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .6), rgba(10, 10, 10, .15)); transition: opacity .3s ease; }
.video-poster:hover::after { opacity: .75; }
/* The mark sits on a dark tag of its own, so it reads over a poster's own white lettering (the IHFW
   and Kat Couture boards); the left padding takes the tracking after the last letter into account. */
.video-play {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font: 400 10.5px/1 var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--white);
  background: rgba(10, 10, 10, .72); border-bottom: 1px solid rgba(255, 255, 255, .6); padding: 7px 10px 5px calc(10px + .24em);
}
.video-poster:hover .video-play { border-bottom-color: var(--white); }
.video-poster.no-poster .video-play {
  left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; padding: 0 0 0 .24em;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; font-size: 11px;
}
.video-poster.no-poster:hover .video-play { border-color: var(--white); }
.video-poster:focus-visible { outline: 1px solid var(--white); outline-offset: -6px; }
.video figcaption, .cover figcaption, .media-caption { margin-top: 12px; font-size: 13px; line-height: 1.65; color: var(--t2); max-width: 38rem; }
.grid-media { display: grid; gap: 40px 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-media { grid-template-columns: repeat(2, 1fr); } }
/* The Work while a section has no video: no empty frames, the captions read as a list (site.js). */
.grid-media.is-list { display: block; max-width: 52rem; border-top: 1px solid var(--hair); }
.grid-media.is-list > .video { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.grid-media.is-list .video-frame { display: none; }
.grid-media.is-list figcaption { margin: 0; font-size: 14.5px; color: var(--t1); }
.covers { display: grid; gap: 32px 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .covers--4 { grid-template-columns: repeat(4, 1fr); } }
/* Home: the covers row sits under the videos once they are in. */
.grid-media:has(> :not([hidden])) + .covers { margin-top: clamp(40px, 6vw, 64px); }
.cover { margin: 0; }
.cover a { display: block; text-decoration: none; }
.cover figcaption a { display: inline; text-decoration: underline; }
.cover a .frame { transition: transform .4s ease; }
.cover a:hover .frame { transform: translateY(-4px); }
.cover-title { display: block; margin-top: 14px; font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; color: var(--white); }
.cover-meta { display: block; font-size: 12.5px; color: var(--t2); line-height: 1.6; }


/* FROSTED TILES over a photograph (the Contact doors) */
.stage { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 75% 10%, #1d1d1d 0%, #121212 45%, var(--ink) 100%); }
.stage > .hero-media { position: absolute; inset: 0; z-index: -2; }
.stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 10, 10, .72) 0, rgba(10, 10, 10, .38) 90px, rgba(10, 10, 10, 0) 240px), linear-gradient(to bottom, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, .68) 40%, rgba(10, 10, 10, .9) 100%); }
.stage .hero { background: none; min-height: 0; padding-bottom: clamp(40px, 6vw, 72px); }
.stage .hero::before { content: none; }
.doors-wrap { padding-bottom: clamp(64px, 9vw, 112px); }
.doors { display: grid; gap: 2px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 560px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .doors { grid-template-columns: repeat(4, 1fr); } }
.door {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 24px 28px; background: rgba(10, 10, 10, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--hair-2); transition: background-color .3s ease;
}
.door:hover { background: rgba(10, 10, 10, .66); }
.door .sub { font-size: 1.25rem; font-weight: 400; margin: 6px 0 14px; }
.door p { font-size: 14.5px; }
.door-foot { margin-top: auto; padding-top: 22px; }
.door-foot .actions { margin: 0; }
.door-foot .small { margin: 0 0 14px; }

/* CARDS (platforms, Explore): hairline columns like the tiles */
.cards { display: grid; gap: 56px clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { padding: 28px 0 0; border-top: 1px solid var(--hair-2); display: flex; flex-direction: column; }
.card h3 { margin-bottom: 14px; letter-spacing: .02em; }
.card .actions { margin-top: auto; padding-top: 24px; }

/* SPECS: a label and its value, two columns (the Times Square board cards: Location, Format). The
   cards themselves are under SIMPLE LAYOUT (TIMES SQUARE BOARDS, compact). */
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); font-size: 14px; }
.specs dt { font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--t2); padding-top: 3px; }
.specs dd { margin: 0; }
/* Three board pictures sit high in their photographs: keep the top of the screen in the frame. */
#the-statement .frame img { object-position: 60% 0; }
#the-overlook .frame img, #the-corridor .frame img { object-position: 50% 0; }
/* HOW WE WORK (For Producers): three engagement shapes. On a phone each is its own block; from
   900px they sit side by side and their rows line up (subgrid). */
.terms { display: grid; grid-template-columns: 1fr; gap: 44px; }
.term h3 { padding-bottom: 10px; border-bottom: 1px solid var(--hair-2); }
.term dl { margin: 0; }
.term dl > div { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.term dt { font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--t2); margin-bottom: 4px; }
.term dd { margin: 0; font-size: 14.5px; }
@media (min-width: 900px) {
  .terms { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); gap: 0; }
  .term { display: grid; grid-row: span 6; grid-template-rows: subgrid; padding: 0 clamp(20px, 2.6vw, 36px); border-left: 1px solid var(--hair); }
  .term:first-child { padding-left: 0; border-left: 0; }
  .term:last-child { padding-right: 0; }
  .term dl { display: grid; grid-row: 2 / span 5; grid-template-rows: subgrid; }
}
.terms-notes { margin-top: clamp(44px, 6vw, 64px); }

/* FORMS (Netlify Forms) */
.form { display: grid; gap: 22px; max-width: 46rem; margin-top: 8px; }
.row-2 { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 600px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.field { min-width: 0; }
.field > label, .field > legend, fieldset.field legend {
  display: block; margin-bottom: 8px; padding: 0;
  font-weight: 400; font-size: 10.5px; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--t2);
}
.req { margin-left: .6em; letter-spacing: .14em; color: var(--t3); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"],
.form input[type="date"], .form select, .form textarea {
  display: block; width: 100%; margin: 0;
  font-family: var(--text); font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--white);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--hair-2); border-radius: 0;
  padding: 13px 14px; -webkit-appearance: none; appearance: none;
}
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"],
.form input[type="date"], .form select { height: 54px; }
.form textarea { min-height: 150px; resize: vertical; }
.form select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .7) 50%), linear-gradient(135deg, rgba(255, 255, 255, .7) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form select option { background: var(--tile); color: var(--white); }
/* An empty required field must not look filled in: its prompt is grey until something is chosen. */
.form select:invalid, .form input[type="date"]:invalid { color: var(--t3); }
.form input[type="date"]:invalid::-webkit-datetime-edit { color: var(--t3); }
.form ::placeholder { color: var(--t3); opacity: 1; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--white); background-color: rgba(255, 255, 255, .06); }
.form input[type="file"] { display: block; width: 100%; max-width: 100%; font-family: var(--text); font-size: 14px; color: var(--t2); }
.form input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 11px 16px; cursor: pointer;
  font-family: var(--text); font-weight: 400; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--white); background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 0;
}
.hint { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--t3); }
/* A note that belongs to a pair of fields sits under the pair, full width. */
.form > .hint { margin-top: -12px; }
.choice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; max-width: none; }
.choice input {
  flex: none; width: 18px; height: 18px; margin: 5px 0 0; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--hair-2); border-radius: 0; background: transparent; display: grid; place-content: center; cursor: pointer;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { border-color: var(--white); }
.choice input:checked::before { content: ''; width: 8px; height: 8px; background: var(--white); border-radius: inherit; }
.choice input:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.choice label { font-size: 15px; color: var(--t1); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin: 6px 0 0; }
.form-note { margin-top: 22px; font-size: 13px; color: var(--t2); }

/* LEGAL PAGES: light type only, never bold */
.legal-main { padding-top: clamp(140px, 18vw, 200px); padding-bottom: clamp(72px, 10vw, 128px); }
.legal { max-width: 46rem; }
.legal, .legal * { font-weight: 300 !important; }
.legal .masthead { margin-bottom: 14px; }
.legal h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); margin: 0 0 18px; }
.legal .effective { color: var(--t2); font-size: 13px; letter-spacing: .06em; }
.legal .sec { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hair); }
.legal .sec-no { margin: 0 0 8px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--t3); }
.legal h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 0 0 18px; }
.legal p, .legal li { color: var(--t1); }
.legal ul { list-style: none; margin: 0 0 1.1em; }
.legal ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.legal ul li::before { content: ''; position: absolute; left: 0; top: .95em; width: 14px; height: 1px; background: var(--t3); }
.legal blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--hair-2); }
.legal blockquote p:first-child { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--t2); margin-bottom: 8px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.legal-nav a { text-decoration: none; color: var(--t2); border-bottom: 1px solid var(--hair-2); padding-bottom: 3px; }
.legal-nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }

/* SIMPLE PAGES (404, thank you) */
.simple { min-height: 72svh; display: flex; align-items: center; padding: 160px 0 96px; }
.simple h1 { margin-bottom: 22px; }

/* CONTACT LINES */
.contact-lines { list-style: none; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; }
.contact-lines span[aria-hidden] { display: none; }

/* FOOTER (2026-10-09): the name and its line, the email and the two socials; then the © and
   trademark lines, the legal pages and Back to top. The menu at the top carries the pages. */
.site-footer { border-top: 1px solid var(--hair); padding: clamp(48px, 6vw, 72px) 0 36px; font-size: 14px; }
.foot-row { display: grid; gap: 22px 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .foot-row { grid-template-columns: 1fr auto; align-items: end; } }
.foot-mark { font-family: var(--display); font-weight: 300; font-size: 1.9rem; line-height: 1.1; color: var(--white); margin: 0 0 10px; }
.foot-tag { font-weight: 400; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--t2); margin: 0; }
.foot-links, .foot-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot-links a, .foot-nav a { text-decoration: none; color: var(--t1); overflow-wrap: anywhere; }
.foot-links a:hover, .foot-nav a:hover { color: var(--white); text-decoration: underline; }
.foot-legal { display: grid; gap: 14px 40px; grid-template-columns: 1fr; margin-top: clamp(32px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--hair); color: var(--t3); font-size: 12.5px; line-height: 1.7; }
@media (min-width: 900px) { .foot-legal { grid-template-columns: 1fr auto; } .foot-nav { justify-self: end; } }
.foot-legal p { margin: 0 0 4px; max-width: none; }
.foot-nav a { color: var(--t2); }
.foot-legal .foot-top { grid-column: 1 / -1; margin: 4px 0 0; }
.foot-top a { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--t2); border-bottom: 1px solid var(--hair-2); padding-bottom: 3px; }
.foot-top a:hover { color: var(--white); border-bottom-color: var(--white); }


/* Cormorant's default figures are old-style ("10" reads as "IO"); display type uses lining figures. */
h1, h2, h3, h4, .display, .sub, .tile .num, .steps > li::before,
.credit-name, .names li, .inline-dots, .cover-title, .foot-mark { font-variant-numeric: lining-nums; }
.lines a.more { display: block; width: fit-content; margin-top: 10px; }

/* SMALL HELPERS used across pages */
.spaced { margin-top: 24px; }
.block-h { margin: 56px 0 22px; }
.section-head + .block-h, .block-h:first-child { margin-top: 0; }
.subsection { margin-top: clamp(48px, 7vw, 80px); }
.subsection > h3 { margin-bottom: 14px; }
.else-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; color: var(--t2); max-width: none; }
.credits > li { padding: 20px 0; }
.credit-name { font-family: var(--display); font-weight: 300; font-size: 1.5rem; line-height: 1.2; color: var(--white); }
.credit-role { font-size: 14px; color: var(--t1); }
.credit-detail { font-size: 13px; color: var(--t2); }
.cards--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
.card--link { text-decoration: none; color: var(--t1); transition: background-color .3s ease; }
.card--link:hover { color: var(--t1); }
.card--link:hover h3 { font-style: italic; }
.card--link h3::after { content: ' \2192'; font-family: var(--text); font-size: .8em; color: var(--t3); }
/* A long split keeps its heading in view beside the long column (an editorial pattern). */
@media (min-width: 900px) and (min-height: 640px) {
  .split > :first-child { position: sticky; top: 40px; align-self: start; }
}

/* Phones: the small tracked capitals that carry the wayfinding (menu, eyebrows, labels, buttons)
   are set a little larger, so they stay readable at arm's length. */
@media (max-width: 599px) {
  .eyebrow, h2.eyebrow, .label, .quiet-links a, a.more, .js .nav-toggle, .btn, .foot-top a,
  .legal .sec-no, .legal-nav, .field > label, .field > legend, fieldset.field legend { font-size: 11.5px; }
  .btn--sm { font-size: 11px; }
}

@media print {
  .site-header, .site-footer, .video-frame, .hero-media { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .display, strong { color: #000; }
}


/* =================================================================================================
   SIMPLE LAYOUT (2026-10-09)
   Brenda: "i need people to get it at a glance and not have to scroll so much." Every page opens
   with a GLANCE row; longer detail waits in a MORE disclosure (<details class="more">) that opens
   on a tap, or when the address names it or anything inside it (site.js). The markup each page
   uses is written out above each part. Built only from the tokens and patterns above.
   ================================================================================================= */

/* A shorter hero, so the glance row is in the first screen. */
.hero--short { min-height: min(60svh, 600px); padding-top: clamp(128px, 15vw, 168px); padding-bottom: clamp(40px, 6vw, 72px); }
/* A section with less air above and below (the long pages' bands keep .section). */
.section--tight { padding: clamp(48px, 7vw, 88px) 0; }

/* GLANCE: one short line on what the page is, three to five items of one line each, one button.
     <section class="section section--tight glance" id="…" aria-labelledby="…-h">
       <div class="wrap">
         <h2 class="glance-line" id="…-h">One short line on what the page is.</h2>
         <ul class="glance-list">
           <li><span class="glance-name">A name</span> <span class="glance-text">A few words.</span></li>
           …
         </ul>
         <p class="actions"><a class="btn btn--solid" href="…">One button</a></p>
       </div>
     </section>
   An item may be one link: <li><a href="…"><span class="glance-name">…</span> <span class="glance-text">…</span></a></li>
   (the name takes an arrow). Columns from 900px whatever the count; .glance-list--rows keeps rows. */
.glance-line {
  font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2;
  color: var(--white); max-width: 34ch; margin: 0 0 clamp(26px, 3.6vw, 40px); text-wrap: balance;
}
.glance-line em { display: inline; }
.glance-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hair-2); max-width: none; }
.glance-list > li { position: relative; padding: 15px 0 16px; border-bottom: 1px solid var(--hair); }
.glance-list > li > a { display: block; text-decoration: none; color: inherit; }
.glance-name { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--white); font-variant-numeric: lining-nums; }
.glance-text { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--t2); }
.glance-list a .glance-name::after, .door-name::after {
  content: '\2192'; content: '\2192' / ''; display: inline-block; margin-left: .45em; vertical-align: .14em;
  font-family: var(--text); font-weight: 300; font-size: .62em; line-height: 1; color: var(--t2);
}
.glance-list a:hover .glance-name { font-style: italic; }
.glance-list a:hover .glance-text { color: var(--t1); }
/* Tablets: the name and its words side by side. */
@media (min-width: 560px) and (max-width: 899px) {
  .glance-list > li, .glance-list > li > a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
  .glance-list > li > a { grid-column: 1 / -1; }
  .glance-text { margin-top: 0; }
}
@media (min-width: 900px) {
  .glance-list:not(.glance-list--rows) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--hair); }
  .glance-list:not(.glance-list--rows) > li { padding: 22px clamp(18px, 2vw, 30px) 24px; border-bottom: 0; border-left: 1px solid var(--hair); }
  .glance-list:not(.glance-list--rows) > li:first-child { padding-left: 0; border-left: 0; }
  .glance-list:not(.glance-list--rows) > li:last-child { padding-right: 0; }
  .glance-list--rows > li, .glance-list--rows > li > a { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 4px 28px; align-items: baseline; }
  .glance-list--rows > li > a { grid-column: 1 / -1; }
  .glance-list--rows .glance-text { margin-top: 0; }
}
.glance .actions, .glance-list + .actions { margin-top: clamp(26px, 3.6vw, 36px); }

/* MORE: the longer detail, opened on a tap. The summary says what it opens.
     <details class="more" id="…">
       <summary>What each service includes</summary>
       <div class="more-body"> … </div>
     </details>
   A real button for keyboards and screen readers (the browser's own <details>); the mark is drawn,
   not a character, so nothing extra is read out. Find-in-page opens it in Chrome; print shows it open. */
details.more { display: block; margin-top: clamp(26px, 3.6vw, 36px); }
.more > summary {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; min-height: 44px;
  list-style: none; cursor: pointer;
  font-family: var(--text); font-weight: 400; font-size: 10.5px; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase;
  color: var(--t1);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: var(--hair-2);
  transition: color .25s ease, text-decoration-color .25s ease;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ''; }
.more > summary::after, .board-name::after {
  content: ''; flex: none; width: 11px; height: 11px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: background-size .25s ease;
}
.more[open] > summary::after, .board-card[open] .board-name::after { background-size: 100% 1px, 1px 0; }
.more > summary:hover { color: var(--white); text-decoration-color: var(--white); }
.more-body { padding-top: clamp(22px, 3.2vw, 36px); }
.more-body > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .more[open] > .more-body, .board-card[open] > .board-body { animation: rise .5s ease both; }
}
@media (max-width: 599px) { .more > summary { font-size: 11.5px; } }

/* DOORS on Home: three frosted doors at the foot of the photograph; each door is one link.
     <ul class="doors doors--3">
       <li class="door"><h2 class="door-name"><a class="door-link" href="…">For Producers</a></h2>
         <p class="sub">One line.</p></li> …
     </ul> */
/* Home's photograph is a little shorter than a screen, so the next row shows under the doors. */
.hero--home:has(.doors--3) { min-height: min(84svh, 860px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero--home .lede { text-wrap: balance; }
.doors--3 { list-style: none; margin-top: clamp(32px, 4.4vw, 52px); }
@media (min-width: 760px) { .doors--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two across (560 to 759px): the third door takes the whole row, so no cell is left empty. */
@media (min-width: 560px) and (max-width: 759px) { .doors--3 > .door:last-child { grid-column: 1 / -1; } }
.doors--3 .door { padding: 24px 22px 24px; }
@media (min-width: 1024px) { .doors--3 .door { padding: 30px 28px 30px; } }
.door-name { font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.15; }
.door-link { color: var(--white); text-decoration: none; }
.door-link::after { content: ''; position: absolute; inset: 0; }
.door:hover .door-name { font-style: italic; }
.doors--3 .door .sub { margin: 8px 0 0; font-size: 1.15rem; color: var(--t1); text-wrap: balance; }
@supports selector(:has(*)) {
  .door-link:focus-visible { outline: none; }
  .door:has(.door-link:focus-visible) { outline: 1px solid var(--white); outline-offset: 2px; }
}

/* STRIP of the work (Home): the heading and a line beside four small covers, one row.
     <div class="strip"><div> heading, line, link </div><div class="covers covers--strip"> … </div></div>
   The covers' titles show from 600px; on a phone the four covers are the row (each keeps its alt). */
.strip { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .strip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: center; } }
.strip h2 { font-size: clamp(2.05rem, 4.2vw, 3rem); }
.strip h2 + .lede { margin-top: 16px; }
.covers--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.covers--strip .cover-title { margin-top: 10px; font-size: 1.02rem; line-height: 1.25; }
@media (max-width: 599px) {
  .covers--strip { gap: 10px; }
  .covers--strip .cover-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Home's three video slots stay out of the page until site.js gives them a video; then they sit
   side by side, above the covers. On a phone three across would be too small to watch (frames about
   110px wide at 390): the first takes the row and the other two pair under it. */
.strip .video:has(> .video-frame[data-empty="hide"]:not(.has-video)) { display: none; }
.strip .grid-media { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 599px) {
  .strip .grid-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .strip .grid-media > .video:first-child { grid-column: 1 / -1; }
}
.strip .grid-media:has(> :not([hidden])) + .covers { margin-top: 0; }
.strip .grid-media:has(.has-video) + .covers { margin-top: 24px; }

/* TWO SIDES (Home's studio and platforms; any page): a short block beside a list, stacked on phones. */
.duo { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } }
.duo .glance-line { margin-bottom: 0; }
@media (min-width: 900px) { .duo--center { align-items: center; } }
.duo > :last-child > .actions:first-child { margin-top: 0; }

/* SHORT LISTS (credits and the like): a name and its detail on one line, hairline-separated;
   .lines--cols sets them in two columns from 900px.
     <ul class="lines lines--tight"><li><span class="credit-name">…</span> <span class="credit-detail">…</span></li></ul> */
.lines--tight > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 11px 0; }
.lines--tight .credit-name { font-size: 1.22rem; }
.lines--tight .credit-role, .lines--tight .credit-detail { margin: 0; }
.lines--cols { max-width: none; }
@media (min-width: 900px) { .lines--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 56px); } }

/* TIMES SQUARE BOARDS, compact: the picture, the name and the street on one card; a tap opens the
   card's details below it (below 760px the cards are rows, the picture beside the name).
     <div class="board-grid">
       <details class="board-card" id="the-statement">
         <summary>
           <span class="frame frame--wide"><img src="/assets/img/board-the-statement.webp" alt="…" loading="lazy"></span>
           <span class="board-name">The Statement</span>
           <span class="board-street">1619 Broadway</span>
         </summary>
         <div class="board-body">
           <p>…</p>
           <p class="ideal"><span class="label">Ideal for:</span> …</p>
           <dl class="specs"><dt>Location</dt><dd>…</dd><dt>Format</dt><dd>…</dd></dl>
           <p class="actions"><a class="btn btn--sm" href="…" target="_blank" rel="noopener">Open in Maps</a></p>
         </div>
       </details>
       …
     </div> */
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; align-items: start; }
@media (min-width: 760px) { .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1100px) { .board-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.board-card > summary { display: block; list-style: none; cursor: pointer; }
.board-card > summary::-webkit-details-marker { display: none; }
.board-card > summary::marker { content: ''; }
.board-card > summary:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.board-card .frame img { transition: opacity .3s ease; }
.board-card > summary:hover .frame img { opacity: .82; }
.board-name {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.2; color: var(--white);
}
.board-name::after { color: var(--t2); }
.board-card > summary:hover .board-name { font-style: italic; }
.board-card > summary:hover .board-name::after { color: var(--white); }
.board-street { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--t2); }
.board-body { padding-top: 16px; font-size: 14px; }
.board-body p:not(.ideal):not(.actions) { font-size: 14px; }
.board-body .ideal { color: var(--t2); font-size: 13.5px; }
.board-body .ideal .label { margin-right: .4em; }
.board-body .actions { margin-top: 16px; }
/* Below 760px the boards are a list of rows (a small picture beside the name and the street), so an
   open card grows in place and leaves no empty cell beside the one before it. */
@media (max-width: 759px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair); }
  .board-card { border-bottom: 1px solid var(--hair); padding: 12px 0; }
  .board-card > summary { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
  .board-card > summary .frame { grid-row: 1 / span 2; }
  .board-card .board-name { margin-top: 0; align-self: end; }
  .board-card .board-street { align-self: start; }
  .board-card > .board-body { padding-bottom: 8px; }
  .board-grid > .ts-past { padding-top: 14px; border-top: 0; }
}

/* PRINT: every disclosure prints open, without its mark (site.js also opens them for the print). */
@media print {
  details.more::details-content, .board-card::details-content { content-visibility: visible; }
  .more > summary::after, .board-name::after { display: none; }
  .door-name::after, .glance-list a .glance-name::after { content: none; }
}


/* =================================================================================================
   THE PAGES (2026-10-09): what each page adds to the SIMPLE LAYOUT above, one section per page, in
   the menu's order. Each rule is scoped to its page's own classes (or its page's hero), so nothing
   here reaches another page. The shared components are reused, not restyled.
   ================================================================================================= */

/* FOR PRODUCERS: three glance rows — the five services (what each includes waits in a MORE
   disclosure, with After the runway), House Left's own platforms (ARRIVÉE, MODACALL, PAGEANTÍA, each
   with its own link, always visible), and how we work (the three structures; rates and terms wait in
   a MORE disclosure); then the close.
     <section class="section section--tight section--flush glance fp-glance" id="services" …> … </section>
     <section class="section section--tight section--band" id="platforms" …>
       <h2 class="eyebrow">Platforms by House Left</h2>
       <ul class="glance-list fp-brands"><li><span class="glance-name">ARRIVÉE</span> <span class="glance-text">…</span>
         <span class="fp-go"><a class="more" href="…">Visit ARRIVÉE</a></span></li> …</ul>
     </section> */

/* Less air above the first glance line: the hero's own foot already fades to black above it. */
.fp-glance.section--tight { padding-top: clamp(40px, 4.4vw, 64px); }

/* The platforms: the names set like a masthead, larger (House Left's own brands carry this row);
   each item ends in its own quiet link. */
.fp-brands .glance-name { letter-spacing: .04em; font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15; }
.fp-go { display: block; margin-top: 14px; }
@media (min-width: 560px) and (max-width: 899px) { .fp-brands > li > .fp-go { grid-column: 2; margin-top: 8px; } }
/* From 900px the three links sit on one line, whatever the length of each line above them. */
@media (min-width: 900px) {
  .fp-brands > li { display: flex; flex-direction: column; }
  .fp-brands .fp-go { margin-top: auto; padding-top: 14px; }
}

/* Inside "What each service includes": After the runway closes the five services. */
.fp-after { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--hair-2); }
.fp-after h3 + .sub { margin: .45em 0 0; font-size: clamp(1.2rem, 2.4vw, 1.45rem); }
@media (min-width: 900px) { .fp-after > :first-child { position: static; } }

/* Inside "Rates and terms": the line above the three structures. */
.fp-terms-lede { margin-bottom: clamp(28px, 4vw, 44px); color: var(--t1); }

/* The hero's line on one row from a laptop up; balanced on a phone. */
.hero--producers .lede { max-width: 38rem; text-wrap: balance; }

/* How we work: its one line fits one row on a laptop. */
.fp-work .glance-line { max-width: 46ch; }

/* The close: the line and the button side by side, no taller than they need. */
.fp-close .display { font-size: clamp(2.05rem, 3.4vw, 2.6rem); }


/* DESIGNERS & MODELS: the four ways in are one glance. MODACALL, House Left's own publication,
   leads as its masthead and solid button (a .duo); the other three are the glance list, each with
   its own small button; the press form waits in a MORE disclosure (#press-request) that the Press
   button opens (site.js, DETAILS).
     <section class="section section--tight section--flush glance ways" id="actions" …>
       <div class="wrap">
         <h2 class="glance-line">…</h2>
         <div class="duo ways-lead" id="modacall"> label + h3.ways-mast | line + .actions </div>
         <ul class="glance-list ways-list"><li><span class="glance-name">…</span> <span class="glance-text">…</span>
           <span class="ways-go"><a class="btn btn--sm" href="…">…</a></span></li> …</ul>
         <details class="more" id="press-request"> … </details>
       </div>
     </section> */

/* Less air above the glance line: the hero's own foot already fades to black above it. */
.ways.section--tight { padding-top: clamp(40px, 4.4vw, 64px); }

/* MODACALL: the lead of the four, between two hairlines; its label, masthead and line start level. */
.ways-lead { gap: 18px; padding: clamp(24px, 2.6vw, 36px) 0; border-top: 1px solid var(--hair-2); }
.ways-lead .label { display: block; margin: 0 0 10px; }
.ways-mast { font-size: clamp(2.4rem, 5.4vw, 3.6rem); line-height: 1; letter-spacing: .04em; }
.ways-lead p:not(.label):not(.actions) { font-size: 14.5px; max-width: 34rem; }
.glance .ways-lead .actions { margin-top: 20px; }
@media (min-width: 900px) { .ways-lead { gap: clamp(40px, 6vw, 96px); align-items: start; } }

/* The other three: the glance list, each item ending in its own button. */
.ways-list .glance-name .label { margin-left: .8em; font-family: var(--text); vertical-align: .22em; white-space: nowrap; }
.ways-go { display: block; margin-top: 14px; }
@media (min-width: 560px) and (max-width: 899px) { .ways-go { grid-column: 2; margin-top: 10px; } }
@media (min-width: 900px) {
  .ways-list > li { display: flex; flex-direction: column; }
  .ways-go { margin-top: auto; padding-top: 18px; }
}

/* The press form, opened from the Press button or its own summary. */
.ways #press-request { margin-top: clamp(22px, 3vw, 30px); }
.ways #press-request .more-body h3 { margin: 0; }
/* From 900px the three sit side by side and Press is the last column: its form's summary starts
   under it, so it reads as the Press item's own. */
@media (min-width: 900px) { .ways #press-request > summary { margin-left: calc(200% / 3 + 1px + clamp(18px, 2vw, 30px)); } }


/* THE WORK: Brenda: "Group by production and designer. HOC and AIM are productions. the others are
   designers." The text hero with its glance (what is on the page, as links, and the quote button);
   Productions beside Designers (the names wait in a MORE disclosure); LED screens beside Times
   Square (each caption list waits in a MORE disclosure); the publications as one strip.
     <section class="hero hero--text work-hero"> h1, .lede,
       <nav class="work-index" aria-label="On this page"><ul class="glance-list"> five links </ul></nav>
       .actions </section>
     <div class="section section--tight work-groups"><div class="wrap duo">
       <section id="credits"> h2, .muted, <ul class="lines lines--tight work-credits"> </section>
       <section id="designers"> h2, .muted, <details class="more"> .names </details> </section>
     </div></div>
     <div class="section section--tight section--band work-pair"><div class="wrap duo"> the same, twice </div></div>
     <section class="section section--tight work-pubs" id="publications"><div class="wrap strip"> … covers--strip </div></section> */

/* The hero has no photograph: less air above the headline, and the glance of the page under its line. */
.work-hero { padding-top: clamp(124px, 10vw, 136px); padding-bottom: clamp(40px, 4vw, 52px); }
.work-hero .lede { max-width: 40rem; }
.work-index { margin-top: clamp(32px, 3.6vw, 44px); }
.work-index + .actions { margin-top: clamp(26px, 3.6vw, 36px); }

/* The section headings, a step below the page's own (the size of Home's strip). */
.work-groups h2, .work-pair h2, .work-pubs h2 { font-size: clamp(2.05rem, 4.2vw, 3rem); }
.work-groups h2 + p, .work-pair h2 + p, .work-pubs h2 + p { margin-top: 14px; }
.work-groups .duo, .work-pair .duo { row-gap: clamp(48px, 7vw, 64px); }

/* Productions: the name, then its role, years and where on the line below. */
.work-credits { margin-top: clamp(20px, 2.4vw, 26px); }
.work-credits > li { row-gap: 1px; }
.work-credits .credit-detail { flex-basis: 100%; line-height: 1.65; }

/* Designers: the names in two columns inside the half-width column. */
@media (min-width: 900px) { .work-groups .names { columns: 2; } }

/* LED screens and Times Square: the caption list (and, once they are in, the videos) under its
   summary; the inquiry button under the Times Square list. */
.work-pair .grid-media.is-list { max-width: none; }
.work-pair .actions { margin-top: 18px; }

/* Publications: on a phone the four covers are the row (each keeps its alt), with no second line. */
.work-pubs .cover-meta { margin-top: 2px; }
@media (max-width: 599px) {
  .work-pubs .covers--strip .cover-meta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .work-pubs .strip { gap: 24px; }
}


/* TIMES SQUARE: three parts — the photograph carrying the glance (the name, one line, who the
   boards are for, one button and the mock-up note), the eleven boards as the compact board grid (a
   tap opens a board's details), and the inquiry form, always open.
     <section class="hero hero--short hero--ts ts-hero" id="hero"> … <div class="wrap hero-inner glance" id="who">
       h1, p.glance-line, ul.glance-list, <div class="ts-go"> button + mock-up note </div></div></section>
     <section class="section section--tight section--band ts-boards" id="boards" …> h2.glance-line,
       <div class="board-grid"> eleven details.board-card, then <p class="ts-past">…</p></div></section>
     <section class="section section--tight" id="reserve" …><div class="wrap split ts-reserve"> intro | form
       (.ts-row-3: brand, board, air date) </div></section> */

/* The glance sits in the photograph, under the name: the one line, who the boards are for, the
   button and the mock-up note. */
.ts-hero.hero--short { padding-top: clamp(128px, 9.4vw, 136px); padding-bottom: clamp(40px, 4vw, 56px); }
.ts-hero .glance-line { margin-top: clamp(14px, 2vw, 22px); max-width: 46ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.ts-hero .glance-list { max-width: 64rem; }
.ts-hero .glance-text { color: var(--t1); }
/* A deeper screen under the lower half, where the glance sits (The Tower's letters run through the
   middle of the photograph); the top keeps the photograph open. From 900px the left side is darker
   too, where the line crosses the letters; from 600 to 899px, where the letters sit under the list,
   the whole width is. */
.hero.ts-hero { --ts-side: linear-gradient(to right, rgba(10, 10, 10, .6), rgba(10, 10, 10, 0) 60%); }
@media (min-width: 600px) and (max-width: 899px) {
  .hero.ts-hero { --ts-side: linear-gradient(to right, rgba(10, 10, 10, .7) 0%, rgba(10, 10, 10, .55) 100%); }
}
@media (min-width: 900px) {
  .hero.ts-hero { --ts-side: linear-gradient(to right, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .6) 50%, rgba(10, 10, 10, 0) 76%); }
}
.hero.ts-hero::before {
  background:
    linear-gradient(to bottom, rgba(10, 10, 10, .72) 0, rgba(10, 10, 10, .38) 90px, rgba(10, 10, 10, 0) 240px),
    linear-gradient(to top, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, .94) 22%, rgba(10, 10, 10, .82) 40%, rgba(10, 10, 10, .5) 62%, rgba(10, 10, 10, .22) 84%, rgba(10, 10, 10, .42) 100%),
    var(--ts-side);
}

/* The button and the mock-up note on one row from a tablet up. */
.ts-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(26px, 3.6vw, 36px); }
.ts-go .actions { margin: 0; }
.ts-go .small { margin: 0; max-width: 34rem; }

/* The boards: less air above, under the photograph's dark foot. */
.ts-boards.section--tight { padding-top: clamp(40px, 5vw, 64px); }
.ts-boards .glance-line { max-width: none; }

/* The grid's free cell (eleven boards leave one at three and four across) carries the line to the
   past campaigns; below 760px it is the list's last row. */
.ts-past { margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.65; color: var(--t2); }

/* The inquiry: the intro beside the form; the form a little wider than half. */
@media (min-width: 1100px) {
  .ts-reserve.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.ts-reserve .form-note { margin-top: 24px; }
.ts-reserve .form-note + .small { margin-top: 6px; }
/* Brand, board and air date: one row on a laptop, the board and the date paired on a tablet. */
.ts-row-3 { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 600px) {
  .ts-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-row-3 > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .ts-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-row-3 > :first-child { grid-column: auto; }
}
.ts-form textarea { min-height: 96px; }


/* THE STUDIO: the short hero; a glance of the studio (the founding line, Brenda and Jon with their
   roles and their own sites, the publications, where it is based, Start a Conversation; more about
   Brenda and the studio waits in a MORE disclosure); Brenda's credentials as a short list in two
   columns (clients and publications wait in a MORE disclosure); then the approach (Brenda's
   positioning line; the rest in a MORE disclosure) beside Inside the Studio (two lines and Client
   sign-in).
     <section class="section section--tight section--flush glance st-about" id="about"> … </section>
     <section class="section section--tight section--band st-cred" id="credentials">
       <h2 class="eyebrow">Credentials</h2>
       <ul class="lines lines--tight lines--cols st-credits"> … </ul>
       <details class="more" id="clients"> <div class="more-body st-clients"> … </div> </details>
     </section>
     <div class="section section--tight st-pair"><div class="wrap duo">
       <section id="approach"> h2.eyebrow, p.glance-line, details.more </section>
       <section id="inside-the-studio"> h2.eyebrow, p.lede, p, .actions </section>
     </div></div> */

/* The hero: the run-of-show clipboard and the camera stay in the shorter frame; its line breaks
   evenly (no word alone on the second row). */
.hero--studio .hero-media img { object-position: 50% 62%; }
.hero--studio .lede { text-wrap: balance; }

/* Less air above the first glance line: the hero's own foot already fades to black above it. */
.st-about.section--tight { padding-top: clamp(40px, 4.4vw, 64px); }
/* The founding line is Brenda's own sentence, kept whole: a wider measure, so it sits in three lines
   on a laptop rather than four. */
.st-about .glance-line { max-width: 44ch; }

/* Credentials: the eyebrow names the list. */
.st-cred .eyebrow { margin-bottom: clamp(18px, 2.4vw, 26px); }
/* Each role and its years sit under the name, as on The Work, so every row keeps the same rhythm. */
.st-credits > li { row-gap: 1px; }
.st-credits .credit-detail { flex-basis: 100%; font-size: 13.5px; line-height: 1.6; }

/* Inside "Clients and publications". */
.st-clients .eyebrow { margin-bottom: 14px; }
.st-clients .inline-dots + .eyebrow { margin-top: clamp(32px, 4vw, 44px); }
.st-clients .lines { max-width: 52rem; }
.st-clients .lines .label { flex: none; }

/* The approach beside Inside the Studio: two short blocks, each under its eyebrow. */
.st-pair .duo { row-gap: clamp(48px, 7vw, 64px); }
.st-pair .glance-line { max-width: 30ch; margin-bottom: 0; }
.st-pair .eyebrow + .lede { margin-top: 0; }
.st-pair .lede + p { margin-top: 14px; }
.st-pair .actions { margin-top: clamp(22px, 3vw, 30px); }
.st-pair .more-body { max-width: var(--measure); }


/* CONTACT: the form plus three links. The photograph sits behind the headline and the three links
   only (so it costs no height of its own), then the form with the email and WhatsApp beside it.
     <div class="stage contact-stage">
       <div class="hero-media hero-media--contact"><img …></div>
       <section class="hero" id="hero"> h1 + .lede </section>
       <section class="glance contact-ways" id="doors" …>
         <div class="wrap"> h2.eyebrow, ul.glance-list (three links), p.small.contact-also </div>
       </section>
     </div>
     <section class="section section--tight section--band" id="contact-form" …> .split: h2 + .contact-lines | form </section> */

/* The headline and the three links read as one block over the photograph. */
.contact-stage .hero { padding-bottom: clamp(36px, 4.4vw, 56px); }
.contact-ways { padding-bottom: clamp(56px, 7vw, 88px); }
.contact-ways .eyebrow { margin-bottom: 16px; }
.contact-also { margin: 20px 0 0; }

/* The form's side: the heading, then the email and WhatsApp under it. */
#contact-form h2 { font-size: clamp(2.05rem, 4.2vw, 3rem); }
#contact-form .contact-lines { margin-top: 22px; }


/* PAGEANTÍA: a short hero, then the glance (the line, the three features, the intake as the one
   button and the demo as a quiet link; what each feature includes waits in a MORE disclosure), then
   pricing and House Left side by side (a .duo).
     <section class="section section--tight section--flush glance pg-glance" id="what-it-does" …> … </section>
     <section class="section section--tight section--band pg-more" id="pricing">
       <div class="wrap duo"><div> pricing </div><div id="house-left"> House Left </div></div>
     </section> */

/* The headline in three lines, not four, on a wide screen, so the glance row shows in the first
   screen ("The crown is the win." on one line). */
@media (min-width: 900px) {
  .hero--pageantia h1 { max-width: 22ch; }
  /* The first line now crosses the left of the crown: the screen stays darker a little further. */
  .hero.hero--pageantia::before {
    background:
      linear-gradient(to bottom, rgba(10, 10, 10, .5) 0, rgba(10, 10, 10, 0) 240px),
      linear-gradient(to right, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .76) 40%, rgba(10, 10, 10, .5) 62%, rgba(10, 10, 10, .35) 100%),
      linear-gradient(to top, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, 0) 45%);
  }
}

/* The glance starts close under the hero, whose foot already fades to black. */
.pg-glance.section--tight { padding-top: clamp(40px, 4.4vw, 64px); }
/* The one button, and the demo as a quiet link beside it (under it on a narrow phone). */
.pg-go { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(26px, 3.6vw, 36px); }
.pg-go .actions, .pg-go .quiet-links { margin: 0; }
/* The features in full: no extra rule above them, the disclosure's own line is enough. */
.pg-glance .more-body .tiles { row-gap: 40px; }

/* Pricing and House Left: a label, a display line, a paragraph and a quiet link each. */
.pg-more .eyebrow { margin-bottom: 14px; }
.pg-more .glance-line { margin-bottom: 18px; }
.pg-more p:not(.eyebrow):not(.glance-line):not(.quiet-links) { font-size: 14.5px; color: var(--t1); }
.pg-more .quiet-links { margin-top: 22px; }
/* Stacked on a phone or tablet: a hairline between pricing and House Left. */
@media (max-width: 899px) {
  .pg-more .duo { gap: 36px; }
  .pg-more #house-left { padding-top: 32px; border-top: 1px solid var(--hair); }
}


/* =================================================================================================
   ASSISTANT (2026-10-09): "Ask House Left" (chat.js; netlify/functions/chat.mjs answers).
   Brenda: "i think we should maybe put in the ai assistant here?" A launcher at the bottom right
   opens a panel; on a phone the panel is the whole screen. Built only from the tokens above:
   the near-black ground, hairlines, white type, the menu's small tracked capitals, Cormorant for the
   title, the form fields' look for the box you type in. No gold, no other colour.
   The launcher floats as on modacall.com (Brenda, 2026-10-09: "can you make the AI assistant float
   as you did on modacall.com?"): the site's solid button, a white chip with ink capitals and a
   shadow, so it sits over the page rather than reading as one more outline on it (it was a dark
   see-through box with a hairline). Under the pointer or keyboard focus it turns ink with a white
   hairline; the focus ring stays. The left padding takes the tracking after the last letter into
   account, so the name sits in the middle.
   From 600px it says "Ask House Left". On a phone it reads only "Ask" (its name stays "Ask House
   Left"): measured on the nine pages at 390 × 844 and 320 × 640 (2026-10-09), the whole name would
   cover The Work's "Request a quote" (390) and the middle of Home's Designers & Models door (320).
   "Ask" covers no button or field. It sits on the right end of a few rows that are links the full
   width, and at 320 hides a few characters there: the arrow of Home's Designers & Models door, the
   last word of The Work's LED screens line, the full stop of Contact's Designers & Models line.
   On a tablet or laptop, like any corner button (and as before), it sits over what is at the bottom
   right of the first screen until the page scrolls: the top of Contact's Last name field, a Times
   Square board, the corner of Home's third video (1440 × 900).
   The launcher never sits on the footer's links: while it is there (html.chat-on, set by chat.js)
   the footer keeps room under its last line (as on modacall.com: 88px, the 44px chip 16px up with
   about 28px to spare), and the page keeps the same room when Tab scrolls the next link or field
   into view, so keyboard focus never lands under it (one field is taller than that room: at
   320 × 640 Contact's Message box shows its top, and its empty lower right corner sits under the
   chip; as the visitor types, the page keeps the line being typed clear of it. Measured in
   Chromium: a text field is scrolled by its caret, not its box, so a scroll-margin would not help).
   Hidden while the menu is open and in print; it moves only when the visitor has not asked for
   reduced motion.
   ================================================================================================= */
.chat-open {
  position: fixed; right: 16px; bottom: 16px; z-index: 45;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: calc(100vw - 32px);
  margin: 0; padding: 0 18px 0 calc(18px + .22em);
  font-family: var(--text); font-weight: 400; font-size: 10.5px; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--white); border: 1px solid var(--white); border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); cursor: pointer;
}
.chat-open:hover, .chat-open:focus-visible { background: var(--ink); color: var(--white); border-color: var(--white); }
.chat-open[hidden], .chat-box[hidden] { display: none; }
.chat-on .site-footer { padding-bottom: 88px; }
html.chat-on { scroll-padding-bottom: 76px; }   /* 16px + the 44px launcher + 16px */
@media (max-width: 599px) { .chat-open-more { display: none; } }
html.menu-open .chat-open, html.menu-open .chat-box { display: none; }

.chat-box {
  position: fixed; right: 16px; bottom: 16px; z-index: 46;
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--ink); color: var(--t1); border: 1px solid var(--hair-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); overflow: hidden;
  font-family: var(--text); font-weight: 300; font-size: 14.5px; line-height: 1.65;
}
.chat-box p { max-width: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--hair); }
.chat-title { margin: 0; font-family: var(--display); font-weight: 300; font-size: 1.45rem; line-height: 1.1; color: var(--white); }
.chat-close {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 12px;
  font-family: var(--text); font-weight: 400; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--t1); background: none; border: 0; cursor: pointer;
}
.chat-close:hover { color: var(--white); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.chat-log:focus-visible { outline-offset: -4px; }
.chat-msg { max-width: 92%; overflow-wrap: anywhere; }
.chat-bot { align-self: flex-start; padding-left: 14px; border-left: 1px solid var(--hair-2); color: var(--t1); }
.chat-me { align-self: flex-end; padding: 9px 13px; color: var(--white); background: rgba(255, 255, 255, .06); border: 1px solid var(--hair); white-space: pre-wrap; }
.chat-wait { color: var(--t3); }
.chat-msg a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .45); }
.chat-msg a:hover { text-decoration-color: currentColor; }
.chat-form { display: flex; align-items: stretch; gap: 8px; margin: 0; padding: 12px 18px 6px; border-top: 1px solid var(--hair); }
.chat-input {
  flex: 1 1 auto; min-width: 0; margin: 0; resize: none;
  font-family: var(--text); font-weight: 300; font-size: 16px; line-height: 1.45; color: var(--white);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--hair-2); border-radius: 0; padding: 10px 12px;
}
.chat-input::placeholder { color: var(--t3); opacity: 1; }
.chat-input:focus { outline: none; border-color: var(--white); background-color: rgba(255, 255, 255, .06); }
.chat-send {
  flex: none; min-width: 76px; margin: 0; padding: 0 16px;
  font-family: var(--text); font-weight: 400; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); background: var(--white); border: 1px solid var(--white); border-radius: 0; cursor: pointer;
}
.chat-send:hover { background: var(--paper); border-color: var(--paper); }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-note { margin: 0; padding: 6px 18px 14px; font-size: 12px; line-height: 1.55; color: var(--t2); }
.chat-note a { color: var(--t1); }

/* Phones, and screens too short for the floating panel (a phone on its side, a keyboard up): the
   panel is the whole screen (chat.js keeps the page behind it still and out of reach; its query is
   this one), and the small capitals are set a little larger, as everywhere on the site. */
@media (max-width: 599px), (max-height: 500px) {
  .chat-box { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; height: auto; max-height: none; border: 0; box-shadow: none; }
  .chat-open, .chat-close, .chat-send { font-size: 11.5px; }
}
/* Very short screens: a slimmer head, box and note, so a few lines of the conversation still show. */
@media (max-height: 420px) {
  .chat-head { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .chat-log { gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  .chat-form { padding-top: 8px; }
  .chat-input { height: 44px; padding-top: 10px; padding-bottom: 8px; }
  .chat-note { padding-top: 4px; padding-bottom: 8px; }
}
html.chat-full { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .chat-open { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
  .chat-box:not([hidden]) { animation: rise .35s ease both; }
}
@media (forced-colors: active) {
  .chat-open, .chat-box { border: 1px solid CanvasText; }
}
@media print {
  .chat-open, .chat-box { display: none !important; }
}