/* ===========================================================================
   EMAAR — Malls · Hospitality · Entertainment · Leisure
   businesses.css — the presentation of the two business templates.

   Loads AFTER places.css and motion.css and adds to them. It declares no
   token, no type family, no colour and no radius of its own: every value
   below resolves through a --em-* token, and the one geometric constant it
   introduces (--bz-rail) is a column width, not a new scale.

   Namespace: .bz-*

   What is deliberately NOT here
   -----------------------------
   The hero, the breadcrumb, the buttons, the eyebrow, the card, the FAQ, the
   photograph box and the closing band are places.css's, used as they are. A
   page family that restyles a shared component from its own stylesheet is the
   mistake DESIGN-STANDARDS §2 exists to stop, and it has already cost this
   build twenty-seven pages once.
   =========================================================================== */

:root {
  --bz-rail: clamp(150px, 17vw, 210px);
}

/* ————————————————————— 1 · The spine —————————————————————

   One column of words with an index beside it. Below 1024 the index is not
   beside anything — it is a bar under the header — so the grid is a single
   track and the rail width is never asked for. */

.bz-spine { display: grid; grid-template-columns: 1fr; gap: 0; }
/* A 1fr grid track floors at max-content, so one unbreakable string in the
   body — a long URL in Emaar's copy, a 44-character heading — would widen the
   whole spine and the page with it. */
.bz-spine > * { min-width: 0; }

@media (min-width: 1024px) {
  .bz-spine {
    grid-template-columns: var(--bz-rail) minmax(0, 1fr);
    gap: clamp(34px, 4.5vw, 78px);
    align-items: start;
  }
  /* A page whose content is one section carries no index — an index of one is
     a label. Without this the single remaining child lands in the RAIL track
     and the whole page is set 180px wide. Written as a class from the renderer
     rather than `:not(:has(.bz-index))`: where :has() is unsupported that
     selector is dropped and the page comes back 180px wide, which is the one
     failure mode this rule exists to prevent. */
  .bz-spine--solo { grid-template-columns: minmax(0, 1fr); }
}

.bz-sec { scroll-margin-top: calc(var(--em-hdr) + 12px); }
/* The first section carries the eyebrow's own top margin, so it needs no
   band above it; every later one is placed by .em-band in the markup. */
.bz-sec > .em-eyebrow:first-child { margin-top: 0; }

.bz-body > .bz-sec:first-child { padding-top: 4px; }

/* ————————————————————— 2 · The section index —————————————————————

   Two presentations, one list. The brief's rule — a large vertical navigation
   must not survive onto a phone — is kept here rather than in the renderer,
   so the list a screen reader walks is the same list at every width.

   BELOW 1024: a sticky bar under the header. It reaches the screen edges by
   cancelling the wrap's gutter with a negative inline margin and putting the
   same value back as padding, so the row scrolls edge to edge while its items
   still line up with the words beneath them. Negative margin AND equal
   padding — either one alone is horizontal overflow.

   FROM 1024: a sticky rail in its own column. It takes its ground from the
   page, not from a plate: a plate here would be a second surface floating
   beside the text, which is the "floating panel" look the direction rules
   out. It is a list of small words and one moving rule. */

.bz-index {
  position: sticky; top: var(--em-hdr); z-index: var(--z-sticky);
  margin-inline: calc(var(--em-gut) * -1);
  padding-inline: var(--em-gut);
  background: var(--em-ground);
  border-bottom: 1px solid var(--em-line-bar);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The bar is pulled up over the band margin the spine was given, so it
     sits directly under the header rather than 48px below it. */
  margin-top: calc(clamp(48px, 7vh, 86px) * -1);
  margin-bottom: clamp(26px, 4vw, 38px);
}
.bz-index::-webkit-scrollbar { display: none; }
.bz-index__k { display: none; }

.bz-index__list {
  display: flex; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0;
  width: max-content; min-width: 100%;
}
.bz-index__link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 16px 0 0; margin-right: 18px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: var(--em-ink-mute);
  border-bottom: 2px solid transparent;
  transition: color var(--em-t) ease, border-color var(--em-t) ease;
}
.bz-index__list li:last-child .bz-index__link { margin-right: 0; }
.bz-index__link:hover { color: var(--em-ink); }
.bz-index__link[aria-current="true"] { color: var(--em-ink); border-bottom-color: var(--em-ink); }
/* The numeral is the one place the metal is allowed on this page: a mark, not
   a fill and not a heading. It is hidden below 1024, where the bar is already
   tight and a two-digit prefix on every chip is noise. */
