/* =========================================
   STARK THEME v1.0
   Forked from Horizon by Josh Millgate
   Custom design system for Stark Jiu Jitsu

   USAGE: Link this in Super.so > Code > Head:
   <link href="YOUR_HOSTED_URL/stark-theme.css" rel="stylesheet" />

   Then REMOVE the Horizon stylesheet link.
   ========================================= */


/* ===========================================
   1. BASE / VARIABLES
   =========================================== */

:root {
  --select-highlight-color: rgba(253, 215, 99, .4);
  --color-checkbox-bg: #888888 !important;
  --cta-border-radii: 40px !important;
  --cta-bg-color: var(--color-text-default) !important;
  --cta-bg-hover-color: #111 !important;
  --cta-text-color: var(--color-bg-default) !important;
  --cta-text-hover-color: #ffffff !important;

  /* Stark custom vars */
  --stark-card-radius: 16px;
  --stark-card-padding: 3rem 2.5rem;
  --stark-tatami-green: #e2e8dc;
  --stark-tatami-green-dark: #2a3328;
}

.theme-dark {
  --color-bg-gray-light: #101010 !important;
  --color-pill-default: #101010 !important;
  --card-content-bg-color: rgba(0, 0, 0, .6) !important;
  --color-border-default: rgba(255, 255, 255, .12) !important;
  --navbar-background-color: rgba(25, 25, 25, .8) !important;
  --color-code-bg: var(--color-bg-gray-light) !important;
  --color-ui-hover-bg: #202020 !important;
}

.theme-light {
  --card-content-bg-color: rgba(255, 255, 255, .6) !important;
  --color-border-default: rgba(204, 204, 204, .4) !important;
  --navbar-background-color: rgba(246, 246, 246, .8) !important;
  --color-ui-hover-bg: #F2F2F2 !important;
}

body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

::-moz-selection { background: var(--select-highlight-color) !important; }
::selection { background: var(--select-highlight-color) !important; }


/* ===========================================
   2. HIDE PAGE TITLE & ICON
   Hide Notion's page title globally so you can
   use titles internally (e.g. "Landing Page v2")
   without them showing on the website.
   =========================================== */

.notion-header {
  display: none !important;
}


/* ===========================================
   3. TYPOGRAPHY — HEADING HIERARCHY
   H1 bold = hero headlines (big, punchy)
   H2 = section headers (prominent, duties.xyz vibe)
   H3 = sub-sections
   =========================================== */

h1.notion-heading,
h2.notion-heading * {
  letter-spacing: -1px !important;
}

/* H1 REGULAR — Large but not as heavy as bold H1 */
h1.notion-heading {
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -2px !important;
  margin-bottom: 16px !important;
}

/* H1 BOLD — The big hero headline (keep Horizon's great style) */
h1.notion-heading strong,
strong h1.notion-heading {
  margin-bottom: 12px !important;
  letter-spacing: -4px !important;
  line-height: 1 !important;
  font-size: clamp(2.6rem, 6vw, 5rem) !important;
}

