/* ==========================================================================
   Styvea theme layer  —  editorial paper/clay design system
   Injected into every page by src/lib/theme.ts (loads last, wins on ties).
   Base markup is a frozen WordPress/Kadence snapshot, so this file works by
   (a) remapping Kadence's own CSS custom properties and (b) overriding the
   handful of component rules Kadence hard-codes.
   Rollback: make injectTheme() an identity function in src/lib/theme.ts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --stv-paper: #efe5d4;
  --stv-paper-2: #e6d6bf;
  --stv-cream: #fbf7f0;
  --stv-surface: #fbf7f0;

  /* Ink */
  --stv-ink: #17110d;
  --stv-ink-2: #221a14;
  --stv-ink-soft: #5b5048;

  /* Accent */
  --stv-clay: #c1431d;
  --stv-clay-deep: #9c3414;
  --stv-blush: #f2c6a9;

  /* Lines */
  --stv-line: #17110d29;
  --stv-line-2: #17110d47;
  --stv-line-paper: #efe5d438;

  /* Type */
  --stv-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --stv-font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Depth + motion */
  --stv-shadow-sm: 0 8px 24px #17110d14;
  --stv-shadow-md: 0 18px 50px #17110d29;
  --stv-shadow-lg: 0 40px 90px #17110d38;
  --stv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stv-dur: 0.4s;

  /* Rhythm */
  --stv-wrap: 1480px;
  --stv-gutter: clamp(20px, 5vw, 80px);
  --stv-section-y: clamp(72px, 11vh, 160px);
}

/* --------------------------------------------------------------------------
   2. Kadence variable remap  —  single biggest lever: every Kadence component
      that reads these follows automatically.
   -------------------------------------------------------------------------- */
:root {
  --global-palette1: var(--stv-clay);
  --global-palette2: var(--stv-clay-deep);
  --global-palette3: var(--stv-ink);
  --global-palette4: var(--stv-ink);
  --global-palette5: var(--stv-ink-soft);
  --global-palette6: var(--stv-ink-soft);
  --global-palette7: var(--stv-paper-2);
  --global-palette8: var(--stv-paper);
  --global-palette9: var(--stv-cream);
  --global-palette9rgb: 251, 247, 240;

  --global-palette-highlight: var(--stv-clay);
  --global-palette-highlight-alt: var(--stv-clay-deep);
  --global-palette-highlight-alt2: var(--stv-cream);

  --global-palette-btn-bg: var(--stv-ink);
  --global-palette-btn-bg-hover: var(--stv-clay);
  --global-palette-btn: var(--stv-cream);
  --global-palette-btn-hover: var(--stv-cream);
  --global-palette-btn-sec-bg: transparent;
  --global-palette-btn-sec-bg-hover: var(--stv-clay);
  --global-palette-btn-sec: var(--stv-ink);
  --global-palette-btn-sec-hover: var(--stv-cream);

  --global-body-font-family: var(--stv-font-body);
  --global-heading-font-family: var(--stv-font-display);
  --global-primary-nav-font-family: var(--stv-font-body);
  --global-fallback-font: system-ui, sans-serif;
  --global-display-fallback-font: Georgia, serif;

  --global-content-width: var(--stv-wrap);
  --global-content-wide-width: calc(var(--stv-wrap) + 160px);
  --global-content-narrow-width: 780px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
body {
  background: var(--stv-paper);
  color: var(--stv-ink);
  font-family: var(--stv-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
input,
select,
optgroup,
textarea {
  font-family: var(--stv-font-body);
  color: var(--stv-ink);
}

/* Kadence paints the content column white on top of the body. Keep the whole
   page on paper so sections read as one sheet, the way the reference does. */
.content-bg,
body.content-style-unboxed .site,
.wp-site-blocks,
.site.wp-site-blocks {
  background: var(--stv-paper);
}

::selection {
  background: var(--stv-clay);
  color: var(--stv-cream);
}

/* --------------------------------------------------------------------------
   4. Headings  —  Fraunces, sentence case, tight and optical-sized.
      Kadence ships uppercase h1/h2 and 700 weights; both are undone here.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--stv-font-display);
  font-optical-sizing: auto;
  color: var(--stv-ink);
  text-transform: none;
  font-style: normal;
}

h1 {
  font-size: clamp(40px, 5vw, 78px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.028em;
}

h2 {
  font-size: clamp(29px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h4 {
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

h5 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--stv-ink);
}

/* h6 doubles as the eyebrow/kicker throughout the snapshot markup. */
h6 {
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stv-clay);
}

h1 em,
h2 em,
h3 em,
h4 em {
  color: var(--stv-clay);
  font-style: italic;
  font-weight: 400;
}

@media all and (max-width: 1024px) {
  h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1; }
  h2 { font-size: clamp(28px, 4.4vw, 38px); }
}

@media all and (max-width: 767px) {
  h1 { font-size: 38px; line-height: 1.04; }
  h2 { font-size: 28px; }
  h3 { font-size: 23px; }
}

/* --------------------------------------------------------------------------
   5. Links
   -------------------------------------------------------------------------- */
a {
  color: var(--stv-clay);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--stv-dur) var(--stv-ease);
}

