/* Arianna Cowan — the playbill.
   A theatre program in two house colors: program yellow and her own hot pink
   (sampled from the magenta top in photo1). Black house, white coated pages. */

@font-face {
  font-family: "League Gothic";
  src: url("../fonts/league-gothic-latin-standard-normal.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* lenis.css (inlined) */
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

html:not(.js), html.serif-ready { --serif: "Source Serif 4", Georgia, serif; }

:root {
  --y: #ffd000;
  --ink: #0b0b0b;
  --paper: #ffffff;
  --pink: #ff2d8a;        /* her hot pink: ink on it 5.62:1, on the house 5.41:1 */
  --pink-deep: #a80f55;   /* pink as a line/text on yellow (4.98:1) or white */
  --house-text: #d9d9d9;

  --lg: "League Gothic", "Arial Narrow", sans-serif;
  /* the bio serif is switched on by main.js after load (html.serif-ready);
     without script it is used from the start */
  --serif: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.16, 1, .3, 1);       /* exponential ease-out */
  --bar: 56px;
  /* air above every section heading: always more than the heading-to-content
     gap below its double rule */
  --sec-top: clamp(52px, 7vw, 104px);
  /* the cover masthead's rendered size, from the cover's own geometry
     (height --h below, 5.5:8.5 page, name at 90cqi / 4.498): the contact
     name is held just under it so the masthead stays the loudest type */
  --mast-fs: calc(min(100svh - var(--bar) - 72px, 940px, (100vw - 260px) / 1.36) * 5.5 / 8.5 * .9 / 4.498);

  --pswp-bg: #0b0b0b;
  --pswp-placeholder-bg: #1a1a1a;
  --pswp-icon-color: #ffd000;
  --pswp-icon-color-secondary: #0b0b0b;
  --pswp-icon-stroke-color: #0b0b0b;
  --pswp-preloader-color: rgba(255, 208, 0, .35);
  --pswp-preloader-color-secondary: #ffd000;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
  scrollbar-color: var(--pink) var(--ink);
  caret-color: var(--pink);
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html.lenis { scroll-behavior: auto; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--pink); border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--y); }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.6;
  background: var(--ink);
  overflow-x: clip;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: var(--ink); }
.photos ::selection, .backpage__p ::selection { background: var(--ink); color: var(--pink); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2 { font-weight: 400; margin: 0; }

/* focus ring: a pink + black double ring. Pink outside a black gap on the house
   and on white; black outside a pink gap on yellow and on the pink pages */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ink);
}
.on-y :focus-visible,
.photos :focus-visible,
.backpage__p :focus-visible,
.drawer :focus-visible,
.topbar.is-yellow :focus-visible,
.topbar.is-open :focus-visible {
  outline-color: var(--ink);
  box-shadow: 0 0 0 2px var(--pink);
}

/* League Gothic program voice */
.mast__name, .topbar, .drawer,
.bill, .stretch, .bio__name, .credit, .foot, .skip {
  font-family: var(--lg);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
}

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  background: var(--y); color: var(--ink);
  font-size: 17px; line-height: 1; letter-spacing: .1em;
  padding: 13px 16px 11px; text-decoration: none;
  transform: translateY(-180%);
  transition: transform .45s var(--ease), background-color .2s;
}
.skip:focus-visible { transform: none; }
.skip:hover { background: var(--pink); }

