/* Home: a portrait and a scroll-driven stage (see home.js). Shared parts are in mono.css. */
/* The stage: the photograph and three canvases, fixed behind the copy. */
/* On touch screens the stage reaches beyond the screen, under the browser's toolbars (--os). */
:root{--os:0px}
@media (pointer:coarse){:root{--os:12vh}}
.stage{position:fixed;left:0;top:calc(-1 * var(--os));width:100%;height:calc(100vh + 2 * var(--os));height:calc(100lvh + 2 * var(--os));z-index:2;pointer-events:none}
.stage-photo{z-index:1;max-width:none;object-fit:cover;object-position:50% 24%;filter:grayscale(1);will-change:transform}
.js:not(.cover-ready) .stage-photo{visibility:hidden}
html:not(.js) .stage-photo{position:absolute;top:0;height:100vh;height:100svh}
html:not(.js) canvas.stage{display:none}

.scene{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene-intro{height:150vh;z-index:3}
.scene-physics{height:330vh;z-index:3}
.scene-cello{height:290vh;z-index:3}

/* Intro: the name is drawn cut out of the page (home.js); this heading is for screen readers and
   for browsers without JavaScript, where it sits over the photograph. */
.intro-name{position:absolute;left:var(--pad);top:max(13svh,86px);font-size:min(15.2vw,27svh);line-height:.8;font-weight:800;font-stretch:125%;letter-spacing:-.02em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;white-space:nowrap}
.intro-line{display:block}
.js .intro-name{width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Inside the top bar, so they invert against the page, the photograph and the dark scene alike. */
.intro-role,.intro-cue{margin:0;pointer-events:none}
.menu-open .intro-role,.menu-open .intro-cue{display:none}
.intro-role{position:fixed;left:var(--pad);bottom:var(--pad);display:flex;flex-direction:column;font-size:.875rem;font-weight:500;line-height:1.45}
.intro-role span+span{opacity:.6}
.intro-cue{position:fixed;right:var(--pad);bottom:var(--pad);display:flex;align-items:center;gap:12px;font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.intro-cue:after{content:'';width:54px;height:1px;background:currentColor;transform-origin:left;animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{0%{transform:scaleX(0)}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* Copy for the physics and cello scenes. */
.copy{position:absolute;left:var(--pad);top:50%;width:min(36vw,540px);transform:translateY(-50%)}
.copy-title{font-size:clamp(3.6rem,8.4vw,9.5rem);line-height:.82;font-weight:760;font-stretch:122%;letter-spacing:-.035em;text-transform:uppercase;perspective:700px;margin-bottom:.34em;white-space:nowrap}
.copy-text{font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.55;max-width:31em}
.copy-link{display:inline-flex;margin-top:1.6em;font-weight:600;font-stretch:112%;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.js .copy-text,.js .copy-link{opacity:var(--in,1);transform:translateY(calc((1 - var(--in,1))*24px))}
.js .copy-link:focus-visible{opacity:1;transform:none}
.caption{pointer-events:none;position:absolute;right:var(--pad);bottom:var(--pad);font-size:.8125rem;font-weight:500;letter-spacing:.02em;opacity:.6}
.js .caption{opacity:calc(var(--in,1)*.6)}

/* Teaching: a light section with the book, between the cello scene and the contact footer. */
.home-teaching{position:relative;z-index:5;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);align-items:center;gap:clamp(30px,6vw,110px);padding:clamp(90px,14vh,160px) var(--pad);background:var(--light);color:var(--dark)}
.teach-copy .copy-title{font-size:clamp(3rem,7vw,8rem);margin-bottom:.3em}
.teach-copy .copy-text{max-width:30em}
.teach-copy em{font-style:italic}
.teach-links{display:flex;flex-wrap:wrap;gap:0 30px}
.teach-book{display:block;perspective:1200px}
.teach-book .book3d{max-width:400px;margin:0 auto}

/* Narrow and portrait screens */
@media (max-aspect-ratio:1/1),(max-width:760px){
  .intro-name{top:max(12svh,78px);font-size:min(19vw,15svh)}
  .stage-photo{object-position:66% 30%}
  .intro-cue{display:none}
  .copy{top:auto;bottom:calc(var(--pad) + 5svh);right:var(--pad);width:auto;transform:none}
  .copy-title{font-size:min(19vw,12svh)}
  .caption{top:max(12svh,78px);bottom:auto}
  .scene-cello .caption{top:calc(50svh + 14px);right:auto;left:50%;translate:-50% 0;white-space:nowrap}
  .home-teaching{grid-template-columns:minmax(0,1fr);align-content:center}
  .teach-book .book3d{max-width:min(260px,62vw)}
}
/* Short landscape screens (phones on their side). */
@media (min-aspect-ratio:1/1) and (max-height:520px){
  .copy{width:min(46vw,540px)}
  .copy-title{font-size:min(8.4vw,16svh);margin-bottom:.25em}
  .copy-text{font-size:.8125rem;line-height:1.45}
  .copy-link{margin-top:.9em}
  .intro-role{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .intro-cue:after{animation:none}
}