/* ============================================================
   Mini-site for a scraped RedGifs creator profile.
   Dark, mobile-first, mirrors the layout of the source profile:
   breadcrumb -> profile header -> tag chips -> tabs -> media grid.
   ============================================================ */

:root {
  --bg: #0b0b0d;
  --bg-2: #131317;
  --bg-3: #1b1b21;
  --bg-4: #23232b;
  --line: #2a2a33;
  --fg: #f3f3f6;
  --muted: #9a9aa6;
  --muted-2: #6f6f7b;
  --accent: #e6f95a;
  --accent-fg: #14160a;
  --danger: #ff6b81;
  --radius: 999px;
  --radius-card: 14px;
  --gap: 6px;
  /* Page gutter. Grows with the viewport - 16px on a phone is right, 16px on a
     laptop is a page with no margins at all, which is how it looked. */
  --pad-l: max(16px, env(safe-area-inset-left, 0px));
  --pad-r: max(16px, env(safe-area-inset-right, 0px));
  --tap: 44px;
  /* Height of the sticky top bar (incl. the notch inset). */
  --topbar-h: calc(60px + env(safe-area-inset-top, 0px));
  /* Everything that sits above the player on a post page: top bar, breadcrumb
     and the layout's own top padding. */
  --post-chrome: calc(var(--topbar-h) + 66px);
  /* Tallest the post player may get; its WIDTH is derived from this cap, so the
     video keeps its exact aspect ratio on every screen instead of being
     stretched into a square. Fallback for browsers without svh. */
  --player-max: calc(92vh - var(--post-chrome));
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The `hidden` attribute has to win. Several components here set `display` on the
   very element that is toggled with `hidden` (the favorites badge is one), and an
   author `display` beats the user-agent rule - so a "hidden" element stayed on
   screen: the favorites badge showed "0" to every visitor without favorites. */
[hidden] { display: none !important; }

/* svh = viewport height with the browser UI expanded, so the player always fits
   without waiting for the mobile URL bar to collapse (dvh would resize it
   mid-scroll). */
@supports (height: 100svh) {
  :root { --player-max: calc(100svh - var(--post-chrome)); }
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
img, video { display: block; }

/* Written as .wrap.wrap on purpose. Elements carry several classes
   (`class="wrap block"`, `wrap hero`, `crumb wrap`, `wrap post-layout`), and any
   of those companions may set a padding shorthand - `.block { padding: 26px 0 }`
   - which, coming later in this file at equal specificity, silently zeroed the
   left and right gutter. Double class beats all of them regardless of order, so
   the page margins cannot be wiped by an unrelated rule again. */
.wrap.wrap {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

@media (min-width: 700px) {
  :root {
    --pad-l: max(24px, env(safe-area-inset-left, 0px));
    --pad-r: max(24px, env(safe-area-inset-right, 0px));
  }
}
@media (min-width: 1200px) {
  :root {
    --pad-l: max(32px, env(safe-area-inset-left, 0px));
    --pad-r: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- top bar ---------- */
/* On a phone the brand, three nav links and the search field do not fit on one
   row: the row overflowed by ~50px, which in turn made the *whole page* wider
   than the screen (the cards looked cut off for that reason). Wrapping the
   search onto its own row is the standard phone pattern and nothing is hidden. */
/* The logo is an image: one height per breakpoint, width follows the intrinsic
   ratio, and the square X mark replaces the wordmark when the row is too narrow
   for both it and the nav. */
.brand-logo { display: block; height: 26px; width: auto; }
.brand-mark { display: none; height: 26px; width: auto; }
@media (max-width: 760px) {
  .brand-logo, .brand-mark { height: 22px; }
}
@media (max-width: 380px) {
  .brand-logo { display: none; }
  .brand-mark { display: block; }
  .brand-logo, .brand-mark { height: 22px; }
}

@media (max-width: 760px) {
  /* Two rows on a phone: logo and search on the first, the nav centred on the
     second. Putting the search on its own row instead pushed the nav down as
     well, and the header grew to three rows on the most common phone widths. */
  .topbar .wrap { flex-wrap: wrap; row-gap: 8px; padding-bottom: 8px; }
  .topbar .search-host { order: 2; flex: 1 1 140px; max-width: none; }
  .topbar .mainnav { order: 3; flex: 1 0 100%; margin-left: 0; justify-content: center; }
}
/* On a phone the logo and the three nav links have to share one row or the
   header grows to three rows: the wordmark and the links are both made a little
   smaller, and only below 380px does the square X mark take over from the
   wordmark. */
@media (max-width: 480px) {
  .brand-logo, .brand-mark { height: 18px; }
  .mainnav a { padding: 7px 5px; font-size: 12.5px; }
  .topbar .wrap { gap: 8px; }
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 11, 13, .92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 10px;
  min-height: 60px;
  padding-top: env(safe-area-inset-top);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.search {
  flex: 1; min-width: 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  outline: none;
  min-height: var(--tap);
}
.search::placeholder { color: var(--muted-2); }
.search:focus { border-color: #3a3a46; background: var(--bg-4); }
.topbar .ghost {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px; min-height: var(--tap); cursor: pointer; white-space: nowrap;
}
.topbar .ghost:hover { background: var(--bg-4); }

/* ---------- breadcrumb ---------- */
.crumb {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px;
  padding: 16px 0 6px;
}
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb .sep { color: var(--muted-2); }
.crumb b { color: var(--fg); font-weight: 600; }

/* ---------- profile header ---------- */
.profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "avatar who more"
    "stats stats stats"
    "actions actions actions";
  align-items: center;
  gap: 14px 16px;
  padding: 10px 0 4px;
}
.avatar {
  grid-area: avatar;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted-2); overflow: hidden;
  flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who { grid-area: who; min-width: 0; }
.who h1 {
  margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.who .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.more {
  grid-area: more; align-self: start;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer; color: var(--muted);
}
.more:hover { background: var(--bg-4); color: var(--fg); }

.stats {
  grid-area: stats;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 4px 0 2px;
  text-align: left;
}
.stats div { min-width: 0; }
.stats dt { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.stats dd { margin: 0; color: var(--muted); font-size: 12.5px; }

.actions { grid-area: actions; display: flex; align-items: center; gap: 10px; }
.follow {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg);
  font-weight: 700; letter-spacing: -.01em; border: 0; cursor: pointer;
}
.follow:hover { filter: brightness(1.06); }
.social {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--fg); cursor: pointer;
}
.social:hover { background: var(--bg-4); }
.social svg { width: 20px; height: 20px; }

.badge-verified { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* ---------- tag chips ---------- */
.tagblock { padding: 18px 0 6px; }
.tagblock .label { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  border-radius: var(--radius); padding: 8px 15px; cursor: pointer;
  font-size: 13px; white-space: nowrap; min-height: 36px;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: var(--bg-3); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.chip.ghost-chip { color: var(--muted); }

/* ---------- tabs ---------- */
.tabs {
  display: flex; justify-content: center; gap: 28px;
  border-bottom: 1px solid var(--line); margin-top: 6px;
  position: sticky; top: var(--topbar-h); z-index: 20;
  background: var(--bg);
}
.tab {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: 14px 2px 12px; font-size: 16px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.tab .count { color: var(--muted-2); font-weight: 400; font-size: 12px; margin-left: 6px; }

/* ---------- grid ---------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 4px; color: var(--muted); font-size: 13px;
}
.toolbar .spacer { flex: 1; }
.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.result-count { color: var(--muted-2); }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  padding: 10px 0 24px;
}
@media (min-width: 560px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, 1fr); } }

/* Every tile is 3:4 portrait, on phones, tablets and desktop alike - like an
   Instagram feed. Vertical video is 9:16, so a portrait tile crops far less of
   it than a square one. */
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-card); background: var(--bg-3);
  aspect-ratio: 3 / 4; cursor: pointer; border: 0; padding: 0;
}
.tile img, .tile video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .35s ease;
}
.tile img { z-index: 0; }
/* The preview <video> is inserted before the <img>, and the image is opaque, so
   without an explicit z-index the image paints on top and the playing video is
   invisible. Badges stay above both. */
.tile video { z-index: 1; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
.tile video { opacity: 0; transition: opacity .25s ease; }
.tile.playing video { opacity: 1; }
.tile .meta {
  z-index: 2;
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 22px 10px 8px; font-size: 12px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  opacity: 0; transition: opacity .2s ease;
}
.tile:hover .meta, .tile:focus-visible .meta { opacity: 1; }
.tile .meta .m { display: inline-flex; align-items: center; gap: 4px; }
.tile .dur {
  z-index: 2;
  position: absolute; right: 8px; top: 8px;
  background: rgba(0,0,0,.6); border-radius: 6px; padding: 2px 6px; font-size: 11px;
}
.tile .flag {
  z-index: 2;
  position: absolute; left: 8px; top: 8px;
  background: rgba(0,0,0,.6); border-radius: 6px; padding: 2px 6px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}

.more-wrap { display: flex; justify-content: center; padding: 4px 0 48px; }
.load-more {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: var(--radius); padding: 13px 30px; cursor: pointer; min-height: var(--tap);
}
.load-more:hover { background: var(--bg-4); }
.empty { padding: 56px 16px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--fg); font-size: 17px; margin-bottom: 6px; }

/* ---------- post page ---------- */
.post-layout { padding: 10px 0 calc(48px + env(safe-area-inset-bottom, 0px)); }

/* Two columns on wide screens, and also on short landscape screens (phones
   held sideways), where stacking would force endless scrolling. */
@media (min-width: 1000px),
       (orientation: landscape) and (min-width: 600px) and (max-height: 600px) {
  .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 32px; align-items: start;
  }
  .post-side { padding-top: 0; }
}
/* The player is sized from its height cap: width = cap * (w/h).
   Capping only the height (max-height) would leave the width at 100% and turn
   a vertical video into a square box, which is what made the post page look
   wrong. Deriving the width keeps the real aspect ratio at any viewport. */
.player {
  position: relative;
  width: min(100%, calc(var(--player-max) * var(--ar, 0.5625)));
  aspect-ratio: var(--ar, 0.5625);
  margin: 0 auto;
  background: #000; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* Shown when the remembered sound setting could not be applied because the
   browser blocks audible autoplay before any user interaction. */
.unmute-hint {
  position: absolute; left: 12px; bottom: 64px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-fg);
  border: 0; border-radius: 999px; padding: 9px 15px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.unmute-hint:hover { filter: brightness(1.06); }

.qswitch {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
}
.qbtn {
  border: 0; background: transparent; color: #d6d6e0; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 999px; line-height: 1.3;
}
.qbtn:hover { color: #fff; }
.qbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

.player video.media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; display: block;
}

.post-side { min-width: 0; padding-top: 20px; }
.post-side h1 { font-size: 21px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.01em; }
.statrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pill {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 13px; font-size: 13px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.pill b { color: var(--fg); font-weight: 600; }
.section { border-top: 1px solid var(--line); padding: 18px 0; }
.section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
/* Copy button lives in its own bar above the code so it can never sit on top
   of the snippet, however long the snippet is. */
.code {
  background: #0e0e12; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.code-bar { display: flex; justify-content: flex-end; padding: 8px 8px 0; }
.code code {
  display: block; padding: 10px 14px 14px; overflow-x: auto; white-space: pre;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #c6c6d2;
}
.copy {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
.copy:hover { background: var(--bg-4); }
/* ---------- share sheet ---------- */
.share-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: var(--radius); padding: 11px 20px; min-height: var(--tap);
  font-size: 15px; font-weight: 600; cursor: pointer; margin: 2px 0 4px;
}
.share-open:hover { background: var(--bg-4); }
@media (max-width: 560px) { .share-open { width: 100%; } }

.sheet {
  background: #15151a; color: var(--fg);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(520px, 92vw); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.sheet::backdrop { background: rgba(0, 0, 0, .62); }
@media (max-width: 560px) {
  .sheet {
    width: 100%; max-width: none; margin: auto 0 0;
    border-radius: 18px 18px 0 0; border-bottom: 0;
  }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sheet-close {
  width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0;
  color: var(--fg); cursor: pointer; display: grid; place-items: center;
}
.sheet-close:hover { background: var(--bg-3); }
.sheet-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--bg-3); border: 1px solid transparent; color: var(--fg);
  border-radius: 13px; padding: 13px 16px; margin-bottom: 10px;
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none;
}
.sheet-row:hover { background: var(--bg-4); }
.sheet-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; }
.sheet-ico svg { width: 20px; height: 20px; }
.sheet-ico.badge { background: #d7d7dd; color: #15151a; }
.sheet-sep { margin: 20px 0 10px; font-size: 15px; font-weight: 600; }
.sheet-embed { margin: 2px 0 6px; }
.sheet-embed .code code { white-space: pre-wrap; word-break: break-all; }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px); z-index: 100;
  background: #e9e9ef; color: #15151a; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Prev/next buttons drawn over the player (same idea as the arrows in the
   RedGifs player). Plain links, so they also work without JS. */
.pnav {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
}
.pnav a, .pnav span {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
  color: #e8e8ef; font-size: 15px; line-height: 1;
}
.pnav a:hover { background: rgba(0, 0, 0, .78); color: #fff; }
.pnav span { opacity: .3; }

.pager { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0 0; }
.pager a { color: var(--muted); font-size: 13px; }
.pager a:hover { color: var(--fg); }
.pager .off { color: var(--muted-2); font-size: 13px; opacity: .5; }

.keyhint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .keyhint { display: block; color: var(--muted-2); font-size: 12px; margin: 8px 0 0; }
}
.keyhint kbd {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font: inherit; font-size: 11px; margin: 0 1px;
}

/* Phones: the player goes edge to edge with no card chrome, matching the
   native app view, and the metadata keeps its own gutter. */
@media (max-width: 700px) {
  /* Three classes: this must beat the .wrap.wrap gutter above. */
  .wrap.wrap.post-layout { padding-left: 0; padding-right: 0; }
  .wrap.wrap.post-layout > .player { border-radius: 0; border-left: 0; border-right: 0; }
  .post-side {
    padding-left: var(--pad-l);
    padding-right: var(--pad-r);
  }
}

/* Profile header on phones: Follow takes its own full-width row and the social
   buttons drop onto the next line, as in the reference design. */
@media (max-width: 560px) {
  .actions { flex-wrap: wrap; }
  .follow { flex: 1 0 100%; }
}

.related .grid { padding-top: 4px; }
@media (max-width: 420px) {
  .post-side h1 { font-size: 19px; }
  .statrow .pill { font-size: 12px; padding: 6px 11px; }
  .links a { font-size: 12px; padding: 8px 12px; }
}

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line); margin-top: 20px;
  padding: 22px 0 calc(30px + env(safe-area-inset-bottom));
  color: var(--muted-2); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center;
}
.site-foot a { text-decoration: underline; text-underline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Multi-model structure: navigation, model cards, page headings
   ============================================================ */
.mainnav { display: flex; gap: 6px; flex: none; }
.mainnav a {
  color: var(--muted); font-size: 14px; font-weight: 600; padding: 9px 12px;
  border-radius: var(--radius); white-space: nowrap;
}
.mainnav a:hover { color: var(--fg); background: var(--bg-3); }
@media (max-width: 620px) {
  .mainnav a { padding: 9px 8px; font-size: 13px; }
  .topbar .brand { font-size: 14px; }
}

.hero { padding: 34px 0 10px; }
.hero h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: -.02em; }
.lede { color: var(--muted); font-size: 15px; margin: 0; max-width: 70ch; line-height: 1.55; }
.lede a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.block { padding: 26px 0; }
.section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin: 0 0 14px; font-weight: 600;
}
.section-title a { color: var(--fg); text-decoration: none; }
.section-title .c, .chip .c, .page-title .c { color: var(--muted-2); font-weight: 400; }
.page-title { margin: 0 0 10px; font-size: 26px; letter-spacing: -.02em; }
.page-title .c { font-size: 15px; margin-left: 8px; }

/* Cards on /models/. Two per row on a phone, then as many as fit on a desktop -
   three across at tablet width, which is what the layout is designed around. */
.model-list { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the compact "similar creators" list on a profile: same cards, smaller cells */
.model-list.similar-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
@media (min-width: 700px) { .model-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1180px) { .model-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.model-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; min-height: 72px;
}
.model-card:hover { background: var(--bg-3); border-color: #3a3a46; }
.model-card .avatar.small { width: 46px; height: 46px; }
.model-card .avatar.small svg { width: 24px; height: 24px; }
.model-card .model-meta { display: flex; align-items: center; gap: 7px; font-size: 16px; }
.model-card b { font-weight: 700; }
.model-card .model-stats { margin-left: auto; color: var(--muted); font-size: 12.5px; text-align: right; }
@media (max-width: 520px) { .model-card .model-stats { display: none; } }

.foot-links a { text-decoration: underline; text-underline-offset: 3px; }

.crumb a { color: var(--muted); }
.crumb b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }

.toolbar { padding-top: 10px; }

/* ============================================================
   View modes: view switch, quick view (over the grid), reels
   ============================================================ */
.viewswitch {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
}
.vbtn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  min-height: 34px;
}
.vbtn:hover { color: var(--fg); }
.vbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

.chip.sm { font-size: 12px; padding: 6px 11px; min-height: 30px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 14px;
  border: 0; border-radius: var(--radius); padding: 11px 18px; min-height: 42px; cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-4); }

/* ---------- quick view ---------- */
.qv { position: fixed; inset: 0; z-index: 120; display: none; }
.qv.open { display: block; }
.qv-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .88); backdrop-filter: blur(4px); }
.qv-box {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 24px; max-width: 1240px; margin: 0 auto;
}
.qv-media { min-width: 0; display: flex; align-items: center; justify-content: center; }
.qv-player { position: relative; display: inline-block; }
.qv-player .qswitch { top: 12px; right: 12px; }
.qv-media video {
  max-height: 86vh; max-width: min(56vw, 620px); width: auto;
  border-radius: var(--radius-card); background: #000; display: block;
}
.qv-side { width: 340px; flex: none; align-self: center; }
.qv-title { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.qv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 12px; }
/* Fixed, so it stays reachable while the panel scrolls on small screens, and
   the icon never eats the click. */
