/* Site v5 (2026-11-09): "hang" look. Photos are prints pegged with a small wooden clothespin
   to a gold thread and sway gently (the user liked Shop direction A). Name and price stay on the
   show-ticket stubs (the user liked those). Switchable with the v4 gilt-frame look:
     ?look=hang | ?look=frame in the URL, remembered in localStorage ("ds-look"), default = hang.
   Every rule here only applies while <html data-look> is NOT "frame", so with this file loaded in
   the <head> the hang look paints first with no flash. Remove this file to go back to frames only.

   Structure used everywhere: the holder stays still and carries the thread (::before or ::after)
   and the clothespin; the print inside it swings around the pin.
     .gilt            holder | print = .gilt-in, > img, .lenti-win
     .gf-box          holder | print = .gf
     .gf (no box)     holder and print at once (theatre hero, Madame "vow" picture)
     .sh-card (shop)  holder | print = the link (photo print + ticket stub)
   v6 (2026-11-09): hang is the chosen template; no cherub illustrations anywhere (the cherub is the cursor only). */

:root {
  --hg-top: 34px;          /* room above a print for the pin and the thread */
  --hg-pin: 13px;          /* clothespin width (height is about 4.45x) */
  --hg-line: 24px;         /* where the thread crosses the pin, from the holder top */
  --hg-amp: 1.1deg;        /* sway amplitude */
  --hg-paper: #fffdf7;
  --hg-shadow: 0 1px 0 rgba(180, 147, 90, .25), 0 12px 24px -10px rgba(74, 58, 46, .3);
  /* a single print: thread dips to the pin (viewBox 100 x 20, centre at y 14) */
  --hg-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C25 8 40 13.5 50 14 C60 13.5 75 8 100 4' fill='none' stroke='%23a8874f' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 3.6 C25 7.6 40 13.1 50 13.6 C60 13.1 75 7.6 100 3.6' fill='none' stroke='%23ecd9a6' stroke-width='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* a row of prints: flatter segment so neighbours join into one gently scalloped line */
  --hg-thread-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C25 10.8 40 13.6 50 14 C60 13.6 75 10.8 100 10' fill='none' stroke='%23a8874f' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 9.6 C25 10.4 40 13.2 50 13.6 C60 13.2 75 10.4 100 9.6' fill='none' stroke='%23ecd9a6' stroke-width='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
:root:not([data-look="frame"]) body,
:root:not([data-look="frame"]) main { overflow-x: clip; }

@keyframes hg-sway {
  from { transform: rotate(calc(var(--hg-r, 0deg) - var(--hg-a, var(--hg-amp)))); }
  to   { transform: rotate(calc(var(--hg-r, 0deg) + var(--hg-a, var(--hg-amp)))); }
}
@keyframes hg-sway-hot {
  0%, 100% { transform: rotate(calc(var(--hg-r, 0deg) - 3deg)); }
  50%      { transform: rotate(calc(var(--hg-r, 0deg) + 3deg)); }
}

/* ---------- shared pieces: thread, pin, print ---------- */
:root:not([data-look="frame"]) .gilt::after,
:root:not([data-look="frame"]) .gf-box::before,
:root:not([data-look="frame"]) :not(.gf-box) > .gf::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -12%; right: -12%; top: calc(var(--hg-line) - 14px); height: 20px; bottom: auto;
  border: 0; border-image: none; filter: none;
  background: var(--hg-thread) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
:root:not([data-look="frame"]) .gilt::before,
:root:not([data-look="frame"]) .gf-box::after,
:root:not([data-look="frame"]) :not(.gf-box) > .gf::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: 0; width: var(--hg-pin); aspect-ratio: 45 / 200; transform: translateX(-50%);
  background: url("../img/hang/clothespin.webp") center / contain no-repeat;
  filter: saturate(.55) sepia(.25) brightness(1.04) drop-shadow(0 2px 2px rgba(74, 58, 46, .25));
}

