/* ──────────────────────────────────────────────────────────────────────
 * Snakeology — minimal layout overrides on top of the original WP theme.
 *
 * The original theme positions the 3 cols inside .container-top .row as
 * three independent absolutely-positioned blocks:
 *   col-md-4:nth-child(1) → static (left)
 *   col-md-4:nth-child(2) → position:absolute; left:50%; translateX(-50%)
 *   col-md-4:nth-child(3) → position:absolute; right:0
 * That math relied on Bootstrap 3 giving every .col-md-4 a width:33.3%
 * — which only kicks in above 992px viewport. Below that, .col-md-4 has
 * no width set → element is 100% wide → translateX(-50%) shifts the
 * centered col by 100% of viewport (=off-screen left), so the centered
 * logo appears at the LEFT edge, overlapping the Ideas button.
 *
 * Fix: use flexbox so the 3 cols are always laid out left/center/right
 * regardless of viewport width, with no math dependency on bootstrap’s
 * grid breakpoints.
 * ─────────────────────────────────────────────────────────────────── */

/* Black top bar (matches the dark hero behind the logo) */
.container-top.fixed {
  background: #1a1410;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 62px;
}
.container-top.fixed > .container-fluid {
  height: 100%;
  padding: 0;
}

.container-top .container-fluid > .row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  padding: 0 20px;
}
.container-top .container-fluid > .row::before,
.container-top .container-fluid > .row::after { display: none !important; }