/* H1 (non-bold) — Page title header, slightly faded */
.notion-header__title {
  font-size: clamp(2.3rem, 5vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -1.6px !important;
  opacity: 0.5 !important;
}

/* H2 — Section headers. Bold and prominent.
   Inspired by duties.xyz chunky headings.
   Use BOLD H2 in Notion for the heavy uppercase look.
   Regular H2 stays clean but larger than before. */
h2.notion-heading * {
  line-height: 1 !important;
}

h2.notion-heading {
  margin-bottom: 16px !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  letter-spacing: -1px !important;
  line-height: 1.05 !important;
}

/* H2 BOLD — Heavy uppercase section headers (duties.xyz style) */
h2.notion-heading strong,
strong h2.notion-heading {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 24px !important;
}

/* H3 — Sub-sections */
h3.notion-heading * {
  letter-spacing: -.6px !important;
  line-height: 1 !important;
}

h3.notion-heading {
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  margin-bottom: 12px !important;
}

/* Spacious text and dividers */
.notion-text p {
  margin-bottom: 16px !important;
}

.notion-divider {
  margin: 48px 0 !important;
}


/* ===========================================
   SCROLL ANIMATIONS
   Elements fade up as they enter the viewport.
   JS adds .stark-fade class to content blocks,
   then .visible when they scroll into view.
   =========================================== */

.stark-fade {
  opacity: 0 !important;
  transform: translateY(35px) !important;
  transition: opacity 0.7s ease, transform 0.7s ease !important;
}

.stark-fade.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger columns: each column animates slightly after the previous */
.stark-fade.visible .notion-column:nth-child(1) { transition-delay: 0s; }
.stark-fade.visible .notion-column:nth-child(2) { transition-delay: 0.15s; }
.stark-fade.visible .notion-column:nth-child(3) { transition-delay: 0.2s; }

/* Image scale effect — starts slightly zoomed, settles to normal */
.stark-fade .notion-image img {
  transform: scale(1.04) !important;
  transition: transform 0.8s ease !important;
}

.stark-fade.visible .notion-image img {
  transform: scale(1) !important;
}


/* ===========================================
   HORIZONTAL SCROLL GALLERY
   Trigger: put a gallery database inside a BROWN callout.
   The callout becomes invisible and the gallery scrolls horizontally.
   JS adds slow auto-scroll for a dynamic feel.
   =========================================== */

/* Hide the brown callout wrapper visually — use broad selector */
.notion-callout.bg-brown,
.notion-callout[class*="brown"] {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: visible !important;
  flex-direction: unset !important;
  align-items: unset !important;
  height: auto !important;
  /* Break out to full width */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

/* Hide the callout icon */
.notion-callout.bg-brown > .notion-callout__icon,
.notion-callout[class*="brown"] > .notion-callout__icon {
  display: none !important;
}

/* Remove callout content margins */
.notion-callout.bg-brown > .notion-callout__content,
.notion-callout[class*="brown"] > .notion-callout__content,
.notion-callout.bg-brown .notion-callout__content,
.notion-callout[class*="brown"] .notion-callout__content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  margin-inline-start: 0 !important;
}

/* Turn the gallery inside into a horizontal scroller */
.notion-callout.bg-brown .notion-collection-gallery,
.notion-callout[class*="brown"] .notion-collection-gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 20px !important;
  padding: 8px 40px 20px !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  grid-template-columns: none !important;
}

.notion-callout.bg-brown .notion-collection-gallery::-webkit-scrollbar,
.notion-callout[class*="brown"] .notion-collection-gallery::-webkit-scrollbar {
  display: none !important;
}

/* Fixed-size cards instead of grid */
.notion-callout.bg-brown .notion-collection-card,
.notion-callout[class*="brown"] .notion-collection-card {
  min-width: 320px !important;
  max-width: 320px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  flex-shrink: 0 !important;
}

/* Override any grid settings */
.notion-callout.bg-brown .notion-collection-gallery.small,
.notion-callout.bg-brown .notion-collection-gallery.medium,
.notion-callout.bg-brown .notion-collection-gallery.large,
.notion-callout[class*="brown"] .notion-collection-gallery.small,
.notion-callout[class*="brown"] .notion-collection-gallery.medium,
.notion-callout[class*="brown"] .notion-collection-gallery.large {
  grid-template-columns: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}


/* ===========================================
   SCROLLING TICKER / MARQUEE
   Use a quote block in Notion for the ticker text.
   Add class "stark-marquee" via JS (see Body snippet).
   Separator: use · between items.
   =========================================== */

