/* ═══ INQUIRY OVERLAY (markup: partials/inquiry.html · logic: /assets/inquiry.js)
   v7 (Dylan, review call 10/30: "keep the layout the same, but just swap the colors to more black and gold"):
   the overlay continues the Investment page it opens from. Every color is copied from assets/investment.css
   (--ip-*), the one exception being the error text, which comes from Dylan's own dark Studio tokens
   (dylan-studio/src/design/tokens.js email.color.danger, light enough to read on ink). Layout, steps, copy and
   logic are v6/v7-fields unchanged; only the roles below changed value.
   Gold is the one signal color: the primary button, a selected answer, a checked box, the underline on a text
   action. Everything else is ink, cream and gray. Focus rings are cream so they stay distinct from a selected
   (gold) control. The seal is the one logo on every screen (no script logo in the header at any width).
   Progress is the Investment hero's seat row: seats A1 to A5 (A6 when no collection came with the button) that
   light up as they go, with a real progressbar for screen readers.
   The overlay rides on every page, including the ported pages that load the old WordPress style.css,
   overrides.css and bootstrap 4-alpha, so the "legacy shield" block resets what those leak in. ═══ */

/* Cormorant Garamond, the Investment page's serif (its prices and leads). Declared here under its own name so
   the overlay gets it without changing the live page (DECISIONS 2026-10-26 item 9). */
@font-face { font-family: 'DSF Cormorant'; src: url('/assets/fonts/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap; }

.inq {
  /* the Investment page's palette (investment.css :root), by role */
  --ip-ink: #0e0d0b;
  --ip-ink2: #171511;
  --ip-cream: #f4efe6;
  --ip-cream-dim: #d9d2c4;
  --ip-gold: #c8a15f;
  --ip-gold-deep: #79602c;
  --ip-gray: #8f887b;
  --ip-line: rgba(244, 239, 230, .1);

  --ds-canvas: var(--ip-ink);          /* the step */
  --ds-surface: var(--ip-ink2);        /* a raised note (the booked-date note) */
  --ds-field: var(--ip-ink2);          /* inside a field, an option, a chip */
  --ds-fg: var(--ip-cream);            /* text: 17.0:1 on ink, 16.1:1 on ink2 */
  --ds-fg-2: var(--ip-cream-dim);      /* quieter text: 12.9:1 on ink */
  --ds-fg-disabled: var(--ip-gray);    /* placeholders, past days: 5.4:1 on ink, 5.1:1 on ink2 */
  --ds-line: var(--ip-line);           /* hairlines between groups, never a control's edge */
  --ds-edge: var(--ip-gray);           /* a control's edge: 5.4:1 on ink (WCAG 1.4.11 needs 3:1) */
  --ds-action: var(--ip-gold);         /* the one signal color: 8.0:1 on ink */
  --ds-action-active: var(--ip-gold-deep);
  --ds-on-action: var(--ip-ink);       /* ink on gold: 8.0:1 */
  --ds-on-action-active: var(--ip-cream); /* cream on gold-deep: 5.2:1 */
  --ds-focus: var(--ip-cream);         /* the one focus ring */
  --ds-danger: #f2a097;                /* error text: 9.4:1 on ink (Dylan's dark Studio tokens) */
  --ds-amp: var(--ip-gold);            /* the script "&" between their names, as in the Investment headings */
  --ds-hover: var(--ip-line);
  --ds-press: var(--ip-line);
  --ds-col: var(--ip-ink2);            /* the theater column (desktop) and the closing band (phones) */
  --ds-col-fg: var(--ip-cream);
  --ds-col-fg-2: var(--ip-cream-dim);
  --ds-col-dim: var(--ip-gray);        /* labels and hints in the column: 5.1:1 on ink2 */
  --ds-radius: 4px;
  --ds-ease: cubic-bezier(.22, .61, .36, 1);
  --font-sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Beligat', Georgia, serif;
  --font-serif: 'DSF Cormorant', 'Cormorant Garamond', Georgia, serif;
  --font-amp: 'Bedlingham-ExtraLight', cursive;

  /* comfortable density, phone sizes (desktop below, from 768px) */
  --t-title: 30px; --t-title-line: 38px;
  --t-display: 44px; --t-display-line: 48px;
  --t-heading: 20px; --t-heading-line: 28px;
  --t-body: 16px; --t-body-line: 26px;
  --t-lead: 20px; --t-lead-line: 28px;
  --t-meta: 14px; --t-meta-line: 20px;
  --t-label: 15px; --t-label-line: 20px;
  --t-button: 16px;
  --ds-control-h: 52px;
  --ds-field-size: 16px;   /* 16px minimum on phones, or iOS zooms the page on focus */
  --inq-gutter: 24px;
  --inq-head-h: 72px;
  --inq-gap: 48px;         /* between groups */

  position: fixed; inset: 0; z-index: 9600; color-scheme: dark;   /* native pickers, scrollbars and autofill match */
  background: var(--ds-canvas); color: var(--ds-fg);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--t-body-line); font-weight: 400;
  letter-spacing: normal; text-align: left; /* the ported pages' style.css tracks + justifies body text */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-style: none;
  opacity: 0; transition: opacity .2s ease;
}
.inq.is-open { opacity: 1; }
.inq[hidden] { display: none; }
@media (min-width: 768px) {
  .inq {
    --t-title: 44px; --t-title-line: 54px;
    --t-display: 64px; --t-display-line: 68px;
    --t-heading: 22px; --t-heading-line: 30px;
    --t-body: 17px; --t-body-line: 28px;
    --t-lead: 22px; --t-lead-line: 30px;
    --t-meta: 15px; --t-meta-line: 22px;
    --ds-control-h: 48px;
    --ds-field-size: 17px;
    --inq-gutter: 48px;
    --inq-head-h: 88px;
  }
}

/* ── legacy shield ──
   Element-level resets at (0,0,1) specificity: they beat the ported pages' bare element rules by source
   order (this sheet loads later), and every component rule below (a class) still wins over them. */
.inq *, .inq *::before, .inq *::after { box-sizing: border-box; }
:where(.inq) :is(p, h2, h3, dl, dt, dd, fieldset, legend, label, figure) { margin: 0; hyphens: manual; }
:where(.inq) :is(fieldset) { border: 0; padding: 0; min-width: 0; }   /* bootstrap 4a: border + padding */
:where(.inq) :is(legend) { padding: 0; width: auto; float: none; }
:where(.inq) :is(dt) { font-weight: inherit; }                           /* bootstrap 4a: bold */
:where(.inq) :is(h2, h3) { font-family: var(--font-sans); color: var(--ds-fg); text-align: left; text-transform: none;
  letter-spacing: normal; font-variant: normal; font-feature-settings: normal; border: 0; padding: 0; background: none; }   /* style.css forces dlig on bare h2 */
:where(.inq) :is(button, input, select, textarea) { font-family: var(--font-sans); letter-spacing: normal; text-transform: none; }
:where(.inq) :is(img, svg) { vertical-align: middle; max-width: none; }
.inq [hidden] { display: none !important; }
.inq :focus { outline: none; }
.inq :focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }  /* the one focus ring */
.inq ::selection { background: var(--ds-action); color: var(--ds-on-action); }
.inq em, .inq i { font-style: normal; font-weight: 500; }                              /* no italics */
.inq p, .inq legend, .inq label, .inq dd { text-wrap: pretty; }
html.inq-locked, html.inq-locked body { overflow: hidden; }
.inq .inq-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inq .inq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── the scroller ── */
.inq .inq-body { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-top: calc(var(--inq-head-h) + 24px); scroll-padding-bottom: 140px; }