/* double program rule: 3px + 1px */
.dbl {
  height: 6px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ── the house + the cover ─────────────────────────────────────────────── */

.stage {
  /* the two objects share one height: the program (5.5:8.5) and the poster case */
  --h: min(calc(100svh - var(--bar) - 72px), 940px, calc((100vw - 260px) / 1.36));
  position: relative;
  min-height: 100svh;
  overflow-x: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  --gap: clamp(64px, 8vw, 136px);
  /* the cover's centre: the pair is centred, so it sits half the poster + gap left of middle */
  --spot-x: calc(50% - (var(--gap) + (var(--h) - 46px) * .625 + 46px) / 2);
  --spot-y: calc(50% + var(--bar) / 2);
  gap: var(--gap);
  padding: calc(var(--bar) + 36px) 48px 36px;
  /* a pink follow-spot on the house behind the program: a tall pool that holds
     its strength just past the program's edges, then falls off softly (no hard
     rim), over a faint wide spill that warms the rest of the house */
  background:
    radial-gradient(ellipse calc(var(--h) * 1.0) calc(var(--h) * 1.25) at var(--spot-x) var(--spot-y),
      rgba(255, 45, 138, .46) 0%, rgba(255, 45, 138, .44) 30%, rgba(255, 45, 138, .36) 40%,
      rgba(255, 45, 138, .2) 53%, rgba(255, 45, 138, .07) 65%, rgba(255, 45, 138, 0) 75%),
    radial-gradient(ellipse calc(var(--h) * 2.2) calc(var(--h) * 1.6) at var(--spot-x) var(--spot-y), rgba(255, 45, 138, .06), rgba(255, 45, 138, 0) 70%),
    var(--ink);
}

.cover {
  position: relative;
  flex: none;
  height: var(--h);
  aspect-ratio: 5.5 / 8.5;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-rows: 22% 6px minmax(0, 1fr) auto;
  row-gap: 0;
  container-type: inline-size;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .03),
    0 34px 60px -30px rgba(0, 0, 0, .9),
    0 60px 90px -40px rgba(0, 0, 0, .7);
}
/* saddle-stitch fold on the left edge + coated-stock sheen */
.cover::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.05) 5px, rgba(0,0,0,0) 14px),
    linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%);
}

.mast {
  background: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3cqi 5cqi 0;
  overflow: hidden;
}
.mast__name {
  /* logotype: fills the band — 4.498em is the measured advance of the name at wdth 100 */
  font-size: calc(90cqi / 4.498);
  line-height: .86;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variation-settings: "wdth" 100;
}
.js-motion .mast__name { animation: marquee 1.6s var(--ease) .25s both; }
@keyframes marquee {
  from { font-variation-settings: "wdth" 75; letter-spacing: -.02em; }
  to   { font-variation-settings: "wdth" 100; letter-spacing: -.01em; }
}

.cover .dbl { background: var(--paper); border-top-color: var(--pink); }

.cover__photo { position: relative; min-height: 0; }
.ph--cover, .ph--cover .ph__in, .ph--cover picture, .ph--cover img { height: 100%; width: 100%; }
.ph--cover img { object-fit: cover; object-position: 60% 32%; }

.bill {
  margin: 0;
  border-top: 1px solid var(--ink);
  background: var(--pink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.2cqi;
  padding: 3.3cqi 5cqi 3cqi;
  font-size: max(16px, 3.5cqi);
  line-height: 1;
  letter-spacing: .12em;
}
.dot {
  display: inline-block;
  width: .26em; height: .26em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-.08em);
}

/* ── photo links (every photo opens the lightbox) ─────────────────────── */

.ph {
  position: relative;
  display: block;
  text-decoration: none;
  transition: box-shadow .6s var(--ease), transform .6s var(--ease);
}
.ph__in { position: relative; display: block; overflow: hidden; }
.ph picture { display: block; }
.ph__in::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 3px var(--y);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.ph img { transition: transform 1s var(--ease); }
.ph:hover img, .ph:focus-visible img { transform: scale(1.03); }
.ph:hover .ph__in::after, .ph:focus-visible .ph__in::after { opacity: 1; }
.ph:hover, .ph:focus-visible { color: var(--y); } /* carries the yellow keyline colour */
.ph:hover { box-shadow: 0 22px 40px -22px rgba(11, 11, 11, .55); }
.ph--cover:hover { box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .2); }
.ph:focus-visible { outline-offset: -3px; box-shadow: none; }

/* ── the lobby poster case (book cover, never cropped) ────────────────── */