.qv-close {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.qv-close svg, .qv-nav svg, .reels-close svg { pointer-events: none; }
.qv-close:hover { background: rgba(255, 255, 255, .28); }
.qv-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.qv-nav:hover { background: rgba(255, 255, 255, .2); }
.qv-nav.prev { left: 12px; }
.qv-nav.next { right: 12px; }
@media (max-width: 900px) {
  .qv-box { flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; justify-content: flex-start; }
  .qv-player { position: relative; display: inline-block; }
.qv-player .qswitch { top: 12px; right: 12px; }
.qv-media video { max-height: 56vh; max-width: 100%; }
  .qv-side { width: 100%; }
  .qv-nav { top: auto; bottom: 14px; transform: none; }
}

/* ---------- reels ---------- */
.reels { position: fixed; inset: 0; z-index: 130; background: #000; display: none; }
.reels.open { display: block; }
.reels-scroll {
  height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory;
  overscroll-behavior: contain; scrollbar-width: none;
}
.reels-scroll::-webkit-scrollbar { display: none; }
.reel {
  position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; background: #000; overflow: hidden;
}
.reel-video { max-height: 100dvh; max-width: 100vw; width: auto; background: #000; cursor: pointer; }
.reel-info {
  position: absolute; left: 0; right: 74px; bottom: 54px; z-index: 2;
  padding: 60px 16px 8px; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}
.reel-info > * { pointer-events: auto; }
.reel-author {
  display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700;
  color: #fff; text-decoration: none; margin-bottom: 8px;
}
.reel-author .avatar.xs {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; color: #fff;
}
.reel-title { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #f0f0f4; max-width: 60ch; }
.reel-info .chip.sm {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff;
}
.reel-info .chip.sm:hover { background: rgba(255, 255, 255, .22); }
.reel-rail {
  position: absolute; right: 12px; bottom: 110px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff;
}
.rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; }
.rail-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
  text-decoration: none;
}
.rail-btn:hover { background: rgba(255, 255, 255, .24); }
.reel-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
  background: rgba(255, 255, 255, .2); cursor: pointer;
}
.reel-progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.reel-count {
  position: absolute; right: 64px; top: 22px; z-index: 2; color: #fff;
  font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .5);
  padding: 4px 10px; border-radius: 999px;
}
.reels-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.reels-close:hover { background: rgba(0, 0, 0, .8); }
.reels-nav {
  position: absolute; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
}
.reels-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.reels-nav button:hover { background: rgba(0, 0, 0, .8); }
@media (max-width: 620px) {
  .reel-info { bottom: 46px; padding-top: 80px; }
  .reel-rail { bottom: 96px; gap: 14px; }
}