/* ── header: back · the seat row · close ── */
.inq .inq-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--inq-head-h); padding: 0 12px; background: var(--ds-canvas); color: var(--ds-fg); box-shadow: 0 1px 0 var(--ds-line); }
@media (min-width: 1024px) { .inq { --inq-head-h: 72px; } }
.inq .inq-headbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; margin: 0; padding: 0 10px;
  background: none; border: 0; border-radius: var(--ds-radius); cursor: pointer; color: var(--ds-fg);
  font-size: 15px; font-weight: 500; line-height: 20px; transition: background-color .15s ease; }
.inq .inq-back { grid-column: 1; grid-row: 1; justify-self: start; }
.inq .inq-close { grid-column: 3; grid-row: 1; justify-self: end; }
@media (hover: hover) { .inq .inq-headbtn:hover { background: var(--ds-hover); } }
.inq .inq-headbtn:active { background: var(--ds-press); }

/* the seat row: A1 to A5 light up as they move through the steps (the Investment hero's "Admit Two · A1 · A2…").
   Not a control, so cream and gray, never gold. The row is role="progressbar" with the step in words for
   screen readers; the seats and their numbers are hidden from them. */
.inq .inq-seats-wrap { grid-column: 2; grid-row: 1; }
.inq .inq-seats { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.inq .inq-seat { margin: 0; padding: 0; }   /* the ported pages' style.css styles bare li */
.inq .inq-seat { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 26px; color: var(--ds-edge); }
.inq .inq-seat svg { display: block; width: 24px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 1.25;
  transition: fill .4s var(--ds-ease), color .4s var(--ds-ease); }
.inq .inq-seat-n { font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ds-fg-disabled); }
/* three states, told apart by more than color: upcoming = an outline; taken (steps behind them) = filled, cream-dim;
   this step = filled in full cream, its number bold with a short rule beneath it */
.inq .inq-seat.is-lit { color: var(--ds-fg-2); }
.inq .inq-seat.is-lit svg { fill: currentColor; }
.inq .inq-seat.is-lit .inq-seat-n { color: var(--ds-fg-2); }
.inq .inq-seat.is-current { color: var(--ds-fg); }
.inq .inq-seat.is-current .inq-seat-n { color: var(--ds-fg); font-weight: 700; box-shadow: 0 2px 0 currentColor; }

/* ── layout: summary | step ── */
.inq .inq-layout { min-height: calc(100% - var(--inq-head-h)); }
.inq .inq-summary { display: none; }
.inq .inq-main { max-width: calc(560px + var(--inq-gutter) * 2); margin: 0 auto; padding: 0 var(--inq-gutter); }

.inq .inq-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  min-height: 44px; padding-top: 16px; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
.inq .inq-pkgline { color: var(--ds-fg); }
.inq .inq-pkgline-price { display: block; color: var(--ds-fg-2); font-family: var(--font-serif); font-size: 19px; line-height: 24px; font-weight: 300;
  font-variant-numeric: lining-nums; }   /* Cormorant's default figures are old-style: $12,ooo */
.inq .inq-pkgline-price:empty { display: none; }
.inq .inq-count { margin-left: auto; }   /* screen readers only now (inq-sr in the markup): the seats show it */
.inq.is-done .inq-context { visibility: hidden; }

.inq .inq-stage { padding: 24px 0 0; }
.inq .inq-scene { padding-bottom: 8px; }
.inq .inq-scene.is-entering { animation: inqIn .3s var(--ds-ease) both; }
@keyframes inqIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── type roles ── */
.inq .inq-title, .inq .inq-heading { margin: 0; font-family: var(--font-sans); text-transform: none; text-align: left; font-variant: normal; }
/* the questions: his section-heading voice (home.css h1/h2: Beligat 700, caps, tracked). Beligat has one cut, so
   700 is the browser's synthetic bold, exactly as every Beligat heading on his site (DECISIONS 2026-07-16) */
