/*
Theme Name: Krissie Steen
Theme URI: https://krissiesteen.com
Author: Krissie Steen
Description: Custom block theme for krissiesteen.com. Built from the live CoachEngine site (colour, type, layout) as corrected by Krissie's fix lists. No page builder, no paid plugins, nothing to keep in version sync.
Version: 3.8.8
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krissiesteen
*/

/* ============================================================
   0. TOKENS
   Palette and type from the live site's Elementor Kit (post-6.css).
   Sizes lifted per fix #26 (labels ≥ 0.75rem) and #27 (body ≥ 16px).
   ============================================================ */
:root{
  --o:#FA7219;   --odk:#C45508;  --olt:#FF9A4D;
  --t:#1EBACD;   --tdk:#148A9A;  --tlt:#60DDE8;
  --y:#FEDD31;   --ydk:#C9A800;
  --blk:#0C0C0C; --chr:#141210;  --ink:#1E1B18;
  --mid:#6B6560; --midlt:#6C6B69; --lt:#C7C7C7;  --ltr:#D6D4D0;
  --line:#E0DEDA; --line2:#DAD8D5;
  --cr:#E8E4DC;  --ow:#F2F0EC;   --wh:#FCFCFB; --onwh:#F5F7FA;

  --fh:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --fm:'DM Mono',ui-monospace,Menlo,monospace;
  /* body typeface — Appearance → Site settings → Typography writes these three (default: the headline face) */
  --fb:var(--fh);
  --fb-ls:.05em;
  --fb-lh:1.6;
  /* HOW LOUD — Appearance → Site settings → Typography → Capitals writes these five.
     --h1-case  the big hero line          --h-case   section headings
     --ui-case  nav, buttons, links        --lbl-case eyebrows, captions, small labels
     --ls-k     a multiplier on every tracked letter-spacing: capitals need the air,
                lower case does not, so it drops to a fifth when nothing is shouting. */
  --h1-case:uppercase;
  --h-case:uppercase;
  --ui-case:uppercase;
  --lbl-case:uppercase;
  --ls-k:1;
  --h-weight:900;
  --h-lh:.86;

  /* type scale — seven steps */
  --fs-h1:clamp(4.25rem,11.5vw,10.5rem);   /* 68 → 168px */
  --fs-h2:clamp(2.75rem,5.6vw,5rem);       /* 44 → 80px  */
  --fs-h3:clamp(1.7rem,2.5vw,2.125rem);    /* 27 → 34px  */
  --fs-h4:1.375rem;                        /* 22px       */
  --fs-lead:clamp(1.3rem,1.1vw + .9rem,1.5rem);   /* 21 → 24px — the missing step */
  --fs-body:clamp(1.0625rem,.4vw + .95rem,1.125rem); /* 17 → 18px */
  --fs-label:.85rem;                       /* DM Mono eyebrows, 13.6px */
  --fs-ui:1rem;                            /* nav, buttons, footer: 16px */

  --wrap:1200px;
  --gut:clamp(16px,4vw,40px);
  --sec:min(14vh,120px);
  --nav-h:64px;

  /* per-section context (overridden by .ks-sec--* modifiers) */
  --fg:var(--blk);
  --muted:var(--mid);
  --rule:var(--mid);
  --hair:rgba(12,12,12,.1);
}

/* ============================================================
   1. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ow);color:var(--blk);
  font-family:var(--fb);font-weight:400;font-size:var(--fs-body);
  line-height:var(--fb-lh);letter-spacing:var(--fb-ls);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;height:auto}
img{display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5,h6{
  margin:0;font-family:var(--fh);font-weight:var(--h-weight);text-transform:var(--h-case);
  line-height:var(--h-lh);letter-spacing:.01em;color:var(--fg);
  overflow-wrap:normal;hyphens:manual;
}
h1{font-size:var(--fs-h1);line-height:.84;text-transform:var(--h1-case);font-weight:900}   /* the hero line is the brand: always caps, always heavy */
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.05}
h4{font-size:var(--fs-h4);font-weight:min(800,var(--h-weight));line-height:1.15}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent,var(--tdk))}
.ks-acc-t{color:var(--tdk)!important}
.ks-acc-y{color:var(--y)!important}
.ks-acc-o{color:var(--o)!important}
.ks-acc-tl{color:var(--t)!important}
:focus-visible{outline:2px solid var(--t);outline-offset:3px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--y);color:var(--blk);padding:10px 16px;z-index:999;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.skip-link:focus{left:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* WordPress block resets we want */
.wp-block-group,.wp-block-columns,.wp-block-column{margin-block:0}
.wp-block-heading{margin:0}
.wp-block-image{margin:0}
.wp-block-image img{height:auto}
.wp-site-blocks{padding:0}
.entry-content > *{margin-block:0}
:where(.is-layout-flow) > *{margin-block:0}

/* ============================================================
   2. TYPE HELPERS
   ============================================================ */
.ks-lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:calc(var(--fb-ls) * .8);color:var(--fg)}
.ks-muted{color:var(--muted)}
.ks-small{font-size:.95rem}
.ks-prose p{color:var(--muted);max-width:620px}
.ks-prose h2,.ks-prose h3{margin-bottom:.45em}

/* eyebrow — DM Mono with a thin rule. The rule, not an icon font. */
.ks-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--fm);font-weight:400;font-size:var(--fs-label);
  letter-spacing:calc(.156em * var(--ls-k));text-transform:var(--lbl-case);line-height:1.2;
  color:var(--muted);margin:0 0 min(3vh,26px);
}
.ks-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--rule);flex-shrink:0}
.ks-eyebrow--bare::before{display:none}

/* label — small caps in Barlow Condensed (fix #26: ≥ .75rem, 700, .14em) */
.ks-label{font-family:var(--fh);font-weight:700;font-size:.8rem;letter-spacing:calc(.14em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted);line-height:1.3}
.ks-label--o{color:var(--o)}
.ks-label--t{color:var(--tdk)}

/* ============================================================
   3. LAYOUT — sections, wraps, colour context
   ============================================================ */
.ks-sec{position:relative;padding:var(--sec) var(--gut);isolation:isolate;overflow:hidden}
.ks-wrap{width:100%;max-width:var(--wrap);margin:0 auto;position:relative}   /* no z-index: a stacking context here would stop hero photos blending with the section colour */
.ks-sec--cream{background:var(--ow);--sec-bg:var(--ow);--fg:var(--blk);--muted:var(--mid);--rule:var(--mid);--hair:rgba(12,12,12,.1);--accent:var(--tdk)}
.ks-sec--cream2{background:var(--cr)}
.ks-sec--teal{background:var(--tdk);--sec-bg:var(--tdk);--fg:var(--wh);--muted:rgba(252,252,251,.72);--rule:rgba(252,252,251,.4);--hair:rgba(255,255,255,.14);--accent:var(--y)}
.ks-sec--orange{background:var(--o);--sec-bg:var(--o);--fg:var(--wh);--muted:rgba(255,255,255,.82);--rule:rgba(255,255,255,.5);--hair:rgba(255,255,255,.18);--accent:var(--y)}
.ks-sec--yellow{background:var(--y);--sec-bg:var(--y);--fg:var(--blk);--muted:rgba(12,12,12,.68);--rule:rgba(12,12,12,.4);--hair:rgba(12,12,12,.12);--accent:var(--tdk)}
.ks-sec--charcoal{background:var(--chr);--sec-bg:var(--chr);--fg:var(--onwh);--muted:rgba(245,247,250,.66);--rule:rgba(255,255,255,.3);--hair:rgba(255,255,255,.1);--accent:var(--y)}
.ks-sec--black{background:var(--blk);--sec-bg:var(--blk);--fg:var(--onwh);--muted:rgba(245,247,250,.62);--rule:rgba(255,255,255,.3);--hair:rgba(255,255,255,.1);--accent:var(--y)}
.ks-sec--grey{background:#4A4642;--sec-bg:#4A4642;--fg:var(--onwh);--muted:rgba(245,247,250,.78);--rule:rgba(255,255,255,.35);--hair:rgba(255,255,255,.14);--accent:var(--y)}   /* grey from the slide deck (time-as-a-weapon planner block, Krissie 17 Oct) */
.ks-sec--grey p a{color:var(--onwh)}

/* section colour as a block style (Styles panel) — same values as the modifiers above, later so they win */
.ks-sec.is-style-ks-sec-cream{background:var(--ow);--sec-bg:var(--ow);--fg:var(--blk);--muted:var(--mid);--rule:var(--mid);--hair:rgba(12,12,12,.1);--accent:var(--tdk)}
.ks-sec.is-style-ks-sec-teal{background:var(--tdk);--sec-bg:var(--tdk);--fg:var(--wh);--muted:rgba(252,252,251,.72);--rule:rgba(252,252,251,.4);--hair:rgba(255,255,255,.14);--accent:var(--y)}
.ks-sec.is-style-ks-sec-yellow{background:var(--y);--sec-bg:var(--y);--fg:var(--blk);--muted:rgba(12,12,12,.68);--rule:rgba(12,12,12,.4);--hair:rgba(12,12,12,.12);--accent:var(--tdk)}
.ks-sec.is-style-ks-sec-orange{background:var(--o);--sec-bg:var(--o);--fg:var(--wh);--muted:rgba(255,255,255,.82);--rule:rgba(255,255,255,.5);--hair:rgba(255,255,255,.18);--accent:var(--y)}
.ks-sec.is-style-ks-sec-charcoal{background:var(--chr);--sec-bg:var(--chr);--fg:var(--onwh);--muted:rgba(245,247,250,.66);--rule:rgba(255,255,255,.3);--hair:rgba(255,255,255,.1);--accent:var(--y)}
.ks-sec.is-style-ks-sec-black{background:var(--blk);--sec-bg:var(--blk);--fg:var(--onwh);--muted:rgba(245,247,250,.62);--rule:rgba(255,255,255,.3);--hair:rgba(255,255,255,.1);--accent:var(--y)}

/* the signature lines */
.ks-sec--stripe-o{border-left:5px solid var(--o)}          /* About only — fix #12 */
.ks-sec--rule-t{border-top:4px solid var(--t)}             /* Resources hero — the live site's line, bright teal, when the site-wide switch is off */
/* Header line (Site settings → Header line, on by default): the live Resources page's 4px seam under the header,
   now on every hero, in the page's accent colour — the same colour as the highlighted word in the heading. */
body.ks-hero-line .ks-hero{border-top:4px solid var(--seam,var(--accent,var(--tdk)))}
/* Krissie's scheme (21 Sep): each page shows three logo colours — the hero, the header teal, and this line.
   Home yellow · About / Talks / Resources orange · CoachEngine / Work With Me / Contact teal (the header-button teal). */
.ks-page-home{--seam:var(--y)}
.ks-page-about,.ks-page-talks,.ks-page-resources{--seam:var(--o)}
.ks-page-coachengine,.ks-page-work-with-me,.ks-page-contact{--seam:var(--tdk)}
.ks-sec--hairline{border-bottom:1px solid var(--line)}

/* grain — coloured sections only, never cream */
.ks-grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}