/* ---------- avatars ---------- */
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.xs {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3);
  border: 1px solid var(--line); display: grid; place-items: center;
  overflow: hidden; flex: none;
}
.avatar.xs svg { width: 16px; height: 16px; }
.avatar.xs img { width: 100%; height: 100%; object-fit: cover; }
.creator { margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.creator a {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 14.5px;
}
.creator a:hover .creator-name { text-decoration: underline; text-underline-offset: 3px; }
.creator .dim { font-size: 13px; color: var(--muted); }
.reel-author .avatar.xs { width: 34px; height: 34px; }
.model-card .avatar.small img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- favorites ---------- */
.fav-badge {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-fg);
  font-size: 11px; font-weight: 700; text-align: center;
}
.fav-link.on { color: var(--fg); }
/* Saved / active toggle.
   Tonal rather than solid, so it does not compete with the primary action, and
   every :hover rule is spelled out - ".btn.ghost:hover" is more specific than
   "button.btn.on" and used to repaint the background dark while the text stayed
   dark, which made the button unreadable. */
button.btn.on,
button.btn.ghost.on,
button.share-open.on,
button.rail-btn.on {
  background: rgba(230, 249, 90, .14);
  color: var(--accent);
  border-color: rgba(230, 249, 90, .45);
}
button.btn.on:hover,
button.btn.ghost.on:hover,
button.share-open.on:hover,
button.rail-btn.on:hover {
  background: rgba(230, 249, 90, .26);
  color: var(--accent);
  border-color: rgba(230, 249, 90, .65);
}
button.btn.on .fav-label, button.share-open.on .fav-label { color: var(--accent); }
.post-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-actions .share-open { flex: 1 1 auto; }

