/* ============================================================================
   BANHALMI ART — Museum editorial layer
   ----------------------------------------------------------------------------
   Loads last, after presence-core / archive-system / design-refinements /
   footer-elegant / final-layout-fixes / apple-editorial-system /
   responsive-header-system.

   Intent: move the archive from a product-marketing visual language (large
   display type at heavy weights, pill buttons, filled brown tiles, rounded
   corners, hover lifts) to the language of a printed exhibition catalogue —
   quieter type at lighter weights, hairline separation instead of filled
   panels, square corners, generous vertical air, and gold reduced from a
   decorative colour to a structural accent.

   SPECIFICITY NOTE. Earlier layers declare a great many rules at
   `body.apple-archive .some-class` (0,2,1) with !important. A later
   stylesheet does not win on load order alone against a higher-specificity
   !important declaration, so every selector here is prefixed `html
   body.apple-archive` and written out explicitly rather than grouped in
   :where() — :where() contributes zero specificity and silently loses.
   This makes the layer deterministic instead of approximately correct.

   DELIBERATE OMISSIONS. The archive source hub (design-refinements.css) and
   the homepage centre-axis chronology (apple-editorial-system.css) already
   received considered treatments in earlier passes. They are left to those
   owners and only re-toned here, never re-laid-out.

   ALIASES. Several selectors below (.masonry, .strip, .gallery, .art-gallery,
   .chronology, .archive-list, .record-list, .button, a.cta, .buttons,
   .cta-row, .tile, .panel, .divider) currently match nothing. They are kept
   deliberately: the layers this one overrides style the same aliases, so a
   page that starts using one would otherwise pick up the old rounded, filled
   treatment from those layers with no correction here. Dead selectors are
   cheap; a silently un-retuned component is not.

   This is an additive layer. No earlier stylesheet was rewritten, so the
   whole retune can be reverted by removing one <link> tag.
   ========================================================================= */

:root{
  /* ---------------------------------------------------------------------
     Three grounds, not seven.

     The loaded stack carried seven near-black surface tokens — presence-bg
     #0b0a09, art-bg #0e0d0b, art-surface #151411, presence-raised #18130c,
     presence-panel #211a11 and two of this layer's own. Measured against
     each other, every adjacent step came out between 1.002 and 1.071:1.
     Below roughly 1.10 the difference is invisible on most screens, so the
     site had seven "different" backgrounds that the eye reads as one, and
     blocks stopped separating.

     Reduced here to three tones. The steps measure 1.115 and 1.173 against
     each other — quiet, but above the roughly 1.10 threshold where a large
     flat area stops reading as the same colour. (A first attempt used
     #131313/#1b1b1b and measured 1.066/1.079, which was still invisible; the
     values below were chosen by measurement, not by eye.) Body text keeps
     13.4:1 and secondary text 5.9:1 even on the lightest tone.

     The brown chroma is dropped so photographs sit on neutral rather than on
     a tea stain, and every older token is re-pointed at the scale so all the
     layers inherit it.
     --------------------------------------------------------------------- */
  --mus-ground:#0a0a0a;   /* resting surface for most sections           */
  --mus-raised:#181818;   /* thesis and statement blocks                 */
  --mus-panel:#262626;    /* card and tile surfaces                      */

  --art-bg:#0a0a0a;
  --art-surface:#262626;
  --art-surface-2:#262626;
  --presence-bg:#0a0a0a;
  --presence-raised:#181818;
  --presence-panel:#262626;
  --mus-hair:rgba(255,255,255,.085);
  /* Control boundaries, not decoration. These buttons have a transparent
     background, so the border is the only thing that identifies them as
     controls and it has to clear WCAG 1.4.11's 3:1 against the ground.
     The first draft used .16 alpha, which measured 1.54:1 — visually quiet
     but effectively invisible to anyone with reduced contrast sensitivity.
     .38 measures 3.5:1. */
  --mus-hair-strong:rgba(255,255,255,.38);
  --mus-gold:#b79c44;
  /* Eyebrow labels are set at .655rem, so they are small text and need
     4.5:1. Gold at .62 alpha measured 3.44:1 — a regression against the
     solid gold it replaced. .82 measures 5.2:1 and still reads as held
     back next to the solid accent. */
  --mus-gold-quiet:rgba(183,156,68,.82);
  --mus-gold-hair:rgba(183,156,68,.26);
  --mus-ink:#f2f1ef;
  --mus-soft:#a5a29d;
  --mus-measure:58ch;
  --mus-section:clamp(5rem,9vw,10rem);
  --mus-plate-gap:clamp(1.25rem,2.2vw,2.75rem);
  --mus-ease:cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   0a. Section tones

   Sections are painted by .tone-a / .tone-b / .tone-c, which every page
   defines in its own inline <style> as #0e0d0b, #14120f and #1a1713 — a
   fourth near-black palette on top of the seven tokens, and just as
   indistinguishable: the steps measure about 1.04 and 1.07:1. That is why the
   alternation between blocks never read as alternation.

   Re-pointed at the three-tone scale so the rhythm becomes visible. The
   inline rules are left in place as the fallback they should have been.
   ----------------------------------------------------------------------- */
html body.apple-archive .tone-a{background:var(--mus-ground)!important}
html body.apple-archive .tone-b{background:var(--mus-raised)!important}
html body.apple-archive .tone-c{background:var(--mus-panel)!important}
html body.apple-archive section.tone-b,
html body.apple-archive section.tone-c{
  border-top:1px solid var(--mus-hair)!important;
  border-bottom:1px solid var(--mus-hair)!important;
}

/* The rhythm cannot depend on a class nobody applied.
 *
 * Re-pointing .tone-a/b/c fixed the palette but changed almost nothing on the
 * site, and it took a count to see why: of 385 sections across 130 pages, only
 * 31 carry a tone class at all. Seventy-five pages have none. The alternation
 * those pages did have came from design-refinements.css, which paints every
 * second section rgba(255,255,255,.012) — a 1.2% veil on near-black, about
 * 1.03:1. Present in the code, absent to the eye. That is the whole reason the
 * blocks still looked like one flat colour.
 *
 * So the rhythm is structural here: every second section of <main> is raised,
 * with a hairline to close it. No class, no markup change, all 130 pages. An
 * explicit tone class still wins, because the rules above come later in the
 * cascade for the same specificity — pages that were tuned by hand keep their
 * tuning. The hero, the intro band and the footer are excluded: a page opens
 * on the ground tone, always. */
html body.apple-archive main>section:nth-of-type(even):not(.hero):not(.presence-context):not(.presence-context--intro):not([class*="tone-"]){
  background:var(--mus-raised)!important;
  border-top:1px solid var(--mus-hair)!important;
  border-bottom:1px solid var(--mus-hair)!important;
}
html body.apple-archive main>section:nth-of-type(odd):not([class*="tone-"]){
  background:var(--mus-ground)!important;
}

/* --------------------------------------------------------------------------
   0. One vertical axis

   Centring was applied ad hoc: an inline <style> in every page centred every
   .intro block, archive-system centred the thesis wrap, apple-editorial
   centred the gallery introduction. The result was that section headings sat
   on the centre line while their own body text started from the left, so the
   reader's eye lost the vertical axis at each section.

   Everything now starts from the same left edge. Three deliberate exceptions
   remain: the pull quote, which is a set piece; the gallery's load-more
   control, which is a button row rather than reading matter; and the footer,
   which is a colophon.
   ----------------------------------------------------------------------- */
html body.apple-archive main,
html body.apple-archive main .intro,
html body.apple-archive main .intro .lead,
html body.apple-archive main .wrap,
html body.apple-archive main .wrap.narrow,
html body.apple-archive main section,
html body.apple-archive main p.meta,
html body.apple-archive .presence-context .wrap,
html body.apple-archive .presence-context--intro .wrap,
html body.apple-archive #works>.wrap>.intro{
  text-align:left!important;
}
html body.apple-archive #works>.wrap>.intro :where(.lead,p),
html body.apple-archive .presence-context--intro h2,
html body.apple-archive .presence-context--intro .presence-copy,
html body.apple-archive .presence-context .presence-copy{
  margin-inline:0!important;
}
/* The set pieces that stay centred. */
html body.apple-archive .statement,
html body.apple-archive .statement.wrap,
html body.apple-archive .statement.wrap .label,
html body.apple-archive .statement.wrap blockquote,
html body.apple-archive .gal-actions,
html body.apple-archive footer{
  text-align:center!important;
}
html body.apple-archive .statement.wrap blockquote{margin-inline:auto!important}

