/*
Theme Name: Dr. Stephanie Moore MD
Theme URI: https://drstephaniemooremd.com
Description: Child theme of Kadence for Dr. Stephanie Moore MD. Site CSS lives here; business logic stays in the plugin layer.
Author: Shaun Wilson Designs
Author URI: https://shaunwilsondesigns.com
Template: kadence
Version: 1.0.0
Text Domain: stephmoore
*/

/* =========================================================================
   1. Tokens
   ====================================================================== */
:root {
	--sm-ink:        #14202E;
	--sm-ink-2:      #2A3A50;
	--sm-muted:      #55637A;
	--sm-cream:      #FBF6EF;
	--sm-cream-2:    #F4ECE0;
	--sm-white:      #FFFFFF;
	--sm-gold:       #A67C3D;   /* decorative only: rules, borders, icon fills */
	--sm-gold-dk:    #8A6430;   /* text and button fills - 4.95:1 on cream, 5.32:1 on white */
	--sm-gold-lt:    #C8A25C;
	--sm-teal:       #2E6F6B;
	--sm-rule:       #E6DACA;
	--sm-rule-dk:    rgba(255,255,255,.16);

	--sm-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--sm-sans:  "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--sm-max:   1180px;
	--sm-gut:   clamp(1.25rem, 4vw, 3rem);
	--sm-sect:  clamp(4rem, 9vw, 8rem);

	--sm-ease:  cubic-bezier(.22,.61,.36,1);
	--sm-doc:   url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203v5h5%27%2F%3E%3Cpath%20d%3D%27M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%27%2F%3E%3Cpath%20d%3D%27M12%2012.5v4.5%27%2F%3E%3Cpath%20d%3D%27m9.8%2015%202.2%202.2L14.2%2015%27%2F%3E%3C%2Fsvg%3E");
}

/* =========================================================================
   2. Base
   ====================================================================== */
html.sm-locked { overflow: hidden; }

body {
	background: var(--sm-cream);
	color: var(--sm-ink);
	font-family: var(--sm-sans);
	font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.sm-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sm-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--sm-ink); color: #fff; padding: .75rem 1.25rem;
	font: 600 .9rem/1 var(--sm-sans); border-radius: 0 0 6px 0;
}
.sm-skip:focus { left: 0; }

/* Kadence writes heading colours explicitly, so every level is overridden
   here. Inheriting a container colour is not enough. */
.sm-page h1, .sm-page h2, .sm-page h3, .sm-page h4, .sm-page h5, .sm-page h6 {
	font-family: var(--sm-serif);
	color: var(--sm-ink);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
	margin: 0;
}
.sm-page p { margin: 0 0 1.15em; text-wrap: pretty; }
.sm-page p:last-child { margin-bottom: 0; }
.sm-page a:not([class]) { color: inherit; }

.sm-i { width: 1.15em; height: 1.15em; flex: none; }

/* =========================================================================
   3. Layout primitives
   ====================================================================== */
.sm-wrap { width: 100%; max-width: var(--sm-max); margin-inline: auto; padding-inline: var(--sm-gut); }
.sm-sect { padding-block: var(--sm-sect); }
.sm-sect--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.sm-bg-cream { background: var(--sm-cream); }
.sm-bg-cream2 { background: var(--sm-cream-2); }
.sm-bg-white { background: var(--sm-white); }
.sm-bg-ink   { background: var(--sm-ink); color: #EEF1F6; }
.sm-bg-ink h2, .sm-bg-ink h3, .sm-bg-ink h4 { color: #fff; }
.sm-bg-ink p { color: #C6CEDB; }

.sm-measure { max-width: 62ch; }
.sm-center { margin-inline: auto; text-align: center; }

/* Eyebrow: small gold label with a drawn rule */
.sm-eyebrow {
	display: flex; align-items: center; gap: .75rem;
	font: 600 .74rem/1 var(--sm-sans);
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--sm-gold-dk); margin: 0 0 1.1rem;
}
.sm-eyebrow::after {
	content: ""; height: 1px; flex: 1 1 auto; background: currentColor; opacity: .45;
	transform-origin: left center;
}
/* The line only starts collapsed when there is script to draw it, and it is
   observed in its own right so it never depends on an animated ancestor. */
.sm-js .sm-eyebrow::after {
	transform: scaleX(0);
	transition: transform .9s var(--sm-ease) .1s;
}
.sm-js .sm-eyebrow.is-in::after,
.sm-js .sm-anim.is-in .sm-eyebrow::after,
.sm-js .is-in .sm-eyebrow::after { transform: scaleX(1); }
.sm-center .sm-eyebrow { justify-content: center; }
.sm-center .sm-eyebrow::after { display: none; }
.sm-bg-ink .sm-eyebrow { color: var(--sm-gold-lt); }

/* Display type scale */
.sm-d1 { font-family: var(--sm-serif); font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem); font-weight: 600; line-height: 1.04; letter-spacing: -.022em; }
.sm-d2 { font-family: var(--sm-serif); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -.018em; }
.sm-d3 { font-family: var(--sm-serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 600; line-height: 1.18; }
.sm-lead { font-size: clamp(1.1rem, 1.02rem + .38vw, 1.3rem); line-height: 1.62; color: var(--sm-ink-2); }
.sm-bg-ink .sm-lead { color: #C9D2E0; }

/* =========================================================================
   4. Buttons
   ====================================================================== */
.sm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	background: var(--sm-ink); color: #fff;
	font: 600 .95rem/1 var(--sm-sans); letter-spacing: .01em;
	padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid var(--sm-ink);
	text-decoration: none; cursor: pointer;
	transition: background .3s var(--sm-ease), color .3s var(--sm-ease), transform .3s var(--sm-ease), border-color .3s var(--sm-ease);
}
.sm-btn:hover { background: var(--sm-gold-dk); border-color: var(--sm-gold-dk); color: #fff; transform: translateY(-2px); }
.sm-btn .sm-i { transition: transform .3s var(--sm-ease); }
.sm-btn:hover .sm-i { transform: translateX(3px); }
.sm-btn--ghost { background: transparent; color: var(--sm-ink); border-color: var(--sm-rule); }
.sm-btn--ghost:hover { background: var(--sm-ink); border-color: var(--sm-ink); color: #fff; }
.sm-btn--gold { background: var(--sm-gold-dk); border-color: var(--sm-gold-dk); }
.sm-btn--gold:hover { background: #fff; color: var(--sm-ink); border-color: #fff; }
.sm-btn--sm { padding: .68rem 1.15rem; font-size: .85rem; }
.sm-btn--full { width: 100%; }
.sm-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* =========================================================================
   5. Header
   ====================================================================== */
.sm-head {
	position: sticky; top: 0; z-index: 90;
	background: rgba(251,246,239,0);
	border-bottom: 1px solid transparent;
	transition: background .35s var(--sm-ease), border-color .35s var(--sm-ease), box-shadow .35s var(--sm-ease);
}
.sm-head.is-stuck {
	background: rgba(251,246,239,.94);
	backdrop-filter: saturate(1.6) blur(12px);
	-webkit-backdrop-filter: saturate(1.6) blur(12px);
	border-bottom-color: var(--sm-rule);
	box-shadow: 0 8px 30px -22px rgba(20,32,46,.55);
}
.sm-head__inner {
	max-width: var(--sm-max); margin-inline: auto; padding: 1.1rem var(--sm-gut);
	display: flex; align-items: center; gap: 2rem;
}
.sm-head__nav { margin-left: auto; }
.sm-head__end { display: flex; align-items: center; gap: .85rem; }
.sm-head__nav + .sm-head__end { margin-left: 0; }

.sm-mark { display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none; color: var(--sm-ink); }
.sm-mark__name { font-family: var(--sm-serif); font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.sm-mark__suffix {
	font: 600 .66rem/1 var(--sm-sans); letter-spacing: .18em; text-transform: uppercase;
	color: var(--sm-gold-dk); transform: translateY(-.15em);
}
.sm-mark--light { color: #fff; }
.sm-mark--light .sm-mark__suffix { color: var(--sm-gold-lt); }

.sm-menu { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.sm-menu li { margin: 0; }
.sm-menu a {
	position: relative; text-decoration: none; color: var(--sm-ink);
	font: 500 .93rem/1 var(--sm-sans); padding-block: .4rem; display: inline-block;
}
.sm-menu a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--sm-gold); transform: scaleX(0); transform-origin: right center;
	transition: transform .4s var(--sm-ease);
}
.sm-menu a:hover::after, .sm-menu .current-menu-item > a::after { transform: scaleX(1); transform-origin: left center; }
.sm-menu .current-menu-item > a { color: var(--sm-gold-dk); }

/* 44x44 minimum touch target. The bars stay 26x14; the padding does the work. */
.sm-burger {
	display: none; background: none; border: 0; cursor: pointer; color: var(--sm-ink);
	min-width: 44px; min-height: 44px;
	align-items: center; justify-content: center;
	padding: 0;
}
.sm-burger__box { display: block; width: 26px; height: 14px; position: relative; }
.sm-burger__bar, .sm-burger__box::before, .sm-burger__box::after {
	content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
	transition: transform .35s var(--sm-ease), opacity .25s var(--sm-ease);
}
.sm-burger__box::before { top: 0; }
.sm-burger__bar { top: 6.25px; }
.sm-burger__box::after { bottom: 0; }
.sm-burger[aria-expanded="true"] .sm-burger__box::before { transform: translateY(6.25px) rotate(45deg); }
.sm-burger[aria-expanded="true"] .sm-burger__bar { opacity: 0; }
.sm-burger[aria-expanded="true"] .sm-burger__box::after { transform: translateY(-6.25px) rotate(-45deg); }

/* The burger is a <button>, so Kadence's own button styling supplies a filled
   hover background that has nothing to do with this identity. Neutralise every
   state, then let the bars take the gold on their own. Class selectors beat
   Kadence's element-level button rules. */
.sm-burger,
.sm-burger:hover,
.sm-burger:focus,
.sm-burger:focus-visible,
.sm-burger:active,
.sm-burger[aria-expanded="true"] {
	background: none;
	background-color: transparent;
	box-shadow: none;
	border: 0;
	color: var(--sm-ink);
}
.sm-burger:hover { color: var(--sm-gold); }
/* Keyboard users get a real focus ring; the pointer hover stays quiet. */
.sm-burger:focus-visible {
	color: var(--sm-gold);
	outline: 2px solid var(--sm-gold);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Drawer */
.sm-drawer {
	position: fixed; inset: 0; z-index: 89; background: var(--sm-cream);
	padding: 6rem var(--sm-gut) 2.5rem; display: flex; flex-direction: column;
	justify-content: space-between; overflow-y: auto;
}
.sm-drawer[hidden] { display: none; }
.sm-drawer__menu { list-style: none; margin: 0; padding: 0; }
.sm-drawer__menu li { border-bottom: 1px solid var(--sm-rule); }
.sm-drawer__menu a {
	display: block; padding: 1.05rem 0; text-decoration: none; color: var(--sm-ink);
	font-family: var(--sm-serif); font-size: 1.6rem; font-weight: 500;
}
.sm-drawer__foot { display: grid; gap: .9rem; padding-top: 2rem; }
.sm-drawer__link { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sm-muted); font-size: .95rem; }

/* =========================================================================
   6. Hero
   ====================================================================== */
.sm-hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) var(--sm-sect); overflow: hidden; }
.sm-hero__kicker { max-width: 20ch; }
.sm-hero__title { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 15ch; }
.sm-hero__grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sm-hero__figure { position: relative; }
.sm-hero__figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.sm-hero__figure::after {
	content: ""; position: absolute; inset: auto -14px -14px auto; width: 62%; height: 58%;
	border: 1px solid var(--sm-gold); border-radius: 4px; z-index: -1; opacity: .5;
}
.sm-hero__body > * + * { margin-top: 1.1em; }
.sm-hero__welcome { font-family: var(--sm-serif); font-size: clamp(1.35rem,1.1rem + 1vw,1.7rem); font-weight: 600; }
.sm-hero__mission {
	font-family: var(--sm-serif); font-size: clamp(1.15rem,1rem + .6vw,1.4rem);
	color: var(--sm-gold-dk); font-style: italic; border-left: 2px solid var(--sm-gold);
	padding-left: 1.1rem; margin-block: 1.4rem;
}

/* Page hero for interior pages */
.sm-phero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.sm-phero__title { max-width: 18ch; }
.sm-phero__lead { margin-top: 1.4rem; max-width: 58ch; }

/* =========================================================================
   7. Editorial rows (left label, right content) - matches client direction
   ====================================================================== */
.sm-row { display: grid; grid-template-columns: minmax(0,.3fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.sm-row + .sm-row { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--sm-rule); }
.sm-row__label { font-family: var(--sm-serif); font-size: clamp(1.35rem,1.1rem + 1vw,1.85rem); font-weight: 600; line-height: 1.15; }
.sm-row__note { display: block; font: 500 .78rem/1.4 var(--sm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sm-gold-dk); margin-top: .5rem; }

/* Credential list: role / place / dates */
.sm-cred { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.sm-cred > li { display: grid; gap: .3rem; }
.sm-cred__role { font-weight: 600; font-size: 1.02rem; color: var(--sm-ink); }
.sm-cred__org { color: var(--sm-muted); }
.sm-cred__when { font: 500 .8rem/1.4 var(--sm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sm-gold-dk); }

/* Definition-style two column list (education) */
.sm-defs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.sm-defs > li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem 1.5rem; align-items: baseline; padding-bottom: 1.35rem; border-bottom: 1px solid var(--sm-rule); }
.sm-defs > li:last-child { border-bottom: 0; padding-bottom: 0; }
.sm-defs__t { font-weight: 600; }
.sm-defs__m { color: var(--sm-muted); font-size: .95rem; grid-column: 1 / -1; }
.sm-defs__w { font: 500 .8rem/1.4 var(--sm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sm-gold-dk); white-space: nowrap; }

/* Plain marker list */
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.sm-list > li { position: relative; padding-left: 1.5rem; }
.sm-list > li::before {
	content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
	border: 1px solid var(--sm-gold); border-radius: 50%;
}
.sm-bg-ink .sm-list > li::before { border-color: var(--sm-gold-lt); }

/* =========================================================================
   8. Cards
   ====================================================================== */
.sm-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.sm-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sm-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* A stray <br> would steal a grid cell, so hide any that appear. */
.sm-grid > br, .sm-row > br, .sm-cred > br, .sm-defs > br { display: none; }

.sm-card {
	background: var(--sm-white); border: 1px solid var(--sm-rule); border-radius: 6px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: transform .4s var(--sm-ease), box-shadow .4s var(--sm-ease), border-color .4s var(--sm-ease);
}
.sm-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(20,32,46,.5); border-color: var(--sm-gold); }
.sm-card__n { font: 600 .78rem/1 var(--sm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sm-gold-dk); display: block; margin-bottom: .9rem; }
.sm-card__h { font-family: var(--sm-serif); font-size: 1.3rem; font-weight: 600; margin-bottom: .6rem; }
.sm-card__p { color: var(--sm-muted); font-size: .98rem; }
.sm-card__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--sm-ink); }
.sm-card__link .sm-i { transition: transform .3s var(--sm-ease); }
.sm-card:hover .sm-card__link .sm-i { transform: translateX(4px); }
.sm-bg-ink .sm-card { background: rgba(255,255,255,.04); border-color: var(--sm-rule-dk); }
.sm-bg-ink .sm-card:hover { border-color: var(--sm-gold-lt); }
.sm-bg-ink .sm-card__p { color: #B9C3D3; }
.sm-bg-ink .sm-card__link { color: #fff; }

/* Status chip for coming-soon items */
.sm-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	font: 600 .7rem/1 var(--sm-sans); letter-spacing: .13em; text-transform: uppercase;
	color: var(--sm-gold-dk); border: 1px solid currentColor; border-radius: 999px;
	padding: .42rem .8rem;
}
.sm-chip--live { color: var(--sm-teal); }
.sm-bg-ink .sm-chip { color: var(--sm-gold-lt); }

/* Stat band */
.sm-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem,3vw,2.5rem); }
.sm-stat__n { font-family: var(--sm-serif); font-size: clamp(2rem,1.5rem + 1.8vw,2.9rem); font-weight: 600; line-height: 1; color: #fff; }
.sm-stat__l { display: block; margin-top: .6rem; font-size: .92rem; color: #B9C3D3; }

/* Split feature: image + text */
.sm-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.sm-split--flip .sm-split__fig { order: 2; }
.sm-split__fig img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* Quote */
.sm-quote { border-left: 2px solid var(--sm-gold); padding-left: clamp(1.2rem,3vw,2rem); }
.sm-quote__t { font-family: var(--sm-serif); font-size: clamp(1.4rem,1.1rem + 1.4vw,2.1rem); font-weight: 500; font-style: italic; line-height: 1.32; }
.sm-quote__c { display: block; margin-top: 1rem; font: 600 .8rem/1 var(--sm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sm-gold-dk); }

/* Contact tiles */
.sm-contact { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,2.4vw,1.5rem); }
.sm-tile {
	display: flex; align-items: center; gap: 1rem; text-decoration: none;
	background: var(--sm-white); border: 1px solid var(--sm-rule); border-radius: 6px;
	padding: 1.4rem 1.6rem; color: var(--sm-ink);
	transition: border-color .35s var(--sm-ease), transform .35s var(--sm-ease);
}
.sm-tile:hover { border-color: var(--sm-gold); transform: translateY(-3px); }
.sm-tile .sm-i { width: 1.5rem; height: 1.5rem; color: var(--sm-gold); }
.sm-tile__l { display: block; font: 600 .74rem/1 var(--sm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sm-muted); margin-bottom: .35rem; }
.sm-tile__v { font-weight: 600; word-break: break-word; }

/* Notice */
.sm-note {
	background: var(--sm-cream-2); border-left: 3px solid var(--sm-gold);
	padding: clamp(1.1rem,2.5vw,1.6rem); border-radius: 0 4px 4px 0;
	font-size: .96rem; color: var(--sm-ink-2);
}

/* =========================================================================
   9. Footer
   ====================================================================== */
.sm-foot { background: var(--sm-ink); color: #C6CEDB; }
.sm-foot__rule { height: 2px; background: linear-gradient(90deg, var(--sm-gold), var(--sm-gold-lt), transparent); }
.sm-foot__inner {
	max-width: var(--sm-max); margin-inline: auto; padding: clamp(3rem,6vw,4.5rem) var(--sm-gut) clamp(2rem,4vw,3rem);
	display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr); gap: clamp(2rem,4vw,3.5rem);
}
.sm-foot__tag { font-family: var(--sm-serif); font-size: 1.15rem; font-style: italic; color: #D7DEE9; margin: 1rem 0 1.75rem; max-width: 26ch; }
.sm-foot__h { font: 600 .76rem/1 var(--sm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sm-gold-lt); margin: 0 0 1.2rem; }
.sm-foot__h--sp { margin-top: 2rem; }
.sm-foot__menu, .sm-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sm-foot__menu a, .sm-foot__list a { color: #C6CEDB; text-decoration: none; font-size: .96rem; display: inline-flex; align-items: center; gap: .55rem; transition: color .3s var(--sm-ease); }
.sm-foot__menu a:hover, .sm-foot__list a:hover { color: #fff; }
.sm-foot__list .sm-i { color: var(--sm-gold-lt); }
.sm-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.sm-social a {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--sm-rule-dk); color: #C6CEDB;
	transition: border-color .3s var(--sm-ease), color .3s var(--sm-ease), transform .3s var(--sm-ease);
}
.sm-social a:hover { border-color: var(--sm-gold-lt); color: #fff; transform: translateY(-2px); }
.sm-foot__legal {
	border-top: 1px solid var(--sm-rule-dk);
	max-width: var(--sm-max); margin-inline: auto; padding: clamp(1.5rem,3vw,2rem) var(--sm-gut) clamp(2rem,4vw,2.5rem);
}
.sm-foot__disc { font-size: .82rem; line-height: 1.65; color: #93A0B4; margin: 0 0 1rem; }
.sm-foot__disc strong { color: #C6CEDB; }
.sm-foot__copy { font-size: .82rem; color: #7C899D; margin: 0; }

/* =========================================================================
   10. Reveals
   ====================================================================== */
.sm-js .sm-anim { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--sm-ease), transform .8s var(--sm-ease); }
.sm-anim.is-in { opacity: 1; transform: none; }
.sm-anim--d1 { transition-delay: .08s; }
.sm-anim--d2 { transition-delay: .16s; }
.sm-anim--d3 { transition-delay: .24s; }
/* Hero paints on load rather than waiting for a scroll event. */
.sm-js .sm-hero .sm-anim { animation: sm-rise .9s var(--sm-ease) both; opacity: 1; transform: none; transition: none; }
.sm-hero .sm-anim--d1 { animation-delay: .1s; }
.sm-hero .sm-anim--d2 { animation-delay: .2s; }
.sm-hero .sm-anim--d3 { animation-delay: .3s; }
@keyframes sm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sm-anim, .sm-hero .sm-anim { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
	.sm-eyebrow::after { transform: scaleX(1) !important; transition: none !important; }
	* { scroll-behavior: auto !important; }
}

/* =========================================================================
   11. Responsive
   ====================================================================== */
@media (max-width: 1000px) {
	.sm-head__nav { display: none; }
	.sm-burger { display: inline-flex; }
	.sm-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sm-foot__inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sm-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.sm-hero__grid { grid-template-columns: 1fr; }
	.sm-hero__figure { max-width: 420px; }
	.sm-hero__title { max-width: none; }
	.sm-split { grid-template-columns: 1fr; }
	.sm-split--flip .sm-split__fig { order: 0; }
	.sm-row { grid-template-columns: 1fr; gap: 1rem; }
	.sm-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
	.sm-grid--2, .sm-grid--3, .sm-contact { grid-template-columns: 1fr; }
	.sm-defs > li { grid-template-columns: 1fr; }
	.sm-btn__more { display: none; }
	.sm-stats { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   12. Print
   ====================================================================== */
@media print {
	.sm-head, .sm-drawer, .sm-foot__rule, .sm-btns, .sm-burger { display: none !important; }
	body { background: #fff; }
	.sm-anim { opacity: 1 !important; transform: none !important; }
	.sm-card, .sm-tile { break-inside: avoid; }
	.sm-sect { padding-block: 1.5rem; }
}

/* =========================================================================
   13. Kadence container reset
   Every page on this site is a bespoke full-bleed layout, so the theme's
   boxed content container, white entry card and inner padding are removed.
   ====================================================================== */
.content-container.site-container { max-width: none !important; padding-inline: 0 !important; }
.content-area, .site-main, .content-wrap { max-width: none !important; }
.entry.content-bg, .entry.single-entry { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.entry-content-wrap { padding: 0 !important; }
.entry-content.single-content > .sm-page { margin: 0; }
.site-main > .content-wrap > .entry { margin-bottom: 0 !important; }
.entry-header, .entry-hero-container { display: none; }

/* Keep the wordmark and the one call to action on a single line. */
.sm-mark { white-space: nowrap; flex: none; }
.sm-mark__name { white-space: nowrap; }
.sm-btn { white-space: nowrap; }
.sm-head__inner { gap: clamp(.9rem, 2vw, 1.75rem); }
@media (max-width: 1180px) { .sm-menu { gap: 1.35rem; } .sm-menu a { font-size: .88rem; } }
@media (max-width: 1060px) { .sm-btn__more { display: none; } }

/* =========================================================================
   14. Corrections found in visual review
   ====================================================================== */
/* Buttons must never inherit a section's text colour. A solid button that
   inherits navy renders navy-on-navy and disappears entirely. */
.sm-page a.sm-btn,
a.sm-btn { color: #fff; }
.sm-page a.sm-btn--ghost,
a.sm-btn--ghost { color: var(--sm-ink); }
.sm-page a.sm-btn--ghost:hover,
a.sm-btn--ghost:hover { color: #fff; }
.sm-page a.sm-btn--gold:hover,
a.sm-btn--gold:hover { color: var(--sm-ink); }
.sm-bg-ink .sm-btn--ghost { color: #fff; border-color: var(--sm-rule-dk); }
.sm-bg-ink .sm-btn--ghost:hover { background: #fff; color: var(--sm-ink); border-color: #fff; }

/* Card link sits on the bottom edge so a row of cards aligns. */
.sm-card { display: flex; flex-direction: column; }
.sm-card__p { flex: 1 1 auto; }
.sm-card__link { margin-top: auto; padding-top: 1.25rem; }
.sm-page a.sm-card__link { color: var(--sm-ink); }
.sm-bg-ink .sm-page a.sm-card__link, .sm-bg-ink a.sm-card__link { color: #fff; }

/* The hero eyebrow needs room for its rule to draw. */
.sm-hero__kicker { max-width: 34rem; }
.sm-hero__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Contact tiles and footer links are also anchors with classes. */
.sm-page a.sm-tile { color: var(--sm-ink); }

/* Nav labels stay on one line; the menu is replaced by the drawer below 1000px. */
.sm-menu a { white-space: nowrap; }
@media (max-width: 1240px) { .sm-menu { gap: 1.2rem; } }


/* =========================================================================
   15. Icons inside page content
   WordPress strips inline SVG from post content via KSES, so every icon that
   lives in a page body is drawn with a CSS mask instead.
   ====================================================================== */
.sm-card__link::after {
	content: ""; width: 1.05em; height: 1.05em; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m13%206%206%206-6%206%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m13%206%206%206-6%206%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	transition: transform .3s var(--sm-ease);
}
.sm-card:hover .sm-card__link::after { transform: translateX(4px); }

.sm-tile::before {
	content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: var(--sm-gold);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
}
.sm-tile--mail::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%2720%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%206%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%2720%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%206%209%206%209-6%27%2F%3E%3C%2Fsvg%3E"); }
.sm-tile--phone::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%203h4l2%205-2.5%201.5a12%2012%200%200%200%206%206L16%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%205a2%202%200%200%201%202-2z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%203h4l2%205-2.5%201.5a12%2012%200%200%200%206%206L16%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%205a2%202%200%200%201%202-2z%27%2F%3E%3C%2Fsvg%3E"); }

/* =========================================================================
   16. Small-screen corrections found in device testing
   ====================================================================== */
/* On a 375px phone the wordmark, the Substack button and the menu button
   together overflowed the header, pushing the menu button off screen where
   it could not be tapped. The call to action already lives in the drawer. */
@media (max-width: 700px) {
	.sm-head__inner { gap: .75rem; }
	.sm-head__end > .sm-btn { display: none; }
	.sm-head__end { margin-left: auto; }
	.sm-mark__name { font-size: 1.12rem; }
}
@media (max-width: 380px) {
	.sm-mark__name { font-size: 1rem; }
}

/* Footer collapses to a single column before its links can overflow. */
@media (max-width: 700px) {
	.sm-foot__inner { grid-template-columns: 1fr; }
	.sm-foot__tag { max-width: none; }
}

/* Nothing may push the page wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }
.sm-wrap, .sm-head__inner, .sm-foot__inner, .sm-foot__legal { min-width: 0; }
.sm-grid > *, .sm-split > *, .sm-row > * { min-width: 0; }

/* A tall portrait beside a short column reads better aligned to the top. */
.sm-split--top { align-items: start; }

/* An entry with no date in the source CV shows no date cell rather than a guess. */
.sm-defs__w:empty { display: none; }

/* =========================================================================
   17. Motion pass
   Every effect here is additive: with no JavaScript, or with reduced motion
   requested, the page renders complete and static.
   ====================================================================== */

/* Photographs wipe up and settle out of a slight overscale. */
.sm-figr { overflow: hidden; }
/* A quiet fade and lift. No clipped edge sweeping across the picture. */
.sm-js .sm-figr {
	opacity: 0; transform: translateY(16px);
	transition: opacity .95s var(--sm-ease), transform 1.05s var(--sm-ease);
}
.sm-figr.is-in { opacity: 1; transform: none; }
.sm-js .sm-figr img { transform: scale(1.035); transition: transform 1.6s var(--sm-ease); will-change: transform; }
.sm-figr.is-in img { transform: none; }
/* The hero photograph plays on load rather than waiting for a scroll. */
.sm-js .sm-hero .sm-figr { animation: sm-fadeup 1.1s var(--sm-ease) .12s both; opacity: 1; transform: none; transition: none; }
.sm-js .sm-hero .sm-figr img { animation: sm-settle 1.7s var(--sm-ease) .12s both; transition: none; transform: none; }
@keyframes sm-fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sm-settle { from { transform: scale(1.035); } to { transform: none; } }

/* Cards in a grid arrive in sequence rather than all at once. */
.sm-grid > .sm-anim:nth-child(1) { transition-delay: .00s; }
.sm-grid > .sm-anim:nth-child(2) { transition-delay: .09s; }
.sm-grid > .sm-anim:nth-child(3) { transition-delay: .18s; }
.sm-grid > .sm-anim:nth-child(4) { transition-delay: .27s; }
.sm-grid > .sm-anim:nth-child(5) { transition-delay: .36s; }
.sm-grid > .sm-anim:nth-child(6) { transition-delay: .45s; }

/* Marker lists tick in behind their heading. */
.sm-js .sm-anim.is-in .sm-list > li, .sm-js .is-in > .sm-list > li { animation: sm-rise .6s var(--sm-ease) both; }
.sm-list > li:nth-child(1) { animation-delay: .10s; }
.sm-list > li:nth-child(2) { animation-delay: .16s; }
.sm-list > li:nth-child(3) { animation-delay: .22s; }
.sm-list > li:nth-child(4) { animation-delay: .28s; }
.sm-list > li:nth-child(5) { animation-delay: .34s; }
.sm-list > li:nth-child(6) { animation-delay: .40s; }

/* The hero portrait drifts a little slower than the page. */
.sm-hero__figure { will-change: transform; }

/* The About portrait sitting in the narrow label column. */
.sm-row__fig { margin-top: 1.75rem !important; max-width: 260px; border-radius: 4px; }
@media (max-width: 860px) { .sm-row__fig { max-width: 200px; } }

/* Counters must not reflow the stat band while they run. */
.sm-stat__n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.sm-figr, .sm-hero .sm-figr { clip-path: none !important; animation: none !important; transition: none !important; }
	.sm-figr img, .sm-hero .sm-figr img { transform: none !important; animation: none !important; transition: none !important; }
	.sm-list > li { animation: none !important; }
	.sm-grid > .sm-anim { transition-delay: 0s !important; }
	.sm-hero__figure { transform: none !important; }
}

/* =========================================================================
   18. Footer legal links
   ====================================================================== */
.sm-foot__legallinks {
	list-style: none; margin: 0 0 1.4rem; padding: 0;
	display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
}
.sm-foot__legallinks a {
	color: #C6CEDB; text-decoration: none; font-size: .84rem;
	transition: color .3s var(--sm-ease);
}
.sm-foot__legallinks a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* =========================================================================
   19. Long-form legal pages
   ====================================================================== */
.sm-legal { max-width: 74ch; }
.sm-legal h2 {
	font-family: var(--sm-serif); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
	margin: 2.5rem 0 .9rem;
}
.sm-legal h2:first-child { margin-top: 0; }
.sm-legal p { margin: 0 0 1.1em; }
.sm-legal ul { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: .7rem; }
.sm-legal ul > li { position: relative; padding-left: 1.5rem; }
.sm-legal ul > li::before {
	content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
	border: 1px solid var(--sm-gold); border-radius: 50%;
}
.sm-legal__updated {
	font: 500 .8rem/1.4 var(--sm-sans); letter-spacing: .08em; text-transform: uppercase;
	color: var(--sm-gold-dk); margin-bottom: 2rem;
}


/* =========================================================================
   20. Failsafe
   The reveal states above only apply when `sm-js` is present, which is set by
   an inline script in the head. If JavaScript is blocked, errors, or never
   runs, nothing is ever hidden in the first place: the page renders complete.
   ====================================================================== */
.sm-fallback .sm-anim,
.sm-fallback .sm-figr,
.sm-fallback .sm-hero .sm-anim,
.sm-fallback .sm-hero .sm-figr {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	animation: none !important;
	transition: none !important;
}
.sm-fallback .sm-figr img,
.sm-fallback .sm-hero .sm-figr img { transform: none !important; animation: none !important; }
.sm-fallback .sm-eyebrow::after { transform: scaleX(1) !important; transition: none !important; }

/* =========================================================================
   21. Home hero, rebuilt
   A full-height editorial split: the headline gets room to breathe on the
   left, the photograph runs to the right edge of the viewport. Replaces the
   earlier layout where the last line of the headline sat on top of the image.
   ====================================================================== */
.sm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
	align-items: center;
	min-height: min(88vh, 920px);
	padding: 0;
	overflow: hidden;
	position: relative;
}
.sm-hero__lede {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	padding-right: clamp(2rem, 5vw, 4.5rem);
	padding-left: max(var(--sm-gut), calc((100vw - var(--sm-max)) / 2 + var(--sm-gut)));
}
.sm-hero__lede .sm-eyebrow { margin-bottom: 1.5rem; }

.sm-hero__title {
	font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
	line-height: 1.06;
	letter-spacing: -.022em;
	max-width: 16ch;
	margin: 0 0 clamp(1.9rem, 3.6vw, 2.75rem);
}
.sm-hero__mission {
	font-family: var(--sm-serif);
	font-size: clamp(1.15rem, 1rem + .65vw, 1.45rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--sm-gold-dk);
	border-left: 2px solid var(--sm-gold);
	padding-left: 1.15rem;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
	max-width: 34ch;
}
.sm-hero__lede .sm-btns { margin-top: 0; }

.sm-hero__media {
	position: relative;
	align-self: stretch;
	margin: 0;
	min-height: 56vh;
	background: var(--sm-cream-2);
}
.sm-hero__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 0;
}
/* A soft edge so the photograph meets the cream ground rather than butting it. */
.sm-hero__media::after {
	content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(40px, 7vw, 110px);
	background: linear-gradient(90deg, var(--sm-cream), rgba(251,246,239,0));
	pointer-events: none;
}

@media (max-width: 900px) {
	.sm-hero { grid-template-columns: 1fr; min-height: 0; }
	.sm-hero__lede {
		padding-inline: var(--sm-gut);
		padding-block: clamp(2.5rem, 8vw, 4rem) clamp(2rem, 6vw, 3rem);
	}
	.sm-hero__title { max-width: 16ch; }
	.sm-hero__media { min-height: 62vh; }
	.sm-hero__media::after { inset: 0 0 auto 0; width: auto; height: 60px;
		background: linear-gradient(180deg, var(--sm-cream), rgba(251,246,239,0)); }
}
@media (max-width: 560px) {
	.sm-hero__media { min-height: 58vh; }
	.sm-hero__title { max-width: none; }
}

/* =========================================================================
   22. Editorial Credential identity
   The name is the mark. MD and the vertical rule use the established gold.
   The outlined SVG animates once in the header and remains static everywhere
   else, including for visitors who prefer reduced motion.
   ====================================================================== */
.sm-brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.sm-brand img { height: auto; }

.sm-brand__full { display: block; line-height: 0; }
.sm-brand__svg {
	display: block;
	width: clamp(270px, 29vw, 420px);
	height: auto;
	transition: width .35s var(--sm-ease);
}
/* If the inline animations never run, the finished state is forced on. */
.sm-brand__svg.is-settled #credential-rule { stroke-dashoffset: 0 !important; animation: none !important; }
.sm-brand__svg.is-settled #wordmark,
.sm-brand__svg.is-settled #credential { opacity: 1 !important; transform: none !important; animation: none !important; }

.sm-head.is-stuck .sm-brand__svg { width: clamp(250px, 25vw, 370px); }

.sm-brand img.sm-brand__icon { display: none; width: 40px; }
/* The footer uses the static reversed production asset. */
.sm-brand--foot { display: block; }
.sm-brand__svg--foot { width: clamp(290px, 32vw, 410px); height: auto; display: block; }
.sm-brand__svg--foot #f-wordmark path { fill: #FFFFFF; }
.sm-brand__svg--foot #f-credential path { fill: #D6AE69; }
.sm-brand__svg--foot #f-credential-rule { stroke: #D6AE69; }

/* The horizontal name remains readable on compact headers. */
@media (max-width: 900px) {
	.sm-brand__full { display: block; }
	.sm-brand__svg,
	.sm-head.is-stuck .sm-brand__svg { width: clamp(210px, 62vw, 280px); }
	.sm-brand img.sm-brand__icon { display: none; }
}
@media (max-width: 380px) {
	.sm-brand__svg,
	.sm-head.is-stuck .sm-brand__svg { width: clamp(190px, 60vw, 230px); }
}

/* Studio credit. Initials only, with the full studio name in a small pill on
   hover and on keyboard focus. */
.sm-foot__swd {
	position: relative;
	color: #8FA0B8; text-decoration: none;
	font-size: .78rem; letter-spacing: .06em;
	margin-left: .35rem;
	transition: color .3s var(--sm-ease);
}
.sm-foot__swd:hover, .sm-foot__swd:focus-visible { color: var(--sm-gold-lt); }
.sm-foot__swd::after {
	content: attr(data-tip);
	position: absolute; bottom: calc(100% + 9px); left: 50%;
	transform: translate(-50%, 4px);
	background: var(--sm-cream); color: var(--sm-ink);
	font: 500 .72rem/1 var(--sm-sans); letter-spacing: .01em; white-space: nowrap;
	padding: .5rem .7rem; border-radius: 5px;
	box-shadow: 0 10px 26px -12px rgba(0,0,0,.55);
	opacity: 0; pointer-events: none;
	transition: opacity .25s var(--sm-ease), transform .25s var(--sm-ease);
}
.sm-foot__swd::before {
	content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
	transform: translate(-50%, 4px);
	border: 5px solid transparent; border-top-color: var(--sm-cream);
	opacity: 0; pointer-events: none;
	transition: opacity .25s var(--sm-ease), transform .25s var(--sm-ease);
}
.sm-foot__swd:hover::after, .sm-foot__swd:focus-visible::after,
.sm-foot__swd:hover::before, .sm-foot__swd:focus-visible::before {
	opacity: 1; transform: translate(-50%, 0);
}

/* =========================================================================
   23. Document downloads
   ====================================================================== */
.sm-dl { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.sm-dl > li { margin: 0; }
.sm-dl a {
	display: flex; align-items: center; gap: .9rem; text-decoration: none;
	background: var(--sm-white); border: 1px solid var(--sm-rule); border-radius: 6px;
	padding: 1rem 1.25rem; color: var(--sm-ink);
	transition: border-color .35s var(--sm-ease), transform .35s var(--sm-ease);
}
.sm-dl a:hover { border-color: var(--sm-gold); transform: translateY(-2px); }
.sm-bg-white .sm-dl a { background: var(--sm-cream); }
.sm-dl a::before {
	content: ""; width: 1.35rem; height: 1.35rem; flex: none; background: var(--sm-gold);
	-webkit-mask: var(--sm-doc) center / contain no-repeat;
	        mask: var(--sm-doc) center / contain no-repeat;
}
.sm-dl__t { font-weight: 600; display: block; }
.sm-dl__m { display: block; font-size: .84rem; color: var(--sm-muted); margin-top: .15rem; }
.sm-dl__go { margin-left: auto; font: 600 .78rem/1 var(--sm-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sm-gold-dk); }


/* The header is a fixed row: the mark, the menu and one call to action. It must
   never be wider than the viewport, so the button sheds its trailing words and
   the menu tightens before anything can be pushed off the edge. */
/* The header row lives inside a 1180px container regardless of screen width,
   so a wider viewport does not buy space. Measured need with the long label was
   1226px against 1180 available, which is what pushed the menu under the
   button on large monitors. The header call to action is always short; the hero
   and footer still read "Subscribe to Substack" in full. */
.sm-head .sm-btn__more { display: none; }
@media (max-width: 1240px) { .sm-menu { gap: 1.05rem; } .sm-menu a { font-size: .86rem; } }
@media (max-width: 1100px) { .sm-menu { gap: .85rem; } .sm-menu a { font-size: .82rem; } }
.sm-head__inner { overflow: hidden; }   /* last-resort guard only */
.sm-head__nav { min-width: 0; }


/* Once the menu is replaced by the drawer, nothing is left to push the menu
   button to the right edge, so it was sitting beside the logo. */
@media (max-width: 1000px) {
	/* Must match the specificity of `.sm-head__nav + .sm-head__end`, which sets
	   margin-left to 0 and would otherwise win regardless of the media query. */
	.sm-head__nav + .sm-head__end,
	.sm-head__end { margin-left: auto; }
}

/* =========================================================================
   24. Download list corrections
   Kadence styles `.entry-content ul` with two classes, which outranked the
   single-class rules here: the top margin collapsed to zero so the list ran
   into the button above it, and the theme's list indent pushed the cards in.
   The PDF label also needs to stay on one line.
   ====================================================================== */
.sm-page ul.sm-dl,
.entry-content ul.sm-dl {
	margin: 2rem 0 0;
	padding-left: 0;
	list-style: none;
}
.sm-page ul.sm-dl > li,
.entry-content ul.sm-dl > li { margin: 0; padding-left: 0; }
.sm-page ul.sm-dl > li::before { content: none; }
.sm-dl__go { white-space: nowrap; flex: none; }
.sm-dl a { gap: 1rem; }
.sm-dl__t, .sm-dl__m { min-width: 0; }

/* The marker lists have their own indent, so the theme's must not be added. */
.sm-page ul.sm-list,
.entry-content ul.sm-list { padding-left: 0; margin: 0; list-style: none; }
.sm-page ul.sm-cred, .entry-content ul.sm-cred,
.sm-page ul.sm-defs, .entry-content ul.sm-defs { padding-left: 0; margin: 0; list-style: none; }


/* The name is the part that has to be readable in the header. Tightening the
   menu spacing and the header's own vertical padding pays for a 20 per cent
   larger lockup while the header stays the same 90px tall. The measured budget
   inside the 1180px container is: mark 320 + menu 579 + button 102 + gaps 56 +
   padding 96 = 1153, leaving 27px spare. */
.sm-head__inner { padding-block: .75rem; }
@media (min-width: 1001px) { .sm-menu { gap: 1.25rem; } }

/* =========================================================================
   25. Scheduling
   The calendar is a third-party embed, so the markup carries a real link that
   works on its own and is only replaced once the widget has actually built.
   ====================================================================== */
/* Calendly draws its own card, centred, with its own surface. Wrapping that in
   a second bordered box left a ring of dead cream around a small card. The
   frame comes off and the container is sized to the card instead, so the
   calendar itself is the object on the page. */
/* Full column width. Calendly lays out two panes when its event detail is
   shown and fills whatever width it is given; capping it made the widget
   collapse to a narrow single column. */
.sm-book {
	margin: 2.25rem 0 0;
	max-width: none;
	border: 0;
	background: none;
	border-radius: 0;
	overflow: visible;
	min-height: 200px;
}
/* Calendly is handed `parentElement`, so it injects a BARE iframe with no
   height and none of its usual .calendly-inline-widget wrapper. A bare iframe
   defaults to 150px, which left a squashed calendar strip inside a 700px box.
   The container needs a resolved height (not just min-height, which a
   percentage child cannot resolve against) and the iframe has to fill it. */
.sm-book.is-loaded { min-height: 0; height: 700px; }
.sm-book iframe,
.sm-book .calendly-inline-widget {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0 !important;
	border: 0;
}
/* Calendly stacks the month and the time list vertically on narrow screens, so
   the same 700px would clip the times. */
@media (max-width: 760px) {
	.sm-book.is-loaded { height: 1040px; }
}


.sm-book__fallback {
	display: grid; gap: 1rem; place-items: start;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.sm-book__fallback p { margin: 0; color: var(--sm-muted); }
.sm-book.is-loaded .sm-book__fallback { display: none; }
.sm-book .calendly-inline-widget { min-width: 0 !important; }

@media (max-width: 620px) {
	.sm-book.is-loaded { min-height: 840px; }
}

/* A short band that frames the calendar and states plainly what it is for. */
.sm-booknote {
	display: flex; gap: .9rem; align-items: flex-start;
	background: var(--sm-cream-2); border-left: 3px solid var(--sm-gold);
	border-radius: 0 4px 4px 0;
	padding: clamp(1rem, 2.2vw, 1.35rem);
	font-size: .93rem; line-height: 1.6; color: var(--sm-ink-2);
	margin-top: 1.5rem;
}

/* =========================================================================
   26. Video and the YouTube subscribe element
   ====================================================================== */
.sm-video__frame {
	position: relative; aspect-ratio: 16 / 9; background: var(--sm-ink);
	border-radius: 6px; overflow: hidden; border: 1px solid var(--sm-rule);
}
.sm-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sm-video__cap { margin-top: .85rem; font-size: .95rem; color: var(--sm-muted); }

.sm-ytsub {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.25rem; margin-top: clamp(2rem, 4vw, 2.75rem);
	background: var(--sm-cream); border: 1px solid var(--sm-rule); border-radius: 8px;
	padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.4rem, 3vw, 2rem);
}
.sm-ytsub__t { display: block; font-family: var(--sm-serif); font-size: 1.2rem; font-weight: 600; color: var(--sm-ink); }
.sm-ytsub__m { display: block; margin-top: .35rem; color: var(--sm-muted); font-size: .95rem; }

/* YouTube's own red, used only on the action that goes to YouTube. */
.sm-btn--yt { background: #C4302B; border-color: #C4302B; }
.sm-page a.sm-btn--yt, a.sm-btn--yt { color: #fff; }
.sm-btn--yt:hover { background: var(--sm-ink); border-color: var(--sm-ink); }

/* Cards that lead with artwork. */
.sm-card--art { padding: 0; overflow: hidden; }
.sm-card__art { margin: 0; }
.sm-card__art img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: 50% 40%; }
.sm-card__art--tall img { height: 320px; object-position: 50% 30%; }
.sm-card__body { padding: clamp(1.4rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; flex: 1 1 auto; }
@media (max-width: 620px) { .sm-card__art img, .sm-card__art--tall img { height: 220px; } }

/* Cover artwork must not be cropped: it carries its own title. Photographic
   mockups still crop, because they are scenes rather than artwork. */
.sm-card__art--fit img {
	object-fit: contain;
	background: var(--sm-cream-2);
	height: 260px;
	padding: .5rem;
}


/* =========================================================================
   27. Keyboard focus
   Only a couple of controls had an intentional focus style. Every interactive
   element now shows the same ring, and only for keyboard users, so the pointer
   experience is unchanged.
   ========================================================================= */
.sm-page a:focus-visible,
.sm-head a:focus-visible,
.sm-foot a:focus-visible,
.sm-drawer a:focus-visible,
button:focus-visible,
.sm-btn:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sm-gold-dk);
	outline-offset: 3px;
	border-radius: 2px;
}
/* On the dark grounds the darker gold would disappear. */
.sm-bg-ink a:focus-visible,
.sm-foot a:focus-visible,
.sm-drawer a:focus-visible {
	outline-color: var(--sm-gold-lt);
}


/* Permanent way through if the Calendly embed is unusable. */
.sm-book__direct {
	margin: 1rem 0 0;
	font-size: .9rem;
	color: var(--sm-muted);
}
.sm-book__direct a {
	color: var(--sm-gold-dk);
	text-underline-offset: 3px;
}


/* =========================================================================
   28. Click-to-load video facade
   The real YouTube embed pulls roughly half a megabyte of script per video.
   This shows a single lazy thumbnail and swaps in the player only when asked.
   ========================================================================= */
.sm-video__lite {
	display: block; position: relative; width: 100%; padding: 0;
	border: 0; background: var(--sm-ink); cursor: pointer; line-height: 0;
	border-radius: inherit; overflow: hidden;
}
.sm-video__lite img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s var(--sm-ease), opacity .3s var(--sm-ease);
}
.sm-video__lite:hover img { transform: scale(1.03); opacity: .88; }
.sm-video__play {
	position: absolute; inset: 0; margin: auto;
	width: 62px; height: 44px; border-radius: 10px;
	background: rgba(20,32,46,.82);
	transition: background .3s var(--sm-ease), transform .3s var(--sm-ease);
}
.sm-video__play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0;
	border-left: 15px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}
.sm-video__lite:hover .sm-video__play { background: var(--sm-gold-dk); transform: scale(1.06); }
.sm-video__lite:focus-visible { outline: 2px solid var(--sm-gold-dk); outline-offset: 3px; }