.linkish {
  background: none; border: 0; color: var(--fg); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font: inherit; padding: 0;
}
.fav-filters { margin-top: 6px; }
.filter-group { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.filter-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; min-width: 62px; }
.filter-group .chips { flex: 1; }
.fav-filters .toolbar { padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- live counters ---------- */
.likebtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: var(--radius); padding: 7px 14px; font-size: 13px; min-height: 36px;
}
.likebtn:hover { background: var(--bg-4); }
.likebtn.on { background: #ff4d6d; border-color: #ff4d6d; color: #fff; }
.likebtn.on:hover { background: #ff5f7c; border-color: #ff5f7c; }
.likebtn b { font-weight: 700; }
.plus {
  color: var(--accent); font-size: 11.5px; font-weight: 600; margin-left: 2px;
}
.likebtn.on .plus { color: #fff; }
.pill .plus { margin-left: 4px; }

/* ---------- global search ---------- */
.search-host { position: relative; flex: 1; min-width: 0; }
.search-host.big { max-width: 560px; margin-bottom: 18px; }
.search-host .search { width: 100%; }
@media (max-width: 900px) { .search-host { max-width: 220px; } }

.sresults {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.sresult {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; color: var(--fg);
}
.sresult:hover, .sresult:focus { background: var(--bg-3); }
.sresult.empty { color: var(--muted-2); }
.s-kind {
  flex: none; width: 46px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2);
}
.s-kind.model { color: var(--accent); }
.s-kind.tag { color: #7fd4a0; }
.s-kind.post { color: #8ab4f8; }
.s-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-meta { flex: none; color: var(--muted-2); font-size: 11.5px; }
#search-results .grid { padding-top: 8px; }

/* ---------------------------------------------------------------------------
   profile edits: a display name, a hand-written description, real links
   --------------------------------------------------------------------------- */
.profile .handle { color: var(--muted); font-size: 15px; font-weight: 500; margin-left: 6px; }
.model-meta .handle { color: var(--muted-2); font-size: 12px; font-weight: 500; }

/* label + icon, so a link that RedGifs does not know about still reads as one */
.social.labelled {
  width: auto; min-width: 46px; padding: 0 14px; gap: 8px;
  display: inline-flex; align-items: center; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.social.labelled span { color: var(--fg); }

.model-desc {
  margin: 18px 0 0; padding: 14px 16px; max-width: 78ch;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--fg); opacity: .92; font-size: 14.5px; line-height: 1.6;
}

.chip.pinned { border-color: var(--accent); color: var(--accent); }
.chip.pinned .c { color: var(--accent); opacity: .75; }


/* ---------------------------------------------------------------------------
   model tiles: the card style of /models/ (avatar, name, one line, button)
   --------------------------------------------------------------------------- */
/* The card is a grid with fixed bands, not a flex column: with a flex column every
   card laid itself out around its own content, so an extra "N new" badge or a
   one-line description moved the name, the circles and the button to a different
   height in each card. Now row N is at the same y in every card of the row. */
.model-tile {
  display: grid;
  /* minmax(0, 1fr) and min-width: 0 are load-bearing: without them the tile's
     implicit column is sized to the widest content (a long description is one
     long line under -webkit-box), the column ends up wider than the card, and
     the button, the subtitle and the circles hang out of the card - which also
     made the whole page wider than the screen on a phone. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 96px 1.6em 2.8em 2.8em 42px auto;
  min-width: 0;
  row-gap: 7px;
  justify-items: center; align-content: start;
  text-align: center;
  padding: 18px 16px 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .15s, background .15s;
}
.model-tile:hover { background: var(--bg-3); border-color: #3a3a46; }

.avatar.xl {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted-2); overflow: hidden;
}
.avatar.xl img { width: 100%; height: 100%; object-fit: cover; }
.avatar.xl svg { width: 44px; height: 44px; }
.mt-avatar { display: block; }

.mt-name {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--fg);
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-name:hover { text-decoration: underline; }
.mt-sub {
  /* exactly two lines of room whether the text is one line or two */
  margin: 0; max-width: 100%; color: var(--muted); font-size: 13px; line-height: 1.4;
  height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; align-self: start;
}
.mt-stats {
  /* Two lines of room, like the description: "80 posts · 14.6K followers" does
     not fit on one line inside a two-column card on a small phone, and a
     nowrap line pushed the card (and the page) wider than the screen. */
  margin: 0; color: var(--muted-2); font-size: 11.5px; line-height: 1.4;
  height: 2.8em; overflow: hidden; max-width: 100%;
}
.mt-btn {
  margin-top: 2px; width: 100%; min-height: 42px; align-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-fg);
  font-weight: 700; font-size: 14.5px; letter-spacing: -.01em;
  border-radius: var(--radius); border: 0;
}
.mt-btn:hover { filter: brightness(1.06); }
@media (max-width: 420px) {
  .model-tile { padding: 16px 12px 12px; }
  .avatar.xl { width: 76px; height: 76px; }
  .mt-btn { min-height: 38px; font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   Tag strip on a model profile: one row that scrolls sideways, with arrows.
   Wrapping a long tag list pushed the posts grid far down the page and looked
   different on every screen width; a single row with a scroll bar behaves the
   same everywhere and keeps the profile compact. Arrows appear only when there
   is something to scroll to, and swipe still works on a touch screen.
   --------------------------------------------------------------------------- */
.chipstrip { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

.cs-track {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 8px; align-items: center;
  /* No CSS scroll-behavior here: with it set, scrollBy({behavior:'smooth'}) from
     the arrow buttons does not animate at all (measured: stays at 0). The
     animation is requested per call instead, where it is actually wanted. */
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 4px 2px;
  /* the row is scrolled by swipe or by the arrows, never by a visible bar */
  scrollbar-width: none; -ms-overflow-style: none;
}
.cs-track::-webkit-scrollbar { display: none; }
.cs-track .chip { flex: 0 0 auto; }
.cs-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }

/* Fade an edge only when the row actually continues past it: a permanent fade
   would dim the first chip at the start, where there is nothing to the left. */
.cs-track[data-fade-left],
.cs-track[data-fade-right] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px);
  mask-image: linear-gradient(to right, transparent 0, #000 16px);
}
.cs-track[data-fade-right] {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 16px);
  mask-image: linear-gradient(to left, transparent 0, #000 16px);
}
.cs-track[data-fade-left][data-fade-right] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px,
                      #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16px,
              #000 calc(100% - 16px), transparent 100%);
}

.cs-btn {
  flex: none; width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: 50%; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.cs-btn:hover { background: var(--bg-4); }
.cs-btn svg { width: 18px; height: 18px; }
.cs-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 520px) {
  .cs-btn { width: 32px; height: 32px; }
  .cs-btn svg { width: 16px; height: 16px; }
  .cs-track { gap: 6px; }
}

/* ---------------------------------------------------------------------------
   creators directory (/creators/): search, sort buttons, "N new" badge
   --------------------------------------------------------------------------- */
.dir-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 18px;
}
.dir-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 340px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 12px; min-height: 38px;
}
.dir-search:focus-within { border-color: var(--accent); }
.dir-search svg { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
.dir-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--fg); font-size: 14px; height: 36px;
}
.dir-search input::-webkit-search-cancel-button { filter: invert(.6); }

.sortswitch {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); flex-wrap: wrap;
}
.dir-toolbar .result-count { margin-left: auto; }