/* ---------- 1. .gilt holders (heroes, version cards, booth, lenticular, thumbnails) ---------- */
:root:not([data-look="frame"]) .gilt { padding: var(--hg-top) 0 0; background: none; }
:root:not([data-look="frame"]) .gilt > .gilt-in,
:root:not([data-look="frame"]) .gilt > img,
:root:not([data-look="frame"]) .lenti-frame.gilt > .lenti-win {
  position: relative; z-index: 2; display: block;
  border: clamp(7px, .9vw, 11px) solid var(--hg-paper); border-radius: 2px;
  background-color: var(--hg-paper); box-shadow: var(--hg-shadow);
  transform-origin: 50% 0; animation: hg-sway 6.2s ease-in-out var(--hg-d, 0s) infinite alternate;
}
/* big pictures sway less */
:root:not([data-look="frame"]) .lh-art .gilt > img,
:root:not([data-look="frame"]) .mh-art .gilt > .gilt-in { --hg-a: .55deg; --hg-r: -.4deg; }
:root:not([data-look="frame"]) .vcard:nth-child(2) .gilt > .gilt-in { --hg-d: -2.4s; --hg-r: .4deg; }
/* the lenticular card is interactive: pegged still, a hair off level */
:root:not([data-look="frame"]) .lenti-frame.gilt > .lenti-win { animation: none; transform: rotate(-.5deg); border-width: clamp(9px, 1.2vw, 14px); }
:root:not([data-look="frame"]) .lenti-frame.gilt::after { left: -6%; right: -6%; }
/* version cards clip at their rounded corners: keep the thread inside */
:root:not([data-look="frame"]) .vcard .vimg.gilt::after { left: -4%; right: -4%; }

