/* schema-apps shared styles — restyle every app by editing this one file.
   Each app sets its own --accent via window.APP.accent.

   Design direction: Linear / Stripe docs aesthetic — refined typography,
   layered depth, generous whitespace, tasteful glass effects, cohesive
   accent-driven palette. */
:root {
  --accent: #2d6cdf;
  --accent-2: color-mix(in oklab, var(--accent) 70%, #7c3aed);
  --ink: #0e1225;
  --ink-2: #1e2339;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: #e8e9ef;
  --line-2: #f1f2f6;
  --card: #ffffff;
  --surface: #f8f9fc;
  --radius: 22px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(14,18,37,.03);
  --shadow: 0 1px 3px rgba(14,18,37,.03), 0 6px 20px -4px rgba(14,18,37,.1), 0 12px 36px -8px rgba(14,18,37,.06);
  --shadow-hover: 0 2px 4px rgba(14,18,37,.04), 0 12px 32px -4px rgba(14,18,37,.12), 0 24px 56px -8px rgba(14,18,37,.08);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Fira Code", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font: 14.5px/1.7 var(--font);
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(ellipse 1200px 600px at 5% -10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 55%),
    radial-gradient(ellipse 900px 450px at 110% 8%, color-mix(in oklab, var(--accent-2) 7%, transparent), transparent 50%),
    #f4f5f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: 620px;
  margin: clamp(2.5rem, 10vh, 6rem) auto;
  padding: 0 1.25rem;
}

/* ── Global accent identity ── */
::selection {
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  color: var(--ink);
}

/* Custom scrollbar — accent-tinted thumb */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent) 30%, var(--line));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--accent) 50%, var(--muted));
}
/* Firefox */
* { scrollbar-color: color-mix(in oklab, var(--accent) 30%, var(--line)) transparent; scrollbar-width: thin; }

/* ── Card ── */
.card {
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--accent) 15%, var(--line));
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklab, var(--accent) 6%, transparent);
  overflow: hidden;
  animation: rise .55s cubic-bezier(.16,1,.3,1) both;
  transition: box-shadow .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; transition: none; }
  .card:hover { transform: none; }
}

/* ── Header band ── */
.hd {
  position: relative;
  padding: 2rem 2rem 1.65rem;
  color: #fff;
  background:
    linear-gradient(145deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 85%, var(--accent-2)) 50%, var(--accent-2) 100%);
  overflow: hidden;
}
/* Dot-grid texture overlay */
.hd::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 100% at 0% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 0% 0%, #000 20%, transparent 70%);
}
/* Sheen highlight */
.hd::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140% 140% at -10% -10%, rgba(255,255,255,.25), transparent 50%);
  pointer-events: none;
}
.hd .icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; border-radius: 12px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 2px 8px rgba(0,0,0,.12);
}
.hd .type {
  margin-top: .85rem;
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  font-weight: 700;
}
.hd .title {
  margin: .2rem 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.2);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* ── Body ── */
.bd {
  padding: 1.5rem 2rem 2rem;
  position: relative;
}
/* Subtle accent left-edge marker on the body */
.bd::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--accent), var(--accent-2));
  opacity: .2;
  border-radius: 0 2px 2px 0;
}
.rows { display: grid; gap: 0; }

.row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: .6rem;
  padding: .8rem .75rem;
  margin: 0 -.75rem;
  border-radius: var(--radius-sm);
  position: relative;
  transition: background .2s ease;
}
/* Dividers: subtle, indented, accent-tinted */
.row + .row::before {
  content: "";
  position: absolute;
  top: 0; left: .75rem; right: .75rem;
  height: 1px;
  background: linear-gradient(to right, var(--line-2), color-mix(in oklab, var(--accent) 12%, var(--line-2)) 50%, var(--line-2));
}
.row:first-child { padding-top: .25rem; }
.row:hover { background: color-mix(in oklab, var(--accent) 4%, var(--surface)); }

.row .k {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: .15rem;
  align-self: start;
  line-height: 1.35;
  position: relative;
}
/* Accent dot before each label */
.row .k::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
  margin-right: .4rem;
  vertical-align: middle;
}
.row .v {
  font-weight: 450;
  font-size: .92rem;
  color: var(--ink-2);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.65;
}
.row .v a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  transition: border-color .15s, color .15s;
}
.row .v a:hover {
  border-bottom-color: var(--accent);
  color: color-mix(in oklab, var(--accent) 80%, var(--ink));
}

/* ── Inline click-to-edit ── */
.row .v[data-prop]:not(.editing) {
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s ease;
}
.row .v[data-prop]:not(.editing):hover {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.row .v[data-prop]:not(.editing)::after {
  content: "\270E";
  font-size: .65em;
  opacity: 0;
  margin-left: .4rem;
  color: var(--muted);
  transition: opacity .15s;
  vertical-align: middle;
}
.row .v[data-prop]:not(.editing):hover::after {
  opacity: .5;
}
.row .v.editing {
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
  border-radius: 6px;
  padding: .15rem .25rem;
  margin: -.15rem -.25rem;
}
.inline-edit {
  font: inherit;
  color: var(--ink);
  width: 100%;
  padding: .25rem .4rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent);
  outline: none;
}
textarea.inline-edit {
  min-height: 3rem;
  resize: vertical;
}

/* ── Rich rendering ── */
/* ── Hero image banner ── */
#hero-mount {
  /* Container for hero/avatar, sits between header and .bd */
}

/* ── Avatar (Person/Organization) ── */
.avatar {
  position: relative;
  width: 92px; height: 92px;
  margin: -46px auto 0;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.03), 0 0 20px color-mix(in oklab, var(--accent) 10%, transparent);
  cursor: pointer;
  z-index: 1;
  transition: box-shadow .25s ease, transform .25s ease;
}
.avatar:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05), 0 0 28px color-mix(in oklab, var(--accent) 18%, transparent);
  transform: scale(1.04);
}
.avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-edit {
  width: 100%; height: 100%;
  font: .65rem/1 var(--font);
  color: var(--ink);
  padding: .3rem;
  border: none;
  background: var(--surface);
  text-align: center;
  outline: none;
}

.hero {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  cursor: pointer;
}
.hero::after {
  content: "\\270E";
  position: absolute;
  bottom: .6rem; right: .6rem;
  font-size: .8rem;
  color: #fff;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.hero:hover::after { opacity: 1; }
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-edit {
  width: 100%;
  height: 100%;
  font: inherit;
  color: var(--ink);
  padding: .6rem .75rem;
  border: none;
  background: var(--surface);
  outline: none;
}

.rich-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-top: .15rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.rich-date {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.rich-duration {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.rich-list {
  list-style: none;
  padding: 0;
  margin: .15rem 0 0;
}
.rich-list li {
  position: relative;
  padding: .25rem 0 .25rem 1.1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.rich-list li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .65rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .4;
}

/* ── Rating stars ── */
.rich-rating {
  color: #f59e0b;
  letter-spacing: .05em;
  font-size: 1.1em;
}
.rating-num {
  font-size: .7em;
  color: var(--muted);
  margin-left: .3rem;
  letter-spacing: 0;
}

/* ── Shared stat chips (Recipe, Organization, etc.) ── */
.stats-strip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 0 .35rem;
  margin-bottom: .5rem;
}
.stat-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: .45rem .85rem;
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 12%, var(--line));
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-2);
  line-height: 1.3;
}
.stat-chip small {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  opacity: .8;
}
.stats-sep {
  width: 1px;
  height: 24px;
  background: var(--line);
}
/* Shared step-list (Recipe legacy, HowTo) */
.step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.step-list li {
  position: relative;
  padding: .5rem 0 .5rem 2.2rem;
  line-height: 1.6;
  color: var(--ink-2);
  border-left: 2px solid color-mix(in oklab, var(--accent) 20%, var(--line));
  margin-left: .6rem;
}
.step-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -13px;
  top: .45rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ── Per-type bespoke: Recipe (stunning recipe-card) ── */
.card.recipe-card { overflow: hidden; }
.card.recipe-card .hd.hidden { display: none; }

/* Hero */
.recipe-hero {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  cursor: pointer;
}
.recipe-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.recipe-hero:hover .recipe-hero-img {
  transform: scale(1.05);
}
.recipe-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.15) 35%,
      rgba(0,0,0,.55) 70%,
      rgba(20,10,5,.85) 100%);
}
.recipe-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 2rem 1.75rem;
  color: #fff;
}
.recipe-badge {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 100px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.recipe-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.recipe-desc {
  margin: .5rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  opacity: .88;
  max-width: 540px;
}

/* Body */
.card.recipe-card .bd {
  padding: 1.5rem 2rem 2rem;
}
.card.recipe-card .bd::before { display: none; }

/* Stats strip */
.recipe-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: 1.5rem;
}
.recipe-stat {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--line));
  transition: transform .2s, box-shadow .2s;
}
.recipe-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 15%, transparent);
}
.recipe-stat-icon {
  font-size: 1.15rem;
  line-height: 1;
}
.recipe-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink-2);
}
.recipe-stat-text small {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  opacity: .85;
}

/* Section blocks */
.recipe-section {
  margin: 0 0 1.5rem;
}
.recipe-section:last-child {
  margin-bottom: 0;
}
.recipe-section-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid color-mix(in oklab, var(--accent) 15%, var(--line));
}

/* Ingredients checklist */
.recipe-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .15rem .8rem;
}
.recipe-check-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .35rem .35rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.recipe-check-item:hover {
  background: color-mix(in oklab, var(--accent) 4%, transparent);
}
.recipe-check-box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 2px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  border-radius: 6px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.recipe-check-item:hover .recipe-check-box {
  border-color: var(--accent);
}
.recipe-check-item.checked .recipe-check-box {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}
.recipe-check-item.checked .recipe-check-box::after {
  content: "\2713 ";
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.recipe-check-text {
  line-height: 1.5;
  color: var(--ink-2);
  transition: opacity .15s, text-decoration .15s;
}
.recipe-check-item.checked .recipe-check-text {
  opacity: .4;
  text-decoration: line-through;
}

/* Method steps */
.recipe-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: recipe-step;
}
.recipe-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .6rem 0;
}
.recipe-step-num {
  flex-shrink: 0;
  counter-increment: recipe-step;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 75%, #d97706));
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 30%, transparent);
}
.recipe-step-num::before {
  content: counter(recipe-step);
}
.recipe-step-text {
  line-height: 1.65;
  color: var(--ink-2);
  padding-top: .2rem;
}

/* Dark mode */
@media (max-width: 600px) {
  .recipe-hero { height: 260px; }
  .recipe-overlay { padding: 1rem 1.25rem 1.25rem; }
  .recipe-title { font-size: 1.5rem; }
  .recipe-desc { font-size: .82rem; }
  .recipe-checklist { grid-template-columns: 1fr; }
  .card.recipe-card .bd { padding: 1.25rem; }
}

/* ── Per-type bespoke: Review ── */
.rating-hero {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0 .75rem;
}
.rating-hero-stars {
  font-size: 1.6rem;
  color: #f59e0b;
  letter-spacing: .04em;
  line-height: 1;
}
.rating-hero-num {
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
}
.review-body {
  margin: .5rem 0 .75rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
}
.review-body p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-style: italic;
}
.review-byline {
  display: block;
  margin-top: .6rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  font-style: normal;
}

/* ── Per-type bespoke: Movie — Cinematic Layout ── */

/* Card-level override for cinematic */
.card.cinematic {
  background: #0d0d0f;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.5),
    0 32px 80px rgba(0,0,0,.3);
  overflow: hidden;
}
.card.cinematic .hd.hidden { display: none; }

/* Hero becomes full-bleed backdrop */
.card.cinematic .cinematic-hero {
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
}
.card.cinematic .cinematic-hero .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark scrim gradient — stronger at bottom for text legibility */
.cinematic-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(13,13,15,0) 0%,
      rgba(13,13,15,.15) 35%,
      rgba(13,13,15,.65) 65%,
      rgba(13,13,15,.95) 85%,
      rgba(13,13,15,1) 100%
    );
  pointer-events: none;
}

/* Overlay content pinned to bottom of hero */
.cinematic-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1.8rem 1.6rem;
  z-index: 2;
}
.cinematic-type-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.55);
  margin-bottom: .4rem;
  background: rgba(255,255,255,.08);
  padding: .2rem .6rem;
  border-radius: 3px;
}
.cinematic-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 .5rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.cinematic-meta {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .03em;
  margin-bottom: .5rem;
}

/* Rating — gold on dark */
.cinematic-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.cinematic-stars {
  font-size: 1.1rem;
  color: #fbbf24;
  letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(251,191,36,.3);
}
.cinematic-score {
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
}
.cinematic-score small {
  font-weight: 400;
  color: rgba(255,255,255,.4);
  margin-left: .1rem;
}

/* Body area — dark cinematic surface */
.card.cinematic .bd {
  background: #0d0d0f;
  color: rgba(255,255,255,.8);
  padding-top: .6rem;
}
.card.cinematic .bd::before {
  display: none; /* no accent stripe for cinematic */
}

/* Director credit row */
.cinematic-credit {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .6rem 0 .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: .6rem;
}
.credit-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
}
.credit-name {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}

/* Genre tags */
.cinematic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .6rem;
}
.cinematic-tag {
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.08);
  letter-spacing: .02em;
}

/* Synopsis text */
.cinematic-synopsis {
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  margin: .3rem 0;
}

/* Edit/JSON-LD disclosure in cinematic */
.card.cinematic details {
  border-color: rgba(255,255,255,.08);
}
.card.cinematic summary {
  color: rgba(255,255,255,.4);
}
.card.cinematic .row .k {
  color: rgba(255,255,255,.4);
}
.card.cinematic .row .v {
  color: rgba(255,255,255,.75);
}

/* Old film-chips (unused but keep safe) */
.film-chips .stat-chip {
  border-radius: 6px;
  font-size: .82rem;
}

/* ── Per-type bespoke: TVSeries (Netflix-style streaming page) ── */
.card.streaming-page {
  background: #0b0b0f;
  border-color: rgba(255,255,255,.06);
  overflow: hidden;
}
.card.streaming-page .hd.hidden { display: none; }