/* how many of this creator's posts are from the last week */
.mt-new {
  position: absolute; top: 10px; right: 12px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  border-radius: 999px; padding: 3px 9px;
}
@media (max-width: 620px) {
  .dir-search { max-width: none; flex-basis: 100%; }
  .dir-toolbar .result-count { margin-left: 0; }
  .sortswitch .vbtn { padding: 6px 9px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------------------
   Post circles on a creator card: her newest posts as overlapping avatars.
   On a hover device the row spreads, the circle under the cursor grows 20% and
   a small preview of that post appears in the media's own shape. On a touch
   screen there is nothing to hover, so a tap simply opens the post.
   --------------------------------------------------------------------------- */
.mt-posts {
  display: flex; align-items: center; justify-content: center;
  height: 42px; margin: 0; max-width: 100%;
}
.mt-post {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%; overflow: visible;
  margin-left: -16px;                    /* overlap, like a face pile */
  transition: transform .18s ease, margin-left .18s ease;
}
.mt-post:first-child { margin-left: 0; }
.mt-circle {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--bg-2); background: var(--bg-3);
  transition: transform .18s ease, border-color .18s ease;
}
.model-tile:hover .mt-circle { border-color: var(--bg-3); }
.mt-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  /* the card must be able to paint outside itself, or the preview is clipped */
  .model-tile { position: relative; }
  .model-tile:hover { z-index: 6; }

  /* Only the circle grows: scaling the whole link would scale the tooltip inside
     it too, and the preview should stay the size it was designed at. */
  .mt-post:hover { z-index: 3; }
  .mt-post:hover .mt-circle { transform: scale(1.2); }
  /* everything after the hovered circle slides aside: the row spreads */
  .mt-post:hover ~ .mt-post { margin-left: 6px; }

  .mt-preview {
    position: absolute; left: 50%; bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: var(--preview-w, 200px); aspect-ratio: var(--preview-ar, 1);
    border-radius: 10px; overflow: hidden; background: #000;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity .14s ease;
    z-index: 4;
  }
  .mt-post:hover .mt-preview, .mt-post:focus-visible .mt-preview { opacity: 1; }
  .mt-preview img, .mt-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* The shape follows the media, so a horizontal clip is not shown in a square.
     Small on purpose: the row sits near the bottom of a card, so the preview
     rises over the card above it - a tall portrait clip must not swallow the page. */
  .mt-post[data-shape="horizontal"] .mt-preview { --preview-w: 224px; }
  .mt-post[data-shape="vertical"] .mt-preview { --preview-w: 128px; }
  .mt-post[data-shape="square"] .mt-preview { --preview-w: 160px; }
  .mt-preview { max-height: min(46vh, 320px); }
}

