@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800&display=swap');

:root {
  --purple: #6B21C8;
  --purple-bright: #8B5CF6;
  --purple-deep: #4C149E;
  --ink: #1B1330;
  --midnight: #0F071C;
  --lavender: #F7F2FF;
  --lilac: #EEE6FF;
  --border: #DFD4F5;
  --muted: #655D74;
  --paper: #FFFFFF;
  --kraft: #D8B68A;
  --forest: #123F35;
  --peach: #F7B28B;
  --success: #17875B;
  --warning: #B86D1F;
  --shadow-sm: 0 8px 28px rgba(66, 29, 120, 0.08);
  --shadow-lg: 0 28px 70px rgba(48, 18, 94, 0.16);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 2%, rgba(139, 92, 246, 0.18), transparent 31rem),
    linear-gradient(180deg, #FCFAFF 0%, var(--lavender) 52%, #FFFFFF 100%);
  font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Matches the main site. Without it everything inherits `normal`, which sets a
     different rhythm for buttons, nav links and card headings than the homepage. */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 1000;
  background: var(--midnight); color: #fff; padding: 12px 16px; border-radius: 10px;
}
.skip-link:focus { top: 16px; }

.shell { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }

/* Header and footer mirror the main site so the Spotlight reads as the same
   site. The values below are lifted from index.html: the site header is dark
   with near-white text, so a light header here would flip the whole bar as
   someone navigates from the homepage. */
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(8, 5, 18, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px);
}
.nav-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: #F7F3FF; font-weight: 700; font-size: 22px; letter-spacing: -.04em; }
.mark { width: 34px; height: 34px; border-radius: 11px; background: var(--purple); display: grid; place-items: center; box-shadow: 0 12px 28px rgba(107, 33, 200, .25); }
.mark svg { width: 22px; height: 22px; }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 650; }
.nav-links a { color: #F7F3FF; opacity: .84; transition: opacity .18s ease; }
.nav-links a:hover { opacity: 1; }
.nav-links .active { opacity: 1; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.new-badge { color: #fff; background: var(--purple); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 8px;
  font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; transition: .18s ease;
}
.btn-primary { background: linear-gradient(135deg, #7C3AED, #9333EA); color: #fff; box-shadow: 0 18px 35px rgba(124, 58, 237, .32); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(16px); }
.btn-ghost:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); transform: translateY(-1px); }
/* Same 8px radius as .btn in the header and as every button on the main site.
   Two different button radii on one page reads as two different designs. */
.button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 20px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); color: #fff; box-shadow: 0 12px 26px rgba(107, 33, 200, .25); }
.button-secondary { background: rgba(255,255,255,.72); border-color: var(--border); color: var(--ink); }
.button-quiet { min-height: 38px; padding: 0 14px; border-radius: 8px; color: var(--purple); background: var(--lilac); }
.button[disabled] { opacity: .45; cursor: default; }
.button[disabled]:hover { transform: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 6px; }
#explore, #suggest, #main { scroll-margin-top: 92px; }

.hero { padding: 84px 0 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr); align-items: center; gap: 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 0; color: var(--purple); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: none; display: none; }
.hero h1 { margin: 18px 0 18px; max-width: 760px; font-size: clamp(48px, 6.4vw, 84px); line-height: .93; letter-spacing: -.04em; }
.hero h1 span { color: var(--purple); }
.hero-copy { max-width: 700px; font-size: 19px; line-height: 1.65; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-art { position: relative; min-height: 520px; }
.hero-orbit { position: absolute; inset: 30px; border: 1px solid rgba(107, 33, 200, .18); border-radius: 50%; transform: rotate(-14deg); }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 8px rgba(107, 33, 200, .1); }
.hero-orbit::before { width: 12px; height: 12px; left: 16%; top: 6%; }
.hero-orbit::after { width: 10px; height: 10px; right: 4%; bottom: 24%; }
.hero-stack { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-card {
  position: absolute; width: 270px; min-height: 254px; padding: 18px; border: 1px solid rgba(255,255,255,.92); border-radius: 28px;
  color: var(--ink); background: rgba(255,255,255,.82); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px);
}
.hero-card strong { display: block; margin-top: 14px; font-size: 22px; letter-spacing: -.03em; }
.hero-card small { color: var(--muted); font-size: 13px; display: block; margin-top: 4px; }
.hero-card-image { width: 100%; height: 116px; object-fit: cover; object-position: center; border-radius: 20px; display: block; box-shadow: 0 10px 24px rgba(48, 18, 94, .10); }
/* The three cards overlap by design. z-index keeps each card's own label on
   top of the card behind it, so no title is ever half-covered. */