.streaming-hero {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  cursor: pointer;
}
.streaming-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.82);
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s;
}
.streaming-hero:hover .streaming-hero-img {
  transform: scale(1.04);
  filter: brightness(.9);
}
.streaming-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11,11,15,.1) 0%,
      rgba(11,11,15,.3) 30%,
      rgba(11,11,15,.7) 65%,
      rgba(11,11,15,.97) 100%),
    linear-gradient(90deg,
      rgba(11,11,15,.5) 0%,
      transparent 50%);
}
.streaming-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 2.5rem 2rem;
  color: #fff;
  max-width: 680px;
}
.streaming-badge {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: .75rem;
}
.streaming-title {
  margin: 0 0 .5rem;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.streaming-meta {
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.streaming-play-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.8rem;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #0b0b0f;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.streaming-play-btn:hover {
  background: rgba(255,255,255,.85);
  transform: scale(1.03);
}
.streaming-play-btn:active {
  transform: scale(.98);
}
.streaming-synopsis {
  margin: 1rem 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

/* Body */
.card.streaming-page .bd {
  background: #0b0b0f;
  padding: 1.5rem 2.5rem 2rem;
}
.card.streaming-page .bd::before { display: none; }
.card.streaming-page .row .k { color: rgba(255,255,255,.4); }
.card.streaming-page .row .v { color: rgba(255,255,255,.85); }
.card.streaming-page .row { border-bottom-color: rgba(255,255,255,.04); }

/* Director credit */
.streaming-credit {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.streaming-credit-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
}
.streaming-credit-name {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

/* Genre tags */
.streaming-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.streaming-tag {
  padding: .3rem .7rem;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}

/* Episode info bar */
.streaming-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}
.streaming-info-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .65rem 1.1rem;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
}
.streaming-info-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.streaming-info-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-top: .15rem;
}

@media (max-width: 600px) {
  .streaming-hero { height: 320px; }
  .streaming-overlay { padding: 1rem 1.25rem 1.25rem; max-width: 100%; }
  .streaming-title { font-size: 1.7rem; }
  .streaming-synopsis { font-size: .82rem; }
  .card.streaming-page .bd { padding: 1.25rem; }
  .streaming-info-bar { gap: .5rem; }
  .streaming-info-chip { padding: .5rem .8rem; }
  .streaming-info-num { font-size: 1.1rem; }
}

/* ── Per-type bespoke: MusicGroup (artist/band hero page) ── */
.card.artist-hero { overflow: hidden; }
.card.artist-hero .hd.hidden { display: none; }

.artist-banner {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.artist-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.75) saturate(1.1);
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s;
}
.artist-banner:hover .artist-banner-img {
  transform: scale(1.04);
  filter: brightness(.85) saturate(1.15);
}
.artist-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.3) 0%,
      rgba(0,0,0,.1) 25%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.92) 100%);
}
.artist-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 2.5rem 2rem;
  color: #fff;
}

/* Genre chips */
.artist-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
}
.artist-genre-chip {
  padding: .25rem .65rem;
  border-radius: 100px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.85);
}

/* Band name */
.artist-name {
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

/* Meta */
.artist-meta {
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  margin-top: .4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Listen button */
.artist-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  padding: .6rem 1.5rem;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 40%, transparent);
}
.artist-listen-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 24px color-mix(in oklab, var(--accent) 50%, transparent);
  opacity: .95;
}
.artist-listen-btn:active {
  transform: scale(1);
}

/* Body */
.card.artist-hero .bd {
  padding: 1.75rem 2.5rem 2.5rem;
}
.card.artist-hero .bd::before { display: none; }

/* Bio */
.artist-bio {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 620px;
}

@media (max-width: 600px) {
  .artist-banner { height: 300px; }
  .artist-overlay { padding: 1rem 1.25rem 1.25rem; }
  .artist-name { font-size: 2rem; }
  .artist-genre-chip { font-size: .58rem; padding: .2rem .5rem; }
  .card.artist-hero .bd { padding: 1.25rem 1.5rem 2rem; }
}

/* ── Per-type bespoke: Map (stylish wayfinding card) ── */
.card.wayfinding { overflow: hidden; }
.card.wayfinding .hd.hidden { display: none; }

.map-frame {
  padding: 1.75rem 1.75rem 0;
}

/* Cartographic frame */
.map-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid color-mix(in oklab, var(--accent) 20%, var(--line));
  box-shadow:
    0 4px 16px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}
.map-img-wrap:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  box-shadow:
    0 8px 28px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Location bar */
.map-loc-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem .25rem .75rem;
  flex-wrap: wrap;
}
.map-pin {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.map-loc-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.map-type-chip {
  margin-left: auto;
  padding: .3rem .7rem;
  border-radius: 100px;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--line));
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}

/* Body */
.card.wayfinding .bd {
  padding: .5rem 1.75rem 2rem;
}
.card.wayfinding .bd::before { display: none; }

/* Description */
.map-description {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1rem;
}

/* Updated meta */
.map-updated {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.map-updated-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
  color: var(--accent);
  opacity: .8;
}

/* CTA */
.map-cta-wrap {
  margin-top: .5rem;
}
.map-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.3rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 30%, transparent);
}
.map-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 40%, transparent);
  opacity: .95;
}
.map-cta:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .map-frame { padding: 1rem 1rem 0; }
  .map-loc-name { font-size: 1rem; }
  .map-type-chip { margin-left: 0; width: 100%; text-align: center; }
  .card.wayfinding .bd { padding: .5rem 1rem 1.5rem; }
}

/* ── Per-type bespoke: Brand (bold brand identity hero) ── */
.card.brand-hero {
  overflow: hidden;
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
}
.card.brand-hero .hd.hidden { display: none; }

.brand-block {
  position: relative;
  padding: 3.5rem 2.5rem 3rem;
  background:
    linear-gradient(135deg,
      var(--accent) 0%,
      color-mix(in oklab, var(--accent) 80%, #000) 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
/* Dot-grid texture */
.brand-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
/* Sheen */
.brand-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}

.brand-logo-wrap {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  cursor: pointer;
  margin-bottom: 1.25rem;
  transition: transform .3s;
}
.brand-logo-wrap:hover {
  transform: scale(1.05);
}
.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.brand-slogan {
  position: relative;
  z-index: 1;
  margin: .6rem 0 0;
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  opacity: .82;
  letter-spacing: .01em;
}

.brand-type-badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 1.25rem;
  padding: .3rem .7rem;
  border-radius: 4px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* Body */
.card.brand-hero .bd {
  padding: 1.75rem 2.5rem 2.5rem;
}
.card.brand-hero .bd::before { display: none; }

/* Brand story */
.brand-story {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 620px;
}

/* CTA */
.brand-cta-wrap {
  margin-top: 1.5rem;
}
.brand-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.5rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 30%, transparent);
}
.brand-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 40%, transparent);
  opacity: .95;
}
.brand-cta:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .brand-block { padding: 2.5rem 1.5rem 2rem; }
  .brand-name { font-size: 2.2rem; }
  .brand-slogan { font-size: .95rem; }
  .brand-logo-wrap { width: 72px; height: 72px; }
  .card.brand-hero .bd { padding: 1.25rem 1.5rem 2rem; }
}

/* ── Per-type bespoke: Photograph (fine-art gallery print) ── */
.card.gallery-print {
  background: #0e0e10;
  border-color: rgba(255,255,255,.05);
  overflow: hidden;
}
.card.gallery-print .hd.hidden { display: none; }

.gallery-stage {
  padding: 2.5rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The photo — presented reverently, large */
.gallery-photo-wrap {
  max-width: 720px;
  width: 100%;
  cursor: pointer;
  position: relative;
}
.gallery-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow:
    0 4px 24px rgba(0,0,0,.5),
    0 1px 4px rgba(0,0,0,.3);
  transition: box-shadow .4s;
}
.gallery-photo-wrap:hover .gallery-photo {
  box-shadow:
    0 8px 40px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.4);
}

/* Print label — museum wall card style */
.gallery-label {
  max-width: 520px;
  text-align: center;
  margin-top: 1.75rem;
  padding: 0 .5rem;
}
.gallery-label-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 400;
  color: rgba(255,255,255,.9);
  line-height: 1.3;
  letter-spacing: .005em;
}
.gallery-label-artist {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .88rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  margin-top: .35rem;
}
.gallery-label-meta {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  margin-top: .3rem;
  letter-spacing: .02em;
}

/* Body */
.card.gallery-print .bd {
  background: #0e0e10;
  padding: 1rem 2rem 2.5rem;
}
.card.gallery-print .bd::before { display: none; }

/* Wall text — the description as extended label */
.gallery-wall-text {
  max-width: 560px;
  margin: 0 auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  text-align: center;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: .5rem;
}

@media (max-width: 600px) {
  .gallery-stage { padding: 1.5rem 1rem 1rem; }
  .gallery-label-title { font-size: 1.1rem; }
  .gallery-label-artist { font-size: .8rem; }
  .gallery-wall-text { font-size: .82rem; }
  .card.gallery-print .bd { padding: 1rem 1.25rem 2rem; }
}

/* ── Per-type bespoke: Product — Apple Showcase ── */

.card.product-showcase {
  background: #fafafa;
  border-color: rgba(0,0,0,.06);
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06),
    0 24px 48px rgba(0,0,0,.03);
}
.card.product-showcase .hd.hidden { display: none; }

/* Clean product shot — generous padding, soft bg */
.card.product-showcase .product-shot {
  position: relative;
  height: 320px;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  background: #f2f2f7;
}
.product-shot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 2rem;
}

/* Body */
.card.product-showcase .bd {
  background: #fafafa;
  padding-top: .8rem;
}
.card.product-showcase .bd::before {
  display: none;
}

/* Product info */
.product-info {
  text-align: center;
  padding: .2rem 0;
}
.product-brand {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: .25rem;
}
.product-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 .4rem;
}
.product-tagline {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* Big price */
.product-price-hero {
  text-align: center;
  padding: .8rem 0 .5rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15rem;
}
.pp-symbol {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  align-self: flex-start;
  margin-top: .25rem;
}
.pp-amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.04em;
  line-height: 1;
}

/* Spec chips */
.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  padding: .4rem 0;
}
.product-spec-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 8px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}
.product-spec-chip small {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .1rem;
}
.product-spec-chip small + text {
  font-size: .82rem;
  color: var(--ink-2);
}

/* CTA button */
.product-cta {
  display: block;
  text-align: center;
  padding: .75rem 2rem;
  margin: .8rem auto .2rem;
  max-width: 260px;
  border-radius: 980px;
  background: var(--ink);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  transition: all .2s ease;
}
.product-cta:hover {
  opacity: .85;
  transform: scale(1.02);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .card.product-showcase { background: #1c1c1e; border-color: rgba(255,255,255,.06); }
  .card.product-showcase .product-shot { background: #2c2c2e; }
  .card.product-showcase .bd { background: #1c1c1e; }
  .product-brand { color: var(--muted-2); }
  .product-name { color: #fff; }
  .product-tagline { color: rgba(255,255,255,.5); }
  .pp-symbol, .pp-amount { color: #fff; }
  .product-spec-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
  .product-spec-chip small { color: rgba(255,255,255,.4); }
  .product-cta { background: #fff; color: #000; }
}

/* Old price-hero / spec-grid (kept for safety) */
.price-hero {
  padding: .6rem 0 .3rem;
  display: flex;
  align-items: baseline;
  gap: .1rem;
}
.price-symbol { font-size: 1.2rem; font-weight: 700; color: var(--accent); align-self: flex-start; margin-top: .15rem; }
.price-amount { font-size: 2.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .5rem 0; }
.spec-cell { display: flex; flex-direction: column; padding: .55rem .7rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2); }
.spec-cell small { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .15rem; }
.spec-cell span { font-size: .85rem; font-weight: 500; color: var(--ink-2); }

/* ── Per-type bespoke: Event — Concert Poster ── */

.card.event-poster {
  overflow: hidden;
  border-color: rgba(0,0,0,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 12px 40px rgba(0,0,0,.1),
    0 32px 72px rgba(0,0,0,.06);
}
.card.event-poster .hd.hidden { display: none; }

/* Poster hero — vibrant gradient */
.poster-hero {
  position: relative;
  min-height: 300px;
  padding: 2.5rem 1.6rem 2rem;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 60%, #0f0520) 0%,
    color-mix(in oklab, var(--accent) 40%, #1a0a30) 40%,
    color-mix(in oklab, var(--accent) 20%, #0d0d2b) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Decorative radial glow */
.poster-hero::before {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 25%, transparent) 0%, transparent 70%);
  top: -80px; right: -60px;
  pointer-events: none;
}
.poster-hero::after {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 15%, transparent) 0%, transparent 70%);
  bottom: -40px; left: -30px;
  pointer-events: none;
}

/* Date block */
.poster-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: .8rem;
  position: relative;
  z-index: 1;
}
.poster-month {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.poster-day {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -.04em;
  text-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.poster-year {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .15em;
  margin-top: .1rem;
}

/* Title */
.poster-title {
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
  position: relative;
  z-index: 1;
}

/* End date range */
.poster-range {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  margin-top: .3rem;
  position: relative;
  z-index: 1;
}

/* Body */
.card.event-poster .bd {
  background: #faf9fc;
  padding-top: .6rem;
}
.card.event-poster .bd::before { display: none; }

/* Meta rows */
.poster-meta {
  padding: .3rem 0;
}
.poster-meta-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .35rem 0;
  font-size: .85rem;
  color: var(--ink-2);
}
.poster-meta-icon {
  font-size: .9rem;
  line-height: 1.6;
  flex-shrink: 0;
}

/* Description */
.poster-desc {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--muted);
  padding: .3rem 0;
}

/* Get Tickets CTA */
.poster-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem;
  margin: .7rem 0 .2rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2, var(--accent)) 100%);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .2s ease;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 30%, transparent);
}
.poster-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px color-mix(in oklab, var(--accent) 40%, transparent);
}
.poster-cta-text { }
.poster-cta-arrow {
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.poster-cta:hover .poster-cta-arrow {
  transform: translateX(3px);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .card.event-poster { border-color: rgba(255,255,255,.06); }
  .card.event-poster .bd { background: #13111a; }
  .poster-meta-row { color: rgba(255,255,255,.6); }
  .poster-desc { color: rgba(255,255,255,.45); }
}

/* ── Per-type bespoke: MusicAlbum — Spotify Immersive ── */

.card.album-immersive {
  background: #121212;
  border-color: rgba(255,255,255,.04);
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.5),
    0 32px 80px rgba(0,0,0,.3);
  overflow: hidden;
}
.card.album-immersive .hd.hidden { display: none; }

/* Cover hero — square, with ambient gradient backdrop */
.card.album-immersive .album-cover-hero {
  position: relative;
  height: auto;
  aspect-ratio: 1;
  max-height: 360px;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  background: #1a1a2e;
}
.album-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(18,18,18,0) 60%,
    rgba(18,18,18,.5) 80%,
    rgba(18,18,18,1) 100%
  );
  pointer-events: none;
}

