/* Marry Me — Catalogue Mode (catalogue.html) ONLY.
   Printed-catalogue presentation: an open book on a warm table on desktop, one
   page at a time on mobile. Every colour comes from the tokens below; nothing
   here applies to Brochure or Store Mode pages. */

.mm-catalogue-page {
  /* --- palette --- */
  --catalogue-paper: #F7F1E7;        /* warm ivory — primary paper */
  --catalogue-paper-alt: #FBF7F0;    /* soft cream — alternate paper / insets */
  --catalogue-champagne: #E8DCCB;    /* framing, editorial blocks */
  --catalogue-taupe: #B7A795;        /* borders, dividers, passive */
  --catalogue-stage: #D3C8BA;        /* the "table" the book rests on */
  --catalogue-teal: #073F3A;         /* brand dark: CTAs, active states */
  --catalogue-teal-hover: #0C5750;
  --catalogue-on-teal: #FFF9F0;
  --catalogue-gold: #B78A45;         /* restrained antique gold */
  --catalogue-gold-light: #CFAB70;
  --catalogue-ink: #231F1B;
  --catalogue-text: #6F665D;
  --catalogue-muted: #918579;
  --catalogue-border: rgba(183, 167, 149, .55);
  --catalogue-shadow: 0 30px 60px -22px rgba(58, 42, 28, .45), 0 10px 22px -12px rgba(58, 42, 28, .28);
  --catalogue-photo-bg: radial-gradient(ellipse at 50% 42%, #FFFCF6 0%, #F6EEE2 62%, #EEE3D3 100%);
  /* --- motion --- */
  --catalogue-turn: 620ms;
  --catalogue-ease-turn: cubic-bezier(.32, .02, .18, 1);   /* quick response → graceful turn → soft settle */
  --catalogue-ease-out: cubic-bezier(.22, .8, .24, 1);
  --cat-bar-h: 66px;

  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 249, 240, .55), rgba(255, 249, 240, 0) 60%),
    var(--catalogue-stage);
  color: var(--catalogue-ink);
}
/* the warm "table" the book rests on (overrides the site-wide page background) */
html body.mm-catalogue-page {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(255, 249, 240, .5), rgba(255, 249, 240, 0) 62%),
    var(--catalogue-stage) !important;
}
.mm-cat-lock { overflow: hidden; }

/* Header: part of the same paper system, not a white bar over the book */
.mm-catalogue-page .main-floating-nav.mm-static-header {
  background: var(--catalogue-paper) !important;
  border-bottom: 1px solid var(--catalogue-border) !important;
  box-shadow: none !important;
}
.mm-catalogue-page .main-floating-nav .nav-item > a,
.mm-catalogue-page .main-floating-nav .mm-nav-custom { color: var(--catalogue-text) !important; }
.mm-catalogue-page .main-floating-nav .nav-item > a:hover,
.mm-catalogue-page .main-floating-nav .mm-nav-custom:hover,
.mm-catalogue-page .main-floating-nav .nav-item > a.is-active { color: var(--catalogue-teal) !important; }
.mm-catalogue-page .mm-legal-footer { background: var(--catalogue-paper); border-top: 1px solid var(--catalogue-border); color: var(--catalogue-text); }

.mm-cat { position: relative; padding: 22px 16px 0; }
.mm-cat-stage {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(100vh - 64px - var(--cat-bar-h) - 40px);
}

/* Book size: two pages of 0.72 ratio side by side, fitted to the viewport. */
.mm-cat-book {
  --page-h: min(calc(100vh - 64px - var(--cat-bar-h) - 56px), calc((100vw - 72px) / 1.44), 860px);
  position: relative;
  width: calc(var(--page-h) * 1.44);
  height: var(--page-h);
  outline: none;
  perspective: 2400px;
  perspective-origin: 50% 40%;
}
.mm-cat-loading, .mm-cat-error {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center;
  color: var(--catalogue-text); font-family: var(--mm-display, "Fraunces", serif); font-size: 1.2rem;
}
.mm-cat-error a { color: var(--catalogue-teal); }

