/* The home: the front of house. His name and his line beside the lobby screen drifting through his pictures, then the
   credits: everything he has done, rolling as credits do at the end of a picture, every line a way into the piece on
   its page; a rail beside the roll jumps to a medium. Then the way to reach him. The words come from credits.json
   through tools/build_home.py. Sizes come from --u as on the rack. */

.pg {
  --u: calc(min(100cqw, 1400px) * 1.75 / 19);
  --fs-label: clamp(7.5px, calc(var(--u) * 0.068), 9.5px);
  --cap-w: max(64px, calc(var(--u) * 0.5)); --cap-h: calc(var(--cap-w) * 0.6); --fs-cap: max(8.5px, calc(var(--cap-w) * 0.14)); --bz: clamp(5px, calc(var(--u) * 0.05), 8px);
  --ink: #e4e0d7; --ink-dim: #9a9da5; --ink-line: rgba(228, 224, 215, 0.2); --engrave: 0 1px 0 rgba(0, 0, 0, 0.8); --silk: var(--stamp-font); --punch: var(--punch-font);
  --accent: var(--amber); --btn-wide: url(../assets/img/parts/btn-wide-dark.png); --btn-ink: #e3dfd6; --link: var(--amber);
  position: relative; max-width: 1400px; margin: 0 auto; padding: 0 0 56px; color: var(--ink);
}
@media (max-width: 999px) { .pg { --u: clamp(84px, 10.5cqw, 100px); --fs-label: 9px; } }
body { background: #000; }

/* the bar is glass, as on the section pages */
.sitebar { background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background-color 0.3s; }
body.scrolled .sitebar { background: rgba(10, 11, 13, 0.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

/* the one cap on the bar: Let's connect, at the right end, down to the way to reach him */
header.sitebar a.tbtn.wide.connect { flex: 0 0 auto; margin-left: auto; width: max-content; min-width: 0; max-width: none; height: 40px; padding: 0 1.1em; white-space: nowrap; text-decoration: none; color: var(--amber); } /* named in full: the bar's own rule for a cap sets a glyph's width, and it outranked a plainer name */ /* as wide as its words: the bar's own cap width is for a glyph, and the words ran out of it */
body:has(#menu:checked) .sitebar .connect { visibility: hidden; }
@media (max-width: 999px) { .sitebar .connect .lets { display: none; } } /* a narrow bar has room for the one word */
.reach { scroll-margin-top: calc(var(--bar-h, 64px) + 16px); }

/* ---------- the hero: his name and his line, the lobby screen beside them ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--u) * 0.5); align-items: center; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; }
.hero-kicker { margin: 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }
.who { margin: 10px 0 0; font-family: var(--punch); font-weight: 800; font-size: clamp(56px, min(calc(var(--u) * 0.9), 10vw), 118px); line-height: 0.9; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; }
.pitch { max-width: 34ch; margin: 18px 0 0; font-family: var(--punch); font-weight: 800; font-size: clamp(20px, calc(var(--u) * 0.2), 26px); line-height: 1.15; text-transform: uppercase; color: var(--amber); text-shadow: var(--engrave); }
.honours { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.hero .award { display: inline-flex; align-items: center; gap: 6px; max-width: 44ch; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--ink-dim); text-shadow: var(--engrave); }
.hero .award::before, .hero .award::after { content: ""; flex: none; width: 15px; height: 24px; background: url(../assets/img/laurel.svg) center / contain no-repeat; }
.hero .award::after { transform: scaleX(-1); }
.bio { max-width: 56ch; margin-top: 18px; font-size: clamp(14px, calc(var(--u) * 0.125), 16px); line-height: 1.55; color: #c9ccd2; }
.bio p { margin: 0; } .bio p + p { margin-top: 10px; }
/* the lobby screen: a flat panel in the rendered frame, his pictures crossing over one another, the one on it printed */
.lobby { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: var(--bz) solid transparent; border-image: url(../assets/img/parts/panel.png) 32 fill / var(--bz); border-radius: 2px; background: #000; color: inherit; text-decoration: none; outline: none; }
.lobby-face { position: absolute; inset: 0; overflow: hidden; border-radius: 1px; background: #000; }
.lobby-face::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url(../assets/img/parts/panel-glass.png) center / 100% 100% no-repeat; pointer-events: none; }
.lobby-beam { position: absolute; inset: 0; }
.lobby .shot { position: absolute; inset: calc(var(--bar, 0%) * -1) 0; width: 100%; height: calc(100% + 2 * var(--bar, 0%)); object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.lobby .shot.on { opacity: 1; }
.lobby-osd { position: absolute; left: 7%; bottom: 10%; z-index: 4; max-width: 86%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--lcd-font); font-size: clamp(14px, calc(var(--u) * 0.16), 20px); line-height: 1; color: var(--phosphor); text-shadow: 0 0 6px rgba(124, 255, 154, 0.8); pointer-events: none; transition: opacity 0.4s; }
.lobby.turning .lobby-osd { opacity: 0; }
.lobby:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* the rack's sheet sets a heading as a screen, with a trace drawn before it: none of that here */
.medium h2::before, .medium h2::after, .reach-lead::before, .reach-lead::after { content: none; display: none; }
.medium h2, .reach-lead { text-shadow: var(--engrave); filter: none; animation: none; }
/* ---------- the roll ---------- */
.roll { position: relative; display: grid; margin-top: calc(var(--u) * 0.3); padding: 0 calc(var(--u) * 0.3); }
.rollframe { position: relative; height: clamp(480px, 72vh, 820px); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent); }
.rollreel { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.rollreel::-webkit-scrollbar { display: none; }
.rollreel:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.rollcredits { padding: 10vh 0 44vh; } /* the first line stands near the top of the frame at rest; the last one rolls out above it */
.roll-pre, .roll-post { display: grid; justify-items: center; gap: 8px; margin: 0 0 calc(var(--u) * 0.5); font-family: var(--silk); font-size: max(10px, calc(var(--fs-label) * 1.2)); letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }
.roll-pre span:first-child { font-family: var(--punch); font-weight: 800; font-size: clamp(28px, calc(var(--u) * 0.34), 44px); letter-spacing: 0.04em; text-indent: 0; color: var(--ink); }
.roll-post { margin: calc(var(--u) * 0.5) 0 0; }
.roll-post a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(255, 176, 0, 0.4); }
.roll-post a:hover, .roll-post a:focus-visible { border-bottom-color: var(--amber); outline: none; }
.medium { margin: 0 0 calc(var(--u) * 0.45); }
.medium h2 { margin: 0 0 calc(var(--u) * 0.16); padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; display: block; width: auto; /* no plate: the rack's sheet gives a heading a label plate */ font-family: var(--silk); font-size: max(10px, calc(var(--fs-label) * 1.25)); letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; text-align: center; color: var(--amber); text-shadow: var(--engrave); }
.medium ol { list-style: none; margin: 0; padding: 0; }
/* a credit as credits are set: the part he played on the left, right-aligned to the gutter; the title on the right */
.cred { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 calc(var(--u) * 0.3); align-items: baseline; padding: 7px 0; color: inherit; text-decoration: none; outline: none; }
.cred .part { text-align: right; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: var(--ink-dim); text-shadow: var(--engrave); }
.cred .what { min-width: 0; }
.cred .ctitle { display: block; font-family: var(--punch); font-weight: 800; font-size: clamp(22px, calc(var(--u) * 0.22), 30px); line-height: 1; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; transition: color 0.2s; }
.cred .cmeta { display: block; margin-top: 4px; font-size: clamp(12px, calc(var(--u) * 0.105), 14px); line-height: 1.4; color: #b4b7bd; }
.cred .cyear { color: var(--ink-dim); }
.cred .cyear::before { content: "· "; }
.cred .cnote { display: inline-block; margin-top: 4px; font-family: var(--silk); font-size: max(8.5px, calc(var(--fs-label) * 0.95)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); text-shadow: var(--engrave); }
.cred:hover .ctitle, .cred:focus-visible .ctitle { color: var(--amber); }
.cred:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
/* the rail: the media in a row under the lobby screen, the one passing lit; a word takes the roll there */
.screenside { min-width: 0; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 12px 0 0; }
.jump button { padding: 9px 4px; border: 0; white-space: nowrap; background: none; font-family: var(--silk); font-size: max(8.5px, calc(var(--fs-label) * 0.95)); letter-spacing: 0.16em; text-indent: 0.16em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); cursor: pointer; transition: color 0.2s; }
.jump button:hover, .jump button:focus-visible { color: var(--ink); outline: none; }
.jump button.on { color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .lobby .shot { transition: none; } }

/* ---------- the way to reach him ---------- */
.reach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px calc(var(--u) * 0.4); align-items: center; margin-top: calc(var(--u) * 0.5); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0; border-top: 1px solid var(--ink-line); }
.reach .reach-lead { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; display: block; width: auto; font-family: var(--punch); font-weight: 800; font-size: clamp(36px, calc(var(--u) * 0.5), 64px); line-height: 0.92; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); }
.reach .reach-blurb { max-width: 46ch; margin: 12px 0 0; font-size: clamp(14px, calc(var(--u) * 0.125), 16px); line-height: 1.5; color: #c9ccd2; }
.caps { display: flex; flex-wrap: wrap; gap: 10px; }
.caps .tbtn { width: auto; min-width: var(--cap-w); height: max(40px, var(--cap-h)); padding: 0 1.4em; text-decoration: none; }
.caps .go { color: var(--amber); }

/* ---------- a phone or a tablet: the words over the screen, the rail across the top of the roll, a credit on two lines ---------- */
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px 0; text-align: center; }
  .pitch, .bio { margin-inline: auto; }
  .honours { justify-content: center; }
  .roll { margin-top: 36px; padding: 0 20px; }
  .rollframe { height: clamp(420px, 62vh, 640px); }
  .cred { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cred .part { text-align: left; }
  .reach { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 0; }
}