/* Body surface — dark */
.card.album-immersive .bd {
  background: #121212;
  color: rgba(255,255,255,.85);
  padding-top: 1rem;
}
.card.album-immersive .bd::before {
  display: none;
}

/* Album info block */
.album-info {
  padding: .5rem 0;
}
.album-type-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.45);
  margin-bottom: .3rem;
}
.album-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
}
.album-artist-line {
  font-size: .92rem;
  color: rgba(255,255,255,.65);
  font-weight: 400;
  margin-bottom: .3rem;
}
.album-artist-line strong {
  color: #fff;
  font-weight: 700;
}
.album-meta {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .02em;
}

/* Tracklist */
.tracklist-wrap {
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: .5rem;
}
.tracklist-header {
  display: grid;
  grid-template-columns: 2rem 1fr 3.5rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: .2rem;
  color: rgba(255,255,255,.35);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.tracklist {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}
.track-row {
  display: grid;
  grid-template-columns: 2rem 1fr 3.5rem;
  align-items: center;
  padding: .45rem 0;
  border-radius: 4px;
  transition: background .15s;
  cursor: default;
}
.track-row:hover {
  background: rgba(255,255,255,.05);
}
.track-num {
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.track-row:hover .track-num {
  color: rgba(255,255,255,.6);
}
.track-title {
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-dur {
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Edit/JSON-LD in immersive */
.card.album-immersive details {
  border-color: rgba(255,255,255,.08);
}
.card.album-immersive summary {
  color: rgba(255,255,255,.4);
}
.card.album-immersive .row .k {
  color: rgba(255,255,255,.4);
}
.card.album-immersive .row .v {
  color: rgba(255,255,255,.75);
}

/* Old album-artist (kept for safety) */
.album-artist {
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  padding: .3rem 0;
  font-weight: 400;
}
.album-artist strong {
  color: var(--ink-2);
  font-weight: 700;
}

/* ── Per-type bespoke: Person — Premium Portfolio ── */

.card.portfolio {
  overflow: visible;
}
.card.portfolio .hd.hidden { display: none; }

/* Banner area: gradient band + avatar + name + role */
.portfolio-banner {
  text-align: center;
  position: relative;
  padding-bottom: .8rem;
}
.portfolio-band {
  height: 100px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 18%, #f8f9fc) 0%,
    color-mix(in oklab, var(--accent) 8%, #eef0f6) 50%,
    #f0f2f8 100%
  );
  border-radius: 0;
  margin: 0;
}

/* Override avatar for portfolio — larger, centered over band */
.portfolio-avatar {
  position: relative;
  width: 110px; height: 110px;
  margin: -55px auto 0;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--card);
  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.04),
    0 0 32px color-mix(in oklab, var(--accent) 15%, transparent);
  z-index: 2;
  transition: box-shadow .3s ease, transform .3s ease;
}
.portfolio-avatar:hover {
  box-shadow:
    0 6px 20px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.06),
    0 0 40px color-mix(in oklab, var(--accent) 22%, transparent);
  transform: scale(1.04);
}

.portfolio-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.025em;
  margin: .7rem 0 .15rem;
  line-height: 1.15;
}
.portfolio-role {
  font-size: .88rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .01em;
}

/* Contact action row */
.portfolio-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  padding: .8rem 0;
  margin-bottom: .3rem;
}
.portfolio-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 500;
  border: 1px solid var(--line);
  transition: all .2s ease;
}
.portfolio-contact-btn:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 25%, var(--line));
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.contact-icon-emoji {
  font-size: .85rem;
}
.contact-btn-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bio */
.portfolio-bio {
  font-size: .9rem;
  line-height: 1.8;
  color: var(--muted);
  text-align: center;
  padding: .4rem 0;
  max-width: 480px;
  margin: 0 auto;
}

/* Dark mode for portfolio */
@media (prefers-color-scheme: dark) {
  .portfolio-band {
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 12%, #1a1d2e) 0%,
      color-mix(in oklab, var(--accent) 6%, #151828) 50%,
      #13162060 100%
    );
  }
  .portfolio-role { color: var(--accent); opacity: .85; }
  .portfolio-contact-btn { background: var(--surface); border-color: var(--line); }
  .portfolio-contact-btn:hover {
    background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  }
  .portfolio-bio { color: var(--muted-2); }
}

/* ── Per-type bespoke: Book — Book Jacket Hero ── */

.card.book-jacket {
  overflow: hidden;
  border-color: rgba(0,0,0,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.05),
    0 12px 40px rgba(0,0,0,.08),
    0 28px 64px rgba(0,0,0,.03);
}
.card.book-jacket .hd.hidden { display: none; }

/* Side-by-side layout: cover + info */
.book-layout {
  display: flex;
  gap: 1.6rem;
  padding: 1.6rem;
  align-items: flex-start;
}

/* 3D book cover */
.book-cover-wrap {
  flex-shrink: 0;
  position: relative;
  perspective: 600px;
}
.book-cover {
  width: 180px;
  border-radius: 4px 8px 8px 4px;
  overflow: hidden;
  box-shadow:
    6px 6px 16px rgba(0,0,0,.2),
    2px 2px 6px rgba(0,0,0,.1),
    1px 0 3px rgba(0,0,0,.08);
  transform: rotateY(-4deg);
  background: #e8e0d4;
}
.book-cover-img {
  width: 100%;
  display: block;
}
.book-spine {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 8px;
  background: linear-gradient(to right, #3a3024, #5a4a38);
  border-radius: 2px 0 0 2px;
  box-shadow: -2px 0 4px rgba(0,0,0,.15);
}

/* Info panel */
.book-info {
  flex: 1;
  min-width: 0;
  padding-top: .3rem;
}
.book-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 .3rem;
}
.book-by {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: .5rem;
}
.book-by strong {
  color: var(--ink-2);
  font-weight: 700;
}
.book-meta {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .01em;
  line-height: 1.6;
}

/* Synopsis section */
.book-synopsis {
  padding: .8rem 1.6rem 1.2rem;
}
.book-synopsis-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: .3rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .book-cover { background: #2a2420; }
  .book-spine { background: linear-gradient(to right, #1a1410, #2a2018); }
  .book-synopsis-label { color: rgba(255,255,255,.4); }
}

/* ── Shared prose body (Book, Article, Course) ── */
.prose-body {
  margin: .5rem 0;
  padding: 0 .1rem;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.75;
}
.prose-body p {
  margin: .5rem 0;
}

/* ── Per-type bespoke: Article — editorial magazine ── */

.card.magazine { overflow: hidden; }
.card.magazine .hd.hidden { display: none; }

.article-masthead {
  padding: 1.8rem 1.6rem 1rem;
  border-bottom: 1px solid var(--border);
}

.article-headline {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 0 0 .6rem;
  color: var(--ink);
}

.article-byline {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .5rem;
}
.article-author {
  color: var(--ink-2);
  font-weight: 600;
}
.article-pubdate {
  font-weight: 400;
}
.article-byline-sep {
  opacity: .4;
  margin: 0 .2rem;
}

.article-standfirst {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-2);
  font-style: italic;
  margin-top: .5rem;
}

/* Prose body */
.article-prose {
  padding: 1.2rem 1.6rem 1.4rem;
  max-width: 520px;
}
.article-prose p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 .8rem;
}
.article-prose p:last-child {
  margin-bottom: 0;
}

/* Drop cap on first paragraph */
.article-prose p.drop-cap::first-letter {
  float: left;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: .8;
  padding: .05rem .35rem 0 0;
  color: var(--accent);
}

/* Pull quote */
.article-pullquote {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
  quotes: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .article-masthead { border-color: rgba(255,255,255,.08); }
}

/* ── Per-type bespoke: JobPosting — LinkedIn/Greenhouse ── */

.card.job-board { overflow: hidden; }
.card.job-board .hd.hidden { display: none; }

/* Company header */
.job-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.2rem 1.5rem .6rem;
}
.job-company-avatar {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.job-header-info {
  min-width: 0;
}
.job-company-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
.job-posted {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .1rem;
}

/* Role title */
.job-role-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0;
  padding: 0 1.5rem;
  color: var(--ink);
}

/* Chips */
.job-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .6rem 1.5rem .3rem;
}
.job-chip {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  padding: .3rem .65rem;
  border-radius: 6px;
}
.job-chip-sep {
  color: var(--muted);
  font-size: .9rem;
  opacity: .5;
}

/* Job details */
.job-details {
  padding: .4rem 1.5rem .2rem;
}
.job-details-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: .3rem;
}

/* Apply CTA */
.job-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: calc(100% - 3rem);
  margin: .8rem 1.5rem .6rem;
  padding: .7rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  letter-spacing: .01em;
  transition: all .2s ease;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 30%, transparent);
}
.job-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px color-mix(in oklab, var(--accent) 40%, transparent);
}
.job-cta-arrow {
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.job-cta:hover .job-cta-arrow {
  transform: translateX(3px);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .job-company-avatar {
    background: color-mix(in oklab, var(--accent) 15%, rgba(255,255,255,.06));
  }
  .job-chip {
    background: color-mix(in oklab, var(--accent) 10%, rgba(255,255,255,.05));
  }
}

/* ── Per-type bespoke: HowTo — tutorial card ── */

.card.howto-card { overflow: hidden; }
.card.howto-card .hd.hidden { display: none; }

.howto-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0;
  padding: 1rem 1.5rem .2rem;
  color: var(--ink);
}

.howto-desc {
  font-size: .85rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  padding: .3rem 1.5rem .4rem;
}

/* Stats strip */
.howto-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .3rem 1.5rem .5rem;
}
.howto-stat-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 6px;
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  color: var(--ink-2);
}
.howto-tool-chip {
  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 12%, transparent);
}

/* Steps */
.howto-steps-section {
  padding: .4rem 1.5rem .6rem;
}
.howto-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: .4rem;
}

.step-list {
  list: none;
  margin: 0;
  padding: 0;
  counter-reset: step-counter;
}
.step-item {
  counter-increment: step-counter;
  position: relative;
  padding: .45rem 0 .45rem 2.2rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 6%, transparent);
}
.step-item:last-child { border-bottom: none; }
.step-item::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: .45rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .howto-stat-chip {
    background: color-mix(in oklab, var(--accent) 10%, rgba(255,255,255,.05));
  }
  .step-item {
    border-bottom-color: color-mix(in oklab, var(--accent) 8%, rgba(255,255,255,.04));
  }
  .step-item::before {
    background: color-mix(in oklab, var(--accent) 15%, rgba(255,255,255,.06));
  }
}

/* ── Per-type bespoke: Hotel — Booking.com card ── */

.card.hotel-card { overflow: hidden; }
.card.hotel-card .hd.hidden { display: none; }
.card.hotel-card #hero-mount { position: relative; }

.hotel-hero { width: 100%; height: 260px; object-fit: cover; display: block; }

.hotel-hero-scrim {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 0 1.5rem 1rem;
}
.hotel-hero-overlay { display: flex; flex-direction: column; gap: .25rem; }

.hotel-name {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.hotel-stars-badge {
  font-size: .78rem;
  color: #fbbf24;
  font-weight: 700;
}

/* Meta strip */
.hotel-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem 1.5rem .2rem;
}
.hotel-price-badge {
  font-size: .8rem;
  font-weight: 800;
  padding: .2rem .6rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}
.hotel-time-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 6px;
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  color: var(--ink-2);
}

.hotel-desc {
  font-size: .84rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
  padding: .3rem 1.5rem .4rem;
}