/* ---------- the open book ---------- */
.mm-cat-spread {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  border-radius: 4px;
  box-shadow: var(--catalogue-shadow);
}
/* page-block edges: a few stacked sheets peeking out at the fore-edges */
.mm-cat-spread::before, .mm-cat-spread::after {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 6px; pointer-events: none; z-index: -1;
  background: repeating-linear-gradient(90deg, #EFE6D8 0 1px, #E2D6C4 1px 2px);
}
.mm-cat-spread::before { left: -5px; border-radius: 3px 0 0 3px; }
.mm-cat-spread::after { right: -5px; border-radius: 0 3px 3px 0; }
.mm-cat-spread.is-single { grid-template-columns: 1fr; width: 50%; margin: 0 auto; }
/* the lone back cover is the LEFT half of the open book: its page edges are on its left */
.mm-cat-spread.is-single:not(.is-cover)::before { display: block; }
.mm-cat-spread.is-single:not(.is-cover)::after { display: none; }
/* the empty half while a cover swings: its book shadow and page edges arrive with the cover */
.mm-cat-footprint { position: absolute; top: 0; bottom: 0; width: 50%; border-radius: 4px; box-shadow: var(--catalogue-shadow); opacity: 0; pointer-events: none; }
.mm-cat-footprint.is-left { left: 0; }
.mm-cat-footprint.is-right { right: 0; }
.mm-cat-footprint::before { content: ""; position: absolute; top: 3px; bottom: 3px; width: 6px; background: repeating-linear-gradient(90deg, #EFE6D8 0 1px, #E2D6C4 1px 2px); }
.mm-cat-footprint.is-left::before { left: -5px; border-radius: 3px 0 0 3px; }
.mm-cat-footprint.is-right::before { right: -5px; border-radius: 0 3px 3px 0; }
/* a turn with one side missing (cover / last page): only the real page casts a shadow */
.mm-cat-spread.is-left-empty, .mm-cat-spread.is-right-empty { box-shadow: none; }
.mm-cat-spread.is-left-empty > .mm-cat-page.is-right, .mm-cat-spread.is-right-empty > .mm-cat-page.is-left { box-shadow: var(--catalogue-shadow); }
.mm-catalogue-page .mm-cat-spread.is-left-empty::before, .mm-catalogue-page .mm-cat-spread.is-right-empty::after { display: none; }
.mm-cat-spread.is-single::before { display: none; }

.mm-cat-page {
  position: relative; overflow: hidden; height: 100%;
  background: var(--catalogue-paper);
  color: var(--catalogue-ink);
}
.mm-cat-page.is-right { background: var(--catalogue-paper-alt); }
/* binding: soft gutter shadow on each page's inner edge — no hard divider */
/* behind the spine: the gutter's own colour, so where the two pages meet on a fractional pixel
   (display scaling, the scaled book) no light background can show through as a white line */
.mm-cat-spread:not(.is-half):not(.is-single):not(.is-left-empty):not(.is-right-empty) {
  background: linear-gradient(90deg, transparent calc(50% - 3px), #d5cdc2 calc(50% - 3px), #d5cdc2 calc(50% + 3px), transparent calc(50% + 3px));
}
.mm-cat-page.is-left { border-radius: 4px 0 0 4px; }
.mm-cat-page.is-right { border-radius: 0 4px 4px 0; }
.mm-cat-page.is-left::after, .mm-cat-page.is-right::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; z-index: 3;
}
.mm-cat-page.is-left::after { right: 0; background: linear-gradient(90deg, rgba(60, 42, 26, 0) 0%, rgba(60, 42, 26, .05) 55%, rgba(60, 42, 26, .18) 100%); }
/* the right page's paper is a touch lighter, so its fold shade is a touch stronger: both pages then
   meet at the SAME tone at the spine (a weaker one left a bright edge that read as a white line) */
.mm-cat-page.is-right::after { left: 0; background: linear-gradient(270deg, rgba(60, 42, 26, 0) 0%, rgba(60, 42, 26, .055) 55%, rgba(60, 42, 26, .2) 100%); }
.mm-cat-page.is-solo { border-radius: 4px; }
.mm-cat-page-inner { position: absolute; inset: 0; padding: clamp(20px, 3.4%, 44px); overflow: auto; scrollbar-width: thin; }
.mm-cat-folio { position: absolute; bottom: 13px; z-index: 4; font-family: var(--mm-display, "Fraunces", serif); font-size: .72rem; color: var(--catalogue-muted); }
.is-left > .mm-cat-folio { left: 24px; }
.is-right > .mm-cat-folio, .is-solo > .mm-cat-folio { right: 24px; }

/* page-edge hit areas (desktop): hover = the corner lifts, click = turn */
.mm-cat-edge {
  position: absolute; top: 0; bottom: 0; width: 7%; z-index: 6; border: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.mm-cat-edge.is-next { right: 0; }
.mm-cat-edge.is-prev { left: 0; }
.mm-cat-page.is-right, .mm-cat-page.is-left { transition: transform .32s var(--catalogue-ease-out), box-shadow .32s ease; }

/* ---------- page turn (layers: static page + turning sheet + page below + cast shadow + gutter) ---------- */
.mm-cat-leaf {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 8;
  transform-style: preserve-3d; will-change: transform;
}
.mm-cat-leaf.is-forward { left: 50%; transform-origin: left center; }
.mm-cat-leaf.is-backward { left: 0; transform-origin: right center; }
.mm-cat-leaf.is-forward.is-turning { animation: mmCatTurnFwd var(--catalogue-turn) var(--catalogue-ease-turn) forwards; }
.mm-cat-leaf.is-backward.is-turning { animation: mmCatTurnBack var(--catalogue-turn) var(--catalogue-ease-turn) forwards; }
/* a page bends while it turns: slight skew + lift at mid-turn, flat when it lands */
@keyframes mmCatTurnFwd {
  0%   { transform: rotateY(0deg) skewY(0deg) translateZ(0); }
  12%  { transform: rotateY(-14deg) skewY(-.8deg) translateZ(2px); }
  50%  { transform: rotateY(-92deg) skewY(-2.2deg) translateZ(14px); }
  86%  { transform: rotateY(-170deg) skewY(-.4deg) translateZ(3px); }
  100% { transform: rotateY(-180deg) skewY(0deg) translateZ(0); }
}
@keyframes mmCatTurnBack {
  0%   { transform: rotateY(0deg) skewY(0deg) translateZ(0); }
  12%  { transform: rotateY(14deg) skewY(.8deg) translateZ(2px); }
  50%  { transform: rotateY(92deg) skewY(2.2deg) translateZ(14px); }
  86%  { transform: rotateY(170deg) skewY(.4deg) translateZ(3px); }
  100% { transform: rotateY(180deg) skewY(0deg) translateZ(0); }
}
.mm-cat-leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.mm-cat-leaf-face .mm-cat-page { height: 100%; }
.mm-cat-leaf-face.is-back { transform: rotateY(180deg); }
/* paper curvature: a moving highlight + shade across the turning sheet */
.mm-cat-leaf-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; opacity: 0;
  background: linear-gradient(90deg, rgba(40, 28, 16, .22) 0%, rgba(255, 251, 243, .18) 30%, rgba(40, 28, 16, .06) 62%, rgba(40, 28, 16, .2) 100%);
}
.mm-cat-leaf.is-turning .mm-cat-leaf-face::after { animation: mmCatSheen var(--catalogue-turn) ease-in-out forwards; }
@keyframes mmCatSheen { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* the sheet's shadow falling on the page below, fading as it lands */
.mm-cat-cast {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 7; pointer-events: none; opacity: 0;
}
.mm-cat-cast.is-forward { left: 50%; background: linear-gradient(90deg, rgba(40, 28, 16, .34), rgba(40, 28, 16, 0) 70%); }
.mm-cat-cast.is-backward { left: 0; background: linear-gradient(270deg, rgba(40, 28, 16, .34), rgba(40, 28, 16, 0) 70%); }
.mm-cat-cast.is-turning { animation: mmCatCast var(--catalogue-turn) ease-out forwards; }
@keyframes mmCatCast { 0% { opacity: .9; } 60% { opacity: .35; } 100% { opacity: 0; } }

/* multi-page jump (Contents / Search): a few fast flicks of blank sheets */
.mm-cat-flick {
  position: absolute; top: 1%; bottom: 1%; width: 49.5%; z-index: 8; pointer-events: none;
  background: linear-gradient(90deg, var(--catalogue-paper-alt), var(--catalogue-paper));
  box-shadow: 0 0 18px rgba(58, 42, 28, .18);
  backface-visibility: visible; will-change: transform;
}
.mm-cat-flick.is-forward { left: 50%; transform-origin: left center; animation: mmCatFlickFwd 360ms cubic-bezier(.4, 0, .2, 1) forwards; }
.mm-cat-flick.is-backward { left: .5%; transform-origin: right center; animation: mmCatFlickBack 360ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes mmCatFlickFwd { 0% { transform: rotateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: rotateY(-178deg); opacity: 0; } }
@keyframes mmCatFlickBack { 0% { transform: rotateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: rotateY(178deg); opacity: 0; } }

/* opening / closing the cover */
.mm-cat-coverleaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 9; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.mm-cat-coverleaf.is-opening { animation: mmCatCoverOpen 960ms var(--catalogue-ease-turn) forwards; }
.mm-cat-coverleaf.is-closing { animation: mmCatCoverOpen 760ms var(--catalogue-ease-turn) reverse forwards; }
@keyframes mmCatCoverOpen {
  0%   { transform: translateX(-50%) rotateY(0deg) translateZ(0); box-shadow: 0 6px 18px rgba(58, 42, 28, .2); }
  22%  { transform: translateX(-50%) rotateY(0deg) translateZ(26px); box-shadow: 0 26px 40px rgba(58, 42, 28, .35); }
  42%  { transform: translateX(0) rotateY(-12deg) translateZ(20px); }
  100% { transform: translateX(0) rotateY(-180deg) translateZ(0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
.mm-cat-spread.is-revealing { animation: mmCatReveal 960ms var(--catalogue-ease-out) both; }
.mm-cat-spread.is-concealing { animation: mmCatReveal 760ms var(--catalogue-ease-out) reverse both; }
@keyframes mmCatReveal { 0% { opacity: 0; transform: scale(.985); } 35% { opacity: 0; transform: scale(.985); } 100% { opacity: 1; transform: none; } }
.mm-cat-spread.is-settle-left { animation: mmCatSettleLeft 420ms var(--catalogue-ease-out) both; }
.mm-cat-spread.is-settle-right { animation: mmCatSettleRight 420ms var(--catalogue-ease-out) both; }
@keyframes mmCatSettleLeft { from { transform: translateX(-50%); } to { transform: none; } }
@keyframes mmCatSettleRight { from { transform: translateX(50%); } to { transform: none; } }

/* mobile single page: magazine slide, following the finger while swiping */
.mm-cat-spread.is-slide-next { animation: mmCatSlideNext 380ms var(--catalogue-ease-out) both; }
.mm-cat-spread.is-slide-prev { animation: mmCatSlidePrev 380ms var(--catalogue-ease-out) both; }
@keyframes mmCatSlideNext { from { transform: translateX(42%) rotateY(-8deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes mmCatSlidePrev { from { transform: translateX(-42%) rotateY(8deg); opacity: .4; } to { transform: none; opacity: 1; } }
.mm-cat-spread.is-jump-next { animation: mmCatJumpNext 520ms var(--catalogue-ease-out) both; }
.mm-cat-spread.is-jump-prev { animation: mmCatJumpPrev 520ms var(--catalogue-ease-out) both; }
@keyframes mmCatJumpNext { 0% { transform: translateX(70%) scale(.94); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes mmCatJumpPrev { 0% { transform: translateX(-70%) scale(.94); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.mm-cat-spread.is-dragging { transition: none; }
.mm-cat-spread.is-snapback { transition: transform 260ms var(--catalogue-ease-out); }

/* collection opener: one editorial entrance after the page lands */
.mm-cat-page.is-entering .mm-cat-intro-media img { animation: mmCatResolve 760ms var(--catalogue-ease-out) both; }
.mm-cat-page.is-entering .mm-cat-title { animation: mmCatRise 640ms var(--catalogue-ease-out) 80ms both; }
.mm-cat-page.is-entering .mm-cat-title::after { animation: mmCatRule 700ms var(--catalogue-ease-out) 260ms both; }
@keyframes mmCatResolve { from { opacity: .35; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@keyframes mmCatRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mmCatRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* search target: a brief warm-gold emphasis */
.mm-cat-tile.is-found .mm-cat-tile-media { animation: mmCatFound 900ms ease-out 1; }
@keyframes mmCatFound {
  0% { box-shadow: 0 0 0 0 rgba(183, 138, 69, 0); }
  30% { box-shadow: 0 0 0 3px rgba(183, 138, 69, .55), 0 0 26px 4px rgba(207, 171, 112, .35); }
  100% { box-shadow: 0 0 0 0 rgba(183, 138, 69, 0); }
}

/* ---------- typography ---------- */
.mm-cat-kicker { margin: 0 0 12px; color: var(--catalogue-gold); font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.mm-cat-title {
  margin: 0 0 16px; font-family: var(--mm-display, "Fraunces", serif); font-weight: 300; color: var(--catalogue-ink);
  font-size: clamp(1.7rem, calc(var(--page-h, 700px) * .058), 3.1rem); line-height: 1.04; letter-spacing: -.015em;
}
.mm-cat-title em { font-family: inherit; color: var(--catalogue-teal); }
.mm-cat-text .mm-cat-title::after, .mm-cat-intro-copy .mm-cat-title::after { content: ""; display: block; width: 52px; height: 1px; margin-top: 18px; background: var(--catalogue-gold); transform-origin: left center; }
.mm-cat-text p, .mm-cat-intro-copy p { color: var(--catalogue-text); font-size: .88rem; line-height: 1.78; margin: 0 0 12px; max-width: 42ch; }
.mm-cat-text { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.mm-cat-running { position: absolute; top: 0; left: 0; line-height: 1.2; right: 0; margin: 0; text-align: center; font-family: var(--mm-display, "Fraunces", serif); font-style: italic; font-size: .78rem; color: var(--catalogue-muted); }
.mm-cat-note { font-size: .76rem !important; font-style: italic; color: var(--catalogue-muted) !important; }
.mm-cat-count { font-size: .68rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--catalogue-gold) !important; }

/* ---------- buttons & links (microinteractions) ---------- */
.mm-cat-cta, .mm-cat-open {
  align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; margin-top: 12px;
  padding: 14px 24px; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  background: var(--catalogue-teal); color: var(--catalogue-on-teal);
  font: 500 .68rem/1 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(7, 63, 58, .6);
  transition: background .25s ease, transform .2s var(--catalogue-ease-out), box-shadow .25s ease;
}
.mm-cat-cta span, .mm-cat-open span { transition: transform .25s var(--catalogue-ease-out); }
.mm-cat-cta:hover, .mm-cat-open:hover { background: var(--catalogue-teal-hover); color: var(--catalogue-on-teal); transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(7, 63, 58, .6); }
.mm-cat-cta:hover span, .mm-cat-open:hover span { transform: translateX(4px); }
.mm-cat-cta:active, .mm-cat-open:active, .mm-cat-nav:active, .mm-cat-tool:active, .mm-cat-result-btn:active { transform: scale(.985); }
.mm-cat-link, .mm-cat-link-inline {
  position: relative; background: none; border: 0; padding: 0 0 3px; cursor: pointer; text-decoration: none; color: var(--catalogue-teal);
  font: 500 .62rem/1.4 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .17em; text-transform: uppercase;
}
.mm-cat-link::after, .mm-cat-link-inline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--catalogue-gold);
  transform: scaleX(.35); transform-origin: left center; transition: transform .3s var(--catalogue-ease-out);
}
.mm-cat-link:hover::after, .mm-cat-link-inline:hover::after { transform: scaleX(1); }
.mm-cat-link-inline { display: inline-block; margin-top: 14px; }
.mm-cat-list { margin: 4px 0 14px; padding-left: 0; list-style: none; color: var(--catalogue-ink); font-size: .86rem; line-height: 2; }
.mm-cat-list li::before { content: ""; display: inline-block; width: 14px; height: 1px; margin: 0 10px 4px 0; background: var(--catalogue-gold); }

/* ---------- cover / back ---------- */
.mm-cat-page--cover .mm-cat-page-inner, .mm-cat-page--back .mm-cat-page-inner { padding: 0; overflow: hidden; }
.mm-cat-page--cover::after, .mm-cat-page--back::after { display: none; }
.mm-cat-cover { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--catalogue-paper); }
/* The cover film is "printed" into the page: an arched plate with a fine gold rule around it,
   toned to the paper, its edges sinking softly into the ivory (inner vignette + paper wash). */
.mm-cat-cover-media { position: relative; height: 60%; margin: 7% 9% 0; background: var(--catalogue-photo-bg); overflow: hidden;
  border-radius: 999px 999px 3px 3px; isolation: isolate;
  box-shadow: 0 0 0 6px var(--catalogue-paper), 0 0 0 7px var(--catalogue-gold-light); }
.mm-cat-cover-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(183, 138, 69, .35), inset 0 0 38px 6px rgba(110, 82, 44, .26);
  background: radial-gradient(ellipse at 50% 40%, rgba(247, 241, 231, 0) 55%, rgba(247, 241, 231, .38) 100%),
              linear-gradient(180deg, rgba(247, 241, 231, .10), rgba(183, 138, 69, .07)); }
.mm-cat-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-cat-cover-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 240ms ease; }
.mm-cat-cover-film.is-playing { opacity: 1; }
.mm-cat-cover-copy { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 14px 18px 22px; }
.mm-cat-emblem { width: clamp(40px, calc(var(--page-h, 700px) * .075), 64px); height: auto; }
.mm-cat-brand { margin: 0; display: inline-flex; align-items: baseline; justify-content: center; line-height: 1; white-space: nowrap; color: var(--catalogue-teal); text-transform: none; letter-spacing: 0; }
/* cover / back wordmark: the site's script M + serif letters, scaled to the page */
html body .mm-cat-brand .brand-fancy-m { font-size: clamp(2.6rem, calc(var(--page-h, 700px) * .1), 4.4rem) !important; }
html body .mm-cat-brand .brand-rest { font-size: clamp(1.25rem, calc(var(--page-h, 700px) * .046), 2rem) !important; text-transform: none !important; }
.mm-cat-cover-sub { margin: 0; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--catalogue-text); }
.mm-cat-cover-year { margin: 2px 0 12px; font-family: var(--mm-display, "Fraunces", serif); font-size: 1.15rem; color: var(--catalogue-gold); letter-spacing: .24em; }
.mm-cat-cover-year::before, .mm-cat-cover-year::after { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 12px 5px; background: var(--catalogue-gold-light); }
.mm-cat-open { align-self: center; }
.mm-cat-back { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--catalogue-paper); }

/* ---------- interleaf: the quiet page that lets a chapter open on the left ---------- */
.mm-cat-interleaf { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--catalogue-teal); font-size: 1.1rem; opacity: .55; }
.mm-cat-interleaf img { width: 40px; height: auto; }

/* ---------- photo pages ---------- */
.mm-cat-page--photo .mm-cat-page-inner { padding: 0; }
.mm-cat-photo { height: 100%; background: var(--catalogue-photo-bg); }
.mm-cat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-cat-photo.is-sketch { display: grid; place-items: center; }
/* Visit: the storefront as an editorial page. The landscape photo is cropped from its left edge,
   which keeps the whole "Marry Me" sign and ends just before "THE BRIDAL" (no word cut in half);
   a gentle warm grade brings the mall's cool whites into the catalogue's ivory; a quiet shade at
   the foot carries the signed caption (the same idea as the Repair page's signed photo). */
.mm-cat-photo.is-visit { position: relative; overflow: hidden; }
.mm-cat-photo.is-visit img { object-position: 0% 50%; filter: sepia(.16) saturate(.9) contrast(1.04) brightness(.95); }
.mm-cat-photo.is-visit::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, rgba(28, 22, 15, .5), rgba(28, 22, 15, .18) 55%, rgba(28, 22, 15, 0)); }
.mm-cat-photo-caption { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #F7F1E7; text-align: center; }
.mm-cat-photo-caption .mm-brand-inline { color: #F7F1E7; font-size: 1.35rem; }
.mm-cat-photo-place { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; opacity: .92; }
.mm-cat-photo.is-sketch img { width: 76%; height: auto; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- collection opener ---------- */
.mm-cat-intro { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.mm-cat-intro-copy { order: -1; }
.mm-cat-intro-media { background: var(--catalogue-photo-bg); min-height: 0; display: grid; place-items: center; overflow: hidden; }
/* product photos keep their TRUE colours (no multiply blend: it tinted white gold and diamonds
   with the beige paper and made every photo look flat, like newsprint) */
.mm-cat-intro-media img { width: 88%; height: 88%; object-fit: contain; }
.mm-cat-intro-copy p { margin-bottom: 6px; }

/* ---------- category film opener (Catalogue only) ----------
   The Store's own collection film, presented as a printed plate: it bleeds off the top and the
   outer edge of the page and stops where the spine's fold shade begins (86%) - a picture is never
   run through the gutter. The plate takes the film's OWN proportions (set inline from the mapping),
   so nothing is cropped (the films carry captions across the frame) and nothing is stretched. A
   hairline and an italic plate caption tie it to the page; the chapter copy sits below. */
.mm-cat-page--film .mm-cat-page-inner { padding: 0; overflow: hidden; }
.mm-cat-filmopener { height: 100%; display: flex; flex-direction: column; }
.mm-cat-film { position: relative; flex: none; width: 86%; margin: 0; overflow: hidden; background: #2b241d; }
.mm-cat-film-still, .mm-cat-film-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* a film on the WHOLE page (Custom Design): edge to edge, the page's spine shade stays over it */
.mm-cat-filmopener.is-full { position: relative; }
.mm-cat-film.is-full { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a chapter opener with a still photograph instead of a film: a wide plate around the photo's focal
   point (Earrings), or - .is-whole - the WHOLE photograph in its own shape (4:5, never cropped, no
   backing), sized by the page height so the copy keeps its room (Necklaces, Bracelets) */
.mm-cat-film.is-photo { aspect-ratio: 4 / 3; }
.mm-cat-film.is-photo.is-whole { aspect-ratio: 4 / 5; width: auto; height: 52%; max-width: 86%; align-self: flex-start; background: none; }
.mm-cat-film.is-photo.is-whole .mm-cat-film-still { object-fit: contain; }
/* several films on one page (Repair: four real process films) - a printed contact sheet, 2 x 2 with thin
   paper gutters, over the chapter copy; each film fills its cell around its focal point */
.mm-cat-filmgrid { flex: none; height: 44%; margin: 9% 14% 0 9%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.mm-cat-filmopener.is-grid .mm-cat-intro-copy { padding-top: 3%; padding-bottom: 10%; }
.mm-cat-film.is-cell { position: relative; width: auto; margin: 0; min-height: 0; }
.mm-cat-film .mm-cat-film-still, .mm-cat-film .mm-cat-film-live { object-position: var(--film-pos, 50% 50%); }
/* a REEL (Repair): one plate, the films one after another; under it the film's name + one dot per film */
.mm-cat-film.is-reel { aspect-ratio: 6 / 5; }
.mm-cat-filmopener.is-reel .mm-cat-intro-copy { padding-top: 5%; }
.mm-cat-reel-dots { display: inline-flex; gap: 6px; margin-left: 2px; }
.mm-cat-reel-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--catalogue-gold-light, #CFAB70); opacity: .35; transition: opacity .3s ease; }
.mm-cat-reel-dots i.is-on { opacity: 1; background: var(--catalogue-gold); }
/* a film whose file has bars around its picture: only the picture AREA (--aw/--ah of the frame, centred on
   --acx/--acy; --fr = frame aspect) covers the cell - container units, the same sum the WebGL page uses */
.mm-cat-film.has-area { container-type: size; }
.mm-cat-film.has-area .mm-cat-film-still, .mm-cat-film.has-area .mm-cat-film-live {
  --ew: max(calc(100cqw / var(--aw)), calc(100cqh * var(--fr) / var(--ah)));
  inset: auto; right: auto; bottom: auto; max-width: none; max-height: none; object-fit: fill;
  width: var(--ew); height: calc(var(--ew) / var(--fr));
  left: calc(50cqw - var(--ew) * var(--acx)); top: calc(50cqh - var(--ew) / var(--fr) * var(--acy)); }
.mm-cat-film-live { opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
.mm-cat-film-live.is-playing { opacity: 1; }
.mm-cat-film-caption { width: 86%; box-sizing: border-box; margin: 12px 0 0; padding-left: clamp(28px, 9%, 64px); display: flex; align-items: center; gap: 12px;
  font-family: var(--mm-display, "Fraunces", serif); font-style: italic; font-size: .74rem; line-height: 1.2; color: var(--catalogue-muted); }
.mm-cat-film-caption::before { content: ""; flex: 1; height: 1px; background: var(--catalogue-gold-light, rgba(183, 138, 69, .45)); }
.mm-cat-filmopener .mm-cat-intro-copy { order: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(28px, 13%, 84px) clamp(30px, 7%, 60px) clamp(28px, 9%, 64px); }
.mm-cat-page.is-entering .mm-cat-film-still { animation: mmCatResolve 760ms var(--catalogue-ease-out) both; }

/* ---------- collection divider (Engagement: Natural / Lab-Grown / Moissanite; Wedding: Single Color /
   Two-Tone) - a quiet chapter page: chapter kicker, a gold numeral, the collection, a rule, the site's
   own line for that stone, the piece count; framed by two hairlines like a printed section title ---------- */
.mm-cat-divider { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12%; position: relative; }
.mm-cat-divider::before, .mm-cat-divider::after { content: ""; position: absolute; left: 50%; width: 1px; height: 13%; background: linear-gradient(to bottom, rgba(183, 138, 69, 0), var(--catalogue-gold-light)); }
.mm-cat-divider::before { top: 9%; }
.mm-cat-divider::after { bottom: 9%; transform: rotate(180deg); }
.mm-cat-divider .mm-cat-kicker { margin-bottom: 26px; }
.mm-cat-divider-n { margin: 0 0 10px; font-family: var(--mm-display, "Fraunces", serif); font-style: italic; font-size: 1.05rem; letter-spacing: .3em; color: var(--catalogue-gold); }
.mm-cat-divider .mm-cat-title { font-size: clamp(2rem, calc(var(--page-h, 700px) * .068), 3.5rem); }
.mm-cat-divider .mm-cat-title::after { content: ""; display: block; width: 52px; height: 1px; margin: 20px auto 0; background: var(--catalogue-gold); transform-origin: center; }
.mm-cat-divider-note { margin: 4px 0 10px; max-width: 30ch; color: var(--catalogue-text); font-size: .9rem; line-height: 1.7; font-family: var(--mm-display, "Fraunces", serif); font-style: italic; }
.mm-cat-divider .mm-cat-count { margin: 6px 0 0; }
/* a divider under its collection's film plate */
.mm-cat-filmopener .mm-cat-divider.is-film { flex: 1; min-height: 0; height: auto; padding: 0 14% 6% 9%; }
.mm-cat-divider.is-film::before, .mm-cat-divider.is-film::after { display: none; }
.mm-cat-divider.is-film .mm-cat-kicker { margin-bottom: 14px; }

/* ---------- product pages ---------- */
.mm-cat-products { position: relative; height: 100%; display: grid; gap: 18px 16px; padding-top: 28px; }   /* clear of the running head */
.mm-cat-products.is-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* equal rows: the two pieces under the feature get the same photo box as every other tile
   (a shorter box made their rings look smaller and could crop them) */
.mm-cat-products.is-feature { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mm-cat-products.is-feature .mm-cat-tile:first-of-type { grid-column: span 2; }
.mm-cat-products.is-duo { grid-template-rows: 1fr 1fr; }
.mm-cat-tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; text-align: center; }
.mm-cat-tile.is-large { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr; text-align: left; align-items: center; gap: 18px; }
/* the feature photo box keeps the desktop shape (about 318 x 290) even before its photo has loaded,
   so nothing jumps and the name can never slide under it */
.mm-cat-tile.is-large .mm-cat-tile-media { width: 100%; aspect-ratio: 1.1; max-height: 100%; }
.mm-cat-tile-media {
  border: 0; padding: 0; cursor: pointer; min-height: 0; display: grid; place-items: center; overflow: hidden;
  background: var(--catalogue-photo-bg); border-radius: 2px;
}
.mm-cat-tile-media img { width: 92%; height: 92%; object-fit: contain; transition: transform .6s var(--catalogue-ease-out); }
.mm-cat-tile-media:hover img { transform: scale(1.025); }
.mm-cat-tile-copy { padding-top: 10px; }
.mm-cat-tile h3 { margin: 0; font-family: var(--mm-display, "Fraunces", serif); font-weight: 400; font-size: 1.02rem; letter-spacing: .03em; color: var(--catalogue-ink); }
.mm-cat-tile.is-large h3 { font-size: 1.45rem; }
.mm-cat-tile-meta { margin: 4px 0 2px; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--catalogue-muted); }
.mm-cat-tile-price { margin: 2px 0 8px; font-family: var(--mm-display, "Fraunces", serif); font-style: italic; font-size: .82rem; color: var(--catalogue-gold); }
/* FEATURED PIECES (Admin -> Homepage / Featured; js/catalogue.js addFeatured). The catalogue's own paper and
   colours, laid out like the owner's reference (2026-10-19): a poster page - wordmark, title, one line, the
   pieces as a STAGGERED photo collage framed by fine offset gold lines, website + phone along the foot -
   facing a numbered list of the same pieces. Sized from the page height, like every other page. */
.mm-cat-page--featured .mm-cat-page-inner, .mm-cat-page--featured-list .mm-cat-page-inner { overflow: hidden; }
.mm-cat-poster { height: 100%; display: flex; flex-direction: column; text-align: center; }
.mm-cat-poster-head { flex: none; padding: calc(var(--page-h, 700px) * .006) 6% 0; }
.mm-cat-poster-brand { margin: 0; font-size: calc(var(--page-h, 700px) * .03); line-height: 1.1; color: var(--catalogue-teal); }
.mm-cat-poster-sub { margin: 4px 0 0; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--catalogue-muted); }
.mm-cat-poster-title { margin: calc(var(--page-h, 700px) * .02) 0 0; }
.mm-cat-poster-line { margin: calc(var(--page-h, 700px) * .008) auto 0; max-width: 46ch; font-size: .8rem; line-height: 1.6; color: var(--catalogue-text); }
/* the collage: two columns, ten rows; pieces placed so the columns break at different heights */
.mm-cat-collage {
  flex: 1 1 auto; min-height: 0; position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(10, minmax(0, 1fr));
  column-gap: 6%; row-gap: calc(var(--page-h, 700px) * .026);
  margin: calc(var(--page-h, 700px) * .032) 5% calc(var(--page-h, 700px) * .03);
}
.mm-cat-collage::before { /* the hairline down the middle, running past the photos */
  content: ""; position: absolute; left: 50%; top: -3%; bottom: -3%; width: 1px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(207, 171, 112, 0), var(--catalogue-gold-light) 12%, var(--catalogue-gold-light) 88%, rgba(207, 171, 112, 0));
}
.mm-cat-collage.is-n1::before { display: none; }
.mm-cat-collage-cell { position: relative; margin: 0; min-height: 0; min-width: 0; }
.mm-cat-collage.is-n4 .is-p1 { grid-column: 1; grid-row: 1 / 5; }
.mm-cat-collage.is-n4 .is-p2 { grid-column: 2; grid-row: 1 / 7; }
.mm-cat-collage.is-n4 .is-p3 { grid-column: 1; grid-row: 5 / 11; }
.mm-cat-collage.is-n4 .is-p4 { grid-column: 2; grid-row: 7 / 11; }
.mm-cat-collage.is-n3 .is-p1 { grid-column: 1; grid-row: 1 / 5; }
.mm-cat-collage.is-n3 .is-p2 { grid-column: 2; grid-row: 1 / 11; }
.mm-cat-collage.is-n3 .is-p3 { grid-column: 1; grid-row: 5 / 11; }
.mm-cat-collage.is-n2 .is-p1 { grid-column: 1; grid-row: 1 / 8; }
.mm-cat-collage.is-n2 .is-p2 { grid-column: 2; grid-row: 4 / 11; }
.mm-cat-collage.is-n1 .is-p1 { grid-column: 1 / 3; grid-row: 1 / 11; justify-self: center; width: 76%; }
/* the offset gold lines: an open corner outside each photo, on the collage's outer side */
.mm-cat-collage-cell::before, .mm-cat-collage-cell::after { content: ""; position: absolute; pointer-events: none; border: 0 solid var(--catalogue-gold-light); }
.mm-cat-collage-cell::before { width: 62%; height: 58%; }
.mm-cat-collage-cell.is-p1::before { top: -9px; left: -9px; border-top-width: 1px; border-left-width: 1px; }
.mm-cat-collage-cell.is-p2::before { top: -9px; right: -9px; border-top-width: 1px; border-right-width: 1px; }
.mm-cat-collage-cell.is-p3::before { bottom: -9px; left: -9px; border-bottom-width: 1px; border-left-width: 1px; }
.mm-cat-collage-cell.is-p4::before { bottom: -9px; right: -9px; border-bottom-width: 1px; border-right-width: 1px; }
.mm-cat-collage.is-n2 .is-p2::before { top: auto; bottom: -9px; border-top-width: 0; border-bottom-width: 1px; }
/* a line along the foot of the first photo, running out past the page side (as in the reference) */
.mm-cat-collage-cell.is-p1::after { left: -9%; right: 18%; bottom: calc(var(--page-h, 700px) * -.013); border-bottom-width: 1px; }
.mm-cat-collage.is-n1 .is-p1::after { left: auto; right: -9px; bottom: -9px; width: 62%; height: 58%; border-bottom-width: 1px; border-right-width: 1px; }
.mm-cat-collage-cell > .mm-cat-collage-media {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: var(--catalogue-photo-bg); border-radius: 2px;
}
.mm-cat-collage-media img { transition: transform .6s var(--catalogue-ease-out); }
.mm-cat-collage-media:hover img { transform: scale(1.025); }
.mm-cat-collage-media:focus-visible { outline: 2px solid var(--catalogue-teal); outline-offset: 3px; }
.mm-cat-collage-n { position: absolute; top: 6px; left: 9px; z-index: 1; pointer-events: none; font-family: var(--mm-display, "Fraunces", serif); font-style: italic; font-size: .78rem; color: var(--catalogue-gold); }
.mm-cat-poster-foot {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 5%; padding: calc(var(--page-h, 700px) * .014) 0 calc(var(--page-h, 700px) * .03);
  border-top: 1px solid var(--catalogue-border); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--catalogue-text);
}
.mm-cat-poster-foot a { color: inherit; text-decoration: none; }
.mm-cat-poster-foot a:hover, .mm-cat-poster-foot a:focus-visible { color: var(--catalogue-teal); }
/* the facing page: the same pieces, numbered like the collage */
.mm-cat-featlist { position: relative; height: 100%; display: flex; flex-direction: column; padding-top: calc(var(--page-h, 700px) * .05); box-sizing: border-box; }
.mm-cat-featlist > .mm-cat-kicker { text-align: center; }
.mm-cat-featlist-items { list-style: none; margin: auto 7%; padding: 0; }
.mm-cat-featlist-item { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 0 14px; align-items: start; padding: calc(var(--page-h, 700px) * .02) 0; border-top: 1px solid var(--catalogue-border); }
.mm-cat-featlist-item:last-child { border-bottom: 1px solid var(--catalogue-border); }
.mm-cat-featlist-n { font-family: var(--mm-display, "Fraunces", serif); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--catalogue-gold); }
.mm-cat-featlist-eyebrow { margin: 0 0 4px; font-size: .56rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--catalogue-gold); }
.mm-cat-featlist-copy h3 { margin: 0; font-family: var(--mm-display, "Fraunces", serif); font-weight: 400; font-size: 1.22rem; letter-spacing: .02em; color: var(--catalogue-ink); overflow-wrap: anywhere; }
.mm-cat-featlist-copy .mm-cat-tile-price { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .mm-cat-collage-media img { transition: none; } }
.mm-cat-noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 72px; box-sizing: border-box;
  border: 1px dashed var(--catalogue-border); font-family: var(--mm-display, "Fraunces", serif); color: var(--catalogue-taupe); font-size: 1.2rem; text-align: center; }
.mm-cat-noimg-note { font-family: var(--mm-body, inherit); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--catalogue-muted); }
.mm-fit > .mm-cat-noimg { position: absolute; inset: 0; }
.mm-cat-noimg.is-failed { border-style: dotted; }   /* assigned but could not be loaded (vs no photo assigned) */
/* a photo still on its way: a quiet shimmer in its frame until it is decoded (live page only - set by
   js/catalogue.js markLoading(); reduced motion: a still tint). Never a permanent blank. */
:where(.mm-cat-book .is-loading) { position: relative; }
.mm-cat-book .is-loading::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 252, 246, 0) 30%, rgba(255, 252, 246, .6) 50%, rgba(255, 252, 246, 0) 70%) 0 0 / 220% 100% no-repeat, rgba(232, 220, 203, .32);
  animation: mmCatShimmer 1.3s ease-in-out infinite; }
@keyframes mmCatShimmer { from { background-position: 130% 0, 0 0; } to { background-position: -130% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .mm-cat-book .is-loading::before { animation: none; } }

/* ---------- education / pairings / journal ---------- */
.mm-cat-shapes, .mm-cat-metals { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
.mm-cat-shapes li, .mm-cat-metals li { display: grid; justify-items: center; gap: 8px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--catalogue-ink); }
.mm-cat-shapes img { width: 54px; height: 54px; object-fit: contain; opacity: .85; }
.mm-cat-metals { grid-template-columns: repeat(4, 1fr); }
.mm-cat-metals img, .mm-cat-metal-plain { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--catalogue-paper-alt), 0 0 0 5px var(--catalogue-border), 0 8px 14px -8px rgba(58, 42, 28, .5); }
.mm-cat-metal-plain { display: block; background: radial-gradient(circle at 35% 30%, #F4F5F6, #C9CCCF 60%, #A9ADB1); }
.mm-cat-stones { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.mm-cat-stones li { display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--catalogue-border); }
.mm-cat-stones li:last-child { border-bottom: 0; }
.mm-cat-stones img { width: 78px; height: 78px; object-fit: cover; border-radius: 50%; }
.mm-cat-stones h3 { margin: 0 0 2px; font-family: var(--mm-display, "Fraunces", serif); font-weight: 400; font-size: 1.08rem; color: var(--catalogue-ink); }
.mm-cat-stones p { margin: 0 !important; font-size: .82rem !important; }

.mm-cat-pairs { position: relative; height: 100%; display: grid; grid-template-rows: 1fr 1fr auto; gap: 16px; padding-top: 28px; }
.mm-cat-pair { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; text-align: center; min-height: 0; }
.mm-cat-pair-media { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 0; }
.mm-cat-pair-media button { border: 0; padding: 0; cursor: pointer; height: 100%; min-height: 0; display: grid; place-items: center; background: var(--catalogue-photo-bg); overflow: hidden; }
.mm-cat-pair-media img { width: 90%; height: 90%; object-fit: contain; transition: transform .6s var(--catalogue-ease-out); }
.mm-cat-pair-media button:hover img { transform: scale(1.025); }
.mm-cat-pair-media span { font-family: var(--mm-display, "Fraunces", serif); color: var(--catalogue-gold); font-size: 1.3rem; }
.mm-cat-pair h3 { margin: 10px 0 0; font-family: var(--mm-display, "Fraunces", serif); font-weight: 400; font-size: 1rem; color: var(--catalogue-ink); }

.mm-cat-journal { position: relative; justify-content: flex-start; padding-top: 28px; }
.mm-cat-articles { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.mm-cat-articles a { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; text-decoration: none; color: var(--catalogue-ink); padding-bottom: 12px; border-bottom: 1px solid var(--catalogue-border); }
.mm-cat-articles img { width: 88px; height: 88px; object-fit: cover; background: var(--catalogue-photo-bg); transition: transform .5s var(--catalogue-ease-out); }
.mm-cat-articles a:hover img { transform: scale(1.03); }
.mm-cat-articles span { font-family: var(--mm-display, "Fraunces", serif); font-size: 1rem; line-height: 1.32; transition: color .25s ease; }
.mm-cat-articles a:hover span { color: var(--catalogue-teal); }

.mm-cat-contact { margin: 0 0 12px; font-size: .86rem; line-height: 1.6; }
.mm-cat-contact dt { margin-top: 10px; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--catalogue-gold); }
.mm-cat-contact dd { margin: 2px 0 0; color: var(--catalogue-ink); }
.mm-cat-contact a { color: var(--catalogue-teal); }

/* ---------- Contents page: a printed contents page ---------- */
.mm-cat-page--toc .mm-cat-text { justify-content: flex-start; padding-top: 4%; }
/* the Contents never scrolls: what does not fit on the left page continues on the right page */
.mm-cat-page--toc .mm-cat-page-inner { overflow: hidden; }
/* the Journal never scrolls either: its entries flow on to the next page (js journalSplit) */
.mm-cat-page--journal .mm-cat-page-inner { overflow: hidden; }
/* the Contents continued on the facing page: its list starts level with the first page's list */
.mm-cat-page--toc .mm-cat-text.is-toc-more .mm-cat-kicker { margin-bottom: 14px; }
.mm-cat-toc { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.mm-cat-toc button {
  width: 100%; display: grid; grid-template-columns: 30px auto 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--catalogue-ink);
  font: 400 1rem/1.3 var(--mm-display, "Fraunces", serif); transition: color .25s ease;
}
.mm-cat-toc-n { font: 500 .66rem/1 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .1em; color: var(--catalogue-gold); }
/* a chapter's collections (Engagement / Wedding Bands), indented under it */
.mm-cat-toc li.is-sub button { padding: 2px 0 4px; font-size: .84rem; color: var(--catalogue-text); }
.mm-cat-toc li.is-sub .mm-cat-toc-t { padding-left: 14px; }
.mm-cat-toc-list li.is-sub button { padding: 6px 2px 6px 18px; font-size: .9rem; color: var(--catalogue-text); }
.mm-cat-toc-dots { border-bottom: 1px dotted var(--catalogue-gold-light); transform: translateY(-4px); }
.mm-cat-toc-p { font: 400 .78rem/1 var(--mm-body, "Instrument Sans", sans-serif); color: var(--catalogue-text); white-space: nowrap; }
.mm-cat-toc button:hover { color: var(--catalogue-teal); }
.mm-cat-toc button:hover .mm-cat-toc-dots { border-bottom-color: var(--catalogue-gold); }

/* ---------- bottom controls ---------- */
.mm-cat-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1060px; margin: 18px auto 0; min-height: var(--cat-bar-h); padding: 10px 16px;
  background: rgba(247, 241, 231, .94); backdrop-filter: blur(6px);
  border: 1px solid var(--catalogue-border); border-bottom: 0; border-radius: 12px 12px 0 0;
  box-shadow: 0 -10px 24px -18px rgba(58, 42, 28, .35);
}
.mm-cat-pager { display: flex; align-items: center; gap: 14px; }
.mm-cat-pageinfo { min-width: 136px; text-align: center; font-family: var(--mm-display, "Fraunces", serif); font-size: .9rem; color: var(--catalogue-ink); }
.mm-cat-nav, .mm-cat-tool {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--catalogue-border); border-radius: 999px; background: var(--catalogue-paper-alt); cursor: pointer;
  color: var(--catalogue-ink); font: 500 .64rem/1 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .16em; text-transform: uppercase;
  transition: border-color .25s ease, color .25s ease, transform .2s var(--catalogue-ease-out), box-shadow .25s ease;
}
.mm-cat-nav span[aria-hidden], .mm-cat-tool span[aria-hidden] { display: inline-block; transition: transform .25s var(--catalogue-ease-out); color: var(--catalogue-gold); }
.mm-cat-nav:hover:not(:disabled), .mm-cat-tool:hover { border-color: var(--catalogue-gold); color: var(--catalogue-teal); transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(58, 42, 28, .5); }
.mm-cat-nav[data-mm-cat-next]:hover:not(:disabled) span[aria-hidden] { transform: translateX(3px); }
.mm-cat-nav[data-mm-cat-prev]:hover:not(:disabled) span[aria-hidden] { transform: translateX(-3px); }
.mm-cat-nav:disabled { opacity: .38; cursor: default; }
.mm-cat-nav:focus-visible, .mm-cat-tool:focus-visible, .mm-cat-book:focus-visible, .mm-cat-edge:focus-visible { outline: 2px solid var(--catalogue-gold); outline-offset: 2px; }

/* ---------- panels + piece overlay ---------- */
.mm-cat-panel, .mm-cat-piece {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 16px;
  background: rgba(35, 28, 22, .42); backdrop-filter: blur(2px);
}
.mm-cat-panel[hidden], .mm-cat-piece[hidden] { display: none; }
.mm-cat-panel { animation: mmCatScrim 260ms ease both; }
.mm-cat-panel .mm-cat-panel-inner { animation: mmCatPanelIn 320ms var(--catalogue-ease-out) both; }
.mm-cat-panel.is-leaving { animation: mmCatScrim 220ms ease reverse both; }
.mm-cat-panel.is-leaving .mm-cat-panel-inner { animation: mmCatPanelIn 220ms ease-in reverse both; }
@keyframes mmCatScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmCatPanelIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.mm-cat-panel-inner {
  width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 26px 28px;
  background: var(--catalogue-paper); border-radius: 6px; box-shadow: var(--catalogue-shadow);
}
.mm-cat-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--catalogue-border); }
.mm-cat-panel-head h2 { margin: 0; font-family: var(--mm-display, "Fraunces", serif); font-weight: 300; font-size: 1.7rem; color: var(--catalogue-ink); }
.mm-cat-close { width: 40px; height: 40px; border: 1px solid var(--catalogue-border); border-radius: 50%; background: var(--catalogue-paper-alt); cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--catalogue-ink); transition: border-color .25s, transform .2s; }
.mm-cat-close:hover { border-color: var(--catalogue-gold); transform: rotate(90deg); }
.mm-cat-toc-list { list-style: none; margin: 0 0 14px; padding: 0; }
.mm-cat-toc-list button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 10px 2px;
  border: 0; background: none; cursor: pointer; text-align: left; color: var(--catalogue-ink); font: 400 1.02rem/1.3 var(--mm-display, "Fraunces", serif); transition: color .25s;
}
.mm-cat-toc-list button .mm-cat-toc-dots { border-bottom: 1px dotted var(--catalogue-gold-light); transform: translateY(-4px); }
.mm-cat-toc-list button span:last-child { color: var(--catalogue-text); font: 400 .78rem/1 var(--mm-body, "Instrument Sans", sans-serif); white-space: nowrap; }
.mm-cat-toc-list button:hover { color: var(--catalogue-teal); }
.mm-cat-text-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--catalogue-teal); text-decoration: underline; text-decoration-color: var(--catalogue-gold); text-underline-offset: 4px; font-size: .84rem; }
.mm-cat-search-field input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--catalogue-border); border-radius: 4px; font-size: 1rem; background: var(--catalogue-paper-alt); color: var(--catalogue-ink); }
.mm-cat-search-field input:focus { outline: none; border-color: var(--catalogue-gold); box-shadow: 0 0 0 3px rgba(183, 138, 69, .18); }
.mm-cat-search-status { margin: 10px 0; font-size: .8rem; color: var(--catalogue-text); }
.mm-cat-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mm-cat-result { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 8px 10px 8px 8px; background: var(--catalogue-paper-alt); border: 1px solid transparent; border-radius: 4px; transition: border-color .25s, transform .2s var(--catalogue-ease-out); }
.mm-cat-result:hover { border-color: var(--catalogue-border); transform: translateY(-1px); }
.mm-cat-result img { width: 56px; height: 56px; object-fit: contain; background: var(--catalogue-photo-bg); }
.mm-cat-result strong { display: block; font-family: var(--mm-display, "Fraunces", serif); font-weight: 400; color: var(--catalogue-ink); }
.mm-cat-result small { font-size: .74rem; color: var(--catalogue-text); }
.mm-cat-result-btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--catalogue-gold); border-radius: 2px; background: none; cursor: pointer; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--catalogue-teal); white-space: nowrap; transition: background .25s, color .25s, transform .2s; }
.mm-cat-result-btn:hover { background: var(--catalogue-teal); border-color: var(--catalogue-teal); color: var(--catalogue-on-teal); }