/* --------------------------------------------------------------------------
   1. Type — catalogue scale
   Display sizes come down and weight comes down with them. A 5.1rem heading
   at weight 600 is a product launch; a 3.5rem heading at weight 400 with
   near-neutral tracking is a title page.
   ----------------------------------------------------------------------- */
html body.apple-archive{
  font-size:clamp(15.5px,.14vw + 15px,17px)!important;
  line-height:1.74!important;
  letter-spacing:-.006em!important;
  color:var(--mus-ink)!important;
}
html body.apple-archive h1,
html body.apple-archive h2,
html body.apple-archive h3,
html body.apple-archive h4{
  font-weight:400!important;
  text-wrap:balance;
}
html body.apple-archive h1{
  font-size:clamp(2.1rem,3.5vw,3.55rem)!important;
  line-height:1.075!important;
  letter-spacing:-.02em!important;
  max-width:17ch;
}
html body.apple-archive h2{
  font-size:clamp(1.55rem,2.4vw,2.4rem)!important;
  line-height:1.14!important;
  letter-spacing:-.016em!important;
  max-width:24ch;
}
html body.apple-archive h3{
  font-size:clamp(1.02rem,.9vw,1.2rem)!important;
  line-height:1.32!important;
  letter-spacing:-.004em!important;
  font-weight:500!important;
}
html body.apple-archive h4{
  font-size:.92rem!important;
  line-height:1.4!important;
  letter-spacing:.01em!important;
  font-weight:500!important;
}
html body.apple-archive p,
html body.apple-archive li{line-height:1.74!important}
html body.apple-archive main p{max-width:var(--mus-measure)}
html body.apple-archive main p + p{margin-top:1.25em!important}

/* Lead paragraphs sit barely above body size. In a catalogue the standfirst
   is distinguished by colour and measure, not by scale. */
html body.apple-archive main .lead,
html body.apple-archive main p.lead{
  font-size:clamp(1.01rem,.28vw + .95rem,1.13rem)!important;
  line-height:1.7!important;
  letter-spacing:-.004em!important;
  max-width:56ch!important;
  color:var(--mus-soft)!important;
}

/* Section labels: the catalogue's running head. Small, widely tracked,
   never bold, gold held back to a quiet tone. */
html body.apple-archive .label,
html body.apple-archive .eyebrow,
html body.apple-archive .press-label,
html body.apple-archive .presence-kicker,
html body.apple-archive .era-no,
html body.apple-archive .phase-no,
html body.apple-archive .period-no,
html body.apple-archive .record-depth-date{
  font-size:.655rem!important;
  line-height:1.45!important;
  letter-spacing:.235em!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  color:var(--mus-gold-quiet)!important;
}
html body.apple-archive .label,
html body.apple-archive .eyebrow,
html body.apple-archive .presence-kicker{margin-bottom:clamp(1rem,1.6vw,1.5rem)!important}

/* Plate captions. */
html body.apple-archive figcaption,
html body.apple-archive .cap,
html body.apple-archive .meta{
  font-size:.715rem!important;
  line-height:1.6!important;
  letter-spacing:.045em!important;
  color:var(--mus-soft)!important;
  padding:.85rem .05rem 0!important;
  background:transparent!important;
}

/* --------------------------------------------------------------------------
   2. Rhythm — air instead of rules
   Catalogues separate with white space and use hairlines sparingly.
   ----------------------------------------------------------------------- */
html body.apple-archive main>section{padding-block:var(--mus-section)!important}
html body.apple-archive main>section + section{border-top:1px solid var(--mus-hair)!important}
html body.apple-archive hr,
html body.apple-archive .rule,
html body.apple-archive .divider{
  border-color:var(--mus-hair)!important;
  margin-block:clamp(2.75rem,5vw,5rem)!important;
  opacity:1!important;
}
html body.apple-archive section > * + *{margin-top:clamp(1.35rem,2.2vw,2rem)!important}
html body.apple-archive section > h2 + *,
html body.apple-archive section > h3 + *{margin-top:clamp(.9rem,1.5vw,1.35rem)!important}
html body.apple-archive .intro{margin-bottom:clamp(3.25rem,6vw,5.5rem)!important}

/* --------------------------------------------------------------------------
   3. Square corners
   Nothing in a printed catalogue has a rounded corner.
   ----------------------------------------------------------------------- */
html body.apple-archive img,
html body.apple-archive figure,
html body.apple-archive .card,
html body.apple-archive .panel,
html body.apple-archive .tile,
html body.apple-archive .oeuvre-phase-grid,
html body.apple-archive .record-links,
html body.apple-archive .project-evidence-grid,
html body.apple-archive .evidence-link,
html body.apple-archive .curatorial-periods__grid,
html body.apple-archive .professional-side{border-radius:0!important}

/* --------------------------------------------------------------------------
   4. Panels → hairline cells
   The filled tile grids (1px gap over a line-coloured background, brown
   panel fill) read as UI cards. Converted to transparent cells separated by
   hairlines, which is how a catalogue sets a table of works.

   The archive source hub is excluded on purpose: design-refinements.css
   already renders it as a two-column definition list, which is the correct
   catalogue form for it.
   ----------------------------------------------------------------------- */
html body.apple-archive .record-links,
html body.apple-archive .project-evidence-grid,
html body.apple-archive .oeuvre-phase-grid,
html body.apple-archive .curatorial-periods__grid{
  gap:0!important;
  background:transparent!important;
  border-top:1px solid var(--mus-hair)!important;
  border-left:1px solid var(--mus-hair)!important;
  border-right:0!important;
  border-bottom:0!important;
  overflow:visible!important;
}
html body.apple-archive .record-links > *,
html body.apple-archive .project-evidence-grid > *,
html body.apple-archive .oeuvre-phase-grid > *,
html body.apple-archive .curatorial-periods__grid > *{
  background:transparent!important;
  border-right:1px solid var(--mus-hair)!important;
  border-bottom:1px solid var(--mus-hair)!important;
  padding:clamp(1.5rem,2.4vw,2.25rem)!important;
  transition:background-color .4s var(--mus-ease)!important;
}
html body.apple-archive .record-links > a:hover{background:rgba(255,255,255,.022)!important}
html body.apple-archive .evidence-link{
  background:transparent!important;
  border:0!important;
  padding:clamp(1.5rem,2.4vw,2.25rem)!important;
}
html body.apple-archive .evidence-item{background:transparent!important}
html body.apple-archive .evidence-context{
  border-top:1px solid var(--mus-hair)!important;
  color:var(--mus-gold-quiet)!important;
  padding:.85rem clamp(1.5rem,2.4vw,2.25rem)!important;
  font-size:.7rem!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}
