/* =====================================================================
   Free tarot reading page - styles for THIS page only.
   The header, side menu, cart and footer styles live in site.css
   (shared by all pages, loaded before this file).
   All classes of this page are prefixed tr-
   ===================================================================== */
.tr {
  --ratio: 7 / 10;               /* card shape: change if your card images are a different proportion */
  --gold: #d9b46a;
  --text: #e8dfd0;
  --muted: #b3a5be;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 96px;
  color: var(--text);
  font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}
.tr, .tr * { box-sizing: border-box; }
.tr [hidden] { display: none !important; }

.tr-hero { text-align: center; padding: 6px 0; }
.tr-lead { max-width: 660px; margin: 8px auto 0; color: #cdbfd6; line-height: 1.6; font-size: 1.05rem; }

/* ---- the table ---- */
.tr-table {
  position: relative;
  margin: 18px 0;
  padding: 22px 14px 28px;
  border: 1px solid rgba(217, 180, 106, .35);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 116, 43, .22), transparent 60%),
    linear-gradient(#120a1a, #0a0610);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 10px 40px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.tr-table::before {
  content: "";
  position: absolute; left: 50%; top: -90px;
  width: 540px; max-width: 120%; height: 270px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 170, 70, .28), transparent);
  animation: trFlicker 4s infinite ease-in-out;
  pointer-events: none;
}
@keyframes trFlicker {
  0%, 100% { opacity: .9; } 20% { opacity: .6; } 35% { opacity: 1; } 55% { opacity: .7; } 75% { opacity: .95; }
}
.tr-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tr-table > *:not(canvas) { position: relative; z-index: 1; }