.inq .inq-title { font-family: var(--font-display); font-size: var(--t-title); line-height: var(--t-title-line); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-wrap: balance; color: var(--ds-fg); }
.inq .inq-title:focus { outline: none; } /* receives focus on each step change for screen readers; never a ring */
.inq .inq-heading { font-size: var(--t-heading); line-height: var(--t-heading-line); font-weight: 500; text-wrap: balance; }
.inq .inq-lead, .inq .inq-copy { margin-top: 12px; font-size: var(--t-body); line-height: var(--t-body-line); color: var(--ds-fg-2); max-width: 34em; }
/* the line under a question: the Investment page's serif voice (its .ip-sub), at a size that reads light-on-dark */
.inq .inq-lead { font-family: var(--font-serif); font-weight: 300; font-size: var(--t-lead); line-height: var(--t-lead-line); max-width: 30em; }
.inq .inq-copy { color: var(--ds-fg); }
.inq .inq-help, .inq .inq-hint { font-size: var(--t-meta); line-height: var(--t-meta-line); letter-spacing: .01em; color: var(--ds-fg-2); }
.inq .inq-help { margin-top: 8px; }
.inq .inq-opt { color: var(--ds-fg-2); font-weight: 400; }
/* Their names: the one display moment (Beligat caps, ligatures off so real names read cleanly) */
.inq .inq-names { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--t-display); line-height: var(--t-display-line); color: var(--ds-fg); text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
  font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0, 'dlig' 0; }
/* long names step down a size rather than breaking mid-word (inquiry.js sets the class) */
.inq .inq-names.is-long { font-size: calc(var(--t-display) * .78); line-height: 1.1; }
.inq .inq-names.is-longer { font-size: calc(var(--t-display) * .62); line-height: 1.12; }
/* each name stays whole on its line while it fits (inquiry.js wraps it); a name wider than the column still wraps */
.inq .inq-name { display: inline-block; max-width: 100%; }
.inq .inq-amp { font-family: var(--font-amp); font-weight: 200; text-transform: none; letter-spacing: 0; font-size: 1.22em;
  line-height: .9; color: var(--ds-amp); margin: 0 .38em 0 -.135em; white-space: nowrap; }

/* ── fields: label above, a boxed input ── */
.inq .inq-fields { display: grid; gap: 24px; margin-top: 32px; }
.inq .inq-field label, .inq .inq-label { display: block; font-size: var(--t-label); line-height: var(--t-label-line); font-weight: 500;
  letter-spacing: .01em; color: var(--ds-fg); }
legend.inq-label { margin-bottom: 12px; }
.inq .inq-scene > .inq-field { margin-top: 32px; }
/* Instagram: a quiet "@" inside the field, so they type only the handle */
.inq .inq-prefixed { position: relative; display: block; margin-top: 8px; }
.inq .inq-prefixed .inq-input { margin-top: 0; padding-left: 36px; }
.inq .inq-prefix { position: absolute; left: 16px; top: 0; display: flex; align-items: center; height: var(--ds-control-h);
  font-size: var(--ds-field-size); color: var(--ds-fg-2); pointer-events: none; }
.inq .inq-input::placeholder { color: var(--ds-fg-disabled); opacity: 1; }
.inq .inq-input {
  display: block; width: 100%; max-width: none; min-width: 0; max-height: none; min-height: var(--ds-control-h);
  margin: 8px 0 0; padding: 0 16px; float: none;
  /* !important only to beat the ported pages' overrides.css `font-size: 18px !important` on every input */
  font-size: var(--ds-field-size) !important; line-height: var(--t-body-line); font-weight: 400; color: var(--ds-fg);
  background: var(--ds-field); border: 1px solid var(--ds-edge); border-radius: var(--ds-radius); box-shadow: none;
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease; }
.inq textarea.inq-input { min-height: 136px; padding: 12px 16px; resize: vertical; }
@media (hover: hover) { .inq .inq-input:hover:not(:focus) { border-color: var(--ds-fg-2); } }
.inq .inq-input:focus { border-color: var(--ds-fg); }
.inq .inq-input[aria-invalid="true"] { border-color: var(--ds-danger); }
.inq .inq-input:-webkit-autofill { -webkit-text-fill-color: var(--ds-fg); box-shadow: inset 0 0 0 100px var(--ds-field); }
.inq .inq-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-meta); line-height: var(--t-meta-line);
  font-weight: 500; color: var(--ds-danger); }
.inq .inq-error:empty { display: none; }
.inq .inq-error:not(:empty) { margin-top: 8px; }
.inq .inq-error:not(:empty)::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4.2' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='.95'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4.2' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='.95'/%3E%3C/svg%3E") center / contain no-repeat; }

/* "Did you mean gmail.com?" */
.inq .inq-suggest { margin-top: 8px; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg); }
.inq .inq-suggest-q { display: block; overflow-wrap: anywhere; }
.inq .inq-suggest-actions { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.inq .inq-suggest-btn { min-height: 44px; margin: 0; padding: 0 2px; background: none; border: 0; cursor: pointer; color: var(--ds-fg);
  font-size: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--ds-action); text-underline-offset: 4px; }
@media (hover: hover) { .inq .inq-suggest-btn:hover { color: var(--ds-action); text-decoration-thickness: 2px; } }

/* checkbox: a real input under a drawn box; the whole row is the tap target */
.inq .inq-check { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 16px; align-items: start;
  margin-top: 24px; padding: 9px 0; min-height: 44px; cursor: pointer; color: var(--ds-fg); }
.inq .inq-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inq .inq-check-box { position: relative; width: 20px; height: 20px; margin-top: 3px; border: 1.5px solid var(--ds-edge);
  border-radius: var(--ds-radius); background: var(--ds-field); transition: background-color .15s ease, border-color .15s ease; }
