/* Speaking page: "Book Jess to speak". Signature scene: the room (assets/js/room.js). Everything else is quiet. */

/* ---------- the room ---------- */
/* Phones: the copy is compact and the seats rise behind the buttons, so the stage is on the first screen. */
.room{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(70% 46% at 50% 100%,rgba(200,169,81,.11),transparent 72%),radial-gradient(90% 60% at 50% 0,#0e1b31,transparent 70%),var(--blackout)}
.room canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.room-copy{position:relative;padding-top:clamp(40px,5vw,72px)}
.room-copy>*{width:fit-content}
.room .label{margin-bottom:14px}
.room h1{max-width:11.5em;font-size:var(--fs-hero)}
.room-lead{max-width:35em;margin-top:16px;font-size:var(--fs-body);color:var(--mist)}
.room-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.room-actions .tc{opacity:.7}
/* the microphone: a fine gold line drawing, not an icon */
.room-mic{position:absolute;left:50%;bottom:22px;width:auto;height:clamp(84px,11vw,118px);transform:translateX(-50%);overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.room-mic *{vector-effect:non-scaling-stroke}
.room-mic .mic-grille{stroke-width:.7;opacity:.55}
.room-mic .mic-cap{transition:stroke var(--t-slow) var(--e-out),filter var(--t-slow) var(--e-out)}
.room.is-speaking .mic-cap{stroke:var(--gold-bright);filter:drop-shadow(0 0 6px rgba(227,203,133,.55))}
.room-replay{position:absolute;right:var(--gutter);bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--navy-line);border-radius:999px;background:rgba(10,20,36,.55);color:var(--mist);font:500 var(--fs-label)/1 var(--sans);letter-spacing:.01em;transition:border-color var(--t-base) var(--e-out),color var(--t-base) var(--e-out),background-color var(--t-base) var(--e-out)}
.room-replay[hidden]{display:none}
.room-replay svg{flex:none;transition:transform var(--t-slow) var(--e-out)}
.room-replay:hover{border-color:var(--gold);color:var(--white)}
.room-replay:hover svg{transform:rotate(-200deg)}
@media (max-width:759px){.room{padding-bottom:116px}.room-mic{bottom:16px;height:76px}.room-replay{bottom:16px}}

/* No-JS room: concentric rows broken into seats by a conic mask, every seat gold. */
.room-fallback{--o:50% calc(100% - 80px);position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(ellipse 190% 100% at var(--o),transparent 0 40px,rgba(214,186,104,.6) 40px 42.5px);
  -webkit-mask:repeating-conic-gradient(from 0deg at var(--o),#000 0 .55deg,transparent .55deg 1.5deg),linear-gradient(transparent 58%,#000 82%,#000 calc(100% - 150px),transparent calc(100% - 110px));
  -webkit-mask-composite:source-in;
  mask:repeating-conic-gradient(from 0deg at var(--o),#000 0 .55deg,transparent .55deg 1.5deg) intersect,linear-gradient(transparent 58%,#000 82%,#000 calc(100% - 150px),transparent calc(100% - 110px))}
html.js .room-fallback{opacity:0;animation:room-fb 1ms 4s forwards}
html.js .room.is-live .room-fallback{display:none}
@keyframes room-fb{to{opacity:1}}

/* Wider: the room fills the screen under the header, capped so the mic and the first waves sit above the fold. */
@media (min-width:760px){
  .room{min-height:clamp(560px,calc(100svh - 190px),760px);padding-bottom:clamp(150px,19vh,210px)}
  .room .label{margin-bottom:18px}
  .room-lead{margin-top:22px;font-size:var(--fs-lead)}
  .room-actions{gap:14px;margin-top:30px}
}

/* ---------- programs: a running order, not cards ---------- */
.rundown-table{width:100%;border-collapse:collapse;text-align:left}
.rundown-table thead th{padding:0 0 14px;font:600 var(--fs-label)/1.3 var(--sans);letter-spacing:.01em;color:var(--accent-text);border-bottom:1px solid var(--ink)}
.rundown-table tbody th,.rundown-table td{display:block;padding:0;border:0;font-weight:400;vertical-align:top}
.rundown-table tbody tr{display:block;padding:26px 0 28px;border-bottom:1px solid var(--line)}
.rundown-table thead th+th{display:none}
.prog-title{display:block;font:400 var(--fs-m)/1.12 var(--serif);letter-spacing:-.012em;color:var(--fg-strong)}
.prog-sub{display:block;margin-top:8px;font-size:var(--fs-small);color:var(--fg)}
.rundown-table td{margin-top:16px;max-width:44ch;font-size:1.0625rem;color:var(--fg-strong);padding-left:16px;border-left:2px solid var(--gold)}
@media (min-width:900px){
  .rundown-table thead th+th{display:table-cell}
  .rundown-table tr{display:table-row}
  .rundown-table tbody tr{display:table-row}
  .rundown-table tbody th,.rundown-table td{display:table-cell;padding:30px 0 32px;border-bottom:1px solid var(--line)}
  .rundown-table tbody th{width:56%;padding-right:48px}
  .rundown-table td{margin:0;padding-left:28px;border-left:0;background:linear-gradient(var(--gold) 0 0) 0 34px/2px 1.4em no-repeat}
}

/* ---------- for planners: a spec sheet ---------- */
.planner-grid{display:grid;gap:36px}
.planner-head .lead{margin-top:20px;max-width:30em}
.planner-call{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-small)}
.planner-call a{font-weight:600;color:var(--fg-strong);white-space:nowrap}
.planner-list{display:grid;gap:0;margin:0}
.planner-list>div{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--line)}
.planner-list>div:last-child{border-bottom:1px solid var(--line)}
.planner-list dt{font:600 1.0625rem/1.35 var(--sans);color:var(--fg-strong)}
.planner-list dd{margin:0;max-width:52ch}
@media (min-width:900px){
  .planner-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .planner-head{position:sticky;top:120px}
  .planner-list>div{grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:32px;padding:24px 0}
}

/* ---------- on stage ---------- */
.stage{overflow-x:clip} /* the brackets sit outside the photo and scale in; never let them widen the page */
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.stage-grid figure{margin:0}
.stage-grid img{width:100%;height:auto;object-fit:cover}
.stage-frame{background:var(--blackout)}
.stage-frame img{aspect-ratio:1581/896}
.stage-frame .vf{--vf-inset:-11px}
.stage-side img{aspect-ratio:3/2}
.stage-grid figcaption{margin-top:12px;font-size:var(--fs-label);color:#a9b7cd}
@media (min-width:900px){
  .stage-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:24px 32px}
  /* the ballroom photo fills exactly the height of the two stacked photos, so top and bottom edges line up */
  .stage-main{grid-row:1/3;display:grid;grid-template-rows:minmax(0,1fr) auto}
  .stage-main .stage-frame{min-height:0}
  .stage-main img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:50% 45%}
}
.reviews{display:grid;gap:44px;margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.review{display:grid;gap:14px;align-content:start}
.review-poster{aspect-ratio:16/9;text-decoration:none;
  background:radial-gradient(90% 80% at 50% 120%,rgba(200,169,81,.22),transparent 62%),var(--blackout);box-shadow:inset 0 0 0 1px var(--navy-line)}
.review-poster img{position:absolute;inset:0}
.review-poster::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,36,.12) 30%,rgba(10,20,36,.8))}
.review-poster .vf,.review-poster .video-meta,.review-poster .video-play{z-index:2}
.review-poster .vf{--vf-inset:16px;--s:18px;opacity:.55;transition:opacity var(--t-base) var(--e-out)}
.review-poster:hover .vf,.review-poster:focus-visible .vf{opacity:1}
.review-poster .video-meta{padding:0 44px 30px;background:none;color:var(--white);text-shadow:0 1px 12px rgba(10,20,36,.85)}
.review .l3{margin-top:4px}
.review-title{font:600 1.0625rem/1.35 var(--sans);color:var(--white);letter-spacing:0}
.review .small{color:var(--mist);max-width:46ch}
.stage-more{margin-top:40px}
@media (min-width:760px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}

/* ---------- speak or coach ---------- */
.choose-title{max-width:20ch;margin-bottom:clamp(36px,5vw,56px)}
.choose-grid{display:grid;border-top:1px solid var(--ink)}
.choose-col{display:grid;gap:14px;align-content:start;padding:28px 0 32px}
.choose-col+.choose-col{border-top:1px solid var(--line)}
.choose-col p{max-width:46ch}
.choose-col .link{justify-self:start;margin-top:6px}
@media (min-width:900px){
  .choose-grid{grid-template-columns:1fr 1fr}
  .choose-col{padding:34px 48px 8px 0}
  .choose-col+.choose-col{border-top:0;border-left:1px solid var(--line);padding-left:48px}
}

/* ---------- availability ---------- */
.book-grid{display:grid;gap:36px}
.book-head .lead{margin-top:20px;max-width:28em}
.book-alt{margin-top:22px;color:#a9b7cd}
.book-alt a{color:var(--mist)}
.book-card{padding:26px 22px 22px;background:color-mix(in srgb,var(--navy) 78%,transparent);border:1px solid var(--navy-line);border-top:2px solid var(--gold);border-radius:var(--radius)}
.book-form{display:grid;gap:16px}
.book-form .form-note{margin-top:12px;color:#a9b7cd}
.book-form .form-note:empty{display:none}
.book-form [data-form-status]{color:var(--gold-bright)}
.book-form .input{min-height:48px}
/* the event field: an on-air tally lights while you are typing (port of 21st.dev Microphone Input Group) */
.mic-field{position:relative;display:block}
.mic-field .input{padding-right:2.4em;font:400 1.0625rem/1.5 var(--sans)}
.mic-field .tally{position:absolute;right:14px;top:16px;opacity:0;transition:opacity var(--t-base) var(--e-out)}
.mic-field:focus-within .tally{opacity:1}
@media (min-width:760px){
  .book-form{grid-template-columns:1fr 1fr;gap:18px 18px}
  .field--wide{grid-column:1/-1}
  .book-card{padding:32px 30px 26px}
}
@media (min-width:1100px){.book-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}

/* ---------- phone tap targets: every text link gets a 44px hit area ---------- */
@media (max-width:640px){
  .choose-col .link,.stage-more a{display:inline-flex;align-items:center;min-height:44px;background-position:0 calc(100% - 9px);padding-bottom:0}
  .book-alt a,.form-note a,.planner-call a{display:inline-flex;align-items:center;min-height:44px}
}


/* ---------- round 7: programs as a running-order stack, and the closing on-air sign ---------- */
.prog-stack{gap:20px;margin-top:4px}
.prog-card{display:grid;gap:22px;padding:28px 24px 30px;background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);border-radius:var(--radius);box-shadow:0 18px 40px -26px rgba(21,40,68,.35)}
.prog-head .prog-title{margin:0}
.prog-out{margin:0;padding-left:16px;border-left:2px solid var(--gold);max-width:44ch;font-size:1.0625rem;color:var(--fg-strong)}
.prog-lab{display:block;margin-bottom:6px;font:600 var(--fs-label)/1.3 var(--sans);letter-spacing:.01em;color:var(--accent-text)}
@media (min-width:900px){
  .prog-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start;padding:34px 40px 38px}
  .prog-card>.slate{grid-column:1/-1}
}
/* the stacked cards recede by scale only, so a card behind never shows through the one in front */
@supports (animation-timeline: view()){
  html.js:not(.motion-off) .prog-stack.fx-stack>.fx-card{animation-name:prog-recede}
  @keyframes prog-recede{to{transform:scale(.95);filter:brightness(.97)}}
}
@media (max-width:700px){html.js:not(.motion-off) .prog-stack.fx-stack>.fx-card{animation:none}}

/* ---------- booking questions ---------- */
.spk-faq-grid{display:grid;gap:36px clamp(32px,5vw,80px)}
.spk-faq h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
@media (min-width:960px){.spk-faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}.spk-faq h2{position:sticky;top:120px}}

/* reassurance right under the send button */
.book-assure{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:var(--fs-small);line-height:1.45;color:var(--mist)}
.book-assure li{position:relative;padding-left:20px}
.book-assure li::before{content:"";position:absolute;left:1px;top:.55em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}