.container-top .container-fluid > .row > .col-md-4 {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
/* LEFT: Ideas button + green quote/example toggle, side by side */
.container-top .container-fluid > .row > .col-md-4:nth-child(1) {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* CENTER: Snakeology logo */
.container-top .container-fluid > .row > .col-md-4:nth-child(2) {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.container-top .container-fluid > .row > .col-md-4:nth-child(2) .site-title {
  margin: 0;
}
/* RIGHT: ABOUT */
.container-top .container-fluid > .row > .col-md-4.right-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Same flex layout for the bottom footer row that uses the same trick */
.footer-bottom .footer .container-fluid > .row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom .footer .container-fluid > .row::before,
.footer-bottom .footer .container-fluid > .row::after { display: none !important; }

/* The hero section sits flush under the fixed bar — its top should be
   black too so the logo on dark-red bg blends with the bar above. */
.whole-site-container {
  margin-top: 62px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Ideas overlay — 3-tier hierarchy (Reality/Society/Humanity/Morality
 * → mid-level → leaf categories), reconstructed from the original WP DB.
 *
 * Each .sf-level-0 (root) and .sf-level-1.sf-mid (mid) contains a
 * <label class="sf-group-label"> that toggles .open on its parent <li>.
 * When .open, the nested <ul.children> is shown. Leaves are radios.
 * ─────────────────────────────────────────────────────────────────── */
.searchandfilter[data-sf-form-id="969"] ul,
.searchandfilter[data-sf-form-id="969"] li { list-style: none; }

/* Root labels: Reality / Society / Humanity / Morality */
.searchandfilter[data-sf-form-id="969"] .sf-level-0 > .sf-group-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: .5px;
  margin: 0;
  padding: 6px 0;
  width: 100%;
  user-select: none;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-0 > .sf-group-label img.dropdown {
  width: 20px;
  height: auto;
  opacity: .8;
  transition: transform .25s ease;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-0.open > .sf-group-label img.dropdown {
  transform: rotate(180deg);
}

/* Children of root collapsed by default. Animated via max-height/opacity
   so the list smoothly expands/collapses instead of snapping. The 2000px
   ceiling is large enough for the longest root group (Society/Morality)
   while keeping the transition timing predictable. */
.searchandfilter[data-sf-form-id="969"] .sf-level-0 > ul.children {
  display: block; /* override legacy custom.css display:none so animation can run */
  padding-left: 18px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  will-change: max-height;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-0.open > ul.children {
  max-height: 2000px;
  opacity: 1;
  transition: max-height .5s ease, opacity .3s ease .05s;
}
/* During fit() measurement the tree is collapsed synchronously — kill the
 * transitions so the collapsed height is read immediately, not mid-animation. */
#sf-cat-list-969.is-measuring .children,
#sf-cat-list-969.is-measuring ul.sf-leaves {
  transition: none !important;
}

/* Mid-level: both a selectable radio AND a collapsible header.
   Markup is the standard WP search-filter leaf (input + label siblings),
   so the existing custom.css rule
     .sf-level-1 input:checked ~ label:after { opacity:1 }
   draws the orange checkmark. We only add the chevron + larger font. */
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-mid > .sf-label-radio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26px;
  font-weight: 500;
  padding-right: 6px;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-mid > .sf-label-radio .sf-toggle {
  width: 14px;
  height: auto;
  opacity: .65;
  cursor: pointer;
  margin-left: 12px;
  flex: 0 0 auto;
  transition: transform .25s ease;
  /* enlarge clickable area without affecting layout */
  padding: 8px;
  box-sizing: content-box;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-mid.open > .sf-label-radio .sf-toggle {
  transform: rotate(180deg);
}
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-mid > ul.sf-leaves {
  display: block;
  padding-left: 22px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .2s ease;
  will-change: max-height;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-mid.open > ul.sf-leaves {
  max-height: 1500px;
  opacity: 1;
  transition: max-height .45s ease, opacity .25s ease .05s;
}

/* Leaves (sf-level-1.sf-leaf) — radio + label, original WP markup */
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-leaf {
  position: relative;
  padding: 3px 0;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-leaf > label {
  cursor: pointer;
  display: block;
  padding-left: 30px;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  position: relative;
}
.searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-leaf > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * Ideas button — refined pill: subtle border, tightened typography,
 * lift + soft glow on hover. The legacy theme rendered it as a plain
 * brown rectangle which felt clunky next to the round green toggle.
 * ─────────────────────────────────────────────────────────────────── */
.btn.btn-menu,
a.btn.btn-menu {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(239, 231, 212, 0.18);
  background: linear-gradient(180deg, #3a2f1f 0%, #2a2018 100%);
  color: #f4efe6;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 2px 6px rgba(0,0,0,0.25);
  transition: transform 180ms ease, box-shadow 180ms ease,
              border-color 180ms ease, background 180ms ease;
}
.btn.btn-menu:hover,
a.btn.btn-menu:hover {
  border-color: rgba(168, 138, 78, 0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 4px 14px rgba(0,0,0,0.4),
              0 0 0 1px rgba(168, 138, 78, 0.25);
  background: linear-gradient(180deg, #463726 0%, #2f2419 100%);
}
.btn.btn-menu:focus-visible,
a.btn.btn-menu:focus-visible {
  outline: 2px solid #c9a35a;
  outline-offset: 2px;
}
.btn.btn-menu span {
  line-height: 1;
}
.btn-menu-icon {
  font-size: 14px;
  opacity: 0.85;
  width: 14px;
  text-align: center;
}
.btn.btn-menu .close-x.btn-menu-icon {
  width: 13px;
  height: 13px;
  opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────────────────
 * FILTERS button — mirror the refined Ideas pill so the two header
 * controls feel like a matched pair (one on the left rail, one above
 * the feed). Same gradient, border, shadow, hover lift + amber glow,
 * same Poppins/uppercase rhythm.
 * ─────────────────────────────────────────────────────────────────── */
.btn.btn-filters {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(239, 231, 212, 0.18);
  background: linear-gradient(180deg, #3a2f1f 0%, #2a2018 100%);
  color: #f4efe6;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 2px 6px rgba(0,0,0,0.25);
  transition: transform 180ms ease, box-shadow 180ms ease,
              border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.btn.btn-filters:hover,
.btn.btn-filters:focus {
  color: #f4efe6;
  border-color: rgba(168, 138, 78, 0.55);
  background: linear-gradient(180deg, #463726 0%, #2f2419 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 4px 14px rgba(0,0,0,0.4),
              0 0 0 1px rgba(168, 138, 78, 0.25);
}
.btn.btn-filters:focus-visible {
  outline: 2px solid #c9a35a;
  outline-offset: 2px;
}
.btn.btn-filters img {
  height: 14px;
  width: auto;
  opacity: 0.85;
  /* Legacy SVG ships dark; flip to cream so it reads on the dark pill. */
  filter: brightness(0) invert(1);
}

/* Modal #menutop tag lists */
.modal #search-filter-form-1036 .sf-field-taxonomy-school ul,
.modal #search-filter-form-1036 .sf-field-taxonomy-area ul {
  list-style: none;
  padding-left: 0;
}

/* Filters modal — clean section spacing so Relevance/Sort/School/Points
   don't collide visually, and long lists scroll instead of overflowing.
   Neutralizes legacy custom.css rules that float Relevance and inline-flex
   Sort (which caused overlap with the bordered sections below). */
.modal #search-filter-form-1036 > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}
.modal #search-filter-form-1036 > ul::after {
  content: '';
  display: block;
  clear: both;
}
.modal #search-filter-form-1036 > ul > li {
  display: block !important;
  float: none !important;
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(155,155,155,.25);
  list-style: none;
  width: 100%;
  gap: 0 !important;
}
/* Hidden helpers (legacy: hidden category select; sort hidden in quotes). */
.modal #search-filter-form-1036 > ul > li#sf-field-modal-category,
.modal #search-filter-form-1036 > ul > li[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.modal #search-filter-form-1036 > ul > li:last-child,
.modal #search-filter-form-1036 > ul > li.sf-field-submit {
  border-bottom: 0;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.modal #search-filter-form-1036 > ul > li > h4 {
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
.modal #search-filter-form-1036 ul ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* Relevance & Sort: same pill grid as School/Points instead of stacked rows. */
.modal #m-priority-list,
.modal #m-sort-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 10px;
  margin-top: 0 !important;
}
.modal #m-priority-list li,
.modal #m-sort-list li {
  display: block;
  margin: 0;
  padding: 3px 0;
  font-size: 18px;
  border: none;
}
/* ── Fit the whole Filters modal to the viewport ─────────────────────
 * The summed sections + long school list used to run off the bottom of
 * short screens. Cap the dialog to the viewport height, scroll the field
 * list as a single region with the submit pinned, and scale the type and
 * spacing with viewport height so it stays compact.
 */
#menutop { top: 0 !important; }
#menutop .modal-dialog {
  width: min(900px, calc(100% - 20px));
  margin: 2vh auto;
  max-height: 96vh;
}
#menutop .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 96vh;
  overflow: hidden;
  padding: clamp(10px, 2vh, 15px) 20px;
}
#menutop .modal-header { flex: 0 0 auto; }
#menutop .name-n-close { margin-bottom: clamp(6px, 1.4vh, 25px); }
#menutop .modal-title { font-size: clamp(20px, 3.2vh, 34px); }
#menutop .cat-description {
  font-size: clamp(12px, 1.7vh, 16px);
  line-height: 1.35;
  max-height: 22vh;
  overflow-y: auto;
}
#menutop .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}
#menutop #search-filter-form-1036 > ul > li {
  margin-bottom: clamp(8px, 1.6vh, 18px) !important;
  padding-bottom: clamp(8px, 1.4vh, 16px) !important;
}
#menutop #search-filter-form-1036 > ul > li > h4 {
  margin-bottom: clamp(6px, 1vh, 12px) !important;
  font-size: clamp(13px, 2vh, 18px) !important;
}
#menutop #m-priority-list li,
#menutop #m-sort-list li,
#menutop .sf-field-taxonomy-area ul li,
#menutop .sf-field-taxonomy-school ul li {
  font-size: clamp(13px, 1.9vh, 18px);
}
/* Long lists scroll with the whole body — no nested scrollbars. */
#menutop #m-school-list,
#menutop #m-point-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
/* Keep the submit reachable at the bottom of the scroll region. */
#menutop .sf-field-submit {
  position: sticky;
  bottom: 0;
  margin-top: clamp(8px, 1.4vh, 25px) !important;
  padding-top: 10px;
  background: #fff;
}

/* Tile rows — bootstrap 3 .col-md-* fallback for narrow viewports */
.posts-box .post-tile .row.post-blog {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.posts-box .post-tile .row.post-blog > .col-md-2,
.posts-box .post-tile .row.post-blog > .col-md-10 {
  padding: 0 15px;
}
@media (min-width: 992px) {
  .posts-box .post-tile .row.post-blog > .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .posts-box .post-tile .row.post-blog > .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
}
@media (max-width: 991px) {
  .posts-box .post-tile .row.post-blog > .col-md-2,
  .posts-box .post-tile .row.post-blog > .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * Tile visual polish (category badge, meta blocks, bottom-pinned footer)
 * ──────────────────────────────────────────────────────────────────── */

/* Make each tile a flex row so the right column can stretch full-height */
.posts-box .post-tile .row.post-blog {
  align-items: stretch;
  padding: 18px 0 6px;
}

.posts-box .post-tile .tile-left,
.posts-box .post-tile .tile-right {
  display: flex;
  flex-direction: column;
}

/* ── Left column: category "mini-card" + uniform meta blocks ── */
.tile-category-badge {
  display: inline-block;
  background: #f4efe6;
  border: 1px solid #e3d9c4;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  align-self: flex-start;
  max-width: 100%;
}
.tile-category-badge a {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.2;
}
.tile-category-badge:hover { background: #ede5d3; }
.tile-category-badge a:hover { text-decoration: none; }

.tile-meta {
  margin: 0 0 12px;
  line-height: 1.35;
}
.tile-meta-label {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a7a55;
  font-family: inherit;
}
.tile-meta-value,
.tile-meta-value a.tile-meta-link {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #2a2a2a;
  font-family: inherit;
  text-decoration: none;
  word-wrap: break-word;
}
.tile-meta-value a.tile-meta-link:hover { text-decoration: underline; }

.tile-source-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6b5a30;
  text-decoration: underline;
}
.tile-source-link:hover { color: #1a1a1a; }

/* ── Right column: body grows, footer pins to bottom ── */
.posts-box .post-tile .tile-right { flex: 1 1 auto; }
.posts-box .post-tile .tile-body { flex: 1 1 auto; }

.posts-box .post-tile .tile-footer {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.posts-box .post-tile .tile-footer .btn-read-more { margin: 0; }
.tile-footer-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.tile-footer-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #6b6b6b;
  font-family: inherit;
}
.tile-footer-meta em {
  font-style: normal;
  font-weight: 600;
  color: #2a2a2a;
  text-transform: capitalize;
}
.tile-footer .example-tile-source-mobile { font-size: 12px; }

/* Hide the old WP horizontal rule pattern between tiles when present */
.posts-box .post-tile .hr-blog {
  border: 0;
  border-top: 1px solid #ece7db;
  margin: 6px 0 0;
}

/* ──────────────────────────────────────────────────────────────────────
 * Single-post (Full screen) view — reuse the polished tile vocabulary.
 * ──────────────────────────────────────────────────────────────────── */
.single-post-page .single-post-card {
  max-width: 880px;
  margin: 24px auto 8px;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid #ece7db;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.single-post-meta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.single-post-meta-top .tile-category-badge { margin: 0; }
.single-post-tax-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f0e9d8;
  border: 1px solid #e3d9c4;
  color: #3a2f17;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
}
.single-post-tax-chip:hover { background: #e8dec5; text-decoration: none; }
.single-post-verified {
  color: #4d8b3a;
  font-size: 16px;
  margin-left: 2px;
}

.single-post-body {
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0 0 22px;
  white-space: normal;
}

.single-post-meta-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  padding-top: 18px;
  border-top: 1px solid #ece7db;
}
.single-post-meta-bottom .tile-meta { margin: 0; }
.single-post-meta-bottom .tile-meta-value { font-size: 14px; }

.single-post-page .single-post-buttons {
  max-width: 880px;
  margin: 18px auto 40px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Ideas overlay — sliding toggle (Keyword ↔ Idea)
 * ──────────────────────────────────────────────────────────────────── */
/* Row holding the Keyword/Idea toggle. */
.sf-search-tools {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Search box — the input stays visible; a selected idea shows as a small
 * removable chip sitting inside it on the left, with its own X. */
.sf-search-box {
  position: relative;
  display: block;
}
.sf-search-box .sf-input-text {
  width: 100%;
}
.sf-search-tag {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 40px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 13px;
  border-radius: 999px;
  background: #F34509;            /* orange = the selected-idea colour */
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.sf-search-tag[hidden] { display: none; }
.sf-search-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-search-tag-x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.sf-search-tag-x:hover { background: rgba(0, 0, 0, 0.4); }

/* Search submit — faded/disabled until there's something to search for; a
 * click in that state shakes it and pops a hint bubble for 4s. */
.searchandfilter[data-sf-form-id="969"] input[type="submit"].sf-submit-disabled {
  opacity: 0.4;
  filter: grayscale(0.35);
  cursor: not-allowed;
}
@keyframes sfSubmitShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.searchandfilter[data-sf-form-id="969"] input[type="submit"].sf-shake {
  animation: sfSubmitShake 0.45s ease;
}
.sf-submit-hint {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 12px;
  padding: 9px 16px;
  border-radius: 10px;
  background: #EFE7D4;
  color: #251E18;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  z-index: 5;
}
.sf-submit-hint[hidden] { display: none; }
.sf-submit-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #EFE7D4;
}
.sf-mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin: 10px 0 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  user-select: none;
}
.sf-mode-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.sf-mode-toggle .sf-mode-toggle-opt {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 6px 16px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(239, 231, 212, 0.7);
  cursor: pointer;
  border-radius: 999px;
  transition: color 200ms ease;
}
.sf-mode-toggle .sf-mode-toggle-thumb {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: #efe7d4;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.sf-mode-toggle input#sf-mode-idea:checked ~ .sf-mode-toggle-thumb {
  transform: translateX(100%);
}
.sf-mode-toggle input#sf-mode-kw:checked   ~ label[for="sf-mode-kw"],
.sf-mode-toggle input#sf-mode-idea:checked ~ label[for="sf-mode-idea"] {
  color: #2a2018;
}
.sf-search-hint {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  color: #c9bfa3;
  font-style: italic;
  font-family: 'Poppins', sans-serif;
}

/* ──────────────────────────────────────────────────────────────────────
 * Quote / Example circle toggle — palette-aligned colours so the user
 * always sees which view is active. Both shades are pulled from the
 * site's warm earth palette (cream/khaki/copper/forest) instead of the
 * legacy flat green so they sit naturally next to the dark header.
 *   mode-quote   → deep forest  (theory / academic — calm, reflective)
 *   mode-example → burnt copper (practice / history — warm, kinetic)
 * Falls back to the muted parchment grey when no idea is selected.
 * ─────────────────────────────────────────────────────────────────── */
.circle.green {
  transition: background 220ms ease, box-shadow 220ms ease;
}
.circle.green.green-active.mode-quote {
  background: #3d5a4a;
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.12) inset,
              0 2px 8px rgba(0, 0, 0, 0.3);
}
.circle.green.green-active.mode-example {
  background: #a85a2a;
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.14) inset,
              0 2px 8px rgba(0, 0, 0, 0.3);
}
.circle.green.green-active.mode-quote:hover   { background: #486b58; }
.circle.green.green-active.mode-example:hover { background: #b9682f; }

/* Icon container inside the circle — single typographic anchor for
 * both the FA glyph (quote) and the inline SVG (sickle). */
#circle-green .circle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
  line-height: 1;
}
#circle-green .circle-icon .fa { font-size: 18px; line-height: 1; }
#circle-green .circle-icon svg { display: block; }
/* Neutral (home) state — fade the placeholder icon into the grey disc. */
#circle-green:not(.green-active) .circle-icon { opacity: 0.45; }

/* Coin-flip on toggle click. Because clicking navigates to a new URL
 * (?type=quote ↔ ?type=example), we can't run a single keyframe end-
 * to-end. Instead we split the flip across the navigation:
 *   - JS adds .flipping-out on click → disc rotates 0° → 90° (edge-on),
 *     then we navigate while it's edge-on (icon swap is hidden).
 *   - On the next page, JS reads a sessionStorage flag and adds
 *     .flipping-in → disc rotates -90° → 0° to complete the flip.
 * Net effect: a continuous coin-flip even though a full reload happens
 * mid-animation. */
@keyframes circleCoinFlipOut {
  from { transform: rotateY(0deg);  }
  to   { transform: rotateY(90deg); }
}
@keyframes circleCoinFlipIn {
  from { transform: rotateY(-90deg); }
  to   { transform: rotateY(0deg);   }
}
.circle.green.flipping-out {
  animation: circleCoinFlipOut 180ms cubic-bezier(.45,.05,.55,.95) both;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.circle.green.flipping-in {
  animation: circleCoinFlipIn 200ms cubic-bezier(.22,.61,.36,1) both;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .circle.green.flipping-out,
  .circle.green.flipping-in { animation: none; }
}

/* Quote/Example view switch — card-flip every tile instead of reloading.
 * Old tiles rotate out edge-on, then the new view's tiles rotate in. */
@keyframes tileFlipOut {
  from { transform: perspective(900px) rotateY(0deg);  opacity: 1; }
  to   { transform: perspective(900px) rotateY(90deg); opacity: 0; }
}
@keyframes tileFlipIn {
  from { transform: perspective(900px) rotateY(-90deg); opacity: 0; }
  to   { transform: perspective(900px) rotateY(0deg);   opacity: 1; }
}
.posts-box.flip-out .post-tile {
  animation: tileFlipOut .30s ease-in both;
  transform-origin: center;
  backface-visibility: hidden;
}
.posts-box .post-tile.flip-in {
  animation: tileFlipIn .34s ease-out both;
  transform-origin: center;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .posts-box.flip-out .post-tile,
  .posts-box .post-tile.flip-in { animation: none; }
}

/* "Other" root sits apart from the 4 core areas — extra gap above it, as if
 * a whole top-level category separated it from Morality. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] #sf-cat-list-969 > li.sf-level-0.sf-root-other {
  margin-top: calc(40px * var(--is, 1));
}
/* Make the existing rule under the last core area (Morality) a double line,
 * so it reads as a stronger break before "Other". */
.search-container.opened .searchandfilter[data-sf-form-id="969"] #sf-cat-list-969 > li.sf-level-0:has(+ li.sf-root-other) {
  border-bottom: 4px double #9B9B9B;
}

/* ──────────────────────────────────────────────────────────────────────
 * Ideas overlay open/close — slide-in-from-left animation.
 * Mirrors the in-panel dropdown unfurl feel: the whole panel sweeps in
 * from the left edge with a soft cubic-bezier (out-quint), then sweeps
 * back the same way on close. Inner blocks (search row + category
 * tree) get a tiny staggered rise so the panel feels like it's
 * *unfolding*, not just sliding.
 *
 * Implementation note: the legacy CSS toggles display:none/flex on
 * .search-container, which can't be transitioned. We layer keyframe
 * animations on top — when JS adds .opened the panel is already
 * display:flex, so the animation runs from off-screen to position.
 * On close, JS adds .closing first; once animationend fires, JS
 * removes .opened and the panel goes back to display:none.
 * ─────────────────────────────────────────────────────────────────── */
@keyframes ideasSlideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ideasSlideOut {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes ideasUnfold {
  from { transform: translateX(-18px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.search-container.opened {
  animation: ideasSlideIn 360ms cubic-bezier(.22, .61, .36, 1) both;
  transform-origin: left center;
  will-change: transform, opacity;
}
.search-container.closing {
  animation: ideasSlideOut 260ms cubic-bezier(.55, .06, .68, .19) both;
  pointer-events: none;
}
/* Inner sections fade-and-rise after the panel itself has landed. */
.search-container.opened .search-by-keyword,
.search-container.opened .searchandfilter[data-sf-form-id="969"] > form > ul > li {
  animation: ideasUnfold 320ms cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: 140ms;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] > form > ul > li:nth-child(2) { animation-delay: 200ms; }
.search-container.opened .searchandfilter[data-sf-form-id="969"] > form > ul > li:nth-child(3) { animation-delay: 260ms; }
.search-container.opened .searchandfilter[data-sf-form-id="969"] > form > ul > li:nth-child(4) { animation-delay: 320ms; }
/* Skip the inner unfurl while closing so the whole panel exits as one. */
.search-container.closing .search-by-keyword,
.search-container.closing .searchandfilter[data-sf-form-id="969"] > form > ul > li {
  animation: none;
}
/* Reduced-motion: collapse to instant open/close. */
@media (prefers-reduced-motion: reduce) {
  .search-container.opened,
  .search-container.closing,
  .search-container.opened .search-by-keyword,
  .search-container.opened .searchandfilter[data-sf-form-id="969"] > form > ul > li {
    animation: none !important;
  }
}

/* Submit bar at the bottom of the Ideas overlay — the legacy theme
 * paints it #201811 which sits a shade darker than the panel body
 * (#2E251E set on <body> when the overlay is open), producing a
 * visible stripe around "Show results". Match the panel tone with a
 * soft top hairline so the bar still reads as a footer. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-submit {
  background: #2E251E;
  border-top: 1px solid rgba(239, 231, 212, 0.08);
  border-radius: 0;
}

/* ──────────────────────────────────────────────────────────────────────
 * Ideas overlay — visual refinement.
 * Goals: keep the existing layout 1:1, but soften the rough edges:
 *   - search input becomes a rounded pill (echoes the Ideas/Filters
 *     buttons), with a focus glow in the palette amber
 *   - "Show results" submit picks up the same warm-amber palette
 *     instead of the legacy fluoro-orange
 *   - section divider hairlines tone down to a low-contrast cream
 * Nothing structural — just colours, radii and spacing tweaks.
 * ─────────────────────────────────────────────────────────────────── */

/* Pill-shaped search input matching the header buttons. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-input-text {
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(239, 231, 212, 0.18);
  border-radius: 999px;
  transition: border-color 180ms ease, background 180ms ease,
              box-shadow 180ms ease;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-input-text:focus-within,
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-input-text:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(168, 138, 78, 0.55);
  box-shadow: 0 0 0 3px rgba(168, 138, 78, 0.12);
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-search input {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-search input::placeholder {
  color: rgba(239, 231, 212, 0.45);
}

/* Soften the divider lines under category roots / between children
 * (legacy uses a hard #9B9B9B which clashes with the warm panel). */
.search-container.opened .sf-level-0 {
  border-bottom-color: rgba(239, 231, 212, 0.12) !important;
  padding: calc(3px * var(--ig)) 0 calc(4px * var(--ig)) 0 !important;
}
.search-container.opened .sf-field-category li.open > .children {
  border-top-color: rgba(239, 231, 212, 0.12) !important;
  padding-top: calc(10px * var(--ig)) !important;
  margin-top: calc(10px * var(--ig)) !important;
}

/* "Show results" submit — keep the legacy vivid orange (#F34509) so
 * the call-to-action stays loud, but add a Poppins label, a soft drop
 * shadow, and a slightly brighter hover tint so it feels modern. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] input[type=submit] {
  background-color: #F34509;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.6px;
  font-size: 18px;
  padding: 14px 22px;
  box-shadow: 0 2px 10px rgba(243, 69, 9, 0.35);
  transition: background-color 180ms ease, transform 180ms ease,
              box-shadow 180ms ease;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] input[type=submit]:hover {
  background-color: #ff5a22;
  box-shadow: 0 4px 16px rgba(243, 69, 9, 0.45);
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] input[type=submit]:focus-visible {
  outline: 2px solid #c9a35a;
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Sticky section header.
 * Pin the idea-name + Quotes/Examples kicker + FILTERS button just
 * below the fixed top bar (62px tall) so they stay reachable while
 * the user scrolls through the feed. The hero scrolls away normally.
 *
 * Implementation notes:
 *   - Uses native `position: sticky` — no scroll listeners needed.
 *   - Sticks within `.search-results` (its containing block); once
 *     the feed ends, the sticky element scrolls away with its parent.
 *   - The Ideas overlay hides .whole-site-container via JS, so the
 *     sticky header is automatically hidden while the panel is open.
 *   - z-index sits below the top bar (which uses 1000+ in legacy CSS)
 *     so it never overlaps the brand/buttons.
 *   - Soft drop shadow gives a subtle separation from the white feed
 *     below, only really visible once the header parks.
 * ─────────────────────────────────────────────────────────────────── */
.container-box.category-name-box {
  position: sticky;
  top: 62px;
  z-index: 50;
  background: #fff;
  box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.4);
}

/* ──────────────────────────────────────────────────────────────────────
 * Sticky header — three columns on a single visual line:
 *   ┌──────────────┬────────────────────────────┬───────────┐
 *   │ Kicker (left)│   Idea title (centered)    │  FILTERS  │
 *   └──────────────┴────────────────────────────┴───────────┘
 * Markup keeps two stacked rows (kicker row + title/filters row).
 * We pull the kicker row out of flow with `position:absolute` so it
 * sits on the left edge of the same baseline as the title row, and
 * pin the FILTERS pill on the right the same way. The title column
 * flex-grows in the middle and is text-centered between the anchored
 * siblings. Symmetric horizontal padding keeps the title visually
 * centred regardless of kicker length.
 * ─────────────────────────────────────────────────────────────────── */
.container-box.category-name-box { position: relative; position: sticky; }
.container-box.category-name-box > .row:first-child {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
  pointer-events: none; /* decorative; never blocks the title or FILTERS */
  max-width: 38%;
}
.container-box.category-name-box > .row:first-child > [class*="col-"] {
  padding: 0 !important;
}
.container-box.category-name-box .row.category-name {
  position: relative;
  align-items: center;
  min-height: 64px;
  padding: 4px 0 12px;
}
.container-box.category-name-box .row.category-name .col-md-8 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  text-align: center;
  /* Symmetric padding leaves room for kicker (left) + FILTERS (right). */
  padding: 0 160px;
}
.container-box.category-name-box .row.category-name .col-md-4.add-n-filters {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: auto !important;
  padding: 0 !important;
}
.container-box.category-name-box .search-results .info-news,
.container-box.category-name-box .info-news {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #1a1410;
  line-height: 1.15;
}
.container-box.category-name-box .hr-info {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: #8a7a55;
  margin: 0;
  line-height: 1.3;
}
/* Stack on narrow viewports so the three pieces don't collide. */
@media (max-width: 767px) {
  .container-box.category-name-box > .row:first-child {
    position: static;
    transform: none;
    max-width: none;
    padding: 6px 15px 0;
  }
  .container-box.category-name-box .hr-info { text-align: center; }
  .container-box.category-name-box .row.category-name {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .container-box.category-name-box .row.category-name .col-md-8 {
    padding: 0 10px;
  }
  .container-box.category-name-box .row.category-name .col-md-4.add-n-filters {
    position: static;
    transform: none;
    margin: 10px auto 0;
    justify-content: center;
  }
  .container-box.category-name-box .info-news {
    font-size: 26px;
  }
}

/* Breathing room between sticky header and the first tile so the card
 * edge never tucks under the header's drop shadow. */
.posts-box { padding-top: 18px; }

/* ──────────────────────────────────────────────────────────────────────
 * Tile visual polish — layout untouched, just dressing.
 * Each tile becomes a self-contained card on the page background:
 * subtle off-white surface, soft border + shadow, gentle hover lift.
 * The internal 2/10 column split, footer pin and meta blocks all
 * remain exactly as before.
 * ─────────────────────────────────────────────────────────────────── */
/* Outer wrapper only — `.post-tile` is also reused on the inner row, so
 * we target the direct child of `.posts-box` to avoid double-borders. */
.posts-box > .post-tile {
  background: #fffdf8;
  border: 1px solid #ece4cf;
  border-radius: 14px;
  margin: 0 0 14px;
  padding: 6px 14px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow 180ms ease, transform 180ms ease,
              border-color 180ms ease;
}
.posts-box > .post-tile:hover {
  border-color: #d8c89a;
  box-shadow: 0 6px 18px rgba(60, 45, 20, 0.08);
  transform: translateY(-1px);
}
/* The legacy <hr> separator is redundant once tiles have card outlines. */
.posts-box > .post-tile > .hr-blog {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * Tile content collapse / expand.
 * Default state: the tile renders the legacy truncated body (capped at
 * 100 words by trimWordsHtml in JS). Tile height is therefore identical
 * to before. Clicking "Read more" swaps the truncated text for the full
 * text and adds .is-expanded; CSS only steps in to cap the body at
 * ~80vh and add an internal scrollbar so even very long entries can't
 * push the page beyond a viewport. No fade, no mask, no clamp.
 * ─────────────────────────────────────────────────────────────────── */
/* Reserve a stable scrollbar gutter on .text-news in BOTH states so that
 * the content width never changes when toggling expanded — this is what
 * was making text re-wrap on Read more / Read less. Collapsed state has
 * no max-height so the scrollbar never actually appears, but the gutter
 * is reserved identically, keeping line-wrap pixel-stable. */
.posts-box > .post-tile .text-news {
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 45, 20, 0.28) transparent;
}
.posts-box > .post-tile.is-expanded .text-news {
  max-height: 80vh;
}
.posts-box > .post-tile.is-expanded .text-news::-webkit-scrollbar {
  width: 8px;
}
.posts-box > .post-tile.is-expanded .text-news::-webkit-scrollbar-thumb {
  background: rgba(60, 45, 20, 0.28);
  border-radius: 999px;
}

/* Whole tile is clickable to expand when there's more to show. */
.posts-box > .post-tile:has(.tile-expand-toggle) { cursor: pointer; }
.posts-box > .post-tile.is-expanded { cursor: default; }

.tile-expand-toggle {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b5a30;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.tile-expand-toggle:hover { color: #1a1410; }
.tile-expand-toggle:hover .tile-expand-label { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────
 * Full screen pill — mirrors the green-circle palette per content type.
 * Quotes inherit the deep forest tone, examples the burnt copper.
 * ─────────────────────────────────────────────────────────────────── */
.posts-box > .post-tile .btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: #3d5a4a; /* default = quote palette */
  color: #fff !important;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid rgba(244, 239, 230, 0.10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 180ms ease, transform 180ms ease,
              box-shadow 180ms ease;
}
.posts-box > .post-tile .btn-read-more:hover {
  background: #486b58;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.posts-box > .post-tile.post-tile-example .btn-read-more {
  background: #a85a2a;
}
.posts-box > .post-tile.post-tile-example .btn-read-more:hover {
  background: #b9682f;
}
.posts-box > .post-tile .btn-read-more i { font-size: 13px; line-height: 1; }
.posts-box > .post-tile .btn-read-more span { line-height: 1; }

/* Ideas overlay — window-aware layout. A viewport-height flex column whose
 * content scales to fill/fit, driven by two vars set from --is:
 *   --is : content scale (text/buttons), 0.6..1.8, driven by JS
 *   --ig : gap/whitespace scale. Below 1 it shrinks ~2x faster (floor 0.15)
 *          so spacing collapses before text; at/above 1 it tracks --is so
 *          enlarging fills the height without exploding the gaps.
 * The tree scrolls only once a group is expanded and overflows. */
.search-container.opened {
  --is: 1;                     /* fit scale, 0.6..1.8, driven by JS */
  --ig: max(0.15, min(var(--is), var(--is) * 2 - 1));
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  align-items: center;
  z-index: 90;                 /* below the fixed top bar (z-index:100) */
  background: #2E251E;         /* own backdrop (panel no longer relies on body) */
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] > ul {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Search row — top clearance (whitespace) collapses fast but never below the
 * 62px top bar; the gap down to the toggle collapses fast too. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-search {
  flex: 0 0 auto;
  width: 90%;
  max-width: 560px;
  margin: 0 auto;
  padding-top: max(68px, calc(78px * var(--ig)));
  padding-bottom: calc(12px * var(--ig));
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-input-text {
  padding: calc(13px * var(--is)) calc(20px * var(--is));
  margin-bottom: calc(10px * var(--ig));   /* gap search → toggle (was hard 25px) */
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-search input {
  font-size: calc(19px * var(--is));
}

/* Keyword/Idea toggle — its outer margins (whitespace) collapse fast; the
 * pill itself scales gently with the text. */
.search-container.opened .sf-mode-toggle {
  margin: calc(6px * var(--ig)) 0 calc(2px * var(--ig));
  padding: calc(3px * var(--is));
}
.search-container.opened .sf-mode-toggle .sf-mode-toggle-opt {
  min-width: calc(80px * var(--is));
  padding: calc(5px * var(--is)) calc(14px * var(--is));
  font-size: calc(12px * var(--is));
}
/* Selected-idea chip scales with the field text. */
.search-container.opened .sf-search-tag {
  left: calc(12px * var(--is));
  padding: calc(4px * var(--is)) calc(5px * var(--is)) calc(4px * var(--is)) calc(13px * var(--is));
  font-size: calc(15px * var(--is));
}
.search-container.opened .sf-search-tag-x {
  width: calc(22px * var(--is));
  height: calc(22px * var(--is));
  font-size: calc(16px * var(--is));
}

/* Category tree — scales via label font-size; scrolls only past the floor. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category {
  flex: 1 1 auto;
  min-height: 0;
  width: 90%;
  max-width: 560px;
  margin: 0 auto;
  padding-top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
  padding-bottom: calc(16px * var(--ig));
}
/* Kill the browser's default vertical margin on the nested category list. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category > ul {
  margin: 0;
  padding: 0;
}
/* Category tree font hierarchy — all scale with --is, but level 1 > 2 > 3. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category .sf-root-label {
  font-size: calc(26px * var(--is));
  line-height: 1.05;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category .sf-mid-label {
  font-size: calc(20px * var(--is));
  line-height: 1.05;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category .sf-label-radio:not(.sf-mid-label) {
  font-size: calc(16px * var(--is));
  line-height: 1.05;
}
/* Root/mid row vertical padding is the real inter-line gap — scale it hard. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-level-0 > .sf-group-label {
  padding: calc(3px * var(--ig)) 0;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-level-1.sf-mid > .sf-label-radio {
  padding-top: calc(3px * var(--ig));
  padding-bottom: calc(3px * var(--ig));
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category::-webkit-scrollbar {
  width: 8px;
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-category::-webkit-scrollbar-thumb {
  background: rgba(239, 231, 212, 0.20);
  border-radius: 999px;
}

/* "Show results" — always-visible footer bar; its vertical padding collapses
 * fast (whitespace) while the button text scales gently. */
.search-container.opened .searchandfilter[data-sf-form-id="969"] .sf-field-submit {
  position: relative;               /* anchor for the "what to search" bubble */
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  margin: 0;
  padding: max(10px, calc(22px * var(--ig))) 0;
  background: #201811;
  border-top: 1px solid rgba(239, 231, 212, 0.14);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.55);
}
.search-container.opened .searchandfilter[data-sf-form-id="969"] input[type=submit] {
  padding: calc(13px * var(--is)) calc(20px * var(--is));
  font-size: calc(17px * var(--is));
}

/* ──────────────────────────────────────────────────────────────────────
 * Tutorial — "?" help button in the top bar + guided-tour overlay.
 * ─────────────────────────────────────────────────────────────────── */

/* Round "?" button next to ABOUT. */
.tour-help {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: help;
  line-height: 100%;
}
.tour-help-mark {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
/* Hover label — slides in under the button. */
.tour-help-label {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 150px;
  background: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.tour-help:hover .tour-help-label,
.tour-help:focus-visible .tour-help-label {
  opacity: 1;
  transform: translateY(0);
}

/* Overlay layer — covers the page but stays click-through; only the card
 * captures pointer events, so the real UI underneath remains usable. */
.tour-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.tour-layer[hidden] { display: none; }

/* Full dim for steps that have no spotlight target. */
.tour-dim {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 12, 0.72);
  opacity: 0;
  transition: opacity .2s ease;
}
.tour-layer.tour-open .tour-dim { opacity: 1; }

/* Card holding the current step. Positioned in JS (fixed coords). */
.tour-card {
  position: fixed;
  width: min(440px, calc(100vw - 32px));
  padding: 26px 24px 20px;
  border-radius: 14px;
  background: #EFE7D4;
  color: #251E18;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  font-family: 'Poppins', sans-serif;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, top .25s ease, left .25s ease;
}
.tour-layer.tour-open .tour-card { opacity: 1; transform: translateY(0); }
.tour-card-title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
}
.tour-card-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.tour-card-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #251E18;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.tour-card-close:hover { opacity: 1; }

/* Footer: step counter + navigation buttons. */
.tour-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 12px;
}
.tour-step-count {
  font-size: 13px;
  opacity: .6;
}
.tour-actions { display: flex; gap: 8px; }
.tour-btn {
  padding: 8px 18px;
  border: 0;
  border-radius: 150px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}
.tour-btn-secondary {
  background: transparent;
  color: #251E18;
  box-shadow: inset 0 0 0 1px rgba(37, 30, 24, 0.35);
}
.tour-btn-secondary:hover { background: rgba(37, 30, 24, 0.08); }

/* ──────────────────────────────────────────────────────────────────────
 * Accounts & favourites (auth.js): FAB, tile star, account panel.
 * ─────────────────────────────────────────────────────────────────── */

/* Round account button, bottom-right corner. */
.snk-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(239, 231, 212, 0.25);
  background: #251E18;
  color: #EFE7D4;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 900;
}
.snk-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.snk-fab.is-authed {
  border-color: rgba(168, 138, 78, 0.7);
}
.snk-fab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Favourite star, top-right corner of every tile. */
.post-tile { position: relative; }
.tile-fav {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #b9ab86;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.tile-fav:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #E0A82E;
  transform: scale(1.12);
}
.tile-fav.is-fav { color: #E8B84B; }
.tile-fav.is-fav:hover { color: #E0A82E; }

/* ── Account panel (right-side drawer) ─────────────────────────────── */
.snk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: flex-end;
  z-index: 1600;
}
.snk-overlay[hidden] { display: none; }
body.snk-panel-open { overflow: hidden; }

.snk-panel {
  position: relative;
  width: min(440px, 100%);
  height: 100%;
  background: #EFE7D4;
  color: #251E18;
  padding: 26px 22px 40px;
  overflow-y: auto;
  box-shadow: -12px 0 34px rgba(0, 0, 0, 0.45);
  font-family: 'Poppins', sans-serif;
  animation: snkSlideIn 0.22s ease;
}
@keyframes snkSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.snk-panel-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #251E18;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.snk-panel-close:hover { background: rgba(0, 0, 0, 0.08); }

.snk-panel-title {
  font-size: 22px;
  font-weight: 600;
  margin: 6px 0 10px;
  color: #251E18;
}
.snk-panel-sub {
  font-size: 15px;
  line-height: 1.5;
  color: #5a4f3f;
  margin: 0 0 22px;
}

/* Google sign-in button. */
.snk-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid rgba(37, 30, 24, 0.25);
  background: #ffffff;
  color: #251E18;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.snk-google-btn:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.snk-google-btn img { width: 20px; height: 20px; }

/* Signed-in header row. */
.snk-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 22px;
}
.snk-user-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(168, 138, 78, 0.6);
}
.snk-user-meta { flex: 1; min-width: 0; }
.snk-user-name {
  font-size: 15px;
  font-weight: 600;
  color: #251E18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.snk-signout {
  border: 1px solid rgba(37, 30, 24, 0.3);
  background: transparent;
  color: #251E18;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.snk-signout:hover { background: rgba(37, 30, 24, 0.08); }

.snk-fav-empty {
  font-size: 15px;
  color: #5a4f3f;
  line-height: 1.5;
}
.snk-fav-loading { color: #5a4f3f; }

/* Favourites list reuses the theme tile markup. Give each a light card
 * so the tiles read clearly against the cream drawer. */
.snk-fav-list .post-tile {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.snk-fav-list .hr-blog { display: none; }

@media (max-width: 640px) {
  .snk-panel { width: 100%; }
  .snk-fab { right: 16px; bottom: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Account page (account.html) + shared collection (collection.html).
 * ─────────────────────────────────────────────────────────────────── */
.snk-account-body {
  background: #EFE7D4;
  min-height: 100vh;
  margin: 0;
  padding-top: 62px;            /* clear the fixed site top bar */
  font-family: 'Poppins', sans-serif;
  color: #251E18;
}

/* Corner action buttons on tiles (+ add, × remove) share the star's spot. */
.tile-corner {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.tile-remove { background: rgba(0,0,0,0.06); color: #b25b4a; }
.tile-remove:hover { background: rgba(178,91,74,0.15); color: #a33; transform: scale(1.1); }
.tile-add { background: rgba(0,0,0,0.06); color: #4e7a4e; }
.tile-add:hover { background: rgba(78,122,78,0.15); transform: scale(1.1); }

/* User bar (right-aligned inside content; the site top bar handles branding) */
.acc-userbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
  padding: 14px 22px 0;
}
.acc-user-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(168,138,78,0.7); }
.acc-user-name { font-size: 14px; color: #251E18; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-signout, .acc-btn {
  border: 1px solid rgba(37,30,24,0.3);
  background: transparent;
  color: #251E18;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
}
.acc-signout:hover, .acc-btn:hover { background: rgba(37,30,24,0.08); color: #251E18; }
.acc-btn-primary { background: #F34509; border-color: #F34509; color: #fff; }
.acc-btn-primary:hover { background: #d63d08; color: #fff; }
.acc-btn-danger { color: #b25b4a; }

/* Main layout */
.acc-main { max-width: 920px; margin: 0 auto; padding: 16px 22px 80px; }
.acc-h2 { font-size: 20px; font-weight: 600; color: #251E18; margin: 0 0 16px; }
.acc-section { margin-bottom: 8px; }
.acc-divider { border: none; border-top: 1px solid rgba(37,30,24,0.18); margin: 28px 0; }
.acc-empty { color: rgba(37,30,24,0.55); font-size: 15px; }

/* Collections grid */
.acc-col-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.acc-col-card {
  position: relative;
  min-width: 180px;
  min-height: 96px;
  flex: 0 0 auto;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(168,138,78,0.5);
  background: #fffdf8;
  color: #251E18;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  font-family: 'Poppins', sans-serif;
}
.acc-col-card:hover { transform: translateY(-2px); border-color: rgba(168,138,78,0.9); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.acc-col-name { font-size: 16px; font-weight: 600; }
.acc-col-count { font-size: 13px; color: rgba(37,30,24,0.55); }
.acc-col-shared { font-size: 12px; color: #b8860b; margin-top: auto; }
.acc-col-new {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-style: dashed;
  background: transparent;
  color: rgba(37,30,24,0.7);
  gap: 8px;
  font-size: 14px;
}
.acc-col-new i { font-size: 22px; }

/* Collection detail */
.acc-detail-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.acc-back-btn { background: transparent; border: none; color: #251E18; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-family: 'Poppins', sans-serif; }
.acc-back-btn:hover { color: #F34509; }
.acc-detail-title { margin: 0; flex: 1; min-width: 160px; }
.acc-detail-actions { display: flex; gap: 8px; }
.acc-share-row { display: flex; gap: 8px; margin: 0 0 18px; }
.acc-share-input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(37,30,24,0.25); background: #fffdf8; color: #251E18; font-size: 13px; }
.acc-shared-sub { color: rgba(37,30,24,0.55); font-size: 14px; margin: 0 0 18px; }

/* Tile lists reuse the exact feed styling via the `posts-box` class on the
 * container (see `.posts-box > .post-tile` rules above). */
.acc-list { margin-top: 4px; }

/* Login view */
.acc-login { max-width: 460px; margin: 10vh auto 0; text-align: center; padding: 0 22px; display: flex; flex-direction: column; align-items: center; }
.acc-login h1 { font-size: 26px; color: #251E18; margin: 0 0 10px; }
.acc-login p { color: rgba(37,30,24,0.65); font-size: 15px; line-height: 1.5; margin: 0 0 24px; }
.acc-login .snk-google-btn { margin: 0 auto; }
.acc-back { display: inline-block; margin-top: 20px; color: rgba(37,30,24,0.65); text-decoration: none; font-size: 14px; }
.acc-back:hover { color: #251E18; }

/* Modals */
.acc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.acc-modal { width: min(560px, 100%); max-height: 86vh; background: #EFE7D4; color: #251E18; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.acc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(37,30,24,0.12); }
.acc-modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.acc-modal-close { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #251E18; }
.acc-modal-body { padding: 18px 20px; overflow-y: auto; }
.acc-field-label { font-size: 13px; font-weight: 600; color: #5a4f3f; margin: 6px 0 6px; }
.acc-input { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(37,30,24,0.25); background: #fff; color: #251E18; font-size: 15px; font-family: 'Poppins', sans-serif; margin-bottom: 8px; }
.acc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.acc-modal-actions .acc-btn { color: #251E18; border-color: rgba(37,30,24,0.3); }
.acc-modal-actions .acc-btn:hover { background: rgba(37,30,24,0.08); }
.acc-modal-actions .acc-btn-primary { color: #fff; border-color: #F34509; }

/* Picker / selectable rows */
.acc-picker-list { max-height: 46vh; overflow-y: auto; margin-top: 6px; }
.acc-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 8px;
  border: none;
  border-bottom: 1px solid rgba(37,30,24,0.1);
  background: transparent;
  color: #251E18;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.acc-pick-row:hover { background: rgba(37,30,24,0.05); }
.acc-pick-check { color: #A88A4E; font-size: 16px; flex: 0 0 auto; }
.acc-pick-row.is-picked .acc-pick-check { color: #F34509; }
.acc-pick-text { flex: 1; line-height: 1.4; }
.acc-add-row { cursor: default; justify-content: space-between; }
.acc-add-row:hover { background: transparent; }
.acc-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #F34509;
  background: #F34509;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
.acc-add-btn:hover { background: #d63d08; }
.acc-add-btn.is-added { background: transparent; color: #4e7a4e; border-color: #4e7a4e; cursor: default; }

@media (max-width: 640px) {
  .acc-col-card { min-width: 140px; flex: 1 1 140px; }
  .acc-detail-actions { flex-wrap: wrap; }
}
.tour-btn-primary {
  background: #251E18;
  color: #EFE7D4;
}
.tour-btn-primary:hover { background: #3a2f25; }

/* Spotlight ring + hole. Its huge box-shadow dims the rest of the page
 * while leaving the target element bright; pointer-events stay off so the
 * highlighted control remains clickable through the hole. */
.tour-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 3px #EFE7D4, 0 0 0 9999px rgba(20, 15, 12, 0.72);
  opacity: 0;
  transition: opacity .2s ease, top .25s ease, left .25s ease,
              width .25s ease, height .25s ease;
}
.tour-layer.tour-open .tour-spotlight { opacity: 1; }

/* Pointer arrow (SVG) + its floating label. */
.tour-arrow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tour-arrow-label {
  position: fixed;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #EFE7D4;
  color: #251E18;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.tour-arrow[hidden],
.tour-arrow-label[hidden],
.tour-dim[hidden],
.tour-spotlight[hidden] { display: none; }

/* Paste button — sits inside the search field, to the right of the text. */
.tour-callout {
  position: fixed;
  pointer-events: auto;
}
.tour-callout[hidden] { display: none; }
.tour-callout-btn {
  padding: 6px 16px;
  border: 0;
  border-radius: 150px;
  background: #251E18;
  color: #EFE7D4;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.tour-callout-btn:hover { background: #3a2f25; }