/* Shore Discover (/discover): a reels-style stage in the middle of the page, one
   card per screen that snaps into place, with the tabs on top and the actions on
   the right. Each kind has its own colours and a big faint symbol (.dc-k-<kind>).
   On desktop a side panel sits on each side of the stage; on phones the stage
   fills the screen. Cards keep their own colours in night mode; the page around
   them follows it. */

:root {
  --dc-ink: #2b1f17;
  --dc-ink-soft: #7a5e4c;
  --dc-paper: #fff8ef;
  --dc-panel: #ffffff;
  --dc-line: #efdccb;
  --dc-accent: #d4683a;
  --dc-accent-dark: #b4532a;
  --dc-accent-soft: #fde4d6;
  --dc-stage: #15110e;
  --dc-display: "Playfair Display", Georgia, serif;
  --dc-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-blog-theme="dark"] {
  --dc-ink: #f3e7dc;
  --dc-ink-soft: #bfa896;
  --dc-paper: #1c1612;
  --dc-panel: #241c16;
  --dc-line: #3a2e25;
  --dc-accent: #ec8a5c;
  --dc-accent-dark: #d4683a;
  --dc-accent-soft: #3a2418;
}

/* Headings take the colours of the card or panel they're on, not the site's
   blue (site.css h1-h3), which vanished on dark cards and in night mode. */
:is(.dc-shell, .dc-single, .dc-sheet, .dc-page-head) :is(h1, h2, h3) {
  color: inherit;
}

/* ---------- Page ---------- */

.dc-shell {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 460px) minmax(0, 270px);
  justify-content: center;
  gap: 28px;
  align-items: start;
  padding-top: 12px;
  font-family: var(--dc-ui);
  color: var(--dc-ink);
}

.dc-side {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 18px;
}

.dc-brand h1 {
  font-family: var(--dc-display);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

/* "Discover" in the forest green of the Discover menu button (site.css .header-discover-btn). */
.dc-brand h1 span {
  color: #166534;
}

/* Night mode: a lighter shade of the same green, so it stays readable on the dark page. */
[data-blog-theme="dark"] .dc-brand h1 span {
  color: #4ade80;
}

.dc-brand p {
  margin: 8px 0 0;
  color: var(--dc-ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.dc-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.78rem var(--dc-ui);
  color: var(--dc-ink-soft);
}

.dc-count i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e9e5b;
  box-shadow: 0 0 0 4px rgba(46, 158, 91, 0.18);
}

.dc-nav {
  display: grid;
  gap: 6px;
}

.dc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--dc-ink);
  text-decoration: none;
  font-weight: 600;
}

.dc-nav a:hover {
  background: var(--dc-accent-soft);
}

.dc-nav a[aria-current="page"] {
  background: var(--dc-ink);
  color: var(--dc-paper);
}

.dc-nav svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.dc-nav .dc-nav-count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.7;
}

.dc-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dc-kinds-title {
  font: 700 0.7rem var(--dc-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-ink-soft);
  margin: 0 0 8px;
}

.dc-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--dc-line);
  background: var(--dc-panel);
  color: var(--dc-ink);
  font: 600 0.8rem var(--dc-ui);
  text-decoration: none;
}

.dc-kind-chip:hover {
  border-color: var(--dc-accent);
  color: var(--dc-ink);
}

.dc-kind-chip[aria-current="true"] {
  background: var(--dc-accent);
  border-color: var(--dc-accent);
  color: #fff;
}

.dc-kind-chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dc-dot, var(--dc-accent));
}

.dc-panel {
  background: var(--dc-panel);
  border: 1px solid var(--dc-line);
  border-radius: 20px;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.dc-panel h2 {
  font-family: var(--dc-display);
  font-size: 1.2rem;
  margin: 0;
}

.dc-panel p {
  margin: 0;
  color: var(--dc-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.dc-panel ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  display: grid;
  gap: 4px;
}

.dc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dc-stat {
  background: var(--dc-accent-soft);
  border-radius: 14px;
  padding: 10px 12px;
}

.dc-stat strong {
  display: block;
  font: 800 1.5rem var(--dc-ui);
  font-variant-numeric: tabular-nums;
}

.dc-stat span {
  font-size: 0.75rem;
  color: var(--dc-ink-soft);
}

.dc-keys {
  font-size: 0.8rem;
  color: var(--dc-ink-soft);
}

.dc-keys kbd {
  background: var(--dc-paper);
  color: var(--dc-ink);
  border: 1px solid var(--dc-line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.75rem;
}

.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--dc-accent);
  color: #fff;
  font: 700 0.9rem var(--dc-ui);
  text-decoration: none;
  cursor: pointer;
}

.dc-btn:hover {
  background: var(--dc-accent-dark);
  color: #fff;
}

.dc-btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.dc-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
}

/* ---------- Stage ---------- */

