/* Bonolo Modise tribute on Apple's calm editorial pattern: white page,
   centred title, rounded photographs in even grids, Apple cards for her work.
   Content, photo credits and links are unchanged. Loads after apple.css. */

.tribute-page { background: var(--a-bg); color: var(--a-ink); }
.tribute-page .book-pastel { display: none !important; }
.tribute-page .book-photo, .tribute-page .tribute-portrait {
  position: relative !important; inset: auto !important; transform: none !important; rotate: none !important;
  grid-area: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; box-shadow: none !important;
}
.tribute-page :is(.book-photo, .tribute-portrait) img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--a-radius-lg); transform: none !important; }
.tribute-page :is(.book-photo, .tribute-portrait) figcaption, .tribute-page .tribute-margin-note {
  position: static !important; transform: none !important; writing-mode: horizontal-tb !important; margin-top: 12px;
  font-size: 12px; line-height: 1.34; letter-spacing: -.01em; text-transform: none; color: var(--a-ink-2); background: none; padding: 0;
}
.tribute-page figcaption span { display: inline; margin-left: 6px; color: var(--a-ink-3); }
.tribute-page figcaption a { color: inherit; }
.tribute-page .section { padding: 120px 0; background: var(--a-bg); }
.tribute-page .page-shell { width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); max-width: none; }
.tribute-page .section-label { color: var(--a-ink-2); }
.tribute-page [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Hero: centred name, then the portrait with one travel photograph beside it. */
.tribute-page .tribute-hero { padding: 72px 0 40px; background: var(--a-bg); color: var(--a-ink); min-height: 0; }
.tribute-page .tribute-hero-layout {
  display: grid !important; grid-template-columns: 2fr 1fr; grid-template-areas: "copy copy" "portrait satellite"; gap: 56px 24px; align-items: end;
}
.tribute-page .tribute-hero-copy { grid-area: copy; text-align: center; max-width: none; margin: 0; }
.tribute-page .tribute-hero-copy .section-label { margin: 0 0 14px; }
.tribute-page .tribute-hero h1 {
  margin: 0; color: var(--a-ink); text-transform: none;
  font-size: var(--a-hero-size); line-height: var(--a-hero-lh); letter-spacing: var(--a-hero-ls); font-weight: 600; font-stretch: var(--w-display);
}
.tribute-page .tribute-hero h1 br { display: none; }
.tribute-page .tribute-surname { font: inherit; color: inherit; -webkit-text-stroke: 0; margin-left: .25em; }
.tribute-page .tribute-name-seal { display: inline-block; width: .42em; height: .42em; margin-left: .18em; vertical-align: super; filter: invert(1); position: static; }
.tribute-page .tribute-role { margin: 18px auto 0; max-width: 32em; text-transform: none; letter-spacing: var(--a-subhead-ls); color: var(--a-ink); font-family: var(--a-font-display); font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); }
.tribute-page .tribute-role + .tribute-role { margin-top: 12px; font-size: var(--a-small-size); line-height: var(--a-small-lh); letter-spacing: var(--a-small-ls); color: var(--a-ink-2); font-family: var(--a-font-text); }
.tribute-page .tribute-portrait { grid-area: portrait; }
.tribute-page .tribute-portrait img { aspect-ratio: 4 / 3; }
.tribute-page .book-hero-satellite { grid-area: satellite; }
.tribute-page .book-hero-satellite img { aspect-ratio: 4 / 5; }

/* What she brought: centred headline, photograph beside the words. */
.tribute-page .book-story-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px 64px; align-items: center; }
.tribute-page .book-story-grid > div:first-child { grid-column: 1 / -1; text-align: center; }
.tribute-page .book-story-grid .display-title { max-width: 14em; margin: 12px auto 0; }
.tribute-page .book-founders img { aspect-ratio: 1.15; }
.tribute-page .tribute-copy p {
  margin: 0 0 18px; color: var(--a-ink-2); font-family: var(--a-font-display);
  font-size: var(--a-intro-size); line-height: var(--a-intro-lh); letter-spacing: var(--a-intro-ls);
}
.tribute-page .tribute-copy p:first-child { color: var(--a-ink); }

/* Her world: three even photographs on light grey. */
.tribute-page .book-world { background: var(--a-bg-alt); }
.tribute-page .mellow-world-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 56px; }
.tribute-page .mellow-world-heading .display-title { margin-top: 12px; }
.tribute-page .mellow-world-heading > a { color: var(--a-link); font-size: 17px; text-decoration: none; }
.tribute-page .book-world-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; min-height: 0 !important; height: auto !important; }
.tribute-page .book-world-grid img { aspect-ratio: 4 / 5; }