@media (hover: none) {
  .mt-circle { width: 44px; height: 44px; }
  .mt-post { width: 44px; height: 44px; margin-left: -18px; }
}
/* Two columns on a phone leave ~135px inside a card: six circles do not fit
   there at any readable size, so the four newest are shown and the rest live on
   the profile. */
@media (max-width: 470px) {
  .mt-post:nth-child(n+5) { display: none; }
}
/* Only shrink the circles where a mouse makes the row precise: on a touch screen
   the 44px target above wins, because a finger needs it. */
@media (max-width: 420px) and (hover: hover) {
  .mt-circle, .mt-post { width: 36px; height: 36px; }
  .mt-post { margin-left: -14px; }
}
@media (max-width: 370px) {
  .model-tile { padding-left: 12px; padding-right: 12px; }
}

/* ---------------------------------------------------------------------------
   Favorites filters: two rows of chips, the rest behind "Show more"
   --------------------------------------------------------------------------- */
.filter-group .chips-wrap { flex: 1; min-width: 0; }
.filter-group .chips-wrap .chips { flex: none; }

/* Creator names stay on one line and scroll sideways: a wrapped second row of
   names reads like a list of filters that happen to be models, and it grows the
   block with every saved creator. No scrollbar - the fade at the edge is the
   only hint that there is more, and swipe / shift+wheel move it. */
.chips-wrap.scroll-x .chips {
  flex-wrap: nowrap; justify-content: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chips-wrap.scroll-x .chips::-webkit-scrollbar { display: none; }
.chips-wrap.scroll-x .chip { flex: 0 0 auto; }
.chips-wrap.scroll-x .chips[data-fade-left] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px);
  mask-image: linear-gradient(to right, transparent 0, #000 14px);
}
.chips-wrap.scroll-x .chips[data-fade-right] {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 14px);
  mask-image: linear-gradient(to left, transparent 0, #000 14px);
}
.chips-wrap.scroll-x .chips[data-fade-left][data-fade-right] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px,
                      #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px,
              #000 calc(100% - 14px), transparent 100%);
}
.more-chips {
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: -.01em;
}
.more-chips:hover { text-decoration: underline; }
.more-chips:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }