/* ==========================================================================
   Scheduling pages (Melvin Visser, Elian Ted Musch). Loaded after base.css.
   The person on the left, their portrait on the right, and below it their
   Google Calendar appointment schedule on a light card: Google's booking
   page is white, so it sits on paper instead of on the night sky.
   ========================================================================== */
.sc{background:var(--sky-1)}
.sc-hero{position:relative; padding:calc(var(--bar-h) + clamp(40px,8svh,112px)) 0 clamp(48px,8svh,104px); overflow:hidden}
.sc-top{position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:var(--s-5); align-items:center}
.sc-text{display:grid; gap:clamp(12px,2.2svh,26px); justify-items:start}
.sc-text h1{max-width:9em}
.sc-text h1 em{font-style:italic; font-weight:400; color:var(--mint)}
.sc-role{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text)}
.sc-intro{max-width:34em; font-size:clamp(17px,1.25vw,22px); color:var(--text-2); text-wrap:pretty}
.sc-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); margin-top:var(--s-1)}
.sc-photo{margin:0; overflow:hidden; aspect-ratio:1000/879}
.sc-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.sc-book{--from:var(--sky-1); --to:var(--sky-2)}
.sc-frame{margin-top:var(--s-4); overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.35)}
.sc-frame iframe{display:block; width:100%; height:min(860px,calc(100svh - var(--bar-h) - 40px)); min-height:620px; border:0}
.sc-note{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:var(--s-3); color:var(--text-2)}
@media (max-width:900px){
  .sc-top{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  .sc-photo{max-width:420px}
  .sc-frame{border-radius:14px}
  .sc-frame iframe{height:760px; min-height:0}
}