/* Work she led: centred head, portrait and quote, then Apple cards. */
.tribute-page .tribute-work .section-heading-row { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-bottom: 64px; }
.tribute-page .tribute-work .section-heading-row .lead { max-width: 30em; margin: 0; }
.tribute-page .book-work-intro { display: grid !important; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; margin-bottom: 96px; }
.tribute-page .book-work-portrait img { aspect-ratio: 4 / 5; }
.tribute-page .legacy-quote { margin: 0; padding: 0; border: 0; position: static; transform: none; }
.tribute-page .legacy-quote p {
  margin: 0; color: var(--a-ink); font-family: var(--a-font-display); font-weight: 600; font-style: normal;
  font-size: var(--a-tile-size); line-height: var(--a-tile-lh); letter-spacing: var(--a-tile-ls);
}
.tribute-page .legacy-quote footer { margin-top: 22px; font-size: 14px; }
.tribute-page .legacy-quote footer a { color: var(--a-link); text-decoration: none; }
.tribute-page .legacy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tribute-page .legacy-card { border: 0; border-radius: var(--a-radius-lg); background: var(--a-bg-alt); overflow: hidden; transform: none; box-shadow: none; }
.tribute-page .legacy-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tribute-page .legacy-card-media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0; }
.tribute-page .legacy-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--a-ease); }
.tribute-page .legacy-card:hover .legacy-card-media img { transform: scale(1.03); }
.tribute-page .legacy-card-copy { display: flex; flex-direction: column; gap: 8px; padding: 32px 32px 36px; flex: 1; position: relative; }
.tribute-page .legacy-card-kicker { font-size: 14px; font-weight: 600; letter-spacing: -.016em; text-transform: none; color: var(--a-ink-2); margin: 0; }
.tribute-page .legacy-card-title { margin: 0; font-size: var(--a-card-size); line-height: 1.1429; letter-spacing: .007em; font-weight: 600; text-transform: none; }
.tribute-page .legacy-card-role { margin: 0; font-size: 14px; letter-spacing: -.016em; color: var(--a-ink-2); text-transform: none; }
.tribute-page .legacy-card-details { margin: 14px 0 0; display: grid; gap: 14px; }
.tribute-page .legacy-card-details dt { font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--a-ink); }
.tribute-page .legacy-card-details dd { margin: 4px 0 0; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--a-ink-2); }
.tribute-page .legacy-card-details ol { margin: 0; padding-left: 18px; }
.tribute-page .legacy-card-watch { margin-top: auto; padding-top: 18px; font-size: 17px; color: var(--a-link); letter-spacing: -.022em; text-transform: none; }
.tribute-page .legacy-card-arrow { display: none; }

@media (max-width: 734px) {
  .tribute-page .section { padding: 80px 0; }
  .tribute-page .tribute-hero-layout { grid-template-columns: 1fr; grid-template-areas: "copy" "portrait" "satellite"; gap: 36px; }
  .tribute-page .book-hero-satellite { max-width: 60%; }
  .tribute-page .book-story-grid, .tribute-page .book-work-intro { grid-template-columns: 1fr; gap: 36px; }
  .tribute-page .book-world-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tribute-page .book-world-grid > figure:first-of-type { grid-column: 1 / -1; }
  .tribute-page .legacy-grid { grid-template-columns: 1fr; gap: 16px; }
  .tribute-page .legacy-card-copy { padding: 24px 22px 28px; }
}