.dc-stage {
  position: relative;
  height: clamp(560px, calc(100dvh - 32px), 940px);
  border-radius: 30px;
  overflow: hidden;
  background: var(--dc-stage);
  box-shadow: 0 30px 60px -30px rgba(43, 31, 23, 0.6);
  isolation: isolate;
  /* Cards size their words to the stage (cqi, cqh), so a phone gets big, readable type. */
  container-type: size;
}

.dc-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 14px 30px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
}

.dc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

/* Hidden while a books or Shore Find break card is on screen (discover.js). */
.dc-on-break .dc-tabs {
  opacity: 0;
  visibility: hidden;
}

.dc-tabs {
  transition: opacity 0.25s, visibility 0.25s;
}

.dc-tabs a {
  padding: 7px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font: 700 0.82rem var(--dc-ui);
  text-decoration: none;
  white-space: nowrap;
}

.dc-tabs a[aria-current="page"] {
  background: #fff;
  color: #1a1410;
}

.dc-menu-btn {
  position: absolute;
  left: 12px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
}

.dc-menu-btn svg {
  width: 18px;
  height: 18px;
}

.dc-menu-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dc-menu-links a {
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--dc-paper);
  border: 1px solid var(--dc-line);
  color: var(--dc-ink);
  font-weight: 700;
  text-decoration: none;
}

.dc-menu-links a[aria-current="page"] {
  background: var(--dc-ink);
  border-color: var(--dc-ink);
  color: var(--dc-paper);
}

.dc-filter-btn {
  position: absolute;
  right: 12px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
}

.dc-filter-btn svg {
  width: 18px;
  height: 18px;
}

.dc-filter-btn.is-on {
  background: var(--dc-accent);
}

.dc-feed {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.dc-feed::-webkit-scrollbar {
  display: none;
}

/* ---------- A card ---------- */

.dc-card {
  --dc-c-ink: #fff;
  --dc-c-chip: rgba(255, 255, 255, 0.2);
  --dc-c-bg: linear-gradient(160deg, #f6b26b, #d4683a 60%, #a8461f);
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--dc-c-ink);
  background: var(--dc-c-bg);
  font-family: var(--dc-ui);
}

.dc-card.dc-v1 {
  background: var(--dc-c-bg2, var(--dc-c-bg));
}

/* The kind's big faint symbol, and soft rings of light. */
.dc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.22), transparent 38%),
    radial-gradient(circle at 10% 95%, rgba(0, 0, 0, 0.18), transparent 45%);
  pointer-events: none;
}

.dc-card::after {
  content: attr(data-glyph);
  position: absolute;
  top: 8%;
  right: -4%;
  font: 900 clamp(11rem, 62cqi, 20rem) / 1 var(--dc-display);
  color: currentColor;
  opacity: 0.13;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.dc-card.dc-has-photo::after,
.dc-card.dc-figure::after {
  content: none;
}

.dc-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2cqh, 20px);
  padding: 78px 78px 30px 24px;
}

/* The words fill the card: the label at the top, the rest in the middle
   (the empty ::after balances the space above). Photo cards keep their words
   at the bottom, so the photo shows. */
.dc-content > .dc-chips {
  margin-bottom: auto;
}

.dc-content::after {
  content: "";
  margin-top: auto;
}

.dc-has-photo .dc-content::after,
.dc-figure .dc-content::after {
  content: none;
}

/* On a photo the label sits with the words, down on the shade, not up on a
   bright sky. */
.dc-has-photo .dc-content {
  justify-content: flex-end;
}

.dc-has-photo .dc-content > .dc-chips {
  margin-bottom: 0;
}

.dc-figure .dc-content > .dc-chips {
  margin-bottom: 0;
}

.dc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dc-chip {
  font: 800 0.72rem var(--dc-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--dc-c-chip);
  color: var(--dc-c-ink);
  backdrop-filter: blur(6px);
}