a:hover,
a:focus {
  color: var(--stv-clay-deep);
}

/* --------------------------------------------------------------------------
   6. Buttons  —  pill, sentence case, ink by default, clay on hover.
      Kadence hard-codes DM Sans / uppercase / 0px radius, so this block has to
      restate every property it sets.
   -------------------------------------------------------------------------- */
button,
.button,
.wp-block-button__link,
input[type="button"],
input[type="reset"],
input[type="submit"],
.fl-button,
.elementor-button-wrapper .elementor-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit {
  font-family: var(--stv-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 100px;
  padding: 17px 30px;
  border: 1px solid transparent;
  box-shadow: none;
  background-color: var(--stv-ink);
  color: var(--stv-cream);
  transition: background-color var(--stv-dur) var(--stv-ease),
    color var(--stv-dur) var(--stv-ease),
    border-color var(--stv-dur) var(--stv-ease),
    transform 0.3s var(--stv-ease);
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.elementor-button-wrapper .elementor-button:hover,
.wc-block-cart__submit:hover {
  background-color: var(--stv-clay);
  color: var(--stv-cream);
  box-shadow: none;
  transform: translateY(-2px);
}

/* Outline / secondary variant reads as a hairline pill. */
.wp-block-button.is-style-outline .wp-block-button__link,
button.button-style-secondary,
.button.button-style-secondary,
.wp-block-button__link.button-style-secondary {
  background-color: transparent;
  color: var(--stv-ink);
  border: 1px solid var(--stv-line-2);
  padding: 17px 30px;
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--stv-font-body);
  font-weight: 500;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
button.button-style-secondary:hover,
.button.button-style-secondary:hover,
.wp-block-button__link.button-style-secondary:hover {
  background-color: var(--stv-clay);
  border-color: var(--stv-clay);
  color: var(--stv-cream);
}

/* --------------------------------------------------------------------------
   7. Content shell  —  drop the boxed card look, widen the reading measure.
   -------------------------------------------------------------------------- */
.entry.single-entry,
.entry.loop-entry {
  box-shadow: none;
  background: transparent;
}

.entry-content-wrap {
  padding: 0;
}

@media all and (max-width: 1024px) {
  .entry-content-wrap { padding: 0; }
}

@media all and (max-width: 767px) {
  .entry-content-wrap { padding: 0; }
}

.site-container,
.site-header-row-layout-contained,
.site-footer-row-layout-contained,
.entry-hero-layout-contained,
.comments-area {
  max-width: var(--stv-wrap);
  padding-inline: var(--stv-gutter);
}

.content-area {
  margin-top: clamp(48px, 7vh, 96px);
  margin-bottom: var(--stv-section-y);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
  background: var(--stv-cream);
  border: 1px solid var(--stv-line);
  border-radius: 100px;
  padding: 14px 22px;
  color: var(--stv-ink);
  font-family: var(--stv-font-body);
}

textarea {
  border-radius: 18px;
}

input:focus,
textarea:focus {
  border-color: var(--stv-clay);
  outline: none;
}

/* --------------------------------------------------------------------------
   9. Header  —  paper bar, wide-tracked nav, pill CTA.
   -------------------------------------------------------------------------- */
#masthead,
.site-header,
.site-header-row-container,
.site-main-header-wrap {
  background: var(--stv-paper);
  border-bottom: 1px solid transparent;
}

.site-main-header-inner-wrap {
  min-height: 84px;
}

.header-navigation .menu > li > a,
#primary-menu > li > a {
  font-family: var(--stv-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stv-ink);
  transition: color var(--stv-dur) var(--stv-ease);
}

.header-navigation .menu > li > a:hover,
.header-navigation .menu > li.current-menu-item > a,
#primary-menu > li > a:hover {
  color: var(--stv-clay);
}