/* ---- spread tabs ---- */
.tr-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tr-tab {
  display: flex; flex-direction: column; align-items: center;
  min-width: 150px; padding: 9px 16px;
  font: inherit; font-size: 1rem; letter-spacing: .04em;
  color: var(--gold); background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 180, 106, .5); border-radius: 8px; cursor: pointer;
  transition: background .2s, color .2s;
}
.tr-tab small { font-size: .75rem; opacity: .8; letter-spacing: .08em; text-transform: uppercase; }
.tr-tab:hover { background: rgba(217, 180, 106, .15); }
.tr-tab[aria-selected="true"] { background: linear-gradient(#e6c47c, #b88a3c); color: #1a0f08; border-color: #e6c47c; }

.tr-options { text-align: center; margin-top: 12px; }
.tr-toggle { color: var(--muted); font-size: .92rem; cursor: pointer; }
.tr-toggle input { margin-right: 6px; accent-color: #b88a3c; }
.tr-hint { text-align: center; margin: 14px auto 0; min-height: 1.5em; color: #cdbfd6; font-style: italic; max-width: 640px; }

/* ---- slots ---- */
.tr-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 22px 0 10px; --sw: clamp(92px, 24vw, 190px); }
.tr-slots.n1 { --sw: clamp(120px, 40vw, 230px); }
.tr-slots.n5 { --sw: clamp(78px, 17vw, 150px); gap: 12px; }
.tr-slot { width: var(--sw); text-align: center; }
.tr-slot-el { display: block; height: 52px; width: auto; max-width: 100%; margin: 0 auto 4px; object-fit: contain; opacity: .9; }
.tr-slot-label { font-variant: small-caps; letter-spacing: .14em; color: var(--gold); margin-bottom: 6px; font-size: .98rem; }
.tr-slot-card { position: relative; width: 100%; aspect-ratio: var(--ratio); perspective: 1000px; border-radius: 8px; transition: box-shadow .8s; }
.tr-slot-card.empty { border: 1px dashed rgba(217, 180, 106, .45); background: rgba(255, 255, 255, .03); }
.tr-slot-card.revealed { box-shadow: 0 0 28px rgba(217, 180, 106, .45); }
.tr-slot-name { margin-top: 8px; font-size: .88rem; color: var(--muted); min-height: 1.3em; }

.tr-3d { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.tr-3d.flipped { transform: rotateY(180deg); }
.tr-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; overflow: hidden; background: #0b0710; }
.tr-front { transform: rotateY(180deg); }
.tr-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tr-front.is-rev img { transform: rotate(180deg); }

/* ---- buttons ---- */
.tr-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 14px 0 4px; }
.tr-btn {
  font: inherit; font-size: 1rem; letter-spacing: .05em;
  padding: 11px 26px; cursor: pointer; border-radius: 8px;
  color: #1a0f08; background: linear-gradient(#e6c47c, #b88a3c);
  border: 1px solid #e6c47c; box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  transition: filter .2s, transform .15s;
}
.tr-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tr-btn.alt { color: var(--gold); background: transparent; border-color: rgba(217, 180, 106, .5); }

/* ---- the deck fan ---- */
.tr-fan {
  --w: clamp(50px, 7.2vw, 84px);
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 14px;
  padding: 20px 10px 6px;
}
.tr-fc {
  position: relative; flex: 0 0 auto;
  width: var(--w); aspect-ratio: var(--ratio);
  margin: 0 calc(var(--w) * -.27);
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px;
  transition: transform .2s;
}
.tr-fc img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; background: #0b0710; box-shadow: 0 4px 10px rgba(0, 0, 0, .75); }
.tr-fc:hover, .tr-fc:focus-visible { transform: translateY(-14px); z-index: 5; outline: none; }
.tr-fc:focus-visible img { box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0, 0, 0, .8); }
.tr-fan.shuffling .tr-fc { pointer-events: none; }   /* no clicking while the cards are being shuffled */
@keyframes trShuf { 40% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

/* screens under 800px: cards sit apart (5 per row) so a finger can hit one */
@media (max-width: 799px) {
  .tr-fan { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; max-width: 440px; margin: 0 auto; padding: 20px 10px 6px; }   /* last row is centered */
  .tr-fc { width: calc((100% - 40px) / 5); margin: 0; }
}

/* ---- reading ---- */
.tr-reading {
  margin: 26px 0; padding: 22px 18px;
  background: rgba(14, 8, 20, .88); border: 1px solid rgba(217, 180, 106, .35); border-radius: 14px;
}
.tr-reading h2 { text-align: center; margin: 0 0 20px; color: var(--gold); letter-spacing: .06em; font-weight: normal; font-size: 1.5rem; }
.tr-r { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(217, 180, 106, .2); }
.tr-r:first-of-type { border-top: 0; }
.tr-r-img { aspect-ratio: var(--ratio); border-radius: 8px; overflow: hidden; background: #0b0710; box-shadow: 0 0 18px rgba(217, 180, 106, .25); }
.tr-r-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tr-r-img.is-rev img { transform: rotate(180deg); }
.tr-r-body p { margin: 6px 0; line-height: 1.65; }
.tr-r-body h3 { margin: 2px 0; font-size: 1.35rem; font-weight: normal; color: #fff; }
.tr-r-body h3 em { font-size: .8rem; color: #d98b6a; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.tr-r-pos { font-variant: small-caps; letter-spacing: .14em; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.tr-r-pos img { height: 34px; width: auto; }
.tr-kw { color: var(--muted); font-size: .88rem; letter-spacing: .06em; }
.tr-intro { color: #cdbfd6; font-style: italic; }
.tr-sum { margin-top: 10px; padding: 16px 18px; border-left: 3px solid var(--gold); background: rgba(217, 180, 106, .07); border-radius: 0 8px 8px 0; }
.tr-sum h3 { margin: 0 0 6px; font-weight: normal; color: var(--gold); letter-spacing: .06em; }
.tr-sum p { margin: 0; line-height: 1.65; }
.tr-note { text-align: center; color: var(--muted); font-size: .85rem; margin: 18px 0 8px; }
.tr-r-actions { text-align: center; margin-top: 12px; }

/* ---- about text ---- */
.tr-about { max-width: 780px; margin: 30px auto 10px; color: #cdbfd6; line-height: 1.7; }
.tr-about h2 { color: var(--gold); font-weight: normal; letter-spacing: .05em; font-size: 1.3rem; }
.tr-about a { color: var(--gold); }

/* ---- permanent buy bar ---- */
.tr-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(10, 6, 16, .92), #0a0610);
  border-top: 1px solid rgba(217, 180, 106, .5);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .6);
}
.tr-buybar-label { color: var(--muted); font-size: .9rem; font-style: italic; margin-right: 4px; font-family: Georgia, serif; }
.tr-buy {
  display: inline-block; text-decoration: none; text-align: center;
  padding: 10px 20px; border-radius: 8px;
  font-family: Georgia, serif; font-size: .98rem; letter-spacing: .04em;
  color: #1a0f08; background: linear-gradient(#e6c47c, #b88a3c); border: 1px solid #e6c47c;
  transition: filter .2s;
}
.tr-buy:hover { filter: brightness(1.12); color: #1a0f08; }
.tr-buy.alt { color: var(--gold); background: transparent; border-color: rgba(217, 180, 106, .6); }
.tr-buy.alt:hover { color: #fff; }

@media (max-width: 640px) {
  .tr-r { grid-template-columns: 96px 1fr; gap: 14px; }
  .tr-tab { min-width: 0; flex: 1 1 140px; }
  .tr-buybar-label, .tr-buy.alt { display: none; }
  .tr-buy { flex: 1; padding: 11px 8px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-table::before { animation: none; }
  .tr-3d { transition-duration: .01s; }
  .tr-fan.shuffling .tr-fc { animation: none; }
}

/* ===== full-width dark page ===== */
html { background: #07040c; }
body.tr-page { margin: 0; background: #07040c; color: #e8dfd0; padding-bottom: 0; }
.tr-page .tr { padding-top: 26px; }

/* ===== cover header ===== */
.tr-cover { background: #000; width: 100%; overflow: hidden; border-bottom: 1px solid rgba(217, 180, 106, .35); }
.tr-cover-in {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch;
  min-height: 380px;
}
.tr-cover-text { align-self: center; padding: 44px 24px 44px 32px; position: relative; z-index: 2; margin-left: min(70px, 4.6vw); }
.tr-cover-text h1 {
  margin: 0;
  font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-size: clamp(2rem, 4.8vw, 3.6rem);
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.12;
  background: linear-gradient(180deg, #f3deaa 0%, #d9b46a 45%, #a8782f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.tr-rule { display: block; width: 120px; height: 1px; margin: 18px 0; background: linear-gradient(90deg, #d9b46a, transparent); }
.tr-sub {
  margin: 0 0 24px; max-width: 30em;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.4; color: #d8cbe0;
}
.tr-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; font-family: var(--font-main); font-size: .82rem; letter-spacing: .04em; }
.tr-crumbs li { color: #d9b46a; }
.tr-crumbs li + li::before { content: "/"; margin: 0 9px; color: rgba(217, 180, 106, .5); }
.tr-crumbs a { color: #a99bb5; text-decoration: none; }
.tr-crumbs a:hover { color: #d9b46a; }

.tr-cover-img { position: relative; background: #000; }
.tr-cover-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%);
          mask-image: linear-gradient(to right, transparent 0, #000 28%);
}

/* ===== about + gold buttons ===== */
.tr-about { max-width: 780px; margin: 30px auto 10px; padding: 0 6px; background: none; color: #cdbfd6; line-height: 1.7; text-align: center; }
.tr-about h2 { font-family: 'Cinzel', Georgia, serif; letter-spacing: .1em; }

.tr-own { text-align: center; margin: 34px auto 20px; max-width: 900px; }
.tr-own .tr-rule { margin: 0 auto 18px; background: linear-gradient(90deg, transparent, #d9b46a, transparent); width: 200px; }
.tr-own h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-size: 1.2rem; margin: 0 0 8px; }
.tr-own p { color: #cdbfd6; margin: 0 0 24px; line-height: 1.6; }


@media (max-width: 760px) {
  .tr-cover-in { grid-template-columns: 1fr; min-height: 0; }
  .tr-cover-img { order: -1; min-height: 240px; }
  .tr-cover-img img {
    object-position: center; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }
  .tr-cover-text { padding: 8px 20px 30px; text-align: left; }
}

/* ===== round 3 changes ===== */


/* title underline: width is set by a tiny script to match the title text exactly */
.tr-title .tr-rule { display: block; width: var(--tr-rule-w, 100%); max-width: 100%; height: 1px; margin: 16px 0 20px; background: linear-gradient(90deg, #d9b46a, rgba(217, 180, 106, .15)); }


/* Five Elements reading: goddess card and tarot card side by side, same size */
.tr-r.has-el { grid-template-columns: auto 1fr; }
.tr-r-imgs { display: flex; gap: 12px; }
.tr-r-imgs .tr-r-img { width: 150px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .tr-r.has-el { grid-template-columns: 1fr; }
  .tr-r-imgs .tr-r-img { width: min(140px, 42vw); }
}

/* cover image: centered in its half of the cover, short soft fade on the left edge only */
.tr-cover-img img {
  object-position: center center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%);
}
@media (max-width: 760px) {
  .tr-cover-img img { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
}

/* ===== full-width banner cover, title written over the image (like the home page hero) ===== */
.tr-cover { position: relative; display: flex; align-items: center; background: #000; }
.tr-cover-pic { position: absolute; inset: 0; display: block; }
.tr-cover-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* soft dark veil so the gold title stays readable on any picture; make it lighter/darker here */
.tr-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 72%); }
.tr-cover-in { position: relative; z-index: 2; display: block; width: 100%; max-width: 1280px; min-height: 0; margin: 0 auto; }
.tr-cover-text { max-width: 720px; padding: 44px 32px; }

/* ===== cover text scales with the banner, so it keeps the same share of the picture at every width ===== */
@media (min-width: 501px) {
  .tr-cover { min-height: 33vw; }                         /* same proportion as the 1200x396 image */
  .tr-cover-text { max-width: none; padding: clamp(16px, 3.4vw, 44px) clamp(16px, 2.1vw, 32px); }
  .tr-cover-text h1 { font-size: clamp(1rem, 3.8vw, 3.6rem); white-space: normal; }
  .tr-title .tr-rule { margin: clamp(8px, 1.1vw, 16px) 0 clamp(10px, 1.4vw, 20px); }
  .tr-sub { max-width: none; margin-bottom: clamp(10px, 1.6vw, 24px); font-size: clamp(.85rem, 1.9vw, 1.6rem); }
  .tr-crumbs ol { font-size: clamp(.62rem, 1vw, .82rem); }
}

/* =====================================================================
   Round 9, block A: everything scales down smoothly, nothing wraps into
   a different layout. Header, cover title, tabs and end buttons.
   ===================================================================== */



/* spread tabs: always one row, smaller as the screen gets smaller */
.tr-tabs { flex-wrap: nowrap; gap: clamp(5px, 1.4vw, 10px); }
.tr-tab { flex: 1 1 0; min-width: 0; max-width: 240px; padding: clamp(6px, 1.2vw, 9px) clamp(4px, 1.4vw, 16px); font-size: clamp(.62rem, 2.4vw, 1rem); line-height: 1.2; text-align: center; }
.tr-tab small { font-size: clamp(.5rem, 1.6vw, .75rem); }


/* =====================================================================
   Round 9, block B: table slots, reading section, compact text
   ===================================================================== */
.tr { overflow-x: clip; }

/* three drawn cards always stay in one row (Five Elements spread is untouched) */
.tr-slots.n3 { flex-wrap: nowrap; gap: clamp(8px, 2.4vw, 18px); }
.tr-slots.n3 .tr-slot { flex: 0 1 var(--sw); min-width: 0; }
.tr-slots.n3 .tr-slot-label { font-size: clamp(.75rem, 2.8vw, .98rem); letter-spacing: .08em; }
.tr-slots.n3 .tr-slot-name { font-size: clamp(.65rem, 2.4vw, .88rem); line-height: 1.25; }

/* reading: scaled headings, compact lines */
.tr-reading { padding: clamp(12px, 3vw, 22px) clamp(10px, 3vw, 18px); }
.tr-reading h2 { font-size: clamp(1.05rem, 4.2vw, 1.5rem); line-height: 1.25; margin-bottom: clamp(8px, 2vw, 20px); }
.tr-r { align-items: start; grid-template-columns: 150px minmax(0, 1fr); padding: clamp(10px, 2.4vw, 18px) 0; }
.tr-r.has-el { grid-template-columns: auto minmax(0, 1fr); }
.tr-r-body { min-width: 0; overflow-wrap: break-word; }
.tr-r-body p { line-height: 1.45; margin: 3px 0; }
.tr-r-body h3 { font-size: clamp(1.05rem, 3.8vw, 1.35rem); line-height: 1.2; margin: 1px 0; }
.tr-sum p { line-height: 1.5; }
.tr-about, .tr-own p, .tr-hint { line-height: 1.5; }

/* the card box keeps its own 7:10 shape (it used to stretch to the text height) */
.tr-r-imgs { display: flex; align-items: flex-start; gap: 12px; max-width: 100%; }
.tr-r-imgs .tr-r-img { width: auto; flex: 0 1 150px; min-width: 0; }

@media (max-width: 640px) {
  .tr-r { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  /* Five Elements: pair of cards, then centered text underneath */
  .tr-r.has-el { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px; }
  .tr-r.has-el .tr-r-imgs { width: 100%; max-width: 300px; justify-content: center; }
  .tr-r-imgs .tr-r-img { flex-basis: 140px; }
  .tr-r.has-el .tr-r-pos { justify-content: center; }
}
/* very narrow: single card goes above its text, centered */
@media (max-width: 350px) {
  .tr-r { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px; }
  .tr-r > .tr-r-img { width: 120px; }
  .tr-r .tr-r-pos { justify-content: center; }
}

/* Five Elements on the table: five in a row when there is room, otherwise 3 on top and 2 below, centered */
@media (max-width: 799px) {
  .tr-slots.n5 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px clamp(6px, 2vw, 12px); max-width: 480px; margin-left: auto; margin-right: auto; }
  .tr-slots.n5 .tr-slot { width: auto; min-width: 0; grid-column: span 2; }
  .tr-slots.n5 .tr-slot:nth-child(4) { grid-column: 2 / span 2; }
  .tr-slots.n5 .tr-slot:nth-child(5) { grid-column: 4 / span 2; }
  .tr-slots.n5 .tr-slot-el { height: clamp(34px, 10vw, 52px); }
  .tr-slots.n5 .tr-slot-label { font-size: clamp(.72rem, 3vw, .98rem); letter-spacing: .08em; }
  .tr-slots.n5 .tr-slot-name { font-size: clamp(.62rem, 2.4vw, .88rem); line-height: 1.25; }
}

/* =====================================================================
   GOLD BUTTONS ("Own the cards") - every rule for them lives HERE, once.
   Change the numbers in the first block to resize them; they still shrink
   on small screens (the numbers are the maximum size).
   ===================================================================== */
.tr-own {
  --btn-w: 250px;        /* width of each big gold button */
  --btn-h: 62px;         /* minimum height of each big gold button */
  --btn-pad-y: 10px;     /* padding inside the gold button: top and bottom */
  --btn-pad-x: 14px;     /* padding inside the gold button: left and right */
  --btn-radius: 15px;    /* rounded corners */
  --btn-gap: 16px;       /* space between the two buttons */
}
.tr-own-btns { display: grid; grid-template-columns: repeat(2, minmax(0, var(--btn-w))); gap: clamp(8px, 2.4vw, var(--btn-gap)); justify-content: center; }
.tr-gold {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-width: 0; min-height: clamp(44px, 12vw, var(--btn-h));
  padding: clamp(6px, 1.6vw, var(--btn-pad-y)) clamp(6px, 1.6vw, var(--btn-pad-x));
  text-decoration: none; border-radius: var(--btn-radius);
  color: #1a0f08;
  background: linear-gradient(135deg, #f3deaa 0%, #d9b46a 38%, #b88a3c 62%, #e8cb86 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.tr-gold::before { content: ""; position: absolute; inset: clamp(2px, .6vw, 4px); border: 1px solid rgba(26, 15, 8, .45); border-radius: 2px; pointer-events: none; }
.tr-gold:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 10px 30px rgba(217, 180, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .5); color: #1a0f08; }
.tr-gold-main { font-family: 'Cinzel', Georgia, serif; font-weight: 900; font-size: clamp(.58rem, 2.5vw, .92rem); letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.2; }
.tr-gold-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(.62rem, 2.6vw, .98rem); text-align: center; line-height: 1.15; }
.tr-own-more { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(8px, 2.4vw, 14px); margin-top: 18px; margin-bottom: -80px; }
.tr-gold-line {
  display: inline-block; min-width: 0; padding: clamp(6px, 1.4vw, 9px) clamp(8px, 2.2vw, 24px); text-decoration: none; border-radius: 3px;
  font-family: 'Cinzel', Georgia, serif; font-size: clamp(.56rem, 2.2vw, .85rem); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--gold); border: 1px solid rgba(217, 180, 106, .6); transition: background .2s, color .2s;
}
.tr-gold-line:hover { background: rgba(217, 180, 106, .15); color: #f3deaa; }

/* =====================================================================
   COVER ON THE PHONE IMAGE (screens up to 500px wide).
   Independent of the desktop cover: a small block in the bottom-left
   corner of the image, everything sized in vw so it scales with the image.
   ===================================================================== */
@media (max-width: 500px) {
  .tr-cover { align-items: flex-end; justify-content: flex-start; min-height: 96vw; }   /* 96vw = height of the 521x500 image */
  .tr-cover::after { background: radial-gradient(ellipse 95% 70% at 0% 100%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%); }
  .tr-cover-in { width: auto; max-width: 100%; margin: 0; }
  .tr-cover-text { box-sizing: border-box; margin: 0; max-width: none; padding: 0 0 3.6vw 4vw; }
  .tr-cover-text h1 { font-size: 6.4vw; letter-spacing: .1em; }
  .tr-title .tr-rule { margin: 2vw 0 2.2vw; }
  .tr-sub { font-size: 3.7vw; line-height: 1.25; margin: 0 0 2.4vw; white-space: nowrap; }
  .tr-crumbs ol { font-size: 2.8vw; }
  .tr-crumbs li + li::before { margin: 0 1.8vw; }
}

/* Left space before the cover title: 70px on big screens, shrinking with the screen (4.6vw).
   Written with a longer selector so no other rule can override it. Phone image (<=500px) has its own block above. */
@media (min-width: 501px) {
  .tr-cover .tr-cover-in .tr-cover-text { margin-left: min(70px, 4.6vw); }
}

/* the subtitle under the cover title always stays on one line */
.tr-sub { white-space: nowrap; }