.inq .inq-check-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid var(--ds-on-action); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.inq .inq-check input:checked + .inq-check-box { background: var(--ds-action); border-color: var(--ds-action); }
.inq .inq-check input:checked + .inq-check-box::after { opacity: 1; }
.inq .inq-check input:focus-visible + .inq-check-box { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
@media (hover: hover) { .inq .inq-check:hover input:not(:checked) + .inq-check-box { border-color: var(--ds-fg-2); } }

/* ── choices: options (one per row, with a radio mark) and chips (short answers) ── */
.inq .inq-options { display: grid; gap: 12px; margin-top: 32px; }
.inq .inq-option { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 16px; row-gap: 2px;
  align-items: start; padding: 16px 20px; min-height: 64px; cursor: pointer;
  background: var(--ds-field); border: 1px solid var(--ds-edge); border-radius: var(--ds-radius);
  transition: border-color .15s ease, box-shadow .15s ease; }
.inq .inq-option input, .inq .inq-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inq .inq-radio { grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 3px; border: 1.5px solid var(--ds-edge); border-radius: 50%;
  background: var(--ds-field); transition: border-color .15s ease, box-shadow .15s ease; }
.inq .inq-option-name { font-size: var(--t-body); line-height: var(--t-body-line); font-weight: 500; color: var(--ds-fg); }
.inq .inq-option-sub { grid-column: 2; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
@media (hover: hover) { .inq .inq-option:hover:not(:has(input:checked)) { border-color: var(--ds-fg-2); } }
.inq .inq-option:has(input:checked) { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); }
.inq .inq-option:has(input:checked) .inq-radio { border-color: var(--ds-action); box-shadow: inset 0 0 0 4px var(--ds-field); background: var(--ds-action); }
.inq .inq-option:has(input:focus-visible), .inq .inq-chip:has(input:focus-visible) { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

.inq .inq-group { margin-top: 32px; }
.inq .inq-chips { display: grid; gap: 8px; }
.inq .inq-chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inq .inq-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inq .inq-chips--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inq .inq-chips--wrap { display: flex; flex-wrap: wrap; }
.inq .inq-chip { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px;
  cursor: pointer; text-align: center; font-size: var(--t-label); line-height: 20px; font-weight: 500; color: var(--ds-fg);
  background: var(--ds-field); border: 1px solid var(--ds-edge); border-radius: var(--ds-radius);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) { .inq .inq-chip:hover:not(:has(input:checked)) { border-color: var(--ds-fg-2); } }
.inq .inq-chip:active { background: var(--ds-press); }
.inq .inq-chip:has(input:checked) { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.inq .inq-chip:has(input:disabled) { color: var(--ds-fg-disabled); border-color: var(--ds-line); background: transparent; cursor: not-allowed; }
.inq .inq-chip:has(input:checked):active { background: var(--ds-action-active); border-color: var(--ds-action-active); color: var(--ds-on-action-active); }
.inq .inq-chip input:disabled { cursor: not-allowed; }
/* the optional "how did you find us" row: the system's compact chip, so it doesn't outweigh their story */
.inq .inq-chips--small .inq-chip { min-height: 44px; padding: 8px 14px; font-size: var(--t-meta); }
@media (min-width: 560px) { .inq .inq-chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── the date: calendar ── */
.inq .inq-cal { margin-top: 24px; max-width: 448px; }
.inq .inq-cal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.inq .inq-cal-title { display: flex; justify-content: center; gap: 8px; }
.inq .inq-select { position: relative; display: inline-block; }
.inq .inq-select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ds-fg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.inq .inq-cal-select { display: block; width: auto; max-width: none; min-width: 0; min-height: 44px; margin: 0; padding: 0 32px 0 12px;
  font-size: var(--ds-field-size) !important; line-height: 1.2; font-weight: 500; color: var(--ds-fg); cursor: pointer;
  background: var(--ds-field); border: 1px solid var(--ds-edge); border-radius: var(--ds-radius); -webkit-appearance: none; appearance: none; }
@media (hover: hover) { .inq .inq-cal-select:hover { border-color: var(--ds-fg); } }
.inq .inq-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--ds-radius); color: var(--ds-fg); cursor: pointer; }
@media (hover: hover) { .inq .inq-cal-nav:hover:not(:disabled) { background: var(--ds-hover); border-color: var(--ds-edge); } }
.inq .inq-cal-nav:disabled { color: var(--ds-fg-disabled); cursor: default; }
.inq .inq-cal-dow, .inq .inq-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.inq .inq-cal-dow { margin-top: 16px; padding-bottom: 4px; }
.inq .inq-cal-dow span { text-align: center; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ds-fg-2); }
.inq .inq-cal-day { min-height: 46px; margin: 0; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--ds-radius);
  color: var(--ds-fg); font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) { .inq .inq-cal-day:hover:not(:disabled) { border-color: var(--ds-fg); } }
.inq .inq-cal-day:disabled { color: var(--ds-fg-disabled); cursor: default; }
/* booked: struck through, still pickable (a booked date never blocks the inquiry) */
.inq .inq-cal-day.is-booked, .inq .inq-cal-sample { color: var(--ip-gray); text-decoration: line-through; text-decoration-thickness: 3px;
  text-decoration-color: var(--ip-gold); text-decoration-skip-ink: none; }