/* Specificity fixes against the legacy tribute build. */
html body.tribute-page .section-label {
  color: var(--a-ink-2); font-family: var(--a-font-display); font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh);
  letter-spacing: var(--a-eyebrow-ls); font-weight: 600; text-transform: none;
}
html body.tribute-page :is(.book-photo, .tribute-portrait) img { height: auto; }
html body.tribute-page .tribute-role { font-weight: 400; }
html body.tribute-page .legacy-card-title { color: var(--a-ink); -webkit-text-fill-color: currentColor; }
@media (max-width: 734px) {
  html body.tribute-page .book-world-grid > figure:first-of-type { grid-column: 1 / -1 !important; }
  html body.tribute-page .book-world-grid > figure:first-of-type img { aspect-ratio: 4 / 3; }
}
html body.tribute-page .section-label { color: var(--a-ink-2) !important; }
html body.tribute-page :is(h1, h2, .display-title) { color: var(--a-ink) !important; -webkit-text-fill-color: currentColor; opacity: 1 !important; }
html body.tribute-page .book-work-intro > .book-work-portrait { width: 100% !important; max-width: 440px !important; justify-self: center; }
html body.tribute-page .legacy-quote footer a { text-transform: none; letter-spacing: -.016em; font-size: 14px; font-weight: 400; color: var(--a-link); }
html body.tribute-page .tribute-work { color: var(--a-ink); }
html body.tribute-page .tribute-work .lead { color: var(--a-ink-2); padding: 0; }
html body.tribute-page .book-work-intro { grid-template-columns: 1fr 1.6fr; margin-top: 0; }
html body.tribute-page .legacy-quote { grid-column: auto; padding: 0; margin: 0; }
@media (max-width: 734px) {
  html body.tribute-page .book-work-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  html body.tribute-page .book-work-intro > .book-work-portrait { max-width: 320px !important; }
}
html body.tribute-page .book-work-intro > :is(.legacy-quote, .book-work-portrait) { grid-column: auto !important; grid-row: auto !important; }

/* The legacy tribute build switches these grids to 12 columns between phone and desktop widths,
   which collapsed the columns to nothing. Pin the Apple layouts at every width. */
html body.tribute-page .book-story-grid { grid-template-columns: 1fr 1fr !important; }
html body.tribute-page .book-story-grid > div:first-child { grid-column: 1 / -1 !important; grid-row: auto !important; }
html body.tribute-page .book-story-grid > :is(.book-founders, .tribute-copy) { grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 734px) {
  html body.tribute-page .book-story-grid { grid-template-columns: 1fr !important; }
}
html body.tribute-page .legacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body.tribute-page .legacy-grid > * { grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 734px) { html body.tribute-page .legacy-grid { grid-template-columns: 1fr !important; } }

/* ---------- Frosted circles ----------
   Soft glass discs in her palette (blush, peach, mint, lilac) float over the edges of the
   photographs: a tint, a light wash and a backdrop blur, never an outline. */
.tribute-page :is(.tribute-hero-layout, .book-story-grid, .book-world-grid, .book-work-intro, .book-words-grid, .tribute-promise-layout) { position: relative; }
html body.tribute-page .book-pastel {
  display: block !important; position: absolute !important; z-index: 3; pointer-events: none;
  width: clamp(110px, 13vw, 190px); height: auto; aspect-ratio: 1; border-radius: 50%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -28px rgba(80, 40, 60, .35);
  grid-area: auto !important; inset: auto; transform: none;
}
html body.tribute-page .book-pastel-hero { right: -56px; bottom: 22%; }
html body.tribute-page .book-pastel-story { left: -64px; top: 52%; }
html body.tribute-page .book-pastel-world-mint { left: calc(33.3% - 70px); top: 22%; }
html body.tribute-page .book-pastel-world-lilac { left: calc(66.6% - 60px); top: -50px; width: clamp(90px, 10vw, 150px); }
html body.tribute-page .book-pastel-work { left: -60px; top: 18%; }
html body.tribute-page .book-pastel-words { right: -50px; top: 24%; width: clamp(90px, 10vw, 150px); }
html body.tribute-page .book-pastel-close { left: -60px; bottom: 16%; }
@media (max-width: 734px) {
  html body.tribute-page .book-pastel { width: 96px; }
  html body.tribute-page :is(.book-pastel-hero, .book-pastel-story, .book-pastel-work, .book-pastel-words, .book-pastel-close) { display: none !important; }
  html body.tribute-page .book-pastel-world-lilac { display: none !important; }
  html body.tribute-page .book-pastel-world-mint { left: auto; right: -30px; top: 8%; }
}
@media (prefers-reduced-transparency: reduce) { html body.tribute-page .book-pastel { -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .5; } }

/* ---------- Photos that hold still ----------
   Each photograph is a little taller than its frame and is moved against the scroll (js),
   so the picture seems to stay put while its frame travels past, as the home portrait does. */
.tribute-page .hold-frame { display: block; overflow: clip; border-radius: var(--a-radius-lg); }
.tribute-page .legacy-card-media .hold-frame { border-radius: 0; height: 100%; }
.tribute-page .hold-frame > img { border-radius: 0 !important; scale: 1.18; translate: 0 var(--hold, 0%); will-change: translate; }