.stark-marquee {
  overflow: hidden !important;
  white-space: nowrap !important;
  border: none !important;
  border-top: 1px solid var(--color-border-default) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  padding: 16px 0 !important;
  margin: 32px 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

.stark-marquee .notion-semantic-string,
.stark-marquee .notion-quote__text {
  display: inline-block !important;
  white-space: nowrap !important;
}

.stark-marquee-track {
  display: inline-flex !important;
  animation: stark-scroll 20s linear infinite !important;
  gap: 0 !important;
}

.stark-marquee-track span {
  display: inline-block !important;
  padding: 0 2rem !important;
  font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

@keyframes stark-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ===========================================
   4. NAVBAR (kept from Horizon)
   =========================================== */

.super-navbar {
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}

.super-navbar__menu {
  background: var(--color-bg-default) !important;
}

.super-navbar__item-list {
  gap: 12px !important;
}

.super-navbar__item {
  font-weight: 100 !important;
  padding: 8px 12px !important;
  height: auto !important;
  border-radius: 50px !important;
  border: 1px solid transparent !important;
}

.super-navbar__item:hover,
.super-navbar__theme-toggle:hover {
  border: 1px solid var(--color-border-default) !important;
  background: var(--color-ui-hover-bg);
}

.super-navbar__theme-toggle {
  border-radius: 50px !important;
  border: 1px solid transparent !important;
  width: 42px !important;
  height: 42px !important;
  transition: background .16s ease-in-out, border .16s ease-in-out !important;
}

.super-navbar__theme-toggle svg {
  stroke-width: 1.5px !important;
}

.super-navbar__item {
  transition: background .16s ease-in-out, border .16s ease-in-out !important;
}


/* ===========================================
   5. BUTTONS — Outline style (default)
   Bold + Link in Notion = pill button
   =========================================== */

.super-navbar__cta {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  font-weight: 100 !important;
  display: inline-flex !important;
  justify-content: center !important;
  color: var(--color-text-default) !important;
  border: 1px solid var(--color-text-default) !important;
  background: var(--color-bg-default) !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
}

/* Bold links = outline buttons */
.notion-root .notion-text .notion-link strong,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong,
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link,
.notion-root .notion-text strong .notion-link {
  padding: 8px 12px !important;
  border-radius: var(--cta-border-radii) !important;
  opacity: 1 !important;
  font-weight: 100 !important;
  display: inline-flex !important;
  justify-content: center !important;
  background: var(--color-bg-default) !important;
  color: var(--color-text-default) !important;
  margin: -2px !important;
  border: 1px solid var(--color-text-default) !important;
  transition: background .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out !important;
  text-decoration: none !important;
}

/* Button hover — fills in */
.notion-root .notion-text .notion-link strong:hover,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong:hover,
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link:hover,
.notion-root .notion-text strong .notion-link:hover,
.super-navbar__cta:hover {
  background: var(--color-text-default) !important;
  color: var(--color-bg-default) !important;
  opacity: 1 !important;
}


/* ===========================================
   6. CALLOUTS — Two modes:

   STANDALONE CALLOUT = Content container (left-aligned, normal)
   Just use a callout block on its own. Looks like a subtle card/section.

   CARD CALLOUT = Kraft-style card (centered, big emoji, filled button)
   Put callouts INSIDE COLUMNS to trigger card mode.
   =========================================== */

/* --- 6A. ALL CALLOUTS (base styling) --- */
.notion-callout {
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--stark-card-radius) !important;
  overflow: visible !important;
}

/* Colored callouts: remove border (the background is enough) */
.notion-callout[class*="bg-"] {
  border: none !important;
}

/* Override Notion's green to tatami green */
.notion-callout.bg-green {
  background: var(--stark-tatami-green) !important;
}

/* --- 6B. CARD MODE: Colored callouts become centered cards --- */
/*
   RULE: Any callout with a background color = card (centered, big emoji, filled button)
   Default/white callouts = regular content containers (left-aligned)
   This works both inside columns AND standalone.
*/
.notion-callout[class*="bg-"]:not([class*="brown"]) {
  padding: var(--stark-card-padding) !important;
  flex-direction: column !important;
  align-items: center !important;
  display: flex !important;
}

/* Also apply card mode to any callout in columns (regardless of color) */
.notion-column-list .notion-column .notion-callout {
  padding: var(--stark-card-padding) !important;
  flex-direction: column !important;
  align-items: center !important;
  height: 100% !important;
  display: flex !important;
}

/* Remove icon-beside-content layout in card mode */
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-callout__content,
.notion-column .notion-callout .notion-callout__content {
  margin-inline-start: 0px !important;
  width: 100% !important;
  margin: 0px !important;
  padding: 0 !important;
}

/* Center and enlarge emoji icon in card mode */
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-callout__icon,
.notion-column .notion-callout .notion-callout__icon {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
  margin-right: 0 !important;
  margin-inline-end: 0 !important;
  align-self: center !important;
  font-size: 3.5rem !important;
  line-height: 1 !important;
}

.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-callout__icon *,
.notion-column .notion-callout .notion-callout__icon * {
  font-size: 3.5rem !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Center text in card mode */
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text__content,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-heading,
.notion-callout[class*="bg-"]:not([class*="brown"]) h1,
.notion-callout[class*="bg-"]:not([class*="brown"]) h2,
.notion-callout[class*="bg-"]:not([class*="brown"]) h3,
.notion-callout[class*="bg-"]:not([class*="brown"]) p,
.notion-column .notion-callout .notion-text,
.notion-column .notion-callout .notion-text__content,
.notion-column .notion-callout .notion-heading,
.notion-column .notion-callout h1,
.notion-column .notion-callout h2,
.notion-column .notion-callout h3,
.notion-column .notion-callout p {
  text-align: center !important;
}

/* FILLED BUTTONS inside card callouts */
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text .notion-link strong,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text__content .notion-link strong,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text strong .notion-link,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text__content .notion-semantic-string span .notion-link strong,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text__content .notion-semantic-string span strong .notion-link,
.notion-column .notion-callout .notion-text .notion-link strong,
.notion-column .notion-callout .notion-text__content .notion-link strong,
.notion-column .notion-callout .notion-text strong .notion-link,
.notion-column .notion-callout .notion-text__content .notion-semantic-string span .notion-link strong,
.notion-column .notion-callout .notion-text__content .notion-semantic-string span strong .notion-link {
  background: var(--color-text-default) !important;
  color: var(--color-bg-default) !important;
  border: none !important;
  padding: 12px 32px !important;
  margin-top: 0.5rem !important;
}

.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text .notion-link strong:hover,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text strong .notion-link:hover,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text__content .notion-link strong:hover,
.notion-column .notion-callout .notion-text .notion-link strong:hover,
.notion-column .notion-callout .notion-text strong .notion-link:hover,
.notion-column .notion-callout .notion-text__content .notion-link strong:hover {
  opacity: 0.85 !important;
  background: var(--color-text-default) !important;
  color: var(--color-bg-default) !important;
  border: none !important;
}

/* Center the button line in cards */
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-text:last-child,
.notion-column .notion-callout .notion-text:last-child {
  text-align: center !important;
  width: 100% !important;
}

/* Checkbox styling in card callouts */
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-to-do__title.checked,
.notion-callout[class*="bg-"]:not([class*="brown"]) .notion-to-do__title.checked del,
.notion-column .notion-callout .notion-to-do__title.checked,
.notion-column .notion-callout .notion-to-do__title.checked del {
  text-decoration: none !important;
  opacity: 1 !important;
  color: inherit !important;
}

/* Equal-height columns for card layouts */
.notion-column-list {
  align-items: stretch !important;
}

.notion-column-list .notion-column {
  display: flex !important;
  flex-direction: column !important;
}

.notion-column-list .notion-column > .notion-callout {
  flex: 1 !important;
}


/* ===========================================
   7. GALLERY / COLLECTIONS (kept from Horizon)
   The masonry gallery showcase you love
   =========================================== */

.notion-collection-card,
.notion-collection-card__property-list,
.notion-property__person > .notion-semantic-string > span {
  display: flex !important;
}

.theme-dark .notion-code code,
.theme-dark .notion-collection-card__content,
.theme-dark .notion-collection-card__property span .date {
  color: var(--color-text-default) !important;
}

.notion-collection-card__content,
.notion-collection-card__property span .date,
.notion-collection-gallery .pill-default {
  color: var(--color-bg-default) !important;
}

.theme-dark .notion-collection-gallery .pill-default {
  background: 0 0 !important;
  border: 1px solid var(--color-text-default);
  color: var(--color-text-default) !important;
}

.notion-collection-gallery.small {
  grid-template-columns: 1fr 1fr 1fr !important;
}

.notion-collection-gallery.medium {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

.notion-collection-gallery.medium .notion-collection-card {
  min-height: 420px !important;
}

@media all and (max-width: 1200px) {
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .notion-collection-gallery.medium .notion-collection-card:last-of-type {
    grid-column: 2 / -1;
  }
}

@media all and (max-width: 968px) {
  .notion-collection-gallery.medium {
    grid-template-columns: 1fr 1fr !important;
  }
  .notion-collection-gallery.medium .notion-collection-card:last-of-type {
    grid-column: 1 / -1;
  }
}

@media all and (max-width: 764px) {
  .notion-collection-gallery.medium,
  .notion-collection-gallery.small {
    grid-template-columns: 1fr !important;
  }
}

.notion-collection-gallery.large {
  grid-template-columns: 1fr 1fr !important;
  display: grid !important;
  grid-auto-flow: row dense !important;
  grid-auto-columns: 1fr !important;
  grid-column-gap: 24px !important;
  grid-row-gap: 24px !important;
  grid-template-rows: auto !important;
}

@media only screen and (min-width: 1440px) {
  .notion-collection-gallery.large {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

@media only screen and (max-width: 767px) {
  .notion-collection-gallery.large {
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
  }
}

/* Masonry pattern for large galleries */
@media only screen and (min-width: 992px) {
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+2),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+8),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+12),
  .notion-collection-gallery.large .notion-collection-card:nth-child(26n+20),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+2):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+8):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+12):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+20):not(:last-child) {
    grid-column: span 2 / auto;
    grid-row: span 2 / auto;
  }
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+11):not(:last-child),
  .notion-collection-gallery.medium .notion-collection-card:nth-child(26n+16):not(:last-child) {
    grid-column: span 2 / auto;
  }
}