.lobby {
  --light: .8;
  position: relative;
  margin: 0;
  isolation: isolate;
}
/* the pink pool the picture light throws on the wall behind the case */
.lobby::before {
  content: "";
  position: absolute;
  left: -46%; right: -46%; top: -16%; height: 118%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 20% at 50% 3%, rgba(255, 45, 138, .5), rgba(255, 45, 138, .16) 60%, rgba(255, 45, 138, 0) 100%),
    radial-gradient(ellipse 46% 64% at 50% 6%, rgba(255, 45, 138, .45) 0%, rgba(255, 45, 138, .36) 45%, rgba(255, 45, 138, .2) 65%, rgba(255, 45, 138, .07) 82%, rgba(255, 45, 138, 0) 96%);
  /* the wall above the hood stays dark: the light only falls downward */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 11%);
  opacity: var(--light);
  transition: opacity .8s var(--ease);
}
@property --light { syntax: "<number>"; inherits: true; initial-value: .8; }
/* the picture light: a slim brass hood above the case */
.lobby::after {
  content: "";
  position: absolute;
  left: 50%; top: -30px;
  width: 38%; height: 9px;
  translate: -50% 0;
  border-radius: 2px 2px 6px 6px;
  background: linear-gradient(#8a6d3b, #3d2f18 70%, #1b150c);
  box-shadow: 0 1px 0 rgba(255, 232, 180, .25) inset, 0 3px 5px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.lobby:has(.case:hover), .lobby:has(.case:focus-visible) { --light: 1; }

.case {
  position: relative;
  display: block;
  padding: 11px;
  background: linear-gradient(150deg, #4a3c24 0%, #1c170f 28%, #2f2718 55%, #110e09 80%, #3a2f1c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 228, 170, .16),
    inset 0 1px 0 rgba(255, 238, 200, .28),
    0 2px 0 rgba(0, 0, 0, .6),
    0 40px 60px -34px rgba(0, 0, 0, .95),
    0 16px 30px -18px rgba(0, 0, 0, .8);
  text-decoration: none;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.case__mat {
  display: block;
  padding: 12px;
  background: #0f0d0c;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .7);
}
.case picture { display: block; outline: 1px solid var(--pink); outline-offset: 5px; }
.case__art { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 2560; object-fit: contain; background: #120d14; }
.case:hover, .case:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 228, 170, .22),
    inset 0 1px 0 rgba(255, 238, 200, .34),
    0 2px 0 rgba(0, 0, 0, .6),
    0 56px 70px -34px rgba(0, 0, 0, .95),
    0 22px 40px -20px rgba(0, 0, 0, .85);
}
.case:focus-visible { outline-offset: 4px; }

.lobby--hero { flex: none; }
.lobby--hero .case__art { height: calc(var(--h) - 46px); width: auto; }

/* ── top bar (all widths) + mobile drawer ──────────────────────────────── */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(6px, 2.4vw, 40px) 0 clamp(16px, 2.4vw, 40px);
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid #222;
}
/* the pink hairline under the running head, on black and on yellow alike */
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  height: 2px;
  background: var(--pink);
  pointer-events: none;
}
.topbar__fill {
  position: absolute; inset: 0;
  background: var(--y);
  clip-path: inset(100% 0 0 0);
  border-bottom: 1px solid var(--ink);
}
.topbar__name {
  position: relative;
  font-size: 26px; line-height: 1; letter-spacing: .04em;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  padding: 8px 0 5px;
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease), opacity .4s var(--ease), transform .6s var(--ease);
}
.topbar__name:hover { color: var(--y); text-decoration-color: var(--pink); }
.topbar__nav { position: relative; }
.topbar__nav ul { display: flex; gap: clamp(22px, 2.6vw, 40px); }
.topbar__nav a {
  display: block;
  padding: 9px 8px 6px;
  margin-inline: -8px;
  font-size: 18px; line-height: 1; letter-spacing: .12em;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color .3s var(--ease), background-color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.topbar__nav a:hover { color: var(--y); }
.topbar__nav a[aria-current] { text-decoration-color: var(--pink); }
.topbar.is-yellow .topbar__name, .topbar.is-yellow .topbar__nav a { color: var(--ink); }
.topbar.is-yellow .topbar__nav a[aria-current] { text-decoration-color: var(--pink-deep); text-decoration-thickness: 3px; }
.topbar.is-yellow .topbar__name:hover { color: var(--ink); text-decoration-color: var(--pink-deep); }
.topbar.is-yellow .topbar__nav a:hover { background: var(--ink); color: var(--y); text-decoration-color: transparent; }
.topbar.is-yellow { border-bottom-color: var(--ink); }

/* the ink twin of the bar text, riding on its own clipped yellow above the real text */
.topbar__ghost {
  position: absolute; inset: 0 0 -1px 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: inherit;
  background: var(--y);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}
.topbar__ghost .topbar__name, .topbar__ghost .menu-btn { color: var(--ink) !important; }
.topbar__link {
  display: block;
  padding: 9px 8px 6px; margin-inline: -8px;
  font-size: 18px; line-height: 1; letter-spacing: .12em;
  text-decoration: underline 2px transparent;
  text-underline-offset: 6px;
}
.topbar__link.is-cur { text-decoration-color: var(--pink-deep); text-decoration-thickness: 3px; }
/* once the yellow fills the bar the real (interactive) text has turned ink
   underneath; the twin steps aside after that colour change has settled */
.topbar.is-yellow .topbar__ghost { visibility: hidden; transition: visibility 0s .45s; }
.topbar.is-open .topbar__ghost { visibility: hidden; transition: none; }

.menu-btn, .drawer { display: none; }

@media (max-width: 899.98px) {
  :root {
    --bar: 52px;
    --mast-fs: calc(min(100vw, 640px) * .9 / 4.498);   /* cover fills the width here */
  }
  /* the Contents button only exists with script; without it the plain
     contents line stays in the bar (and the hidden-until-scrolled name steps out) */
  .js .topbar__nav { display: none; }
  html:not(.js) .topbar__name { display: none; }
  html:not(.js) .topbar__nav { margin-inline: auto; }
  html:not(.js) .topbar__nav ul { gap: clamp(16px, 5vw, 28px); }
  .topbar__name { font-size: 24px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s .4s; }
  .topbar.is-named .topbar__name { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .6s var(--ease); }

  .js .menu-btn { display: inline-flex; }
  .menu-btn {
    position: relative;
    align-items: center; gap: 12px;
    min-height: 44px;
    padding: 4px 12px 0;
    background: none; border: 0; border-radius: 0;
    color: #fff;
    font: inherit; font-size: 18px; line-height: 1; letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s var(--ease), background-color .3s var(--ease);
  }
  .menu-btn__icon { fill: currentColor; margin-top: -4px; }
  .menu-btn__icon rect { transition: transform .5s var(--ease); transform-box: fill-box; transform-origin: center; }
  .menu-btn[aria-expanded="true"] .l1 { transform: translateY(3.4px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .l2 { transform: translateY(-4.4px) rotate(-45deg) scaleY(2.4); }
  .menu-btn:hover { color: var(--y); }
  .topbar.is-yellow .menu-btn { color: var(--ink); }
  .topbar.is-yellow .menu-btn:hover { background: var(--ink); color: var(--y); }
  .topbar.is-open .topbar__fill { clip-path: inset(0 0 0 0) !important; }
  .topbar.is-open .menu-btn, .topbar.is-open .topbar__name { color: var(--ink); }

  .drawer {
    display: block;
    position: fixed; inset: var(--bar) 0 0 0; z-index: 55;
    background: var(--y);
    color: var(--ink);
    padding: 20px 20px 32px;
    border-top: 1px solid var(--ink);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .7s var(--ease), visibility 0s linear .7s;
  }
  .drawer.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease); }
  .drawer li { border-bottom: 1px solid var(--ink); opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .8s var(--ease); }
  .drawer li:first-child { border-top: 3px solid var(--ink); }
  .drawer.is-open li { opacity: 1; transform: none; }
  .drawer.is-open li:nth-child(2) { transition-delay: .05s; }
  .drawer.is-open li:nth-child(3) { transition-delay: .1s; }
  .drawer.is-open li:nth-child(4) { transition-delay: .15s; }
  .drawer a {
    display: block;
    padding: 18px 0 12px;
    font-size: clamp(56px, 17vw, 76px);
    line-height: .9;
    letter-spacing: .01em;
    color: var(--ink);
    text-decoration: none;
    padding-inline: 12px;
    margin-inline: -12px;
    background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 0 / 0% 100%;
    transition: transform .6s var(--ease), background-size .6s var(--ease);
  }
  .drawer a:hover { background-size: 100% 100%; transform: translateX(8px); }

  /* cover edge to edge under the bar, then the poster case below it */
  .stage {
    min-height: 0;
    display: block;
    padding: var(--bar) 0 0;
    /* on a phone the program fills the width, so the pink spot spills out
       onto the house just under its bottom edge */
    background:
      radial-gradient(ellipse 78% 120px at 50% calc(var(--bar) + min(100vw, 640px) * 8.5 / 5.5), rgba(255, 45, 138, .42), rgba(255, 45, 138, .12) 58%, rgba(255, 45, 138, 0) 100%),
      var(--ink);
  }
  .cover {
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    box-shadow: none;
  }
  .lobby--hero { width: min(78vw, 360px); margin: 86px auto 44px; }
  .lobby--hero .case__art { width: 100%; height: auto; }
}

/* ── interior program pages ────────────────────────────────────────────── */

.sheet {
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  padding: var(--sec-top) clamp(20px, 5.4vw, 76px) clamp(64px, 8vw, 112px);
}
main { padding-top: clamp(20px, 5vw, 72px); }
.sheet + .sheet { margin-top: clamp(14px, 4.5vw, 56px); }

.stretch {
  --wdth: 100;
  --trk: .012;
  font-size: clamp(3.75rem, 9vw, 6rem);
  line-height: .88;
  letter-spacing: calc(var(--trk) * 1em);
  font-variation-settings: "wdth" var(--wdth);
  text-wrap: balance;
}
.stretch + .dbl { margin: 18px 0 clamp(28px, 4vw, 44px); }

/* about */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.about { padding-bottom: clamp(48px, 5.5vw, 80px); }
.print { margin: 0; max-width: 22rem; }
/* the print shown as a 4:5 headshot: both faces sit in its top half */
.ph--print .ph__in { aspect-ratio: 4 / 5; }
.ph--print picture, .ph--print img { width: 100%; height: 100%; }
.ph--print img { object-fit: cover; object-position: 50% 8%; }
.ph--print {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 1px 2px rgba(11, 11, 11, .08), 0 18px 36px -20px rgba(11, 11, 11, .4);
  transform: rotate(-1deg);
}
.ph--print:hover { box-shadow: 0 1px 2px rgba(11, 11, 11, .08), 0 30px 50px -24px rgba(11, 11, 11, .5); transform: rotate(-1deg) translateY(-3px); }
.print figcaption {
  margin-top: 22px;
  max-width: 40ch;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
.about__copy { padding-top: 0; }
.bio {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1.1875rem, 1.1rem + .25vw, 1.3125rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-weight: 400;
  text-wrap: pretty;
  hanging-punctuation: first;
}
.bio__name {
  font-size: 1.42em;
  line-height: 1;
  letter-spacing: .05em;
  margin-right: .12em;
  vertical-align: -.04em;
}

/* photos: a production-photo spread on the full hot-pink page */
.sheet.photos { background: var(--pink); color: var(--ink); }
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}
.spread .ph__in { border: 1px solid var(--ink); height: 100%; }
.spread picture, .spread img { width: 100%; height: 100%; }
.spread img { object-fit: cover; }
.spread__a { grid-row: 1 / span 2; }
.spread__a .ph__in { aspect-ratio: 614 / 883; }   /* the whole (trimmed) photo, uncropped */
.spread__b .ph__in { aspect-ratio: 1 / 1; }
.spread__b img { object-position: 60% 40%; }
.spread__c { min-height: 0; }
.spread__c .ph__in { min-height: 0; }
.spread__c picture { position: absolute; inset: 0; }
.spread__c img { object-position: 50% 10%; }
@media (min-width: 900px) {
  .spread__b .ph__in { aspect-ratio: 4 / 3; }
  .spread__b img { object-position: 60% 30%; }
}

/* the book: the lobby wall, the poster hung under its light */
.lobbyband {
  /* one ground: the wall starts at the photo page's foot (the page gap is wall,
     not house) and runs straight into the back cover, no hairlines, no strip
     of house between. The wall ends a short step under the credit: less air
     below the book than above the back page's heading, so it closes on purpose */
  padding: calc(var(--sec-top) + clamp(14px, 4.5vw, 56px)) 0 clamp(56px, 4.6vw, 72px);
  color: #fff;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255, 45, 138, .06), rgba(255, 45, 138, 0) 70%),
    #121010;
  overflow-x: clip;
}
.lobbyband__in { width: min(100% - 48px, 1240px); margin: 0 auto; padding: 0 clamp(20px, 5.4vw, 76px); }
.lobbyband .dbl { border-color: #fff; }
/* the poster and its lobby card: the card (her description of the book) hangs
   beside the case on desktop, under it on phones. The top margin is the room the
   picture light needs above the case */
.book__stage { margin-top: clamp(88px, 9vw, 120px); }
.lobby--big { width: clamp(280px, 34vw, 470px); margin: 0 auto; }
.synopsis {
  /* her words, one step up from the bio: short enough to be set as a card */
  font-size: clamp(1.375rem, .9rem + 1.1vw, 1.875rem);
  max-width: 22em;
}
.lobbyband .synopsis__rule { border-color: var(--pink); margin-bottom: 1.1em; }
.synopsis__text {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .004em;     /* light on the dark wall reads a touch tight */
  color: #fff;
  font-optical-sizing: auto;
  text-wrap: pretty;
  hanging-punctuation: first;
}
@media (min-width: 900px) {
  .book__stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(56px, 7.5vw, 116px);
    align-items: center;
  }
  /* centred on the case itself, not the case + credit: the credit below it is
     34px + one 17px line, so the card is lifted by that much */
  .synopsis { margin-bottom: calc(34px + 17px * 1.35); }
}
.credit {
  margin-top: 34px;
  text-align: center;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: .12em;
  color: var(--house-text);
}

/* contact: the back cover mirrors the front — yellow band over a pink band */
.backpage { color: var(--ink); }
.backpage__y { background: var(--y); padding: var(--sec-top) 0 clamp(40px, 5vw, 64px); }
.backpage__p { background: var(--pink); padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.backpage__in { width: min(100% - 48px, 1240px); margin: 0 auto; padding: 0 clamp(20px, 5.4vw, 76px); }
.backpage__h { font-size: clamp(4rem, 21vw, 6rem); text-wrap: nowrap; }
.backpage__h span { display: block; white-space: nowrap; }
@media (min-width: 900px) {
  .backpage__h span { display: inline; }
  .backpage__h { font-size: clamp(4.5rem, 7.4vw, 6rem); }
}
.backpage__dbl { height: 10px; border-top-width: 6px; border-bottom-width: 2px; background: var(--pink); }
/* the back cover mirrors the front: her name set at the masthead's scale (a
   touch under it), flush left on the measure over a full-measure double rule */
.fb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: clamp(28px, 3.2vw, 48px);
  row-gap: 22px;
}
.fb__line { margin: 0; }
.fb__name {
  display: block;
  font-family: var(--lg);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  font-size: calc(var(--mast-fs) * .96);
  line-height: .86;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variation-settings: "wdth" 100;
  translate: -.02em 0;     /* optical: the A's foot aligns with the rule's start */
}
.fb__rule { margin-top: clamp(24px, 2.6vw, 36px); }

/* copy her Facebook name: a program-voice button in ink on the pink page.
   It needs script, so it only exists once html.js is set */
.copy { display: none; }
.js .copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 3px 18px 0 15px;
  margin-bottom: calc(var(--mast-fs) * .96 * .07);   /* the button's foot sits on the name's baseline */
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.copy__label {
  display: grid;
  justify-items: center;
  font-family: var(--lg);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .12em;
}
/* both words share one cell so the button never changes width */
.copy__t { grid-area: 1 / 1; }
.copy__t--done, .copy.is-copied .copy__t--idle { visibility: hidden; }
.copy.is-copied .copy__t--done { visibility: visible; }
.copy__icon {
  flex: none;
  width: 20px; height: 20px;
  margin-top: -3px;                /* optical: centre on the caps, not the box */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
}
.copy__sheets { transition: opacity .25s var(--ease); }
.copy__tick {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset .5s var(--ease);
}
.copy.is-copied .copy__sheets { opacity: 0; }
.copy.is-copied .copy__tick { stroke-dashoffset: 0; transition-delay: .08s; }
.copy.is-copied { background: var(--ink); color: var(--pink); }
@media (hover: hover) { .copy:hover { background: var(--ink); color: var(--pink); } }
.copy:active { translate: 0 1px; }
.backpage__p .copy:focus-visible { outline-offset: 3px; }

/* visually hidden, still read out */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* footer */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 30px clamp(20px, 4vw, 56px) 34px;
  color: var(--house-text);
  font-size: 17px;
  line-height: 1;
  letter-spacing: .12em;
}
.foot__name { color: #fff; }
.foot__link {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  padding: 6px 0 4px;
  transition: text-decoration-color .3s var(--ease), color .3s var(--ease);
}
.foot__link:hover, .foot__link:focus-visible { color: var(--y); text-decoration-color: var(--pink); }

/* ── narrow layouts ────────────────────────────────────────────────────── */

@media (max-width: 899.98px) {
  main { padding-top: 14px; }
  .sheet { width: 100%; }
  .backpage__in { width: 100%; }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about__copy { order: -1; }
  .print { max-width: 360px; margin: 44px auto 0; }
  .spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; }
  .spread__a { grid-row: auto; grid-column: 1 / -1; }
  .spread__c .ph__in { aspect-ratio: 1 / 1; }
  .lobbyband__in { width: 100%; }
  .book__stage { margin-top: 84px; }
  .lobby--big { width: min(80vw, 340px); }
  .synopsis { margin-top: 60px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.4375rem); }
  .synopsis__text { line-height: 1.55; }
  .lobbyband { padding-bottom: 80px; }
  .fb { flex-direction: column; align-items: flex-start; }
  .js .copy { margin-bottom: 0; }
}