/* ---------- Her words ---------- */
html body.tribute-page .book-words-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; }
html body.tribute-page .book-words-grid > div:first-child { grid-column: 1; grid-row: 1; }
html body.tribute-page .book-words-grid > .tribute-copy { grid-column: 1; grid-row: 2; }
html body.tribute-page .book-words-grid > .book-studio { grid-column: 2 !important; grid-row: 1 / span 2 !important; position: sticky !important; top: calc(var(--a-nav) + 40px); width: 100% !important; }
html body.tribute-page .book-studio img { aspect-ratio: 1; }
html body.tribute-page .book-words-grid .section-label { margin: 0 0 12px; }
html body.tribute-page .book-words-grid .display-title { margin: 0 0 24px; font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); }
html body.tribute-page .tribute-bio { margin: 0 0 14px; max-width: 30em; font-size: 17px; line-height: 1.47; letter-spacing: -.022em; color: var(--a-ink-2); }
html body.tribute-page .case-source-note { font-size: 14px; }
html body.tribute-page .case-source-note a, html body.tribute-page .tribute-words footer a { color: var(--a-link); text-decoration: none; }
html body.tribute-page .tribute-words { margin: 24px 0 0; padding: 0; border: 0; }
html body.tribute-page .tribute-words p {
  margin: 0; color: var(--a-ink) !important; -webkit-text-fill-color: currentColor; font-family: var(--a-font-display); font-weight: 600; font-style: normal;
  font-size: var(--a-tile-size); line-height: var(--a-tile-lh); letter-spacing: var(--a-tile-ls);
}
html body.tribute-page .tribute-words footer { margin-top: 18px; font-size: 14px; }

/* ---------- Recognition ---------- */
html body.tribute-page .awards-section { background: var(--a-bg-alt); text-align: center; }
html body.tribute-page .award-lead { display: block; margin: 0 auto 40px; }
html body.tribute-page .award-lead .display-title { margin: 12px 0 0; }
html body.tribute-page .jury-line {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: baseline; max-width: 760px; margin: 0 auto; padding: 32px 36px;
  border: 0; border-radius: var(--a-radius-lg); background: var(--a-bg); text-align: left; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .25);
}
html body.tribute-page .jury-line .micro-label { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.022em; text-transform: none; color: var(--a-ink); }
html body.tribute-page .jury-line p:not(.micro-label) { margin: 0; font-size: 17px; line-height: 1.47; letter-spacing: -.022em; color: var(--a-ink-2); }