/* View Piece: the catalogue softens, the detail sheet opens from the photo */
.mm-cat-piece { padding: 2.5vh 2.5vw; background: rgba(35, 28, 22, .38); }
.mm-cat-piece.is-opening { animation: mmCatScrim 320ms ease both; }
.mm-cat-piece.is-opening .mm-cat-piece-frame { animation: mmCatSheetIn 420ms var(--catalogue-ease-out) both; }
.mm-cat-piece.is-closing { animation: mmCatScrim 300ms ease reverse both; }
.mm-cat-piece.is-closing .mm-cat-piece-frame { animation: mmCatSheetIn 300ms ease-in reverse both; }
@keyframes mmCatSheetIn { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
.mm-cat-piece-frame {
  position: relative; width: min(1240px, 100%); height: 100%;
  background: var(--catalogue-paper); border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(35, 24, 14, .6);
}
.mm-cat-piece-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: var(--catalogue-paper); opacity: 0; transition: opacity .35s ease; }
/* while the page opens: the wordmark and a slow gold line, behind the (still transparent) page */
.mm-cat-piece-loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--catalogue-teal); font-size: 1.35rem; pointer-events: none;
}
.mm-cat-piece-loading-line { position: relative; width: 120px; height: 1px; overflow: hidden; background: var(--catalogue-border); }
.mm-cat-piece-loading-line::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--catalogue-gold); animation: mmCatLoadLine 1.1s var(--catalogue-ease-out) infinite;
}
.mm-cat-piece-loading-text { font: 500 .66rem/1 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--catalogue-muted); }
@keyframes mmCatLoadLine { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .mm-cat-piece-loading-line::after { animation: none; width: 100%; opacity: .5; } }
.mm-cat-piece-frame iframe.is-ready { opacity: 1; }
.mm-cat-piece-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--catalogue-border); border-radius: 999px; background: rgba(251, 247, 240, .96); cursor: pointer;
  color: var(--catalogue-ink); font: 500 .62rem/1 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .25s, color .25s;
}
.mm-cat-piece-close:hover { border-color: var(--catalogue-gold); color: var(--catalogue-teal); }
/* shared-element feel: the tapped photo travels to the sheet while it opens */
.mm-cat-ghost {
  position: fixed; z-index: 5100; pointer-events: none; object-fit: contain;
  background: var(--catalogue-photo-bg); border-radius: 2px;
  transform-origin: center center; will-change: transform, opacity;
  transition: transform .44s var(--catalogue-ease-out), opacity .3s ease .32s;   /* compositor-only (FLIP) */
}

/* ---------- mobile: one page at a time ---------- */
@media (max-width: 899px) {
  .mm-cat { padding: 12px 10px 0; }
  .mm-cat-book {
    --page-h: min(calc(100vh - 60px - var(--cat-bar-h) - 34px), calc((100vw - 20px) / .7));
    width: min(calc(var(--page-h) * .7), calc(100vw - 24px));
    perspective: 1400px;
  }
  .mm-cat-spread, .mm-cat-spread.is-single { grid-template-columns: 1fr; width: 100%; }
  .mm-cat-spread::before { display: none; }
  .mm-cat-spread::after { right: -4px; width: 4px; }
  .mm-cat-page.is-solo { border-radius: 4px; }
  .mm-cat-page-inner { padding: 18px; }
  .mm-cat-edge { display: none; }
  .mm-cat-bar { border-radius: 0; margin: 12px -10px 0; padding: 8px 10px; }
  .mm-cat-pager { gap: 6px; }
  .mm-cat-nav-text { display: none; }
  .mm-cat-nav { padding: 0 15px; font-size: .9rem; }
  .mm-cat-pageinfo { min-width: 92px; font-size: .82rem; }
  .mm-cat-tool { padding: 0 11px; font-size: .58rem; }
  .mm-cat-tile.is-large { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; text-align: center; }
  .mm-cat-piece { padding: 0; }
  .mm-cat-piece-frame { border-radius: 0; }
  .mm-cat-piece-close span { display: none; }
}
@media (max-width: 380px) {
  .mm-cat-tool { font-size: 0; padding: 0 12px; }
  .mm-cat-tool span { font-size: 1rem; }
}

/* ---------- reduced motion: no 3D page curl, quick crossfades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .mm-cat-leaf, .mm-cat-flick, .mm-cat-cast, .mm-cat-coverleaf { display: none !important; }
  .mm-cat-spread, .mm-cat-page, .mm-cat-panel, .mm-cat-panel-inner, .mm-cat-piece, .mm-cat-piece-frame,
  .mm-cat-page.is-entering * { animation: mmCatFade 160ms ease both !important; transform: none !important; }
  .mm-cat-ghost { display: none !important; }
  .mm-cat-tile-media img, .mm-cat-pair-media img { transition: none; }
}
@keyframes mmCatFade { from { opacity: 0; } to { opacity: 1; } }

/* =================================================================
   FULL-SCREEN BOOK (Real3D-style): the whole page is the catalogue.
   ================================================================= */
.mm-catalogue-page [data-site-nav],
.mm-catalogue-page > .mm-legal-footer { display: none !important; }
html body.mm-catalogue-page { overflow: hidden; height: 100vh; height: 100dvh; padding-top: 0 !important; }
.mm-catalogue-page .mm-cat { position: fixed; inset: 0; padding: 0; }
.mm-catalogue-page .mm-cat-stage {
  position: absolute; inset: 64px 0 22px 0; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.mm-catalogue-page .mm-cat-book {
  --page-h: min(calc(100dvh - 64px - 34px), calc((100vw - 190px) / 1.44));
  width: calc(var(--page-h) * 1.44);
  height: var(--page-h);
  flex: 0 0 auto;
  perspective: 2600px;
}

/* top controls */
.mm-cat-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.mm-cat-top[hidden] { display: none; }
.mm-cat-top-group { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.mm-cat-top .mm-cat-pageinfo {
  min-width: 0; padding: 0 16px; height: 42px; display: inline-flex; align-items: center;
  border-radius: 999px; background: rgba(251, 247, 240, .92); border: 1px solid var(--catalogue-border);
  font: 500 .82rem/1 var(--mm-body, "Instrument Sans", sans-serif); letter-spacing: .04em; color: var(--catalogue-ink);
  box-shadow: 0 6px 16px -10px rgba(58, 42, 28, .45);
}
/* the sheet is not usable while its next page is being routed (a few ms) */
.mm-cat-piece iframe.is-routing { pointer-events: none; }

/* the Marry Me wordmark inside headings, labels and sentences: sized by the text around it */
html body .mm-brand-inline { display: inline-flex; align-items: baseline; white-space: nowrap; color: inherit; font-style: normal; text-transform: none; letter-spacing: 0; vertical-align: baseline; }
html body .mm-brand-inline .brand-fancy-m { font-size: 1.62em !important; line-height: .8 !important; transform: translateY(.04em) !important; }
html body .mm-brand-inline .brand-rest { font-size: .92em !important; top: 0 !important; text-transform: none !important; letter-spacing: .01em !important; }
.mm-cat-title .mm-brand-inline, .mm-cat-panel-head .mm-brand-inline { color: var(--catalogue-teal); }

/* logo + wordmark, centred in the top bar */
.mm-cat-topbrand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; pointer-events: auto;
  text-decoration: none; color: var(--catalogue-teal); white-space: nowrap; text-transform: none; letter-spacing: 0;
  transition: opacity .25s;
}
.mm-cat-topbrand:hover { opacity: .82; }
.mm-cat-topbrand:focus-visible { outline: 2px solid var(--catalogue-gold); outline-offset: 4px; border-radius: 4px; }
.mm-cat-topbrand-logo { width: 38px; height: 38px; object-fit: contain; }
.mm-cat-topbrand-name { display: inline-flex; align-items: baseline; line-height: 1; color: var(--catalogue-teal); }
html body .mm-cat-topbrand-name .brand-fancy-m { font-size: 2.3rem !important; }
html body .mm-cat-topbrand-name .brand-rest { font-size: 1.1rem !important; text-transform: none !important; }
@media (max-width: 560px) {
  .mm-cat-topbrand { position: static; transform: none; gap: 5px; }   /* sits in the gap between the button groups */
  .mm-cat-topbrand-logo { width: 22px; height: 22px; }
  html body .mm-cat-topbrand-name .brand-fancy-m { font-size: 1.4rem !important; }
  html body .mm-cat-topbrand-name .brand-rest { font-size: .74rem !important; }
  /* slimmer controls so the logo has room between them */
  .mm-cat-top-group { gap: 6px; }
  .mm-cat-top .mm-cat-icon { width: 38px; height: 38px; }
  .mm-cat-top .mm-cat-icon svg { width: 17px; height: 17px; }
  .mm-cat-top .mm-cat-pageinfo { height: 38px; padding: 0 12px; font-size: .78rem; }
}
@media (max-width: 349px) { .mm-cat-topbrand-name { display: none; } }
.mm-cat-icon {
  width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--catalogue-border); background: rgba(251, 247, 240, .92); color: var(--catalogue-teal);
  box-shadow: 0 6px 16px -10px rgba(58, 42, 28, .45);
  transition: border-color .25s, transform .2s var(--catalogue-ease-out), background .25s;
}
.mm-cat-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-cat-icon:hover { border-color: var(--catalogue-gold); transform: translateY(-1px); background: var(--catalogue-paper-alt); }
.mm-cat-icon:active { transform: scale(.96); }
.mm-cat-icon:focus-visible, .mm-cat-arrow:focus-visible { outline: 2px solid var(--catalogue-gold); outline-offset: 3px; }

/* side arrows */
.mm-cat-arrow {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(251, 247, 240, .55); color: var(--catalogue-teal);
  transition: background .25s, transform .25s var(--catalogue-ease-out), opacity .25s;
  z-index: 25;
}
.mm-cat-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mm-cat-arrow:hover:not(:disabled) { background: rgba(251, 247, 240, .95); }
.mm-cat-arrow.is-next:hover:not(:disabled) { transform: translateX(3px); }
.mm-cat-arrow.is-prev:hover:not(:disabled) { transform: translateX(-3px); }
.mm-cat-arrow:active:not(:disabled) { transform: scale(.95); }
.mm-cat-arrow:disabled { opacity: 0; pointer-events: none; }

/* menu */
.mm-cat-menu-list { list-style: none; margin: 0; padding: 0; }
.mm-cat-menu-list a, .mm-cat-menu-list button {
  display: block; width: 100%; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--catalogue-border); background: none; cursor: pointer;
  text-align: left; text-decoration: none; color: var(--catalogue-ink); font: 400 1.08rem/1.3 var(--mm-display, "Fraunces", serif); position: relative; transition: color .3s var(--catalogue-ease-out);
}
.mm-cat-menu-list a:hover, .mm-cat-menu-list button:hover,
.mm-cat-menu-list a:focus-visible, .mm-cat-menu-list button:focus-visible { color: var(--catalogue-teal); }
/* hover: a fine gold line draws across the item's divider — nothing moves, no layout shift */
.mm-cat-menu-list a::after, .mm-cat-menu-list button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--catalogue-gold); transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--catalogue-ease-out); pointer-events: none;
}
.mm-cat-menu-list a:hover::after, .mm-cat-menu-list button:hover::after,
.mm-cat-menu-list a:focus-visible::after, .mm-cat-menu-list button:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .mm-cat-menu-list a::after, .mm-cat-menu-list button::after { transition: none; } }

/* ---------- the bending sheet ---------- */
.mm-catalogue-page .mm-cat-spread { overflow: visible; }
.mm-bend, .mm-bend-strip { position: absolute; top: 0; transform-style: preserve-3d; will-change: transform; }
.mm-bend { z-index: 10; }
.mm-bend-hit { bottom: 0; cursor: pointer; }                 /* click target over a WebGL hover curl */
.mm-cat-book.is-turning .mm-cat-spread > .mm-cat-page { pointer-events: none; }   /* no clicks through a turning page */
.mm-peek-under { position: absolute; top: 0; z-index: 9; overflow: hidden; pointer-events: none; background: var(--catalogue-paper); }
.mm-bend-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--catalogue-paper); }
.mm-bend-face.is-back { transform: rotateY(180deg); background: var(--catalogue-paper-alt); }
.mm-bend-page { position: absolute; top: 0; }
.mm-bend-page > .mm-cat-page { height: 100%; }
/* a turning page keeps its soft spine shade all the way over (like real paper near the
   binding) — without it the fold showed a bright "white line" next to the shaded page */
.mm-bend-shade { position: absolute; inset: 0; pointer-events: none; background: #2a1c10; opacity: 0; z-index: 5; }
.mm-bend-cast { position: absolute; top: 0; bottom: 0; pointer-events: none; opacity: 0; z-index: 9; }
.mm-bend-cast.is-right { background: linear-gradient(90deg, rgba(40, 28, 16, .55), rgba(40, 28, 16, .12) 45%, rgba(40, 28, 16, 0) 85%); }
.mm-bend-cast.is-left { background: linear-gradient(270deg, rgba(40, 28, 16, .55), rgba(40, 28, 16, .12) 45%, rgba(40, 28, 16, 0) 85%); }
.mm-bend-blank { background: linear-gradient(90deg, var(--catalogue-paper-alt), var(--catalogue-paper)); height: 100%; }
.mm-cat-page.mm-bend-blank::after { display: none; }
.mm-cat-page-empty { height: 100%; }
.mm-cat-book.is-dragging-page { cursor: grabbing; }
.mm-cat-book.is-dragging-page * { user-select: none; }
.mm-catalogue-page .mm-cat-edge { cursor: grab; }

/* ---------- phones / small tablets (Real3D single view): the SAME desktop book —
   identical pages, laid out at the desktop page size (619 x 860) — scaled down to fit,
   with a camera (scale + translateX, set by catalogue.js) centring ONE page of the
   spread. Nothing is re-arranged for phones; pinch-zoom stays available. ---------- */
@media (max-width: 899px) {
  .mm-catalogue-page .mm-cat { overflow: hidden; }
  .mm-catalogue-page .mm-cat-stage { inset: 66px 0 14px 0; gap: 0; }
  .mm-catalogue-page .mm-cat-book {
    --page-h: 860px;               /* the desktop page itself (as on a 1920 x 1080 screen), scaled to fit */
    --page-w: calc(860px * .72);
    width: calc(var(--page-w) * 2);
    height: var(--page-h);
    perspective: 2600px;
  }
  /* the page content exactly as on desktop (undo the older phone-only rules) */
  .mm-catalogue-page .mm-cat-page-inner { padding: clamp(20px, 3.4%, 44px); }
  .mm-catalogue-page .mm-cat-tile.is-large { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr; text-align: left; align-items: center; gap: 18px; }
  /* horizontal swipes turn pages; vertical still scrolls (also inside the
     scrollable page content), pinch-zoom stays available */
  .mm-catalogue-page .mm-cat-book, .mm-catalogue-page .mm-cat-book * { touch-action: pan-y pinch-zoom; }
  .mm-catalogue-page .mm-cat-spread { grid-template-columns: 1fr 1fr; width: 100%; margin: 0; }
  .mm-catalogue-page .mm-cat-spread::before { display: block; }
  .mm-catalogue-page .mm-cat-spread.is-half { grid-template-columns: 1fr; width: 50%; }
  .mm-catalogue-page .mm-cat-spread.is-half-right { margin-left: 50%; }
  .mm-catalogue-page .mm-cat-spread.is-half-right::before,
  .mm-catalogue-page .mm-cat-spread.is-half-left::after { display: none; }
  .mm-cat-top { top: 12px; left: 12px; right: 12px; }
  /* small, see-through arrows at the screen edges (Real3D style), over the page's outer margin */
  .mm-cat-arrow { position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; background: rgba(251, 247, 240, .5); box-shadow: 0 2px 8px -4px rgba(58, 42, 28, .35); opacity: .9; }
  .mm-cat-arrow.is-prev { left: 3px; }
  .mm-cat-arrow.is-next { right: 3px; }
  .mm-cat-arrow svg { width: 17px; height: 17px; }
}
/* strips overlap by a hair so no seam ever shows between slices; shading is a per-strip gradient */
.mm-bend-face { right: -1px; }
.mm-bend-shade { opacity: 1; background: transparent; }
/* shading covers the whole face incl. its 1px overlap, which keeps the strip's edge tone (js/catalogue.js
   render(): no unshaded hair = no fine white lines across a turning page) */
.mm-bend-shade { right: 0; left: 0; }

/* the Store's two floating buttons (Assistance + Connect) on a phone: in the free band under the book,
   never over the page (the Store lifts them above its buy bar; the catalogue has none) */
@media (max-width: 899px) {
  body.mm-catalogue-page .mm-service-dock { bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  body.mm-catalogue-page .mm-social-widget { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
}