html body.apple-archive .curatorial-period{background:transparent!important}
html body.apple-archive .oeuvre-phase{background:transparent!important;margin-top:0!important}

/* Card titles inside cells: quiet, not gold-shouted. */
html body.apple-archive .record-links strong{
  color:var(--mus-ink)!important;
  font-weight:500!important;
  font-size:.94rem!important;
  line-height:1.35!important;
  letter-spacing:-.004em!important;
}
html body.apple-archive .record-links span,
html body.apple-archive .record-links small{
  color:var(--mus-soft)!important;
  font-size:.775rem!important;
  line-height:1.6!important;
}
html body.apple-archive .record-depth-grid h3{color:var(--mus-ink)!important}

/* --------------------------------------------------------------------------
   5. Controls — plates, not pills
   Rounded gold pills are the loudest non-photographic element on the site.
   Replaced with hairline-ruled rectangles in tracked small caps; the hover
   lift is dropped in favour of a colour change only.
   ----------------------------------------------------------------------- */
html body.apple-archive .btn,
html body.apple-archive .button,
html body.apple-archive a.cta,
html body.apple-archive .svc-cta,
html body.apple-archive .actions a,
html body.apple-archive .buttons a,
html body.apple-archive .gal-actions label,
html body.apple-archive .professional-side__cta{
  border-radius:0!important;
  border:1px solid var(--mus-hair-strong)!important;
  background:transparent!important;
  color:var(--mus-ink)!important;
  font-size:.7rem!important;
  font-weight:500!important;
  letter-spacing:.165em!important;
  text-transform:uppercase!important;
  line-height:1.2!important;
  /* The pill styling carried min-height:44px, which is also the touch target
     floor. Dropping it to 0 left the height entirely at the mercy of the
     label's font metrics, so the floor is restored explicitly rather than
     relying on padding to happen to add up. */
  min-height:44px!important;
  padding:1rem 1.85rem!important;
  transition:border-color .4s var(--mus-ease),color .4s var(--mus-ease),background-color .4s var(--mus-ease)!important;
}
html body.apple-archive .btn:hover,
html body.apple-archive .button:hover,
html body.apple-archive a.cta:hover,
html body.apple-archive .svc-cta:hover,
html body.apple-archive .actions a:hover,
html body.apple-archive .buttons a:hover,
html body.apple-archive .gal-actions label:hover,
html body.apple-archive .btn:focus-visible,
html body.apple-archive .button:focus-visible,
html body.apple-archive a.cta:focus-visible,
html body.apple-archive .svc-cta:focus-visible{
  transform:none!important;
  background:transparent!important;
  border-color:var(--mus-gold)!important;
  color:var(--mus-gold)!important;
}
html body.apple-archive .hero-cta,
html body.apple-archive .actions,
html body.apple-archive .buttons,
html body.apple-archive .cta-row{
  gap:clamp(.65rem,1.1vw,1rem)!important;
  margin-top:clamp(2.2rem,3.5vw,3.2rem)!important;
}

/* Body links: ink with a gold hairline underline rather than gold text. */
html body.apple-archive main p a:not(.btn):not(.button):not(.cta),
html body.apple-archive main li a:not(.btn):not(.button):not(.cta){
  color:var(--mus-ink)!important;
  text-decoration:underline!important;
  text-decoration-color:var(--mus-gold-hair)!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:.24em!important;
  transition:text-decoration-color .35s var(--mus-ease),color .35s var(--mus-ease)!important;
}
html body.apple-archive main p a:not(.btn):not(.button):not(.cta):hover,
html body.apple-archive main li a:not(.btn):not(.button):not(.cta):hover{
  color:var(--mus-gold)!important;
  text-decoration-color:var(--mus-gold)!important;
}

/* Standalone reference links. */
html body.apple-archive .presence-period-links a,
html body.apple-archive .oeuvre-integrity-links a,
html body.apple-archive .chapter-nav a{
  color:var(--mus-soft)!important;
  font-size:.72rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive .presence-period-links a:hover,
html body.apple-archive .oeuvre-integrity-links a:hover,
html body.apple-archive .chapter-nav a:hover{color:var(--mus-gold)!important;text-decoration:none!important}
html body.apple-archive .presence-period-links,
html body.apple-archive .oeuvre-integrity-links,
html body.apple-archive .chapter-nav{gap:.85rem 2.25rem!important}
html body.apple-archive .presence-link{
  color:var(--mus-soft)!important;
  font-size:.72rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  margin-top:clamp(1.75rem,3vw,2.5rem)!important;
}
html body.apple-archive .presence-link:hover{color:var(--mus-gold)!important}

/* --------------------------------------------------------------------------
   6. Thesis and statement blocks
   The raised intro block keeps its emphasis but loses the gradient wash;
   it is now framed by air and one hairline.
   ----------------------------------------------------------------------- */
html body.apple-archive .presence-context,
html body.apple-archive .presence-context--intro{
  background:var(--mus-raised)!important;
  border-top:1px solid var(--mus-hair)!important;
  border-bottom:1px solid var(--mus-hair)!important;
  padding-block:clamp(4.5rem,8vw,8rem)!important;
}
html body.apple-archive .presence-context--intro h2{
  font-size:clamp(1.7rem,2.9vw,2.85rem)!important;
  line-height:1.12!important;
  letter-spacing:-.018em!important;
  max-width:21ch!important;
  margin-inline:auto!important;
}
html body.apple-archive .presence-context--intro .presence-copy,
html body.apple-archive .presence-context .presence-copy{
  font-size:clamp(1.01rem,.3vw + .95rem,1.15rem)!important;
  line-height:1.72!important;
  color:var(--mus-soft)!important;
  max-width:58ch!important;
  margin-inline:auto!important;
}
html body.apple-archive .presence-periods,
html body.apple-archive .oeuvre-integrity,
html body.apple-archive .record-depth,
html body.apple-archive .record-relationships,
html body.apple-archive .project-evidence{
  background:transparent!important;
  border-top:1px solid var(--mus-hair)!important;
  border-bottom:0!important;
  padding-block:var(--mus-section)!important;
}
html body.apple-archive blockquote{
  font-size:clamp(1.2rem,2vw,1.85rem)!important;
  line-height:1.36!important;
  letter-spacing:-.012em!important;
  font-weight:400!important;
  max-width:27ch!important;
  color:var(--mus-ink)!important;
}

/* --------------------------------------------------------------------------
   7. Hero — a title page, not a billboard
   ----------------------------------------------------------------------- */
html body.apple-archive .hero{
  min-height:min(760px,88svh)!important;
  padding-block:clamp(7.5rem,15vh,12rem) clamp(4.5rem,9vh,8rem)!important;
}
html body.apple-archive .hero-sub{
  font-size:clamp(.98rem,.35vw + .9rem,1.1rem)!important;
  line-height:1.7!important;
  max-width:46ch!important;
  color:var(--mus-soft)!important;
}

/* --------------------------------------------------------------------------
   8. Plates — the photographs carry the page
   Wider gutters, square corners, no surface fill behind the image, and no
   scale on hover: a catalogue plate does not move.
   ----------------------------------------------------------------------- */
html body.apple-archive .collage,
html body.apple-archive .masonry,
html body.apple-archive .strip,
html body.apple-archive .gallery,
html body.apple-archive .art-gallery,
html body.apple-archive [data-gallery],
html body.apple-archive .gallery-grid,
html body.apple-archive .archive-gallery-grid,
html body.apple-archive .project-gallery-grid,
html body.apple-archive #galwrap>.gal-batch{
  gap:var(--mus-plate-gap)!important;
  margin-top:clamp(2.75rem,5vw,4.5rem)!important;
}
/* Paginated galleries. #galwrap carries the .collage class for legacy
   reasons, but its direct children are .gal-batch wrappers, not figures, so
   it must never itself become the photo grid — that produced a grid of
   grids and squeezed each plate to a fraction of its width. The earlier fix
   for this lived only inside @media(min-width:1101px), which left the same
   collapse in place on tablets; it is unconditional here, and the batch
   itself becomes the responsive plate grid (3 / 2 / 1 columns).
   Hidden batches must stay hidden, hence the :not([hidden]) guard.

   display:block alone was not enough, and this is the part I got wrong the
   first time. Every page's inline <style> still carries the original masonry
   system — `.collage{columns:3}` — and CSS multi-column is independent of
   display. So #galwrap stayed a three-column multicol box, each column about
   467px wide, and the batch's own three-column grid was laid out inside one
   of those columns: nine effective columns, plates 132px across on a 1600px
   screen. Setting display without cancelling `columns` moved the grid-in-grid
   one level up instead of removing it. The reset below is the actual fix. */