/* Contact */
.hotel-contact {
  padding: .2rem 1.5rem .3rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.hotel-contact-row {
  font-size: .78rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* CTA */
.hotel-cta {
  display: block;
  margin: .6rem 1.5rem 1rem;
  padding: .7rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter .15s, box-shadow .2s;
  box-shadow: 0 2px 12px color-mix(in oklab, var(--accent) 30%, transparent);
}
.hotel-cta:hover { filter: brightness(1.1); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .hotel-time-chip {
    background: color-mix(in oklab, var(--accent) 12%, rgba(255,255,255,.05));
  }
}

/* ── Per-type bespoke: LocalBusiness — Google Maps card ── */

.card.local-biz { overflow: hidden; }
.card.local-biz .hd.hidden { display: none; }

.biz-name {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  padding: .8rem 1.5rem .2rem;
  color: var(--ink-1);
  letter-spacing: -.02em;
}

.biz-hours-badge {
  font-size: .76rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 6px;
  background: color-mix(in oklab, #22c55e 10%, var(--surface));
  color: #16a34a;
  margin: 0 1.5rem .2rem;
  display: inline-block;
}

.biz-desc {
  font-size: .84rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0;
  padding: .3rem 1.5rem .5rem;
}

.biz-info {
  padding: .2rem 1.5rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.biz-chip {
  font-size: .78rem;
  font-weight: 800;
  padding: .2rem .55rem;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: inline-block;
  width: fit-content;
}
.biz-contact-row {
  font-size: .8rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.biz-cta {
  display: block;
  margin: .5rem 1.5rem 1rem;
  padding: .65rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter .15s, box-shadow .2s;
  box-shadow: 0 2px 12px color-mix(in oklab, var(--accent) 30%, transparent);
}
.biz-cta:hover { filter: brightness(1.1); }

@media (prefers-color-scheme: dark) {
  .biz-hours-badge {
    background: color-mix(in oklab, #22c55e 15%, rgba(255,255,255,.05));
  }
}

/* ── Per-type bespoke: PodcastSeries — Spotify card ── */

.card.podcast-card { overflow: hidden; }
.card.podcast-card .hd.hidden { display: none; }

.podcast-cover-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1.5rem .8rem;
}
.podcast-cover {
  width: 220px; height: 220px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}

.podcast-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  padding: 0 1.5rem .15rem;
  color: var(--ink-1);
  letter-spacing: -.02em;
  text-align: center;
}

.podcast-host {
  font-size: .82rem;
  color: var(--ink-2);
  text-align: center;
  padding: 0 1.5rem .3rem;
}
.podcast-host strong {
  color: var(--accent);
  font-weight: 700;
}

.podcast-genres {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .2rem 1.5rem .5rem;
}
.podcast-genre-chip {
  font-size: .7rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 20px;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  color: var(--accent);
}

.podcast-desc {
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.6;
  text-align: center;
  margin: 0;
  padding: .1rem 1.8rem .4rem;
}

.podcast-since {
  font-size: .72rem;
  color: var(--ink-3);
  text-align: center;
  padding: 0 1.5rem .4rem;
}

.podcast-cta {
  display: block;
  margin: .3rem 1.5rem 1rem;
  padding: .65rem;
  border-radius: 30px;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter .15s, box-shadow .2s;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent) 30%, transparent);
}
.podcast-cta:hover { filter: brightness(1.1); }

@media (prefers-color-scheme: dark) {
  .podcast-genre-chip {
    background: color-mix(in oklab, var(--accent) 14%, rgba(255,255,255,.06));
  }
}

/* ── Per-type bespoke: FAQPage — Accordion card ── */

.card.faq-card { overflow: hidden; }
.card.faq-card .hd.hidden { display: none; }

.faq-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  padding: .8rem 1.5rem .2rem;
  color: var(--ink-1);
  letter-spacing: -.02em;
}

.faq-desc {
  font-size: .84rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  padding: .2rem 1.5rem .6rem;
}

.faq-accordion {
  padding: 0 1.5rem .8rem;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid color-mix(in oklab, var(--ink-1) 8%, transparent);
}
.faq-item:last-child {
  border-bottom: 1px solid color-mix(in oklab, var(--ink-1) 8%, transparent);
}

.faq-question {
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink-1);
  padding: .7rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: color .15s;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::before {
  content: "+";
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  width: 1.2rem;
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] .faq-question::before {
  content: "\2212";
}
.faq-question:hover { color: var(--accent); }

.faq-answer {
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.65;
  padding: 0 0 .7rem 1.7rem;
}

@media (prefers-color-scheme: dark) {
  .faq-item {
    border-color: rgba(255,255,255,.06);
  }
}

/* ── Per-type bespoke: Course — Coursera/Udemy hero ── */

.card.course-hero { overflow: hidden; }
.card.course-hero .hd.hidden { display: none; }

/* Banner */
.course-banner {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}
.course-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.course-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--accent) 50%, #000) 0%,
    color-mix(in oklab, var(--accent) 75%, #000) 100%
  );
  opacity: .82;
}
.course-banner-overlay {
  position: relative;
  z-index: 1;
  padding: 2.2rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
}

/* Provider badge */
.course-provider-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  padding: .25rem .65rem;
  border-radius: 6px;
  margin-bottom: .5rem;
}

/* Title */
.course-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* Body */
.card.course-hero .bd { padding-top: .6rem; }
.card.course-hero .bd::before { display: none; }

/* Info bar */
.course-info-bar {
  display: flex;
  gap: .5rem;
  padding: .3rem 0;
}
.course-chip {
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  padding: .3rem .7rem;
  border-radius: 6px;
  letter-spacing: .02em;
}

/* About section */
.course-about {
  padding: .3rem 0;
}
.course-about-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: .3rem;
}

/* Enroll CTA */
.course-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem;
  margin: .6rem 0 .2rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  transition: all .2s ease;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 30%, transparent);
}
.course-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px color-mix(in oklab, var(--accent) 40%, transparent);
}
.course-cta-text { }
.course-cta-arrow {
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.course-cta:hover .course-cta-arrow {
  transform: translateX(3px);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .course-chip { color: var(--accent); background: color-mix(in oklab, var(--accent) 15%, rgba(255,255,255,.06)); }
}

/* ── Shared contact block (Organization, Restaurant) ── */
.contact-block {
  margin: .5rem 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  color: var(--ink-2);
}
.contact-icon {
  font-size: .9rem;
  flex-shrink: 0;
  width: 1.2rem;
  text-align: center;
  padding-top: .1rem;
}
.contact-text {
  line-height: 1.5;
}
.contact-text a {
  color: var(--accent);
  text-decoration: none;
}
.contact-text a:hover {
  text-decoration: underline;
}
.org-chips .stat-chip,
.restaurant-chips .stat-chip {
  font-size: .8rem;
}

/* ── Per-type bespoke: Restaurant — Premium Dining Landing ── */

.card.restaurant-hero {
  overflow: hidden;
  border-color: rgba(0,0,0,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 12px 40px rgba(0,0,0,.08),
    0 28px 64px rgba(0,0,0,.04);
}
.card.restaurant-hero .hd.hidden { display: none; }

/* Food hero — full-bleed with dark scrim */
.rest-hero-img {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  background: #1a1410;
}
.rest-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rest-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,20,16,0) 40%,
    rgba(26,20,16,.35) 65%,
    rgba(26,20,16,.85) 90%,
    rgba(26,20,16,1) 100%
  );
  pointer-events: none;
}
.rest-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2rem 1.4rem;
  z-index: 2;
}
.rest-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 .4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.rest-badges {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.rest-cuisine-badge {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.12);
  padding: .25rem .65rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.rest-price-badge {
  font-size: .82rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: .02em;
}

/* Body */
.card.restaurant-hero .bd {
  background: #fffdf9;
  padding-top: .6rem;
}
.card.restaurant-hero .bd::before {
  display: none;
}

/* Contact block */
.rest-contact {
  padding: .5rem 0;
}
.rest-contact-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .35rem 0;
}
.rest-contact-icon {
  font-size: .9rem;
  line-height: 1.6;
  flex-shrink: 0;
}
.rest-contact-text {
  font-size: .85rem;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Reserve CTA */
.rest-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem;
  margin: .7rem 0 .2rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(185,28,28,.25);
}
.rest-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(185,28,28,.35);
}
.rest-cta-text { }
.rest-cta-arrow {
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.rest-cta:hover .rest-cta-arrow {
  transform: translateX(3px);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .card.restaurant-hero { border-color: rgba(255,255,255,.06); }
  .card.restaurant-hero .bd { background: #1a1714; }
  .rest-contact-text { color: rgba(255,255,255,.6); }
  .rest-cta { background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%); }
}

/* ── Price / currency ── */
.rich-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── Disclosures ── */
details {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--accent);
  user-select: none;
  transition: color .15s;
}
summary:hover { color: var(--accent-2); }
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "▸";
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  font-size: .75em;
}
details[open] summary::before { transform: rotate(90deg); }

/* ── Edit form ── */
form { margin-top: 1rem; display: grid; gap: .85rem; }
label {
  display: grid; gap: .3rem;
  font-size: .72rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}
input, textarea {
  font: inherit;
  color: var(--ink);
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:hover, textarea:hover {
  border-color: color-mix(in oklab, var(--muted) 40%, var(--line));
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent), var(--shadow-sm);
}
textarea { min-height: 4.5rem; resize: vertical; }

/* ── JSON-LD source ── */
pre {
  margin: .85rem 0 0;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  overflow: auto;
  background: #0d1117;
  color: #c9d1d9;
  border: 1px solid #21262d;
  font: .76rem/1.65 var(--mono);
  tab-size: 2;
}

/* ── Footer ── */
footer {
  text-align: center;
  color: var(--muted-2);
  font-size: .75rem;
  margin-top: 1.5rem;
  letter-spacing: .02em;
}
footer a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s;
}
footer a:hover { color: var(--accent-2); }

/* ──────────────────────────────────────────────
   Dark mode — @media (prefers-color-scheme: dark)
   Linear / Stripe dark aesthetic. Overrides only
   colors & shadows; layout & sizing unchanged.
   ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e4e8f1;
    --ink-2: #c9cdd8;
    --muted: #8b8fa3;
    --muted-2: #6b6f82;
    --line: #262a3a;
    --line-2: #1e2130;
    --card: #161927;
    --surface: #1c1f31;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px -6px rgba(0,0,0,.4);
    --shadow-hover: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px -8px rgba(0,0,0,.5);
  }

  body {
    background:
      radial-gradient(ellipse 1000px 500px at 10% -5%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%),
      radial-gradient(ellipse 800px 400px at 105% 5%, color-mix(in oklab, var(--accent-2) 8%, transparent), transparent 55%),
      #0e1019;
  }

  /* Header band: richer glow in dark */
  .hd {
    background: linear-gradient(160deg,
      color-mix(in oklab, var(--accent) 85%, #000) 0%,
      color-mix(in oklab, var(--accent-2) 85%, #000) 100%);
  }
  .hd::before {
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  }
  .hd::after {
    background: radial-gradient(140% 140% at -10% -10%, rgba(255,255,255,.15), transparent 50%);
  }
  .hd .icon {
    background: rgba(255,255,255,.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.3);
  }

  /* Row hover */
  .row:hover { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
  .row + .row::before {
    background: linear-gradient(to right, var(--line-2), color-mix(in oklab, var(--accent) 15%, var(--line-2)) 50%, var(--line-2));
  }

  /* Inputs */
  input, textarea {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
  }
  input:hover, textarea:hover {
    border-color: color-mix(in oklab, var(--muted) 50%, var(--line));
  }
  input:focus, textarea:focus {
    background: color-mix(in oklab, var(--surface) 80%, #000);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent), var(--shadow-sm);
  }

  /* Code block: already dark, just bump contrast */
  pre {
    background: #0a0d14;
    border-color: #1a1f2e;
    color: #b8c0d0;
  }

  /* Accent identity in dark */
  ::selection {
    background: color-mix(in oklab, var(--accent) 35%, transparent);
  color: var(--ink);
  }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--accent) 35%, var(--line));
  }
  ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--accent) 55%, var(--muted));
  }
  * { scrollbar-color: color-mix(in oklab, var(--accent) 35%, var(--line)) transparent; }
  .card {
    border-color: color-mix(in oklab, var(--accent) 20%, var(--line));
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklab, var(--accent) 8%, transparent);
  }
  .bd::before { opacity: .15; }
  .avatar { border-color: var(--card); }
  .row .k::before { opacity: .6; }
  .stat-chip {
    background: color-mix(in oklab, var(--accent) 10%, var(--surface));
    border-color: color-mix(in oklab, var(--accent) 18%, var(--line));
  }
  .check-box {
    border-color: color-mix(in oklab, var(--accent) 50%, var(--line));
  }
  .step-list li {
    border-left-color: color-mix(in oklab, var(--accent) 25%, var(--line));
  }
  .review-body {
    background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  }
  .spec-cell {
    background: color-mix(in oklab, var(--accent) 4%, var(--surface));
    border-color: color-mix(in oklab, var(--accent) 12%, var(--line));
  }
  .price-amount {
    color: var(--ink);
  }
  .prose-body {
    color: var(--ink-2);
  }
  .contact-row {
    color: var(--ink-2);
  }
  .contact-text a {
    color: var(--accent);
  }
}

/* ──────────────────────────────────────────────
   TouristAttraction — Tripadvisor travel card
   ────────────────────────────────────────────── */
.card.travel-card .hd.hidden { display: none; }

.travel-hero {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}
.travel-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.travel-card:hover .travel-hero-img { transform: scale(1.04); }

.travel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  pointer-events: none;
}
.travel-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.2rem 1.5rem;
}
.travel-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .3rem;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.travel-location {
  font-size: .8rem;
  color: rgba(255,255,255,.88);
  font-weight: 500;
}

.travel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .9rem 1.5rem .5rem;
}
.travel-tag {
  padding: .25rem .65rem;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 22px;
  font-size: .75rem;
  font-weight: 600;
}

.travel-desc {
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.65;
  padding: .4rem 1.5rem .8rem;
}

.travel-cta {
  display: inline-block;
  margin: .2rem 1.5rem 1.5rem;
  padding: .55rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .18s, transform .15s;
}
.travel-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ──────────────────────────────────────────────
   VideoObject — YouTube-style video card
   ────────────────────────────────────────────── */
.card.video-card { background: #0f0f0f; color: #f1f1f1; }
.card.video-card .hd.hidden { display: none; }
.card.video-card .bd { background: #0f0f0f; }
.card.video-card details summary { color: #aaa; }
.card.video-card pre { background: #1a1a1a; color: #ccc; }

.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.video-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, filter .4s ease;
}
.video-thumb:hover .video-thumb-img {
  transform: scale(1.03);
  filter: brightness(.85);
}
.video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);
  pointer-events: none;
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 64px; height: 64px;
  background: rgba(0,0,0,.75);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .2s ease, background .2s ease;
  pointer-events: none;
}
.video-play svg { width: 28px; height: 28px; margin-left: 4px; }
.video-thumb:hover .video-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--accent);
}
.video-duration {
  position: absolute;
  bottom: .6rem; right: .6rem;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .4rem;
  border-radius: 4px;
  letter-spacing: .02em;
  pointer-events: none;
}

.video-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f1f1;
  margin: .9rem 1.5rem .3rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.video-meta {
  font-size: .75rem;
  color: #aaa;
  margin: 0 1.5rem .6rem;
}
.video-desc {
  font-size: .82rem;
  color: #aaa;
  line-height: 1.6;
  margin: 0 1.5rem .8rem;
}
.video-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .2rem 1.5rem 1.4rem;
  padding: .5rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 22px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s, transform .15s;
}
.video-cta:hover { filter: brightness(1.15); transform: scale(1.03); }