.inq .inq-cal-day[aria-pressed="true"] { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); font-weight: 500; }
.inq .inq-cal-day[aria-pressed="true"].is-booked { background: var(--ds-field); color: var(--ds-fg); border: 2px solid var(--ds-action); }
.inq .inq-cal-key { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
.inq .inq-cal-sample { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; font-size: 15px; }
.inq .inq-picked { margin-top: 16px; font-size: var(--t-body); line-height: var(--t-body-line); font-weight: 500; color: var(--ds-fg); }
.inq .inq-picked:empty { display: none; }
.inq .inq-undated { margin-top: 24px; }
.inq .inq-undated .inq-group:first-child { margin-top: 0; }
.inq .inq-check + .inq-undated { margin-top: 16px; }

/* the gracious note for a booked date: one container, a clear title, the question, then what it means */
.inq .inq-note { margin-top: 24px; padding: 20px; background: var(--ds-surface); border-radius: var(--ds-radius); }
.inq .inq-note-t { font-size: var(--t-body); line-height: var(--t-body-line); font-weight: 500; }
.inq .inq-note-t:empty { display: none; }
.inq .inq-note-d { margin-top: 4px; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
.inq .inq-note .inq-group { margin-top: 16px; }
.inq .inq-note .inq-chip { background: var(--ds-field); }
.inq .inq-note .inq-chip:has(input:checked) { background: var(--ds-action); }
/* the associate question, once their taken date is set: the guarantee sits between the question and the answers */
.inq .inq-note .inq-assoc { margin-top: 24px; }
.inq .inq-assoc-help { margin: -4px 0 12px; }
.inq .inq-note-next { margin-top: 12px; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg); }
.inq .inq-note-next:empty { display: none; }

/* ── story step ── */
.inq .inq-story { margin-top: 0; }

/* ── the action bar: sticks to the bottom while a tall step scrolls; never while typing on a phone
      (the keyboard is up) or on a short screen, where it simply follows the step ── */
.inq .inq-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-top: 40px; padding: 16px 0 max(24px, env(safe-area-inset-bottom)); background: var(--ds-canvas); }
.inq .inq-actions.is-stuck { box-shadow: 0 -1px 0 var(--ds-line); }   /* only while the step scrolls beneath it */
.inq.is-typing .inq-actions { position: relative; box-shadow: none; }
@media (max-height: 640px) { .inq .inq-actions { position: relative; } .inq .inq-actions.is-stuck { box-shadow: none; } }
/* computers: the bar follows the step (a short scroll), so it never sits over the last options */
@media (min-width: 1024px) { .inq .inq-actions { position: relative; } }
/* after a failed send, the 24-hour promise under the button waits until it has actually gone */
.inq.is-failed [data-scene="contact"] .inq-hint { display: none; }
.inq .inq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ds-control-h); margin: 0; padding: 0 28px;
  font-size: var(--t-button); line-height: 20px; font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; color: var(--ds-on-action); background: var(--ds-action); border: 1px solid var(--ds-action); border-radius: var(--ds-radius);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.inq a.inq-btn, .inq a.inq-btn:hover, .inq a.inq-btn:focus { color: var(--ds-on-action); text-decoration: none; }
/* hover: the Investment page's solid button turns to its outline (.ip-btn--solid:hover) */
@media (hover: hover) { .inq .inq-btn:hover { background: transparent; color: var(--ds-action); } }
.inq .inq-btn:active { background: var(--ds-action-active); border-color: var(--ds-action-active); color: var(--ds-on-action-active); }
.inq .inq-btn--secondary, .inq a.inq-btn--secondary, .inq a.inq-btn--secondary:hover, .inq a.inq-btn--secondary:focus {
  color: var(--ds-fg); background: transparent; border-color: var(--ds-edge); }
@media (hover: hover) { .inq .inq-btn--secondary:hover { background: var(--ds-hover); border-color: var(--ds-fg); color: var(--ds-fg); } }
.inq .inq-btn--secondary:active { background: var(--ds-press); border-color: var(--ds-fg); color: var(--ds-fg); }
.inq .inq-send[aria-busy="true"] { cursor: progress; }
.inq .inq-send[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: inqSpin .8s linear infinite; }
@keyframes inqSpin { to { transform: rotate(360deg); } }
.inq .inq-senderr:not(:empty) { margin-top: 24px; }
.inq .inq-errlink, .inq .inq-errlink:hover, .inq .inq-errlink:focus { color: var(--ds-danger); text-decoration: underline; text-underline-offset: 3px; }
.inq .inq-turnstile:has(iframe) { margin-top: 24px; }   /* "interaction-only": usually nothing shows at all */