/* ---------- 2. shaped prints (.gf) in a box or on their own ---------- */
:root:not([data-look="frame"]) .gf-box { position: relative; padding-top: var(--hg-top); }
:root:not([data-look="frame"]) .gf,
:root:not([data-look="frame"]) .gf.oval,
:root:not([data-look="frame"]) .gf.arch,
:root:not([data-look="frame"]) .gf.rect { aspect-ratio: 4 / 5; }
:root:not([data-look="frame"]) .gf {
  background: linear-gradient(180deg, var(--hg-paper), #fbf4e6); border-radius: 2px; box-shadow: var(--hg-shadow);
  transform-origin: 50% 0; animation: hg-sway 6.2s ease-in-out var(--hg-d, 0s) infinite alternate;
}
:root:not([data-look="frame"]) .gf .gf-gilt { display: none; }
:root:not([data-look="frame"]) .gf .gf-photo,
:root:not([data-look="frame"]) .gf.oval .gf-photo,
:root:not([data-look="frame"]) .gf.arch .gf-photo,
:root:not([data-look="frame"]) .gf.rect .gf-photo { inset: 4.2% 5.2% 5.6% 5.2%; border-radius: 0; }
/* a lone print carries its own pin and thread, so leave room above it */
:root:not([data-look="frame"]) :not(.gf-box) > .gf { position: relative; margin-top: var(--hg-top); --hg-a: .6deg; }
:root:not([data-look="frame"]) :not(.gf-box) > .gf::before { top: calc(var(--hg-top) * -1); }
:root:not([data-look="frame"]) :not(.gf-box) > .gf::after { top: calc(var(--hg-line) - 14px - var(--hg-top)); }

/* Madame's six tiles: one gold line through each row */
:root:not([data-look="frame"]) .tile .gf-box { width: 84%; }
:root:not([data-look="frame"]) .tile .gf-box::before { background-image: var(--hg-thread-row); left: -14%; right: -14%; -webkit-mask-image: none; mask-image: none; }
:root:not([data-look="frame"]) .tiles .tile:nth-child(3n + 1) .gf-box::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
:root:not([data-look="frame"]) .tiles .tile:nth-child(3n) .gf-box::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 18%); mask-image: linear-gradient(270deg, transparent, #000 18%); }
:root:not([data-look="frame"]) .tile:hover .gf, :root:not([data-look="frame"]) .tile:focus-visible .gf { transform: none; }
:root:not([data-look="frame"]) .tile:nth-child(2) .gf { --hg-d: -1.7s; --hg-r: .5deg; }
:root:not([data-look="frame"]) .tile:nth-child(3) .gf { --hg-d: -3.9s; --hg-r: -.4deg; }
:root:not([data-look="frame"]) .tile:nth-child(4) .gf { --hg-d: -.9s;  --hg-r: .3deg; }
:root:not([data-look="frame"]) .tile:nth-child(5) .gf { --hg-d: -4.6s; --hg-r: -.6deg; }
:root:not([data-look="frame"]) .tile:nth-child(6) .gf { --hg-d: -2.8s; --hg-r: .5deg; }

/* product page: the main photo hangs, the thumbnails hang on their own short line */
:root:not([data-look="frame"]) .pd-main.gf-box { width: min(100%, 500px); }
:root:not([data-look="frame"]) .pd-main .gf { --hg-a: .5deg; }
:root:not([data-look="frame"]) .pd-thumbs { gap: 12px; margin-top: 22px; }
:root:not([data-look="frame"]) .pd-thumbs button.gilt { width: 62px; height: auto; padding: 22px 0 0; opacity: .78; overflow: visible; background: none; }
:root:not([data-look="frame"]) .pd-thumbs button.gilt.is-on { opacity: 1; transform: none; }
:root:not([data-look="frame"]) .pd-thumbs button.gilt > img { height: 74px; border-width: 4px; animation: none; transform: rotate(var(--hg-r, -1.5deg)); transition: transform .3s var(--ease); }
:root:not([data-look="frame"]) .pd-thumbs button.gilt:nth-child(2n) > img { --hg-r: 1.6deg; }
:root:not([data-look="frame"]) .pd-thumbs button.gilt:nth-child(3n) > img { --hg-r: -.6deg; }
:root:not([data-look="frame"]) .pd-thumbs button.gilt.is-on > img { box-shadow: 0 0 0 1.5px var(--gold), var(--hg-shadow); }
:root:not([data-look="frame"]) .pd-thumbs button.gilt::before { --hg-pin: 8px; }
:root:not([data-look="frame"]) .pd-thumbs button.gilt::after { --hg-line: 15px; left: -7px; right: -7px; background-image: var(--hg-thread-row); -webkit-mask-image: none; mask-image: none; }

/* cart: little prints, a pin each, no thread */
:root:not([data-look="frame"]) .cart-items .cart-thumb { padding: 12px 0 0; height: auto; overflow: visible; }
:root:not([data-look="frame"]) .cart-items .cart-thumb::after { display: none; }
:root:not([data-look="frame"]) .cart-items .cart-thumb::before { --hg-pin: 7px; }
:root:not([data-look="frame"]) .cart-items .cart-thumb > img { height: 78px; border-width: 4px; animation: none; transform: rotate(-2deg); }
:root:not([data-look="frame"]) .cart-items li:nth-child(2n) .cart-thumb > img { transform: rotate(1.8deg); }

/* ---------- 3. Shop grid ---------- */
:root:not([data-look="frame"]) .sh-card { position: relative; }
:root:not([data-look="frame"]) .sh-card::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -20px; right: -20px; top: calc(var(--hg-line) - 14px); height: 20px;
  background: var(--hg-thread-row) center / 100% 100% no-repeat;
}
:root:not([data-look="frame"]) .sh-card::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: 0; width: var(--hg-pin); aspect-ratio: 45 / 200; transform: translateX(-50%);
  background: url("../img/hang/clothespin.webp") center / contain no-repeat;
  filter: saturate(.55) sepia(.25) brightness(1.04) drop-shadow(0 2px 2px rgba(74, 58, 46, .25));
}
:root:not([data-look="frame"]) .sh-card a {
  position: relative; z-index: 2; padding-top: var(--hg-top);
  transform-origin: 50% var(--hg-line); animation: hg-sway 5.8s ease-in-out var(--hg-d, 0s) infinite alternate;
}
:root:not([data-look="frame"]) .sh-framebox { aspect-ratio: 4 / 5; width: 88%; }
:root:not([data-look="frame"]) .sh-frame,
:root:not([data-look="frame"]) .sh-oval,
:root:not([data-look="frame"]) .sh-arch,
:root:not([data-look="frame"]) .sh-rect { aspect-ratio: 4 / 5; }
:root:not([data-look="frame"]) .sh-frame {
  background: linear-gradient(180deg, var(--hg-paper), #fbf4e6); border-radius: 2px; box-shadow: var(--hg-shadow);
}
:root:not([data-look="frame"]) .sh-card a:hover .sh-frame { transform: none; }
:root:not([data-look="frame"]) .sh-gilt { display: none; }
:root:not([data-look="frame"]) .sh-oval .sh-photo,
:root:not([data-look="frame"]) .sh-arch .sh-photo,
:root:not([data-look="frame"]) .sh-rect .sh-photo { inset: 4.2% 5.2% 5.6% 5.2%; border-radius: 0; }
/* the ticket stub is tucked under the print, a little askew */
:root:not([data-look="frame"]) .sh-stubwrap { position: relative; z-index: 3; margin-top: -12px; max-width: 250px; transform: rotate(var(--hg-tk, -1.4deg)); }
:root:not([data-look="frame"]) .sh-card a:hover .sh-stubwrap { transform: rotate(var(--hg-tk, -1.4deg)); }
:root:not([data-look="frame"]) .sh-card:nth-child(2n) { --hg-tk: 1.2deg; }
:root:not([data-look="frame"]) .sh-card:nth-child(3n) { --hg-tk: -.6deg; }
/* each card swings a little out of step with its neighbours */
:root:not([data-look="frame"]) .sh-card:nth-child(4n + 2) { --hg-d: -1.9s; --hg-r: .5deg; }
:root:not([data-look="frame"]) .sh-card:nth-child(4n + 3) { --hg-d: -3.7s; --hg-r: -.4deg; }
:root:not([data-look="frame"]) .sh-card:nth-child(4n)     { --hg-d: -.8s;  --hg-r: .3deg; }
:root:not([data-look="frame"]) .sh-card:nth-child(5n)     { --hg-d: -4.6s; }
/* v6: no separate rule under the filters; the first gold thread of the grid is the divider */
:root:not([data-look="frame"]) .sh-rail { height: 0; background: none; margin: 30px auto 34px; }
:root:not([data-look="frame"]) .sh-rail::after { display: none; }

/* ---------- motion ---------- */
@media (hover: hover) and (pointer: fine) {
  :root:not([data-look="frame"]) .sh-card a:hover,
  :root:not([data-look="frame"]) .sh-card a:focus-visible,
  :root:not([data-look="frame"]) .tile:hover .gf,
  :root:not([data-look="frame"]) .tile:focus-visible .gf,
  :root:not([data-look="frame"]) .vcard:hover .gilt > .gilt-in { animation: hg-sway-hot 1.6s ease-in-out infinite; }
}

@media (max-width: 1100px) {
  :root:not([data-look="frame"]) .sh-card::before { left: -14px; right: -14px; }
}
@media (max-width: 700px) {
  :root {
    --hg-top: 29px; --hg-pin: 11px; --hg-line: 20px; --hg-amp: .7deg;
  }
  :root:not([data-look="frame"]) .gilt::after,
  :root:not([data-look="frame"]) .gf-box::before,
  :root:not([data-look="frame"]) :not(.gf-box) > .gf::after { left: -10px; right: -10px; }
  :root:not([data-look="frame"]) .sh-card::before { left: -8px; right: -8px; }
  :root:not([data-look="frame"]) .sh-framebox { width: 92%; }
  :root:not([data-look="frame"]) .sh-stubwrap { margin-top: -10px; }
  :root:not([data-look="frame"]) .sh-rail { margin: 18px auto 22px; }
  :root:not([data-look="frame"]) .tile .gf-box { width: 88%; }
  :root:not([data-look="frame"]) .tile .gf-box::before { left: -8%; right: -8%; }
  :root:not([data-look="frame"]) .tiles .tile:nth-child(odd) .gf-box::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
  :root:not([data-look="frame"]) .tiles .tile:nth-child(even) .gf-box::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 18%); mask-image: linear-gradient(270deg, transparent, #000 18%); }
  :root:not([data-look="frame"]) .pd-thumbs button.gilt { width: 52px; }
  :root:not([data-look="frame"]) .pd-thumbs button.gilt > img { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-look="frame"]) .gilt > .gilt-in,
  :root:not([data-look="frame"]) .gilt > img,
  :root:not([data-look="frame"]) .gf,
  :root:not([data-look="frame"]) .sh-card a { animation: none !important; transform: rotate(var(--hg-r, 0deg)); }
}