/* ---------- Always, Mellow. ---------- */
html body.tribute-page .tribute-close { background: var(--a-bg); color: var(--a-ink); }
html body.tribute-page .tribute-promise-layout { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
html body.tribute-page .book-close-portrait { width: 100% !important; max-width: none !important; grid-column: 1 !important; grid-row: 1 !important; }
html body.tribute-page .book-close-portrait img { aspect-ratio: 4 / 5; }
html body.tribute-page .tribute-promise { grid-column: 2 !important; grid-row: 1 !important; }
html body.tribute-page .tribute-promise .section-label {
  margin: 0 0 20px; color: var(--a-ink) !important; font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); font-weight: 600; font-stretch: var(--w-display);
}
html body.tribute-page .tribute-promise-quote { margin: 0; padding: 0; border: 0; }
html body.tribute-page .tribute-promise-quote p {
  margin: 0; color: var(--a-ink-2) !important; -webkit-text-fill-color: currentColor; font-family: var(--a-font-display); font-style: normal; font-weight: 400;
  font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); letter-spacing: var(--a-subhead-ls);
}
html body.tribute-page .tribute-promise-quote footer { margin-top: 16px; font-size: 14px; color: var(--a-ink) !important; font-weight: 600; }
html body.tribute-page .contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* Buttons on this page: Apple pills, always legible. */
html body.tribute-page .button {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border: 0; border-radius: 980px;
  background: var(--a-blue); color: #fff !important; -webkit-text-fill-color: currentColor; font-size: 17px; font-weight: 400; letter-spacing: -.022em; text-transform: none; text-decoration: none; box-shadow: none;
}
html body.tribute-page .button:hover { background: var(--a-blue-hover); }
html body.tribute-page .button--light { background: var(--a-bg-alt); color: var(--a-ink) !important; }
html body.tribute-page .button--light:hover { background: #e8e8ed; }
html body.tribute-page .legacy-archive-link { margin: 56px 0 0; text-align: center; }

@media (max-width: 734px) {
  html body.tribute-page :is(.book-words-grid, .tribute-promise-layout) { grid-template-columns: 1fr !important; gap: 36px; }
  html body.tribute-page .book-words-grid > * { grid-column: 1 !important; grid-row: auto !important; position: relative !important; top: auto; }
  html body.tribute-page .book-words-grid > .book-studio { order: 2; }
  html body.tribute-page .book-words-grid > .tribute-copy { order: 3; }
  html body.tribute-page :is(.book-close-portrait, .tribute-promise) { grid-column: 1 !important; grid-row: auto !important; }
  html body.tribute-page .jury-line { grid-template-columns: 1fr; padding: 24px; }
}

/* ---------- Work cards: details live in a drawer ----------
   The card shows what matters at a glance (brand, title, role, link). Deliverables,
   contribution and highlights sit in one quiet drawer that opens in place. */
html body.tribute-page .legacy-card { display: flex; flex-direction: column; }
html body.tribute-page .legacy-card-link { flex: 0 0 auto; height: auto; }
html body.tribute-page .legacy-card-copy { padding: 28px 32px 8px; flex: 0 0 auto; }
html body.tribute-page .legacy-card-more { margin: 12px 20px 0; border-radius: 16px; background: rgba(0, 0, 0, .035); overflow: hidden; interpolate-size: allow-keywords; }
html body.tribute-page .legacy-card-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; letter-spacing: -.016em; color: var(--a-ink); border-radius: 16px; transition: background .2s var(--a-ease);
}
html body.tribute-page .legacy-card-more summary::-webkit-details-marker { display: none; }
html body.tribute-page .legacy-card-more summary:hover { background: rgba(0, 0, 0, .04); }
html body.tribute-page .legacy-card-more summary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(41, 68, 255, .22); }
html body.tribute-page .legacy-card-toggle { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--a-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
html body.tribute-page .legacy-card-toggle::before, html body.tribute-page .legacy-card-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--a-ink); translate: -50% -50%; transition: rotate .35s var(--a-ease), opacity .35s var(--a-ease);
}
html body.tribute-page .legacy-card-toggle::after { rotate: 90deg; }
html body.tribute-page .legacy-card-more[open] .legacy-card-toggle::after { rotate: 0deg; opacity: 0; }
html body.tribute-page .legacy-card-more::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--a-ease), content-visibility .45s allow-discrete; }
html body.tribute-page .legacy-card-more[open]::details-content { block-size: auto; }
html body.tribute-page .legacy-card-more .legacy-card-details { margin: 0; padding: 4px 16px 18px; display: grid; gap: 16px; }
html body.tribute-page .legacy-card-details ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
html body.tribute-page .legacy-card-details ol li { position: relative; padding-left: 16px; }
html body.tribute-page .legacy-card-details ol li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--a-ink-3); }
html body.tribute-page a.legacy-card-watch { display: inline-block; margin: 0; padding: 18px 32px 30px; color: var(--a-link); font-size: 17px; letter-spacing: -.022em; text-decoration: none; }
html body.tribute-page a.legacy-card-watch:hover { text-decoration: underline; }
@media (max-width: 734px) {
  html body.tribute-page .legacy-card-copy { padding: 22px 22px 6px; }
  html body.tribute-page .legacy-card-more { margin: 10px 12px 0; }
  html body.tribute-page a.legacy-card-watch { padding: 16px 22px 24px; }
}

/* Circles may sit past a photo's outer edge; the page never scrolls sideways because of them. */
html body.tribute-page :is(.tribute-hero, .section) { overflow-x: clip; }
/* Her world: every caption sits under its photograph. */
html body.tribute-page .book-world-grid figcaption {
  position: static !important; inset: auto !important; transform: none !important; writing-mode: horizontal-tb !important;
  margin-top: 12px; font-size: 12px; line-height: 1.34; color: var(--a-ink-2); background: none; padding: 0;
}
@media (max-width: 734px) {
  html body.tribute-page .book-words-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body.tribute-page .book-words-grid > :is(div, .book-studio, .tribute-copy) { grid-column: 1 !important; grid-row: auto !important; position: relative !important; top: auto !important; }
}

/* ---------- Line-art sky ----------
   A drawing of planets, orbits, stars and route lines sits behind the page. Section
   backgrounds let it through; text and photographs stay on top. */