.notion-collection-gallery,
.notion-collection-list {
  border-top: 0 !important;
}

/* Card covers */
.notion-collection-card__cover img {
  padding: 0 !important;
  height: 100% !important;
  transition: transform .2s ease-in-out !important;
}

.notion-collection-card picture,
.notion-collection-card__cover div {
  height: 100% !important;
}

.notion-collection-card {
  flex-direction: column !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border-default) !important;
  position: relative !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.notion-collection-card__cover {
  height: 100% !important;
  position: relative !important;
}

/* Hover zoom on gallery cards */
.notion-collection-card:hover .notion-collection-card__cover img {
  transform: scale(1.05) !important;
  -webkit-transform: scale(1.05) !important;
  -ms-transform: scale(1.05) !important;
}

/* Gradient overlay on card content */
.notion-collection-card__content {
  position: absolute !important;
  bottom: 0 !important;
  background: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 100%);
  width: 100% !important;
}

/* Arrow on hover */
.notion-collection-card:hover .notion-property__title::after {
  opacity: 1 !important;
}

.notion-property__title::after {
  transition: opacity .2s ease-in-out !important;
  content: '→';
  opacity: 0 !important;
  margin-left: 6px !important;
}

.notion-collection-gallery .pill-default {
  background: 0 0 !important;
  border: 1px solid var(--color-bg-default);
}

