/* Site v11 (2026-11-10) · the gallery-wall language for the default gilt-frame look.
   The user picked "picture rail + silk cord" tabs and museum wall labels (Shop option 2) to go with the gilt frames.
   This file carries that language to every other place that still spoke "ticket" or "clothespin":
     product page title + price      -> museum wall label card (italic name, colourway, number, price)
     Locket / Theatre price rows      -> small wall label cards (no "Admit one" stub)
     Madame's Not cheap / Not fast    -> two gilt-edged labels hung from a picture rail on silk cords
     empty cart                       -> an empty gilt frame hung from the rail
     404                              -> an empty gilt frame hanging askew on one cord, the other cord snapped
     thanks page                      -> the show ticket stays (tickets live here only), hung from the rail on a silk cord
   Everything is scoped to :root[data-look="frame"], so ?look=hang still shows the older hanging-photo look. */

:root {
  --gl-rail: linear-gradient(180deg, #f5ecd6, #e2d2ab);
  --gl-hook: radial-gradient(circle at 35% 35%, #f6e8bf, #b4935a 72%);
  --gl-cord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1 24 L50 1 L99 24' fill='none' stroke='%23a8874f' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M1 24 L50 1 L99 24' fill='none' stroke='%23f2e2b4' stroke-width='.7' stroke-dasharray='2 2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --gl-edge: rgba(180, 147, 90, .5);
  --gl-hair: rgba(180, 147, 90, .3);
}
.only-frame { display: none; }
:root[data-look="frame"] .only-frame { display: inline; }
:root[data-look="frame"] .only-hang { display: none; }

/* ---------------- product page: museum wall label ---------------- */
:root[data-look="frame"] .pd-tix {
  -webkit-mask: none; mask: none; filter: none; border-radius: 0; padding: 6px;
  background: var(--card); border: 1px solid var(--gl-edge);
  box-shadow: 0 3px 9px rgba(74, 58, 46, .08);
}
:root[data-look="frame"] .pd-tix .tix-in { border: 1px solid var(--gl-hair); border-radius: 0; }
:root[data-look="frame"] .pd-tix .tix-top { padding: 22px 26px 16px; }
:root[data-look="frame"] .pd-tix .pd-title { font-style: italic; font-weight: 500; margin: 0 0 4px; }
:root[data-look="frame"] .pd-tix .pd-var { margin: 0; font-family: var(--fell); font-size: 14px; letter-spacing: .16em; color: var(--ink-soft); text-transform: uppercase; }
:root[data-look="frame"] .pd-tix .pd-var:empty { display: none; }
:root[data-look="frame"] .pd-tix .pd-ooak { display: none; }
:root[data-look="frame"] .pd-tix .tix-bot { height: auto; padding: 12px 26px 14px; border-top: 1px solid var(--gl-hair); }
:root[data-look="frame"] .pd-tix .admit { font-family: var(--fell); font-size: 12.5px; letter-spacing: .14em; color: var(--sage); text-transform: uppercase; white-space: normal; }
:root[data-look="frame"] .pd-tix .pd-price { font-size: 28px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  :root[data-look="frame"] .pd-tix .tix-top { padding: 18px 18px 12px; }
  :root[data-look="frame"] .pd-tix .tix-bot { padding: 10px 18px 12px; gap: 10px; }
  :root[data-look="frame"] .pd-tix .admit { font-size: 10.5px; letter-spacing: .1em; line-height: 1.35; }
  :root[data-look="frame"] .pd-tix .pd-price { font-size: 23px; }
}
:root[data-look="frame"] .pd .ooak-box { border: 1px solid var(--gl-hair); border-radius: 0; background: color-mix(in srgb, var(--card) 70%, transparent); }
.pd-var { display: none; }
:root[data-look="frame"] .pd-var { display: block; }

/* ---------------- Locket / Theatre: price rows and the DIY order row as small wall labels ---------------- */
:root[data-look="frame"] .tix-row {
  display: block; -webkit-mask: none; mask: none; filter: none; border-radius: 0; padding: 5px;
  background: var(--card); border: 1px solid var(--gl-edge); box-shadow: 0 2px 6px rgba(74, 58, 46, .07);
}
:root[data-look="frame"] .tix-row > .stub { display: none; }
:root[data-look="frame"] .tix-row > .main { border: 1px solid var(--gl-hair); border-radius: 0; padding: 11px 18px 10px; }
:root[data-look="frame"] .tix-row .ships { font-style: italic; }
:root[data-look="frame"] .tix-row .price { font-weight: 600; }

/* ---------------- Ask Madame Stardust: two labels hung from a picture rail on silk cords ---------------- */
:root[data-look="frame"] .truth-card.tix-card {
  -webkit-mask: none; mask: none; filter: none; display: block; position: relative; margin-top: 50px;
  background: var(--card); border: 1px solid #c4a56b; border-radius: 0; padding: 0;
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(180, 147, 90, .42), 0 8px 18px rgba(74, 58, 46, .08);
}
:root[data-look="frame"] .truth-card.tix-card > .stub { display: none; }
:root[data-look="frame"] .truth-card.tix-card > .tix-body { border: 0; border-radius: 0; padding: clamp(28px, 3.4vw, 42px); }
/* silk cord: an inverted V from the hook down to the card's shoulders */
:root[data-look="frame"] .truth-card.tix-card::before {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 100%; height: 41px; pointer-events: none;
  background: var(--gl-cord) center / 100% 100% no-repeat;
}
/* brass hook on the rail */
:root[data-look="frame"] .truth-card.tix-card::after {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -50px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--gl-hook); box-shadow: 0 1px 1px rgba(74, 58, 46, .3); pointer-events: none;
}
/* the picture rail: one segment per card, the two meet across the gap */
:root[data-look="frame"] .truth-card.tix-card > .tix-body::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: -47px; height: 5px; pointer-events: none;
  background: var(--gl-rail); border-top: 1px solid rgba(180, 147, 90, .5); border-bottom: 1px solid rgba(160, 128, 74, .7);
  box-shadow: 0 2px 2px rgba(74, 58, 46, .07);
}
:root[data-look="frame"] .truth-card.tix-card:first-child > .tix-body::before { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
:root[data-look="frame"] .truth-card.tix-card:last-child > .tix-body::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 22%); mask-image: linear-gradient(270deg, transparent, #000 22%); }
@media (max-width: 640px) {
  :root[data-look="frame"] .truth-card.tix-card > .tix-body::before { left: -12px; right: -12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
  :root[data-look="frame"] .truth-card.tix-card { margin-top: 46px; }
  :root[data-look="frame"] .truth-card.tix-card::before { height: 37px; left: 26%; right: 26%; }
  :root[data-look="frame"] .truth-card.tix-card::after { top: -46px; }
  :root[data-look="frame"] .truth-card.tix-card > .tix-body::before { top: -43px; }
}

/* ---------------- empty cart: an empty gilt frame hung from the rail ---------------- */
:root[data-look="frame"] .empty-line { width: 170px; height: 188px; margin: 4px auto 20px; }
:root[data-look="frame"] .empty-line::before {
  top: 6px; height: 5px; left: -40px; right: -40px;
  background: var(--gl-rail); border-top: 1px solid rgba(180, 147, 90, .5); border-bottom: 1px solid rgba(160, 128, 74, .7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
:root[data-look="frame"] .empty-line::after {
  content: ""; position: absolute; z-index: 3; left: 50%; top: 4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--gl-hook); box-shadow: 0 1px 1px rgba(74, 58, 46, .3);
}
:root[data-look="frame"] .empty-line i:nth-child(n + 2) { display: none; }
:root[data-look="frame"] .empty-line i:first-child {
  --r: -1deg; left: 50%; top: 46px; width: 106px; aspect-ratio: 484 / 620;
  background: url("../img/shop/frame-rect.webp") center / contain no-repeat;
  filter: saturate(.62) sepia(.12) brightness(1.05) drop-shadow(0 6px 10px rgba(74, 58, 46, .16));
  transform: translateX(-50%) rotate(var(--r)); transform-origin: 50% -36px;
  animation: gl-frame-sway 5.6s ease-in-out infinite alternate;
}
:root[data-look="frame"] .empty-line i:first-child::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 100%; height: 35px;
  background: var(--gl-cord) center / 100% 100% no-repeat;
}
:root[data-look="frame"] .empty-line i:first-child::after {
  content: ""; position: absolute; inset: 7.4% 9.6% 7.5% 9.6%;
  background: color-mix(in srgb, var(--card) 45%, transparent); box-shadow: inset 0 2px 7px rgba(74, 58, 46, .12);
}
@keyframes gl-frame-sway { from { transform: translateX(-50%) rotate(-1.4deg); } to { transform: translateX(-50%) rotate(1deg); } }

/* ---------------- thanks page: the show ticket hangs from the rail on a silk cord (no clothespin) ---------------- */
:root[data-look="frame"] .hang-tix { padding-top: 46px; background: var(--gl-cord) center 12px / 46% 42px no-repeat; }
:root[data-look="frame"] .hang-tix::before {
  top: 6px; height: 6px; left: -6%; right: -6%;
  background: var(--gl-rail); border-top: 1px solid rgba(180, 147, 90, .5); border-bottom: 1px solid rgba(160, 128, 74, .7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
:root[data-look="frame"] .hang-tix::after {
  top: 4px; width: 11px; height: 11px; aspect-ratio: auto; border-radius: 50%;
  background: var(--gl-hook); filter: none; box-shadow: 0 1px 1px rgba(74, 58, 46, .3);
}
:root[data-look="frame"] .hang-tix .ticket { transform-origin: 50% -36px; }

/* ---------------- 404: an empty gilt frame hanging askew, one cord snapped ---------------- */
.lost-frame { display: none; }
:root[data-look="frame"] .lost-line { display: none; }
:root[data-look="frame"] .lost-frame {
  display: block; position: relative; container-type: inline-size;
  width: min(330px, 76vw); aspect-ratio: 330 / 300; margin: 0 auto 20px;
}
/* the rail */
.lost-frame .lf-rail {
  position: absolute; left: 0; right: 0; top: 3cqw; height: 1.7cqw;
  background: var(--gl-rail); border-top: 1px solid rgba(180, 147, 90, .5); border-bottom: 1px solid rgba(160, 128, 74, .7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
/* two hooks */
.lost-frame .lf-hook { position: absolute; z-index: 3; top: 2.4cqw; width: 3cqw; aspect-ratio: 1; margin-left: -1.5cqw; border-radius: 50%; background: var(--gl-hook); box-shadow: 0 1px 1px rgba(74, 58, 46, .3); }
.lost-frame .lf-hook.l { left: 33cqw; }
.lost-frame .lf-hook.r { left: 67cqw; }
/* the cord that still holds (right hook to the frame's top-right corner) */
.lost-frame .lf-cord {
  position: absolute; left: 66.6cqw; top: 4cqw; width: 2px; height: 21cqw; transform-origin: 50% 0; transform: rotate(-2deg);
  background: linear-gradient(90deg, #a8874f 0 60%, #f2e2b4 60%);
}
/* the snapped cord: a short frayed end left dangling from the left hook */
.lost-frame .lf-snap {
  position: absolute; left: 31.6cqw; top: 4cqw; width: 5cqw; height: 10cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M10 0 C11 10 8 16 11 24 C12.5 28 10 31 12 34' fill='none' stroke='%23a8874f' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M12 34 l-2 4 M12 34 l1.5 4.5 M12 34 l3 3' stroke='%23a8874f' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 0; animation: lf-dangle 4.8s ease-in-out 2s infinite alternate;
}
/* the empty frame, pivoting on its top-right corner */
.lost-frame .lf-frame {
  position: absolute; left: 25cqw; top: 23cqw; width: 44cqw; aspect-ratio: 484 / 620;
  background: url("../img/shop/frame-rect.webp") center / contain no-repeat;
  filter: saturate(.62) sepia(.12) brightness(1.05) drop-shadow(0 8px 12px rgba(74, 58, 46, .18));
  transform-origin: 95% 4%; transform: rotate(-15deg);
  animation: lf-slip 1.4s cubic-bezier(.5, 0, .6, 1.25) .6s both;
}
.lost-frame .lf-frame::after {
  content: ""; position: absolute; inset: 7.4% 9.6% 7.5% 9.6%;
  background: color-mix(in srgb, var(--card) 45%, transparent); box-shadow: inset 0 2px 8px rgba(74, 58, 46, .12);
}
/* the other frayed end, still tied to the frame's top-left corner */
.lost-frame .lf-frame::before {
  content: ""; position: absolute; z-index: 1; left: 6%; top: -9%; width: 11%; height: 12%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 24 C9 17 12 13 10 7 C9.5 5 10.5 3 9 1' fill='none' stroke='%23a8874f' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M9 2 l-2 -2 M9 2 l1.8 -2 M9 2 l-3 0' stroke='%23a8874f' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes lf-slip {
  0%   { transform: rotate(0deg); }
  62%  { transform: rotate(-17.5deg); }
  80%  { transform: rotate(-13.5deg); }
  100% { transform: rotate(-15deg); }
}
@keyframes lf-dangle { from { transform: rotate(-6deg); } to { transform: rotate(5deg); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-look="frame"] .empty-line i:first-child, .lost-frame .lf-frame, .lost-frame .lf-snap { animation: none; }
}