/* Piece Passport — the public certificate page (layouts/passport only).
 *
 * A fine-press document, not a listing: one calm column, generous
 * whitespace, cream ground. Contrast rule: gold is for accents and rules
 * ONLY — body text is always ink on cream (gold on cream fails contrast).
 * Cormorant Garamond carries display; Jost 300 carries body.
 *
 * Linked solely by the passport layout and stubbed out of the public
 * Tailwind bundle (application.css `stub passport`) — bare element
 * selectors here must never reach other pages.
 *
 * ── How one stylesheet serves both the screen and the printer ──────────
 * The A5 card rules are written ONCE, unmediated, so the card is the base
 * state of the document. Ordinary screen viewing then overrides them back
 * to a flowing column, and those overrides are scoped to a body class the
 * page only carries when it is NOT previewing print:
 *
 *   printing         → @media screen never applies      → card
 *   ?print=1         → body has no --flow class         → card
 *   normal browsing  → body.passport-body--flow wins    → calm column
 *
 * So the preview and the paper are produced by the same rules, and there
 * is no second copy of the card layout to drift out of sync. */

:root {
  /* #013A52 is the ONLY UC teal. This file previously declared #003333,
     which is wrong — corrected 2026-08-02 (Passport Visual Rebuild §2). */
  --passport-teal: #013A52;
  --passport-gold: #c9a96e;
  --passport-gold-ink: #8a6e3c;
  --passport-cream: #faf7f2;
  --passport-paper: #fffdf9;
  --passport-ink: #1a1a1a;
  --passport-ink-soft: rgba(26, 26, 26, 0.64);
  --passport-rule: rgba(201, 169, 110, 0.55);
  --passport-hair: #dcd3c6;
}

* {
  box-sizing: border-box;
}

body.passport-body {
  margin: 0;
  background: var(--passport-cream);
  color: var(--passport-ink);
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The teal band and cream ground are the identity — they must survive
     the trip to paper. The customer must still switch "Background
     graphics" on in the print dialog. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE CARD — A5 portrait, two faces, duplex. Written once; this is the
   base state of the document. See the header note.
   ═══════════════════════════════════════════════════════════════════════ */

.passport {
  margin: 0;
  padding: 0;
}

.passport-face {
  position: relative;
  width: 148mm;
  height: 210mm;
  margin: 0 auto;
  padding: 14mm 16mm 12mm;
  background: var(--passport-paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The gold double hairline. Pseudo-elements, so the frame costs no markup
   and can never be caught by a content selector. */
.passport-face::before {
  content: '';
  position: absolute;
  inset: 7mm;
  border: 0.4mm solid var(--passport-gold);
  pointer-events: none;
}

.passport-face::after {
  content: '';
  position: absolute;
  inset: 8.2mm;
  border: 0.15mm solid rgba(201, 169, 110, 0.45);
  pointer-events: none;
}

/* ——— masthead ——— */

.passport-masthead {
  flex: none;
  text-align: center;
}

.passport-wordmark {
  display: block;
  width: 58mm;
  margin: 0 auto;
}

.passport-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* A CSS rule outranks the SVG's own `fill` presentation attribute, so the
   supplied artwork is recoloured without a single path being edited. */
.passport-wordmark svg g {
  fill: var(--passport-teal);
}

.passport-marks {
  display: block;
  width: 24mm;
  height: auto;
  margin: 1.5mm auto 0;
}

/* The auto TOP margin is what closes the back face up: it takes the slack
   left by a short specification table, so the care line, rule and footer
   sit as a block at the foot of the card instead of stranding a void
   between the table and the footer. */
.passport-marks--small {
  width: 18mm;
  margin: auto auto 4mm;
}

.passport-eyebrow {
  margin: 2.5mm 0 0;
  font-size: 6.5pt;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--passport-gold-ink);
}

/* ——— hero ——— */

/* 91mm, not the full 116mm inner width. Every stone photograph whose
   dimensions can actually be read is 1080px on the long edge, and
   1080px ÷ 300dpi = 91.4mm. Wider than this and the card prints below
   300dpi. */
/* Shrinkable on purpose. A 117-character title (the longest on file in
   prod — a colour field carrying a staff note) sets four lines and pushes
   the provenance band 3.4mm off the bottom of the card. The photograph is
   the only element that can give ground without losing information, so it
   yields those millimetres instead. Normal titles never touch it: they
   leave slack, and the hero keeps its full 74mm. */
.passport-hero {
  flex: 0 1 auto;
  width: 91mm;
  max-width: 100%;
  height: 74mm;
  min-height: 46mm;
  margin: 9mm auto 0;
  background: var(--passport-cream);
  border: 0.2mm solid var(--passport-hair);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.passport-hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* The further-views strip is a screen affordance; the card is one stone,
   one photograph. */
.passport-gallery {
  display: none;
}

/* ——— title + badge ——— */

.passport-title {
  margin: 8mm 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 23pt;
  line-height: 1.14;
  text-align: center;
  text-wrap: balance;
  /* The longest real title in prod is 117 characters. It must wrap inside
     the frame, never spill past it. */
  overflow-wrap: anywhere;
}

.passport-badge {
  display: block;
  margin: 5mm 0 0;
  text-align: center;
}

.passport-badge-label {
  display: inline-block;
  padding: 1.2mm 3.5mm;
  border: 0.2mm solid var(--passport-rule);
  font-size: 6.5pt;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--passport-ink-soft);
}

.passport-badge--certified .passport-badge-label {
  border-color: var(--passport-gold);
  color: var(--passport-gold-ink);
}

.passport-badge-ref {
  display: block;
  margin-top: 1.5mm;
  font-size: 7.5pt;
  color: var(--passport-ink-soft);
}

/* ——— the story lines that are not the claim ——— */

.passport-story {
  margin: 5mm 0 0;
  text-align: center;
}

.passport-story p {
  margin: 0 0 1.5mm;
  font-size: 8.5pt;
  color: var(--passport-ink-soft);
}

/* ——— provenance band (the signature) ———
   Carries ProvenanceLanguage#claim_line VERBATIM — the same sentence the
   Shopify description leads with. It is deliberately NOT decomposed into
   an eyebrow and a place: four of the five claim rows (Antique, Recycled
   and the two origin sentinels) contain no place at all, and splitting the
   sentence would mean parsing copy that #118 settled. */

/* Bleeds out to MEET the gold frame, not across it. The concept mock used
   -16mm, which reaches the card edge and leaves the frame's hairlines
   printed on top of the teal — its own comment says "bleeds to the gold
   frame", so the number and the intent disagreed. 16mm inner padding less
   the 7mm frame inset is 9mm, which lands the band exactly on the rule. */
.passport-band {
  flex: none;
  margin: auto -9mm 0;
  padding: 7mm 10mm 6.5mm;
  background: var(--passport-teal);
  color: var(--passport-cream);
  text-align: center;
}

.passport-band p {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 15pt;
  line-height: 1.28;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* ——— back face: specification ——— */

.passport-specs {
  flex: none;
}

.passport-specs h2 {
  margin: 0;
  font-size: 6.5pt;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--passport-gold-ink);
}

.passport-specs dl {
  margin: 5mm 0 0;
}

.passport-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6mm;
  padding: 2.6mm 0;
  border-bottom: 0.15mm solid var(--passport-hair);
}

.passport-spec-row dt {
  flex: none;
  font-size: 9pt;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--passport-ink-soft);
}