/* Kadence underline/marker effects fight the flat editorial look. */
.header-navigation[class*="header-navigation-style-underline"] .menu > li > a:after {
  background: var(--stv-clay);
}

/* Header CTA hidden until the feature exists (Beck, 2026-07-26).
   Note: the snapshot's button is a leftover Kadence starter-template link to
   startertemplatecloud.com — when this is switched back on, point it at a real
   Styvea URL first. Deleting these two rules restores it. */
.site-header-item[data-section="kadence_customizer_header_button"],
.header-button-wrap {
  display: none;
}

/* Header buttons (Join Now) as clay-outlined pills. */
.site-header-item .kadence-header-html .button,
.header-html .button,
.site-header-item .wp-block-button__link {
  border-radius: 100px;
  border: 1px solid var(--stv-clay);
  background: transparent;
  color: var(--stv-clay);
  padding: 13px 26px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header-item .kadence-header-html .button:hover,
.header-html .button:hover,
.site-header-item .wp-block-button__link:hover {
  background: var(--stv-clay);
  color: var(--stv-cream);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   10. Site footer  —  the reference's dark closing block.
   -------------------------------------------------------------------------- */
#colophon,
#colophon .site-footer-wrap,
#colophon .site-top-footer-wrap,
#colophon .site-bottom-footer-wrap,
#colophon .site-footer-row-container {
  background: var(--stv-ink);
  color: #efe5d4c2;
}

#colophon,
#colophon p,
#colophon li,
#colophon .site-info {
  font-family: var(--stv-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: #efe5d4c2;
}

#colophon h2,
#colophon h3,
#colophon h4,
#colophon h5,
#colophon .widget-title {
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stv-blush);
  margin-bottom: 18px;
}

/* The first footer widget is a brand statement, not a column label. */
#colophon .footer-widget1 h5 {
  font-family: var(--stv-font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--stv-cream);
  margin-bottom: 14px;
}

#colophon a {
  color: #efe5d4c2;
  text-decoration: none;
}

#colophon a:hover {
  color: var(--stv-blush);
}

#colophon .widget_nav_menu ul.menu li {
  margin-bottom: 8px;
  list-style: none;
}

#colophon .site-bottom-footer-wrap {
  border-top: 1px solid var(--stv-line-paper);
  font-size: 13px;
  letter-spacing: 0.02em;
}

#colophon .site-top-footer-inner-wrap {
  padding-block: clamp(56px, 8vh, 104px);
}

/* --------------------------------------------------------------------------
   11. Article hero  —  keep the snapshot's full-bleed image, soften the plate
       under the type so Fraunces stays legible on light photography.
   -------------------------------------------------------------------------- */
.entry-hero .entry-header,
.entry-hero-container-inner {
  position: relative;
}

.entry-hero .entry-title {
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-inline: auto;
}

.entry-hero .entry-taxonomies .category-links a,
.entry-taxonomies .category-links a {
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stv-clay);
  text-decoration: none;
}