.dc-chip-archive {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.dc-title {
  font: 800 clamp(1.75rem, min(8.6cqi, 5.4cqh), 2.7rem) / 1.1 var(--dc-display);
  margin: 0;
  text-wrap: balance;
}

.dc-long .dc-title {
  font-size: clamp(1.5rem, min(6.8cqi, 4.4cqh), 2.2rem);
}

.dc-body {
  margin: 0;
  font-size: clamp(1.08rem, min(4.8cqi, 2.7cqh), 1.32rem);
  font-weight: 500;
  line-height: 1.55;
  max-width: 34ch;
}

.dc-reveal {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.dc-reveal-btn,
.dc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font: 700 0.85rem var(--dc-ui);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.dc-reveal-btn:hover,
.dc-pill:hover {
  background: var(--dc-c-chip);
  color: inherit;
}

.dc-reveal-btn[aria-expanded="true"] {
  display: none;
}

.dc-answer {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--dc-c-chip);
  backdrop-filter: blur(8px);
  font-size: clamp(1rem, 4.3cqi, 1.15rem);
  line-height: 1.5;
  animation: dc-pop 0.35s ease;
}

@keyframes dc-pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.dc-book {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #2b1f17;
  text-decoration: none;
  max-width: 330px;
}

.dc-book:hover {
  background: #fff;
  color: #2b1f17;
}

.dc-book img,
.dc-book .dc-book-spine {
  width: 34px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dc-book .dc-book-spine {
  background: linear-gradient(135deg, #d4683a, #7a3d22);
}

.dc-book strong {
  display: block;
  font-size: 0.85rem;
  line-height: 1.25;
}

.dc-book small {
  display: block;
  font-size: 0.72rem;
  color: #7a5e4c;
}

.dc-source {
  font-size: 0.72rem;
  opacity: 0.75;
}

.dc-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The actions down the right. */
.dc-rail {
  position: absolute;
  right: 12px;
  bottom: 30px;
  z-index: 3;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.dc-act {
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  font: 700 0.66rem var(--dc-ui);
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dc-act span.dc-act-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.15s ease;
}

.dc-act:hover span.dc-act-icon {
  transform: scale(1.06);
}

.dc-act svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dc-act[aria-pressed="true"] span.dc-act-icon {
  background: var(--dc-accent);
}

.dc-act[aria-pressed="true"] svg {
  fill: #fff;
}

.dc-act:focus-visible span.dc-act-icon,
.dc-reveal-btn:focus-visible,
.dc-pill:focus-visible,
.dc-tabs a:focus-visible,
.dc-tile:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
}

/* Full-bleed photos, with a shade under the words. */
.dc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark enough under the words for white text on even a pale photo, with a
   faint shade at the top for the tabs. */
.dc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.35), transparent 18%, transparent 30%, rgba(0, 0, 0, 0.6) 52%, rgba(0, 0, 0, 0.88) 78%);
  z-index: 1;
}

.dc-has-photo .dc-content,
.dc-figure:not(.dc-k-illusion) .dc-content {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.dc-has-photo .dc-book,
.dc-figure .dc-book {
  text-shadow: none;
}

/* Pictures that must be seen whole (old photos, illusions): framed at the top,
   over a blurred copy of themselves. */
.dc-figure {
  justify-content: flex-start;
}

.dc-figure-backdrop {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.35) saturate(1.2);
  z-index: 0;
}

.dc-figure-frame {
  position: relative;
  z-index: 1;
  margin: 64px 18px 0;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.dc-figure-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  background: #fff;
}

.dc-figure .dc-content {
  padding-top: 18px;
  flex: none;
}

.dc-figure .dc-title {
  font-size: clamp(1.45rem, min(6.8cqi, 4cqh), 2.2rem);
}

.dc-figure .dc-body {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-k-illusion.dc-figure .dc-figure-backdrop {
  filter: none;
  background: linear-gradient(165deg, #fbf3e8, #efe2cf) !important;
}

.dc-k-illusion.dc-figure .dc-figure-frame img {
  box-shadow: none;
  background: transparent;
}

/* The swipe hint on the first card. */
.dc-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  display: grid;
  justify-items: center;
  color: #fff;
  font: 700 0.68rem var(--dc-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  animation: dc-nudge 1.8s ease-in-out infinite;
  pointer-events: none;
}

.dc-hint svg {
  width: 18px;
  height: 18px;
}

@keyframes dc-nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -6px); }
}

/* ---------- Kinds ---------- */