.notion-property__title .notion-semantic-string {
  font-weight: 200 !important;
}

.notion-collection-card__property-list {
  margin-top: 0 !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: visible !important;
}

.notion-property__text {
  font-size: 14px !important;
  font-weight: 300 !important;
}

.notion-collection-card__property .notion-semantic-string {
  white-space: pre-wrap !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}


/* ===========================================
   8. PILLS / TAGS
   =========================================== */

.notion-pill {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 500 !important;
  padding: 1px 7px 0 !important;
  border-radius: 50px !important;
}

.notion-pill.pill-gray,
.notion-dropdown__menu,
.super-navbar__cta {
  background: var(--color-bg-default) !important;
}

.notion-pill.pill-gray {
  border: 1px solid var(--color-border-default);
}


/* ===========================================
   9. LIST VIEW
   =========================================== */

.notion-collection-list__item:first-child,
.super-footer {
  border-top: 1px solid var(--color-border-default) !important;
}

.notion-collection-list__item {
  border-bottom: 1px solid var(--color-border-default) !important;
  padding: 24px !important;
  min-height: 38px !important;
  border-radius: 0 !important;
  transition: background-color .15s !important;
  margin: 0 !important;
}

.notion-collection-list__item .notion-property__title .notion-semantic-string > span {
  border-bottom: 0 !important;
}

