/*
Theme Name: Kayla Scott
Theme URI: https://www.kaylascott.co.za
Author: Kayla Scott
Description: Quiet editorial theme for kaylascott.co.za — a psychology-based self-awareness course platform. Warm ivory paper, espresso ink, restrained gold. Fraunces for display, Karla for body.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaylascott
*/

/* ------------------------------------------------------------------
   1. Design tokens
------------------------------------------------------------------ */
:root {
  --ks-ivory:       #f6f1e7;
  --ks-ivory-deep:  #efe7d7;
  --ks-paper-edge:  #e7dcc8;
  --ks-ink:         #2b241c;
  --ks-ink-soft:    #564b3e;
  --ks-taupe:       #8a7c69;
  --ks-gold:        #96763a;
  --ks-gold-soft:   #b89968;
  --ks-burgundy:    #6e3b34;
  --ks-line:        rgba(43, 36, 28, 0.16);
  --ks-line-soft:   rgba(43, 36, 28, 0.09);

  --ks-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ks-sans:  "Karla", "Gill Sans", "Segoe UI", sans-serif;

  --ks-measure: 66ch;
  --ks-wide: 1160px;
  --ks-pad: clamp(1.25rem, 4vw, 2.5rem);

  --ks-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --ks-step-0:  clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --ks-step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --ks-step-2:  clamp(1.56rem, 1.4rem + 0.8vw, 2rem);
  --ks-step-3:  clamp(1.95rem, 1.66rem + 1.45vw, 2.75rem);
  --ks-step-4:  clamp(2.44rem, 1.93rem + 2.55vw, 3.85rem);
  --ks-step-5:  clamp(3.05rem, 2.2rem + 4.25vw, 5.4rem);
}

/* ------------------------------------------------------------------
   2. Base
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ks-ivory);
  color: var(--ks-ink);
  font-family: var(--ks-sans);
  font-size: var(--ks-step-0);
  line-height: 1.72;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ks-serif);
  font-weight: 480;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ks-ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--ks-step-5); }
h2 { font-size: var(--ks-step-3); }
h3 { font-size: var(--ks-step-2); }
h4 { font-size: var(--ks-step-1); font-weight: 540; }

p { margin: 0 0 1.4em; }

em { font-family: var(--ks-serif); font-style: italic; font-size: 1.04em; letter-spacing: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ks-gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
a:hover { color: var(--ks-gold); text-decoration-color: var(--ks-gold); }

img { max-width: 100%; height: auto; display: block; }

hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--ks-line);
  margin: clamp(2.5rem, 6vw, 4rem) auto;
  max-width: 120px;
}

::selection { background: var(--ks-gold-soft); color: var(--ks-ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ks-ink);
  color: var(--ks-ivory);
  padding: 0.6rem 1.2rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------
   3. Layout primitives
------------------------------------------------------------------ */
.ks-wrap {
  width: min(var(--ks-wide), 100% - 2 * var(--ks-pad));
  margin-inline: auto;
}

.ks-section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.ks-section--alt { background: var(--ks-ivory-deep); box-shadow: inset 0 1px 0 var(--ks-line-soft), inset 0 -1px 0 var(--ks-line-soft); }
.ks-section--ink { background: var(--ks-ink); color: var(--ks-ivory); }
.ks-section--ink h2, .ks-section--ink h3 { color: var(--ks-ivory); }
.ks-section--ink a { text-decoration-color: var(--ks-gold-soft); }

/* chapter kicker: small caps numeral + rule */
.ks-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--ks-sans);
  font-size: var(--ks-step--1);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ks-gold);
  margin: 0 0 2.2rem;
}
.ks-kicker::after {
  content: "";
  flex: 0 0 72px;
  height: 1px;
  background: var(--ks-gold-soft);
}
.ks-section--ink .ks-kicker { color: var(--ks-gold-soft); }

.ks-lede {
  font-family: var(--ks-serif);
  font-size: var(--ks-step-1);
  line-height: 1.5;
  color: var(--ks-ink-soft);
  max-width: 38ch;
}
.ks-section--ink .ks-lede { color: rgba(246, 241, 231, 0.82); }

/* constrain prose inside sections */
.ks-prose > p,
.ks-prose > ul,
.ks-prose > ol { max-width: var(--ks-measure); }
.ks-prose > p { color: var(--ks-ink-soft); }
.ks-prose > p strong { color: var(--ks-ink); }