.bz-index__n { display: none; color: var(--em-accent); font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  .bz-index {
    position: sticky; top: calc(var(--em-hdr) + 30px);
    margin: 0; padding: 0;
    background: transparent; border-bottom: 0; overflow: visible;
    /* A sticky column has to be allowed to be shorter than the words beside
       it; without its own height it stretches to the grid row and the sticky
       offset never applies. */
    align-self: start;
  }
  .bz-index__k {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: .24em;
    text-transform: uppercase; color: var(--em-ink-mute);
    padding-bottom: 12px; border-bottom: 1px solid var(--em-line-faint); margin-bottom: 4px;
  }
  .bz-index__list { flex-direction: column; width: auto; min-width: 0; gap: 0; }
  .bz-index__link {
    display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline;
    gap: 10px; margin: 0; padding: 13px 0;
    white-space: normal; letter-spacing: .1em; font-size: 11px; line-height: 1.35;
    border-bottom: 1px solid var(--em-line-faint);
    /* 11px type on a 1.35 leading inside 11px of padding measured 37-38px:
       the smallest target on the page, and there are up to twelve of them
       stacked. The rail is a NAVIGATION, so its rows owe the full 44. */
    min-height: 44px; align-content: center;
  }
  .bz-index__list li:last-child .bz-index__link { border-bottom: 0; }
  .bz-index__n { display: block; font-size: 10px; letter-spacing: .06em; }
  .bz-index__link[aria-current="true"] { border-bottom-color: var(--em-line-faint); }
  /* The mark is a rule that grows, not a colour that changes: a hue shift
     alone does not read as "you are here" at 11px. */
  .bz-index__link { position: relative; }
  .bz-index__link::after {
    content: ''; position: absolute; left: -14px; top: 50%; width: 0; height: 1px;
    background: var(--em-ink); transform: translateY(-50%);
    transition: width var(--em-t) var(--em-e-soft);
  }
  .bz-index__link[aria-current="true"]::after { width: 8px; }
}

/* ————————————————————— 3 · Words —————————————————————

   The measure is places.css's 44em and is not widened here. What is added is
   the rhythm between a heading, its paragraphs and the ledgers Emaar's copy
   arrives as. */

.bz-h2 { margin-bottom: 18px; }
.bz-h3 {
  font-family: var(--em-display); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2;
  margin-top: 30px; margin-bottom: 10px; max-width: 24em; text-wrap: pretty;
}
.bz-prose + .bz-prose { margin-top: 14px; }
.bz-prose a, .bz-point__v a, .bz-list a {
  color: var(--em-ink);
  text-decoration: underline; text-decoration-color: var(--em-line-ctl);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--em-t) ease;
}
.bz-prose a:hover, .bz-point__v a:hover, .bz-list a:hover {
  color: var(--em-ink); text-decoration-color: var(--em-ink);
}

.bz-list { max-width: var(--em-measure); margin-top: 14px; padding-left: 1.15em; }
/* places.css's reset carries `li { list-style: none }` for the navigation
   lists this build is full of, so a list in EMAAR'S OWN COPY shipped with no
   markers at all — Burj Khalifa's eight world records read as eight orphan
   lines. A type selector is reset with something that out-ranks it. */
.bz-list li { font-size: 16px; line-height: 1.62; color: var(--em-ink-body);
              list-style: disc outside; }
ol.bz-list li { list-style-type: decimal; }
.bz-list li + li { margin-top: 9px; }
.bz-list li::marker { color: var(--em-ink-mute); }

/* The ledger. Emaar writes most of its lists as "<strong>Label:</strong>
   sentence", which is a two-part row and not a bullet — so it is set as one:
   the label on its own line in the eyebrow register, the sentence under it at
   reading size. Two columns from 768 because the label is short and the
   sentence is not. */
.bz-points {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: 22px; border-top: 1px solid var(--em-line-rule);
}
.bz-point { padding: 18px 0; border-bottom: 1px solid var(--em-line-faint); }
.bz-point__k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em; line-height: 1.4;
  text-transform: uppercase; color: var(--em-ink-eyebrow);
}
.bz-point__v {
  margin: 7px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--em-ink-body);
  max-width: var(--em-measure); text-wrap: pretty;
}

@media (min-width: 768px) {
  .bz-point { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
              gap: 8px clamp(20px, 3vw, 40px); align-items: baseline; }
  .bz-point__v { margin-top: 0; }
}

.bz-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bz-ext { font-size: 1.05em; line-height: 0; }

.bz-faqnote { margin-top: -8px; margin-bottom: 18px; }