.notion-collection-list__item .notion-property.notion-property__title .notion-semantic-string > span,
.notion-collection-list__item .notion-property__title .notion-semantic-string {
  white-space: pre-wrap !important;
}


/* ===========================================
   10. PAGE PROPERTIES
   =========================================== */

.notion-page__property-name > span {
  font-size: 16px !important;
}

.notion-page__properties .notion-divider {
  margin: 32px 0 !important;
}

.notion-property__date .date {
  opacity: .6;
}

.notion-collection__header-wrapper {
  flex-direction: column !important;
  align-items: flex-start !important;
}


/* ===========================================
   11. TOGGLES / FAQ
   =========================================== */

.notion-toggle {
  border: 1px solid var(--color-border-default) !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  text-align: left !important;
  transition: .3s ease-in-out !important;
}

.notion-toggle.bg-brown {
  display: none !important;
}

.notion-toggle__trigger {
  display: none !important;
}

.notion-toggle.open,
.notion-toggle:hover {
  background: var(--color-ui-hover-bg) !important;
}

.notion-toggle.open:before,
.notion-toggle:before {
  position: absolute !important;
  font-weight: 100 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  opacity: .4 !important;
  top: 20px !important;
  right: 18px !important;
}

.notion-toggle:before {
  content: "+" !important;
}

.notion-toggle.open:before {
  content: "-" !important;
}

.notion-toggle__summary {
  margin: 0 !important;
  padding: 18px 30px 18px 18px !important;
}

.notion-heading.toggle {
  padding: 0 !important;
}

.notion-toggle.open {
  padding-bottom: 16px !important;
}

.notion-toggle__content {
  padding-inline-start: 0px !important;
  border-top: 1px solid var(--color-border-default) !important;
  margin: 0 20px !important;
  padding-top: 16px !important;
  transition: .05s ease-in-out !important;
}

.notion-toggle__content .notion-text__content {
  margin-bottom: 0 !important;
}

.notion-toggle.open .notion-toggle__content {
  border-top: 1px solid var(--color-border-default) !important;
  opacity: 1 !important;
  height: auto !important;
}

.notion-toggle.closed .notion-toggle__content {
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  display: block !important;
}


/* ===========================================
   12. CHECKBOXES
   =========================================== */

.notion-checkbox,
.notion-checkbox svg {
  border-radius: 2px !important;
}

.notion-to-do__title.checked del {
  text-decoration: none !important;
}

.notion-checkbox.checked > svg {
  fill: var(--color-bg-default) !important;
}


/* ===========================================
   13. DROPDOWNS / VIEW PICKER
   =========================================== */

.notion-dropdown {
  width: 100% !important;
}

.notion-dropdown__button {
  justify-content: space-between !important;
  width: 100% !important;
  border: 1px solid var(--color-border-default) !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

.notion-dropdown__button svg:first-of-type,
.notion-dropdown__menu-header {
  display: none !important;
}

.notion-dropdown__menu-wrapper {
  margin-bottom: 8px !important;
}

.notion-dropdown__menu {
  width: 100% !important;
  border-radius: 8px !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 12%) !important;
  border: 1px solid var(--color-border-default) !important;
  margin-top: 5px !important;
}

