/* ============================================================
   MAGIC TRINKETS — "The Conjuror's Catalogue"
   Design system. Authored for magictrinkets.com.
   Everything is scoped under .mt so Elementor / theme CSS
   never has to be fought on specificity.
   ============================================================ */

.mt {
  /* --- Material palette -------------------------------------
     baize  : the card table the whole site sits on
     paper  : the stock cards and catalogue pages are printed on
     ink    : engraving line
     brass  : hardware, rules, numerals
     oxblood: sealing wax, card backs, the one loud accent
  ----------------------------------------------------------- */
  --baize:        #10291f;
  --baize-deep:   #0a1b14;
  --baize-lift:   #17362a;
  --baize-line:   #24493a;

  /* Aged card stock rather than fresh cream: warmer, a touch duller,
     and darkening a step at a time so stacked surfaces still separate. */
  --paper:        #ede2cb;
  --paper-2:      #e3d6ba;
  --paper-3:      #d3c3a3;
  --foxing:       rgba(122, 92, 42, 0.13);

  --ink:          #15170f;
  --ink-soft:     #4a4c40;
  --ink-faint:    #7b7c6e;

  --brass:        #b99a5b;
  --brass-lt:     #d8c595;
  --brass-dim:    #8a7342;

  --oxblood:      #9e3529;
  --oxblood-lt:   #c2503f;
  --oxblood-deep: #6f2019;

  /* --- Type ------------------------------------------------
     Namespaced, and it has to stay that way. Elementor sets
     --display: flex on .e-con for its own layout, so a token named
     --display gets shadowed inside every container and
     font-family: var(--display) resolves to the unknown family
     "flex" — headings then silently fall back to the browser's
     default serif. Never name a token --display or --body here. */
  --mt-display: "Gloock", Georgia, "Times New Roman", serif;
  --mt-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Aged stock. A fractal-noise tile stands in for paper fibre; the
     mottling and foxing are layered on as low-opacity radials. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");

  /* Fluid scale. Tight tracking on display, wide on labels. */
  /* Also governed by viewport height: the hero has to hold a two-line
     headline AND the deck above the fold on a short laptop screen. */
  /* Sized for Gloock specifically. It sets appreciably wider than the
     serif fallback, so these run smaller than they would for a
     narrower face — at the previous scale the hero headline took three
     lines and pushed the deck off the first screen. */
  --t-mega:  clamp(2.5rem, min(8vw, 10.5vh), 8.5rem);
  --t-xl:    clamp(2.3rem, 5.4vw, 4.8rem);
  --t-lg:    clamp(1.85rem, 3.5vw, 3rem);
  --t-md:    clamp(1.5rem, 2.4vw, 2.1rem);
  --t-body:  clamp(1rem, 1.05vw, 1.125rem);
  --t-sm:    0.9375rem;
  --t-label: 0.6875rem;

  /* --- Rhythm ---------------------------------------------- */
  --gut:     clamp(1.25rem, 4vw, 3.5rem);
  --sec:     clamp(5rem, 11vw, 10rem);
  --sec-sm:  clamp(3.25rem, 6vw, 5.5rem);
  --maxw:    82rem;
  --maxw-nar: 46rem;

  --hair: 1px;
  --ease: cubic-bezier(0.2, 0.8, 0.25, 1);

  font-family: var(--mt-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--baize);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elementor Canvas gives us a bare page; make sure nothing
   inherited introduces a horizontal scrollbar. */
html, body { overflow-x: clip; }

/* Two classes, deliberately. The Hostinger theme ships
   body.elementor-page { font-family: Montserrat } at 0-1-1, which
   outranks a single .mt — so anything inheriting its font (every
   paragraph, caption and list on the site) came out Montserrat.
   body.mt.mt-page is 0-2-1 and wins without reaching for !important.
   Elements that set their own family are unaffected either way,
   because an inherited value always loses to a matching rule. */
body.mt.mt-page {
  background: var(--baize);
  margin: 0;
  font-family: var(--mt-body);
}
.mt * { box-sizing: border-box; }
.mt :where(img, svg) { display: block; max-width: 100%; }

/* ============================================================
   0. ELEMENTOR CANVAS RESET
   Sections are authored as full-bleed HTML widgets and manage their
   own gutters and vertical rhythm. Elementor's container defaults
   (max-width, boxed padding, flex gap) would otherwise inset every
   one of them and double the spacing.
   ============================================================ */
.mt .elementor,
.mt .elementor-section,
.mt .elementor-container,
.mt .elementor-column,
.mt .elementor-column-wrap,
.mt .elementor-widget-wrap,
.mt .elementor-widget,
.mt .elementor-widget-html,
.mt .elementor-widget-shortcode,
.mt .elementor-shortcode,
.mt .e-con,
.mt .e-con-inner {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 0;
}
.mt .e-con {
  --container-max-width: none;
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --gap: 0px;
}
.mt .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ============================================================
   1. SURFACES
   Two grounds only. Green is the table, cream is the stock.
   ============================================================ */
.mt-surface { position: relative; }
.mt-surface--baize { background: var(--baize); color: var(--paper); }
.mt-surface--baize-deep { background: var(--baize-deep); color: var(--paper); }
.mt-surface--paper { background: var(--paper); color: var(--ink); }
.mt-surface--paper-2 { background: var(--paper-2); color: var(--ink); }
.mt-surface--oxblood { background: var(--oxblood); color: var(--paper); }

/* Baize weave. Two crossed hairline gradients + a soft vignette
   so the green reads as felt rather than flat fill. */
.mt-surface--baize::before,
.mt-surface--baize-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05)      0 1px, transparent 1px 3px);
}
.mt-surface--baize::after,
.mt-surface--baize-deep::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,0.34) 100%);
}

/* Antique card stock. Four layers, in paint order: fibre grain from the
   noise tile, three soft patches of foxing, and the laid chain lines a
   sheet picks up on the mould. Multiplied so it darkens the stock rather
   than fogging a grey film over it. */
.mt-surface--paper::before,
.mt-surface--paper-2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: multiply;
  background-image:
    var(--grain),
    radial-gradient(58% 42% at 11% 16%, var(--foxing), transparent 63%),
    radial-gradient(48% 34% at 86% 71%, var(--foxing), transparent 65%),
    radial-gradient(38% 30% at 64% 34%, rgba(122, 92, 42, 0.09), transparent 62%),
    repeating-linear-gradient(0deg, rgba(21, 23, 15, 0.03) 0 1px, transparent 1px 4px);
  background-size: 180px 180px, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat;
}

/* The stock is not cut perfectly flat: a hair of shadow along the top
   edge reads as one sheet lying on the one above it. */
.mt-surface--paper::after,
.mt-surface--paper-2::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(90, 68, 30, 0.07), transparent);
}

.mt-surface > .mt-wrap { position: relative; z-index: 1; }

.mt-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.mt-wrap--narrow { max-width: var(--maxw-nar); }
.mt-wrap--wide { max-width: 96rem; }

.mt-sec { padding-block: var(--sec); }
.mt-sec--sm { padding-block: var(--sec-sm); }
.mt-sec--flush-top { padding-block-start: 0; }

/* ============================================================
   2. TYPE
   Gloock does the talking. Archivo does the filing.
   ============================================================ */
/* Base element rules are wrapped in :where() so they carry no
   specificity weight. Modifier classes below must always be able to
   win on source order alone — otherwise .mt p (0-1-1) silently beats
   .mt-hero__sub (0-1-0) and every centred paragraph drifts left. */
.mt :where(h1, h2, h3), .mt :where(.mt-display) {
  font-family: var(--mt-display);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 0.94;
  margin: 0;
  text-wrap: balance;
}
.mt :where(p) { margin: 0 0 1.1em; }
.mt :where(p:last-child) { margin-bottom: 0; }

.mt-mega { font-size: var(--t-mega); line-height: 0.86; letter-spacing: -0.03em; }
.mt-h1   { font-size: var(--t-xl); }
.mt-h2   { font-size: var(--t-lg); }
.mt-h3   { font-size: var(--t-md); line-height: 1.08; }

/* Gloock has a single upright cut and no true italic. Left to itself the
   browser synthesises an oblique by shearing the outlines, which wrecks
   a high-contrast face, so emphasis in display type is carried by brass
   rather than by slant. */
.mt :where(h1, h2, h3) em,
.mt .mt-display em,
.mt .mt-ital,
.mt .mt-quote__text { font-style: normal; }

.mt :where(h1, h2, h3) em,
.mt .mt-display em { color: var(--brass); }

.mt-ital { color: var(--brass); }

/* Lead paragraph — the one place body type gets to breathe. */
.mt-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  font-weight: 300;
  max-width: 34ch;
}
.mt-copy { max-width: 62ch; font-weight: 300; }
.mt-copy--tight { max-width: 46ch; }

/* The catalogue label. Used for every eyebrow, plate number,
   and column head on the site — it is the connective tissue. */
.mt-label {
  font-family: var(--mt-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.mt-label--brass { color: var(--brass); }
.mt-label--ink   { color: var(--ink-faint); }
.mt-label--wax   { color: var(--oxblood); }

/* Plate numerals are tabular so the index column stays true. */
.mt-num {
  font-family: var(--mt-body);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ============================================================
   3. RULES & ORNAMENT
   Hairlines carry structure. They are never decoration.
   ============================================================ */
.mt-rule {
  border: 0;
  height: var(--hair);
  background: currentColor;
  opacity: 0.22;
  margin: 0;
}
.mt-rule--brass { background: var(--brass); opacity: 0.4; }

/* A rule with a small engraved pip centred in it. Marks the
   boundary between chapters of the catalogue. */
.mt-rule-pip {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--brass);
}
.mt-rule-pip::before,
.mt-rule-pip::after {
  content: "";
  flex: 1;
  height: var(--hair);
  background: currentColor;
  opacity: 0.34;
}
.mt-rule-pip svg { width: 0.85rem; height: auto; opacity: 0.75; }

/* ============================================================
   4. ACTIONS
   One unmistakable primary. Everything else recedes.
   ============================================================ */
.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--mt-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.1em;
  border: var(--hair) solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.mt-btn:focus-visible {
  outline: 2px solid var(--brass-lt);
  outline-offset: 3px;
}

/* Primary: sealing-wax red. Appears once per viewport tier. */
.mt-btn--wax {
  background: var(--oxblood);
  color: var(--paper);
  border-color: var(--oxblood);
}
.mt-btn--wax:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }

/* Secondary: brass outline on green. */
.mt-btn--ghost {
  background: transparent;
  color: var(--brass-lt);
  border-color: rgba(185, 154, 91, 0.5);
}
.mt-btn--ghost:hover { background: var(--brass); color: var(--baize-deep); border-color: var(--brass); }

/* Secondary on paper. */
.mt-btn--ink {
  background: transparent;
  color: var(--ink);
  border-color: rgba(21, 23, 15, 0.28);
}
.mt-btn--ink:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Tertiary: an inline catalogue reference with a rule that
   draws itself on hover. */
.mt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mt-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.45em;
  position: relative;
}
.mt-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: var(--hair);
  background: currentColor;
  opacity: 0.3;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.mt-link:hover::after { opacity: 1; transform: scaleX(1); }
.mt-link .mt-arrow { transition: transform 0.4s var(--ease); }
.mt-link:hover .mt-arrow { transform: translateX(0.35em); }
.mt-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.mt-arrow { width: 0.85em; flex: none; }

/* ============================================================
   5. MASTHEAD
   No Elementor Pro here, so the header is authored per page.
   ============================================================ */
.mt-mast {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--baize-deep);
  border-bottom: var(--hair) solid var(--baize-line);
}
.mt-mast__in {
  max-width: 96rem;
  margin-inline: auto;
  /* Trimmed from 0.95rem: the logo lockup is taller than the wordmark
     it replaced, and without this the masthead grows enough to push the
     deck off the first screen. */
  padding: 0.6rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.mt-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--paper);
}
/* The supplied lockup, reversed for dark surfaces. Sized by height so
   the wordmark inside it stays legible; the spade carries recognition
   at the small end. */
/* Scoped with .mt deliberately: Elementor ships
   `.elementor img { height: auto }` at 0-1-1, which outranks a bare
   single-class rule and leaves the logo at its full natural height. */
/* The lockup stacks "Magic / Trinkets" in its right half, so it needs
   real height before the wordmark is readable at all — below about
   50px it collapses into a smudge beside the spade. */
.mt .mt-brandmark__img {
  height: clamp(3.4rem, 4.6vw, 3.9rem);
  width: auto;
  flex: none;
}
.mt .mt-brandmark__img--lg { height: clamp(4.5rem, 7vw, 6rem); }
.mt-brandmark svg { width: 1.55rem; height: auto; flex: none; }

.mt-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.3rem); }
.mt-nav a {
  font-family: var(--mt-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(246, 237, 228, 0.72);
  padding-block: 0.35rem;
  position: relative;
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.mt-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: var(--hair);
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.mt-nav a:hover, .mt-nav a[aria-current="page"] { color: var(--paper); }
.mt-nav a:hover::after,
.mt-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.mt-nav a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.mt-mast__cta { flex: none; }

@media (max-width: 860px) {
  .mt-nav { gap: 1rem; }
  .mt-nav a { font-size: 0.63rem; letter-spacing: 0.14em; }
  .mt-mast__cta { display: none; }
}
/* Below this the brandmark and a three-item nav no longer fit on one
   line; left alone the nav runs past the viewport and, because the
   page clips overflow, the last links become unreachable rather than
   merely ugly. Stacking keeps every link tappable without a menu. */
@media (max-width: 640px) {
  .mt-mast__in {
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.8rem;
  }
  .mt-nav { gap: 1.15rem; }
  .mt-nav a { font-size: 0.6rem; letter-spacing: 0.12em; }
  .mt .mt-brandmark__img { height: 2.5rem; }
}

/* ============================================================
   6. THE DECK  —  signature element
   Three aces, face down on the baize. Click one and it turns.
   ============================================================ */
/* The masthead is sticky, so it occupies layout space above this
   section. Subtracting its height keeps the whole deal — headline,
   fan, and prompt — inside the first screen. */
.mt-hero {
  min-height: min(calc(100svh - 4.6rem), 58rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.75rem, 4vw, 4rem) clamp(1.75rem, 3.5vw, 3.5rem);
}

.mt-hero__head { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }
.mt-hero__head .mt-label { margin-bottom: clamp(0.9rem, 2vw, 1.5rem); }
.mt-hero__title { color: var(--paper); }
.mt-hero__title em { color: var(--brass-lt); }
.mt-hero__sub {
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
  max-width: 42ch;
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  color: rgba(246, 237, 228, 0.72);
  line-height: 1.55;
}

/* .mt-deck is the block that owns state (is-opened); .mt-deck__fan is
   the row the cards actually sit in, so the prompt and note below are
   not dragged into the flex layout. */
.mt-deck { --card-w: clamp(8.5rem, min(19vw, 24vh), 17rem); display: block; }
.mt-deck__fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.5rem, 2.4vw, 2.75rem);
  perspective: 1800px;
  padding-block: 1rem 0.5rem;
}

/* Each card is a real anchor: without JS the click just goes to
   the category. With JS the first click turns it instead. */
.mt-card {
  --lift: 0rem;
  --tilt: 0deg;
  position: relative;
  display: block;
  flex: none;
  width: var(--card-w);
  aspect-ratio: 63 / 88;              /* poker stock, actual proportion */
  border: 0;
  padding: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(var(--lift)) rotate(var(--tilt));
  transition: transform 0.6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.mt-card:nth-child(1) { --tilt: -7deg; --lift: 1.4rem; }
.mt-card:nth-child(2) { --tilt: 0deg;  --lift: 0rem;   z-index: 2; }
.mt-card:nth-child(3) { --tilt: 7deg;  --lift: 1.4rem; }

.mt-card:hover  { --lift: -0.55rem; }
.mt-card:nth-child(1):hover { --lift: 0.6rem; }
.mt-card:nth-child(3):hover { --lift: 0.6rem; }
.mt-card:focus-visible { outline: none; }
.mt-card:focus-visible .mt-card__inner {
  box-shadow: 0 0 0 2px var(--brass-lt), 0 1.6rem 3rem rgba(0,0,0,0.45);
}

/* A turned card straightens up and steps forward. The :nth-child(n)
   is load-bearing: it lifts this to 0-3-0 so it outranks the
   .mt-card:nth-child(1):hover rules above, which would otherwise keep
   a turned card pinned at its hover offset. */
.mt-card.is-turned:nth-child(n) { --tilt: 0deg; --lift: -1rem; z-index: 3; }

/* display:block matters — this is a <span>, so width/height would
   otherwise be ignored and the card would collapse to nothing. */
.mt-card__inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s var(--ease), box-shadow 0.5s var(--ease);
  border-radius: 0.55rem;
  box-shadow: 0 1.1rem 2.2rem rgba(0, 0, 0, 0.4);
}
.mt-card.is-turned .mt-card__inner {
  transform: rotateY(180deg);
  box-shadow: 0 1.8rem 3.4rem rgba(0, 0, 0, 0.5);
}

.mt-card__side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--paper);
}
.mt-card__side img { width: 100%; height: 100%; object-fit: cover; }
.mt-card__side--face { transform: rotateY(180deg); }

/* The category name sits on the revealed face, not floating
   above it — it is printed on the card. */
/* Set as a printed label band rather than a gradient wash: a solid
   stock ground, a hairline rule, and a soft bleed upward so it joins
   the engraving instead of fogging it. */
.mt-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.6rem 0.85rem;
  text-align: center;
  background: var(--paper);
  border-top: var(--hair) solid rgba(21, 23, 15, 0.2);
  box-shadow: 0 -1.5rem 1.5rem 0.2rem var(--paper);
}
.mt-card__caption .mt-card__name {
  font-family: var(--mt-display);
  font-size: clamp(0.95rem, 1.45vw, 1.3rem);
  line-height: 1.02;
  color: var(--ink);
  display: block;
}
.mt-card__caption .mt-label {
  color: var(--oxblood);
  margin-top: 0.4rem;
  font-size: 0.5rem;
  letter-spacing: 0.17em;
}

/* Prompt under the fan. Fades out once a card has been turned. */
.mt-deck__prompt {
  margin-top: clamp(1.25rem, 2.5vw, 2.5rem);
  text-align: center;
  color: rgba(246, 237, 228, 0.5);
  transition: opacity 0.6s var(--ease);
}
.mt-deck__prompt .mt-label { color: inherit; }
.mt-deck.is-opened .mt-deck__prompt { opacity: 0; }

/* The second read: the deck you are handling is stock № 1108. */
.mt-deck__note {
  margin-top: 1.15rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(246, 237, 228, 0.42);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.7s var(--ease) 0.25s, transform 0.7s var(--ease) 0.25s;
}
.mt-deck.is-opened .mt-deck__note { opacity: 1; transform: none; }
.mt-deck__note a { color: var(--brass); text-decoration: none; border-bottom: var(--hair) solid rgba(185,154,91,0.45); }
.mt-deck__note a:hover { color: var(--brass-lt); border-bottom-color: var(--brass-lt); }

/* --- The deal ---------------------------------------------
   Cards arrive from the dealer's left, staggered, and settle.
   ----------------------------------------------------------- */
.mt-deck[data-deal="pending"] .mt-card { opacity: 0; }
.mt-deck[data-deal="run"] .mt-card {
  animation: mt-deal 0.95s var(--ease) backwards;
  animation-delay: calc(var(--i) * 150ms);
}
@keyframes mt-deal {
  0%   { opacity: 0; transform: translate(-62vw, 14vh) rotate(-118deg) scale(0.88); }
  62%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(var(--lift)) rotate(var(--tilt)); }
}

@media (max-width: 720px) {
  .mt-deck { --card-w: min(30vw, 11rem); }
  .mt-deck__fan { gap: 0.4rem; }
  .mt-card:nth-child(1) { --tilt: -9deg; }
  .mt-card:nth-child(3) { --tilt: 9deg; }
}

/* ============================================================
   7. THE INDEX
   The catalogue's table of contents. Rows, not cards — because
   this content genuinely is an ordered index.
   ============================================================ */
.mt-index { border-top: var(--hair) solid rgba(21,23,15,0.16); }
.mt-index__row {
  display: grid;
  grid-template-columns: 5rem 1fr minmax(0, 26rem) 3rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: var(--hair) solid rgba(21,23,15,0.16);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease);
}
.mt-index__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  z-index: -1;
}
.mt-index__row:hover::before { opacity: 1; }
.mt-index__row:hover { padding-inline: 1.25rem; }
.mt-index__row:focus-visible { outline: 2px solid var(--oxblood); outline-offset: -2px; }

.mt-index__no { color: var(--brass-dim); font-size: 0.8125rem; white-space: nowrap; }
.mt-index__name { font-family: var(--mt-display); font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1; }
.mt-index__desc { font-size: 0.9375rem; font-weight: 300; color: var(--ink-soft); line-height: 1.5; }
.mt-index__go { justify-self: end; color: var(--oxblood); transition: transform 0.45s var(--ease); }
.mt-index__row:hover .mt-index__go { transform: translateX(0.4rem); }
.mt-index__go svg { width: 1.4rem; }

/* Narrow: place every cell explicitly. Left to auto-flow, the arrow
   drops onto a fourth row of its own and the plate number wraps. */
@media (max-width: 860px) {
  .mt-index__row {
    grid-template-columns: 1fr auto;
    row-gap: 0.45rem;
    align-items: center;
  }
  .mt-index__no   { grid-column: 1 / -1; grid-row: 1; }
  .mt-index__name { grid-column: 1; grid-row: 2; }
  .mt-index__go   { grid-column: 2; grid-row: 2; }
  .mt-index__desc { grid-column: 1 / -1; grid-row: 3; }
}

/* ============================================================
   8. PLATES
   Product cards, drawn as catalogue plates: engraving on top,
   ruled caption block beneath.
   ============================================================ */
.mt-plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
.mt-plate {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  /* Explicit, not inherit: plates sit on the baize surface, whose
     colour is paper. Inheriting would print the plate name in cream
     on cream stock and lose it entirely. */
  color: var(--ink);
  background: var(--paper);
  border: var(--hair) solid rgba(21,23,15,0.14);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.mt-plate:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1.4rem 2.6rem rgba(6, 20, 14, 0.28);
  border-color: rgba(185, 154, 91, 0.8);
}
.mt-plate:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.mt-plate__fig {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
  border-bottom: var(--hair) solid rgba(21,23,15,0.14);
}
.mt-plate__fig img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.mt-plate__no {
  position: absolute;
  top: 0.8rem; left: 0.85rem;
  color: var(--brass-dim);
  font-size: 0.5625rem;
}
.mt-plate__body { padding: 1.15rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.mt-plate__name { font-family: var(--mt-display); font-size: 1.45rem; line-height: 1.02; }
.mt-plate__desc { font-size: 0.875rem; font-weight: 300; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.mt-plate__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: 0.85rem; margin-top: 0.35rem;
  border-top: var(--hair) solid rgba(21,23,15,0.14);
}
.mt-plate__price { font-family: var(--mt-display); font-size: 1.3rem; color: var(--oxblood); }
.mt-plate__diff { font-size: 0.5625rem; color: var(--ink-faint); }

/* ============================================================
   9. EDITORIAL SPREAD
   Asymmetric two-up used for the Card Tricks feature and About.
   ============================================================ */
.mt-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.mt-spread--flip > .mt-spread__fig { order: -1; }
.mt-spread__text > * + * { margin-top: 1.5rem; }
.mt-spread__fig { position: relative; }
.mt-spread__fig img { width: 100%; }
/* Figure caption in the margin, the way a plate is annotated. */
.mt-figcap {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--ink-faint);
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
}
.mt-figcap .mt-num { color: var(--brass-dim); flex: none; }
@media (max-width: 860px) {
  .mt-spread { grid-template-columns: 1fr; }
  .mt-spread--flip > .mt-spread__fig { order: 0; }
}

/* ============================================================
   10. THE SECRET  —  proof section, set as an instruction sheet
   ============================================================ */
.mt-sheet {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(2rem, 5vw, 4.25rem);
  border: var(--hair) solid rgba(21,23,15,0.2);
  position: relative;
}
/* A second rule inset from the border — the printed frame you
   find on old instruction leaflets. */
.mt-sheet::after {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: var(--hair) solid rgba(185,154,91,0.55);
  pointer-events: none;
}
.mt-sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.mt-step > .mt-label { color: var(--oxblood); }
.mt-step__title { font-family: var(--mt-display); font-size: 1.5rem; line-height: 1.05; margin: 0.85rem 0 0.6rem; }
.mt-step__body { font-size: 0.9375rem; font-weight: 300; color: var(--ink-soft); line-height: 1.55; }

/* ============================================================
   11. TESTIMONY  —  small, quiet, one voice only
   ============================================================ */
.mt-quote { text-align: center; max-width: 36ch; margin-inline: auto; }
.mt-quote__text {
  font-family: var(--mt-display);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.14;
  color: var(--paper);
}
.mt-quote__by { margin-top: 1.75rem; color: var(--brass); }

/* ============================================================
   12. CLOSING CALL
   ============================================================ */
.mt-close { text-align: center; }
.mt-close__title { color: var(--paper); margin-bottom: 1.4rem; }
.mt-close__title em { color: var(--brass-lt); }
.mt-close__sub { color: rgba(246,237,228,0.66); font-weight: 300; max-width: 40ch; margin: 0 auto 2.5rem; }
.mt-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.mt-actions--start { justify-content: flex-start; }

/* ============================================================
   13. COLOPHON  —  footer, set as a catalogue colophon
   ============================================================ */
.mt-foot { background: var(--baize-deep); color: rgba(246,237,228,0.6); }
.mt-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.mt-foot__blurb { max-width: 32ch; font-size: 0.9375rem; font-weight: 300; line-height: 1.6; margin-top: 1.25rem; }
.mt-foot__col h4 { margin: 0 0 1.15rem; }
.mt-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.mt-foot__col a {
  color: rgba(246,237,228,0.62);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 300;
  transition: color 0.35s var(--ease);
}
.mt-foot__col a:hover { color: var(--brass-lt); }
@media (max-width: 860px) {
  .mt-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .mt-foot__top { grid-template-columns: 1fr; }
}
.mt-foot__bar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.6rem;
  border-top: var(--hair) solid var(--baize-line);
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(246,237,228,0.4);
}

/* ============================================================
   14. PAGE HEADS  —  inner-page mastheads
   ============================================================ */
.mt-phead { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem); }
.mt-phead__title { color: var(--paper); margin-top: 1.5rem; }
.mt-phead__title em { color: var(--brass-lt); }
.mt-phead__sub { margin-top: 1.5rem; color: rgba(246,237,228,0.68); }
.mt-phead__meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: var(--hair) solid var(--baize-line);
  color: var(--brass);
}

/* ============================================================
   15. REVEAL
   One motion idiom, used everywhere, so the page reads as
   composed rather than scattered.
   ============================================================ */
.mt-rise { opacity: 0; transform: translateY(1.4rem); }
.mt-rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .mt *, .mt *::before, .mt *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .mt-rise { opacity: 1; transform: none; }
  .mt-deck[data-deal="pending"] .mt-card { opacity: 1; }
  /* The turn becomes an instant cut rather than a rotation. */
  .mt-card__inner { transition: none; }
}

/* ============================================================
   16. PRODUCT
   The commerce seam. WooCommerce is deactivated on this install, so
   the add-to-cart control is styled and placed exactly where the real
   one goes, and currently reveals an inline note instead of posting.
   Switching Woo on means replacing the button, not the layout.
   ============================================================ */
.mt-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.mt-product__fig {
  position: relative;
  background: var(--paper-2);
  border: var(--hair) solid rgba(21, 23, 15, 0.14);
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
}
.mt-product__fig img { width: 100%; max-width: 24rem; margin-inline: auto; }
.mt-product__no { position: absolute; top: 1rem; left: 1.15rem; color: var(--brass-dim); }
.mt-product__head > * + * { margin-top: 1.15rem; }
.mt-product__price { font-family: var(--mt-display); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--oxblood); line-height: 1; }

.mt-spec { border-top: var(--hair) solid rgba(21, 23, 15, 0.16); margin-top: 2rem; }
.mt-spec__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  padding-block: 0.9rem;
  border-bottom: var(--hair) solid rgba(21, 23, 15, 0.16);
}
.mt-spec__k { color: var(--ink-faint); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding-top: 0.3em; }
.mt-spec__v { font-size: 0.9375rem; font-weight: 300; color: var(--ink-soft); }

.mt-cart-note {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 2px solid var(--brass);
  padding-left: 0.95rem;
  display: none;
}
.mt-cart-note.is-shown { display: block; }
.mt-cart-note a { color: var(--oxblood); }

@media (max-width: 860px) {
  .mt-product { grid-template-columns: 1fr; }
  /* Stacked, an uncapped figure eats the whole first screen and
     pushes the price and the buy control below the fold. */
  .mt-product__fig { max-width: 24rem; }
  .mt-product__fig img { max-width: 15rem; }
  .mt-spec__row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ============================================================
   17. FLIP HERO
   The hero is an Elementor Flip Hero widget. The widget ships
   deliberately neutral; this is where it picks up the house voice.
   Keeping the adaptation here rather than inside the widget is what
   lets the same widget serve a different site unchanged.

   Only properties Elementor does not generate are set here. Sizes,
   gaps, colours and timings come from the widget's own controls, so
   nothing below can be fighting the editor.
   ============================================================ */
.mt .efh {
  min-height: min(calc(100svh - 4.6rem), 58rem);
  padding-block: clamp(1.75rem, 4vw, 4rem) clamp(1.75rem, 3.5vw, 3.5rem);
}
.mt .efh__headline {
  font-family: var(--mt-display);
  font-size: var(--t-mega);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.mt .efh__sub {
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  color: rgba(237, 226, 203, 0.72);
}
.mt .efh__card-title { font-family: var(--mt-display); }
.mt .efh__card-label { color: var(--oxblood); }
.mt .efh__prompt { color: rgba(237, 226, 203, 0.5); }
.mt .efh__note   { color: rgba(237, 226, 203, 0.55); }
.mt .efh__note a {
  color: var(--brass);
  text-decoration: none;
  border-bottom: var(--hair) solid rgba(185, 154, 91, 0.45);
}
.mt .efh__note a:hover { color: var(--brass-lt); border-bottom-color: var(--brass-lt); }

/* ============================================================
   18. UTILITIES
   ============================================================ */
.mt-stack > * + * { margin-top: var(--s, 1.5rem); }
.mt-center { text-align: center; }
.mt-center .mt-lead, .mt-center .mt-copy { margin-inline: auto; }
.mt-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-sec-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mt-sec-head .mt-label { margin-bottom: 1.35rem; }
.mt-sec-head--split {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: flex-end; justify-content: space-between;
}