.tribute-page {
  --cosmos-ink: rgba(29, 29, 31, .11); --cosmos-blush: rgba(214, 150, 165, .34);
  --cosmos-lilac: rgba(150, 150, 210, .32); --cosmos-mint: rgba(120, 175, 140, .34);
}
.tribute-page .cosmos { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: clip; }
.tribute-page .cosmos svg { display: block; }
.tribute-page main, .tribute-page .site-footer { position: relative; z-index: 1; }
html body.tribute-page :is(.tribute-hero, .section, .tribute-close, .tribute-work) { background: transparent !important; }
html body.tribute-page :is(.book-world, .awards-section) { background: rgba(245, 245, 247, .72) !important; }
.tribute-page .cosmos-line { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tribute-page .cosmos-faint { stroke-dasharray: 2 7; opacity: .8; }
.tribute-page .cosmos-route { stroke-dasharray: 6 8; animation: cosmos-flow 14s linear infinite; }
.tribute-page .cosmos-orbit { animation: cosmos-spin var(--spin, 80s) linear infinite; transform-box: view-box; }
.tribute-page .cosmos-star { animation: cosmos-twinkle var(--twinkle, 4s) ease-in-out var(--delay, 0s) infinite; }
.tribute-page .cosmos-group { will-change: translate; }
@keyframes cosmos-flow { to { stroke-dashoffset: -140; } }
@keyframes cosmos-spin { to { rotate: 360deg; } }
@keyframes cosmos-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tribute-page :is(.cosmos-route, .cosmos-orbit, .cosmos-star) { animation: none; } }
@media (max-width: 734px) { .tribute-page { --cosmos-ink: rgba(29, 29, 31, .09); } }

/* Work card link: one neat blue pill. */
html body.tribute-page a.legacy-card-watch {
  display: inline-flex; align-self: flex-start; align-items: center; margin: 20px 32px 30px; padding: 10px 20px; border-radius: 980px;
  background: var(--a-blue); color: #fff; font-size: 15px; letter-spacing: -.016em; text-decoration: none; transition: background .2s var(--a-ease);
}
html body.tribute-page a.legacy-card-watch:hover { background: var(--a-blue-hover); text-decoration: none; }
html body.tribute-page a.legacy-card-watch:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(41, 68, 255, .25); }
@media (max-width: 734px) { html body.tribute-page a.legacy-card-watch { margin: 16px 22px 24px; } }

/* Sky, a touch more present: stronger tints and slightly heavier lines. */
.tribute-page {
  --cosmos-ink: rgba(29, 29, 31, .2); --cosmos-blush: rgba(206, 128, 148, .55);
  --cosmos-lilac: rgba(128, 128, 200, .52); --cosmos-mint: rgba(96, 160, 120, .55);
}
.tribute-page .cosmos-line { stroke-width: 1.3; }
.tribute-page .cosmos-faint { opacity: 1; }
@media (max-width: 734px) { .tribute-page { --cosmos-ink: rgba(29, 29, 31, .16); } }

/* One frosted circle per one or two photographs: the legacy build's own discs on the
   Tokyo and studio photos are removed, so only the placed circles remain. */
html body.tribute-page :is(.book-photo, .tribute-portrait)::before,
html body.tribute-page :is(.book-photo, .tribute-portrait)::after { content: none !important; display: none !important; }

/* Every work card's picture runs flush to the card's top edge (the legacy build padded
   alternate cards down to stagger the columns). */
html body.tribute-page .legacy-card { padding: 0 !important; margin-top: 0 !important; }
html body.tribute-page .legacy-card-media { margin: 0 !important; border-radius: 0; }

/* Frosted circles, quieter: a lighter tint, a gentler blur and a faint shadow. */
html body.tribute-page .book-pastel {
  opacity: .62;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(115%); backdrop-filter: blur(7px) saturate(115%);
  box-shadow: 0 16px 40px -30px rgba(80, 40, 60, .22);
}

/* Frosted circles removed at the owner's request; the line-art sky carries the decoration. */
html body.tribute-page .book-pastel { display: none !important; }

/* ---------- Hero collage ----------
   The portrait leads; the Tokyo photo overlaps its lower-left corner in front; a faded
   greyscale photo sits to the right like a memory; "Mellow" is written across the portrait. */