/* ------------------------------------------------------------------
   4. Header
------------------------------------------------------------------ */
.ks-header {
  position: relative;
  z-index: 10;
  background: var(--ks-ivory);
  border-bottom: 1px solid var(--ks-line-soft);
}
.ks-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.ks-brand {
  font-family: var(--ks-serif);
  font-size: 1.45rem;
  font-weight: 520;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ks-ink);
}
.ks-brand:hover { color: var(--ks-ink); }
.ks-brand .amp { color: var(--ks-gold); }

.ks-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.ks-nav ul { display: flex; gap: clamp(1.2rem, 2.5vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.ks-nav a {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ks-ink-soft);
  padding-block: 0.4rem;
  background-image: linear-gradient(var(--ks-gold), var(--ks-gold));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.3s ease;
}
.ks-nav a:hover,
.ks-nav .current-menu-item a,
.ks-nav .current_page_item a { color: var(--ks-ink); background-size: 100% 1px; }

.ks-nav-toggle { display: none; }
.ks-nav-burger { display: none; }

@media (max-width: 880px) {
  .ks-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ks-ivory);
    border-bottom: 1px solid var(--ks-line);
    padding: 1.5rem var(--ks-pad) 2rem;
  }
  .ks-nav ul { flex-direction: column; gap: 1.1rem; }
  .ks-nav-toggle:checked ~ .ks-nav { display: block; }
  .ks-nav-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem 0;
  }
  .ks-nav-burger span {
    width: 26px;
    height: 1.5px;
    background: var(--ks-ink);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .ks-nav-toggle:checked ~ .ks-nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .ks-nav-toggle:checked ~ .ks-nav-burger span:nth-child(2) { opacity: 0; }
  .ks-nav-toggle:checked ~ .ks-nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ------------------------------------------------------------------
   5. Buttons (theme + core button block)
------------------------------------------------------------------ */
.ks-btn,
.wp-block-button__link {
  display: inline-block;
  font-family: var(--ks-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--ks-ink);
  border-radius: 0;
  background: var(--ks-ink);
  color: var(--ks-ivory);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ks-btn:hover,
.wp-block-button__link:hover {
  background: var(--ks-gold);
  border-color: var(--ks-gold);
  color: var(--ks-ivory);
}
.ks-btn--ghost,
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ks-ink);
}
.ks-btn--ghost:hover,
.is-style-outline .wp-block-button__link:hover {
  background: var(--ks-ink);
  border-color: var(--ks-ink);
  color: var(--ks-ivory);
}
.ks-section--ink .ks-btn,
.ks-section--ink .wp-block-button__link {
  background: var(--ks-ivory);
  border-color: var(--ks-ivory);
  color: var(--ks-ink);
}
.ks-section--ink .ks-btn:hover,
.ks-section--ink .wp-block-button__link:hover {
  background: var(--ks-gold-soft);
  border-color: var(--ks-gold-soft);
}
.wp-block-buttons { gap: 0.9rem; }

/* ------------------------------------------------------------------
   6. Hero
------------------------------------------------------------------ */
.ks-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 13vw, 10.5rem);
}
/* concentric rings — the inward journey */
.ks-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12%;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent 54px,
    rgba(150, 118, 58, 0.13) 54px,
    rgba(150, 118, 58, 0.13) 55px
  );
  pointer-events: none;
}
.ks-hero__inner { position: relative; max-width: 68rem; }
.ks-hero h1 { margin-bottom: 0.5em; }
.ks-hero .ks-lede { max-width: 56ch; margin-bottom: 2.6rem; }

.ks-hero__eyebrow {
  font-size: var(--ks-step--1);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ks-taupe);
  margin-bottom: 2.4rem;
}

/* staggered entrance */
@media (prefers-reduced-motion: no-preference) {
  .ks-hero__eyebrow, .ks-hero h1, .ks-hero .ks-lede, .ks-hero .wp-block-buttons, .ks-hero .ks-actions {
    animation: ks-rise 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  }
  .ks-hero h1 { animation-delay: 0.12s; }
  .ks-hero .ks-lede { animation-delay: 0.26s; }
  .ks-hero .wp-block-buttons, .ks-hero .ks-actions { animation-delay: 0.4s; }
}
@keyframes ks-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   7. Editorial page header (default page template)
------------------------------------------------------------------ */
.ks-page-head {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--ks-line-soft);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.ks-page-head h1 { font-size: var(--ks-step-4); max-width: 18em; margin-inline: auto; }
.ks-page-head .ks-lede { margin-top: 1.4rem; max-width: 52ch; margin-inline: auto; }

.ks-page-body { padding-bottom: clamp(4rem, 9vw, 7rem); }