html body.apple-archive #galwrap.collage,
html body.apple-archive .collage,
html body.apple-archive #galwrap>.gal-batch{
  columns:auto!important;
  column-count:auto!important;
  column-width:auto!important;
}
html body.apple-archive #galwrap.collage{display:block!important}

/* --------------------------------------------------------------------------
   8b. Natural-ratio collage — this replaces the equal 4:3 plates
   ----------------------------------------------------------------------- */
/* The equal-plate grid was the wrong answer to a real problem.
 *
 * Of 2,043 photographs in the archive, 54% are landscape and 40% portrait, so
 * cropping them to a common frame would have cut two fifths of the work in
 * half. The fix was a fixed 4:3 cell with the image contained inside it — no
 * crop, but measured just now: a 420×315 cell holding a 420×280 photograph,
 * 89% filled. Thirty-five pixels of empty plate under every landscape picture
 * and a tall margin beside every portrait one. Nothing was cut, but the
 * archive was made to look mechanically uniform, which for a photographer is
 * its own kind of damage.
 *
 * So: one level of CSS multi-column, and the picture keeps its own shape.
 * Landscape reads wide, portrait reads tall, and the differing heights make
 * the collage rhythm the exhibition wall had.
 *
 * One level is the whole point. #galwrap holds .gal-batch wrappers, so the
 * batch is the column container and #galwrap stays a plain block; the earlier
 * bug was multi-column inside multi-column, which squeezed the plates to 132px.
 *
 * The trade-off, stated plainly: CSS columns fill top-to-bottom, so the
 * reading order runs down each column rather than across. For a gallery of one
 * exhibition that is acceptable; the DOM order, and therefore the keyboard and
 * screen-reader order, stays chronological. */
html body.apple-archive #galwrap>.gal-batch:not([hidden]),
html body.apple-archive .collage:not(#galwrap):not([hidden]){
  display:block!important;
  columns:3!important;
  column-gap:var(--mus-plate-gap)!important;
}
html body.apple-archive #galwrap>.gal-batch[hidden]{display:none!important}
@media(max-width:1100px){
  html body.apple-archive #galwrap>.gal-batch:not([hidden]),
  html body.apple-archive .collage:not(#galwrap):not([hidden]){columns:2!important}
}
@media(max-width:700px){
  html body.apple-archive #galwrap>.gal-batch:not([hidden]),
  html body.apple-archive .collage:not(#galwrap):not([hidden]){columns:1!important}
}
/* The plate is whatever shape the photograph is. */
html body.apple-archive #galwrap figure,
html body.apple-archive #galwrap>.gal-batch>figure,
html body.apple-archive .collage>figure,
html body.apple-archive .collage figure{
  aspect-ratio:auto!important;
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  place-items:normal!important;
  break-inside:avoid!important;
  margin:0 0 var(--mus-plate-gap)!important;
}
html body.apple-archive #galwrap figure>img,
html body.apple-archive #galwrap>.gal-batch>figure>img,
html body.apple-archive .collage>figure>img,
html body.apple-archive .collage figure>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
}

html body.apple-archive .collage figure,
html body.apple-archive .masonry figure,
html body.apple-archive .strip figure,
html body.apple-archive .gallery figure,
html body.apple-archive .art-gallery figure,
html body.apple-archive [data-gallery] figure{
  background:transparent!important;
  border-radius:0!important;
  overflow:hidden!important;
}

/* The equal 4:3 plate was removed on 2 August. It cropped nothing, but it
   letterboxed everything: measured at 1440px, a 420x315 cell holding a
   420x280 photograph. Natural-ratio collage now lives in section 8b above. */
html body.apple-archive .collage img,
html body.apple-archive .masonry img,
html body.apple-archive .strip img,
html body.apple-archive .gallery img,
html body.apple-archive .art-gallery img,
html body.apple-archive [data-gallery] img{
  transition:opacity .55s var(--mus-ease)!important;
}
html body.apple-archive .collage figure:hover img,
html body.apple-archive .masonry figure:hover img,
html body.apple-archive .gallery figure:hover img,
html body.apple-archive .art-gallery figure:hover img,
html body.apple-archive [data-gallery] figure:hover img{
  transform:none!important;
  opacity:.86!important;
}

/* --------------------------------------------------------------------------
   9. Chronologies
   The centre axis stays where apple-editorial-system.css put it; only the
   gold drops to a hairline so the dates, not the rule, carry the eye.
   ----------------------------------------------------------------------- */
@media(min-width:1101px){
  html body.apple-archive #journey .timeline::before,
  html body.apple-archive #journey .chronology::before,
  html body.apple-archive #journey .archive-list::before,
  html body.apple-archive #journey .record-list::before,
  html body.apple-archive #exhibitions .timeline::before,
  html body.apple-archive #exhibitions .chronology::before,
  html body.apple-archive #exhibitions .archive-list::before,
  html body.apple-archive #exhibitions .record-list::before{background:var(--mus-hair)!important}
}
/* Chronology entries must never carry their own side rule: the section has
   exactly one vertical line, the centre axis drawn by the container's
   ::before. A per-item border-left was still reaching these items on the
   live site (verified: eleven elements inside #exhibitions computing
   border-left:1px), producing the stray vertical lines beside the entries.
   Neutralised here defensively so it cannot come back from any layer. */
html body.apple-archive #journey .timeline,
html body.apple-archive #journey .chronology,
html body.apple-archive #journey .archive-list,
html body.apple-archive #journey .record-list,
html body.apple-archive #exhibitions .timeline,
html body.apple-archive #exhibitions .chronology,
html body.apple-archive #exhibitions .archive-list,
html body.apple-archive #exhibitions .record-list,
html body.apple-archive #journey .timeline > *,
html body.apple-archive #journey .chronology > *,
html body.apple-archive #journey .archive-list > *,
html body.apple-archive #journey .record-list > *,
html body.apple-archive #exhibitions .timeline > *,
html body.apple-archive #exhibitions .chronology > *,
html body.apple-archive #exhibitions .archive-list > *,
html body.apple-archive #exhibitions .record-list > *{
  border-left:0!important;
  border-right:0!important;
}

