/* ============================================================
   grapevine — page stylesheet (v2, framework-free)

   Deliberately does NOT load: Webflow, Bootstrap, normalize.css,
   the WP theme style.css, jQuery, moment.js or Google Fonts.

   The only shared stylesheet is site-nav.css, which is already
   framework-free and cached site-wide.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Cera Pro / Recoleta are already deployed with the theme — reused, not re-shipped. */
@font-face {
  font-family: 'Cera Pro';
  src: url('/wp-content/themes/individualogistAchild/assets/font/CeraPro-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('/wp-content/themes/individualogistAchild/assets/font/CeraPro-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('/wp-content/themes/individualogistAchild/assets/font/CeraPro-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Recoleta';
  src: url('/wp-content/themes/individualogistAchild/assets/font/Recoleta-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Anton drives the CTA plate on every v2 page. Self-hosted latin subset
   (11.7 KB) rather than a Google Fonts request, so the page keeps zero
   third-party font origins. */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Chocolates';
  src: url('../fonts/ttchocolates-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Chocolates';
  src: url('../fonts/ttchocolates-bolditalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand — lifted verbatim from the WP theme so the page matches the site */
  --ink: #20174D;
  --body: #51596B;
  --navy: #081A44;
  --brand: #5C31F6;
  --brand-grad: linear-gradient(63.09deg, #5c31f6 -8.38%, #6169f6 39.09%, #bf8cfe 90.68%);
  --line: #E6E7EE;
  --surface: #fff;
  --surface-alt: #FAFAFE;

  /* page theme — sampled from the supplied artwork */
  --art-w: 540px;
  --art-w-mobile: 220px;
  --hero-bg: #F8AE1F;
  --hero-fg: #17120A;
  --hero-scrim: linear-gradient(100deg, rgba(250,178,32,.92) 0%, rgba(250,178,32,.58) 44%, rgba(250,178,32,.10) 74%, rgba(250,178,32,0) 100%);
  --hero-scrim-mobile: linear-gradient(180deg, rgba(250,178,32,.93) 0%, rgba(250,178,32,.58) 55%, rgba(250,178,32,.88) 100%);
  --title-color: #000000;
  --title-accent: #E32621;
  --title-font: 'TT Chocolates', 'Cera Pro', sans-serif;
  --title-weight: 700;
  --title-style: normal;
  --title-tracking: -.02em;
  --alert-color: #A81C18;
  --accent: #D6332F;
  --plate-w: 700px;
  --picker-w: 1360px;
  --plate-text: #ffffff;
  --plate-size: clamp(.81rem, 3.79vw, 1.89rem);
  --hero-cols: 1.42fr .58fr;
  --hero-cols-mid: 1.5fr .5fr;
  --plate-shadow: 0 2px 4px rgba(90,10,8,.5);

  --shadow-sm: 0 6px 18px rgba(8, 26, 68, .06);
  --shadow-md: 0 14px 30px rgba(8, 26, 68, .12);
  --shadow-lg: 0 20px 50px rgba(8, 26, 68, .22);

  --radius: 14px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(2.75rem, 7vw, 4.5rem);
}

/* ---------- Reset (minimal — replaces 7.6 KB of normalize.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: 'Cera Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: 'Recoleta', 'Cera Pro', Georgia, serif;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
}
p { margin: 0 0 1.15em; }
ul { margin: 0; padding: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid rgba(92, 49, 246, .45);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--brand); color: #fff; padding: .65rem 1.1rem;
  border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------- Layout ---------- */
/* Fluid containers. Replaces the legacy `width: 1100px`, which overflowed
   every viewport between 992px and 1099px. */
.wrap { width: min(1140px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - (var(--gutter) * 2)); }
.container { width: min(1300px, 100% - 1.5rem); margin-inline: auto; } /* consumed by site-nav.css */

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-alt); }
.section__head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.section__title { font-size: clamp(1.6rem, 3.4vw, 2.35rem); margin-bottom: .35em; }
.section__sub { max-width: 62ch; margin-inline: auto; font-size: 1rem; color: var(--body); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- site-nav.css shims ----------
   site-nav.css is framework-free but still assumes two things Bootstrap used
   to provide: a flex `.row` inside mega-menus, and a FontAwesome glyph on the
   Soul Flame button. Supply both here instead of loading either library. */
.dropdown-menu .row { display: flex; }
.dropdown-menu .row > .col-sm-12 { flex: 0 0 100%; }
.dropdown-menu .row > .col-sm-4 { flex: 0 0 33.3333%; }
.btn-soul-flame::before { content: none; }
.btn-soul-flame svg { width: 13px; height: 13px; flex-shrink: 0; }

/* site-nav.css flips to the desktop nav row at exactly 992px, but logo +
   7 menu items + the Soul Flame CTA need ~1030px — so 992-1060 overflows the
   viewport by ~26px. Tighten the horizontal rhythm across that band here
   rather than editing the shared stylesheet every page loads. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .navbar .nav-link { padding-left: .5rem; padding-right: .5rem; }
  .navbar .nav-link::before { width: 0; }
  .navbar .nav-link:hover::before,
  .navbar .nav-item:hover > .nav-link::before { width: calc(100% - 1rem); }
  .btn-soul-flame { padding: .4rem .7rem; font-size: 11.5px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--hero-bg) url('../images/hero-bg.jpg') center / cover no-repeat;
  color: var(--hero-fg);
  isolation: isolate;
}
/* Serve the WebP where supported, keep the JPEG as the floor. */
@supports (background-image: image-set(url('../images/hero-bg.webp') type('image/webp'))) {
  .hero {
    background-image: image-set(
      url('../images/hero-bg.webp') type('image/webp'),
      url('../images/hero-bg.jpg') type('image/jpeg')
    );
  }
}
.hero::after {
  /* scrim: guarantees headline contrast regardless of how the art crops */
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--hero-scrim);
}
@media (max-width: 767px) {
  .hero::after { background: var(--hero-scrim-mobile); }
}
/* The hero gets a wider container than the rest of the page so the headline
   reaches 3 lines at full size — widening the column, not shrinking the type. */
.hero .wrap { width: min(1420px, 100% - (var(--gutter) * 2)); }
.hero__inner {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  /* Symmetric by default so the reading hero reads as vertically centred.
     Only the index hero zeroes the bottom, because its artwork has to sit
     flush on the edge the CTA plate straddles. */
  padding-block: clamp(2.25rem, 6vw, 4rem);
}
/* The artwork is a paint layer now, so nothing needs to sit flush on the
   bottom edge — symmetric padding lets the headline centre properly. */
.hero--cta .hero__inner { padding-block: clamp(2.25rem, 6vw, 4rem); }
@media (min-width: 860px) {
  .hero__inner { grid-template-columns: var(--hero-cols); }
}
/* Between 860 and ~1180 the container is too narrow for the headline to reach
   3 lines at full size, so give the text column more of the split rather than
   stepping the font down. */
@media (min-width: 860px) and (max-width: 1180px) {
  .hero__inner { grid-template-columns: var(--hero-cols-mid); }
}
.hero__title {
  color: var(--title-color);
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-style: var(--title-style);
  font-size: var(--title-size, clamp(2.05rem, 4.5vw, 4.05rem));
  text-transform: var(--title-transform, none);
  line-height: 1.1;
  letter-spacing: var(--title-tracking);
  margin: 0;
  max-width: 15.5em;
  -webkit-text-stroke: 0.055em #fff;
  paint-order: stroke fill;
}
/* Colour runs inside the headline, e.g. Grapevine's red opening clause. */
.hero__title .t-accent { color: var(--title-accent, inherit); }
.hero__title em { font-style: italic; }
/* Reading pages: the alert sits under the title as a sub-line, matching the
   source document's hierarchy (title is the H1, alert is a bold sub-line). */
.hero__alert {
  margin: .9rem 0 0;
  max-width: 44ch;
  color: var(--alert-color);
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  font-weight: 700;
  line-height: 1.45;
}
.hero__art { margin: 0; align-self: center; justify-self: center; }
/* Index only: art flush to the hero's bottom edge, under the CTA plate. */
/* Index hero: artwork bleeds to the right edge of the viewport, as in the comp.
   The wrap caps at 1420px and centres, which left a growing gap on wide screens
   (88px at 1440, 311px at 1920). Pull the figure past the wrap by exactly that
   inset. Index only — reading heroes stay inside the container. */
/* 100vw counts the scrollbar, so the pull overshot by ~7px on wide screens and
   pushed the page into horizontal overflow. Container units measure the hero's
   real inline size, which is exactly the reference we want. */
.hero__art img { width: 100%; max-width: var(--art-w); }
@media (max-width: 859px) {
  .hero__art img { max-width: var(--art-w-mobile); }
}

/* Ornate CTA plate straddling the hero's bottom edge, as in the supplied comp.
   The label is real text over the artwork — never baked into the image — so it
   stays selectable, translatable and readable by screen readers. */
.plate {
  position: relative;
  display: grid;
  place-items: center;
  width: min(var(--plate-w, 560px), 100%);
  margin: clamp(1.5rem, 4vw, 2rem) auto 0;
  aspect-ratio: 1106 / 172;
  color: var(--plate-text);
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.plate::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/cta-plate.png') center / 100% 100% no-repeat;
}
.plate > span {
  position: relative;
  /* Padding only clears the ornate end-caps; the label fills the plate face. */
  padding: 0 clamp(1.2rem, 4.8%, 2.5rem);
  font-family: 'Anton', 'Cera Pro', sans-serif;
  font-weight: 400;
  font-size: var(--plate-size);
  letter-spacing: .035em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: var(--plate-shadow);
}
.plate:hover, .plate:focus-visible { filter: brightness(1.06); text-decoration: none; }

.hero--cta { padding-bottom: 0; }
.hero--cta .plate {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  margin: 0;
  z-index: 2;
}
.hero--cta .plate:hover,
.hero--cta .plate:focus-visible { transform: translate(-50%, calc(50% - 2px)); }
.hero--cta .plate:active { transform: translate(-50%, 50%); }
/* Clear the half of the plate that hangs into the section below. */
.section--after-cta { padding-top: calc(var(--section-y) + clamp(2rem, 5vw, 3.25rem)); }
/* The plate is centred over BOTH hero columns, so on narrower desktops the
   headline's last line ran straight into it. Lift the text column clear;
   the artwork (2nd child) still sits flush to the bottom. */

/* Index hero artwork: the untouched source canvas, painted as a layer over the
   banner instead of sitting in the grid. The canvas is mostly transparent
   margin; in flow that margin inflated the hero's height and pushed the page
   into horizontal overflow. `contain` keeps every pixel of the source visible,
   anchored bottom-right exactly as the comp composes it. */
.hero--cta {
  min-height: min(46vw, 620px);
  background-image:
    url('../images/hero-art.png'),
    url('../images/hero-bg.jpg');
  background-position: right bottom, center bottom;
  background-size: var(--art-bg-size, contain), cover;
  background-repeat: no-repeat, no-repeat;
}
@supports (background-image: image-set(url('../images/hero-art.webp') type('image/webp'))) {
  .hero--cta {
    background-image:
      image-set(url('../images/hero-art.webp') type('image/webp'),
                url('../images/hero-art.png') type('image/png')),
      image-set(url('../images/hero-bg.webp') type('image/webp'),
                url('../images/hero-bg.jpg') type('image/jpeg'));
  }
}

/* min-height adds its slack after the wrap, so the headline sat high in the
   band. Centring the hero's own rows distributes it above and below instead. */
.hero--cta {
  display: grid;
  align-content: center;
}
/* Clause-per-line on desktop; on mobile they stay inline and wrap naturally. */
@media (min-width: 860px) {
  .hero__title > span { display: block; }
}

/* ---------- Picker ---------- */
/* The picker row may run wider than the body container so the artwork
   reads larger; defaults to the normal 1140px measure. */
.section--after-cta .wrap { width: min(var(--picker-w, 1140px), 100% - (var(--gutter) * 2)); }
.picker__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.5rem, 1.6vw, 1.35rem);
  align-items: end;
}
@media (max-width: 820px) { .picker__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .picker__grid { grid-template-columns: repeat(2, 1fr); } }

.parcel {
  display: block;
  padding: .5rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease;
}
.parcel img {
  width: 100%;
  filter: drop-shadow(0 12px 16px rgba(8, 26, 68, .18));
  transition: transform .25s ease;
}
.parcel:hover, .parcel:focus-visible { text-decoration: none; }
.parcel:hover img, .parcel:focus-visible img { transform: translateY(-8px) scale(1.03); }

/* ---------- Ads ---------- */
/* Height is reserved up front so a slow-filling slot cannot shove the page
   around after paint, and the slot is responsive rather than a hard-coded
   728x90 that overflowed mobile. */
.ad { margin-block: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.ad__label {
  margin: 0 0 .35rem;
  color: #b9bcc6;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ad ins { display: block; min-height: 250px; }
@media (min-width: 768px) { .ad ins { min-height: 280px; } }

/* ---------- Article ---------- */
.article { padding-block: clamp(2rem, 5vw, 3.25rem); }
.article__quote {
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.25rem, 4vw, 2rem);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.55;
}
.article__quote p { font-size: inherit; margin-bottom: 0; }
.article h2 {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  font-size: clamp(1.35rem, 2.9vw, 1.8rem);
}
.article h2:first-child { margin-top: 0; }
/* Body copy only. Without :not([class]) this also captured component
   paragraphs nested in the article — the ad label rendered at 18px on
   reading pages instead of the 10px it uses on the index, and the closing
   line's own size was overridden too. */
.article p:not([class]) { max-width: 68ch; font-size: 1.125rem; line-height: 1.72; }
.article__close {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-style: italic;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: .85rem 1.85rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: #4a26d4; color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn--grad { background: var(--brand-grad); box-shadow: 0 8px 20px rgba(92, 49, 246, .25); }
.btn--grad:hover { background: var(--brand-grad); filter: brightness(1.06); }
.btn--block { display: block; width: 100%; }
.center { text-align: center; }
.mt-lg { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.explore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 2vw, 1rem);
  margin-top: clamp(1.5rem, 4vw, 2rem);
}
@media (max-width: 620px) { .explore { grid-template-columns: 1fr; } }

/* ---------- Horoscope ---------- */
.signs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.55rem, 1.4vw, .9rem);
  max-width: 980px;
  margin-inline: auto;
}
@media (max-width: 900px) { .signs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .signs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .signs { grid-template-columns: repeat(2, 1fr); } }
.sign {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.05rem .6rem .85rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sign:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.sign img { width: 48px; height: 48px; object-fit: contain; margin-bottom: .5rem; }
.sign b { font-family: 'Recoleta', serif; font-size: .9rem; color: var(--ink); }
.sign small { display: block; margin-top: .15rem; font-size: .68rem; color: #6b748a; }

/* ---------- Tarot ---------- */
.tarot {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 4vw, 2.25rem);
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 620px) { .tarot { grid-template-columns: 1fr; text-align: center; } }
.tarot__card {
  display: block; position: relative;
  width: 220px; max-width: 100%;
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #FAF6EC;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tarot__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tarot__card img { width: 100%; height: 100%; object-fit: cover; }
.tarot__card span {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 0 1rem;
  background: linear-gradient(180deg, rgba(32, 23, 77, 0), rgba(32, 23, 77, .85));
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-align: center; text-transform: uppercase;
}
.eyebrow {
  margin-bottom: .5rem;
  color: #8b5cf6;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.tarot h3 { font-size: 1.3rem; margin-bottom: .45em; }
.tarot p { font-size: .96rem; }

.actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .85rem;
  max-width: 760px; margin: clamp(1.5rem, 4vw, 2rem) auto 0;
}
@media (max-width: 620px) { .actions { grid-template-columns: 1fr; } }
.action {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid rgba(92, 49, 246, .1);
  border-radius: 12px;
  color: var(--ink); text-decoration: none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.action:hover { background: var(--surface-alt); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }
.action span[aria-hidden] { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.action b { display: block; font-family: 'Recoleta', serif; font-size: .95rem; color: var(--ink); }
.action small { display: block; margin-top: .1rem; font-size: .78rem; color: #6b748a; }

/* ---------- Compatibility ---------- */
.compat {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 2vw, 1.15rem);
  max-width: 980px; margin-inline: auto;
}
@media (max-width: 780px) { .compat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .compat { grid-template-columns: 1fr; } }
.compat a {
  display: block; overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.compat a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.compat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.compat div { padding: .85rem 1rem 1.1rem; text-align: center; }
.compat b { display: block; font-family: 'Recoleta', serif; font-size: .95rem; color: var(--ink); }
.compat small { font-size: .76rem; color: #6b748a; }

/* ---------- Newsletter ---------- */
.newsletter { padding-block: clamp(1.5rem, 4vw, 2rem) 0; position: relative; z-index: 5; }
.newsletter__pill {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.15rem;
  padding: 1rem 1.5rem;
  background: var(--brand-grad);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(8, 26, 68, .2);
  text-align: center;
}
.newsletter__pill h2 { margin: 0; color: #fff; font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
.newsletter__pill p { margin: 0; color: rgba(255, 255, 255, .92); font-size: .92rem; }
.newsletter__pill button {
  padding: .6rem 1.2rem;
  border: 0; border-radius: 6px;
  background: var(--navy); color: #fff;
  font-family: inherit; font-size: .92rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.newsletter__pill button:hover { background: #fff; color: var(--navy); }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 50, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal__dialog {
  position: relative;
  width: 100%; max-width: 380px;
  padding: 1.75rem 1.75rem 1.5rem;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.modal__dialog h2 { font-size: 1.25rem; margin-bottom: .3em; }
.modal__dialog p { font-size: .85rem; color: #6b748a; }
.modal__close {
  position: absolute; top: .45rem; right: .6rem;
  padding: .25rem .5rem;
  border: 0; background: transparent;
  color: #6b748a; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.modal__close:hover { color: var(--ink); }
.modal form { display: flex; gap: .5rem; margin-bottom: .5rem; }
@media (max-width: 480px) { .modal form { flex-direction: column; } }
.modal input {
  flex: 1; min-width: 0;
  padding: .7rem .9rem;
  border: 1px solid rgba(8, 26, 68, .15); border-radius: 999px;
  background: var(--surface-alt);
  font-family: inherit; font-size: .9rem; color: var(--ink);
}
.modal input:focus { outline: 0; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(92, 49, 246, .12); }
.modal form button {
  padding: .7rem 1.4rem;
  border: 0; border-radius: 999px;
  background: var(--brand-grad); color: #fff;
  font-family: inherit; font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.modal form button:disabled { opacity: .6; cursor: progress; }
.modal__result { min-height: 1.1rem; margin: 0; font-size: .82rem; }
.modal__result.is-ok { color: #185E2A; font-weight: 600; }
.modal__result.is-err { color: #8C1D1D; font-weight: 600; }

/* ---------- Footer ---------- */
/* Rebuilt on CSS grid. Replaces the theme's Bootstrap .row/.col-lg-2 markup,
   which needed 35 KB of theme CSS plus the Bootstrap grid to lay out. */
.footer { margin-top: -60px; padding: 118px 0 1.25rem; background: #fff; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.25rem, 3vw, 1.75rem);
}
@media (max-width: 900px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
.footer__title {
  margin: 0 0 .6rem;
  font-family: 'Recoleta', 'Cera Pro', serif; font-weight: 700;
  font-size: 1.05rem; line-height: 1.3; color: var(--navy);
}
.footer ul { list-style: none; }
/* Tight line-height + explicit item spacing: at 1.9 a wrapped label like
   "Explore The 12 Archetypes" split into two lines that read as two links. */
.footer__cols li + li { margin-top: .45rem; }
.footer__cols a { display: block; color: var(--body); font-size: .875rem; line-height: 1.4; }
.footer a:hover { color: var(--brand); text-decoration: none; }

.footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
}
.footer__links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; list-style: none; }
.footer__links a { color: var(--navy); font-size: .875rem; }
.footer__social { display: flex; gap: .65rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #edebeb; color: #1f2430;
  transition: background .15s ease, color .15s ease;
}
.footer__social a:hover { background: #000; color: #fff; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.footer__legal a { color: var(--body); font-size: .78rem; }
@media (max-width: 767px) {
  .footer__bar { justify-content: center; text-align: center; }
  .footer__links, .footer__legal, .footer__social { justify-content: center; width: 100%; }
}