@media (prefers-color-scheme: dark) {
  .card.video-card { background: #0f0f0f; }
}

/* ──────────────────────────────────────────────
   App Store card layout
   ────────────────────────────────────────────── */
.card.app-store { background: #f9f9fb; }
.card.app-store .hd.hidden { display: none; }

.app-store-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.8rem 2rem 1.2rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.app-store-icon {
  width: 100px;
  height: 100px;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  flex-shrink: 0;
  object-fit: cover;
}
.app-store-meta { flex: 1; min-width: 0; padding-top: .25rem; }
.app-store-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .2rem;
  color: var(--ink);
  line-height: 1.2;
}
.app-store-developer {
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: .15rem;
}
.app-store-category {
  font-size: .75rem;
  color: var(--muted);
  font-weight: 500;
}

.app-store-action-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 2rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.app-store-rating {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
}
.app-store-stars {
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: .04em;
}
.app-store-score {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
.app-store-review-count {
  font-size: .72rem;
  color: var(--muted);
}
.app-store-get-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .3rem 1.2rem;
  min-width: 64px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: .01em;
  transition: background .18s, transform .15s;
  line-height: 1.2;
}
.app-store-get-btn:hover { background: color-mix(in oklab, var(--accent) 85%, #000); transform: scale(1.04); }
.app-store-get-sub {
  font-size: .6rem;
  font-weight: 500;
  opacity: .85;
  display: block;
}

.app-store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .9rem 2rem .6rem;
}
.app-store-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.app-chip-icon { font-size: .8rem; }

.app-store-desc {
  padding: .8rem 2rem 1rem;
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.65;
}

.app-store-cta {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .2rem 2rem 1.6rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.app-store-cta:hover { text-decoration: underline; }
.app-store-cta span { font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  .card.app-store { background: #1a1a1e; }
  .app-store-header { background: #1c1c20; border-color: rgba(255,255,255,.08); }
  .app-store-action-row { background: #1c1c20; border-color: rgba(255,255,255,.08); }
  .app-store-chip { background: #2a2a2e; border-color: rgba(255,255,255,.08); }
}


/* ── Per-type bespoke: Ticket — tear-off stub ── */

.card.ticket-stub { background: #fff; border-color: rgba(0,0,0,.12); overflow: visible; }
.card.ticket-stub .hd.hidden { display: none; }
.card.ticket-stub .bd { padding: 0; background: #fff; }
.card.ticket-stub .bd::before { display: none; }

.ticket-layout {
  display: flex;
  border-radius: .75rem;
  overflow: hidden;
  background: #fff;
  position: relative;
}

/* Main body (left side) */
.ticket-main {
  flex: 1;
  padding: 1.8rem 1.6rem;
  min-width: 0;
}
.ticket-event {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .6rem;
  color: #111;
}
.ticket-desc {
  font-size: .85rem;
  line-height: 1.55;
  color: #555;
  margin: 0 0 1rem;
}

.ticket-meta-grid {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.ticket-meta-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ticket-meta-cell small {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #999;
}
.ticket-meta-cell span {
  font-size: .9rem;
  font-weight: 600;
  color: #222;
}

/* Perforation divider */
.ticket-perf {
  width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 2.5px dashed rgba(0,0,0,.15);
  margin: 1.6rem 0;
}
.ticket-notch {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--app-bg, #f0f0f0);
  left: -10px;
}
.ticket-notch:first-child { top: -10px; }
.ticket-notch:last-child { bottom: -10px; }

/* Stub side (right) */
.ticket-side {
  width: 180px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 1.2rem;
  text-align: center;
  position: relative;
  gap: .7rem;
}
.ticket-number {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #888;
  transform: rotate(90deg);
  white-space: nowrap;
  margin-bottom: .8rem;
}
.ticket-price-badge {
  background: #111;
  color: #fff;
  padding: .45rem .9rem;
  border-radius: .4rem;
  font-weight: 700;
  line-height: 1;
}
.ticket-price-val { font-size: 1.2rem; }
.ticket-price-cur { font-size: .65rem; opacity: .7; }
.ticket-admit {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #aaa;
  border-top: 1px solid #e0e0e0;
  padding-top: .6rem;
  width: 100%;
}
.ticket-watermark {
  position: absolute;
  bottom: .8rem;
  right: .8rem;
  font-size: 2.2rem;
  opacity: .06;
  line-height: 1;
  pointer-events: none;
}

/* Dark mode ticket */
@media (prefers-color-scheme: dark) {
  .card.ticket-stub { background: #1c1c1e; border-color: rgba(255,255,255,.08); }
  .card.ticket-stub .bd { background: #1c1c1e; }
  .ticket-layout { background: #1c1c1e; }
  .ticket-event { color: #f5f5f5; }
  .ticket-desc { color: #999; }
  .ticket-meta-cell small { color: #666; }
  .ticket-meta-cell span { color: #ddd; }
  .ticket-perf { border-left-color: rgba(255,255,255,.12); }
  .ticket-notch { background: #0d0d0d; }
  .ticket-number { color: #666; }
  .ticket-price-badge { background: #f5f5f5; color: #111; }
  .ticket-admit { color: #555; border-top-color: #333; }
  .ticket-watermark { opacity: .05; }
}



/* ── Per-type bespoke: SocialMediaPosting — tweet card ── */

.card.tweet-card { background: #fff; border-color: rgba(0,0,0,.08); }
.card.tweet-card .hd.hidden { display: none; }
.card.tweet-card .bd { padding: 1.4rem 1.6rem; background: #fff; }
.card.tweet-card .bd::before { display: none; }

.tweet-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.tweet-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.tweet-name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tweet-author-name {
  font-weight: 700;
  font-size: .95rem;
  color: #111;
  line-height: 1.2;
}
.tweet-handle {
  font-size: .8rem;
  color: #888;
}
.tweet-icon-badge {
  margin-left: auto;
  font-size: 1.1rem;
  opacity: .4;
}

.tweet-body {
  font-size: 1.15rem;
  line-height: 1.55;
  color: #111;
  margin-bottom: .8rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.tweet-media {
  border-radius: .75rem;
  overflow: hidden;
  margin-bottom: .6rem;
}
.tweet-media img {
  width: 100%;
  display: block;
}

.tweet-time {
  font-size: .78rem;
  color: #999;
  margin-bottom: .8rem;
}

.tweet-actions {
  display: flex;
  gap: 2rem;
  padding-top: .6rem;
  border-top: 1px solid #eee;
}
.tweet-action {
  display: flex;
  align-items: center;
  gap: .3rem;
  cursor: default;
}
.tweet-action-icon {
  font-size: 1.1rem;
  opacity: .45;
  transition: opacity .15s;
}
.tweet-action:hover .tweet-action-icon { opacity: .8; }

/* Dark mode tweet */
@media (prefers-color-scheme: dark) {
  .card.tweet-card { background: #1c1c1e; border-color: rgba(255,255,255,.06); }
  .card.tweet-card .bd { background: #1c1c1e; }
  .tweet-avatar { background: #0c7bb3; }
  .tweet-author-name { color: #f5f5f5; }
  .tweet-handle { color: #666; }
  .tweet-body { color: #e8e8e8; }
  .tweet-time { color: #555; }
  .tweet-actions { border-top-color: #333; }
}


/* ── Per-type bespoke: Quotation — typographic quote poster ── */

.card.quote-poster { background: #fff; border-color: rgba(0,0,0,.06); }
.card.quote-poster .hd.hidden { display: none; }
.card.quote-poster .bd { padding: 2.5rem 2rem 2rem; background: #fff; }
.card.quote-poster .bd::before { display: none; }

.quote-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--accent, #7c2d12);
  opacity: .18;
  margin-bottom: -.8rem;
  user-select: none;
}

.quote-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0 0 1.4rem;
  padding: 0;
  border: none;
  quotes: none;
}

.quote-attribution {
  font-variant: small-caps;
  font-size: .9rem;
  letter-spacing: .04em;
  color: #444;
  margin-bottom: .3rem;
}

.quote-date {
  font-size: .75rem;
  color: #aaa;
  margin-bottom: 1.4rem;
}

.quote-footnote {
  font-size: .78rem;
  line-height: 1.5;
  color: #888;
  border-top: 1px solid #eee;
  padding-top: .8rem;
  margin: 0;
}

/* Dark mode quote poster */
@media (prefers-color-scheme: dark) {
  .card.quote-poster { background: #1c1c1e; border-color: rgba(255,255,255,.06); }
  .card.quote-poster .bd { background: #1c1c1e; }
  .quote-text { color: #e8e8e8; }
  .quote-attribution { color: #aaa; }
  .quote-date { color: #555; }
  .quote-footnote { color: #666; border-top-color: #333; }
}


/* ── Per-type bespoke: Flight — boarding pass ── */

.card.boarding-pass { background: #fff; border-color: rgba(0,0,0,.1); }
.card.boarding-pass .hd.hidden { display: none; }
.card.boarding-pass .bd { padding: 0; background: #fff; }
.card.boarding-pass .bd::before { display: none; }

/* Top strip: airline + flight number */
.bp-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.4rem;
  background: #111;
  color: #fff;
}
.bp-airline { font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.bp-flight-num { font-family: "SF Mono", "Fira Code", monospace; font-size: .85rem; font-weight: 700; letter-spacing: .05em; }

/* Route section */
.bp-route {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 1.4rem 1.4rem;
  gap: 1rem;
}
.bp-airport-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.bp-code {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: #111;
  letter-spacing: .02em;
}
.bp-city {
  font-size: .7rem;
  color: #888;
  margin-top: .2rem;
  text-align: center;
  max-width: 120px;
}
.bp-time {
  font-size: .85rem;
  font-weight: 600;
  color: #444;
  margin-top: .3rem;
}

/* Plane + dotted line */
.bp-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 60px;
}
.bp-plane { font-size: 1.3rem; margin-bottom: .3rem; }
.bp-dots {
  width: 100%;
  height: 0;
  border-top: 2.5px dotted rgba(0,0,0,.2);
}

/* Tear line */
.bp-tear {
  position: relative;
  border-top: 2px dashed rgba(0,0,0,.15);
  margin: 0;
}
.bp-notch {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--app-bg, #f0f0f0);
  top: -10px;
}
.bp-notch:first-child { left: -10px; }
.bp-notch:last-child { right: -10px; }

/* Bottom section */
.bp-bottom {
  padding: 1rem 1.4rem 1.2rem;
}

/* Fake barcode strip */
.bp-barcode {
  height: 36px;
  background: repeating-linear-gradient(
    90deg,
    #111 0px, #111 2px,
    transparent 2px, transparent 4px,
    #111 4px, #111 5px,
    transparent 5px, transparent 8px,
    #111 8px, #111 9px,
    transparent 9px, transparent 11px,
    #111 11px, #111 14px,
    transparent 14px, transparent 16px
  );
  border-radius: 3px;
  margin-bottom: .8rem;
  opacity: .75;
}

.bp-desc {
  font-size: .78rem;
  line-height: 1.5;
  color: #888;
  margin: 0;
}

/* Dark mode boarding pass */
@media (prefers-color-scheme: dark) {
  .card.boarding-pass { background: #1c1c1e; border-color: rgba(255,255,255,.06); }
  .card.boarding-pass .bd { background: #1c1c1e; }
  .bp-strip { background: #f5f5f5; color: #111; }
  .bp-code { color: #f5f5f5; }
  .bp-city { color: #666; }
  .bp-time { color: #ccc; }
  .bp-dots { border-top-color: rgba(255,255,255,.15); }
  .bp-tear { border-top-color: rgba(255,255,255,.1); }
  .bp-notch { background: #0d0d0d; }
  .bp-barcode {
    background: repeating-linear-gradient(
      90deg,
      #f5f5f5 0px, #f5f5f5 2px,
      transparent 2px, transparent 4px,
      #f5f5f5 4px, #f5f5f5 5px,
      transparent 5px, transparent 8px,
      #f5f5f5 8px, #f5f5f5 9px,
      transparent 9px, transparent 11px,
      #f5f5f5 11px, #f5f5f5 14px,
      transparent 14px, transparent 16px
    );
    opacity: .6;
  }
  .bp-desc { color: #666; }
}


/* ── Per-type bespoke: ParcelDelivery — tracking card ── */

.card.tracking-card { background: #fff; border-color: rgba(0,0,0,.08); }
.card.tracking-card .hd.hidden { display: none; }
.card.tracking-card .bd { padding: 0; background: #fff; }
.card.tracking-card .bd::before { display: none; }

/* Tracking number header */
.trk-head {
  padding: 1.2rem 1.4rem;
  background: #111;
  color: #fff;
  text-align: center;
}
.trk-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: #999; margin-bottom: .2rem; }
.trk-number { font-family: "SF Mono", "Fira Code", "Courier New", monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; }
.trk-courier { font-size: .75rem; color: #aaa; margin-top: .25rem; }

/* Expected delivery */
.trk-expected {
  text-align: center;
  padding: 1rem 1.4rem .8rem;
}
.trk-exp-label { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: #999; margin-bottom: .2rem; }
.trk-exp-date { display: block; font-size: 1.3rem; font-weight: 700; color: #111; }
.trk-exp-time { display: block; font-size: .8rem; color: #888; margin-top: .1rem; }

/* Timeline */
.trk-timeline {
  padding: .6rem 1.4rem 1rem;
}
.trk-step {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.trk-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.trk-step.trk-done .trk-dot { background: #dcfce7; color: #15803d; font-size: .9rem; }
.trk-step.trk-current .trk-dot { background: #ea580c; color: #fff; font-size: .9rem; box-shadow: 0 0 0 3px rgba(234,88,12,.2); }

.trk-step-content {
  flex: 1;
  margin-left: .7rem;
  padding-top: .3rem;
}
.trk-step-label { font-size: .85rem; font-weight: 600; color: #333; }
.trk-step.trk-current .trk-step-label { color: #ea580c; }
.trk-step:not(.trk-done):not(.trk-current) .trk-step-label { color: #bbb; }
.trk-step-detail { font-size: .72rem; color: #999; margin-top: .1rem; }

.trk-line {
  position: absolute;
  left: 15px;
  top: 32px;
  width: 2px;
  height: calc(100% - 28px);
  background: #e5e5e5;
}
.trk-line.trk-line-done { background: #15803d; }

/* Info rows */
.trk-info {
  padding: .8rem 1.4rem 1.2rem;
  border-top: 1px solid #eee;
}
.trk-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .8rem;
  color: #555;
  padding: .25rem 0;
}
.trk-info-label { font-weight: 600; color: #888; font-size: .72rem; }
.trk-info-row span:last-child { text-align: right; max-width: 65%; }

/* Dark mode tracking */
@media (prefers-color-scheme: dark) {
  .card.tracking-card { background: #1c1c1e; border-color: rgba(255,255,255,.06); }
  .card.tracking-card .bd { background: #1c1c1e; }
  .trk-head { background: #f5f5f5; color: #111; }
  .trk-label { color: #666; }
  .trk-courier { color: #555; }
  .trk-exp-date { color: #f5f5f5; }
  .trk-exp-time { color: #666; }
  .trk-dot { background: #333; color: #666; }
  .trk-step.trk-done .trk-dot { background: #064e3b; color: #6ee7b7; }
  .trk-step.trk-current .trk-dot { background: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.3); }
  .trk-step-label { color: #ccc; }
  .trk-step.trk-current .trk-step-label { color: #fb923c; }
  .trk-step:not(.trk-done):not(.trk-current) .trk-step-label { color: #444; }
  .trk-step-detail { color: #555; }
  .trk-line { background: #333; }
  .trk-line.trk-line-done { background: #064e3b; }
  .trk-info { border-top-color: #333; }
  .trk-info-row { color: #aaa; }
  .trk-info-label { color: #666; }
}


/* ── Per-type bespoke: Question — Stack Overflow Q&A card ── */

.card.qa-card { background: #fff; border-color: rgba(0,0,0,.08); }
.card.qa-card .hd.hidden { display: none; }
.card.qa-card .bd { padding: 1.4rem; background: #fff; }
.card.qa-card .bd::before { display: none; }

/* Stat chips */
.qa-stats { display: flex; gap: .6rem; margin-bottom: 1rem; }
.qa-chip {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 6px;
  background: #f0f0f0;
  font-size: .78rem;
}
.qa-chip-num { font-weight: 700; color: #555; font-size: .85rem; }
.qa-chip-label { color: #888; }
.qa-chip-accepted { background: #dcfce7; }
.qa-chip-accepted .qa-chip-num { color: #15803d; }
.qa-chip-accepted .qa-chip-label { color: #15803d; }

/* Question title */
.qa-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 0 0 .8rem;
}

/* Question body */
.qa-body {
  font-size: .88rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: .8rem;
  white-space: pre-wrap;
}

/* Meta line */
.qa-meta {
  font-size: .75rem;
  color: #999;
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid #eee;
}
.qa-meta strong { color: #0891b2; font-weight: 600; }

/* Accepted answer */
.qa-accepted {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.qa-accepted-head {
  font-size: .75rem;
  font-weight: 700;
  color: #15803d;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.qa-accepted-body {
  font-size: .85rem;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

/* Dark mode Q&A */
@media (prefers-color-scheme: dark) {
  .card.qa-card { background: #1c1c1e; border-color: rgba(255,255,255,.06); }
  .card.qa-card .bd { background: #1c1c1e; }
  .qa-chip { background: #2a2a2e; }
  .qa-chip-num { color: #ccc; }
  .qa-chip-label { color: #666; }
  .qa-chip-accepted { background: #052e16; }
  .qa-chip-accepted .qa-chip-num { color: #6ee7b7; }
  .qa-chip-accepted .qa-chip-label { color: #6ee7b7; }
  .qa-title { color: #e8e8e8; }
  .qa-body { color: #bbb; }
  .qa-meta { color: #555; border-bottom-color: #333; }
  .qa-meta strong { color: #22d3ee; }
  .qa-accepted { background: #052e16; border-color: #064e3b; }
  .qa-accepted-head { color: #6ee7b7; }
  .qa-accepted-body { color: #ccc; }
}

/* ──────────────────────────────────────────────
   Responsive / Mobile — small-screen polish.
   Stacks label/value grid, scales header,
   full-width card with comfortable tap targets.
   ────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --radius: 16px;
  }

  body { font-size: 14px; }

  .wrap {
    max-width: 100%;
    margin: 0;
    padding: .75rem;
  }

  .card {
    border-radius: var(--radius);
    /* Disable hover lift on touch */
    transition: none;
  }
  .card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  /* Header: tighter padding, smaller title */
  .hd {
    padding: 1.25rem 1.25rem 1.1rem;
  }
  .hd .icon {
    width: 40px; height: 40px;
    font-size: 20px;
    border-radius: 10px;
  }
  .hd .type {
    margin-top: .65rem;
    font-size: .6rem;
  }
  .hd .title {
    font-size: 1.25rem;
  }

  /* Body: tighter padding */
  .bd {
    padding: 1rem 1.15rem 1.25rem;
  }

  /* Stack rows to single column */
  .row {
    grid-template-columns: 1fr;
    gap: .25rem;
    padding: .7rem .5rem;
    margin: 0 -.5rem;
  }
  .row + .row::before {
    left: .5rem; right: .5rem;
  }
  .row .k {
    font-size: .65rem;
    letter-spacing: .06em;
    padding-top: 0;
  }
  .row .v {
    font-size: .85rem;
  }

  /* Larger tap targets for inputs */
  input, textarea {
    padding: .7rem .7rem;
    font-size: 16px; /* prevent iOS zoom on focus */
  }
  textarea { min-height: 5rem; }

  /* Code block: smaller text, full bleed */
  pre {
    font-size: .72rem;
    padding: .85rem;
    border-radius: 8px;
    margin-left: -.15rem;
    margin-right: -.15rem;
  }

  /* Summary: larger tap target */
  summary {
    padding: .3rem 0;
    font-size: .9rem;
  }

  /* Hide accent left-edge on mobile (card is full-bleed) */
  .bd::before { display: none; }
  .hero { height: 170px; }
  .avatar { width: 76px; height: 76px; margin-top: -38px; }
  .rating-hero-stars { font-size: 1.3rem; }
  .stat-chip { padding: .35rem .65rem; font-size: .8rem; }
  .price-amount { font-size: 1.7rem; }
  .spec-grid { grid-template-columns: 1fr; }
  /* Event poster mobile */
  .poster-hero { min-height: 240px; padding: 2rem 1.2rem 1.6rem; }
  .poster-day { font-size: 3.5rem; }
  .poster-title { font-size: 1.35rem; }
  /* Cinematic mobile */
  .card.cinematic .cinematic-hero { height: 280px; }
  .cinematic-title { font-size: 1.5rem; }
  .cinematic-overlay { padding: 0 1.2rem 1.2rem; }
  /* Album immersive mobile */
  .card.album-immersive .album-cover-hero { max-height: 280px; }
  .album-title { font-size: 1.3rem; }
  .track-title { font-size: .82rem; }
  /* Portfolio mobile */
  .portfolio-band { height: 80px; }
  .portfolio-avatar { width: 88px; height: 88px; margin-top: -44px; }
  .portfolio-name { font-size: 1.4rem; }
  .portfolio-contact { gap: .3rem; }
  .portfolio-contact-btn { font-size: .72rem; padding: .3rem .55rem; }
  /* Product showcase mobile */
  .card.product-showcase .product-shot { height: 240px; }
  .product-shot-img { padding: 1.2rem; }
  .product-name { font-size: 1.3rem; }
  .pp-amount { font-size: 2.2rem; }
  .product-specs { gap: .25rem; }
  /* Restaurant hero mobile */
  .rest-hero-img { height: 260px; }
  .rest-name { font-size: 1.4rem; }
  /* Book jacket mobile */
  .book-layout { flex-direction: column; align-items: center; text-align: center; padding: 1.2rem; }
  .book-cover { width: 140px; }
  .book-info { padding-top: .5rem; }
  .book-synopsis { padding: .6rem 1.2rem 1rem; }
  /* Course hero mobile */
  .course-banner { min-height: 180px; }
  .course-banner-overlay { min-height: 180px; padding: 1.4rem 1.2rem 1.2rem; }
  .course-title { font-size: 1.3rem; }
  /* Article magazine mobile */
  .article-masthead { padding: 1.2rem 1.2rem .8rem; }
  .article-headline { font-size: 1.4rem; }
  .article-prose { padding: 1rem 1.2rem; }
  /* Job board mobile */
  .job-header { padding: 1rem 1.2rem .5rem; }
  .job-role-title { font-size: 1.25rem; padding: 0 1.2rem; }
  .job-chips { padding: .5rem 1.2rem .2rem; }
  .job-details { padding: .3rem 1.2rem; }
  .job-cta { width: calc(100% - 2.4rem); margin: .6rem 1.2rem; }
  /* App Store mobile */
  .app-store-header { flex-direction: row; padding: 1.4rem 1.2rem 1rem; gap: 1rem; }
  .app-store-icon { width: 72px; height: 72px; border-radius: 16px; }
  .app-store-action-row { padding: .4rem 1.2rem .6rem; }
  /* HowTo mobile */
  .howto-title { font-size: 1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; }
  .howto-desc { padding-left: 1.2rem; padding-right: 1.2rem; }
  .howto-stats { padding-left: 1.2rem; padding-right: 1.2rem; }
  .howto-steps-section { padding-left: 1.2rem; padding-right: 1.2rem; }
  /* Hotel mobile */
  .hotel-hero { height: 180px; }
  .hotel-name { font-size: 1.2rem; }
  .hotel-meta-strip { padding-left: 1.2rem; padding-right: 1.2rem; }
  .hotel-desc { padding-left: 1.2rem; padding-right: 1.2rem; }
  .hotel-contact { padding-left: 1.2rem; padding-right: 1.2rem; }
  .hotel-cta { margin-left: 1.2rem; margin-right: 1.2rem; }
  /* LocalBusiness mobile */
  .biz-name { font-size: 1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; }
  .biz-hours-badge { margin-left: 1.2rem; }
  .biz-desc { padding-left: 1.2rem; padding-right: 1.2rem; }
  .biz-info { padding-left: 1.2rem; padding-right: 1.2rem; }
  .biz-cta { margin-left: 1.2rem; margin-right: 1.2rem; }
  /* Podcast mobile */
  .podcast-cover { width: 180px; height: 180px; }
  .podcast-cover-wrap { padding: 1.2rem 1.2rem .6rem; }
  .podcast-title { font-size: 1.15rem; padding-left: 1.2rem; padding-right: 1.2rem; }
  .podcast-host { padding-left: 1.2rem; padding-right: 1.2rem; }
  .podcast-genres { padding-left: 1.2rem; padding-right: 1.2rem; }
  .podcast-desc { padding-left: 1.2rem; padding-right: 1.2rem; }
  .podcast-cta { margin-left: 1.2rem; margin-right: 1.2rem; }
  /* FAQ mobile */
  .faq-title { font-size: 1.15rem; padding-left: 1.2rem; padding-right: 1.2rem; }
  .faq-desc { padding-left: 1.2rem; padding-right: 1.2rem; }
  .faq-accordion { padding-left: 1.2rem; padding-right: 1.2rem; }
  /* Ticket mobile — stack vertically */
  .ticket-layout { flex-direction: column; }
  .ticket-main { padding: 1.2rem; }
  .ticket-event { font-size: 1.2rem; }
  .ticket-perf { border-left: none; border-top: 2.5px dashed rgba(0,0,0,.15); width: auto; height: 0; margin: 0 1.2rem; flex-direction: row; }
  .ticket-notch { top: -10px; left: auto; position: absolute; }
  .ticket-notch:first-child { left: -10px; top: -10px; }
  .ticket-notch:last-child { right: -10px; left: auto; bottom: -10px; }
  .ticket-side { width: auto; padding: 1.2rem 1.4rem; flex-direction: row; justify-content: space-around; }
  .ticket-number { transform: none; margin-bottom: 0; }
  .ticket-admit { border-top: none; border-left: 1px solid #e0e0e0; padding-top: 0; padding-left: .5rem; width: auto; }
}

/* ── ORDER (confirmation email card) ── */
.card.order-card {
  background: var(--card);
  border-radius: var(--radius);
}
.card.order-card .hd.hidden { display: none; }

.order-conf-header {
  text-align: center;
  padding: 2rem 1.5rem 1.2rem;
}

.order-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .8rem;
  box-shadow: 0 0 0 6px rgba(22,163,74,.15);
  animation: order-pop .4s ease-out;
}
@keyframes order-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.order-conf-label {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .25rem;
}

.order-conf-name {
  font-size: .9rem;
  color: var(--muted);
  font-weight: 500;
}

.order-number-chip {
  text-align: center;
  margin: .8rem auto;
  display: inline-block;
  font-family: var(--mono);
  font-size: .82rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .35rem .9rem;
  border-radius: 6px;
  color: var(--ink-2);
  letter-spacing: .02em;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.order-status-pill {
  text-align: center;
  margin: .6rem 0 1rem;
}
.order-status-pill span,
.order-status-pill {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .3rem .85rem;
  border-radius: 100px;
  line-height: 1.4;
}
.order-status-amber {
  background: #fef3c7;
  color: #92400e;
}
.order-status-green {
  background: #dcfce7;
  color: #166534;
}
.order-status-red {
  background: #fee2e2;
  color: #991b1b;
}

.order-summary-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin: .4rem 0;
}

.order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .45rem 0;
}
.order-summary-row + .order-summary-row {
  border-top: 1px solid var(--line-2);
}

.order-summary-label {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
}

.order-summary-value {
  font-size: .88rem;
  color: var(--ink);
  font-weight: 600;
}

.order-note {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
  padding: .8rem 0;
  border-top: 1px solid var(--line-2);
  margin-top: .6rem;
}

.order-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.2rem;
  padding: .75rem 1.5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.order-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.order-cta-arrow {
  font-size: 1.1em;
  transition: transform .15s;
}
.order-cta:hover .order-cta-arrow {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .order-conf-header { padding: 1.4rem 1rem .8rem; }
  .order-check { width: 46px; height: 46px; font-size: 1.3rem; }
  .order-conf-label { font-size: 1.15rem; }
  .order-summary-box { padding: .8rem; }
}

/* ── INVOICE (real invoice document) ── */
.card.invoice-doc {
  background: var(--card);
  border-radius: var(--radius);
  font-family: var(--font);
}
.card.invoice-doc .hd.hidden { display: none; }

.inv-header {
  padding: 1.8rem 1.5rem 1rem;
}
.inv-label {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--ink);
  text-transform: uppercase;
}
.inv-number {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--muted);
  margin-top: .3rem;
  letter-spacing: .02em;
}

.inv-parties {
  display: flex;
  gap: 1rem;
  padding: 0 1.5rem;
  margin-bottom: 1.2rem;
}
.inv-party {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
}
.inv-party-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: .25rem;
}
.inv-party-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}

.inv-amount-block {
  text-align: center;
  padding: 1.4rem 1.5rem;
  margin: 0 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.inv-amount-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: .3rem;
}
.inv-amount-val {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.inv-due-date {
  font-size: .82rem;
  color: var(--muted);
  margin-top: .35rem;
}

/* Stamped-look status pill */
.inv-status-stamp {
  display: inline-block;
  margin: 1.2rem auto 0;
  padding: .4rem 1.3rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2.5px solid;
  border-radius: 6px;
  transform: rotate(-3deg);
  opacity: .85;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.inv-status-paid {
  color: #166534;
  border-color: #166534;
  background: rgba(22,101,52,.06);
}
.inv-status-due {
  color: #92400e;
  border-color: #92400e;
  background: rgba(146,64,14,.06);
}
.inv-status-overdue {
  color: #991b1b;
  border-color: #991b1b;
  background: rgba(153,27,27,.06);
}

.inv-notes {
  padding: 1rem 1.5rem;
  margin-top: .8rem;
}
.inv-notes-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: .3rem;
}
.inv-notes-body {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 480px) {
  .inv-header { padding: 1.2rem 1rem .6rem; }
  .inv-label { font-size: 1.3rem; }
  .inv-parties { flex-direction: column; padding: 0 1rem; }
  .inv-amount-block { margin: 0 1rem; }
  .inv-amount-val { font-size: 1.9rem; }
  .inv-notes { padding: 1rem; }
}

/* ── MENU (elegant restaurant menu typography) ── */
.card.menu-card {
  background: var(--card);
  border-radius: var(--radius);
}
.card.menu-card .hd.hidden { display: none; }

.menu-rest-name {
  text-align: center;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 1.8rem 1.5rem .5rem;
}

.menu-rule {
  text-align: center;
  padding: 0 2rem;
  margin: .6rem 0;
  position: relative;
  height: 10px;
}
.menu-rule::before,
.menu-rule::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: var(--ink);
  opacity: .35;
}
.menu-rule::before { top: 2px; }
.menu-rule::after { top: 7px; }

.menu-title {
  text-align: center;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
  padding: .2rem 1.5rem .8rem;
  line-height: 1.35;
}

.menu-intro {
  text-align: center;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: .85rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.65;
  padding: 0 2rem .8rem;
  max-width: 480px;
  margin: 0 auto;
}

.menu-sections {
  padding: .4rem 1.5rem;
}

.menu-section-divider {
  text-align: center;
  padding: .9rem 0 .3rem;
}

.menu-section-heading {
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .2rem;
}

.menu-section-dots {
  display: flex;
  justify-content: center;
  gap: .35rem;
  padding: .25rem 0;
}
.menu-section-dots::before,
.menu-section-dots::after,
.menu-section-dots {
  content: "";
}
/* Three decorative dots via pseudo-elements + the element itself */
.menu-section-dots {
  position: relative;
  height: 6px;
}
.menu-section-dots::before {
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted-2);
  top: 1px;
  left: calc(50% - 12px);
}
.menu-section-dots::after {
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted-2);
  top: 1px;
  left: calc(50% + 8px);
}

.menu-cta {
  display: block;
  text-align: center;
  padding: .8rem 0 1.2rem;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: .85rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .04em;
}
.menu-cta:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .menu-rest-name { padding: 1.2rem 1rem .4rem; font-size: 1rem; }
  .menu-title { font-size: 1.15rem; padding: .2rem 1rem .6rem; }
  .menu-intro { padding: 0 1rem .6rem; }
  .menu-sections { padding: .4rem 1rem; }
}

/* ── NEWSARTICLE (newspaper front page) ── */
.card.front-page {
  background: var(--card);
  border-radius: var(--radius);
}
.card.front-page .hd.hidden { display: none; }

.fp-masthead {
  padding: 1.5rem 1.5rem 0;
}
.fp-rule-top {
  height: 3px;
  background: var(--ink);
  margin-bottom: .4rem;
}
.fp-rule-bottom {
  height: 1px;
  background: var(--ink);
  margin-top: .4rem;
}
.fp-dateline {
  text-align: center;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

.fp-headline {
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  text-align: center;
  padding: .8rem 1.2rem .5rem;
}

.fp-standfirst {
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-2);
  text-align: center;
  padding: 0 2rem .8rem;
  max-width: 540px;
  margin: 0 auto;
}

.fp-body {
  column-count: 2;
  column-gap: 1.8rem;
  column-rule: 1px solid var(--line);
  padding: .4rem 1.5rem .8rem;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.fp-body p {
  margin: 0 0 .6rem;
  text-indent: 1.2rem;
}
.fp-body p:first-child {
  text-indent: 0;
}
.fp-body p:first-child::first-letter {
  font-size: 2.8em;
  float: left;
  line-height: .85;
  margin-right: .1em;
  font-weight: 700;
  color: var(--ink);
}

.fp-byline {
  text-align: center;
  font-variant: small-caps;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .6rem 0 .2rem;
  border-top: 1px solid var(--line);
  margin: .4rem 1.5rem 0;
}

.fp-source {
  display: block;
  text-align: center;
  padding: .6rem 0 1rem;
  font-size: .82rem;
  color: var(--accent);
  text-decoration: none;
}
.fp-source:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .fp-body { column-count: 1; padding: .4rem 1rem .8rem; }
  .fp-headline { font-size: 1.5rem; padding: .6rem 1rem .4rem; }
  .fp-standfirst { padding: 0 1rem .6rem; }
  .fp-masthead { padding: 1rem 1rem 0; }
}

/* ── CAR (premium car listing) ── */
.card.car-listing {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.card.car-listing .hd.hidden { display: none; }

.car-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #1a1a1e;
}
.car-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.car-brand-badge {
  position: absolute;
  top: .8rem;
  left: .8rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 6px;
}

.car-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  padding: 1rem 1.5rem .6rem;
  line-height: 1.25;
  background: linear-gradient(180deg, rgba(30,64,175,.06) 0%, transparent 100%);
}

.car-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
  padding: 0 1.5rem .8rem;
}

.car-spec-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem .7rem;
  text-align: center;
}
.car-spec-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: .15rem;
}
.car-spec-value {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}

.car-desc {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--muted);
  padding: 0 1.5rem .8rem;
}

.car-cta {
  display: block;
  text-align: center;
  margin: .4rem 1.5rem 1.2rem;
  padding: .7rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: filter .15s, transform .1s;
}
.car-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .car-spec-grid { grid-template-columns: 1fr 1fr; padding: 0 1rem .6rem; }
  .car-title { padding: .8rem 1rem .5rem; font-size: 1.1rem; }
  .car-desc { padding: 0 1rem .6rem; }
  .car-cta { margin: .4rem 1rem 1rem; }
}

/* ── DATASET (open-data portal card) ── */
.card.dataset-card {
  background: var(--card);
  border-radius: var(--radius);
}
.card.dataset-card .hd.hidden { display: none; }

.ds-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  padding: 1.5rem 1.5rem .6rem;
  line-height: 1.25;
}

.ds-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 1.5rem .8rem;
}
.ds-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: .2rem .55rem;
  border-radius: 4px;
  letter-spacing: .01em;
}

.ds-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .5rem;
  padding: 0 1.5rem .8rem;
}
.ds-meta-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .7rem;
}
.ds-meta-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: .15rem;
}
.ds-meta-value {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
.ds-license-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(5,150,105,.08);
  border: 1px solid rgba(5,150,105,.2);
  padding: .15rem .5rem;
  border-radius: 4px;
  text-decoration: none;
}
.ds-license-badge:hover {
  background: rgba(5,150,105,.14);
}

.ds-desc {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--muted);
  padding: 0 1.5rem .8rem;
}

.ds-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: .2rem 1.5rem 1.2rem;
  padding: .7rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: filter .15s, transform .1s;
}
.ds-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ds-cta-icon {
  font-size: 1.1em;
}

@media (max-width: 480px) {
  .ds-title { padding: 1.2rem 1rem .5rem; font-size: 1.15rem; }
  .ds-tags { padding: 0 1rem .6rem; }
  .ds-meta-grid { grid-template-columns: 1fr; padding: 0 1rem .6rem; }
  .ds-desc { padding: 0 1rem .6rem; }
  .ds-cta { margin: .2rem 1rem 1rem; }
}

/* ── EMAILMESSAGE (email client reading pane) ── */
.card.email-pane {
  background: var(--card);
  border-radius: var(--radius);
}
.card.email-pane .hd.hidden { display: none; }

.em-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.5rem 1.5rem .8rem;
}
.em-subject {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  flex: 1;
}
.em-date {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  padding-top: .15rem;
}

.em-participant {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 1.5rem;
}
.em-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.em-avatar-to {
  background: var(--muted);
}
.em-participant-info {
  display: flex;
  gap: .4rem;
  align-items: baseline;
}
.em-participant-role {
  font-size: .68rem;
  color: var(--muted-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.em-participant-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}

.em-divider {
  height: 1px;
  background: var(--line);
  margin: .6rem 1.5rem;
}

.em-body {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--ink-2);
  padding: 0 1.5rem .8rem;
}

.em-excerpt {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
  padding: .6rem 1.5rem;
  border-top: 1px solid var(--line-2);
  margin: 0 1.5rem;
  font-style: italic;
}

@media (max-width: 480px) {
  .em-header { padding: 1.2rem 1rem .6rem; }
  .em-subject { font-size: 1.05rem; }
  .em-participant { padding: .3rem 1rem; }
  .em-body { padding: 0 1rem .6rem; }
  .em-excerpt { padding: .5rem 1rem; margin: 0 1rem; }
}

/* ── MEDICALCONDITION (trustworthy patient-info page) ── */
.card.health-info {
  background: var(--card);
  border-radius: var(--radius);
  --hi-teal: #0d9488;
  --hi-teal-bg: rgba(13,148,136,.06);
  --hi-teal-border: rgba(13,148,136,.18);
}
.card.health-info .hd.hidden { display: none; }

.hi-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.5rem 1.5rem .8rem;
}
.hi-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hi-teal-bg);
  color: var(--hi-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.hi-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.hi-notice {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 1.5rem .8rem;
  padding: .5rem .8rem;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: .78rem;
  color: #92400e;
  line-height: 1.4;
}
.hi-notice-icon {
  font-size: .9rem;
  flex-shrink: 0;
}

.hi-section {
  padding: .5rem 1.5rem;
}
.hi-section + .hi-section {
  border-top: 1px solid var(--line-2);
}
.hi-section-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hi-teal);
  font-weight: 700;
  margin-bottom: .25rem;
}
.hi-section-body {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.hi-overview {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--muted);
  padding: .8rem 1.5rem;
  border-top: 1px solid var(--line);
  margin-top: .4rem;
}

.hi-footer {
  text-align: center;
  font-size: .7rem;
  color: var(--muted-2);
  padding: .8rem 1.5rem 1.2rem;
  letter-spacing: .02em;
}

@media (max-width: 480px) {
  .hi-header { padding: 1.2rem 1rem .6rem; }
  .hi-title { font-size: 1.05rem; }
  .hi-notice { margin: 0 1rem .6rem; }
  .hi-section { padding: .4rem 1rem; }
  .hi-overview { padding: .6rem 1rem; }
}

/* ── VideoGame — Steam store page ── */
.card.game-store {
  background: #1b2838;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
.card.game-store .hd.hidden { display: none; }

/* Banner with game art */
.gs-banner {
  position: relative;
  height: 360px;
  overflow: hidden;
  margin: 0;
}
.gs-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient scrim for text legibility */
.gs-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(27,40,56,0) 0%,
      rgba(27,40,56,.15) 40%,
      rgba(27,40,56,.7) 70%,
      rgba(27,40,56,.97) 95%,
      rgba(27,40,56,1) 100%
    );
  pointer-events: none;
}

/* Title + meta overlay on banner */
.gs-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1.5rem 1.2rem;
  z-index: 2;
}
.gs-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.gs-banner-meta {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .03em;
}

/* Body area — dark Steam surface */
.card.game-store .bd {
  background: #1b2838;
  color: rgba(255,255,255,.8);
  padding-top: .6rem;
}
.card.game-store .bd::before {
  display: none;
}

/* Tag chips */
.gs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .8rem;
}
.gs-tag {
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 3px;
  letter-spacing: .02em;
}
.gs-tag-genre {
  background: rgba(102,192,244,.12);
  color: #66c0f4;
  border: 1px solid rgba(102,192,244,.2);
}
.gs-tag-platform {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.08);
}

/* Price box + Add to Cart */
.gs-price-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .4rem 0 .8rem;
}
.gs-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(to bottom, #75b022 5%, #588a1b 95%);
  color: #d2efa0;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .55rem 1.4rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: background .15s;
}
.gs-cart-btn:hover {
  background: linear-gradient(to bottom, #8ed629 5%, #6ba022 95%);
  color: #fff;
}
.gs-cart-icon {
  font-size: .9rem;
}

/* Store blurb */
.gs-blurb {
  padding: .6rem 0 1rem;
}
.gs-blurb-label {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
  letter-spacing: .01em;
}
.gs-blurb-body {
  font-size: .84rem;
  line-height: 1.75;
  color: rgba(255,255,255,.65);
  margin: 0;
}

/* Edit/JSON-LD disclosure in dark theme */
.card.game-store details {
  border-color: rgba(255,255,255,.08);
}
.card.game-store summary {
  color: rgba(255,255,255,.4);
}
.card.game-store .row .k {
  color: rgba(255,255,255,.4);
}
.card.game-store .row .v {
  color: rgba(255,255,255,.75);
}

@media (max-width: 480px) {
  .gs-banner { height: 240px; }
  .gs-title { font-size: 1.5rem; }
  .gs-banner-overlay { padding: 0 1rem .8rem; }
  .gs-blurb { padding: .4rem 0 .8rem; }
}

/* ── SportsEvent — Matchday Scoreboard ── */
.card.scoreboard {
  border-color: rgba(22,163,74,.15);
  overflow: hidden;
}
.card.scoreboard .hd.hidden { display: none; }

/* Header band — bold competition name */
.sb-header-band {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem 1.5rem;
  background: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%);
  color: #fff;
}
.sb-header-icon {
  font-size: 1.1rem;
}
.sb-header-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* VS row — big centered matchup */
.sb-vs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem 1.5rem;
}
.sb-team {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  flex: 1;
  line-height: 1.2;
}
.sb-team-home { text-align: right; }
.sb-team-away { text-align: left; }
.sb-vs-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #166534, #15803d);
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow:
    0 4px 14px rgba(22,101,52,.45),
    inset 0 1px 0 rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.1);
}
.sb-event-big {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.sb-event-ball {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: .3rem;
}

/* Fixture info strip */
.sb-fixture-strip {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .6rem 1.5rem 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(22,163,74,.03);
}
.sb-fixture-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--ink-2);
}
.sb-fixture-icon {
  font-size: .9rem;
  width: 1.4rem;
  text-align: center;
}

/* Get Tickets CTA */
.sb-tickets-cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: .6rem 1.5rem;
  padding: .55rem 1.4rem;
  background: linear-gradient(to bottom, #16a34a 5%, #15803d 95%);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(22,101,52,.3);
  transition: background .15s;
}
.sb-tickets-cta:hover {
  background: linear-gradient(to bottom, #22c55e 5%, #16a34a 95%);
}

/* Match overview */
.sb-overview {
  padding: .4rem 1.5rem 1rem;
}
.sb-overview-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.sb-overview-body {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 480px) {
  .sb-header-band { padding: .6rem 1rem; }
  .sb-header-title { font-size: .85rem; }
  .sb-vs-row { gap: .8rem; padding: 1.5rem 1rem 1rem; }
  .sb-team { font-size: 1.1rem; }
  .sb-vs-badge { width: 2.5rem; height: 2.5rem; font-size: .65rem; }
  .sb-fixture-strip { padding: .5rem 1rem .8rem; }
  .sb-tickets-cta { margin: .5rem 1rem; }
  .sb-overview { padding: .4rem 1rem .8rem; }
}

/* ── Painting — Museum Gallery Placard ── */
.card.museum-placard {
  background: #1a1a1e;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
.card.museum-placard .hd.hidden { display: none; }

/* Gallery wall — dark, like a museum */
.mp-wall {
  padding: 2.5rem 2rem 1.5rem;
  display: flex;
  justify-content: center;
  background: linear-gradient(to bottom, #1a1a1e, #222226);
}

/* Subtle frame around the painting */
.mp-frame {
  display: inline-block;
  padding: 10px;
  background: #2a2a2e;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 2px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.4);
  max-width: 100%;
}
.mp-painting {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 1px;
}

/* Body area — dark gallery surface */
.card.museum-placard .bd {
  background: #1a1a1e;
  color: rgba(255,255,255,.7);
  padding-top: .8rem;
}
.card.museum-placard .bd::before {
  display: none;
}

/* Museum plaque */
.mp-plaque {
  text-align: center;
  padding: .8rem 1.5rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mp-artist {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .01em;
  margin-bottom: .25rem;
}
.mp-title {
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(255,255,255,.7);
  margin-bottom: .35rem;
}
.mp-meta {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.3);
}

/* Curator's notes */
.mp-curatorial {
  padding: .8rem 1.5rem 1rem;
}
.mp-curatorial-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.3);
  margin-bottom: .4rem;
}
.mp-curatorial-body {
  font-size: .84rem;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  margin: 0;
}

/* Edit/JSON-LD disclosure in dark theme */
.card.museum-placard details {
  border-color: rgba(255,255,255,.08);
}
.card.museum-placard summary {
  color: rgba(255,255,255,.35);
}
.card.museum-placard .row .k {
  color: rgba(255,255,255,.35);
}
.card.museum-placard .row .v {
  color: rgba(255,255,255,.7);
}

@media (max-width: 480px) {
  .mp-wall { padding: 1.5rem 1rem .8rem; }
  .mp-frame { padding: 6px; }
  .mp-plaque { padding: .6rem 1rem .8rem; }
  .mp-artist { font-size: .9rem; }
  .mp-title { font-size: 1rem; }
  .mp-curatorial { padding: .6rem 1rem .8rem; }
}

/* ── Drug — Medication Information Leaflet ── */
.card.med-leaflet {
  border-color: rgba(8,145,178,.12);
}
.card.med-leaflet .hd.hidden { display: none; }

/* Clinical header */
.ml-header {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.2rem 1.5rem .8rem;
}
.ml-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .15rem;
}
.ml-header-text {
  flex: 1;
}
.ml-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .2rem;
}
.ml-active {
  font-size: .82rem;
  font-weight: 600;
  color: #0891b2;
}

/* Spec strip — outlined boxes */
.ml-spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .4rem 1.5rem .8rem;
}
.ml-spec-box {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .5rem .7rem;
  background: rgba(8,145,178,.02);
}
.ml-spec-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-2);
  margin-bottom: .2rem;
}
.ml-spec-val {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.35;
}

/* Informational notice */
.ml-notice {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: 0 1.5rem .8rem;
  padding: .55rem .8rem;
  background: rgba(8,145,178,.06);
  border: 1px solid rgba(8,145,178,.12);
  border-radius: 6px;
  font-size: .76rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.ml-notice-icon {
  flex-shrink: 0;
  font-size: .85rem;
  line-height: 1.4;
}

/* Patient info body */
.ml-body {
  padding: .2rem 1.5rem 1rem;
}
.ml-body-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  margin-bottom: .4rem;
}
.ml-body-text {
  font-size: .84rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 480px) {
  .ml-header { padding: 1rem 1rem .6rem; gap: .6rem; }
  .ml-name { font-size: 1.05rem; }
  .ml-spec-strip { padding: .3rem 1rem .6rem; }
  .ml-spec-box { flex: 1 1 100%; }
  .ml-notice { margin: 0 1rem .6rem; }
  .ml-body { padding: .2rem 1rem .8rem; }
}

/* ── Occupation — Career Profile card ── */
.card.career-card {
  border-color: rgba(37,99,235,.1);
}
.card.career-card .hd.hidden { display: none; }

/* Header */
.cc-header {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.2rem 1.5rem .8rem;
}
.cc-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .15rem;
}
.cc-header-text {
  flex: 1;
}
.cc-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .4rem;
}
.cc-cat-chip {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 4px;
  background: rgba(37,99,235,.08);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.15);
  letter-spacing: .01em;
}

/* Salary band */
.cc-salary-box {
  margin: 0 1.5rem .8rem;
  padding: .8rem 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(37,99,235,.08));
  border: 1px solid rgba(37,99,235,.1);
  border-radius: 8px;
}
.cc-salary-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-2);
  margin-bottom: .25rem;
}
.cc-salary-val {
  font-size: 1rem;
  font-weight: 700;
  color: #2563eb;
  line-height: 1.4;
}

/* Section label (shared) */
.cc-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  margin-bottom: .4rem;
}

/* Skills as tag chips */
.cc-skill-section {
  padding: .2rem 1.5rem .6rem;
}
.cc-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.cc-skill-chip {
  font-size: .73rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 4px;
  background: rgba(37,99,235,.06);
  color: #2563eb;
  border: 1px solid rgba(37,99,235,.1);
}

/* Qualifications list */
.cc-qual-section {
  padding: .2rem 1.5rem .6rem;
}
.cc-qual-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc-qual-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: .25rem;
}
.cc-qual-list li::before {
  content: "\2713 ";
  position: absolute;
  left: 0;
  color: #2563eb;
  font-weight: 700;
}

/* Role overview */
.cc-overview {
  padding: .2rem 1.5rem 1rem;
}
.cc-overview-body {
  font-size: .84rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 480px) {
  .cc-header { padding: 1rem 1rem .6rem; gap: .6rem; }
  .cc-title { font-size: 1.1rem; }
  .cc-salary-box { margin: 0 1rem .6rem; padding: .6rem .8rem; }
  .cc-skill-section, .cc-qual-section, .cc-overview { padding-left: 1rem; padding-right: 1rem; }
}

/* ── TouristTrip — Travel Itinerary ── */
.card.itinerary-card {
  border-color: rgba(13,148,136,.12);
  overflow: hidden;
}
.card.itinerary-card .hd.hidden { display: none; }

/* Hero header */
.ti-hero {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.ti-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ti-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.1) 40%,
    rgba(0,0,0,.6) 70%,
    rgba(0,0,0,.88) 100%);
  pointer-events: none;
}
.ti-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1.5rem 1.2rem;
  z-index: 2;
}
.ti-hero-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: .2rem;
}
.ti-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Trip-style chips */
.ti-trip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .8rem 1.5rem .4rem;
}
.ti-trip-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .73rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 4px;
  background: rgba(13,148,136,.08);
  color: #0d9488;
  border: 1px solid rgba(13,148,136,.15);
}
.ti-chip-icon {
  font-size: .8rem;
}

/* Section label */
.ti-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  margin-bottom: .4rem;
}

/* Vertical timeline */
.ti-timeline {
  padding: .6rem 1.5rem .4rem;
  position: relative;
}
.ti-timeline::before {
  content: "";
  position: absolute;
  left: calc(1.5rem + 14px);
  top: 1.2rem;
  bottom: .8rem;
  width: 2px;
  background: linear-gradient(to bottom, #0d9488, #f59e0b);
  border-radius: 1px;
}
.ti-timeline-stop {
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  position: relative;
}
.ti-timeline-dot {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(13,148,136,.3);
  border: 2px solid var(--card-bg, #fff);
  z-index: 1;
}
.ti-timeline-content {
  flex: 1;
  padding-top: .15rem;
}
.ti-timeline-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #0d9488;
  margin-bottom: .2rem;
}
.ti-timeline-body {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* Overview fallback */
.ti-overview {
  padding: .6rem 1.5rem .8rem;
}
.ti-overview-body {
  font-size: .84rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* Book CTA */
.ti-book-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .4rem 1.5rem 1rem;
  padding: .6rem 1.4rem;
  background: linear-gradient(135deg, #0d9488, #f59e0b);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(13,148,136,.3);
  transition: filter .15s;
}
.ti-book-cta:hover {
  filter: brightness(1.1);
}

@media (max-width: 480px) {
  .ti-hero { height: 200px; }
  .ti-hero-title { font-size: 1.25rem; }
  .ti-hero-overlay { padding: 0 1rem .8rem; }
  .ti-trip-chips { padding: .6rem 1rem .3rem; }
  .ti-timeline { padding: .5rem 1rem .3rem; }
  .ti-timeline::before { left: calc(1rem + 14px); }
  .ti-overview { padding: .5rem 1rem .6rem; }
  .ti-book-cta { margin: .3rem 1rem .8rem; }
}

/* ── MusicPlaylist — Spotify Playlist page ── */
.card.playlist-page {
  background: #121212;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
.card.playlist-page .hd.hidden { display: none; }

/* Banner with cover art */
.pl-banner {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pl-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pl-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(18,18,18,.2) 0%,
    rgba(18,18,18,.4) 50%,
    rgba(18,18,18,.85) 85%,
    rgba(18,18,18,.98) 100%);
  pointer-events: none;
}
.pl-overlay {
  position: relative;
  z-index: 2;
  padding: 0 1.5rem 1.2rem;
  width: 100%;
}
.pl-badge {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.pl-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .4rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.pl-meta {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}

/* Body area — dark */
.card.playlist-page .bd {
  background: #121212;
  color: rgba(255,255,255,.7);
  padding-top: .4rem;
}
.card.playlist-page .bd::before {
  display: none;
}

/* Play button row */
.pl-play-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .4rem 1.5rem .6rem;
}
.pl-play-btn {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: #1db954;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(29,185,84,.4);
  transition: transform .1s, background .15s;
}
.pl-play-btn:hover {
  background: #1ed760;
  transform: scale(1.05);
}
.pl-play-icon {
  font-size: 1rem;
  margin-left: .15rem; /* optical centering of triangle */
}
.pl-listen-link {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .15s;
}
.pl-listen-link:hover {
  color: #fff;
}

/* Playlist blurb */
.pl-blurb {
  padding: .4rem 1.5rem 1rem;
}
.pl-blurb-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
  margin-bottom: .4rem;
}
.pl-blurb-body {
  font-size: .84rem;
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  margin: 0;
}

/* Edit/JSON-LD disclosure in dark theme */
.card.playlist-page details {
  border-color: rgba(255,255,255,.08);
}
.card.playlist-page summary {
  color: rgba(255,255,255,.35);
}
.card.playlist-page .row .k {
  color: rgba(255,255,255,.35);
}
.card.playlist-page .row .v {
  color: rgba(255,255,255,.7);
}

@media (max-width: 480px) {
  .pl-banner { min-height: 220px; }
  .pl-title { font-size: 1.4rem; }
  .pl-overlay { padding: 0 1rem .8rem; }
  .pl-play-row { padding: .3rem 1rem .5rem; }
  .pl-play-btn { width: 3rem; height: 3rem; }
  .pl-blurb { padding: .3rem 1rem .8rem; }
}

/* ── AggregateOffer — Price-Comparison card ── */
.card.price-compare {
  border-color: rgba(22,163,74,.1);
}
.card.price-compare .hd.hidden { display: none; }

/* Header */
.pc-header {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.2rem 1.5rem .6rem;
}
.pc-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .15rem;
}
.pc-header-text {
  flex: 1;
}
.pc-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .15rem;
}
.pc-seller {
  font-size: .78rem;
  color: var(--muted);
}

/* Price range box */
.pc-price-box {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 1.5rem .6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pc-price-low {
  flex: 1;
  padding: .8rem 1rem;
  background: linear-gradient(135deg, rgba(22,163,74,.06), rgba(22,163,74,.1));
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.pc-price-high {
  flex: 1;
  padding: .8rem 1rem;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  border-left: 1px solid var(--line);
}
.pc-price-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
}
.pc-price-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: #16a34a;
  line-height: 1.2;
}
.pc-price-val-high {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.2;
}

/* Offer count chip */
.pc-offer-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0 1.5rem .6rem;
  padding: .3rem .7rem;
  font-size: .73rem;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(22,163,74,.05);
  border: 1px solid rgba(22,163,74,.1);
  border-radius: 20px;
}
.pc-offer-icon {
  font-size: .8rem;
}

/* Section label */
.pc-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  margin-bottom: .4rem;
}

/* Price insights */
.pc-insights {
  padding: .2rem 1.5rem .8rem;
}
.pc-insights-body {
  font-size: .84rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* See All Deals CTA */
.pc-cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0 1.5rem 1rem;
  padding: .55rem 1.3rem;
  background: linear-gradient(to bottom, #16a34a 5%, #15803d 95%);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(22,101,52,.3);
  transition: filter .15s;
}
.pc-cta:hover {
  filter: brightness(1.1);
}

@media (max-width: 480px) {
  .pc-header { padding: 1rem 1rem .5rem; gap: .6rem; }
  .pc-title { font-size: 1.05rem; }
  .pc-price-box { margin: 0 1rem .5rem; flex-direction: column; }
  .pc-price-high { border-left: none; border-top: 1px solid var(--line); }
  .pc-price-val { font-size: 1.3rem; }
  .pc-offer-chip { margin: 0 1rem .5rem; }
  .pc-insights { padding: .2rem 1rem .6rem; }
  .pc-cta { margin: 0 1rem .8rem; }
}