.hero-card.card-a { left: 4%; top: 8%; z-index: 1; transform: rotate(-7deg); }
.hero-card.card-b { right: 1%; top: 24%; z-index: 3; transform: rotate(7deg); }
.hero-card.card-c { left: 14%; bottom: 2%; z-index: 2; transform: rotate(3deg); }
/* Sits in the gap below the right-hand card so it never covers a card label. */
.hero-mark { position: absolute; right: 3%; bottom: 4%; width: 124px; height: 124px; border-radius: 34px; padding: 26px; background: linear-gradient(145deg, var(--purple-bright), var(--purple-deep)); box-shadow: 0 28px 70px rgba(76, 20, 158, .36); transform: rotate(-3deg); }
.hero-mark svg { width: 100%; height: 100%; }

.section { padding: 54px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.section-heading h2 { margin: 7px 0 0; max-width: 20ch; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.04em; line-height: 1; }
.section-heading p { margin: 0; max-width: 560px; color: var(--muted); line-height: 1.6; }

/* Three equal cards. The first used to be wider and taller, which made the three
   images different sizes; equal columns keeps the section calm. */
.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.featured-card {
  position: relative; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 30px;
  color: #fff; background: var(--midnight); box-shadow: var(--shadow-sm); isolation: isolate;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(67,25,119,.18); }
.featured-card:hover .featured-visit { text-decoration: underline; }
.featured-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--featured-gradient); }
/* The image fills the card and a scrim sits over it, so the title and vote
   count stay readable whatever the artwork is. */
.featured-card .featured-visual { position: absolute; inset: 0; z-index: -1; }
.featured-card .featured-visual .maker-image-wrap { min-height: 100%; height: 100%; background: none; }
.featured-card .featured-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,7,28,.16) 0%, rgba(15,7,28,.30) 42%, rgba(15,7,28,.86) 100%);
}
.featured-card .featured-visual .image-credit { display: none; }
.featured-card .content { position: relative; z-index: 1; min-height: 232px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.featured-card .topline { display: flex; justify-content: space-between; gap: 14px; align-items: center; font-weight: 700; font-size: 13px; text-shadow: 0 1px 12px rgba(15,7,28,.6); }
.featured-card .material-chip { color: var(--ink); background: rgba(255,255,255,.92); text-shadow: none; }
.featured-card h3 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(15,7,28,.55); }
.featured-card p { margin: 0; color: rgba(255,255,255,.86); line-height: 1.5; font-size: 14px; text-shadow: 0 1px 14px rgba(15,7,28,.55); }
.featured-visit { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 14px rgba(15,7,28,.55); }
.featured-credit { position: absolute; right: 14px; bottom: 12px; z-index: 2; padding: 5px 8px; border-radius: 8px; color: rgba(255,255,255,.72); background: rgba(15,7,28,.42); backdrop-filter: blur(6px); font-size: 10px; }

.explorer { padding-top: 70px; }
.explorer-panel { border: 1px solid var(--border); border-radius: 30px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-sm); overflow: hidden; }
.explorer-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 18px; padding: 24px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.78); }
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input { width: 100%; min-height: 48px; padding: 0 16px 0 48px; border: 1px solid var(--border); border-radius: 14px; outline: none; color: var(--ink); background: #fff; }
.search-input:focus { border-color: var(--purple-bright); box-shadow: 0 0 0 4px rgba(139,92,246,.13); }
.sort-select { min-height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); background: #fff; }
.filters { padding: 18px 24px 22px; display: flex; gap: 18px 30px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border); }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-label { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.filter-chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: #fff; font-weight: 650; cursor: pointer; transition: .18s; }
.filter-chip:hover { color: var(--purple); border-color: var(--purple-bright); }
.filter-chip.active { color: #fff; border-color: var(--purple); background: var(--purple); box-shadow: 0 8px 18px rgba(107,33,200,.18); }
.results-meta { padding: 18px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }

.spotlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; padding: 18px 24px 26px; }
.spotlight-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: #fff; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.spotlight-card:hover { transform: translateY(-4px); border-color: #C9B4F0; box-shadow: 0 20px 48px rgba(67,25,119,.12); }
.spotlight-card:hover .visit-link { text-decoration: underline; }
/* Whole-card link. The Visit maker anchor stretches over the card, so the card
   is clickable while the page still has exactly one link and one tab stop for
   it. The vote button is lifted above that layer so it stays its own control. */
.spotlight-card:focus-within { border-color: var(--purple-bright); }
.visit-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.spotlight-card .vote-button { position: relative; z-index: 2; }
/* Decorative labels must not swallow clicks meant for the card. */
.card-visual .material-chip, .card-visual .new-chip, .card-visual .image-credit { pointer-events: none; }
/* Fixed ratio so every card in a row lines up, whatever the image aspect. Kept
   shallow because these are concept illustrations, not the makers' own product
   photography: the words should carry the card. */
.card-visual { position: relative; aspect-ratio: 16 / 7; display: grid; place-items: center; overflow: hidden; background: var(--visual-bg); }
.card-visual::after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; transform: rotate(-15deg); }
.material-chip, .region-chip, .new-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.card-visual .material-chip { position: absolute; left: 14px; top: 14px; z-index: 3; color: var(--ink); background: rgba(255,255,255,.88); backdrop-filter: blur(8px); }
.new-chip { position: absolute; right: 14px; top: 14px; z-index: 3; color: #fff; background: var(--purple); }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.card-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.card-title-row h3 { margin: 0; min-width: 0; font-size: 21px; letter-spacing: -.03em; }
.location { margin-top: 5px; color: var(--muted); font-size: 12px; }
.card-description { flex: 1; margin: 14px 0 12px; color: var(--muted); line-height: 1.55; font-size: 15px; }
.proof { display: flex; align-items: center; gap: 8px; color: var(--forest); font-size: 12px; font-weight: 700; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #F0EBF9; }
.vote-button { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; font-weight: 700; }
.vote-button:hover { color: var(--purple); border-color: var(--purple-bright); }
.vote-button.voted { color: var(--purple); border-color: rgba(107,33,200,.25); background: var(--lilac); }
.vote-button[disabled] { opacity: .6; cursor: default; }
.vote-count { font-variant-numeric: tabular-nums; }
.visit-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--purple); font-size: 13px; font-weight: 800; }
.empty-state { display: none; padding: 56px 24px 60px; text-align: center; color: var(--muted); }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); font-size: 20px; letter-spacing: -.02em; }
.empty-state p { margin: 0 0 18px; }
.empty-state.visible { display: block; }
.gallery-note { margin: 0; padding: 0 24px 24px; color: var(--muted); font-size: 12px; line-height: 1.55; }

/* Material illustrations */

.how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-card { padding: 26px; border: 1px solid var(--border); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.how-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--purple), var(--purple-bright)); font-weight: 800; }
.how-card h3 { margin: 20px 0 8px; font-size: 21px; }
.how-card p { margin: 0; color: var(--muted); line-height: 1.55; }