/* quiet text actions: Change, Back to the site */
.inq .inq-change, .inq .inq-textbtn { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px;
  background: none; border: 0; cursor: pointer; color: var(--ds-fg); font-size: inherit; font-weight: 500; line-height: inherit;
  text-decoration: underline; text-decoration-color: var(--ds-action); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { .inq .inq-change:hover, .inq .inq-textbtn:hover { color: var(--ds-action); text-decoration-thickness: 2px; } }
.inq .inq-textbtn { margin: 40px 0 0; font-size: var(--t-body); }

/* ── sent: see the block at the end of this file ── */

/* ── desktop: their answers on the left, the step on the right ── */
@media (min-width: 1024px) {
  /* the seats line up over the step column; the theater column runs to the top of the screen */
  .inq .inq-head { grid-template-columns: minmax(360px, 1fr) 2fr; padding: 0 12px 0 0; box-shadow: none;
    background: linear-gradient(90deg, var(--ds-col) max(360px, 33.333%), var(--ds-canvas) 0); }
  .inq .inq-back { margin-left: 12px; }
  .inq .inq-seats-wrap { grid-column: 2; justify-self: start; margin-left: clamp(48px, 6vw, 112px); }
  .inq .inq-close { grid-column: 2; }
  .inq .inq-layout { display: grid; grid-template-columns: minmax(360px, 1fr) 2fr; }
  /* the seal sits just under the header row (Jax 10/30: "there is a large space above the logo"); the row's
     left side holds Back on steps 2+, so the seal starts right below it */
  .inq .inq-summary { display: flex; flex-direction: column; position: sticky; top: var(--inq-head-h); align-self: start;
    height: calc(100vh - var(--inq-head-h)); height: calc(100dvh - var(--inq-head-h)); overflow-y: auto;
    padding: 8px clamp(40px, 4vw, 64px) 40px; background: var(--ds-col); }
  .inq .inq-main { margin: 0; padding: 0 clamp(48px, 6vw, 112px); max-width: none; }
  .inq .inq-main > * { max-width: 560px; }
  .inq .inq-pkgline { display: none; }
  .inq .inq-count { margin-left: 0; }
  .inq .inq-stage { padding-top: 40px; }
  .inq.is-done .inq-summary { display: none; }
}
/* the summary: his footer's composition (brand green, the seal, a Beligat heading, cream text). "Your inquiry",
   their names (the display moment, once typed), four lines that start as quiet text saying what each will hold,
   the collection's starting price, and what happens after sending at the foot */
.inq .inq-summary { color: var(--ds-col-fg); }
.inq .inq-summary:focus-visible { outline: 2px solid var(--ds-col-fg); outline-offset: -6px; }   /* only when it scrolls */
.inq .inq-summary .inq-seal { margin: 0 auto 32px; }
.inq .inq-sum-h { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ds-col-fg); }
.inq .inq-sum-names { margin-top: 20px; font-size: 36px; line-height: 42px; color: var(--ds-col-fg); }
.inq .inq-sum-names.is-long { font-size: 31px; line-height: 38px; }
.inq .inq-sum-names.is-longer { font-size: 27px; line-height: 34px; }
.inq .inq-sum-names .inq-amp { color: var(--ds-amp); }
.inq .inq-sum-list { display: grid; gap: 20px; margin-top: 24px; }
.inq .inq-sum-list dt { font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-col-fg-2); }   /* labels in cream-dim (12.2:1); only the not-yet-answered hints are gray */
.inq .inq-sum-hint { display: none; }
.inq .is-empty .inq-sum-hint { display: block; font-weight: 400; color: var(--ds-col-dim); font-size: var(--t-meta); line-height: var(--t-body-line); }
.inq .is-empty .inq-sum-sub, .inq .is-empty .inq-sum-price, .inq .is-empty .inq-change { display: none; }
.inq .inq-sum-next { margin-top: auto; padding-top: 32px; }
.inq .inq-sum-next-h { padding-top: 24px; border-top: 1px solid var(--ds-line); font-size: var(--t-meta); line-height: var(--t-meta-line);
  font-weight: 500; color: var(--ds-col-fg); }
.inq .inq-sum-steps { margin: 8px 0 0; padding: 0 0 0 1.25em; list-style: decimal; color: var(--ds-col-fg-2);
  font-size: var(--t-meta); line-height: var(--t-meta-line); }
.inq .inq-sum-steps li { margin: 6px 0 0; padding-left: 4px; font-size: inherit; line-height: inherit; letter-spacing: normal;
  color: inherit; text-align: left; text-wrap: pretty; }   /* the ported pages' style.css styles bare li */
.inq .inq-sum-steps li::marker { color: var(--ds-col-dim); font-variant-numeric: tabular-nums; }
.inq .inq-sum-list dd { margin-top: 2px; font-size: var(--t-body); line-height: var(--t-body-line); font-weight: 500; color: var(--ds-col-fg); }
.inq .inq-sum-sub { display: block; font-weight: 400; color: var(--ds-col-dim); font-size: var(--t-meta); line-height: var(--t-meta-line); }
.inq .inq-sum-sub:empty, .inq .inq-sum-price:empty { display: none; }
/* the price reminder, in the investment page's words ("Starting At" $12,000) */
.inq .inq-sum-price { display: block; margin-top: 4px; font-family: var(--font-serif); font-weight: 300; color: var(--ds-col-fg);
  font-size: 22px; line-height: 28px; font-variant-numeric: lining-nums; }   /* Cormorant, as on the ticket stubs */
.inq .inq-summary .inq-change { margin-left: 8px; font-size: var(--t-meta); }

/* ── the seal: the real dt-monogram.svg as a mask, painted in a token color. The box is the ring
      (152 x 156 of the art's 200 x 200), so it centers on the ring; the art is drawn 200/152 wide from the
      ring's corner (23, 22) and the flourish's tail runs past the box on the right. The DT paths in the file
      carry their own 0.35px non-scaling outline (DECISIONS 2026-10-29), so the hairlines read. ── */
.inq .inq-seal { position: relative; display: block; width: 160px; aspect-ratio: 152 / 156; color: var(--ds-action); }   /* gold, as the Investment page's marks */
.inq .inq-seal-art { position: absolute; left: -15.132%; top: -14.103%; width: 131.579%; aspect-ratio: 1; background: currentColor;
  -webkit-mask: url("/assets/images/dt-monogram.svg") center / 100% 100% no-repeat; mask: url("/assets/images/dt-monogram.svg") center / 100% 100% no-repeat; }
/* phones and tablets: the screen ends on his footer's band; on a short step the band sits at the bottom of the screen */
.inq .inq-foot { margin-top: 64px; padding: 48px var(--inq-gutter) max(48px, env(safe-area-inset-bottom)); background: var(--ds-col);
  box-shadow: 0 -1px 0 var(--ds-line); }
.inq .inq-foot .inq-seal { margin: 0 auto; }
.inq .inq-seal--done { display: none; }
@media (max-width: 1023px) {
  .inq .inq-layout { display: flex; flex-direction: column; }
  .inq .inq-main { flex: 1 0 auto; width: 100%; }
}
@media (min-width: 1024px) {
  .inq .inq-foot { display: none; }
  .inq .inq-seal--done { display: block; margin: 0 0 48px; }
}

/* the narrowest phones (under 360px): month and year can't fit between the arrows, so they take the first row
   and the arrows sit beneath them at either side (no sideways scroll at 320px) */
