/* The perfume card: 63 x 88 mm (5:7), credit-card finish.
   Every size is in cqw (card-width units), so one component serves the
   result, the Directory grid and the full view. Per-card colours come from
   the generative design (--f1, --f2, --tc-ink, --foil-a). */
.tc-wrap { display: block; container-type: inline-size; width: 100%; perspective: 1400px; }
.tcard {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 4.8cqw;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 1.8cqw 4.5cqw -1.8cqw rgba(70,50,20,.38), 0 .4cqw 1cqw rgba(0,0,0,.08);
}
.tcard.flipped { --flip: 180deg; }
.tc-face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; padding: 7cqw 7cqw 5cqw;
  background: linear-gradient(135deg, var(--f1, #fcf8ef) 0%, var(--f2, #efe5d0) 45%, var(--f1, #fcf8ef) 60%, var(--f2, #e8dcc2) 100%);
  color: var(--tc-ink, #2b261f); text-align: left; font-family: var(--sans); letter-spacing: 0;
}
.tc-back { transform: rotateY(180deg); }
/* Hide the side facing away explicitly (backface-visibility alone leaks through transformed children in WebKit). */
.tc-front, .tc-back { transition: visibility 0s linear .3s; }
.tc-back { visibility: hidden; }
.tcard.flipped .tc-front { visibility: hidden; }
.tcard.flipped .tc-back { visibility: visible; }
.tc-face::before { /* gold hairline frame */
  content: ""; position: absolute; inset: 3.2cqw; border: 1px solid rgba(168,135,79,.85); border-radius: 2.6cqw; pointer-events: none; z-index: 2;
}
.tc-face::after { /* brushed-metal grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(178deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px);
}
.tc-guil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.tc-guil path { fill: none; stroke: rgba(168,135,79,.24); stroke-width: .2; }
.tc-foil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 18%), rgba(255,255,255,.38), transparent 40%),
    linear-gradient(var(--foil-a, 120deg), transparent 26%, rgba(255,150,190,.07) 36%, rgba(255,220,120,.10) 43%, rgba(140,225,205,.07) 50%, rgba(150,170,255,.06) 57%, transparent 68%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, var(--mx, 40%) var(--my, 30%);
  transition: background-position .25s ease-out;
}
.tc-face > :not(.tc-guil):not(.tc-foil) { position: relative; z-index: 3; }

.emboss { color: var(--tc-ink, #2b261f); text-shadow: 0 .25cqw 0 rgba(255,255,255,.9), 0 -.16cqw 0 rgba(60,40,10,.3); }
.tc-top { display: flex; justify-content: space-between; align-items: center; }
.tc-chip { width: 11cqw; height: 8.5cqw; filter: drop-shadow(0 .3cqw .45cqw rgba(90,60,20,.28)); }
.tc-no { font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace; font-size: 4.4cqw; font-weight: 500; letter-spacing: .04em; }
.tc-kicker { margin: 3cqw 0 0; font-size: 2.5cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #a8874f; }
.tc-name { margin: 1.2cqw 0 0; font-size: 8.6cqw; font-weight: 600; line-height: 1.14; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; }
.tc-type { margin: 1.2cqw 0 0; font-size: 2.9cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a8874f; }
.tc-pyr { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 1.5cqw; }
.tc-tl { margin: 0; text-align: center; font-size: 2.1cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6e675c; }
.tc-tier ul { list-style: none; margin: .6cqw 0 0; padding: 0; display: flex; justify-content: center; gap: 2cqw; }
.tc-tier li { display: grid; justify-items: center; width: 19cqw; transform: translateY(calc(var(--dy, 0cqw) * .6)); }
.tc-tier li .illo { width: 11cqw; height: 11cqw; background: rgba(243,236,224,.95); border-radius: 50%; box-shadow: 0 0 0 .2cqw rgba(168,135,79,.45); }
.tc-in { font-size: 2.5cqw; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .7cqw; }
.tc-ip { font-size: 2.4cqw; line-height: 1.2; color: #6e675c; font-variant-numeric: tabular-nums; }
.tc-stats { display: grid; grid-template-columns: 18cqw 20cqw minmax(0, 1fr); border-top: .25cqw solid rgba(168,135,79,.5); padding-top: 2.2cqw; margin-top: 1cqw; }
.tc-stats .k { display: block; font-size: 2.1cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6e675c; white-space: nowrap; }
.tc-stat .v { display: block; font-size: 7cqw; font-weight: 300; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tc-spark { display: block; width: 100%; height: 5.6cqw; margin-top: .8cqw; }
.tc-dd .f { display: block; font-size: 2.1cqw; color: #6e675c; margin-top: .5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6cqw 2cqw; margin-top: 2.6cqw; font-size: 2.9cqw; align-items: baseline; }
.tc-by { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-date { color: #6e675c; font-size: 2.5cqw; }
.tc-foot { grid-column: 1 / -1; text-align: center; font-style: italic; font-size: 2.3cqw; color: #6e675c; }

/* back: the formula */
.tb-type { margin: 3cqw 0 0; font-size: 2.8cqw; font-weight: 600; color: #a8874f; letter-spacing: .02em; }
.tb-cols { margin: 2.4cqw 0 0; font-size: 2.2cqw; color: #6e675c; text-align: right; }
.tb-tier { margin-top: 2.2cqw; }
.tb-tier p { margin: 0; display: flex; justify-content: space-between; font-size: 3cqw; border-bottom: .25cqw solid rgba(168,135,79,.5); padding-bottom: .6cqw; }
.tb-tier ul { list-style: none; margin: 0; padding: 0; }
.tb-tier li { display: flex; justify-content: space-between; gap: 2cqw; font-size: 2.8cqw; padding: .7cqw 0; border-bottom: .15cqw solid rgba(168,135,79,.22); font-variant-numeric: tabular-nums; }
.tb-status { margin-top: auto; padding: 2.4cqw 2.8cqw; border: .25cqw solid rgba(61,107,69,.35); border-radius: 2cqw; background: rgba(238,244,239,.7); }
.tb-badge { font-size: 2.3cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3d6b45; }
.tb-status p { margin: .8cqw 0 0; font-size: 2.3cqw; line-height: 1.35; color: #4a4a4f; }

/* placements */
.card-wrap { margin: 14px auto 0; max-width: 360px; }
.card-wrap.full { max-width: min(440px, 100%); margin-top: 8px; }
.tc-flip-row { text-align: center; margin: 14px 0 0; }
.tc-link { display: block; text-decoration: none; color: inherit; border-radius: 4.8%; transition: transform .25s; }
.tc-link:hover { transform: translateY(-3px); }
.tc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .tcard { transform: none !important; transition: none; }
  .tc-back { transform: none; }
  .tc-front, .tc-back { transition: none; }
  .tc-foil { transition: none; }
  .tc-link, .tc-link:hover { transform: none; transition: none; }
}
.tc-badge { margin: 1.4cqw 0 0; }
.tc-badge span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.4cqw; font-weight: 600; padding: .5cqw 1.6cqw; border-radius: 99px; border: .18cqw solid rgba(168,135,79,.6); background: rgba(255,255,255,.55); vertical-align: top; }
.tc-badge.b-signature span { background: rgba(168,135,79,.22); color: #6f5428; }
/* the badge line takes room: keep the pyramid inside its band */
.tc-pyr { margin-top: 1cqw; justify-content: space-around; }
.tc-tier li .illo { width: 9.6cqw; height: 9.6cqw; }
.tc-tier ul { margin-top: .3cqw; }
.tc-in { font-size: 2.3cqw; margin-top: .4cqw; }
.tc-ip { font-size: 2.2cqw; }
.tc-tl { font-size: 2cqw; line-height: 1.2; }
.tc-tier li { transform: translateY(calc(var(--dy, 0cqw) * .35)); }