@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
/* Layout and styling adapted from jeff.henshaw.org */
/* ------------------------- DOCUMENT SETUP ------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  background-color: #ffffff;
  color: #444444;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ------------------------- HOME PAGE ------------------------- */
/* Depth: the microphone is small and far back on the wall; the type is in
   front of it, sharp, overlapping the edge of the mic's shadow, with a faint
   shadow of its own. Text is positioned in % of the stage and sized in
   container units so the whole composition scales as one piece.
   Identity-block structure adapted from jeff.henshaw.org. */
body.home {
  min-height: 100vh;
  background: #EBE1D3;
  color: #282828;
  -webkit-font-smoothing: antialiased;
}
.stage {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1600 / 1000;
  container-type: inline-size;
  overflow: hidden;
  --px: 0;
  --py: 0;
}
.stage-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -5px), 0);
  transition: transform .25s ease-out;
}
.stage-text {
  position: absolute;
  left: 37%;
  top: 31%;
  font-size: clamp(15px, 1.28cqw, 20px);
  line-height: 1.6;
  text-align: left;
  color: #1f1b17;

  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 8px), 0);
  transition: transform .25s ease-out;
}
.nameField {
  font-size: 2.1em;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: none;
  line-height: 1.2;
  margin: 0 0 1.1em;
  color: #1f1b17;
}
/* The type floats above the wall: a tight contact shadow plus two longer, softer ones (light from the upper left, same as the mic's shadow). Sizes in em so it scales with the stage. */
.stage-text { text-shadow: .06em .1em .08em rgba(70, 52, 34, .20), .30em .5em .7em rgba(70, 52, 34, .26), .66em 1.1em 1.6em rgba(70, 52, 34, .20); }
.stage-text .nameField { text-shadow: .03em .05em .05em rgba(70, 52, 34, .22), .14em .22em .3em rgba(70, 52, 34, .28), .31em .5em .75em rgba(70, 52, 34, .22); }
.stage-text .menu-icon svg { filter: drop-shadow(.19em .3em .35em rgba(70, 52, 34, .32)); }
.entry { margin: 0 0 .95em; line-height: 1.45; }
.titleline {
  display: inline-block;
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: .15em;
}
.entry a { color: #1f1b17; text-decoration: none; font-size: 1em; font-weight: 400; letter-spacing: .01em; transition: color .2s ease; }
.entry a:hover, .entry a:focus-visible { color: #DD4C4F; }
.menu { margin-top: 1.5em; margin-left: -6px; display: flex; gap: 6px; }
.menu-icon { display: inline-block; padding: 6px; color: #1f1b17; }
.menu-icon a { display: inline-flex; align-items: center; text-decoration: none !important; color: inherit; transition: color .2s ease, transform .2s ease; }
.menu-icon a:hover { color: #DD4C4F; transform: translateY(-1px); }
.menu-icon svg { width: 20px; height: 20px; }

.subtitle { font-size: 1.15em; font-weight: 400; letter-spacing: .02em; margin-bottom: 1em; text-transform: lowercase; }
.roles { font-size: .8em; font-weight: 500; letter-spacing: .1em; text-transform: lowercase; color: rgba(31, 27, 23, .6); line-height: 1.9; }
.roles span { white-space: nowrap; }
.roles .dot { margin: 0 .7em; opacity: .7; }

@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.stage-text .nameField, .stage-text .entry, .stage-text .menu-icon { opacity: 0; animation: slideIn .6s ease-out forwards; }
.stage-text .entry:nth-of-type(2) { animation-delay: .15s; }
.stage-text .entry:nth-of-type(3) { animation-delay: .3s; }
.stage-text .menu-icon:nth-of-type(1) { animation-delay: .6s; }
.stage-text .menu-icon:nth-of-type(2) { animation-delay: .7s; }
.stage-text .menu-icon:nth-of-type(3) { animation-delay: .8s; }
.stage-text .menu-icon:nth-of-type(4) { animation-delay: .9s; }
.stage-text .menu-icon:nth-of-type(5) { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .stage-text .nameField, .stage-text .entry, .stage-text .menu-icon { opacity: 1; animation: none; }
  .stage-photo, .stage-text { transform: none !important; transition: none; }
}

/* Phones and any tall (portrait) screen, tablets included: the picture is
   cropped to the mic and its shadow, and the text overlaps the bottom of the
   shadow so it still sits in front of it. Sizes use vw so it scales. */
@media (max-width: 544px), (max-aspect-ratio: 11/10) {
  .stage { aspect-ratio: auto; max-width: none; display: flex; flex-direction: column; }
  .stage-photo { position: relative; inset: auto; display: block; width: 168%; max-width: none; height: auto; margin: 0 0 -72vw -66%; transform: none !important; }
  .stage-text { position: relative; left: auto; top: auto; padding: 0 12vw 56px; font-size: clamp(16px, 2.9vw, 27px); transform: none !important; }
  .nameField { font-size: 2em; letter-spacing: .08em; }
  .roles { letter-spacing: .09em; }
  .roles .dot { margin: 0 .4em; }
}
@media (min-width: 545px) and (max-aspect-ratio: 11/10) {
  .stage-photo { width: 120%; margin: 0 0 -49vw -22%; }
}
@media (max-width: 544px) {
}



/* Easter egg: click the microphone and it sways on its boom (shadow with it); the subtitle briefly answers. */
/* The cutout's boom and wall shadow run off its top edge. Tilting (or the mouse parallax) swings that flat edge down into view, so the photo sits 1.8% higher and the stage clips the overhang. The lower half of the photo is empty, so nothing is lost. */
.stage-photo { transform-origin: 77.5% 0; translate: 0 -1.8%; scale: .5; }
.stage-photo.sway { animation: mic-sway 2.8s ease-in-out; }
@keyframes mic-sway {
  0%   { rotate: 0deg; }
  16%  { rotate: -2.4deg; }
  36%  { rotate: 1.7deg; }
  54%  { rotate: -1.1deg; }
  70%  { rotate: .6deg; }
  85%  { rotate: -.25deg; }
  100% { rotate: 0deg; }
}
.subtitle { transition: opacity .3s ease; }
.subtitle.swap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .stage-photo.sway { animation: none; } }
/* The intro slide-in holds the subtitle at full opacity (animation fill), which would stop it fading; once the egg runs, hand opacity back to a plain transition. */
.stage-text .entry.subtitle.ready { animation: none; opacity: 1; transition: opacity .7s ease; }
.stage-text .entry.subtitle.ready.swap { opacity: 0; }

/* ------------------------- SCHEDULE OPTIONS ------------------------- */
.options { width: 22em; max-width: 100%; display: grid; gap: .6em; margin-top: 1.5em; }
.stage-text .options { text-shadow: none; }
.option { display: block; color: #1f1b17; text-decoration: none; padding: .8em 1.05em .85em; border-radius: .95em;
  background: rgba(255, 255, 255, .42); box-shadow: .06em .18em .55em rgba(70, 52, 34, .12); -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.option:hover, .option:focus-visible { background: rgba(255, 255, 255, .72); transform: translateY(-1px); box-shadow: .08em .3em .8em rgba(70, 52, 34, .18); outline: none; }
.option:focus-visible { box-shadow: 0 0 0 2px #DD4C4F, .08em .3em .8em rgba(70, 52, 34, .18); }
.option:active { transform: scale(.985); }
.option .opt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.option .opt-name { font-size: 1.08em; font-weight: 500; letter-spacing: .01em; text-transform: lowercase; }
.option .opt-len { font-size: .8em; font-weight: 500; letter-spacing: .1em; text-transform: lowercase; color: rgba(31, 27, 23, .6); white-space: nowrap; }
.option .opt-desc { display: block; margin-top: .15em; font-size: .85em; line-height: 1.4; color: rgba(31, 27, 23, .66); }
.stage-text .foot { text-shadow: none; }
.stage-text .mark { margin: 0 0 1.2em; text-shadow: none; }
.mark svg { display: block; width: 8.8em; height: auto; color: #1f1b17; filter: drop-shadow(.19em .3em .35em rgba(70, 52, 34, .30)); }
.foot { margin-top: 1.4em; font-size: .78em; letter-spacing: .04em; color: rgba(31, 27, 23, .55); }
.foot a { color: inherit; text-decoration: underline; text-decoration-color: rgba(31, 27, 23, .3); text-underline-offset: .2em; }
.foot a:hover, .foot a:focus-visible { color: #DD4C4F; }
@media (max-width: 544px), (max-aspect-ratio: 11/10) { .options { width: 100%; max-width: 30em; } .option { padding: .95em 1.1em 1em; } }