/* Photo-backed single-post hero only — archive heroes stay flat paper. */
.entry-hero:not(.page-hero-section) .hero-section-overlay {
  background: linear-gradient(
    180deg,
    #efe5d4a6 0%,
    #efe5d4c4 55%,
    var(--stv-paper) 100%
  );
}

/* --------------------------------------------------------------------------
   12. Article body typography
   -------------------------------------------------------------------------- */
.entry-content h2 {
  margin: 1.7em 0 0.5em;
  line-height: 1.12;
}

.entry-content h3 {
  margin: 1.5em 0 0.45em;
  line-height: 1.2;
}

.entry-content p {
  margin-bottom: 1.35em;
  line-height: 1.72;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote {
  max-width: 68ch;
  margin-inline: auto;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.15em;
  margin-bottom: 1.35em;
}

.entry-content li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.entry-content img,
.entry-content figure img,
.wp-block-image img {
  border-radius: 0;
}

/* Editorial media: figures break out past the reading measure and centre
   themselves, so photography carries the page the way the reference does.
   On narrow screens the clamp collapses to the viewport and margins go to ~0. */
.entry-content > img,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > p > img {
  --stv-media-w: min(calc(100vw - 2 * var(--stv-gutter)), 760px);
  display: block;
  width: var(--stv-media-w);
  height: auto;
  max-width: none;
  margin-block: clamp(32px, 5vh, 64px);
  margin-left: calc(50% - var(--stv-media-w) / 2);
  margin-right: 0;
}

@media all and (max-width: 860px) {
  .entry-content > img,
  .entry-content > figure,
  .entry-content > .wp-block-image,
  .entry-content > p > img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

.entry-content figcaption,
.wp-block-image figcaption {
  font-family: var(--stv-font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--stv-ink-soft);
  text-align: center;
  margin-top: 12px;
}

.entry-content blockquote {
  border-left: 2px solid var(--stv-clay);
  padding-left: clamp(20px, 2.4vw, 34px);
  font-family: var(--stv-font-display);
  font-size: clamp(21px, 2vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--stv-ink);
}

.entry-content a {
  color: var(--stv-clay);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.entry-content a:hover {
  color: var(--stv-clay-deep);
}

.entry-content hr,
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--stv-line);
  margin-block: clamp(40px, 6vh, 72px);
}

/* --------------------------------------------------------------------------
   13. Loop cards  —  taller crop, quiet hover, no chrome.
   -------------------------------------------------------------------------- */
.loop-entry.entry,
article.entry.loop-entry {
  background: var(--stv-cream);
  border: 1px solid var(--stv-line);
  box-shadow: none;
  overflow: hidden;
  transition: border-color var(--stv-dur) var(--stv-ease),
    transform var(--stv-dur) var(--stv-ease);
}

.loop-entry.entry:hover {
  border-color: var(--stv-line-2);
  transform: translateY(-3px);
}

.loop-entry .post-thumbnail,
.loop-entry .post-thumbnail.kadence-thumbnail-ratio-2-3 {
  padding-bottom: 118%;
  overflow: hidden;
}

.loop-entry .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--stv-ease);
}

.loop-entry:hover .post-thumbnail img {
  transform: scale(1.05);
}

.loop-entry .entry-content-wrap {
  padding: clamp(20px, 2vw, 30px);
}

.loop-entry .entry-taxonomies {
  margin-bottom: 10px;
}

.loop-entry.type-post h2.entry-title {
  font-family: var(--stv-font-display);
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--stv-ink);
}

.loop-entry.type-post h2.entry-title a {
  color: var(--stv-ink);
  text-decoration: none;
}

.loop-entry.type-post h2.entry-title a:hover {
  color: var(--stv-clay);
}

.loop-entry .entry-summary p {
  color: var(--stv-ink-soft);
  font-size: 15px;
  line-height: 1.62;
}

/* "Read More" reads as a tracked micro-link, not a button. */
.post-more-link,
.more-link-wrap a {
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stv-clay);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.post-more-link svg,
.more-link-wrap a svg {
  width: 18px;
  height: 18px;
  transition: transform var(--stv-dur) var(--stv-ease);
}