@media (min-width: 735px) {
  html body.tribute-page .tribute-hero-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-template-areas: none !important;
    gap: 56px 0 !important; align-items: start !important; padding-bottom: clamp(160px, 20vw, 300px);
  }
  html body.tribute-page .tribute-hero-copy { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  html body.tribute-page .tribute-portrait { grid-column: 1 / 9 !important; grid-row: 2 !important; }
  html body.tribute-page .tribute-portrait figcaption { display: none; }
  html body.tribute-page .book-hero-satellite {
    grid-column: 2 / 6 !important; grid-row: 2 !important; align-self: end !important; z-index: 2;
    translate: 0 55%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); border-radius: var(--a-radius-lg);
  }
  html body.tribute-page .book-hero-satellite figcaption { position: absolute !important; top: calc(100% + 14px); left: 0; margin: 0; }
  html body.tribute-page .book-hero-ghost {
    grid-column: 9 / 13 !important; grid-row: 2 !important; align-self: end; margin: 0 0 0 32px; translate: 0 40%;
    filter: grayscale(1) contrast(.9); opacity: .38;
  }
  html body.tribute-page .book-hero-ghost img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--a-radius-lg); }
  html body.tribute-page .mellow-script { grid-column: 1 / 6; grid-row: 2; align-self: start; z-index: 3; width: 88%; margin: 7% 0 0 6%; }
}
.tribute-page .mellow-script { display: block; overflow: visible; pointer-events: none; }
.tribute-page .mellow-letter { fill: #d4899d; stroke: #d4899d; stroke-width: 6; stroke-linejoin: round; }
@media (max-width: 734px) {
  html body.tribute-page .book-hero-ghost { display: none; }
  html body.tribute-page .mellow-script { grid-area: portrait; align-self: start; z-index: 3; width: 60%; margin: 6% 0 0 5%; }
}
/* Writing: each letter's outline is traced in order, then its ink fills. */
.tribute-page .mellow-script.is-writing .mellow-letter {
  fill-opacity: 0; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  animation: mellow-trace .9s cubic-bezier(.45, 0, .25, 1) calc(var(--i) * .55s + .3s) forwards,
             mellow-ink .6s ease calc(var(--i) * .55s + 1s) forwards;
}
@keyframes mellow-trace { to { stroke-dashoffset: 0; } }
@keyframes mellow-ink { to { fill-opacity: 1; } }
/* Hide the word until the writing starts, so it never flashes in full first. */
@media (prefers-reduced-motion: no-preference) {
  html.has-motion-reveals .tribute-page .mellow-script:not(.is-writing) .mellow-letter { fill-opacity: 0; stroke-opacity: 0; }
}
/* The legacy frames force a tall 4:5 box; let each frame be exactly its photo's height. */
html body.tribute-page :is(.tribute-portrait, .book-hero-satellite, .book-hero-ghost) { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
@media (min-width: 735px) {
  html body.tribute-page .book-hero-satellite { z-index: 11 !important; }
  html body.tribute-page .mellow-script { z-index: 12 !important; grid-column: 1 / 7 !important; width: 92%; margin: 6% 0 0 5%; }
}
@media (max-width: 734px) { html body.tribute-page .mellow-script { z-index: 12 !important; position: relative; } }
.tribute-page .mellow-letter { stroke-width: 14; }
@media (min-width: 735px) { html body.tribute-page .mellow-script { width: 78%; } }
@media (max-width: 734px) {
  html body.tribute-page .mellow-script { order: 2; width: 62%; margin: 0 0 -24% 7%; justify-self: start; }
}
@media (max-width: 734px) { html body.tribute-page .mellow-script { margin: 0 0 -46% 7%; translate: 0 22%; } }
@media (max-width: 734px) { html body.tribute-page .mellow-script { translate: 0 95%; } }

/* Memories in the margins: pale and black-and-white until you hover, then full colour. */
.tribute-page .memories { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2; }
.tribute-page .memory {
  position: absolute; object-fit: cover; border-radius: 18px; rotate: var(--tilt, 0deg);
  filter: grayscale(1) contrast(.9); opacity: .34; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35);
  transition: filter .6s var(--a-ease), opacity .6s var(--a-ease), scale .6s var(--a-ease), rotate .6s var(--a-ease);
}
.tribute-page .memory:hover { filter: none; opacity: 1; scale: 1.04; rotate: 0deg; }
@media (prefers-reduced-motion: reduce) { .tribute-page .memory { transition: none; } }

/* ---------- Hero collage: fixed geometry ----------
   Everything is sized from the hero's own width (cqw), so the overlap is identical at every
   desktop width, whatever each photo's height:
   - portrait: columns 1–8, 4:3, so its height is 50cqw;
   - Tokyo photo: columns 2–6, its top starts 60% down the portrait (30cqw);
   - "Mellow": 39cqw wide (height ≈ 10.5cqw), centred in the 30cqw band above the Tokyo photo;
   - faded photo: columns 9–12, starting 36cqw down. */
@media (min-width: 735px) {
  html body.tribute-page .tribute-hero-layout { container-type: inline-size; padding-bottom: 72px !important; }
  html body.tribute-page .tribute-portrait { grid-column: 1 / 9 !important; grid-row: 2 !important; align-self: start !important; }
  html body.tribute-page .tribute-portrait img { aspect-ratio: 4 / 3 !important; }
  html body.tribute-page .book-hero-satellite {
    grid-column: 2 / 6 !important; grid-row: 2 !important; align-self: start !important; translate: none !important;
    margin: 30cqw 0 0 !important;
  }
  html body.tribute-page .book-hero-satellite img { aspect-ratio: 4 / 5 !important; }
  html body.tribute-page .book-hero-ghost { grid-column: 9 / 13 !important; grid-row: 2 !important; align-self: start !important; translate: none !important; margin: 36cqw 0 0 32px !important; }
  html body.tribute-page .mellow-script {
    grid-column: 1 / 9 !important; grid-row: 2 !important; align-self: start !important; justify-self: start !important;
    width: 39cqw !important; margin: calc((30cqw - 39cqw * 1609 / 5963) / 2) 0 0 4cqw !important; translate: none !important;
  }
}

/* Her world: the three photographs share one 4:5 crop, so tops and bottoms line up. */
html body.tribute-page .book-world-grid { align-items: start !important; }
html body.tribute-page .book-world-grid img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; }
@media (max-width: 734px) { html body.tribute-page .book-world-grid > figure:first-of-type img { aspect-ratio: 4 / 3 !important; } }
/* Role lines: never wrap within a line; each sits on its own. */
html body.tribute-page .tribute-role + .tribute-role { max-width: none; text-wrap: balance; }