/* ————————————————————— 4 · The metadata row —————————————————————

   Only the rows the source supports. Emaar places some of these twenty-eight
   businesses in its copy and does not place others; where it does not, the
   row is absent rather than filled with a guess. */

.bz-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 18px clamp(20px, 3vw, 44px);
  margin: 4px 0 26px; padding-bottom: 24px;
  border-bottom: 1px solid var(--em-line-rule);
}
.bz-meta__r { min-width: 0; }
.bz-meta__k {
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--em-ink-mute);
}
.bz-meta__v { margin: 7px 0 0; font-size: 15px; line-height: 1.4; color: var(--em-ink); }
.bz-meta__v a {
  color: var(--em-ink); display: inline-flex; align-items: center; min-height: 28px;
  border-bottom: 1px solid var(--em-line-ctl);
  transition: border-color var(--em-t) ease;
}
.bz-meta__v a:hover { border-color: var(--em-ink); color: var(--em-ink); }

/* ————————————————————— 5 · The hero credit —————————————————————

   Two of the four verticals have no banner of their own, so they open on a
   member's photograph — and a page that shows you a building owes you its
   name. Padded out to a 44px hit area and pulled back by the same amount, so
   the target is comfortable on a phone without the lockup growing a line of
   air around it. */

.bz-credit {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.bz-credit__k { color: var(--em-ink-mute); }
.bz-credit a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-block: -12px; padding-block: 12px;
  color: var(--em-ink-body);
  /* text-decoration, not a border: the box is 44px tall and a bottom border
     would draw the rule 12px under the words it belongs to. */
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color var(--em-t) ease, text-decoration-color var(--em-t) ease;
}
.bz-credit a:hover { color: var(--em-ink); text-decoration-color: currentColor; }
.bz-credit a > span { transition: transform var(--em-t) var(--em-e-soft); }
.bz-credit a:hover > span { transform: translateX(3px); }

/* The credit used to invert from 1024, because from 1024 it sat on the
   photograph. The hero lockup is on the page ground at every width now
   (places.css, The hero), so the ink rules above are the only ones it needs
   and the inversion has gone with the overlay it existed for. */

/* The `.em-onmedia` correction that stood here has gone with the class.
   places.css's white focus ring was only ever right while the lockup was on
   the photograph; the lockup is on cream at every width now, the four hero
   builders no longer emit `em-onmedia`, and the ring the base rules give is
   already the ink one. */
}

/* Five of these heroes carry Emaar's own banner FILM rather than a still.
   That used to need its own veil: places.css's scrim was measured against a
   static photograph and read as a near-black layer once it sat on top of
   moving footage, so `.em-hero--film` lifted the darkest stops. There is no
   scrim to lift any more — the lockup is below the media on cream at every
   width and the veil is the same whisper for stills and for film — so the
   fork is gone and the variant class is kept only as a hook for the markup
   that already carries it.

/* ————————————————————— 6 · The portfolio —————————————————————

   ONE card, ONE grid, and every business in it.

   This was three registers — a feature at 1.95:1 across the measure, a pair
   of cards, then the rest as 260px thumbnails on a ledger rule — with the
   register decided by a destination's position in Emaar's own order. Read
   back, that is a ranking: Malls printed The Springs Souk at a ninth of the
   area it gave Dubai Mall, and Entertainment put eight of its eleven
   experiences in the thumbnail run. Emaar publishes no such tier.

   So the register is gone. Every destination is the same card: the same
   16:9 frame, the same identity line, the same name size, the same three
   lines of Emaar's own description, the same cue, the same hover. What
   orders the page is Emaar's order, the photographs themselves, and the
   space around the grid — none of which need a destination to be shrunk.

   Equal height is structural, not a number typed here: the cells stretch,
   the body is a column with the cue pushed to its foot, and the description
   is clamped to three lines so a long blurb cannot make one card taller
   than the one beside it. */

/* The portfolio heading now sits on the full wrap rather than in the body
   track, and a heading is still a measure: Malls' runs to fourteen words and
   would otherwise set as one 1300px line. */
.bz-portfolio__h { max-width: 17em; }

/* The space between a heading and this grid belongs to the GRID, not to
   whatever wraps it in a given context. It used to belong to the wrapper —
   .bz-portfolio on the vertical pages and .bz-pair--three under "Explore
   more" — and when the two registers became one component the second
   wrapper's rule went with it: the related grid then sat hard against
   "Explore more" on all twenty-eight destination pages. One component, one
   spacing, both contexts. */
.bz-grid {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 32px);
}
.bz-grid__cell { display: flex; min-width: 0; }
.bz-grid__cell > .em-card { width: 100%; }