.notion-dropdown__option-list {
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.notion-dropdown__option {
  padding: 5px 16px !important;
  height: 50px !important;
}

.notion-dropdown__button-title,
.notion-dropdown__option p {
  font-size: 16px !important;
  font-weight: 300 !important;
}

.notion-dropdown__button:hover {
  background: 0 0 !important;
}

.notion-dropdown__option-icon {
  display: none !important;
}

/* Desktop: show as horizontal pills */
@media all and (min-width: 624px) {
  .notion-dropdown__button,
  .notion-dropdown__menu-header {
    display: none !important;
  }
  .notion-dropdown__menu.initial-state {
    z-index: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .notion-dropdown__menu.animate-in,
  .notion-dropdown__menu.animate-in.animate-out,
  .notion-dropdown__menu.animate-out {
    animation: none !important;
  }
  .notion-dropdown__menu {
    background: 0 0 !important;
    box-shadow: unset !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
    border: none !important;
  }
  .notion-dropdown__menu-wrapper {
    margin-bottom: 12px !important;
    position: relative !important;
  }
  .notion-dropdown__option:hover {
    background: var(--color-text-default) !important;
    border: 1px solid var(--color-text-default) !important;
  }
  .notion-dropdown__option:hover p,
  .notion-dropdown__option:hover svg {
    color: var(--cta-text-hover-color) !important;
  }
  .notion-dropdown__option p,
  .notion-dropdown__option.active p {
    color: var(--color-text-default) !important;
  }
  .notion-dropdown__option {
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--cta-border-radii) !important;
    transition: .2s ease-out !important;
    height: auto !important;
    padding: 8px 12px !important;
  }
  .notion-dropdown__option p {
    transition: color .2s ease-in-out !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
  }
  .notion-dropdown__option-list {
    display: flex !important;
    padding: 0 !important;
    height: auto !important;
    gap: 8px !important;
  }
  .notion-dropdown__option.active {
    background: var(--color-bg-gray) !important;
    border: 1px solid transparent !important;
  }
}


/* ===========================================
   14. CODE BLOCKS
   =========================================== */

.notion-code pre {
  border: 1px solid var(--color-border-default) !important;
}

.token.selector { color: #2a2a2a !important; }
.token.property { color: #909090 !important; }
.token.important { color: var(--primary-color) !important; }


/* ===========================================
   15. LIGHTBOX
   =========================================== */

.lightbox-wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.close-lightbox {
  position: absolute;
  top: 0;
  right: 0;
  width: 67px;
  padding: 8px 8px 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  font-size: 2rem;
  background: var(--navbar-background-color);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-default);
  border-radius: 500px;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.close-lightbox:hover {
  background: var(--color-ui-hover-bg);
}

.lightbox-image {
  width: auto;
  max-height: 90%;
  max-width: 80%;
  height: auto;
  z-index: 100;
  border-radius: 12px;
}


/* ===========================================
   16. QUOTES
   =========================================== */

.notion-quote {
  line-height: 1.4 !important;
  margin-bottom: 24px !important;
  margin-top: 25px !important;
  padding-left: 24px !important;
  letter-spacing: -.3px !important;
  border-color: var(--color-border-default) !important;
}


/* ===========================================
   17. FOOTER
   =========================================== */

.super-footer.corners {
  padding: 40px 26px !important;
  gap: 60px !important;
}

.super-footer__footnote {
  font-weight: 300 !important;
}

.super-footer.floating {
  border: 1px solid var(--color-border-default) !important;
}


/* ===========================================
   18. PAGE-SPECIFIC OVERRIDES
   =========================================== */

/* Blog/posts pages: narrower content width */
#page-blocks .max-width,
.parent-page__blog .max-width,
.parent-page__posts .max-width {
  --layout-max-width: 900px !important;
}

/* No-click cards still show pointer */
.notion-collection-card.no-click {
  cursor: pointer !important;
}