html body.apple-archive .presence-period-grid,
html body.apple-archive .record-depth-grid,
html body.apple-archive section.era .grid{
  border-top:1px solid var(--mus-hair)!important;
  column-gap:clamp(3rem,6vw,6rem)!important;
}
html body.apple-archive .presence-period,
html body.apple-archive .record-depth-grid article,
html body.apple-archive section.era .grid article.item{
  border-bottom:1px solid var(--mus-hair)!important;
  padding-block:clamp(1.75rem,2.6vw,2.4rem)!important;
}
html body.apple-archive .presence-period p,
html body.apple-archive .record-depth-grid article p{
  color:var(--mus-soft)!important;
  max-width:54ch!important;
}

/* --------------------------------------------------------------------------
   10. Menu — a contents page
   ----------------------------------------------------------------------- */
html body.apple-archive #menu{background:var(--mus-ground)!important}
html body.apple-archive #menu .m-main{
  font-weight:400!important;
  letter-spacing:-.014em!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive #menu .m-main,
html body.apple-archive #menu details,
html body.apple-archive #menu details.svc summary{border-top-color:var(--mus-hair)!important}
html body.apple-archive #menu .m-desc{
  color:rgba(242,241,239,.62)!important;
  letter-spacing:0!important;
  line-height:1.6!important;
}
/* Three named groups instead of nine equal entries.
 *
 * The menu used to be a flat list — Books, Curators, Services, Exhibitions,
 * Press, Community, Writing, Contact — with a two- or three-line paragraph
 * under each, and no order a reader could predict. It read as an essay, not a
 * contents page. The markup is now three groups: what he made, how the career
 * ran, and how to work with him. Contact and its description are also inside a
 * group now, which incidentally fixes the stray line that used to land in the
 * right-hand column on all 88 pages. */
html body.apple-archive #menu .mwrap{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(2rem,4vw,4.5rem)!important;
  align-items:start!important;
}
html body.apple-archive #menu .m-group-title{
  font-size:.66rem!important;
  font-weight:500!important;
  letter-spacing:.24em!important;
  text-transform:uppercase!important;
  color:var(--mus-gold-quiet)!important;
  margin:0 0 1.1rem!important;
  padding-bottom:.8rem!important;
  border-bottom:1px solid var(--mus-hair)!important;
}
html body.apple-archive #menu .m-group>.m-main:first-of-type{border-top:0!important}
html body.apple-archive #menu .m-desc{
  margin:.35rem 0 0!important;
  font-size:.78rem!important;
}
html body.apple-archive #menu .m-foot{grid-column:1/-1!important}
@media(max-width:900px){
  html body.apple-archive #menu .mwrap{
    grid-template-columns:1fr!important;
    gap:2.25rem!important;
  }
}
html body.apple-archive #menu .m-foot{
  border-top-color:var(--mus-hair)!important;
  color:var(--mus-soft)!important;
  letter-spacing:.02em!important;
}
html body.apple-archive #menu .sub a{
  color:var(--mus-soft)!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive #menu .sub a:hover{color:var(--mus-gold)!important}

/* --------------------------------------------------------------------------
   10b. The header stays put when the menu opens — on every screen

   responsive-header-system.css carries a block commented "The open menu must
   start below the fixed header and can never cover it", but it sits inside
   @media (min-width:901px), so the contract only ever held on desktop.
   Meanwhile apple-editorial-system.css sets `position:relative` on the nav
   whenever the menu is open, at every width. On desktop the media block put
   it back to fixed; on phones nothing did.

   Measured on a 390px viewport with the menu open: the nav computed
   position:relative at z-index 1002, the menu computed position:fixed at
   z-index 1150, and elementFromPoint at the centre of the header returned a
   menu link. The header was not merely scrolled away — it was painted over.

   The contract is restated here without a width condition.
   ----------------------------------------------------------------------- */
html body.apple-archive.menu-open > nav:not(#menu):not(.menu):not(.archive-nav),
html body.apple-archive.menu-open > .topbar{
  position:fixed!important;
  inset:0 0 auto 0!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  isolation:isolate!important;
  z-index:2147483000!important;
}
html body.apple-archive.menu-open #menu,
html body.apple-archive.menu-open > .menu{
  position:fixed!important;
  inset:var(--bn-header-height,68px) 0 0 0!important;
  top:var(--bn-header-height,68px)!important;
  height:calc(100dvh - var(--bn-header-height,68px))!important;
  max-height:calc(100dvh - var(--bn-header-height,68px))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  z-index:2147482000!important;
}
/* The mobile menu padded itself down by 5.25rem to clear a header it was
   covering. It now starts below the header, so that reserve is dead space. */
@media(max-width:900px){
  html body.apple-archive.menu-open #menu{
    padding-top:clamp(1.25rem,3vh,2rem)!important;
    padding-bottom:max(2rem,env(safe-area-inset-bottom))!important;
  }
}

/* --------------------------------------------------------------------------
   11. Footer — colophon
   ----------------------------------------------------------------------- */