/* Two up from the tablet width, three from the desktop measure. Nothing
   between: a four-up of these cards puts the name at 19px and the
   description below the size the body scale allows. */
@media (min-width: 680px)  { .bz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bz-card { overflow: hidden; }
.bz-card__media { display: block; width: 100%; }
.bz-card__media > img { transition: transform var(--em-t-image) var(--em-e-image); }
.bz-card:hover .bz-card__media > img,
.bz-card:focus-visible .bz-card__media > img { transform: scale(1.04); }


.bz-card__body { gap: 0; }

/* Always emitted, even where Emaar places no destination. A slot that
   collapses when it is empty takes the name up with it, and the row stops
   sharing a baseline — which is the ragged edge this batch exists to fix.
   Gold and Diamond Park has no place published; its card still lines up. */
.bz-card__id {
  display: block; min-height: 1.3em;
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em; line-height: 1.3;
  text-transform: uppercase; color: var(--em-text-eyebrow-neutral);
}
/* Two lines are RESERVED, not merely allowed. "Gold and Diamond Park" and
   "Dubai Aquarium & Underwater Zoo" wrap where "Souk Al Bahar" does not, and
   a name that sets on one line pulls its description up a line with it — so
   the row's blurbs started at three different heights and the cue at the foot
   of each card sat at three. Reserving the second line costs one empty line
   on the short names and buys every card in the set a shared baseline. */
.bz-card__n {
  display: block; font-family: var(--em-display);
  font-size: clamp(21px, 1.55vw, 26px); line-height: 1.14; margin-top: 7px;
  min-height: 2.28em; text-wrap: balance;
}
.bz-blurb {
  display: block; font-size: 14.5px; line-height: 1.55; color: var(--em-ink-body);
  margin-top: 10px; max-width: 40em; text-wrap: pretty;
}
/* Three lines, so the copy Emaar happens to have written for one destination
   cannot set the height of the card next to it. -webkit-line-clamp is the
   only form of this that ships everywhere; where it is unsupported the card
   simply grows, which is the correct failure. */
.bz-card .bz-blurb {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.bz-card .em-card__foot { margin-top: auto; padding-top: 18px; }

/* ————————————————————— 7 · The full-bleed frame —————————————————————

   The cinematic moment. Emaar publishes no film on any of these pages, so
   this is a photograph run edge to edge at the ratio Emaar published it in —
   never taller than that, because a 1620x600 banner stretched to fill a tall
   band is a photograph printed larger than it exists.

   The caption sits UNDER the picture on the page ground. Nothing is printed
   on this frame: it is the one band on the page with no veil, and it is the
   one band whose whole job is the photograph.

   Where the destination this band credits has a published banner FILM, the
   same band carries it — same bleed, same cap, same caption, same rules. The
   two media are styled together rather than separately so the band cannot
   come out one height with a film in it and another with a still. */

.bz-frame { position: relative; }
.bz-frame__f { margin: 0; }
.bz-frame__f > img,
.bz-frame__v {
  display: block; width: 100%; height: auto;
  /* The master is 1620 wide. Past that the band still bleeds, but the
     picture stops growing rather than being upscaled across a 1920 screen. */
  max-width: 1620px; margin-inline: auto;
  background: var(--em-well);
  /* The films are 16:9 and the stills are 1620x600. Letting a film keep its
     own ratio would make this band nearly twice as tall on Leisure as on the
     other three — the band's proportions are the template's, not the file's,
     so the clip is cropped to the published banner ratio instead. */
  object-fit: cover;
}
.bz-frame__v { aspect-ratio: 1620 / 600; }
.bz-frame__c {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.bz-frame__c a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-block: -12px; padding-block: 12px; color: var(--em-ink);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--em-t) ease;
}
.bz-frame__c a:hover { color: var(--em-ink); text-decoration-color: currentColor; }
.bz-frame__c a > span { transition: transform var(--em-t) var(--em-e-soft); }
.bz-frame__c a:hover > span { transform: translateX(3px); }

/* ————————————————————— 8 · The editorial figure —————————————————————

   The second photograph, where Emaar publishes one. It sits inside the copy
   at the reading measure's own column, not gathered into a gallery: two
   pictures is a pair, and a "Gallery" heading over two pictures promises a
   room that is not there. */

/* The width cap is an inline style carrying the record's own pixel box — see
   frameFigureHTML — so a frame can never be printed larger than Emaar
   published it. The caption follows the picture's width, not the column's. */
.bz-figure { margin: clamp(38px, 5vw, 62px) 0 0; }
.bz-figure .em-shot > img { transition: transform var(--em-t-image) var(--em-e-image); }

/* ————————————————————— 9 · Related + the switcher ————————————————————— */

.bz-related { background: var(--em-sand-band); padding: clamp(56px, 7vw, 92px) 0; }
.bz-related .em-eyebrow { margin-top: 0; }
.bz-related .bz-acts { margin-top: clamp(26px, 3vw, 34px); }

/* The tail of every page in this set is ONE plate, and it is the same plate
   on both templates:

     destination page   cream body → [ sand: Explore more + closing CTA ] → footer
     vertical page      cream body → [ sand: More of Emaar + closing CTA ] → footer

   So the switcher takes the same sand ground .bz-related already had. Before
   this it sat on cream and the closing band was black, which made the tail
   read as three unrelated slabs on one template and two on the other; now a
   reader crosses one soft edge into the closing zone and one decisive edge
   out of it, on all thirty-two pages.

   The bottom padding goes to nearly nothing because .em-close supplies the
   space below — the two bands are a single plate divided by .em-close's own
   hairline, not two bands that each need their own margin. */
.bz-switch { background: var(--em-sand-band);
             padding: clamp(50px, 6vw, 76px) 0 clamp(26px, 3vw, 38px); }

/* On the destination page the switcher arrives after .bz-related, which is
   the same sand and already carries the space above the cards. On the four
   vertical pages it follows the cream portfolio grid directly, so the sand
   edge would start at the foot of the last card. The gap belongs to that
   junction only — one band's worth of cream between the tiles and the plate. */
#portfolio + .bz-switch { margin-top: var(--space-band); }
.bz-switch__h {
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  /* --em-ink-eyebrow is 4.23:1 on sand and this is 11px type; --em-ink-sand
     is the token the palette keeps for this ground, at 4.92:1. */
  color: var(--em-text-eyebrow-neutral);
  padding-bottom: 16px; border-bottom: 1px solid rgba(var(--em-rgb-ink), .16);
}
.bz-switch__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0; list-style: none; margin: 0; padding: 0;
}
.bz-switch__i {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 62px; padding: 8px 0;
  font-family: var(--em-display); font-size: clamp(20px, 2vw, 25px); line-height: 1.1;
  color: var(--em-ink); border-bottom: 1px solid rgba(var(--em-rgb-ink), .10);
  transition: color var(--em-t) ease;
}
.bz-switch__i:hover { color: var(--em-ink); }
.bz-switch__a { color: var(--em-ink-mute); font-family: var(--em-body); font-size: 15px;
                transition: transform var(--em-t) var(--em-e-soft), color var(--em-t) ease; }
