/* 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;
}

.dc-brand h1 span {
  color: var(--dc-accent);
}

.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;
}

.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-menu-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dc-ink-soft);
}

.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; }

/* 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;
}

.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);
}

/* The site menu switch (full, compact, hidden: compact-menu.css) under the brand. */
.dc-side .menu-switch {
  justify-self: start;
}

/* ---------- 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 full-screen stage sits under the compact menu instead of behind it, and
     the hidden menu's button gives way to the stage's own menu button. */
  /* "html" outranks compact-menu.css, which loads after this file. */
  html .wv-topbar {
    position: static;
  }

  /* The stage's own menu button (.dc-menu-btn) takes over from the hidden
     menu's floating button, which would sit on the feed. */
  html.wv-menu-hidden body .wv-menu-fab {
    display: none;
  }

  .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;
  }
}