/* ghost letterform */
.ks-ghost{
  position:absolute;right:-3vw;top:-6vh;z-index:0;
  font-family:var(--fh);font-weight:900;font-size:70vh;line-height:.8;letter-spacing:-.04em;
  color:rgba(0,0,0,.09);pointer-events:none;user-select:none;
}
.ks-sec--charcoal .ks-ghost,.ks-sec--black .ks-ghost{color:rgba(255,255,255,.035);font-size:50vh;top:50%;transform:translateY(-50%)}

/* two columns */
.ks-split{display:grid;grid-template-columns:1fr 1fr;gap:min(8vw,72px);align-items:center}
.ks-split--top{align-items:start}
.ks-split > *{min-width:0}

/* ============================================================
   4. BUTTONS — square, 1px, identical sizing in any pair
   ============================================================ */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.wp-block-button{margin:0}
.wp-block-button__link,.ks-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 24px;
  font-family:var(--fh);font-weight:600;font-size:var(--fs-ui);
  letter-spacing:calc(.14rem * var(--ls-k));text-transform:var(--ui-case);line-height:1;
  text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:0!important;
  background:var(--tdk);color:var(--onwh);
  transition:background .15s,color .15s,border-color .15s;
}
.wp-block-button__link:hover,.ks-btn:hover{background:var(--onwh);color:var(--tdk);border-color:var(--tdk)}
/* filled variants */
.is-style-ks-teal .wp-block-button__link{background:var(--tdk);color:var(--onwh);border-color:var(--tdk)}
.is-style-ks-teal .wp-block-button__link:hover{background:var(--onwh);color:var(--tdk)}
/* beige with orange text and border ("Have me at your event", Krissie 17 Oct). Text in the darker orange: bright orange on beige is 2.2:1, too faint to read. */
.is-style-ks-beige-orange .wp-block-button__link{background:var(--cr);color:var(--odk);border:2px solid var(--o)}
.is-style-ks-beige-orange .wp-block-button__link:hover{background:var(--odk);color:var(--wh);border-color:var(--odk)}
.is-style-ks-yellow .wp-block-button__link{background:var(--y);color:var(--blk);border-color:var(--y)}
.is-style-ks-white .wp-block-button__link{background:var(--wh);color:var(--blk);border-color:var(--wh)}
.is-style-ks-white .wp-block-button__link:hover{background:var(--y);border-color:var(--y)}
.is-style-ks-yellow .wp-block-button__link:hover{background:var(--blk);color:var(--y);border-color:var(--blk)}
.ks-sec--charcoal .is-style-ks-yellow .wp-block-button__link:hover{background:var(--wh);color:var(--blk);border-color:var(--wh)}
.is-style-ks-black .wp-block-button__link{background:var(--blk);color:var(--onwh);border-color:var(--blk)}
.is-style-ks-black .wp-block-button__link:hover{background:var(--onwh);color:var(--blk)}
.is-style-ks-black-yellow .wp-block-button__link{background:var(--blk);color:var(--y);border-color:var(--blk)}
.is-style-ks-black-yellow .wp-block-button__link:hover{background:var(--y);color:var(--blk);border-color:var(--y)}
/* outlined — adapts to whatever it sits on */
.is-style-ks-outline .wp-block-button__link{background:transparent;color:var(--fg);border-color:currentColor}
.is-style-ks-outline .wp-block-button__link:hover{background:var(--fg);color:var(--bg-invert,var(--ow))}
.ks-sec--cream .is-style-ks-outline .wp-block-button__link:hover{color:var(--ow)}
.ks-sec--yellow .is-style-ks-outline .wp-block-button__link:hover{color:var(--y)}
.ks-sec--teal .is-style-ks-outline .wp-block-button__link:hover{color:var(--tdk)}
.ks-sec--orange .is-style-ks-outline .wp-block-button__link:hover{color:var(--o)}
.ks-sec--charcoal .is-style-ks-outline .wp-block-button__link:hover{color:var(--chr)}
.ks-sec--black .is-style-ks-outline .wp-block-button__link:hover{color:var(--blk)}
/* a stacked pair, identical widths — fix #32 */
.ks-actions{flex-direction:column;align-items:stretch;flex-shrink:0;min-width:min(300px,100%)}
.ks-actions .wp-block-button{width:100%}
.ks-actions .wp-block-button__link{width:100%}
/* text link with arrow */
.ks-more{font-family:var(--fh);font-weight:700;font-size:var(--fs-ui);letter-spacing:calc(.14rem * var(--ls-k));text-transform:var(--ui-case);text-decoration:none;color:var(--fg);display:inline-flex;gap:10px;align-items:center}
.ks-more::after{content:'→';transition:transform .18s}
.ks-more:hover::after{transform:translateX(6px)}

/* ============================================================
   5. HEADER
   ============================================================ */
.ks-header{background:#0F0F09;color:var(--onwh);position:relative;z-index:50;border-bottom:1px solid rgba(255,255,255,.06)}
.ks-header__bar{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  min-height:var(--nav-h);display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  flex-wrap:nowrap;
}
.ks-logo{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.ks-logo img,.ks-logo .custom-logo{height:38px;width:auto;display:block}
.ks-logo--mark{display:none}
.ks-logo--mark img{height:34px}
.ks-wordmark{font-family:var(--fh);font-weight:900;font-size:1.25rem;letter-spacing:calc(.06em * var(--ls-k));text-transform:var(--ui-case);color:var(--onwh);text-decoration:none}
.ks-wordmark em{font-style:normal;color:var(--t)}
.ks-header .wp-block-site-logo{margin-right:auto}
.ks-header .wp-block-site-logo img{height:38px;width:auto}

/* navigation block */
.ks-nav{--nav-link:rgba(255,255,255,.62)}
/* One line, always. The links tighten as the window narrows rather than dropping to a
   second row; below the breakpoint below they become the hamburger instead. */
.ks-nav .wp-block-navigation__container{
  gap:clamp(13px,1.7vw,26px);align-items:center;flex-wrap:nowrap!important;
}
.ks-nav .wp-block-navigation-item{flex:0 0 auto}
.ks-nav .wp-block-navigation-item__content{
  font-family:var(--fh);font-weight:700;font-size:clamp(.9rem,.55vw + .72rem,1rem);
  letter-spacing:clamp(.04em,.16vw,.14em);text-transform:var(--ui-case);text-decoration:none;
  color:var(--nav-link);padding:8px 0;transition:color .15s;white-space:nowrap;
}
.ks-nav .wp-block-navigation-item__content:hover,
.ks-nav .current-menu-item > .wp-block-navigation-item__content{color:var(--onwh)}
.ks-nav__cta{margin-left:4px}
.ks-nav__cta .wp-block-button__link{min-height:40px;padding:9px clamp(13px,1.4vw,20px);font-size:clamp(.9rem,.5vw + .74rem,1rem);letter-spacing:clamp(.06em,.16vw,.14rem);white-space:nowrap;background:var(--tdk);color:var(--onwh);border-color:var(--tdk)}
.ks-nav__cta .wp-block-button__link:hover{background:var(--onwh);color:var(--tdk)}
/* The menu collapses to a hamburger below 1180px. WP's own breakpoint is 600px, which is far
   too late for eight links; 1000px was still too tight and the row wrapped onto two lines
   between about 1000 and 1150 (Krissie, 23 Sep). overlayMenu is "always" in the header
   pattern; this is what shows it inline on a wide screen. */
@media (min-width:1180px){
  .ks-nav .wp-block-navigation__responsive-container-open{display:none!important}
  .ks-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open){display:block;position:static;width:auto;height:auto;background:transparent;padding:0}
  .ks-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-close,
  .ks-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-dialog{display:contents}
  /* A row, not a stack. If WordPress ever emits the menu as more than one list — it does that
     wherever an item has been hidden — they sit side by side here instead of on two lines. */
  .ks-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-content{
    display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(13px,1.7vw,26px);
  }
  .ks-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}
}
/* hamburger + overlay (fix M1 dark panel, M2 orange active) */
.ks-nav .wp-block-navigation__responsive-container-open,
.ks-nav .wp-block-navigation__responsive-container-close{color:var(--onwh)}
.ks-nav .wp-block-navigation__responsive-container-open svg{width:28px;height:28px}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--blk)!important;color:var(--onwh);padding:calc(var(--nav-h) + 12px) var(--gut) 40px;
}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:0;align-items:flex-start}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%;justify-content:flex-start;border-bottom:1px solid rgba(255,255,255,.08)}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{display:block;padding:16px 0;font-size:1.25rem;color:var(--lt)}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content{color:var(--o)}
.ks-nav .wp-block-navigation__responsive-container-close{top:14px;right:var(--gut)}
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.ks-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{width:100%;align-items:stretch!important;justify-content:flex-start!important;text-align:left}
/* current page in the nav — by page slug, so it works with custom links */
.home .ks-nav a[href="/"],
.ks-page-about .ks-nav a[href$="/about/"],
.ks-page-coachengine .ks-nav a[href$="/coachengine/"],
.ks-page-talks .ks-nav a[href$="/talks/"],
.ks-page-resources .ks-nav a[href$="/resources/"],
.ks-page-work-with-me .ks-nav a[href$="/work-with-me/"]{color:var(--onwh)}
.home .is-menu-open .ks-nav a[href="/"],
.ks-page-about .ks-nav .is-menu-open a[href$="/about/"],
.ks-page-coachengine .ks-nav .is-menu-open a[href$="/coachengine/"],
.ks-page-talks .ks-nav .is-menu-open a[href$="/talks/"],
.ks-page-resources .ks-nav .is-menu-open a[href$="/resources/"],
.ks-page-work-with-me .ks-nav .is-menu-open a[href$="/work-with-me/"]{color:var(--o)}   /* fix M2 */

/* announcement bar — a promo, toggled site-wide */
.ks-bar{background:var(--o);padding:12px var(--gut)}
.ks-bar__in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ks-bar p{margin:0;font-family:var(--fh);font-weight:700;font-size:.9rem;letter-spacing:calc(.1em * var(--ls-k));text-transform:var(--lbl-case);color:var(--blk)}
.ks-bar a{color:var(--blk);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ks-bar--yellow{background:var(--y)}
.ks-bar--teal{background:var(--t)}

/* ============================================================
   6. HERO
   Layout follows the live site's About hero (measured 21 Sep 2026): the photo is a
   full-height panel flush to the top and the right screen edge, about a third of the
   viewport wide, with a hard left edge and a fade at the foot; the words sit beside it
   on solid colour. The photo is never a picture in a box and never sits low.
   ============================================================ */
.ks-hero{padding-top:min(10vh,90px);padding-bottom:0;overflow:hidden}
.ks-hero .ks-wrap{
  position:static;   /* the photo panel positions against the section, not the 1200px wrap */
  display:grid;grid-template-columns:1fr;align-items:end;min-height:calc(86vh - var(--nav-h));
}
.ks-hero--nomedia .ks-wrap{position:relative;min-height:calc(72vh - var(--nav-h))}
.ks-hero__body{position:relative;z-index:1;max-width:66%;padding-bottom:min(10vh,88px);animation:fadeUp .65s ease both;min-width:0}   /* 66% of the wrap stops short of the panel; a longer word may cross it, and that is allowed */
.ks-hero--nomedia .ks-hero__body{max-width:none}
.ks-hero__body h1{margin-bottom:min(4vh,34px)}
.ks-hero__body .ks-lead{max-width:560px;margin-bottom:min(5vh,40px);color:var(--muted)}
.ks-hero__body .ks-lead + .wp-block-buttons{margin-top:0}
.ks-hero__body .wp-block-buttons{margin-bottom:min(6vh,56px)}
/* the panel — no z-index here: the img must blend with the section colour */
.ks-hero__media{position:absolute;top:0;right:0;bottom:0;width:32%;max-width:none;margin:0;min-width:0}
.ks-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}   /* fix #10 */
/* the ghost letter is redundant behind a photo panel */
.ks-hero:not(.ks-hero--nomedia):not(.ks-hero--product) > .ks-ghost{display:none}

/* photo treatments — fade at the foot like the live About. Teal keeps the photo in natural colour
   (the luminosity tint read as a "blue wash" — Krissie, 21 Sep); charcoal still takes the section colour. */
.ks-hero--teal .ks-hero__media img{
  filter:contrast(1.05);
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 25%);mask-image:linear-gradient(to top,transparent 0%,#000 25%);
}
.ks-hero--charcoal .ks-hero__media img{
  filter:contrast(1.05);mix-blend-mode:luminosity;opacity:.85;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 25%);mask-image:linear-gradient(to top,transparent 0%,#000 25%);
}
.ks-hero--cream .ks-hero__media img{
  filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 22%);mask-image:linear-gradient(to top,transparent 0%,#000 22%);
}
.ks-hero--yellow .ks-hero__media img,
.ks-hero--orange .ks-hero__media img{
  filter:saturate(.1) contrast(1.05);mix-blend-mode:multiply;opacity:.6;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 22%);mask-image:linear-gradient(to top,transparent 0%,#000 22%);
}
.ks-hero--yellow .ks-hero__media img{filter:saturate(.05) contrast(1.05);opacity:.55}   /* fix #21 */

/* product shot (CoachEngine) — stays a two-column grid, no multiply, teal glow behind */
.ks-hero--product .ks-wrap{position:relative;grid-template-columns:1fr min(38vw,480px);gap:min(6vw,52px)}
.ks-hero--product .ks-hero__body{max-width:none}
.ks-hero--product .ks-hero__media{position:relative;inset:auto;width:auto;align-self:center;display:flex;justify-content:center;padding-bottom:min(8vh,64px)}
.ks-hero--product .ks-hero__media img{width:88%;height:auto;max-width:460px;filter:drop-shadow(0 20px 60px rgba(0,0,0,.6));mix-blend-mode:normal;opacity:1;mask-image:none;-webkit-mask-image:none}
.ks-hero--product .ks-hero__media::before{
  content:'';position:absolute;inset:auto 0 0 0;margin:auto;top:0;
  width:min(38vw,440px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(30,186,205,.16) 0%,transparent 70%);
}
/* a hero whose longest word won't fit at full size — the live site set CoachEngine at 135px */
.ks-hero--long h1{font-size:clamp(3.4rem,9.2vw,8.4rem)}
/* hero with the record under it (Home): the strip sits on solid colour, the photo stops above it */
.ks-hero__foot{grid-column:1 / -1;position:relative;z-index:1}
.ks-hero__foot::before{content:'';position:absolute;top:0;bottom:-1px;left:-100vw;right:-100vw;background:var(--sec-bg);z-index:-1}

/* ------------------------------------------------------------
   6b. HERO — "photo across the seam" (per-page block style)
   Select the hero section → Styles → "Hero · photo across the seam".
   The panel widens to 59% of the screen, loses its fade and takes the section colour at
   full strength; the heading column ignores the seam and runs onto the photo. This is
   the live site's Work With Me / Resources hero. Needs a photo cropped tight to a face
   or a moment, at least 1600px wide. Not for the CoachEngine product hero.
   ------------------------------------------------------------ */
.ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__body{max-width:none;padding-bottom:min(12vh,110px)}
.ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__media{width:59%}
/* the paragraph and buttons stay on the colour; only the heading is allowed across the seam */
.ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__body .ks-lead,
.ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__body .ks-ph{max-width:min(560px,calc(41vw - max((100vw - var(--wrap)) / 2,var(--gut)) - 24px))}
.ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__media img{object-position:center 25%;opacity:1;-webkit-mask-image:none;mask-image:none}
.ks-hero--yellow.is-style-ks-bleed .ks-hero__media img,
.ks-hero--orange.is-style-ks-bleed .ks-hero__media img{filter:contrast(1.05);mix-blend-mode:multiply;opacity:1}
.ks-hero--cream.is-style-ks-bleed .ks-hero__media img{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:1}
.ks-hero--teal.is-style-ks-bleed .ks-hero__media img{filter:contrast(1.05);opacity:1}
.ks-hero--charcoal.is-style-ks-bleed .ks-hero__media img{filter:contrast(1.1);mix-blend-mode:luminosity;opacity:.9}
/* cut-out photo (transparent background, Nikki's 9 Oct edit): show the whole head, stand the figure on the bottom edge, push it hard right so the headline reads (Krissie, 17 Oct).
   Add the class "ks-hero__media--cutout" to the hero image block to use it. */
.ks-hero.is-style-ks-bleed .ks-hero__media.ks-hero__media--cutout img{object-fit:contain;object-position:right bottom;filter:none;mix-blend-mode:normal}

/* proof strip — sits inside the hero, not a fourth section */
.ks-proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--hair);margin-top:min(4vh,32px);
}
.ks-proof__item{padding:min(4vh,32px) 24px min(5vh,44px) 0;border-left:1px solid var(--hair);padding-left:24px}
.ks-proof__item:first-child{border-left:0;padding-left:0}
/* a section heading never sits on the paragraph under it (margins collapse, so blocks that already had a gap keep it) */
.ks-sec h2.wp-block-heading + p{margin-top:min(3vh,24px)}
/* the record as its own charcoal band between Who I am and the cream body (Home, Krissie 17 Oct) */
.ks-stats{padding-top:min(9vh,80px);padding-bottom:min(9vh,80px)}
.ks-proof--band{margin:0;border-top:0}
.ks-stats .ks-proof__num{color:var(--y)}
.ks-proof__num{font-family:var(--fh);font-weight:900;font-size:clamp(2.6rem,5vw,4.5rem);line-height:.9;color:var(--fg);letter-spacing:0;margin:0 0 8px}
.ks-proof__num em{font-style:normal;color:var(--accent,var(--y))}
.ks-proof__lbl{margin:0;font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted);line-height:1.3}

/* ============================================================
   7. INTRO + ROW LISTS + TIMELINE + POINTS
   ============================================================ */
.ks-intro{max-width:680px;margin-bottom:min(12vh,100px)}
.ks-intro h2{margin-bottom:min(3vh,26px)}
.ks-intro p{color:var(--muted)}
.ks-intro .ks-lead{color:var(--fg)}
/* inset intro (Home, The problem: Krissie 17 Oct). It has no picture beside it, so the column sits in from the left; the text stays left-aligned (centred text was tried and dropped). Phones: full width as usual. */
.ks-intro--inset{margin-left:auto;margin-right:auto}
.ks-block{margin-bottom:min(12vh,100px)}
.ks-block:last-child{margin-bottom:0}
.ks-hd{margin-bottom:min(5vh,44px)}

/* rows — paths / framework / services / articles / talks / engagements */
.ks-rows{display:flex;flex-direction:column}
.ks-row{
  position:relative;display:grid;grid-template-columns:min(6vw,64px) 1fr min(4vw,40px);
  gap:min(4vw,36px);align-items:center;
  padding:min(5.5vh,48px) 0;border-top:1px solid var(--hair);
  color:inherit;text-decoration:none;
}
.ks-rows > .ks-row:last-child{border-bottom:1px solid var(--hair)}
.ks-row__num{font-family:var(--fh);font-weight:900;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;text-align:right;color:var(--tdk);opacity:.5;transition:opacity .18s}  /* fix M5 */
.ks-row__body{min-width:0}
.ks-row__body h3{margin-bottom:.35em}
.ks-row__body h3 a{text-decoration:none;color:inherit}
.ks-row__body h3 a::after{content:'';position:absolute;inset:0}   /* whole row is the link */
.ks-row__body p{color:var(--muted);max-width:620px;margin:0}
.ks-row__tag{display:block;margin-top:10px}
.ks-row__arrow{font-size:1.5rem;line-height:1;color:var(--fg);opacity:.25;transition:transform .18s,opacity .18s,color .18s;justify-self:end}
.ks-row:hover .ks-row__arrow{transform:translateX(7px);opacity:1;color:var(--tdk)}
.ks-row:hover .ks-row__num{opacity:1}
.ks-rows--o .ks-row:hover .ks-row__arrow{color:var(--o)}
.ks-rows--o .ks-row__num{color:var(--o)}
.ks-row--static .ks-row__arrow{display:none}
.ks-row--static{grid-template-columns:min(6vw,64px) 1fr}

/* timeline (About) */
.ks-tl{display:flex;flex-direction:column}
.ks-tl__item{display:grid;grid-template-columns:min(12vw,110px) 1fr;gap:0 min(4vw,36px);padding-bottom:min(6vh,52px);position:relative}
.ks-tl__year{font-family:var(--fh);font-weight:900;font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:.9;text-align:right;color:var(--ltr);transition:color .2s;letter-spacing:0;margin:0}
.ks-tl__item:hover .ks-tl__year{color:var(--o)}
/* dot + connector drawn in CSS — no empty blocks to manage in the editor */
.ks-tl__body{min-width:0;padding-top:4px;position:relative;padding-left:36px}
.ks-tl__body::before{content:'';position:absolute;left:0;top:12px;width:12px;height:12px;border-radius:50%;background:var(--mid)}
.ks-tl__body::after{content:'';position:absolute;left:5px;top:34px;bottom:calc(-1 * min(6vh,52px));width:2px;background:rgba(12,12,12,.08)}
.ks-tl__item:last-child .ks-tl__body::after{display:none}
.ks-tl__item--o .ks-tl__body::before{background:var(--o)}  .ks-tl__item--o .ks-label{color:var(--o)}
.ks-tl__item--t .ks-tl__body::before{background:var(--tdk)}.ks-tl__item--t .ks-label{color:var(--tdk)}
.ks-tl__item--y .ks-tl__body::before{background:var(--ydk)}.ks-tl__item--y .ks-label{color:var(--ydk)}
.ks-tl__item--mid .ks-tl__body::before{background:#7A7470}.ks-tl__item--mid .ks-label{color:#7A7470}   /* fix #16 */
.ks-tl__body .ks-label{margin-bottom:8px;display:block}
.ks-tl__body h3{margin-bottom:.4em;white-space:normal;overflow-wrap:break-word}   /* fix #33 */
.ks-tl__body p{color:var(--muted);max-width:560px}

/* points — the 3px left rule list */
.ks-points{display:flex;flex-direction:column;gap:min(4vh,32px)}
.ks-point{border-left:3px solid var(--line2);padding-left:20px}
.ks-point--accent{border-left-color:var(--tdk)}
.ks-point--o{border-left-color:var(--o)}
.ks-point h4{margin-bottom:.35em}
.ks-point p{color:var(--muted);margin:0}
.ks-sec--teal .ks-point,.ks-sec--charcoal .ks-point{border-left-color:rgba(255,255,255,.2)}

/* framework steps (DEFINE → INVEST → ENGINEER → MEASURE + REDIRECT) */
.ks-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ks-step{padding:min(5vh,44px) 24px min(5vh,44px) 0;border-left:1px solid var(--hair);padding-left:24px}
.ks-step:first-child{border-left:0;padding-left:0}
.ks-step__num{font-family:var(--fm);font-size:var(--fs-label);letter-spacing:.14em;color:var(--tdk);margin-bottom:14px;display:block}
.ks-step h3{margin-bottom:.4em}
.ks-step p{color:var(--muted);margin:0}

/* ============================================================
   8. CARDS — featured / download / talk / speaking strip
   ============================================================ */
.ks-feat{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(12,12,12,.08)}
.ks-feat__main{position:relative;overflow:hidden;padding:min(8vh,64px) min(5vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:min(4vh,36px)}
.ks-feat__main > *{position:relative;z-index:1}
.ks-feat__main .ks-ghost{font-size:28vh;top:auto;bottom:-4vh;right:-2vw;color:rgba(0,0,0,.1)}
.ks-feat__main h2{font-size:clamp(2.4rem,4.5vw,4.2rem)}
.ks-feat__main p{color:var(--muted);max-width:420px}
.ks-feat__side{background:var(--cr);padding:min(8vh,64px) min(5vw,44px);display:flex;flex-direction:column;gap:min(3.5vh,28px);--fg:var(--blk);--muted:var(--mid);--rule:var(--mid)}
.ks-feat__side .ks-point p{font-size:1rem}

.ks-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.ks-card{border:1px solid rgba(12,12,12,.1);background:var(--wh);padding:min(5vh,40px) min(3vw,32px);display:flex;flex-direction:column;gap:14px}
.ks-card h3{font-size:var(--fs-h4);font-weight:900;line-height:1.1}
.ks-card p{color:var(--muted);margin:0;font-size:1rem}
.ks-card__meta{font-family:var(--fm);font-size:.8rem;letter-spacing:calc(.1em * var(--ls-k));text-transform:var(--lbl-case);color:var(--midlt)}
.ks-card .wp-block-buttons{margin-top:auto;padding-top:8px}
.ks-card--featured{border-color:var(--tdk);border-width:1px 1px 1px 3px}

/* speaking strip — SPEAK ON 01–05 */
.ks-speak{background:var(--cr);padding:min(8vh,64px) min(6vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:min(8vw,72px);align-items:center}
.ks-speak h2{font-size:clamp(2.2rem,4.5vw,4rem);margin-bottom:.4em}
.ks-speak p{color:var(--muted)}
.ks-speak__list{display:flex;flex-direction:column}
.ks-speak__item{display:flex;gap:16px;align-items:flex-start;padding:min(2vh,16px) 0;border-top:1px solid rgba(12,12,12,.08)}
.ks-speak__item:first-child{border-top:0;padding-top:0}
.ks-speak__cat{font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.14em * var(--ls-k));text-transform:var(--lbl-case);color:var(--o);flex-shrink:0;width:min(10vw,110px);padding-top:4px}
.ks-speak__what{font-family:var(--fh);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.35rem);text-transform:var(--ui-case);color:var(--blk);line-height:1.2}

/* quote */
.ks-quote{border-left:3px solid var(--o);padding-left:24px;max-width:720px}
.ks-quote p:first-child{font-size:var(--fs-lead);line-height:1.45;color:var(--fg);letter-spacing:.03em}
.ks-quote__cite,.ks-quote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted)}

/* ============================================================
   8b. PROOF — testimonials, the logo wall, click-to-load video
   ============================================================ */

/* testimonial strip — a plain scroller without JavaScript, arrows and a counter with it */
.ks-says{margin:0}
.ks-says__rail{display:flex;gap:min(6vw,56px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.ks-says__rail::-webkit-scrollbar{display:none}
.ks-says__item{flex:0 0 100%;scroll-snap-align:start;margin:0;max-width:880px;border-left:3px solid var(--o);padding-left:min(4vw,32px)}
.ks-says__item blockquote{margin:0;padding:0;border:0}
.ks-says__item blockquote p{margin:0;font-family:var(--fh);font-weight:400;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.3;letter-spacing:.02em;color:var(--fg)}
.ks-says__item blockquote p::before{content:"\201C"}
.ks-says__item blockquote p::after{content:"\201D"}
.ks-says__item figcaption{margin-top:min(3vh,22px);font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted)}
.ks-says__nav{display:flex;align-items:center;gap:18px;margin-top:min(4vh,32px)}
.ks-says__arrow{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid var(--rule);color:var(--fg);width:44px;height:44px;font-size:1.05rem;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ks-says__arrow:hover:not(:disabled),.ks-says__arrow:focus-visible:not(:disabled){background:var(--o);border-color:var(--o);color:var(--wh)}
.ks-says__arrow:disabled{opacity:.3;cursor:default}
.ks-says__count{margin:0;font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.14em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted)}
.ks-says--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:min(5vw,44px)}
.ks-says--grid .ks-says__item{flex:none;max-width:none}
.ks-says--grid .ks-says__item blockquote p{font-size:var(--fs-lead);line-height:1.45}

/* logo wall — greyed back, because it is evidence, not advertising */
.ks-logos__head{margin-bottom:min(4vh,32px)}
.ks-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:min(5vh,40px) min(4vw,44px);align-items:center}
.ks-logos__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:64px}
.ks-logos__item a{display:block;line-height:0}
.ks-logos__img{max-width:100%;max-height:68px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.7;transition:filter .2s,opacity .2s}
.ks-logos__item:hover .ks-logos__img,.ks-logos__item:focus-within .ks-logos__img{filter:grayscale(0);opacity:1}
.ks-logos--colour .ks-logos__img{filter:none;opacity:1}
.ks-logos__name{font-family:var(--fh);font-weight:800;text-transform:var(--ui-case);letter-spacing:calc(.06em * var(--ls-k));font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.15;color:var(--fg);opacity:.78}
.ks-logos__note{font-family:var(--fm);font-size:.72rem;letter-spacing:calc(.1em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted);line-height:1.35}

/* YouTube that is only a picture until it is clicked */
.ks-yt{position:relative;display:block;width:100%;aspect-ratio:16 / 9;background:var(--blk);overflow:hidden}
.ks-yt img,.ks-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ks-yt__still{object-fit:cover}
.ks-yt__btn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer}
.ks-yt__btn svg{width:min(18%,88px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));transition:transform .15s}
.ks-yt__bg{fill:rgba(12,12,12,.76);transition:fill .15s}
.ks-yt__tri{fill:#FCFCFB}
.ks-yt__btn:hover .ks-yt__bg,.ks-yt__btn:focus-visible .ks-yt__bg{fill:var(--o)}
.ks-yt__btn:hover svg{transform:scale(1.06)}
.ks-yt__na{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#FCFCFB;font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case)}

/* a plain email link with a subject line already on it */
.ks-mailto{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--o)}
.ks-mailto:hover{color:var(--o)}

/* ============================================================
   9. CLOSE SECTIONS + EMAIL CAPTURE
   ============================================================ */
.ks-close .ks-wrap{display:flex;align-items:center;justify-content:space-between;gap:min(6vw,52px);flex-wrap:wrap}
.ks-close__copy{max-width:640px}
.ks-close__copy h2{font-size:clamp(3rem,6.5vw,6rem);line-height:.84;letter-spacing:0;margin-bottom:0}
.ks-close__copy p{color:var(--muted);max-width:500px;padding-top:24px;margin:0}   /* fix #31 */
.ks-close__copy p + p{padding-top:12px}
.ks-close .ks-actions{margin-top:0}

.ks-capture{display:grid;grid-template-columns:1fr 1fr;gap:min(8vw,72px);align-items:center}
.ks-capture__form{position:relative;z-index:1}
.ks-substack{width:100%;max-width:480px;height:320px;border:0;background:transparent;display:block}
.ks-capture__note{margin-top:14px;font-size:.95rem;color:var(--muted)}


/* subscribe page + misc */
.ks-sub{min-height:calc(100vh - 160px);display:flex;align-items:center}
.ks-sub h1{font-size:var(--fs-h2);margin-bottom:.4em}
.ks-sub__photo{margin-bottom:min(4vh,32px)}
.ks-sub__photo img{width:140px;height:140px;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.05)}
.ks-portrait{margin:0}
.ks-portrait img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.05)}

/* landing-page blocks (patterns: Krissie Steen — landing page blocks) */
.ks-split.is-style-ks-flip > :first-child{order:2}                     /* picture on the left */
.ks-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.ks-gallery figure{margin:0}
.ks-gallery img{width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;display:block}
.ks-video{margin:0}
.ks-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:min(5vw,44px)}
.ks-video-card{display:flex;flex-direction:column;gap:12px}
.ks-video-card figure{margin:0}
.ks-video-card h3{font-size:var(--fs-h4);font-weight:900;line-height:1.15}
.ks-video-card p{color:var(--muted);margin:0;font-size:1rem}
/* an empty embed in the editor still needs a box to click */
.ks-video-card .wp-block-embed__wrapper:empty{min-height:0;aspect-ratio:16 / 9;background:rgba(12,12,12,.08);display:block}
.ks-card .ks-dl__price{font-family:var(--fh);font-weight:900;font-size:var(--fs-h3);line-height:1;color:var(--blk);margin:0}   /* beats .ks-card p */
.ks-dl--paid{border-left-color:var(--ydk)}
.ks-dl--open{border-left-color:var(--mid)}
.ks-faq{display:grid;gap:min(4vh,32px);max-width:820px}
.ks-faq__q{font-family:var(--fh);font-weight:900;font-size:var(--fs-h4);line-height:1.2;margin:0 0 8px;text-transform:none}
.ks-faq__a{margin:0;color:var(--muted)}
.ks-header__back{margin:0 0 0 auto}
.ks-header__back .ks-more{color:var(--lt);font-size:.9rem}
.ks-header__back .ks-more:hover{color:var(--onwh)}
.ks-capture__alt{margin-top:18px}
.ks-capture__pending .ks-ph{margin-top:0}
.ks-form-wrap{min-width:0}
.ks-hero--nomedia .ks-hero__body{padding-top:min(6vh,48px)}

/* ============================================================
   10. FORMS — the written enquiry form (Fluent Forms + static markup)
   ============================================================ */
.ks-form{display:flex;flex-direction:column;gap:min(2.6vh,22px)}
.ks-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ks-form__ok{padding:min(4vh,32px) 0}
.ks-form__err{background:var(--o);color:var(--wh);padding:12px 16px;font-weight:700;margin:0 0 20px}
.ks-footer__ack{display:block;margin-top:6px;opacity:.7}
.ks-form label,.fluentform .ff-el-input--label label{display:block;font-family:var(--fh);font-weight:700;font-size:.8rem;letter-spacing:calc(.13em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted);margin-bottom:8px}
.ks-form input:not([type=submit]):not([type=checkbox]),.ks-form textarea,.ks-form select,
.fluentform .ff-el-form-control{
  width:100%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);border-radius:0!important;  /* fix #24 */
  color:var(--fg);padding:14px 16px;font-family:var(--fb);font-size:var(--fs-body);letter-spacing:calc(var(--fb-ls) * .6);
  outline:none;transition:border-color .15s;box-shadow:none;
}
.ks-form input:focus,.ks-form textarea:focus,.ks-form input:active,.ks-form textarea:active,
.fluentform .ff-el-form-control:focus{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.1)}
.ks-form ::placeholder,.fluentform ::placeholder{color:rgba(255,255,255,.4)}
.ks-form textarea{min-height:140px;resize:vertical}
.ks-form .ks-btn,.fluentform .ff-btn-submit{background:var(--y)!important;color:var(--blk)!important;border-color:var(--y)!important;font-family:var(--fh)!important;font-weight:600!important;font-size:var(--fs-ui)!important;letter-spacing:calc(.14rem * var(--ls-k))!important;text-transform:var(--ui-case)!important;padding:12px 24px!important;border-radius:0!important;min-height:48px}
.ks-form .ks-btn:hover,.fluentform .ff-btn-submit:hover{background:var(--blk)!important;color:var(--y)!important;border-color:var(--blk)!important}
/* on a yellow section the yellow form button vanished (Home close, time-as-a-weapon sign-up): charcoal there */
.ks-sec--yellow .ks-form .ks-btn{background:var(--blk)!important;color:var(--y)!important;border-color:var(--blk)!important}
.ks-sec--yellow .ks-form .ks-btn:hover{background:var(--wh)!important;color:var(--blk)!important;border-color:var(--blk)!important}
.ks-sec--cream .ks-form input,.ks-sec--cream .ks-form textarea,.ks-sec--cream .fluentform .ff-el-form-control{background:var(--wh);border-color:rgba(12,12,12,.25);color:var(--blk)}
.ks-sec--cream .ks-form ::placeholder{color:rgba(12,12,12,.4)}
.ks-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ks-form small{font-size:.9rem;color:var(--muted)}

/* the built-in email-list form (inc/signups.php) and the workbook download card */
.ks-join-wrap{min-width:0}
.ks-join__row{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}
.ks-join .ks-btn{align-self:start;width:fit-content}
.ks-workbook{gap:12px}
.ks-workbook h3{font-size:var(--fs-h3)}
.ks-workbook__ask{color:var(--mid);font-size:1rem}
/* the card is white, so its form fields need dark text — the default fields sit on dark sections */
.ks-card .ks-form{gap:14px}
.ks-card .ks-form input:not([type=submit]){background:var(--ow);border-color:rgba(12,12,12,.25);color:var(--blk)}
.ks-card .ks-form input:focus{border-color:var(--tdk);background:var(--wh)}
.ks-card .ks-form ::placeholder{color:rgba(12,12,12,.4)}
.ks-card .ks-form label{color:var(--mid)}
.ks-card .ks-form__ok{padding:0;color:var(--tdk);font-weight:700}
.ks-card .ks-capture__note{margin-top:10px}
.ks-contact-line{font-family:var(--fh);font-weight:700;font-size:clamp(1rem,1.8vw,1.35rem);text-transform:var(--ui-case);color:var(--muted);margin:0 0 4px;letter-spacing:calc(.06em * var(--ls-k))}
.ks-contact-email{font-family:var(--fh);font-weight:900;font-size:clamp(1.3rem,2.4vw,1.9rem);text-transform:var(--ui-case);color:var(--t);text-decoration:none;letter-spacing:0;overflow-wrap:anywhere}
.ks-contact-email:hover{color:var(--y)}
.ks-sec--cream .ks-contact-email{color:var(--tdk)}

/* ============================================================
   11. FOOTER
   ============================================================ */
.ks-footer{background:var(--blk);color:var(--lt);padding:min(8vh,64px) var(--gut) min(5vh,40px);border-top:1px solid rgba(255,255,255,.05)}
.ks-footer__in{max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.ks-footer__logo img,.ks-footer .wp-block-site-logo img{height:30px;width:auto;opacity:.85}   /* fix #30 */
.ks-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.ks-footer__nav a,.ks-footer .wp-block-navigation-item__content{font-family:var(--fh);font-weight:700;font-size:var(--fs-ui);letter-spacing:calc(.14rem * var(--ls-k));text-transform:var(--ui-case);color:var(--lt);text-decoration:none;transition:color .15s}   /* fix #1 */
.ks-footer__nav a:hover,.ks-footer .wp-block-navigation-item__content:hover{color:var(--onwh)}
.ks-footer .wp-block-navigation__container{justify-content:center;gap:10px 26px}
.ks-footer__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:1rem;letter-spacing:.06em}
.ks-footer__contact a{color:var(--t);text-decoration:none}
.ks-footer__contact a:hover{color:var(--tlt)}
.ks-footer__join{margin-top:6px}
.ks-footer__copy{margin:8px 0 0;font-size:.9rem;letter-spacing:calc(.08em * var(--ls-k));text-transform:var(--lbl-case);color:#8A8680}
.ks-footer--min{padding:min(5vh,40px) var(--gut)}
.ks-footer--min .ks-footer__in{gap:14px}

/* ============================================================
   12. PLACEHOLDERS — prompts, not blank boxes. Delete when filled.
   ============================================================ */
.ks-ph{
  display:block;border:1.5px dashed rgba(250,114,25,.75);background:rgba(250,114,25,.08);
  color:var(--odk);padding:16px 18px;margin:12px 0;
  font-family:var(--fb);font-size:1.05rem;font-weight:400;line-height:1.5;letter-spacing:calc(var(--fb-ls) * .6);text-transform:none;
  max-width:680px;
}
.ks-ph::before{content:'✏️  ';}
.ks-ph--img{min-height:240px;display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:4/5;max-width:100%}
.ks-ph--wide{aspect-ratio:16/9;min-height:200px}
.ks-sec--teal .ks-ph,.ks-sec--charcoal .ks-ph,.ks-sec--black .ks-ph,.ks-sec--orange .ks-ph{color:#FFD9BC;border-color:rgba(255,217,188,.7);background:rgba(0,0,0,.18)}
.ks-sec--yellow .ks-ph{background:rgba(255,255,255,.35)}

/* ============================================================
   13. POSTS (Writing — drafts for later)
   ============================================================ */
.ks-post{max-width:720px;margin:0 auto}
.ks-post .entry-content p{color:var(--mid)}
.ks-post .entry-content h2{font-size:var(--fs-h3);margin:1.4em 0 .5em}
.ks-post .entry-content h3{font-size:var(--fs-h4);margin:1.2em 0 .4em}
.ks-post__meta{font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case);color:var(--mid);margin-bottom:24px}
.ks-archive .wp-block-post-template{display:flex;flex-direction:column}
.ks-archive .wp-block-post{padding:min(4.5vh,40px) 0;border-top:1px solid var(--hair)}
.ks-archive .wp-block-post:last-child{border-bottom:1px solid var(--hair)}
.ks-archive .wp-block-post-title{font-size:var(--fs-h3)}
.ks-archive .wp-block-post-title a{text-decoration:none}
.ks-archive .wp-block-post-excerpt__excerpt{color:var(--mid)}

/* ============================================================
   14. MOTION
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   14b. ROTATING LINE — Appearance → Site settings → Rotating line.
   Any page (ticked there), any bar colour, any text colour. The three custom
   properties are written onto the <section> by inc/rotate.php.
   ============================================================ */
.ks-rotate-sec{
  padding-top:min(10vh,88px);padding-bottom:min(10vh,88px);
  background:var(--ks-rb,#141210);
  --fg:var(--ks-rt,#FCFCFB);
  --muted:var(--ks-rt,#FCFCFB);
  color:var(--ks-rt,#FCFCFB);
}
.ks-rotate{
  font-family:var(--fh);font-weight:var(--h-weight);font-size:clamp(2.2rem,4.6vw,4.2rem);
  line-height:1.05;letter-spacing:.005em;text-transform:none;color:inherit;max-width:1000px;margin:0;
}
.ks-rotate__w{display:inline-block;color:var(--ks-rw,var(--t));position:relative;white-space:nowrap}
.ks-rotate__t{display:inline-block;transition:opacity .7s ease-in-out,transform .7s ease-in-out}   /* gentle crossfade (Krissie, 21 Sep) */
.ks-rotate__t.is-out{opacity:0;transform:translateY(.12em)}
/* "cycle" starts on the chosen colour and rotate.js moves it through teal → orange → yellow,
   one logo colour per word (Krissie, 21 Sep). */
.ks-rotate__w--cycle{color:var(--ks-rw,var(--t))}
@media (prefers-reduced-motion:reduce){.ks-rotate__t{transition:none}}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  /* heroes stack: the panel drops back under the words, full-bleed, and fades into the colour */
  .ks-hero .ks-wrap{position:relative;grid-template-columns:1fr;min-height:0}
  .ks-hero__body{max-width:none;padding-bottom:min(6vh,48px)}
  .ks-hero__media{position:relative;top:auto;right:auto;bottom:auto;width:calc(100% + 2 * var(--gut));max-width:none;margin:0 calc(-1 * var(--gut));aspect-ratio:4 / 3}
  .ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__media{width:calc(100% + 2 * var(--gut))}
  .ks-hero__media img{-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 14%);mask-image:linear-gradient(to top,transparent 0%,#000 14%)}   /* fix #15 */
  .ks-hero--product .ks-hero__media{width:100%;max-width:520px;margin:0;aspect-ratio:auto;padding-bottom:min(6vh,40px)}
  /* stacked bleed hero: the words get the full width back (the desktop cap is a share of the screen and crushed the paragraph on phones) */
  .ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__body .ks-lead,
  .ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__body .ks-ph{max-width:560px}
  .ks-hero.is-style-ks-bleed:not(.ks-hero--product) .ks-hero__body{padding-bottom:min(4vh,32px)}   /* stacked: the photo follows the buttons, no desktop gap */
  /* stacked cut-out: centred, taller frame, standing on the section's bottom edge, no fade */
  .ks-hero.is-style-ks-bleed .ks-hero__media.ks-hero__media--cutout{aspect-ratio:4 / 5;max-height:80vh}
  .ks-hero.is-style-ks-bleed .ks-hero__media.ks-hero__media--cutout img{object-position:center bottom;-webkit-mask-image:none;mask-image:none}
  .ks-hero__foot::before{display:none}
  .ks-split,.ks-capture,.ks-speak,.ks-feat{grid-template-columns:1fr}
  .ks-split.is-style-ks-flip > :first-child{order:0}   /* stacked: words first, always */
  .ks-steps{grid-template-columns:1fr 1fr}
  .ks-step:nth-child(3){border-left:0;padding-left:0}
  .ks-step:nth-child(n+3){border-top:1px solid var(--hair)}
  .ks-nav .wp-block-navigation__container{gap:18px}
}
@media (max-width:999px){
  .ks-header__bar{gap:14px}
  .ks-nav__cta .wp-block-button__link{padding:8px 14px;font-size:.9rem;letter-spacing:.1rem}
}
@media (max-width:640px){
  .ks-logo--full{display:none}
  .ks-logo--mark{display:flex}        /* fix #29 — mark only on mobile */
}
@media (max-width:767px){
  :root{--sec:min(9vh,64px);--nav-h:58px}
  .ks-sec--stripe-o{border-left-width:4px}
  .ks-proof{grid-template-columns:1fr 1fr}
  .ks-proof__item{padding:20px 12px 24px 16px}
  .ks-proof__item:nth-child(odd){border-left:0;padding-left:0}
  .ks-proof__item:nth-child(n+3){border-top:1px solid var(--hair)}
  .ks-row{grid-template-columns:40px 1fr 24px;gap:14px;padding:26px 0}
  .ks-row--static{grid-template-columns:40px 1fr}
  .ks-tl__item{grid-template-columns:56px 1fr;gap:0 16px}
  .ks-tl__body{padding-left:28px}
  .ks-steps{grid-template-columns:1fr}
  .ks-step{border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .ks-step:first-child{border-top:0}
  .ks-close .ks-wrap{flex-direction:column;align-items:stretch}
  .ks-actions{min-width:0;width:100%}
  .ks-form__row,.ks-join__row{grid-template-columns:1fr}
  .ks-feat__main,.ks-feat__side,.ks-speak{padding-left:20px;padding-right:20px}
  .ks-speak__cat{width:90px}
  .ks-footer__nav{gap:8px 18px}
  .ks-substack{height:300px}
  .ks-says__arrow{width:40px;height:40px}
  .ks-says__nav{gap:14px}
  .ks-logos{grid-template-columns:repeat(auto-fill,minmax(min(100%,118px),1fr));gap:28px 24px}
  .ks-logos__img{max-height:52px}
}
@media (max-width:420px){
  h1{font-size:clamp(3rem,15vw,4.25rem)}
}

/* ============================================================
   15b. SPEAKING DATES · OFFERS · THE FACTS PAGE · SEARCH  (v3.4)
   ============================================================ */

/* speaking dates — the date is the thing, so it is given its own column */
.ks-talks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ks-talk{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:min(4vw,40px);padding:min(4.5vh,38px) 0;border-top:1px solid var(--hair)}
.ks-talk:first-child{border-top:0;padding-top:0}
.ks-talk__when{margin:0;font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted);line-height:1.4}
.ks-talk__flag{display:block;margin-top:6px;color:var(--o);font-weight:700}
.ks-talk--next .ks-talk__when{color:var(--fg)}
.ks-talk__body{min-width:0}
.ks-talk__kind{margin:0 0 6px;font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.14em * var(--ls-k));text-transform:var(--lbl-case);color:var(--o)}
.ks-talk__title{font-size:var(--fs-h3);line-height:1.1;margin:0 0 8px}
.ks-talk__title a{text-decoration:none;transition:color .15s}
.ks-talk__title a:hover{color:var(--tdk)}
.ks-talk__where{margin:0 0 8px;font-weight:600;color:var(--fg)}
.ks-talk__desc{margin:0;color:var(--muted)}
.ks-talks__none{color:var(--muted);font-style:italic}

/* offers — cards, because they are compared against each other */
.ks-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:min(3vw,28px);margin:min(4vh,32px) 0 0}
.ks-offer{border:1px solid var(--hair);background:var(--wh);padding:min(5vh,40px) min(3vw,32px);display:flex;flex-direction:column;gap:12px}
.ks-offer__title{font-size:var(--fs-h4);line-height:1.15;margin:0}
.ks-offer__line{margin:0;color:var(--muted)}
.ks-offer__price{margin:0;font-family:var(--fh);font-weight:900;font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1;color:var(--tdk);letter-spacing:0}
.ks-offer__includes{color:var(--muted);font-size:1rem}
.ks-offer__includes ul{margin:0;padding-left:1.1em}
.ks-offer__includes p{margin:0 0 .5em}
.ks-offer__btn{margin-top:auto;padding-top:8px}
.ks-sec--charcoal .ks-offer,.ks-sec--black .ks-offer{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.ks-sec--charcoal .ks-offer__price,.ks-sec--black .ks-offer__price{color:var(--y)}

/* the facts page — plain on purpose. It is written to be copied from, not admired. */
.ks-facts{max-width:820px}
.ks-facts h2{font-size:var(--fs-h3);margin:min(6vh,52px) 0 min(1.6vh,14px)}
.ks-facts h2:first-child{margin-top:0}
.ks-facts ul{margin:0;padding-left:1.15em;color:var(--fg)}
.ks-facts li{margin:0 0 .5em}
.ks-facts li:last-child{margin-bottom:0}
.ks-facts__note{border-left:3px solid var(--o);padding-left:20px;color:var(--muted);font-size:1rem}
.ks-facts .ks-talks,.ks-facts .ks-offers{margin-top:min(2.5vh,20px)}

/* search box on the results page */
.ks-searchform{margin-top:min(3vh,24px);max-width:560px}
.ks-searchform .wp-block-search__input{border:1.5px solid var(--hair);border-radius:0;padding:13px 16px;font-family:var(--fb);font-size:var(--fs-body);background:var(--wh);color:var(--blk)}
.ks-searchform .wp-block-search__input:focus{outline:2px solid var(--tdk);outline-offset:1px}
.ks-searchform .wp-block-search__button{border-radius:0;border:0;background:var(--tdk);color:var(--onwh);font-family:var(--fh);font-weight:600;letter-spacing:calc(.14rem * var(--ls-k));text-transform:var(--ui-case);padding:13px 22px;margin-left:0}
.ks-searchform .wp-block-search__button:hover{background:var(--blk)}

@media (max-width:760px){
  .ks-talk{grid-template-columns:1fr;gap:10px}
  .ks-talk__when{order:-1}
  .ks-talk__flag{display:inline;margin:0 0 0 10px}
}

/* ============================================================
   16. EDITOR — keep the canvas close to the front end
   ============================================================ */
.editor-styles-wrapper{background:var(--ow)}
.editor-styles-wrapper .ks-hero .ks-wrap{min-height:0}

/* ============================================================
   v3.6 — the talk landing page, /ask, sheet cards, three-step framework
   ============================================================ */
.ks-coreline{font-size:1.05rem;line-height:1.5;color:var(--fg);max-width:560px;margin:0 0 min(5vh,40px);padding-left:16px;border-left:3px solid var(--blk)}
.ks-coreline strong{display:block;margin-top:6px;font-family:var(--fh);font-weight:700;letter-spacing:calc(.08em * var(--ls-k));text-transform:uppercase}
.ks-cards--sheets{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.ks-cards--sheets .ks-card{padding:18px 18px 22px;gap:10px}
.ks-cards--sheets .ks-card h3{font-size:1.3rem;line-height:1.1}
.ks-cards--sheets .ks-card p{font-size:.98rem}
.ks-dl__thumb{width:100%;height:auto;aspect-ratio:421 / 298;object-fit:cover;object-position:top;border:1px solid rgba(12,12,12,.12);display:block;margin-bottom:4px;background:var(--wh)}
.ks-dl__lock{font-family:var(--fh);font-weight:700;font-size:.82rem;letter-spacing:calc(.08em * var(--ls-k));text-transform:uppercase;color:var(--tdk);text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;margin-top:auto}
.ks-dl__lock:hover{color:var(--blk)}
.ks-join__row--one{grid-template-columns:1fr}
.ks-smallnote{font-size:.95rem;color:var(--muted);margin-top:4px}
.ks-smallnote a{color:var(--tdk)}
.ks-next__list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:10px;font-size:1.15rem;font-weight:600;color:var(--fg)}
.ks-tag{display:inline-block;font-family:var(--fh);font-weight:600;font-size:.68rem;letter-spacing:calc(.12em * var(--ls-k));text-transform:uppercase;color:var(--muted);border:1px solid var(--hair);padding:3px 8px;margin-left:8px;vertical-align:middle}
.ks-else__list{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.ks-else__list li{border-bottom:1px solid var(--hair);padding:16px 0;font-size:1.15rem;margin:0}
.ks-else__list a{color:var(--fg);text-decoration:none;display:block}
.ks-else__list a:hover{color:var(--tdk)}
.ks-steps--3{grid-template-columns:repeat(3,1fr)}
/* /ask */
.ks-askpage__in{max-width:720px}
.ks-ask__topics{border:0;padding:0;margin:0 0 8px;min-width:0;display:flex;flex-direction:column;gap:0}
.ks-ask__topics legend{font-family:var(--fh);font-weight:700;font-size:.8rem;letter-spacing:calc(.13em * var(--ls-k));text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding:0}
.ks-check{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair);font-size:1.1rem;color:var(--fg);cursor:pointer;min-height:52px;margin:0}
.ks-form label.ks-check{font-family:inherit;font-weight:400;font-size:1.1rem;letter-spacing:0;text-transform:none;color:var(--fg)}
.ks-check input[type=checkbox]{width:26px;height:26px;flex:none;accent-color:var(--tdk);margin:0;cursor:pointer}
.ks-check--other{flex-direction:column;align-items:stretch;gap:8px;cursor:default}
.ks-check__label{font-family:var(--fh);font-weight:700;font-size:.8rem;letter-spacing:calc(.13em * var(--ls-k));text-transform:uppercase;color:var(--muted)}
.ks-askform .ks-btn{align-self:flex-start;min-width:180px}
.ks-ask .ks-form__ok .wp-block-buttons{margin-top:20px}
@media (max-width:720px){.ks-steps--3{grid-template-columns:1fr}.ks-cards--sheets{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ks-cards--sheets{grid-template-columns:1fr}}
.ks-cards > p:empty,.ks-cards > br,.ks-cards--sheets > :not(.ks-card){display:none}   /* wpautop wraps shortcode output in empty paragraphs; they must not take grid cells */
.ks-loopline{margin:min(4vh,28px) 0 0;max-width:620px;color:var(--muted);font-size:1.05rem}
.ks-oneaction{margin:min(4vh,28px) 0 0;padding-left:16px;border-left:3px solid var(--tdk);font-size:1.1rem;color:var(--fg);max-width:560px}
.ks-idea__img{margin:0}.ks-idea__img img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.ks-events{list-style:none;padding:0;margin:0 0 min(4vh,32px);font-size:1.15rem;color:var(--fg)}
.ks-events li{padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0}
.ks-creds{list-style:none;padding:0;margin:min(4vh,28px) 0 0;border-top:1px solid var(--hair)}
.ks-creds li{padding:10px 0;border-bottom:1px solid var(--hair);color:var(--fg);font-size:1rem;margin:0}
.ks-who .ks-portrait img{aspect-ratio:3 / 4}
/* Who I am photo smaller, not dominant (Krissie, 17 Oct): picture column ~38%, capped at 400px; the words get the room */
.ks-who .ks-split.is-style-ks-flip{grid-template-columns:minmax(0,4fr) minmax(0,6.5fr)}
.ks-who .ks-portrait{max-width:400px}
@media (max-width:1024px){
  .ks-who .ks-split.is-style-ks-flip{grid-template-columns:1fr}
  .ks-who .ks-portrait{max-width:300px}
}
body.ks-nomenu .ks-nav{display:none}   /* Site settings → Hide the menu */
.ks-social__ln{display:inline-flex;align-items:center;vertical-align:middle;line-height:0}
.ks-social__ln svg{width:22px;height:22px}
.ks-social__ln:hover{color:var(--y)}
.ks-sec--charcoal.ks-who p:not(.ks-eyebrow){color:rgba(255,255,255,.82)}   /* body copy on charcoal: the generic paragraph colour is near-black (Who I am is light cream since v3.8.3) */
.ks-sec--charcoal.ks-who h2{color:var(--wh)}
.ks-three{margin:0 0 min(3vh,24px) 0;padding-left:0;list-style:none;color:var(--fg);font-size:1.1rem;line-height:1.6}   /* three plain lines, no numbers (Krissie, 17 Oct) */
.ks-three li{margin:0;padding:2px 0}
.ks-points__title{margin:0 0 min(2vh,16px);font-size:1.4rem}
.ks-points__title.ks-eyebrow{font-size:var(--fs-label);margin:0}   /* "The rooms I work in" in the eyebrow style, like "Two worlds, one system" (Krissie, 17 Oct) */
.ks-speaking h3{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:min(3vh,24px)}
.ks-events{font-size:1.05rem}
.ks-speaking .ks-events{max-width:560px}   /* one column since v3.8.3: date under the heading, button under the date */
.ks-speaking{max-width:680px;margin-left:auto;margin-right:auto}   /* inset like The problem (.ks-intro--inset), same left edge (Krissie, 17 Oct) */
.ks-events li{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;padding:14px 0}
.ks-events__when{font-family:var(--fm,var(--fh));font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:150px}

/* ============================================================
   time-as-a-weapon page, Krissie's decided version (17 Oct, v3.8.3)
   ============================================================ */
.ks-hero--talk.ks-hero--nomedia .ks-wrap{min-height:0}
.ks-hero--talk .ks-hero__body{padding-top:min(10vh,88px);padding-bottom:min(8vh,64px)}
.ks-hero--talk .ks-lead{font-size:clamp(1.25rem,1vw + 1rem,1.6rem);color:var(--fg);margin-bottom:0}
.ks-get .ks-close__copy h2.ks-get__h,.ks-get h2.ks-get__h{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.08}
.ks-card__meta{font-family:var(--fm);font-size:var(--fs-label);letter-spacing:calc(.12em * var(--ls-k));text-transform:var(--lbl-case);color:var(--muted);margin:0}
.ks-nexttools__cards{max-width:820px;margin-top:min(4vh,32px)}
.ks-nexttools .ks-loopline{margin-top:min(4vh,28px)}
.ks-sec--grey .ks-smallnote,.ks-sec--grey .ks-smallnote a{color:var(--onwh)}

/* ============================================================
   v3.8.5 — Krissie's copy rewrite (19 Oct)
   ============================================================ */
/* a shortcode that prints nothing must not leave an empty paragraph between sections */
.entry-content > p:empty,.wp-block-post-content > p:empty{display:none;margin:0}

/* Home: programs and honours, under the four numbers in the charcoal band.
   v3.8.6: two columns, one item per line with hairlines (the one-line dotted run read as a mess, Krissie 19 Oct). */
.ks-honours{margin-top:min(6vh,48px);display:grid;grid-template-columns:1fr 1fr;gap:min(6vw,64px)}
.ks-honours .ks-eyebrow{margin-bottom:6px}
.ks-honours__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ks-honours__list li{margin:0;padding:12px 0;border-bottom:1px solid var(--hair);color:var(--fg);font-size:1.02rem;line-height:1.4}
@media (max-width:767px){.ks-honours{grid-template-columns:1fr;gap:min(5vh,36px)}}

/* Home: Who it's for — the closing line over the Work with me button */
.ks-points__close{margin:min(2vh,16px) 0 0;color:var(--fg);font-size:1.1rem}
/* Home: Speaking — the actor line */
.ks-speaking__line{max-width:560px;color:var(--fg);margin:0 0 min(3vh,24px)}

/* time-as-a-weapon: the forwardable one-line record */
.ks-record{font-family:var(--fh);font-weight:700;font-size:1.15rem;line-height:1.35;color:var(--fg);max-width:620px}
/* time-as-a-weapon: planner "coming soon" line */
.ks-planner__soon{margin-top:4px;color:var(--fg)}
.ks-planner__soon .ks-tag{margin-left:0;margin-right:8px}

/* download cards: a lock icon instead of the repeated sentence */
.ks-dl__lock--icon{border-bottom:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--hair);border-radius:50%;color:var(--muted)}
.ks-dl__lock--icon:hover{color:var(--blk);border-color:currentColor}

/* the cut-out photo on any hero, not only the full-bleed one (time-as-a-weapon header, Krissie 19 Oct) */
.ks-hero .ks-hero__media.ks-hero__media--cutout{width:44%}
.ks-hero .ks-hero__media.ks-hero__media--cutout img{object-fit:contain;object-position:right bottom;filter:none;mix-blend-mode:normal;opacity:1;-webkit-mask-image:none;mask-image:none}
.ks-hero--talk:not(.ks-hero--nomedia) .ks-wrap{min-height:min(76vh,640px)}
.ks-hero--talk:not(.ks-hero--nomedia) .ks-hero__body{max-width:56%}
@media (max-width:1024px){
  .ks-hero .ks-hero__media.ks-hero__media--cutout{width:calc(100% + 2 * var(--gut));aspect-ratio:4 / 5;max-height:70vh}
  .ks-hero .ks-hero__media.ks-hero__media--cutout img{object-position:center bottom}
  .ks-hero--talk:not(.ks-hero--nomedia) .ks-wrap{min-height:0}
  .ks-hero--talk:not(.ks-hero--nomedia) .ks-hero__body{max-width:none}
}

/* Home: proof band and writing band (both invisible until switched on and filled) */
.ks-proofband .ks-eyebrow,.ks-writing-band .ks-eyebrow{margin-bottom:min(3vh,24px)}
.ks-writing__cards{margin-top:min(4vh,32px)}
.ks-writing__card h3 a{color:inherit;text-decoration:none}
.ks-writing__card h3 a:hover{color:var(--tdk)}
.ks-writing__all{margin-top:min(4vh,28px)}