.dc-k-fact { --dc-c-bg: linear-gradient(160deg, #f6b26b, #d4683a 60%, #a8461f); --dc-c-bg2: linear-gradient(200deg, #ffb37a, #e0603b 55%, #9c3a1c); --dc-dot: #d4683a; }
.dc-k-mystery { --dc-c-bg: radial-gradient(circle at 20% 15%, rgba(255,255,255,.12) 0 1px, transparent 2px) 0 0 / 46px 46px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.1) 0 1px, transparent 2px) 0 0 / 61px 61px, linear-gradient(170deg, #1b2347, #3b2f63); --dc-dot: #3b2f63; }
.dc-k-psychology { --dc-c-bg: repeating-radial-gradient(circle at 90% 10%, rgba(255,255,255,.07) 0 2px, transparent 2px 34px), linear-gradient(165deg, #3fb3ad, #127373); --dc-dot: #1d9a9a; }
.dc-k-funny { --dc-c-ink: #2b1f17; --dc-c-chip: rgba(43, 31, 23, 0.1); --dc-c-bg: linear-gradient(160deg, #fff0b8, #ffd166 55%, #f6a04d); --dc-dot: #f6a04d; }
.dc-k-lesson { --dc-c-bg: linear-gradient(165deg, #7fb6d6, #2f6f94); --dc-c-bg2: linear-gradient(195deg, #8ec5e0, #245a7a); --dc-dot: #2f6f94; }
.dc-k-teaser { --dc-c-bg: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 44px), linear-gradient(160deg, #8a8af0, #4b3fc4); --dc-dot: #5b5bd6; }
.dc-k-history { --dc-c-bg: linear-gradient(165deg, #c8a07e, #6e4f3a); --dc-c-bg2: linear-gradient(195deg, #b88f6c, #5a3f2d); --dc-dot: #8a6a52; }
.dc-k-photo,
.dc-k-historicphoto { --dc-c-bg: linear-gradient(#3a332c, #1f1a16); --dc-dot: #4a4038; }
.dc-k-question { --dc-c-ink: #2b1f17; --dc-c-chip: rgba(43, 31, 23, 0.1); --dc-c-bg: linear-gradient(160deg, #fff1db, #f9c3a8); --dc-dot: #f9a98a; }
.dc-k-place { --dc-c-bg: linear-gradient(170deg, #f6b5c8, #e86a92 55%, #a83a6a); --dc-dot: #e86a92; }
.dc-k-invention { --dc-c-bg: repeating-radial-gradient(circle at 80% 22%, rgba(255,255,255,.08) 0 6px, transparent 6px 26px), linear-gradient(165deg, #9aab73, #4f5f33); --dc-dot: #6f7f4f; }
.dc-k-ability { --dc-c-bg: linear-gradient(165deg, #34b3a0, #1e5f8a); --dc-dot: #2a8a95; }
.dc-k-nature { --dc-c-bg: radial-gradient(ellipse at 70% 20%, rgba(255, 224, 138, 0.35), transparent 45%), linear-gradient(175deg, #2a3561, #0b1d3a); --dc-dot: #2a3561; }
.dc-k-architecture { --dc-c-ink: #2b1f17; --dc-c-chip: rgba(43, 31, 23, 0.1); --dc-c-bg: linear-gradient(165deg, #f1d6aa, #c9a26b); --dc-dot: #c9a26b; }
.dc-k-illusion { --dc-c-ink: #2b1f17; --dc-c-chip: rgba(43, 31, 23, 0.1); --dc-c-bg: linear-gradient(165deg, #fbf3e8, #efe2cf); --dc-dot: #2b1f17; }
.dc-k-unexpected { --dc-c-bg: linear-gradient(160deg, #ff9a76, #e2575f 55%, #a8325a); --dc-dot: #e2575f; }
.dc-k-technology { --dc-c-bg: radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px) 0 0 / 24px 24px, linear-gradient(160deg, #1c8fe8, #123a8c); --dc-dot: #1c7fe0; }
.dc-k-entertainment { --dc-c-bg: radial-gradient(ellipse at 80% 12%, rgba(255, 214, 130, 0.4), transparent 42%), linear-gradient(165deg, #8e2a5b, #2c123f); --dc-dot: #8e2a5b; }
.dc-k-news { --dc-c-bg: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px), linear-gradient(170deg, #27333d, #101820); --dc-dot: #c8402f; }

/* Words on a photo are always white. */
.dc-has-photo,
.dc-figure:not(.dc-k-illusion) {
  --dc-c-ink: #fff;
  --dc-c-chip: rgba(255, 255, 255, 0.2);
}

/* Light cards keep dark action icons readable. */
.dc-k-funny .dc-act,
.dc-k-question .dc-act,
.dc-k-architecture:not(.dc-has-photo) .dc-act,
.dc-k-illusion .dc-act {
  text-shadow: none;
  color: #2b1f17;
}

/* ---------- Special cards ---------- */

.dc-break,
.dc-gate,
.dc-end {
  --dc-c-ink: #2b1f17;
  --dc-c-chip: rgba(255, 255, 255, 0.7);
  --dc-c-bg: linear-gradient(165deg, #fff1db, #f9c3a8 70%, #f4a48a);
  justify-content: center;
}

.dc-break .dc-content,
.dc-gate .dc-content,
.dc-end .dc-content {
  padding-right: 24px;
}

.dc-break::after { content: "☕"; opacity: 0.14; }
.dc-gate::after { content: "✦"; }

.dc-break-books {
  display: grid;
  gap: 8px;
}

/* A Shore Find on a break card: a featured spot that stands apart from the
   feed. A still velvet stage with gold dust, tinted from the find's picture
   (discover.js sets --dc-fb-tint, --dc-fb-deep and --dc-fb-glow) or by its
   kind; the picture as a gold-framed banner at the top, the words below. */
.dc-find-break {
  --dc-c-ink: #fff;
  --dc-fb-tint: #17204a;
  --dc-fb-deep: #070b1d;
  --dc-fb-glow: rgba(90, 110, 220, 0.35);
  --dc-fb-gold: linear-gradient(90deg, #ffe8a3, #f5b942);
  --dc-c-bg:
    radial-gradient(circle at 85% 6%, rgba(245, 185, 66, 0.3), transparent 40%),
    radial-gradient(circle at 0% 100%, var(--dc-fb-glow), transparent 55%),
    linear-gradient(170deg, var(--dc-fb-tint), var(--dc-fb-deep));
  justify-content: flex-start;
}

.dc-fb-kind-dish {
  --dc-fb-tint: #3b1626;
  --dc-fb-deep: #12060c;
  --dc-fb-glow: rgba(220, 90, 120, 0.32);
}

.dc-fb-kind-product {
  --dc-fb-tint: #0f3a35;
  --dc-fb-deep: #04140f;
  --dc-fb-glow: rgba(70, 200, 160, 0.28);
}

.dc-find-break::before,
.dc-find-break::after {
  content: none;
}

.dc-fb-dust {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 232, 163, 0.5) 0.6px, transparent 0.8px);
  background-size: 7px 7px;
  pointer-events: none;
}

.dc-fb-featured {
  position: absolute;
  top: 74px;
  right: 30px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font: 700 0.66rem var(--dc-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dc-content.dc-fb {
  gap: clamp(8px, 1.5cqh, 14px);
  padding: 64px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}

.dc-content.dc-fb::after {
  content: none;
}

/* The picture floats in a fine gold frame with a warm glow. */
.dc-fb-banner {
  flex: none;
  height: clamp(120px, 27cqh, 260px);
  margin-bottom: 4px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.2) 70%);
  box-shadow: 0 0 0 1.5px #ffe8a3, 0 0 0 5px rgba(245, 185, 66, 0.18), 0 0 40px rgba(245, 185, 66, 0.35), 0 16px 30px rgba(0, 0, 0, 0.5);
}

.dc-fb-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Every other find break (discover.js): the picture runs edge to edge under
   the top bar and melts into the velvet, with a gold hairline below it. */
.dc-fb-edge {
  --dc-fb-bh: clamp(150px, 34cqh, 320px);
}

.dc-fb-edge .dc-content.dc-fb {
  padding-top: 0;
}

.dc-fb-edge .dc-fb-banner {
  position: relative;
  height: var(--dc-fb-bh);
  margin: 0 -18px -18px;
  border-radius: 0;
  box-shadow: none;
  background: none;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}

/* A shade at the top keeps the top bar readable on a bright picture. */
.dc-fb-edge .dc-fb-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent 35%);
}

.dc-fb-edge .dc-content.dc-fb::before {
  content: "";
  position: absolute;
  top: calc(var(--dc-fb-bh) - 18px);
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f5b942, transparent);
}

.dc-fb-edge .dc-fb-featured {
  right: 16px;
}

.dc-fb-icon {
  font-size: clamp(3.5rem, 12cqh, 6rem);
  line-height: 1;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

.dc-fb-eyebrow {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--dc-fb-gold);
  color: #0e1530;
  font: 700 0.7rem var(--dc-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(245, 185, 66, 0.5);
}

.dc-fb-name {
  margin: 0;
  font: 800 clamp(1.6rem, min(8cqi, 4.4cqh), 2.4rem) / 1.05 var(--dc-display);
  color: #fff;
  text-wrap: balance;
}

.dc-fb-chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dc-fb-chips > span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.13);
  font-size: 0.8rem;
  font-weight: 600;
}

.dc-fb-rate {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.dc-fb-rate b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.dc-fb-rate small {
  opacity: 0.72;
}

.dc-fb-stars {
  color: #f5b942;
  font-size: 1rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.dc-fb-stars i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.28);
}

.dc-fb-note {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(245, 185, 66, 0.7);
  font: 400 clamp(0.92rem, 2.1cqh, 1.02rem) / 1.55 var(--dc-ui);
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-fb-who {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.dc-fb-who i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffe8a3;
  color: #0e1530;
  font: 800 0.72rem var(--dc-ui);
  font-style: normal;
}

/* The gold button, with a soft ring pulsing out of it. */
.dc-fb-cta {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--dc-fb-gold);
  color: #0e1530;
  font: 800 1rem var(--dc-ui);
  text-decoration: none;
}

.dc-fb-cta:hover {
  color: #0e1530;
  filter: brightness(1.06);
}

.dc-fb-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 2px solid #f5b942;
  animation: dc-fb-ring 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes dc-fb-ring {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.1, 1.35); }
}

.dc-fb-next {
  align-self: center;
  padding: 4px 14px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font: 700 0.82rem var(--dc-ui);
  cursor: pointer;
}

.dc-fb-next:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .dc-fb-cta::after {
    animation: none;
  }
}

.dc-gate-peek {
  display: grid;
  gap: 6px;
}

.dc-gate-peek div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 0.85rem;
  filter: blur(3.5px);
  user-select: none;
}

.dc-gate-perks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.dc-gate-perks li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: #2b1f17;
  color: #fff;
  font-size: 0.7rem;
}

.dc-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dc-gate .dc-btn-ghost,
.dc-break .dc-btn-ghost {
  color: #2b1f17;
}

.dc-loading {
  display: grid;
  place-items: center;
  height: 100%;
  scroll-snap-align: start;
  color: rgba(255, 255, 255, 0.7);
  font: 600 0.85rem var(--dc-ui);
}

.dc-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  animation: dc-spin 0.8s linear infinite;
  margin: 0 auto 10px;
}

@keyframes dc-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Interesting Things: a wall of tiles ---------- */

.dc-wall {
  height: 100%;
  overflow-y: auto;
  padding: 70px 10px 10px;
  scrollbar-width: none;
}

.dc-wall::-webkit-scrollbar {
  display: none;
}

.dc-tiles {
  columns: 2;
  column-gap: 8px;
}

.dc-tile {
  --dc-c-ink: #fff;
  --dc-c-chip: rgba(255, 255, 255, 0.22);
  break-inside: avoid;
  position: relative;
  display: grid;
  align-content: end;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px;
  min-height: 175px;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  color: var(--dc-c-ink);
  background: var(--dc-c-bg);
  cursor: pointer;
  font-family: var(--dc-ui);
  transition: transform 0.15s ease;
}

.dc-tile:hover {
  transform: translateY(-2px);
}

.dc-tile.dc-tall { min-height: 270px; }
.dc-tile.dc-mid { min-height: 215px; }

.dc-tile-wrap {
  break-inside: avoid;
}

.dc-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-tile.dc-has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.85));
  z-index: 1;
}

.dc-tile.dc-has-photo > span,
.dc-tile.dc-has-photo > strong {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dc-tile > span,
.dc-tile > strong {
  position: relative;
  z-index: 2;
}

.dc-tile .dc-chip {
  justify-self: start;
  font-size: 0.62rem;
  padding: 5px 9px;
}

/* Tiles without a photo carry their kind's symbol too. */
.dc-tile:not(.dc-has-photo)::after {
  content: attr(data-glyph);
  position: absolute;
  top: 4px;
  right: 10px;
  font: 900 5.5rem / 1 var(--dc-display);
  color: currentColor;
  opacity: 0.18;
  pointer-events: none;
}

.dc-tile strong {
  font: 800 clamp(1.05rem, 4.8cqi, 1.25rem) / 1.2 var(--dc-display);
}

.dc-tile.is-locked {
  filter: blur(5px);
  pointer-events: none;
}

.dc-lockbar {
  position: sticky;
  bottom: -10px;
  margin: 0 -10px -10px;
  padding: 28px 16px 20px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(transparent, var(--dc-stage) 40%);
}

.dc-lockbar p {
  margin: 0;
  font-weight: 700;
}

/* A tile opened full screen, over the wall. */
.dc-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--dc-stage);
}

.dc-overlay .dc-card {
  height: 100%;
}

.dc-overlay-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 9;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.dc-overlay-close svg {
  width: 20px;
  height: 20px;
}

/* ---------- Sheets and toast ---------- */

.dc-sheet {
  border: 0;
  padding: 0;
  border-radius: 22px;
  width: min(440px, calc(100vw - 24px));
  background: var(--dc-panel);
  color: var(--dc-ink);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  font-family: var(--dc-ui);
}

.dc-sheet::backdrop {
  background: rgba(20, 14, 10, 0.55);
  backdrop-filter: blur(2px);
}

.dc-sheet form {
  padding: 20px;
  display: grid;
  gap: 14px;
}

.dc-sheet h2 {
  font-family: var(--dc-display);
  font-size: 1.35rem;
  margin: 0;
}

.dc-sheet-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: var(--dc-accent-soft);
  font-weight: 700;
  font-size: 0.9rem;
}

.dc-sheet textarea {
  width: 100%;
  min-height: 90px;
  border-radius: 14px;
  border: 1px solid var(--dc-line);
  padding: 10px 12px;
  background: var(--dc-paper);
  color: var(--dc-ink);
  font: inherit;
  resize: vertical;
}

.dc-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
}

.dc-choices legend {
  font: 700 0.8rem var(--dc-ui);
  color: var(--dc-ink-soft);
  margin-bottom: 6px;
}

.dc-choices label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--dc-line);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

.dc-choices input {
  accent-color: var(--dc-accent);
}

.dc-choices label:has(input:checked) {
  border-color: var(--dc-accent);
  background: var(--dc-accent-soft);
}

.dc-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dc-sheet .dc-btn-ghost {
  color: var(--dc-ink);
}

.dc-sheet-error {
  margin: 0;
  color: #b42318;
  font-size: 0.85rem;
}

.dc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2000;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: #2b1f17;
  color: #fff;
  font: 600 0.88rem var(--dc-ui);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  animation: dc-pop 0.25s ease;
}

.dc-toast a {
  color: #ffd166;
  margin-left: 6px;
}

/* ---------- My Discoveries and a shared card ---------- */

.dc-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 20px;
  font-family: var(--dc-ui);
  color: var(--dc-ink);
}

.dc-page-head h1 {
  font-family: var(--dc-display);
  font-weight: 900;
  margin: 0;
}

.dc-page-head p {
  margin: 4px 0 0;
  color: var(--dc-ink-soft);
}

.dc-saved-wall {
  position: relative;
  background: var(--dc-stage);
  border-radius: 26px;
  padding: 12px;
}

.dc-saved-wall .dc-tiles {
  columns: 4 220px;
}

.dc-saved-wall .dc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  background: rgba(20, 14, 10, 0.8);
}

.dc-saved-wall .dc-overlay-inner {
  position: relative;
  width: min(460px, 100vw);
  height: min(860px, 100dvh);
  border-radius: 26px;
  overflow: hidden;
  container-type: size;
}

.dc-single {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 320px);
  justify-content: center;
  gap: 32px;
  align-items: center;
  padding: 16px 0 32px;
  font-family: var(--dc-ui);
  color: var(--dc-ink);
}

.dc-single .dc-stage {
  height: clamp(560px, calc(100dvh - 140px), 860px);
}

.dc-empty {
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 20px;
  color: var(--dc-ink-soft);
  font-family: var(--dc-ui);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1100px) {
  .dc-shell {
    grid-template-columns: minmax(0, 240px) minmax(0, 460px);
  }

  .dc-aside {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .dc-shell {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }

  .dc-shell .dc-side {
    display: none;
  }

  .dc-shell .dc-stage,
  .dc-single .dc-stage {
    height: 100dvh;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    border-radius: 0;
  }

  .dc-single {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }

  .dc-content {
    padding: 78px 72px calc(30px + env(safe-area-inset-bottom, 0px)) 20px;
  }

  .dc-rail {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .dc-saved-wall .dc-tiles {
    columns: 2;
  }

  /* The compact menu keeps the top line, as on Waves, and the stage fills the
     screen under it (discover.js sizes it). It stays in the page's flow, but still
     above the stage, or the stage would cover its account menu. */
  /* "html" outranks compact-menu.css, which loads after this file. */
  html .wv-topbar {
    position: relative;
    margin: 0.4rem 0 0.5rem;
  }

.dc-tabs a {
    padding: 8px 13px;
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-hint,
  .dc-answer,
  .dc-toast {
    animation: none;
  }

  .dc-feed {
    scroll-behavior: auto;
  }
}

/* ---------- News layout ---------- */

.dc-chip-date {
  background: #c8402f;
  color: #fff;
}

.dc-beat {
  display: grid;
  gap: 3px;
}

.dc-beat small,
.dc-beat-label {
  font: 800 0.7rem var(--dc-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd166;
}

.dc-k-news .dc-body {
  font-size: clamp(1rem, min(4.3cqi, 2.4cqh), 1.18rem);
  line-height: 1.45;
}

/* ---------- Motion cards (discover.js) ---------- */

/* A Living picture's frames, side by side in one image. */
.dc-frames {
  width: 100%;
  aspect-ratio: var(--dc-frame-ratio, 16 / 10);
  max-height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--dc-n) * 100%) 100%;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* The time a card takes, along its bottom edge. */
.dc-motion-bar {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.dc-motion-bar i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.dc-ended .dc-motion-bar {
  opacity: 0;
  transition: opacity 0.4s;
}

.dc-w {
  display: inline-block;
}

.dc-w-hot {
  color: #ffd166;
}

.dc-k-funny .dc-w-hot,
.dc-k-question .dc-w-hot,
.dc-k-illusion .dc-w-hot,
.dc-k-architecture:not(.dc-has-photo) .dc-w-hot {
  color: #a8461f;
}

.dc-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  width: min(100%, 300px);
  height: 34px;
  flex: none;
}

.dc-wave i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: #ffd166;
  transform: scaleY(var(--dc-h));
}

.dc-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff3d6;
  opacity: 0;
  pointer-events: none;
}

.dc-replay {
  position: absolute;
  top: 62px;
  right: 12px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 700 0.72rem var(--dc-ui);
  cursor: pointer;
}

.dc-replay svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dc-replay:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
}

.dc-ended .dc-replay {
  display: inline-flex;
}

.dc-pause-tag {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: fit-content;
  height: fit-content;
  margin: auto;
  display: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: 700 0.8rem var(--dc-ui);
  pointer-events: none;
}

.dc-paused .dc-pause-tag {
  display: block;
}

/* Waiting to start: the words step aside until the card fills the screen. */
.dc-armed .dc-a,
.dc-armed .dc-s,
.dc-armed .dc-w {
  opacity: 0;
}

.dc-armed.dc-m-pan .dc-photo {
  transform: scale(1.22) translateX(-6%);
}

@media (prefers-reduced-motion: no-preference) {
  .dc-play .dc-a {
    animation: dc-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--dc-d, 0s) both;
  }

  .dc-play .dc-s {
    animation: dc-fade 0.6s ease var(--dc-d, 0s) both;
  }

  .dc-play .dc-w {
    animation: dc-word 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) var(--dc-d, 0s) both;
  }

  .dc-play .dc-motion-bar i {
    animation: dc-fill var(--dc-len, 10s) linear both;
  }

  .dc-play.dc-m-zoom .dc-photo,
  .dc-play.dc-m-words .dc-photo,
  .dc-play.dc-m-clues .dc-photo,
  .dc-play.dc-m-wave .dc-photo,
  .dc-play.dc-m-news .dc-photo {
    animation: dc-zoom var(--dc-len, 10s) ease-out both;
  }

  .dc-play.dc-m-pan .dc-photo {
    animation: dc-pan var(--dc-len, 10s) ease-in-out both;
  }

  .dc-play.dc-m-gentle .dc-figure-backdrop {
    animation: dc-zoom var(--dc-len, 10s) ease-out both;
  }

  .dc-play.dc-m-gentle .dc-figure-frame img {
    animation: dc-settle var(--dc-len, 10s) ease-out both;
  }

  .dc-play .dc-flash {
    animation: dc-flash 1.4s ease-out 1.2s both;
  }

  /* These two keep moving for as long as the card is on screen. */
  .dc-on-screen .dc-frames {
    animation: dc-frames calc(var(--dc-n) * 0.085s) steps(var(--dc-n)) infinite;
  }

  .dc-on-screen .dc-wave i {
    animation: dc-wave 0.9s ease-in-out calc(var(--dc-i) * -0.13s) infinite alternate;
  }

  .dc-paused,
  .dc-paused * {
    animation-play-state: paused !important;
  }
}

@keyframes dc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes dc-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dc-word {
  from { opacity: 0; transform: translateY(0.35em) scale(0.86); }
  to { opacity: 1; transform: none; }
}

@keyframes dc-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes dc-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.16); }
}

@keyframes dc-pan {
  from { transform: scale(1.22) translateX(-6%); }
  to { transform: scale(1.22) translateX(6%); }
}

@keyframes dc-settle {
  from { transform: scale(0.97); }
  to { transform: scale(1); }
}

@keyframes dc-flash {
  0% { opacity: 0; }
  8% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes dc-frames {
  to { background-position-x: var(--dc-end); }
}

@keyframes dc-wave {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}

/* ---------- Likes, highly liked, tags and sticking to a wall ---------- */

.dc-act[data-dc-like][aria-pressed="true"] span.dc-act-icon {
  background: #e0405e;
}

/* Seven buttons down the side: smaller on a short screen, so they still fit. */
@container (max-height: 700px) {
  .dc-rail {
    gap: 8px;
    bottom: 16px;
  }

  .dc-act span.dc-act-icon {
    width: 38px;
    height: 38px;
  }

  .dc-act svg {
    width: 18px;
    height: 18px;
  }
}

.dc-chip.dc-chip-loved {
  background: linear-gradient(120deg, #ffe08a, #f2b632);
  color: #3a2800;
  text-shadow: none;
}

.dc-chip.dc-chip-tag {
  background: #1c7fe0;
  color: #fff;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: none;
}

/* A highly liked card: a gold frame with a star in its corner. */
.dc-loved-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 3px solid #f2c14e;
  pointer-events: none;
  box-shadow: inset 0 0 26px rgba(242, 193, 78, 0.35);
}

.dc-loved-frame::after {
  content: "\2605";
  position: absolute;
  bottom: 6px;
  left: 14px;
  color: #ffd166;
  font-size: 1.6rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.9);
}

.dc-tile.dc-tile-loved {
  outline: 3px solid #f2c14e;
  outline-offset: -3px;
}

.dc-kind-chip.dc-kind-liked {
  border-color: #f2c14e;
  font-weight: 700;
}

.dc-tag-note {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--dc-ink-soft);
}

.dc-tag-list {
  display: grid;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 8px;
}

.dc-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
}

label.dc-tag-row:hover {
  background: var(--dc-accent-soft);
}

.dc-tag-row[hidden] {
  display: none;
}

.dc-tag-row span {
  flex: 1;
  min-width: 0;
}

.dc-tag-row small {
  color: var(--dc-ink-soft);
  font-weight: 700;
}

.dc-tag-row .dc-pill {
  padding: 5px 12px;
  font-size: 0.78rem;
}

.dc-sheet input[type="search"],
.dc-sheet select {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid var(--dc-line);
  padding: 8px 12px;
  background: var(--dc-paper);
  color: var(--dc-ink);
  font: inherit;
}

.dc-sheet input[type="search"] {
  margin-bottom: 8px;
}

.dc-stick-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

.dc-tag-row i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dc-accent);
  color: #fff;
  font: 700 0.75rem var(--dc-ui);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .dc-on-screen .dc-loved-frame {
    animation: dc-loved-glow 2.6s ease-in-out infinite alternate;
  }

  .dc-paused .dc-loved-frame {
    animation-play-state: paused;
  }
}

@keyframes dc-loved-glow {
  from { box-shadow: inset 0 0 16px rgba(242, 193, 78, 0.25); }
  to { box-shadow: inset 0 0 44px rgba(242, 193, 78, 0.6); }
}