/* ------------------------------------------------------------------
   8. Content blocks (Gutenberg core)
------------------------------------------------------------------ */
.ks-prose .wp-block-quote,
.wp-block-quote {
  border: 0;
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  padding: 0 0 0 clamp(1.5rem, 4vw, 2.75rem);
  position: relative;
  max-width: 30em;
}
.wp-block-quote::before {
  content: "\201C";
  position: absolute;
  left: -0.08em;
  top: -0.32em;
  font-family: var(--ks-serif);
  font-size: 4.6em;
  line-height: 1;
  color: var(--ks-gold-soft);
}
.wp-block-quote p {
  font-family: var(--ks-serif);
  font-size: var(--ks-step-2);
  font-style: italic;
  line-height: 1.38;
  color: var(--ks-ink);
  margin-bottom: 0.5em;
}
.wp-block-quote cite {
  font-family: var(--ks-sans);
  font-style: normal;
  font-size: var(--ks-step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-taupe);
}

ul.wp-block-list { padding-left: 1.1em; }
.wp-block-list li { margin-bottom: 0.55em; color: var(--ks-ink-soft); }
.wp-block-list li::marker { color: var(--ks-gold); }

.wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); }

/* ------------------------------------------------------------------
   9. Cards (courses, resources)
------------------------------------------------------------------ */
.ks-card {
  background: var(--ks-ivory);
  border: 1px solid var(--ks-line);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ks-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(43, 36, 28, 0.35);
}
.ks-card h3 { margin-bottom: 0.4em; }
.ks-card > p:last-child { margin-bottom: 0; }

.ks-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ks-burgundy);
  border: 1px solid currentColor;
  padding: 0.45rem 0.85rem;
  margin-bottom: 1.6rem;
}

/* book entries */
.ks-book {
  border-top: 1px solid var(--ks-line);
  padding: clamp(1.6rem, 4vw, 2.4rem) 0;
}
.ks-book h4 { margin-bottom: 0.15em; }
.ks-book .ks-book-author {
  font-size: var(--ks-step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-taupe);
  margin-bottom: 1rem;
}
.ks-book p { max-width: var(--ks-measure); color: var(--ks-ink-soft); }
.ks-book p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   10. Forms (kayla-platform plugin)
------------------------------------------------------------------ */
.ks-form { max-width: 560px; }
.ks-form .ks-field { margin-bottom: 1.6rem; }
.ks-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-ink-soft);
  margin-bottom: 0.55rem;
}
.ks-form label .ks-optional {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--ks-taupe);
}
.ks-form input[type="text"],
.ks-form input[type="email"],
.ks-form input[type="tel"],
.ks-form select,
.ks-form textarea {
  width: 100%;
  font-family: var(--ks-sans);
  font-size: var(--ks-step-0);
  color: var(--ks-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ks-line);
  border-radius: 0;
  padding: 0.7rem 0.1rem;
  transition: border-color 0.3s ease;
}
.ks-form input:focus,
.ks-form select:focus,
.ks-form textarea:focus {
  outline: none;
  border-bottom-color: var(--ks-gold);
}
.ks-form textarea { min-height: 9rem; resize: vertical; }

.ks-form .ks-consent {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ks-ink-soft);
  margin: 2rem 0;
}
.ks-form .ks-consent input { margin-top: 0.3rem; accent-color: var(--ks-gold); }
.ks-form .ks-hp { position: absolute !important; left: -9999px !important; }

.ks-notice {
  border: 1px solid var(--ks-line);
  border-left: 3px solid var(--ks-gold);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  color: var(--ks-ink-soft);
  max-width: 560px;
}
.ks-notice--error { border-left-color: var(--ks-burgundy); }

/* ------------------------------------------------------------------
   11. CTA band
------------------------------------------------------------------ */
.ks-cta-band { text-align: center; }
.ks-cta-band h2 { max-width: 17em; margin-inline: auto; }
.ks-cta-band p { max-width: 52ch; margin-inline: auto; color: rgba(246, 241, 231, 0.8); }
.ks-cta-band .wp-block-buttons { justify-content: center; margin-top: 2.4rem; }

/* ------------------------------------------------------------------
   12. Footer
------------------------------------------------------------------ */
.ks-footer {
  background: var(--ks-ink);
  color: rgba(246, 241, 231, 0.78);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.5rem;
  font-size: 0.95rem;
  position: relative;
  z-index: 2;
}
.ks-footer a { color: rgba(246, 241, 231, 0.9); text-decoration-color: rgba(184, 153, 104, 0.55); }
.ks-footer a:hover { color: var(--ks-gold-soft); }
.ks-footer__brand {
  font-family: var(--ks-serif);
  font-size: 1.6rem;
  color: var(--ks-ivory);
  margin-bottom: 0.6rem;
}
.ks-footer__sentence {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 1.08rem;
  color: rgba(246, 241, 231, 0.66);
  max-width: 30ch;
}
.ks-footer__social { margin-top: 1.6rem; }
.ks-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(246, 241, 231, 0.78);
}
.ks-footer__social a:hover { color: var(--ks-gold-soft); }
.ks-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(246, 241, 231, 0.14);
}
@media (min-width: 760px) {
  .ks-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.ks-footer h4 {
  font-family: var(--ks-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ks-gold-soft);
  margin-bottom: 1.2rem;
}
.ks-footer ul { list-style: none; margin: 0; padding: 0; }
.ks-footer li { margin-bottom: 0.7rem; }
.ks-footer ul a { text-decoration: none; }
.ks-footer ul a:hover { text-decoration: underline; }
.ks-footer__legal {
  padding-top: 2.2rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(246, 241, 231, 0.5);
}
.ks-footer__legal p { max-width: 90ch; margin-bottom: 0.9rem; }

/* ------------------------------------------------------------------
   13. Utilities
------------------------------------------------------------------ */
.ks-grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 760px) { .ks-grid-2 { grid-template-columns: 1fr 1fr; } }
.ks-grid-3 { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .ks-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ks-center { text-align: center; }
.ks-center > * { margin-inline: auto; }

.ks-small {
  font-size: 0.88rem;
  color: var(--ks-taupe);
}

/* split layout: sticky label left, prose right */
.ks-split { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .ks-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 4rem; }
  .ks-split > .wp-block-column:first-child h2 { position: sticky; top: 2.5rem; }
}

/* numbered theme list (course themes) */
.ks-themes { counter-reset: ksn; list-style: none; padding: 0 !important; max-width: none !important; }
.ks-themes li {
  counter-increment: ksn;
  border-top: 1px solid var(--ks-line);
  padding: 1.15rem 0 1.15rem 3.4rem;
  position: relative;
  color: var(--ks-ink-soft);
  margin: 0;
}
.ks-themes li::before {
  content: counter(ksn, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.2rem;
  font-family: var(--ks-serif);
  font-size: 1.05rem;
  color: var(--ks-gold);
}
.ks-themes li::marker { content: ""; }

/* 404 */
.ks-404 { padding-block: clamp(5rem, 14vw, 11rem); text-align: center; }

/* ------------------------------------------------------------------
   14. Desktop composition
------------------------------------------------------------------ */

/* Interior pages (default template): centered reading column,
   wide elements (card grids) still span the full wrap. */
.ks-page-body .ks-prose > p,
.ks-page-body .ks-prose > ul,
.ks-page-body .ks-prose > ol,
.ks-page-body .ks-prose > h2,
.ks-page-body .ks-prose > h3,
.ks-page-body .ks-prose > h4,
.ks-page-body .ks-prose > blockquote,
.ks-page-body .ks-prose > .wp-block-quote,
.ks-page-body .ks-prose > .wp-block-buttons,
.ks-page-body .ks-prose > .ks-book,
.ks-page-body .ks-prose > form.ks-form,
.ks-page-body .ks-prose > .ks-notice {
  max-width: 70ch;
  margin-inline: auto;
}

/* Full-bleed (canvas) sections: editorial split on wide screens —
   chapter number spans, heading sits left, prose reads right. */
@media (min-width: 900px) {
  .ks-section > .ks-wrap.ks-prose {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 5.5rem);
    row-gap: 0;
    align-items: start;
  }
  .ks-section > .ks-prose > .ks-kicker { grid-column: 1 / -1; }
  .ks-section > .ks-prose > h2 {
    grid-column: 1;
    position: sticky;
    top: 2.5rem;
  }
  .ks-section > .ks-prose > .ks-status {
    grid-column: 1;
    justify-self: start;
  }
  .ks-section > .ks-prose > p,
  .ks-section > .ks-prose > ul,
  .ks-section > .ks-prose > ol,
  .ks-section > .ks-prose > h3,
  .ks-section > .ks-prose > blockquote,
  .ks-section > .ks-prose > .wp-block-quote,
  .ks-section > .ks-prose > .wp-block-buttons,
  .ks-section > .ks-prose > form.ks-form,
  .ks-section > .ks-prose > .ks-notice {
    grid-column: 2;
  }

  /* Course themes: span the section and flow into two columns. */
  .ks-section > .ks-prose > .ks-themes {
    grid-column: 1 / -1;
    column-count: 2;
    column-gap: clamp(3rem, 6vw, 5.5rem);
    margin-top: 1rem;
  }
  .ks-themes li { break-inside: avoid; }

  /* Editorial figures + course cover live in the left rail. */
  .ks-section > .ks-prose > .wp-block-image,
  .ks-section > .ks-prose > .ks-cover {
    grid-column: 1;
  }

  /* Explicit rail layout: heading + figure left, prose right,
     one shared row so spacing is consistent across sections. */
  .ks-section > .ks-prose > .ks-rail { grid-column: 1; }
  .ks-section > .ks-prose > .ks-railbody { grid-column: 2; }
}

.ks-rail > .wp-block-image,
.ks-rail > .ks-cover { margin: 2.4rem 0 0; }
.ks-rail > h2 { margin-bottom: 0; }
@media (max-width: 899px) {
  .ks-railbody { margin-top: 2.2rem; }
}

/* ------------------------------------------------------------------
   15. Imagery
------------------------------------------------------------------ */
img { border-radius: 0; }

/* framed editorial figure: hairline inset + offset gold rule */
.ks-frame {
  position: relative;
  margin: 0;
}
.ks-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.05) saturate(0.92);
}
.ks-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(43, 36, 28, 0.14);
  pointer-events: none;
}
.ks-frame::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 1px solid var(--ks-gold-soft);
  opacity: 0.5;
  z-index: -1;
}

.ks-prose .wp-block-image,
.wp-block-image { margin: clamp(2rem, 5vw, 3rem) 0; }
.ks-section > .ks-prose > .wp-block-image { margin: 0.5rem 0 0; }

/* split hero: text beside image */
.ks-hero--split .ks-wrap {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
.ks-hero__media { position: relative; max-width: 540px; }
.ks-hero__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 900px) {
  .ks-hero--split .ks-wrap { grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); }
  .ks-hero__media { justify-self: end; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ks-hero__media { animation: ks-rise 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) 0.3s both; }
}

/* media cards (resources) */
.ks-card--media { padding: 0; overflow: hidden; }
.ks-prose .ks-card__media,
.ks-card--media .wp-block-image,
.ks-card__media { margin: 0; }
.ks-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: sepia(0.05) saturate(0.92);
}
.ks-card__media--art {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: var(--ks-ivory-deep);
  border-bottom: 1px solid var(--ks-line-soft);
}
.ks-card__media--art svg { width: min(46%, 170px); height: auto; }
.ks-card__body { padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.ks-card__body > p:last-child { margin-bottom: 0; }

/* the Becoming course cover, built in type */
.ks-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 380px;
  background: linear-gradient(160deg, #f3ecdd, #f6f1e7 50%, #eadfc9);
  border: 1px solid var(--ks-line);
  box-shadow: 0 30px 60px -32px rgba(43, 36, 28, 0.5);
  padding: clamp(1.75rem, 9%, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.ks-cover::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(150, 118, 58, 0.4);
  pointer-events: none;
}
.ks-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background: linear-gradient(to right, rgba(43, 36, 28, 0.16), transparent);
  pointer-events: none;
}
.ks-cover p { margin: 0; }
.ks-cover__house {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ks-taupe);
}
.ks-cover__title {
  font-family: var(--ks-serif);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  color: var(--ks-ink);
  line-height: 1.05;
}
.ks-cover__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--ks-gold);
  margin: 1.1rem auto 1rem;
}
.ks-cover__sub {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ks-ink-soft);
}
.ks-cover__foot {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ks-gold);
}

/* waitlist page: form beside cover */
.ks-waitlist-duo { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin-top: 2.5rem; }
.ks-waitlist-duo .ks-cover { margin-inline: auto; }
@media (min-width: 900px) {
  .ks-waitlist-duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .ks-waitlist-duo .ks-cover { position: sticky; top: 2.5rem; }
}

/* inline line-art (personality tests) */
.ks-art {
  display: grid;
  place-items: center;
  margin: 0 0 1.5rem;
}
.ks-art svg { width: min(150px, 40vw); height: auto; }
.ks-art .stroke { fill: none; stroke: var(--ks-gold); stroke-width: 1.3; }
.ks-art .stroke--soft { fill: none; stroke: var(--ks-gold-soft); stroke-width: 1; opacity: 0.7; }
.ks-art .dot { fill: var(--ks-gold); stroke: none; }
.ks-card__media--art .stroke { fill: none; stroke: var(--ks-gold); stroke-width: 1.3; }
.ks-card__media--art .stroke--soft { fill: none; stroke: var(--ks-gold-soft); stroke-width: 1; opacity: 0.7; }
.ks-card__media--art .dot { fill: var(--ks-gold); stroke: none; }