/* =====================================================================================
   v7 (2026-11-09): the user chose option 2: paper luggage tags + names written on the print.
   Show tickets now live ONLY on the thanks page ("the moment you get your ticket").
   Everywhere else in the hang look, ticket pieces turn into cream paper tags:
     .tix-row  (Locket / Theatre price rows, Locket DIY order row) -> a tag tied with a bit of twine
     .pd-tix   (product page)  -> plain title, number + colourway on the print, price on a pegged tag
     .tix-card (Madame's Not cheap / Not fast) -> two big paper tags pegged on one gold line
   The ticket markup stays in the HTML, so ?look=frame still shows tickets.
   ===================================================================================== */
:root { --tg-paper: linear-gradient(180deg, #fffdf6, #fbf3e3); --tg-edge: drop-shadow(0 0 .6px rgba(168, 135, 79, .9)) drop-shadow(0 3px 5px rgba(74, 58, 46, .12)); }
.gf-cap { display: none; }

/* ---------- a) price rows: a paper tag with an eyelet, tied with twine ---------- */
:root:not([data-look="frame"]) .tix-row {
  -webkit-mask: none; mask: none; background: none; padding: 0; border-radius: 0;
  display: flex; position: relative; margin-left: 18px; filter: var(--tg-edge);
  transform: rotate(var(--tg-r, -.6deg)); transform-origin: 0 50%;
}
:root:not([data-look="frame"]) .vcard:nth-child(2) .tix-row { --tg-r: .5deg; }
:root:not([data-look="frame"]) .tix-row::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: -20px; top: calc(50% - 14px); width: 42px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 28'%3E%3Cpath d='M41 14 C32 14 26 20 17 19 C8 18 4 10 10 6.5 C16 3 21 9 17 14' fill='none' stroke='%23a8874f' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root:not([data-look="frame"]) .tix-row > .stub { display: none; }
:root:not([data-look="frame"]) .tix-row > .main {
  position: relative; flex: 1; border: 0; border-radius: 0;
  padding: 14px 22px 14px 42px; background: var(--tg-paper);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  -webkit-mask: radial-gradient(circle 4.5px at 21px 50%, #0000 95%, #000); mask: radial-gradient(circle 4.5px at 21px 50%, #0000 95%, #000);
}
:root:not([data-look="frame"]) .tix-row > .main::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; border: 1.5px solid #d9c08a; box-sizing: border-box;
}
:root:not([data-look="frame"]) .tix-row .price { font-weight: 600; }
:root:not([data-look="frame"]) .order-row.tix-row { width: min(calc(100% - 18px), 560px); }

/* ---------- b) product page: title stays plain, the price hangs on a pegged tag ---------- */
:root:not([data-look="frame"]) .pd-tix { -webkit-mask: none; mask: none; background: none; padding: 0; border-radius: 0; filter: none; margin: 0 0 18px; }
:root:not([data-look="frame"]) .pd-tix .tix-in { border: 0; border-radius: 0; }
:root:not([data-look="frame"]) .pd-tix .tix-top { padding: 0; }
:root:not([data-look="frame"]) .pd-tix .pd-ooak { display: none; }
:root:not([data-look="frame"]) .pd-tix .tix-bot {
  position: relative; display: inline-block; height: auto; border: 0; padding: var(--hg-top) 40px 4px; margin: 6px 0 0 -40px;
  filter: var(--tg-edge);
}
:root:not([data-look="frame"]) .pd-tix .tix-bot::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 0; right: 0; top: calc(var(--hg-line) - 14px); height: 20px;
  background: var(--hg-thread) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
:root:not([data-look="frame"]) .pd-tix .tix-bot::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: 0; width: var(--hg-pin); aspect-ratio: 45 / 200; transform: translateX(-50%);
  background: url("../img/hang/clothespin.webp") center / contain no-repeat;
  filter: saturate(.55) sepia(.25) brightness(1.04);
}
:root:not([data-look="frame"]) .pd-tix .admit { display: none; }
:root:not([data-look="frame"]) .pd-tix .pd-price {
  position: relative; z-index: 2; display: block; margin: 0;
  padding: 17px 24px 11px 40px; background: var(--tg-paper);
  font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: .02em; color: var(--ink); font-variant-numeric: lining-nums;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  -webkit-mask: radial-gradient(circle 4px at 19px 50%, #0000 95%, #000); mask: radial-gradient(circle 4px at 19px 50%, #0000 95%, #000);
  transform-origin: 50% calc(var(--hg-line) - var(--hg-top)); --hg-a: .9deg; --hg-r: -1.5deg;
  animation: hg-sway 5.4s ease-in-out infinite alternate;
}
:root:not([data-look="frame"]) .pd-tix .pd-price::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; border: 1.5px solid #d9c08a; box-sizing: border-box;
}
/* the main print gets a lower margin with a written caption: number and colourway */
:root:not([data-look="frame"]) .pd-main.gf-box { aspect-ratio: auto; display: block; }
:root:not([data-look="frame"]) .pd-main.gf-box > .gf { height: auto; width: 100%; max-width: none; aspect-ratio: auto; padding: 4.2% 5.2% 0; }
:root:not([data-look="frame"]) .pd-main.gf-box .gf .gf-photo { position: relative; inset: auto; aspect-ratio: 4 / 5; }
:root:not([data-look="frame"]) .pd-main .gf-cap {
  display: block; margin: 0; padding: 14px 10px 18px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 23px; font-weight: 500; line-height: 1.2; color: var(--ink);
}
:root:not([data-look="frame"]) .pd-main .gf-cap small {
  display: block; margin-top: 6px; font-family: var(--fell); font-style: normal; font-size: 12px; letter-spacing: .16em; color: var(--sage); text-transform: uppercase;
}

/* ---------- c) Madame's two honest cards: big paper tags pegged on one gold line ---------- */
:root:not([data-look="frame"]) .truth { gap: clamp(22px, 3vw, 34px); }
:root:not([data-look="frame"]) .truth-card.tix-card {
  -webkit-mask: none; mask: none; background: none; border-radius: 0; display: block; position: relative;
  padding: var(--hg-top) 0 0; filter: drop-shadow(0 0 .6px rgba(168, 135, 79, .85)) drop-shadow(0 10px 14px rgba(74, 58, 46, .11));
}
:root:not([data-look="frame"]) .truth-card.tix-card::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -18px; right: -18px; top: calc(var(--hg-line) - 14px); height: 20px;
  background: var(--hg-thread-row) center / 100% 100% no-repeat;
}
:root:not([data-look="frame"]) .truth-card.tix-card:first-child::after { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); }
:root:not([data-look="frame"]) .truth-card.tix-card:last-child::after { -webkit-mask-image: linear-gradient(270deg, transparent, #000 16%); mask-image: linear-gradient(270deg, transparent, #000 16%); }
:root:not([data-look="frame"]) .truth-card.tix-card::before {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  left: 50%; top: 0; width: var(--hg-pin); aspect-ratio: 45 / 200; transform: translateX(-50%);
  background: url("../img/hang/clothespin.webp") center / contain no-repeat;
  filter: saturate(.55) sepia(.25) brightness(1.04);
}
:root:not([data-look="frame"]) .truth-card.tix-card > .stub { display: none; }
:root:not([data-look="frame"]) .truth-card.tix-card > .tix-body {
  position: relative; z-index: 2; height: 100%; border: 0; border-radius: 0; background: var(--tg-paper);
  padding: clamp(36px, 4vw, 48px) clamp(26px, 3.4vw, 40px) clamp(26px, 3.2vw, 34px);
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 24px);
  transform-origin: 50% 0; transform: rotate(var(--hg-r, -.5deg));
}
:root:not([data-look="frame"]) .truth-card.tix-card:nth-child(2) { --hg-r: .45deg; }

@media (max-width: 700px) {
  :root:not([data-look="frame"]) .tix-row > .main { padding: 12px 16px 12px 38px; }
  :root:not([data-look="frame"]) .pd-tix .pd-price { font-size: 25px; }
  :root:not([data-look="frame"]) .pd-main .gf-cap { font-size: 20px; padding: 11px 8px 14px; }
  :root:not([data-look="frame"]) .truth-card.tix-card:nth-child(n)::after { left: -10px; right: -10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-look="frame"]) .pd-tix .pd-price { animation: none !important; transform: rotate(-1.5deg); }
}