.passport-spec-row dd {
  margin: 0;
  font-size: 9pt;
  font-weight: 400;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ——— care line (approved copy, §5) ——— */

.passport-care {
  margin: 7mm 0 0;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 11pt;
  line-height: 1.5;
  color: var(--passport-ink-soft);
}

/* ——— back face foot: QR, piece no, issued date, URL ——— */

.passport-rule {
  height: 0.15mm;
  margin: 6mm 0;
  background: var(--passport-hair);
  border: 0;
}

.passport-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6mm;
}

.passport-qr {
  flex: none;
  width: 22mm;
  height: 22mm;
}

.passport-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.passport-foot-meta {
  text-align: right;
  font-size: 7.5pt;
  line-height: 1.7;
  color: var(--passport-ink-soft);
}

.passport-foot-meta p {
  margin: 0;
}

.passport-piece-no span {
  color: var(--passport-ink);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.passport-url {
  color: var(--passport-teal);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

/* ——— interactive chrome — never on paper ——— */

.passport-actions {
  margin: 6mm 0 0;
  text-align: center;
}

.passport-download {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--passport-gold);
  background: transparent;
  color: var(--passport-ink);
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.passport-download:hover,
.passport-download:focus-visible {
  background: var(--passport-teal);
  border-color: var(--passport-teal);
  color: var(--passport-cream);
}

.passport-store-link {
  margin: 4mm 0 0;
  text-align: center;
}

.passport-store-link a {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--passport-gold);
  color: var(--passport-ink);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCREEN — override the card back to a flowing, phone-legible column.
   Scoped to .passport-body--flow, which the page carries only when it is
   NOT previewing print. Skipped wholesale when printing.
   ═══════════════════════════════════════════════════════════════════════ */

@media screen {
  .passport-body--flow .passport {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
  }

  .passport-body--flow .passport-face {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .passport-body--flow .passport-face::before,
  .passport-body--flow .passport-face::after {
    display: none;
  }

  .passport-body--flow .passport-masthead {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--passport-rule);
  }

  .passport-body--flow .passport-wordmark {
    width: min(15rem, 62vw);
  }

  .passport-body--flow .passport-marks {
    width: min(7rem, 30vw);
    margin-top: 0.85rem;
  }

  .passport-body--flow .passport-marks--small {
    width: min(5.5rem, 24vw);
    margin: 2.5rem auto 0;
  }

  .passport-body--flow .passport-eyebrow {
    margin-top: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }

  .passport-body--flow .passport-hero {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 0.75rem;
    padding: 0.375rem;
    background: #fff;
    border: 1px solid var(--passport-rule);
  }

  .passport-body--flow .passport-hero img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  .passport-body--flow .passport-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .passport-body--flow .passport-gallery img {
    width: calc((100% - 1.5rem) / 4);
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--passport-rule);
    background: #fff;
  }

  .passport-body--flow .passport-title {
    margin: 2rem 0 0.75rem;
    font-weight: 500;
    font-size: 2rem;
  }

  .passport-body--flow .passport-badge {
    margin: 0 0 2.25rem;
  }

  .passport-body--flow .passport-badge-label {
    padding: 0.35rem 1.1rem;
    border-width: 1px;
    font-size: 0.72rem;
  }

  .passport-body--flow .passport-badge-ref {
    margin-top: 0.5rem;
    font-size: 0.8rem;
  }

  .passport-body--flow .passport-story {
    margin: 0 0 2rem;
  }

  .passport-body--flow .passport-story p {
    margin: 0 0 0.75rem;
    font-size: 1rem;
  }

  .passport-body--flow .passport-band {
    margin: 0 0 2.5rem;
    padding: 1.75rem 1.5rem;
  }

  .passport-body--flow .passport-band p {
    font-weight: 500;
    font-size: 1.35rem;
  }

  .passport-body--flow .passport-specs {
    margin: 0 0 2.5rem;
  }

  .passport-body--flow .passport-specs h2 {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--passport-teal);
  }

  .passport-body--flow .passport-specs dl {
    margin: 1rem 0 0;
    border-top: 1px solid var(--passport-rule);
  }

  .passport-body--flow .passport-spec-row {
    gap: 1rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--passport-rule);
  }

  .passport-body--flow .passport-spec-row dt {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
  }

  .passport-body--flow .passport-spec-row dd {
    font-size: 0.95rem;
  }

  .passport-body--flow .passport-care {
    margin: 2.5rem 0 0;
    font-size: 1.05rem;
  }

  /* The flowing column draws its own rule as the footer's border-top. */
  .passport-body--flow .passport-rule {
    display: none;
  }

  .passport-body--flow .passport-foot {
    display: block;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--passport-rule);
    text-align: center;
  }

  .passport-body--flow .passport-qr {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1rem;
  }

  .passport-body--flow .passport-foot-meta {
    text-align: center;
    font-size: 0.8rem;
  }

  .passport-body--flow .passport-piece-no {
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
  }

  .passport-body--flow .passport-url {
    font-size: 0.8rem;
  }

  /* Photo-less (legacy) — title-led, still deliberate. */
  .passport-body--flow .passport--no-photo .passport-title {
    margin-top: 3rem;
    font-size: 2.4rem;
  }

  @media (min-width: 640px) {
    .passport-body--flow .passport {
      padding: 3.5rem 2rem 4rem;
    }

    .passport-body--flow .passport-title {
      font-size: 2.5rem;
    }

    .passport-body--flow .passport--no-photo .passport-title {
      font-size: 3rem;
    }

    .passport-body--flow .passport-band p {
      font-size: 1.5rem;
    }
  }

  /* The preview: sit the two A5 faces on a desk so the frame edge reads. */
  .passport-body--preview {
    background: #e8e4dc;
    padding: 28px 16px 56px;
  }

  .passport-body--preview .passport-face {
    margin-bottom: 26px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.16);
  }

  /* The card is the deliverable; the button that produced it is not part
     of it, so the chrome stays out of the preview too. */
  .passport-body--preview .passport-actions,
  .passport-body--preview .passport-store-link {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT — A5 portrait, duplex, no browser chrome.
   The card rules above are already in force here; this block only sets the
   sheet and removes what must never reach paper.
   ═══════════════════════════════════════════════════════════════════════ */

@page {
  size: A5 portrait;
  margin: 0;
}

@media print {
  html,
  body.passport-body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .passport-face {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }

  /* Duplex: the back is the second side of one card, not a third sheet.
     Nothing follows it, so it must not push a trailing blank page. */
  .passport-face:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* A printed certificate is a document, not a shopfront — and the
     Download control has already done its job by the time this renders. */
  .passport-actions,
  .passport-store-link,
  .passport-gallery {
    display: none !important;
  }
}