@media (max-width: 359px) {
  .inq .inq-cal-head { grid-template-columns: 44px 1fr 44px; grid-template-areas: "title title title" "prev . next"; row-gap: 4px; }
  .inq .inq-cal-title { grid-area: title; }
  .inq [data-cal-prev] { grid-area: prev; }
  .inq [data-cal-next] { grid-area: next; }
}
@media (max-width: 400px) {
  .inq .inq-head { padding: 0 4px; }
  .inq .inq-headbtn { padding: 0 8px; }
}
/* phones: six seats (no collection passed) clear Back and Close with room to spare (measured 320 to 400px) */
@media (max-width: 400px) { .inq .inq-seats { gap: 4px; } .inq .inq-seat { width: 22px; } .inq .inq-seat svg { width: 22px; height: 18px; } }
@media (max-width: 359px) { .inq .inq-seats { gap: 2px; } .inq .inq-seat { width: 19px; } .inq .inq-seat svg { width: 19px; height: 16px; } }
@media (max-width: 559px) {
  .inq .inq-note .inq-chips--2 { grid-template-columns: 1fr; }   /* "Yes, we’re flexible" on one line */
  .inq .inq-actions .inq-btn { width: 100%; }
  .inq .inq-actions .inq-hint { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .inq, .inq *, .inq *::before, .inq *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .inq .inq-send[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* ── start over: a quiet text button under the step; it asks before clearing anything ── */
.inq .inq-restart { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ds-line); font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
.inq .inq-restart .inq-restart-ask { margin: -12px 0; color: var(--ds-fg-2); text-decoration-color: var(--ds-fg-2); }
.inq .inq-restart-q { margin: 0 0 12px; color: var(--ds-fg); font-size: var(--t-body); line-height: var(--t-body-line); text-wrap: pretty; }
.inq .inq-restart-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.inq .inq-chipbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px; cursor: pointer;
  font: inherit; font-size: var(--t-label); line-height: 20px; font-weight: 500; color: var(--ds-fg);
  background: var(--ds-field); border: 1px solid var(--ds-edge); border-radius: var(--ds-radius);
  transition: background-color .15s ease, border-color .15s ease; }
@media (hover: hover) { .inq .inq-chipbtn:hover { border-color: var(--ds-fg-2); } }
.inq .inq-chipbtn:active { background: var(--ds-press); }

/* ═══ the sent screen: three acts (Dylan, review call 10/30) ═══
   Act I (their names, when and where, the ticket, what happens by email), Act II (his HoneyBook scheduler in a
   cream well), While you wait (a click-to-load film), Act III (one line), then Instagram and Back to the site.
   One column at every width. The act marks are the theater's own small caps in Beligat, like the questions'
   heading voice; they mark a real sequence. Gold stays "tap" (the play button, the links’ underline, the seal), plus the act numerals. */
.inq .inq-done { padding-bottom: 0; }
.inq .inq-act { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 20px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ds-fg-2); font-feature-settings: 'liga' 0, 'calt' 0, 'dlig' 0; }
.inq .inq-act-num { color: var(--ip-gold); }   /* the numeral alone is gold (Dylan 10/30) */
.inq .inq-done-h { margin: 0; font: inherit; }
.inq .inq-done-h:focus { outline: none; }   /* focus lands here when the screen appears; never a ring */
.inq .inq-done-names { display: block; margin-top: 16px; }
.inq .inq-done-names[hidden] { display: none; }
.inq .inq-done-when { margin-top: 12px; font-family: var(--font-serif); font-weight: 300; font-size: var(--t-lead); line-height: var(--t-lead-line);
  color: var(--ds-fg-2); font-variant-numeric: lining-nums; text-wrap: balance; }
.inq .inq-done-when:has(span:empty + .inq-done-sep[hidden] + span:empty) { display: none; }
/* phones: the date and the place on their own lines (a long venue broke the line mid-name) */
@media (max-width: 559px) {
  .inq .inq-done-when > span { display: block; }
  .inq .inq-done-when .inq-done-sep { display: none; }
}
.inq.is-done .inq-context { display: none; }
.inq.is-done .inq-stage { padding-top: 40px; }

/* the ticket: a dark stub with the Investment page's punched notches, a vertical "Admit Two" stub, a dashed tear */
.inq .inq-ticket { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); margin-top: 40px;
  background: var(--ds-surface); border: 1px solid var(--ds-edge); border-radius: var(--ds-radius); }
.inq .inq-ticket::before, .inq .inq-ticket::after { content: ""; position: absolute; left: 44px; width: 18px; height: 18px; margin-left: -9px;
  border-radius: 50%; background: var(--ds-canvas); border: 1px solid var(--ds-edge); z-index: 1; }
.inq .inq-ticket::before { top: -10px; clip-path: inset(50% 0 0 0); }
.inq .inq-ticket::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.inq .inq-ticket-stub { display: flex; align-items: center; justify-content: center; border-left: 1px dashed var(--ds-edge);
  writing-mode: vertical-rl; transform: rotate(180deg);   /* turned to read bottom to top, so its left edge is the tear on the right */ white-space: nowrap;
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ds-fg-2); }
.inq .inq-ticket-main { display: grid; align-content: center; min-height: 160px; margin: 0; padding: 4px 20px; }   /* room for the stub's words when only one row shows */
.inq .inq-ticket-row { padding: 16px 0; }
.inq .inq-ticket-row + .inq-ticket-row { border-top: 1px dashed var(--ds-line); }
.inq .inq-ticket-row dt { font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
.inq .inq-ticket-row dd { margin: 4px 0 0; font-size: var(--t-body); line-height: var(--t-body-line); color: var(--ds-fg); text-wrap: pretty; }
.inq .inq-ticket-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px;
  letter-spacing: .07em; text-transform: uppercase; }
.inq .inq-ticket-price { display: block; margin-top: 2px; font-family: var(--font-serif); font-weight: 300; font-size: 21px; line-height: 26px;
  color: var(--ds-fg-2); font-variant-numeric: lining-nums; }