.post-more-link:hover svg,
.more-link-wrap a:hover svg {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   14. Archive headers + pagination
   -------------------------------------------------------------------------- */
.page-hero-section .hero-section-overlay,
.entry-hero.page-hero-section .entry-hero-container-inner,
.entry-hero.page-hero-section {
  background: var(--stv-paper);
}

.entry-hero.page-hero-section .entry-header {
  padding-block: clamp(56px, 9vh, 120px);
}

.archive-title,
.page-title,
.entry-hero.page-hero-section .entry-title {
  font-family: var(--stv-font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.pagination .page-numbers,
.nav-links .page-numbers {
  border-radius: 100px;
  min-width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  border: 1px solid var(--stv-line);
  color: var(--stv-ink);
  font-family: var(--stv-font-body);
  font-size: 14px;
  text-decoration: none;
  transition: background-color var(--stv-dur) var(--stv-ease),
    color var(--stv-dur) var(--stv-ease),
    border-color var(--stv-dur) var(--stv-ease);
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover,
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--stv-clay);
  border-color: var(--stv-clay);
  color: var(--stv-cream);
}

/* --------------------------------------------------------------------------
   15. Related posts, post nav, author box
   -------------------------------------------------------------------------- */
.entry-related,
.entry-related-inner-content {
  background: transparent;
  border-top: 1px solid var(--stv-line);
  padding-top: clamp(48px, 7vh, 88px);
}

.entry-related .entry-related-title,
.related-title {
  font-family: var(--stv-font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
}

.post-navigation .nav-links a,
.post-navigation a {
  font-family: var(--stv-font-display);
  color: var(--stv-ink);
  text-decoration: none;
}

.post-navigation a:hover {
  color: var(--stv-clay);
}

.author-box,
.entry-author-profile {
  background: var(--stv-cream);
  border: 1px solid var(--stv-line);
  border-radius: 0;
  padding: clamp(24px, 3vw, 40px);
}

.author-box img,
.entry-author-profile img {
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   16. In-article modules (.stv-mod)
       Every article inlines its own module stylesheet in <body>, declaring a
       gold accent scoped to `.stv-mod` itself — so it beats both :root and
       source order. Doubling the class raises specificity enough to remap the
       palette to the single site accent. Module layout is left untouched.
   -------------------------------------------------------------------------- */
.stv-mod.stv-mod {
  --stv-bg-a: var(--stv-cream);
  --stv-bg-b: #f4ecdf;
  --stv-border: #17110d24;
  --stv-card-border: #17110d1a;
  --stv-text: var(--stv-ink);
  --stv-text-soft: var(--stv-ink-soft);
  --stv-text-mute: #8a7d70;
  --stv-accent: var(--stv-clay);
  --stv-accent-deep: var(--stv-clay-deep);
}

.stv-mod {
  border-radius: 0;
}

/* Same specificity trap as the palette above: the module declares
   .stv-mod__kicker later in the document, so it needs the descendant form. */
.stv-mod .stv-mod__kicker {
  letter-spacing: 0.22em;
  color: var(--stv-clay);
}

/* ==========================================================================
   18. Home page (src/pages/index.astro)
   Section rhythm, oversized display type, staggered grid and a dark stat band
   — the editorial structure this redesign is modelled on.
   ========================================================================== */
.stv-home {
  margin: 0;
  overflow-x: clip;
}

.stv-wrap {
  width: 100%;
  max-width: var(--stv-wrap);
  margin-inline: auto;
  padding-inline: var(--stv-gutter);
}

.stv-section {
  padding-block: var(--stv-section-y);
  position: relative;
}

.stv-sand {
  background: var(--stv-paper-2);
}

.stv-dark {
  background: var(--stv-ink);
  color: var(--stv-paper);
}

.stv-dark h1,
.stv-dark h2,
.stv-dark h3 {
  color: var(--stv-cream);
}

/* --- shared atoms ------------------------------------------------------- */
.stv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stv-clay);
}

.stv-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--stv-clay);
}

.stv-eyebrow.is-light {
  color: var(--stv-blush);
}

.stv-eyebrow.is-light::before {
  background: var(--stv-blush);
}

.stv-lede {
  font-family: var(--stv-font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.62;
  color: var(--stv-ink-soft);
  max-width: 52ch;
}

.stv-sectionhead {
  margin-bottom: clamp(36px, 5vh, 64px);
}

.stv-sectiontitle {
  font-family: var(--stv-font-display);
  font-size: clamp(32px, 4.2vw, 68px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
}

.stv-sectiontitle em {
  color: var(--stv-clay);
  font-style: italic;
  font-weight: 400;
}

.stv-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vh, 40px);
}

.stv-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 100px;
  padding: 16px 28px;
  font-family: var(--stv-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--stv-dur) var(--stv-ease),
    color var(--stv-dur) var(--stv-ease),
    border-color var(--stv-dur) var(--stv-ease),
    transform 0.3s var(--stv-ease);
}

.stv-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--stv-dur) var(--stv-ease);
}

.stv-btn:hover svg {
  transform: translateX(5px);
}

.stv-btn--solid {
  background: var(--stv-ink);
  color: var(--stv-cream);
}

.stv-btn--solid:hover {
  background: var(--stv-clay);
  color: var(--stv-cream);
  transform: translateY(-2px);
}

.stv-btn--ghost {
  border-color: var(--stv-line-2);
  color: var(--stv-ink);
}

.stv-btn--ghost:hover {
  background: var(--stv-clay);
  border-color: var(--stv-clay);
  color: var(--stv-cream);
  transform: translateY(-2px);
}

.stv-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-family: var(--stv-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stv-clay);
  text-decoration: none;
}

.stv-link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--stv-dur) var(--stv-ease);
}

.stv-link:hover svg {
  transform: translateX(5px);
}

/* --- hero --------------------------------------------------------------- */
.stv-hero {
  padding-top: clamp(48px, 8vh, 104px);
  padding-bottom: clamp(32px, 5vh, 64px);
  overflow: hidden;
}

.stv-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
}

.stv-hero__title {
  font-family: var(--stv-font-display);
  font-size: clamp(54px, 8.4vw, 148px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--stv-ink);
  margin: clamp(20px, 3.4vh, 38px) 0 0;
}

.stv-hero__title em {
  color: var(--stv-clay);
  font-style: italic;
  font-weight: 400;
}

.stv-outline {
  -webkit-text-stroke: 1.5px var(--stv-ink);
  color: transparent;
}

.stv-hero .stv-lede {
  margin-top: clamp(22px, 3.4vh, 38px);
}

.stv-hero__media {
  align-self: stretch;
  display: flex;
  min-height: clamp(360px, 56vh, 640px);
}

.stv-hero__imgwrap {
  position: relative;
  aspect-ratio: 4 / 5;
  height: 100%;
  max-width: 100%;
  margin-left: auto;
  overflow: hidden;
  background: var(--stv-paper-2);
}

.stv-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.stv-hero__tag {
  position: absolute;
  left: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2vw, 26px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 20px;
  border-radius: 100px;
  border: 1px solid #ffffff2e;
  background: #17110dab;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: background-color var(--stv-dur) var(--stv-ease);
}

.stv-hero__tag:hover {
  background: #17110dd6;
}

.stv-hero__tagtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stv-hero__tag .t-meta {
  font-family: var(--stv-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stv-blush);
}

.stv-hero__tag .t-name {
  font-family: var(--stv-font-display);
  font-size: 15px;
  line-height: 1.25;
  color: var(--stv-cream);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stv-hero__tag .t-go {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--stv-clay);
  color: var(--stv-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.stv-hero__tag .t-go svg {
  width: 18px;
  height: 18px;
}

/* --- marquee ------------------------------------------------------------ */
.stv-marquee {
  border-block: 1px solid var(--stv-line);
  padding-block: 20px;
  overflow: hidden;
}

.stv-marquee__track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: stv-marquee 46s linear infinite;
}

.stv-marquee__item {
  font-family: var(--stv-font-display);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--stv-ink);
  white-space: nowrap;
}

.stv-marquee__dot {
  color: var(--stv-clay);
  font-size: 14px;
}

@keyframes stv-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .stv-marquee__track { animation: none; }
}

/* --- 01 manifesto ------------------------------------------------------- */
.stv-manifesto__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.stv-manifesto__media {
  position: relative;
}

.stv-manifesto__img-1 {
  display: block;
  width: 78%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.stv-manifesto__img-2 {
  position: absolute;
  right: 0;
  bottom: -8%;
  width: 46%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid var(--stv-paper);
}

.stv-statement {
  font-family: var(--stv-font-display);
  font-size: clamp(27px, 3.3vw, 54px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--stv-ink);
  margin: 26px 0 30px;
}

.stv-statement em {
  color: var(--stv-clay);
  font-style: italic;
  font-weight: 400;
}

/* --- 02 topics ---------------------------------------------------------- */
.stv-topic {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(24px, 3.4vh, 40px);
  border-top: 1px solid var(--stv-line-2);
  text-decoration: none;
  transition: padding-left 0.5s var(--stv-ease);
}

.stv-topic:last-child {
  border-bottom: 1px solid var(--stv-line-2);
}

.stv-topic:hover {
  padding-left: clamp(8px, 1.4vw, 24px);
}

.stv-topic__num {
  font-family: var(--stv-font-display);
  font-size: clamp(24px, 2.6vw, 40px);
  font-style: italic;
  color: var(--stv-ink);
  opacity: 0.4;
  transition: color var(--stv-dur) var(--stv-ease), opacity var(--stv-dur) var(--stv-ease);
}

.stv-topic:hover .stv-topic__num {
  color: var(--stv-clay);
  opacity: 1;
}

.stv-topic__name {
  display: block;
  font-family: var(--stv-font-display);
  font-size: clamp(26px, 4vw, 62px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--stv-ink);
  transition: color var(--stv-dur) var(--stv-ease);
}

.stv-topic:hover .stv-topic__name {
  color: var(--stv-clay);
}

.stv-topic__desc {
  display: block;
  margin-top: 10px;
  max-width: 46ch;
  font-family: var(--stv-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--stv-ink-soft);
}

.stv-topic__count {
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stv-ink-soft);
  white-space: nowrap;
}

.stv-topic__go {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 100px;
  border: 1px solid var(--stv-line-2);
  color: var(--stv-ink);
  transition: background-color var(--stv-dur) var(--stv-ease),
    color var(--stv-dur) var(--stv-ease),
    border-color var(--stv-dur) var(--stv-ease),
    transform var(--stv-dur) var(--stv-ease);
}

.stv-topic__go svg {
  width: 18px;
  height: 18px;
}

.stv-topic:hover .stv-topic__go {
  background: var(--stv-clay);
  border-color: var(--stv-clay);
  color: var(--stv-cream);
  transform: rotate(-45deg);
}

/* --- 03 latest grid ----------------------------------------------------- */
.stv-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}

.stv-card {
  display: block;
  text-decoration: none;
  position: relative;
}

.stv-card.span-3 { grid-column: span 3; }
.stv-card.span-4 { grid-column: span 4; }
.stv-card.span-5 { grid-column: span 5; }
.stv-card.span-6 { grid-column: span 6; }
.stv-card.span-7 { grid-column: span 7; }

.stv-card.is-offset {
  margin-top: clamp(24px, 5vh, 76px);
}

.stv-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stv-paper-2);
}

.stv-card.span-7 .stv-card__media,
.stv-card.span-6 .stv-card__media {
  aspect-ratio: 16 / 12;
}

.stv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--stv-ease);
}

.stv-card:hover .stv-card__media img {
  transform: scale(1.05);
}

.stv-card__idx {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--stv-font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--stv-cream);
  text-shadow: 0 1px 8px #17110d80;
}

.stv-card__foot {
  display: block;
  margin-top: 16px;
}

.stv-card__cat {
  display: block;
  font-family: var(--stv-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stv-clay);
  margin-bottom: 8px;
}

.stv-card__name {
  display: block;
  font-family: var(--stv-font-display);
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--stv-ink);
  transition: color var(--stv-dur) var(--stv-ease);
}

.stv-card:hover .stv-card__name {
  color: var(--stv-clay);
}

.stv-latest__more {
  margin-top: clamp(40px, 6vh, 76px);
  display: flex;
  justify-content: center;
}

/* --- 04 stats ----------------------------------------------------------- */
.stv-statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(36px, 5vh, 64px);
}

.stv-stat__n {
  display: block;
  font-family: var(--stv-font-display);
  font-size: clamp(40px, 5vw, 84px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--stv-cream);
}

.stv-stat__l {
  display: block;
  margin-top: 12px;
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #efe5d4a3;
}

/* --- 05 editor ---------------------------------------------------------- */
.stv-editor__grid {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}

.stv-editor__media img {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100%;
  border: 1px solid var(--stv-line);
}

.stv-editor__meta {
  margin-top: 14px;
  font-family: var(--stv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stv-ink-soft);
}

/* --- 06 faq ------------------------------------------------------------- */
.stv-faq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

.stv-faq__item {
  padding-block: clamp(20px, 2.6vh, 30px);
  border-top: 1px solid var(--stv-line);
}

.stv-faq__item:last-child {
  border-bottom: 1px solid var(--stv-line);
}

.stv-faq__q {
  font-family: var(--stv-font-display);
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.stv-faq__a {
  font-family: var(--stv-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--stv-ink-soft);
  margin: 0;
  max-width: 62ch;
}

/* --- 07 cta ------------------------------------------------------------- */
.stv-cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stv-cta__title {
  font-family: var(--stv-font-display);
  font-size: clamp(38px, 6vw, 104px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 20px 0 0;
}

.stv-cta__title em {
  color: var(--stv-clay);
  font-style: italic;
  font-weight: 400;
}

.stv-cta .stv-btns {
  justify-content: center;
}

/* --- home responsive ---------------------------------------------------- */
@media all and (max-width: 991px) {
  .stv-hero__grid,
  .stv-manifesto__grid,
  .stv-editor__grid,
  .stv-faq__grid {
    grid-template-columns: 1fr;
  }

  .stv-hero__media {
    min-height: 0;
    display: block;
  }

  .stv-hero__imgwrap {
    width: 100%;
    height: auto;
    margin-inline: 0;
  }

  .stv-manifesto__media {
    order: 2;
  }

  .stv-editor__media img {
    max-width: 200px;
  }

  .stv-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .stv-card.span-3,
  .stv-card.span-4,
  .stv-card.span-5,
  .stv-card.span-6,
  .stv-card.span-7 {
    grid-column: span 3;
  }

  .stv-card.span-7 .stv-card__media,
  .stv-card.span-6 .stv-card__media {
    aspect-ratio: 4 / 5;
  }

  .stv-card.is-offset {
    margin-top: 0;
  }

  .stv-topic {
    grid-template-columns: 48px 1fr auto;
    gap: 16px;
  }

  .stv-topic__count {
    display: none;
  }

  .stv-statgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 600px) {
  .stv-grid {
    grid-template-columns: 1fr;
  }

  .stv-card.span-3,
  .stv-card.span-4,
  .stv-card.span-5,
  .stv-card.span-6,
  .stv-card.span-7 {
    grid-column: span 1;
  }

  .stv-topic__go {
    display: none;
  }

  .stv-hero__tag {
    padding: 10px 10px 10px 16px;
  }
}

/* --------------------------------------------------------------------------
   17. Breadcrumbs
   -------------------------------------------------------------------------- */
.kadence-breadcrumbs {
  font-family: var(--stv-font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stv-ink-soft);
}

.kadence-breadcrumbs a {
  color: var(--stv-ink-soft);
  text-decoration: none;
}

.kadence-breadcrumbs a:hover {
  color: var(--stv-clay);
}