/* Sky back to its original, subtle strength. */
.tribute-page {
  --cosmos-ink: rgba(29, 29, 31, .11); --cosmos-blush: rgba(214, 150, 165, .34);
  --cosmos-lilac: rgba(150, 150, 210, .32); --cosmos-mint: rgba(120, 175, 140, .34);
}
.tribute-page .cosmos-line { stroke-width: 1; }
.tribute-page .cosmos-faint { opacity: .8; }
@media (max-width: 734px) { .tribute-page { --cosmos-ink: rgba(29, 29, 31, .09); } }

/* ---------- From idea to life: two rows ----------
   Row 1: heading and bio beside the studio portrait.
   Row 2: the neon photograph beside her words on KOO. */
html body.tribute-page .book-words-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 72px 80px !important; align-items: start !important; }
html body.tribute-page .book-words-grid > div:first-child { grid-column: 1 !important; grid-row: 1 !important; }
html body.tribute-page .book-words-grid > .book-studio { grid-column: 2 !important; grid-row: 1 !important; position: relative !important; top: auto !important; }
html body.tribute-page .book-words-grid > .book-neon { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; width: 100% !important; margin: 0 !important; }
html body.tribute-page .book-words-grid > .tribute-copy { grid-column: 2 !important; grid-row: 2 !important; }
html body.tribute-page .book-neon img { width: 100%; height: auto !important; aspect-ratio: 9 / 4 !important; object-fit: cover; object-position: 52% 30%; }
html body.tribute-page .book-words-grid .tribute-words { margin-top: 0; }
@media (max-width: 734px) {
  html body.tribute-page .book-words-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  html body.tribute-page .book-words-grid > :is(div, .book-studio, .book-neon, .tribute-copy) { grid-column: 1 !important; grid-row: auto !important; }
  html body.tribute-page .book-neon img { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 734px) {
  html body.tribute-page .book-words-grid > div:first-child { order: 1 !important; }
  html body.tribute-page .book-words-grid > .book-studio { order: 2 !important; }
  html body.tribute-page .book-words-grid > .book-neon { order: 3 !important; }
  html body.tribute-page .book-words-grid > .tribute-copy { order: 4 !important; }
}
/* Stacked: text, photo, text, photo. The neon photograph follows her KOO quote. */
@media (max-width: 734px) {
  html body.tribute-page .book-words-grid > .tribute-copy { order: 3 !important; }
  html body.tribute-page .book-words-grid > .book-neon { order: 4 !important; }
}

/* Her world: a square crop, so no photograph is shown beyond its real pixels
   (the Cape Town file is 600×450) while all three still line up. */
html body.tribute-page .book-world-grid img { aspect-ratio: 1 / 1 !important; }