/* ── reduced motion: everything in its final state, nothing scrubs ────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .mast__name { animation: none !important; font-variation-settings: "wdth" 100; }
  .stretch { --wdth: 100 !important; --trk: .012 !important; }
  .ph:hover img, .ph:focus-visible img { transform: none; }
  .case:hover, .case:focus-visible { transform: none; }
}

/* ── links out: her book on Amazon, her Facebook (added 2026-09-26) ───── */
.buy-wrap { margin: 1.4em 0 0; }
.buy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 24px 0 26px;
  background: var(--pink);
  color: var(--ink);
  border: 2px solid var(--pink);
  border-radius: 0;
  font-family: var(--lg);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .1em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.buy .go-arrow { flex: none; margin-top: -4px; transition: transform .5s var(--ease); }
@media (hover: hover) { .buy:hover { background: transparent; color: var(--pink); } }
.buy:hover .go-arrow, .buy:focus-visible .go-arrow { transform: translate(2px, -2px); }
.buy:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.buy:active { translate: 0 1px; }
.buy-note { margin: 14px 0 0; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--house-text); }
/* on the pink back page: ink button, same program voice as Copy name */
.buy--fb {
  min-height: 48px;
  margin-bottom: calc(var(--mast-fs) * .96 * .07);
  background: var(--ink);
  color: var(--pink);
  border-color: var(--ink);
  font-size: 19px;
  letter-spacing: .12em;
}
@media (hover: hover) { .buy--fb:hover { background: transparent; color: var(--ink); } }
.backpage__p .buy--fb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }