/* ============================================================
   RMX — the certificate document.

   ONE stylesheet for two consumers: the standalone printable page
   (templates/certificate.php) and the live preview on the product forms.
   Both render the identical markup from RMX_Certificate::markup(), so the
   preview cannot drift away from the real thing.

   The document IS the artwork, and since August 2026 the artwork is DRAWN:
   RMX_Crest::sheet() emits the whole sheet as SVG — aged ground, rinceaux
   border, the beast, the struck seal, the Keeper's signature and every fixed
   line of copy. certificate-roachhood-blank.jpg is no longer referenced; it and
   certificate-roachhood.jpg are kept in the repo as the record of what the
   sheet looked like before.

   Only three things are live text on top of it — the name, the roast, and the
   registry stamp — and their boxes are percentages of the SVG's own 1000x1414
   viewBox, so they stay pinned at any size. Those percentages and the
   coordinates in RMX_Crest are the same measurement written twice: move a line
   there and it moves here.

   Type is in `cqw` off the card's own inline-size container, so the component is
   faithful at 300px and at 900px. Do not introduce px or vw sizes inside
   .rmx-doc — they break that guarantee.
   ============================================================ */

.rmx-doc-wrap {
  container-type: inline-size;
  position: relative;
}

.rmx-doc {
  /* The drawn sheet's proportions — 1000x1414, which is A4 portrait to within a
     rounding error. Portrait matters: this is opened on a phone far more often
     than it is printed. */
  aspect-ratio: 2480 / 3508;
  position: relative;
  overflow: hidden;
  color: #241a12;
  /* Shows only in the instant before the SVG paints, and behind it if a
     renderer drops the turbulence filters. */
  background-color: #e3d0a4;
}

/* ---------- the drawn sheet ----------
   Fills the card exactly. Behind the live text on purpose: a long roach name
   scaled to fill its band can reach toward the beast above it, and it must sit
   over the gold rather than under it. */
.rmx-doc__sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.rmx-doc__name,
.rmx-doc__roast,
.rmx-doc__stamp { z-index: 1; }

/* ---------- the roach's name ----------
   Sits in the ruled band under "This is to certify that the roach hereafter
   known as". One line only, and rmx-fit.js scales long names down to fit rather
   than letting them run under the border.

   Rye is a wide, heavily-serifed face, so this band is wider and its type
   smaller than a humanist caps face would need — at the old 8.6cqw the longer
   names reached the frame. */
.rmx-doc__name {
  position: absolute;
  left: 16.5%;
  right: 16.5%;
  top: 16.7%;
  height: 4.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rmx-doc__name span {
  display: inline-block;
  white-space: nowrap;
  transform-origin: center center;
  font-family: 'Rye', 'Playfair Display', 'Bodoni MT', Georgia, serif;
  font-weight: 400;
  font-size: 5.2cqw;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  /* Gilded to match the drawn lettering above it. The solid colour is the
     fallback for anything without background-clip: text. */
  /* Solid, not gilded. The gradient ran through #f2e2ad at its midpoint,
     which on this paper is very nearly the paper itself -- the middle of every
     name washed out and became hard to read. Legibility wins over the metal. */
  color: #5c4411;
}

/* ---------- the roast ----------
   Runs between the name's rule and the fixed "is officially designated a
   household pest" line at 67.3%. Italic, matching the fixed italic lines
   already drawn on the sheet.

   max-height is a percentage of the CARD's height, not its width, so it has to
   be read against that: 8.4% of height is 11.9% of width, which clears three
   3.05cqw lines at 1.45 line-height (13.3% of width) less the descender slack.
   Getting this wrong silently crops the roast to one line. */
.rmx-doc__roast {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 66.7%;
  height: 8.1%;
  margin: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 2.8cqw;
  line-height: 1.32;
  color: #55432c;
  overflow-wrap: anywhere;
  /* No line clamp. The field accepts 280 characters and the preview has to
     show all of them -- rmx-fit.js shrinks the type until it fits, the same
     bargain the name already makes. Centred so a one-line roast still sits in
     the middle of the band. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* ---------- registry stamp ----------
   Bottom-left, opposite the Keeper's signature and left of the struck seal. */
.rmx-doc__stamp {
  position: absolute;
  left: 10.5%;
  top: 80.3%;
  width: 23%;
  text-align: center;
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: #2e2216;
}
.rmx-doc__stamp b {
  display: block;
  font-weight: 400;
  font-size: 2.6cqw;
  line-height: 1.2;
  padding-bottom: .55cqw;
  border-bottom: .1cqw solid rgba(111, 83, 22, .5);
}
.rmx-doc__stamp small {
  display: block;
  margin-top: .8cqw;
  font-size: 1.7cqw;
  line-height: 1.3;
  letter-spacing: .04em;
  font-style: normal;
  font-family: 'Rye', 'Playfair Display', Georgia, serif;
  color: #4a3a28;
}

/* An author `display` beats the UA stylesheet's [hidden] rule, and the preview
   toggles `hidden` on the roast when the field is empty. */
.rmx-doc [hidden] { display: none !important; }

/* ---------- narrow rendering ----------
   Under a ~360px card the stamp is the first thing to become texture rather
   than information. The registry number stays — it identifies the document —
   but the date line loses its rule and tightens up. */
@container (max-width: 360px) {
  .rmx-doc__stamp { width: 27%; left: 11.5%; }
  .rmx-doc__stamp b { font-size: 3cqw; border-bottom: 0; padding-bottom: 0; }
  .rmx-doc__stamp small { font-size: 2.1cqw; margin-top: .4cqw; }
}

/* ---------- sheet two ----------
   Care & Handling, and Provenance & Registry. Still the photographed plate:
   nothing on it varies by customer, so it has no live text boxes, no container
   queries and no fitting pass. It keeps its own proportions, which are the
   original artwork's rather than the drawn sheet's.

   It is not part of RMX_Certificate::markup(), so it never appears in the live
   preview on the product forms. There is nothing there to preview. */
.rmx-doc--page2 {
  aspect-ratio: 1587 / 2245;
  background-image: url('../img/certificate-roachhood-2.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}