.inq .inq-ticket-price:empty { display: none; }
.inq .inq-done .inq-copy { margin-top: 24px; max-width: 36em; }
.inq .inq-done-email { font-weight: 600; color: var(--ds-fg); overflow-wrap: anywhere; }
.inq .inq-done .inq-help:not(:empty) { margin-top: 12px; max-width: 40em; }
/* the way to Act II: the screen's one filled (gold) button */
.inq .inq-done-next { margin-top: 28px; }
@media (max-width: 559px) { .inq .inq-done-next .inq-btn { width: 100%; } }
.inq .inq-act-h:focus { outline: none; }   /* takes focus after the jump */

/* each act after the first opens on a hairline, like a new reel */
.inq .inq-act-sec { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--ds-line); }
.inq .inq-act-h { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: 26px; line-height: 34px; color: var(--ds-fg); text-wrap: balance; font-feature-settings: 'liga' 0, 'calt' 0, 'dlig' 0; }
.inq .inq-act-h .inq-act { margin-bottom: 10px; }
.inq .inq-act-sec .inq-lead { margin-top: 12px; }
.inq .inq-act-sec > .inq-copy { margin-top: 12px; }
.inq [data-call-none]:empty { display: none; }

/* the scheduler: HoneyBook's page is transparent with a white card and a dark-gray header, so it sits in a cream
   well (the Investment tickets' cream) where the header reads and the card belongs. Phones: the well runs to the
   screen's edges so the calendar gets every pixel. */
.inq .inq-sched { margin: 24px calc(var(--inq-gutter) * -1) 0; padding: 12px; background: var(--ip-cream); }
.inq .inq-sched iframe { display: block; width: 100%; height: 1340px; border: 0; background: transparent; color-scheme: light; }
@media (min-width: 560px) { .inq .inq-sched { margin: 24px 0 0; padding: 16px; border-radius: var(--ds-radius); } }
.inq .inq-sched-alt { margin-top: 16px; text-wrap: pretty; font-size: var(--t-meta); line-height: var(--t-meta-line); color: var(--ds-fg-2); }
.inq .inq-link { color: var(--ds-fg); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ds-action);
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inq .inq-link:hover, .inq .inq-link:focus { color: var(--ds-fg); }
@media (hover: hover) { .inq .inq-link:hover { color: var(--ds-action); text-decoration-thickness: 2px; } }
.inq .inq-sched-alt .inq-link { display: inline-block; padding: 12px 0; margin: -12px 0; }   /* 44px tap height */

/* the film: 16:9, the poster until they press play, then the player in its place */
.inq .inq-film { position: relative; margin-top: 24px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ds-radius); overflow: hidden; }
.inq .inq-film iframe { display: block; width: 100%; height: 100%; border: 0; }
.inq .inq-film-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: #000; cursor: pointer; }
.inq .inq-film-play img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  opacity: .9; transition: opacity .3s var(--ds-ease); }
.inq .inq-film-btn { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--ds-action); color: var(--ds-on-action);
  transition: transform .3s var(--ds-ease); }
.inq .inq-film-btn svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }
@media (hover: hover) {
  .inq .inq-film-play:hover img { opacity: 1; }
  .inq .inq-film-play:hover .inq-film-btn { transform: scale(1.06); }
}
.inq .inq-film-play:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -4px; }
.inq .inq-film-cap { margin-top: 12px; font-family: var(--font-serif); font-weight: 300; font-size: 19px; line-height: 26px; color: var(--ds-fg-2); }

.inq .inq-done-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--ds-line); font-size: var(--t-body); }
.inq .inq-done-foot .inq-link { display: inline-flex; align-items: center; min-height: 44px; }
.inq .inq-done-foot .inq-textbtn { margin: 0; }

/* computers and tablets: one wider column, so the scheduler gets its side-by-side layout (768px of frame) */
@media (min-width: 768px) {
  .inq.is-done .inq-main { max-width: calc(880px + var(--inq-gutter) * 2); }
  .inq .inq-act { font-size: 16px; }
  .inq .inq-act-h { font-size: 30px; line-height: 38px; }
  .inq .inq-act-sec { margin-top: 80px; padding-top: 48px; }
  .inq .inq-act1 > * { max-width: 640px; }
}
@media (min-width: 1024px) {
  .inq.is-done .inq-layout { grid-template-columns: 1fr; }
  .inq.is-done .inq-head { grid-template-columns: 1fr auto 1fr; padding: 0 12px; background: var(--ds-canvas); box-shadow: 0 1px 0 var(--ds-line); }
  .inq.is-done .inq-seats-wrap { justify-self: center; margin-left: 0; }
  .inq.is-done .inq-close { grid-column: 3; }
  .inq.is-done .inq-main { width: 100%; margin: 0 auto; padding: 24px var(--inq-gutter) 96px; }
  .inq.is-done .inq-main > * { max-width: none; }
  .inq.is-done .inq-context { display: none; }
  .inq.is-done .inq-stage { padding-top: 0; }
  .inq .inq-seal--done { margin: 0 0 40px; }
  /* Act I on computers: their names across the top, then what happens by email on the left and the ticket on the
     right, so the act reads as one composition and Act II starts on the first screen */
  .inq .inq-act1 { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 56px;
    grid-template-areas: "h h" "when ticket" "copy ticket" "help ticket" "next ticket" "rest ticket"; grid-template-rows: auto auto auto auto auto 1fr; }
  .inq .inq-act1 > * { max-width: none; }
  .inq .inq-act1 .inq-done-h { grid-area: h; }
  .inq .inq-act1 .inq-done-when { grid-area: when; margin-top: 20px; }
  .inq .inq-act1 .inq-ticket { grid-area: ticket; align-self: start; margin-top: 28px; }
  .inq .inq-act1 .inq-copy { grid-area: copy; }
  .inq .inq-act1 .inq-help { grid-area: help; }
  .inq .inq-act1 .inq-done-next { grid-area: next; }
  .inq .inq-act1 .inq-done-when > span { display: block; }
  .inq .inq-act1 .inq-done-when .inq-done-sep { display: none; }
}