.bz-switch__i:hover .bz-switch__a { transform: translateX(4px); color: var(--em-ink); }
/* The one you are on is not a link, and says so in words as well as in
   weight — a colour difference alone is not a state. */
/* justify-content: flex-start on this one: with space-between the label was
   pushed to the right edge of its own cell, which put "You are here" directly
   beside the NEXT vertical's name and read as a label on that one. */
.bz-switch__i.is-here { color: var(--em-ink-mute); justify-content: flex-start; gap: 14px; }
.bz-switch__i.is-here::after {
  content: 'You are here'; font-family: var(--em-body); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--em-accent);
}

@media (min-width: 640px) {
  .bz-switch__list { gap: 0 clamp(24px, 4vw, 60px); }
}

/* ————————————————————— 10 · Motion —————————————————————

   Declared INSIDE the negative query, the way places.css and motion.css do
   it: a `prefers-reduced-motion: reduce` block written to cancel a transition
   adds no specificity and loses to the base rule it was meant to override.
   Everything that moves on this page is listed here and nowhere else. */

@media (prefers-reduced-motion: reduce) {
  .bz-card__media > img,
  .bz-figure .em-shot > img { transition: none; }
  .bz-card:hover .bz-card__media > img,
  .bz-card:focus-visible .bz-card__media > img { transform: none; }
  .bz-index__link::after,
  .bz-credit a > span, .bz-frame__c a > span, .bz-switch__a { transition: none; }
  .bz-credit a:hover > span, .bz-frame__c a:hover > span,
  .bz-switch__i:hover .bz-switch__a { transform: none; }
}

/* ————————————————————— 11 · Print ————————————————————— */

@media print {
  .bz-index, .bz-switch, .bz-related { display: none !important; }
  .bz-spine { display: block; }
  .bz-frame__f > img { max-width: 100%; }
  .bz-frame__v { display: none !important; }
}