.suggest-section { padding-bottom: 100px; }
.suggest-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; padding: 34px; border-radius: 34px; color: #fff; background: linear-gradient(135deg, var(--midnight), #311260 62%, var(--purple)); box-shadow: var(--shadow-lg); }
.suggest-copy h2 { margin: 12px 0 16px; font-size: clamp(34px, 4vw, 50px); line-height: 1.02; letter-spacing: -.045em; }
.suggest-copy p { max-width: 520px; color: rgba(255,255,255,.7); line-height: 1.65; }
.suggest-copy .eyebrow { color: #CDB6FF; }

.suggest-form { padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.09); backdrop-filter: blur(16px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; }
.field input, .field textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: #fff; background: rgba(255,255,255,.08); outline: none; }
.field input { min-height: 44px; padding: 0 13px; }
.field textarea { min-height: 94px; padding: 12px 13px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.42); }
.field input:focus, .field textarea:focus { border-color: #CDB6FF; box-shadow: 0 0 0 4px rgba(205,182,255,.12); }
.form-note { margin: 12px 0 0; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.6; }
.form-note a { color: #CDB6FF; text-decoration: underline; }
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { grid-column: 1 / -1; margin: 0; color: #FFC9C9; font-size: 13px; font-weight: 700; }

.footer { border-top: 1px solid rgba(107,33,200,.12); padding: 28px 0; color: #71677f; font-size: 14px; background: rgba(255,255,255,.7); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-inner b { display: block; color: var(--ink); font-size: 15px; }
.footer-inner span { display: block; margin-top: 4px; font-size: 13px; color: #766d86; }
.footer-url { display: block; margin-top: 8px; color: var(--purple); font-weight: 800; }
.footer-privacy { display: block; margin-top: 4px; color: #71677f; font-size: 13px; text-decoration: underline; }
.social-block { display: flex; align-items: center; gap: 14px; }
.social-block > span { margin: 0; color: #4C455C; font-weight: 700; font-size: 14px; }
.social-links { display: flex; gap: 10px; }
.social-links a { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: var(--purple); background: #fff; border: 1px solid rgba(107,33,200,.14); box-shadow: 0 10px 28px rgba(36,18,74,.07); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.social-links a:hover { transform: translateY(-2px); border-color: rgba(107,33,200,.28); box-shadow: 0 16px 35px rgba(36,18,74,.12); }
.social-links svg { width: 22px; height: 22px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; min-width: 280px; max-width: min(520px, calc(100% - 36px)); padding: 14px 18px; border-radius: 14px; color: #fff; background: var(--midnight); box-shadow: 0 18px 50px rgba(15,7,28,.35); opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .22s ease; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 460px; max-width: 620px; width: 100%; margin: 0 auto; }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  /* Third card fills the second row rather than leaving a gap beside it. */
  .featured-card:nth-child(3) { grid-column: 1 / -1; }
  .spotlight-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .shell, .wrap { width: min(100% - 26px, 1220px); }
  .nav-inner { min-height: 68px; height: auto; padding: 10px 0; }
  .brand { font-size: 19px; }
  .mark { width: 32px; height: 32px; border-radius: 10px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 0 13px; font-size: 13px; }
  .hero { padding-top: 58px; }
  .hero h1 { font-size: 50px; }
  .hero-art { min-height: 400px; }
  .hero-card { width: 220px; min-height: 212px; padding: 16px; }
  .hero-card strong { font-size: 18px; }
  .hero-card-image { height: 92px; border-radius: 16px; }
  .hero-mark { left: 38%; width: 112px; height: 112px; padding: 22px; }
  .featured-grid, .how-it-works, .suggest-panel, .form-grid { grid-template-columns: 1fr; }
  .featured-card:nth-child(3) { grid-column: auto; }
  .explorer-toolbar { grid-template-columns: 1fr; }
  .sort-select { width: 100%; }
  .spotlight-grid { grid-template-columns: 1fr; padding: 14px; }
  .filters, .explorer-toolbar { padding-left: 16px; padding-right: 16px; }
  .results-meta { padding-left: 16px; padding-right: 16px; }
  .section-heading { align-items: start; flex-direction: column; }
  .suggest-panel { padding: 22px; }
  .field.full { grid-column: auto; }
  .gallery-note { padding: 0 16px 20px; }
  .footer-inner { display: grid; gap: 18px; }
  .social-block { align-items: flex-start; flex-direction: column; gap: 10px; }
  .social-links a { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Approved maker image support */
.maker-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 190px;
  overflow: hidden;
  background: linear-gradient(145deg, #F7F2FF, #E9DEFF);
}
.maker-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.maker-image-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--purple-deep);
  background:
    radial-gradient(circle at 78% 18%, rgba(139,92,246,.28), transparent 35%),
    linear-gradient(145deg, #FCFAFF, #E9DEFF);
}
.maker-image-fallback span {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(145deg, var(--purple), var(--purple-bright));
  font-size: 36px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.maker-image-fallback small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.maker-image-wrap.image-failed .maker-image { display: none; }
.maker-image-wrap.image-failed .maker-image-fallback { display: grid; }
/* Kept small and quiet: the note under the gallery carries the full wording. */
.image-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 7px;
  border-radius: 7px;
  color: rgba(255,255,255,.82);
  background: rgba(15,7,28,.42);
  backdrop-filter: blur(6px);
  font-size: 9px;
  letter-spacing: .01em;
}
.featured-visual .maker-image-wrap { min-height: 100%; }
.card-visual .maker-image-wrap { position: absolute; inset: 0; min-height: 0; }