html body.apple-archive footer{
  background:var(--mus-ground)!important;
  border-top:1px solid var(--mus-hair)!important;
  padding:clamp(5rem,8vw,7.5rem) clamp(1.25rem,5vw,5rem) clamp(3rem,4.5vw,4rem)!important;
}
html body.apple-archive footer p.brand{
  font-weight:500!important;
  letter-spacing:.3em!important;
  font-size:.72rem!important;
  color:var(--mus-ink)!important;
}
html body.apple-archive footer .socials a{
  color:var(--mus-soft)!important;
  font-size:.735rem!important;
  letter-spacing:.055em!important;
  border-right-color:var(--mus-hair)!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive footer .socials a:hover{color:var(--mus-gold)!important}
html body.apple-archive footer .consent-reset{
  color:var(--mus-soft)!important;
  font-size:.7rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
html body.apple-archive footer .consent-reset:hover{color:var(--mus-gold)!important}

/* Gold and white, in that order of scarcity.
   Measured before this change, the footer ran on two greys — rgb(170,168,164)
   and rgb(165,162,157) — a difference nobody can see, applied at random. Every
   line therefore had the same weight and nothing led: the studio's own name,
   its address line, the contact address and a link to Pinterest all read as
   equally important. The rule here is a hierarchy of three, not a palette:

     white  (--mus-ink)        the name and the way to reach him
     gold   (--mus-gold-quiet) the one identity line, and hover everywhere
     quiet  (--mus-soft)       everything a reader only needs once

   Gold is never a fill and never a border here — only ink. Contrast on the
   #0a0a0a ground: white 17.2:1, quiet gold 5.3:1, full gold 7.4:1. */
html body.apple-archive footer .flogo{color:var(--mus-gold)!important;opacity:1!important}
html body.apple-archive footer p.meta{
  color:var(--mus-soft)!important;
  line-height:1.85!important;
  letter-spacing:.012em!important;
}
/* The three lines of .meta — role, invitation, address — are one paragraph
   separated by <br>, so CSS cannot reach the first line on its own. Rather
   than change the markup on 88 pages to colour one phrase, the gold goes to
   the mark above and to the address below: the eye reads mark → who → how to
   write, and the middle stays quiet. */
html body.apple-archive footer p.meta a{
  color:var(--mus-ink)!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(183,156,68,.45)!important;
  padding-bottom:.12em!important;
  transition:color .35s var(--mus-ease),border-color .35s var(--mus-ease)!important;
}
html body.apple-archive footer p.meta a:hover{
  color:var(--mus-gold)!important;
  border-bottom-color:var(--mus-gold)!important;
}
html body.apple-archive footer p.fineprint{
  color:var(--mus-soft)!important;
  line-height:1.8!important;
}
html body.apple-archive footer p.fineprint a{
  color:var(--mus-ink)!important;
  text-decoration:none!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive footer p.fineprint a:hover{color:var(--mus-gold)!important}

/* Tap targets that are only as tall as their line.
 *
 * Measured at 390px: twenty-one links on the Hungarian homepage and five on the
 * press pages stood 19–20px high — under the 24px minimum of WCAG 2.5.8. They
 * are not the inline links a sentence exempts; they are the exhibition titles
 * in the timeline, the "Book page →" links on the cards, and the era navigation
 * on the press pages, each one a heading or a list item a reader is meant to
 * aim at with a thumb. Padding rather than font size, so the typography does
 * not move, and block display so the whole width answers to the tap. */
html body.apple-archive .t-item h3 a,
html body.apple-archive .card h3 a,
html body.apple-archive .card p a,
html body.apple-archive .chapter-nav a,
html body.apple-archive #menu .m-foot a{
  display:block!important;
  min-height:24px!important;
  padding-block:.2rem!important;
}

/* --------------------------------------------------------------------------
   11b. Header — the same two colours, the same restraint
   The bar was rgba(12,13,20,.94): a blue-grey that never matched the neutral
   #0a0a0a ground beneath it, so the page appeared to change temperature at the
   fold. The language links carried the same blue cast. Both are neutralised
   here, and the current language becomes gold ink with a hairline under it
   instead of a filled gold disc — the only round shape left in a system built
   on squares, and the one piece of gold that shouted.
   ----------------------------------------------------------------------- */
html body.apple-archive>nav:not(#menu):not(.menu):not(.archive-nav){
  background:rgba(10,10,10,.92)!important;
  border-bottom:1px solid var(--mus-hair)!important;
}
html body.apple-archive>nav:not(#menu) a.brand{color:var(--mus-ink)!important}
html body.apple-archive>nav:not(#menu) a.brand svg{color:var(--mus-gold)!important}
html body.apple-archive .langs a{
  color:rgba(242,241,239,.66)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  border-radius:0!important;
  background:transparent!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive .langs a:hover{color:var(--mus-ink)!important}
html body.apple-archive .langs a.on,
html body.apple-archive .langs a[aria-current]{
  color:var(--mus-gold)!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:inset 0 -1px 0 0 var(--mus-gold)!important;
}
html body.apple-archive .professional-side{
  background:transparent!important;
  border:1px solid var(--mus-hair)!important;
  padding:clamp(2rem,3.5vw,3rem)!important;
}

/* --------------------------------------------------------------------------
   12. Press archive — catalogue index
   ----------------------------------------------------------------------- */
html body.apple-archive section.thesis{
  background:transparent!important;
  border-top:1px solid var(--mus-hair)!important;
  border-bottom:1px solid var(--mus-hair)!important;
  padding-block:clamp(4rem,7vw,6.5rem)!important;
}
html body.apple-archive section.era{padding-block:clamp(4rem,7vw,6.5rem)!important}
html body.apple-archive section.era:nth-of-type(even){background:transparent!important}
html body.apple-archive .era-copy{color:var(--mus-soft)!important;max-width:46ch!important}
html body.apple-archive section.era .grid article.item > a{
  font-weight:500!important;
  font-size:.98rem!important;
  color:var(--mus-ink)!important;
}
html body.apple-archive section.era .grid article.item p.desc{color:var(--mus-soft)!important;max-width:54ch!important}
html body.apple-archive section.era .grid article.item p.note{
  color:var(--mus-gold-quiet)!important;
  font-size:.68rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
html body.apple-archive .source-grid strong{
  color:var(--mus-ink)!important;
  font-weight:500!important;
  font-size:.92rem!important;
}
html body.apple-archive .source-grid a:hover strong{color:var(--mus-gold)!important}
html body.apple-archive .source-grid small{color:var(--mus-soft)!important;font-size:.78rem!important}

/* --------------------------------------------------------------------------
   12b. Keyboard focus

   Two layers set `outline:0!important` on footer links, and nothing in the
   loaded stack defines a replacement — archive-page.css has a focus ring but
   is not linked by any page. The result was no visible focus indicator at all
   on every footer link site-wide, which fails WCAG 2.4.7 at Level A. One
   consistent ring is defined here for every interactive element, using the
   accent gold (7.35:1 against the ground) at a 2px width so it reads clearly
   without becoming a decorative element in its own right.
   ----------------------------------------------------------------------- */
html body.apple-archive a:focus-visible,
html body.apple-archive button:focus-visible,
html body.apple-archive summary:focus-visible,
html body.apple-archive [tabindex]:focus-visible,
html body.apple-archive input:focus-visible,
html body.apple-archive select:focus-visible,
html body.apple-archive textarea:focus-visible,
html body.apple-archive footer a:focus-visible,
html body.apple-archive footer button:focus-visible{
  outline:2px solid var(--mus-gold)!important;
  outline-offset:3px!important;
  border-radius:0!important;
}
/* The skip link must be reachable and legible when it takes focus. */
html body.apple-archive .skip-link:focus,
html body.apple-archive .skip-link:focus-visible{
  outline:2px solid var(--mus-gold)!important;
  outline-offset:3px!important;
  background:var(--mus-ground)!important;
  color:var(--mus-ink)!important;
}

/* Footer link row: standalone links need a 24px target under WCAG 2.5.8.
   At .735rem with .15rem padding these measured about 22px. */
html body.apple-archive footer .socials a{
  padding-block:.3rem!important;
  min-height:24px!important;
}

/* --------------------------------------------------------------------------
   13. Components that were never given any styling at all

   A sweep of every class used in the 130 pages against every rule in the
   external and inline stylesheets found a set of components with markup but
   no CSS anywhere. They were falling back to browser defaults — inline
   <strong> running straight into the following <span>, unstyled record
   pages, default link colours. Each is brought into the catalogue language
   here rather than left to the user agent.
   ----------------------------------------------------------------------- */

/* Press: the category legend (.press-type-grid). Its strong/span pairs were
   rendering as one unbroken run of text. */
html body.apple-archive .press-types{padding-block:clamp(3.5rem,6vw,5.5rem)!important}
html body.apple-archive .press-type-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:clamp(2rem,3.5vw,3rem)!important;
  border-top:1px solid var(--mus-hair)!important;
}
html body.apple-archive .press-type-grid > *{
  padding:clamp(1.35rem,2.2vw,1.9rem) clamp(1.5rem,3vw,3rem) clamp(1.35rem,2.2vw,1.9rem) 0!important;
  border-bottom:1px solid var(--mus-hair)!important;
  min-width:0!important;
}
html body.apple-archive .press-type-grid strong{
  display:block!important;
  margin-bottom:.5rem!important;
  color:var(--mus-ink)!important;
  font-weight:500!important;
  font-size:.94rem!important;
  line-height:1.35!important;
}
html body.apple-archive .press-type-grid span{
  display:block!important;
  color:var(--mus-soft)!important;
  font-size:.8rem!important;
  line-height:1.62!important;
  max-width:44ch!important;
}
html body.apple-archive section.sources{
  padding-block:clamp(4rem,7vw,6.5rem)!important;
  border-top:1px solid var(--mus-hair)!important;
}
html body.apple-archive .source-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:clamp(2rem,3.5vw,3rem)!important;
  border-top:1px solid var(--mus-hair)!important;
}
html body.apple-archive .source-grid > a{
  display:block!important;
  padding:clamp(1.35rem,2.2vw,1.9rem) clamp(1.5rem,3vw,3rem) clamp(1.35rem,2.2vw,1.9rem) 0!important;
  border-bottom:1px solid var(--mus-hair)!important;
  text-decoration:none!important;
  min-width:0!important;
}
html body.apple-archive .source-grid > a strong{display:block!important;margin-bottom:.4rem!important}

/* The period a chapter belongs to, and the way back to it.

   This replaced four paragraphs that were identical on all sixty-nine book
   and exhibition pages. What is left has to earn its space: the numeral and
   range read as a catalogue reference, the title carries the meaning, and one
   control leads to that period on the curators page. */
html body.apple-archive .record-period{
  margin-top:clamp(2.5rem,4.5vw,4rem)!important;
  padding-top:clamp(1.75rem,3vw,2.5rem)!important;
  border-top:1px solid var(--mus-hair)!important;
}
html body.apple-archive .record-period__name{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:.4rem 1.1rem!important;
  margin:0!important;
  max-width:none!important;
}
html body.apple-archive .record-period__no{
  color:var(--mus-gold)!important;
  font-size:.8rem!important;
  letter-spacing:.2em!important;
  font-weight:500!important;
}
html body.apple-archive .record-period__range{
  color:var(--mus-soft)!important;
  font-size:.8rem!important;
  letter-spacing:.14em!important;
  font-variant-numeric:tabular-nums!important;
}
html body.apple-archive .record-period__title{
  flex:1 1 100%!important;
  color:var(--mus-ink)!important;
  font-size:clamp(1.05rem,1.4vw,1.35rem)!important;
  line-height:1.3!important;
  letter-spacing:-.012em!important;
  margin-top:.35rem!important;
}
html body.apple-archive .record-period__cta{
  margin:clamp(1.5rem,2.5vw,2rem) 0 0!important;
  max-width:none!important;
}

/* Artwork record pages: a catalogue entry, plate above, metadata below. */
html body.apple-archive .archive-record{
  width:min(calc(100% - clamp(2rem,6vw,7rem)),74rem)!important;
  margin:0 auto!important;
  padding-block:clamp(5rem,9vh,8rem) var(--mus-section)!important;
}
html body.apple-archive .archive-record__header{margin-bottom:clamp(2.5rem,4.5vw,4rem)!important}
html body.apple-archive .archive-kicker{
  font-size:.655rem!important;
  letter-spacing:.235em!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  color:var(--mus-gold-quiet)!important;
  margin:0 0 clamp(1rem,1.6vw,1.5rem)!important;
}
html body.apple-archive .archive-lead{
  max-width:58ch!important;
  color:var(--mus-soft)!important;
  font-size:clamp(1.01rem,.28vw + .95rem,1.13rem)!important;
  line-height:1.7!important;
  margin-top:clamp(1rem,1.8vw,1.5rem)!important;
}
html body.apple-archive .archive-record__media{margin:0 0 clamp(2rem,3.5vw,3rem)!important}
html body.apple-archive .archive-record__media img{width:100%!important;height:auto!important}
html body.apple-archive .archive-record__metadata,
html body.apple-archive .archive-record__relations,
html body.apple-archive .archive-related-work{
  border-top:1px solid var(--mus-hair)!important;
  padding-top:clamp(1.75rem,3vw,2.5rem)!important;
  margin-top:clamp(2.5rem,4vw,3.5rem)!important;
}
/* The metadata list is itself the <dl>, and each term/value pair is wrapped
   in a <div> — a first pass styled `.archive-record__metadata dl`, which
   matches nothing, so the two-column caption grid never applied. The row is
   the wrapper div. */
html body.apple-archive .archive-record__metadata{margin-bottom:0!important;padding-bottom:0!important}
html body.apple-archive .archive-record__metadata > div{
  display:grid!important;
  grid-template-columns:minmax(9rem,14rem) minmax(0,1fr)!important;
  gap:0 clamp(1rem,2vw,2rem)!important;
  border-bottom:1px solid var(--mus-hair)!important;
}
html body.apple-archive .archive-record__metadata dt{
  margin:0!important;
  padding:.9rem 0!important;
  color:var(--mus-gold-quiet)!important;
  font-size:.68rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  line-height:1.6!important;
}
html body.apple-archive .archive-record__metadata dd{
  margin:0!important;
  padding:.9rem 0!important;
  color:var(--mus-soft)!important;
  font-size:.86rem!important;
  line-height:1.62!important;
}
/* The relations block is a <nav> of bare links, not a definition list. */
html body.apple-archive .archive-record__relations{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.85rem 2.25rem!important;
}
html body.apple-archive .archive-record__relations a{
  color:var(--mus-soft)!important;
  font-size:.72rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  transition:color .35s var(--mus-ease)!important;
}
html body.apple-archive .archive-record__relations a:hover{color:var(--mus-gold)!important}
html body.apple-archive .archive-relation-list{
  list-style:none!important;
  margin:1.25rem 0 0!important;
  padding:0!important;
  border-top:1px solid var(--mus-hair)!important;
}
html body.apple-archive .archive-relation-list li{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:.5rem 1.5rem!important;
  padding:.9rem 0!important;
  border-bottom:1px solid var(--mus-hair)!important;
}
html body.apple-archive .archive-relation-type{
  color:var(--mus-gold-quiet)!important;
  font-size:.66rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
html body.apple-archive .archive-status{
  display:inline-block!important;
  margin:0 0 1rem!important;
  padding:.35rem .8rem!important;
  border:1px solid var(--mus-gold-hair)!important;
  color:var(--mus-gold-quiet)!important;
  font-size:.64rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
html body.apple-archive .archive-identity,
html body.apple-archive .archive-contact{
  color:var(--mus-soft)!important;
  font-size:.78rem!important;
  line-height:1.62!important;
  max-width:60ch!important;
  margin-inline:auto!important;
}
html body.apple-archive .archive-identity{margin-top:1.75rem!important;letter-spacing:.03em!important}
html body.apple-archive .archive-contact{margin-top:.5rem!important}

/* The 1956 life-story panel.

   The panel is an <article> and sets overflow:auto on itself in the page's
   inline <style>. design-refinements.css carries
   `body.apple-archive :where(.card,.panel,article){overflow:visible}`, which
   is more specific than a bare `.story-panel`, so the external rule won and
   the panel could not scroll. Measured on a 390px viewport: 2,560px of story
   inside a 615px box with overflow computing to visible — the text was simply
   cut off, with no way to reach the rest. Desktop hid the bug because the
   panel was tall enough for most stories.

   Scrolling is restored here, sized in dvh so the mobile browser chrome
   cannot push the bottom out of reach, with the scroll contained so the page
   behind does not move and the close button lifted out of the scrolled flow. */
html body.apple-archive .story-panel{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  max-height:calc(100dvh - clamp(1.4rem,6vw,4.4rem))!important;
  padding-bottom:max(clamp(1.45rem,4vw,3.4rem),env(safe-area-inset-bottom))!important;
  border-radius:0!important;
  background:var(--mus-raised)!important;
  border:1px solid var(--mus-hair-strong)!important;
  box-shadow:none!important;
}
html body.apple-archive .story-close{
  position:sticky!important;
  top:0!important;
  float:right!important;
  border-radius:0!important;
  border:1px solid var(--mus-hair-strong)!important;
  background:var(--mus-raised)!important;
}
html body.apple-archive .story-copy p{color:var(--mus-soft)!important;max-width:66ch!important}
html body.apple-archive .story-kicker{color:var(--mus-gold-quiet)!important}
html body.apple-archive .story-source{color:var(--mus-soft)!important;border-top-color:var(--mus-hair)!important}
@media(max-width:640px){
  html body.apple-archive .story-panel{
    max-height:calc(100dvh - 1.4rem)!important;
    width:100%!important;
  }
}

/* Consent dialog: the last rounded, gold-filled pill surface on the site. */
html body.apple-archive #consent{
  border-radius:0!important;
  border:1px solid var(--mus-hair-strong)!important;
  background:rgba(12,11,10,.97)!important;
  box-shadow:none!important;
  padding:1.35rem 1.5rem!important;
}
html body.apple-archive #consent p{color:var(--mus-soft)!important;font-size:.8rem!important;line-height:1.6!important}
html body.apple-archive #consent button{
  border-radius:0!important;
  border:1px solid var(--mus-hair-strong)!important;
  background:transparent!important;
  color:var(--mus-ink)!important;
  font-size:.66rem!important;
  font-weight:500!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  padding:.7rem 1.25rem!important;
  transition:border-color .35s var(--mus-ease),color .35s var(--mus-ease)!important;
}
html body.apple-archive #consent .c-yes{
  border-color:var(--mus-gold)!important;
  background:transparent!important;
  color:var(--mus-gold)!important;
}
html body.apple-archive #consent button:hover{border-color:var(--mus-gold)!important;color:var(--mus-gold)!important}

/* --------------------------------------------------------------------------
   14. Responsive
   The scale above is fluid, so these blocks handle structure and density
   rather than re-declaring sizes.
   ----------------------------------------------------------------------- */
@media(max-width:1100px){
  html body.apple-archive .record-links,
  html body.apple-archive .project-evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  :root{--mus-section:clamp(4rem,8vw,5.5rem)}
  html body.apple-archive .presence-period-grid,
  html body.apple-archive .record-depth-grid,
  html body.apple-archive section.era .grid{grid-template-columns:1fr!important;column-gap:0!important}
  html body.apple-archive .presence-context--intro h2{max-width:100%!important}
  html body.apple-archive .oeuvre-phase-grid{grid-template-columns:1fr!important}
  html body.apple-archive .oeuvre-phase,
  html body.apple-archive .oeuvre-phase:nth-child(n+4){grid-column:auto!important}
}
@media(max-width:700px){
  html body.apple-archive .record-links,
  html body.apple-archive .project-evidence-grid,
  html body.apple-archive .curatorial-periods__grid,
  html body.apple-archive .press-type-grid,
  html body.apple-archive .source-grid{grid-template-columns:1fr!important}
  html body.apple-archive .press-type-grid > *,
  html body.apple-archive .source-grid > a{padding-right:0!important}
  html body.apple-archive .archive-record__metadata > div{grid-template-columns:1fr!important}
  html body.apple-archive .archive-record__metadata dt{padding-bottom:.15rem!important}
  html body.apple-archive .archive-record__metadata dd{padding-top:0!important}
  html body.apple-archive .btn,
  html body.apple-archive .button,
  html body.apple-archive a.cta,
  html body.apple-archive .svc-cta,
  html body.apple-archive .actions a,
  html body.apple-archive .buttons a{
    padding:.9rem 1.4rem!important;
    letter-spacing:.13em!important;
    font-size:.67rem!important;
  }
  html body.apple-archive .hero-cta{gap:.55rem!important}
  html body.apple-archive figcaption,
  html body.apple-archive .cap,
  html body.apple-archive .meta{padding-top:.65rem!important}
  html body.apple-archive footer{padding-inline:1.25rem!important}
}
/* Hungarian and German labels ("Szolgáltatások", "Bemutatkozás",
   "Dienstleistungen") are long, and uppercase plus tracking makes them
   longer still. In the two-up hero button grid at phone widths they were
   breaking mid-word. Tighten the type rather than let a word split, and
   fall back to a single full-width column on the narrowest screens. */
@media(max-width:640px){
  html body.apple-archive .hero-cta .btn,
  html body.apple-archive .hero-cta .button,
  html body.apple-archive .hero-cta a.cta{
    padding:.85rem .55rem!important;
    letter-spacing:.085em!important;
    font-size:.63rem!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
}
@media(max-width:400px){
  html body.apple-archive .hero-cta{grid-template-columns:1fr!important;max-width:none!important}
  html body.apple-archive .hero-cta .btn,
  html body.apple-archive .hero-cta .button,
  html body.apple-archive .hero-cta a.cta{
    padding:.9rem 1rem!important;
    letter-spacing:.12em!important;
    font-size:.66rem!important;
  }
}

@media(max-width:520px){
  :root{--mus-plate-gap:1rem}
  html body.apple-archive h1{letter-spacing:-.014em!important}
  html body.apple-archive .label,
  html body.apple-archive .eyebrow,
  html body.apple-archive .presence-kicker{letter-spacing:.19em!important}
  html body.apple-archive .record-links > *,
  html body.apple-archive .project-evidence-grid > *,
  html body.apple-archive .oeuvre-phase-grid > *,
  html body.apple-archive .curatorial-periods__grid > *{padding:1.35rem 1.15rem!important}
}

/* This layer adds no transform animation, only opacity and colour, so
   honouring reduced motion needs nothing beyond neutralising the
   transitions inherited from earlier layers. */
@media(prefers-reduced-motion:reduce){
  html body.apple-archive *{transition-duration:.01ms!important}
}