/* Heart & Mind Aligned: the approved concept's CSS, ported for the block theme.
   Adrianne's own system from her mockup, kept: her six colours, serif headings in teal, square corners,
   sage hairlines, teal and sage bands, the ochre marker highlight, terracotta as underline and border
   accents, the one-rounded-corner portrait with its caption card, accordions for Insights.
   Class names match the concept exactly; the patterns and blocks reuse them. Colours and fonts come from
   theme.json so the editor palette and this file never disagree. */
:root {
  --bg: var(--wp--preset--color--bg, #F7F2E9); --ink: var(--wp--preset--color--ink, #303635);
  --soft: var(--wp--preset--color--soft, #AAB6A3); --line: var(--wp--preset--color--line, #C9D0C3);
  --accent: var(--wp--preset--color--accent, #24595B); --dark: var(--wp--preset--color--accent, #24595B);
  --white: var(--wp--preset--color--bg, #F7F2E9); --clay: var(--wp--preset--color--clay, #BC7058);
  --gold: var(--wp--preset--color--gold, #C49A45); --muted: var(--wp--preset--color--muted, #5E625F);
  --serif: var(--wp--preset--font-family--serif, "Gelasio", Georgia, "Times New Roman", serif);
  --sans: var(--wp--preset--font-family--sans, "Nunito Sans", Arial, system-ui, sans-serif);
  --gutter: clamp(16px, 6vw, 72px);
  --ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--accent); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.8vw, 66px); line-height: 1.04; letter-spacing: -1.5px; text-wrap: initial; }
@media (max-width: 820px) { h1 br { display: none; } h1 { text-wrap: balance; } }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.13; letter-spacing: -0.5px; }
h3 { font-size: 25px; line-height: 1.25; }
p { margin: 0; }
.lead { font-size: 18px; max-width: 610px; }
.eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.small { font-size: 13px; color: var(--muted); }
.stack { display: grid; gap: 22px; align-content: start; }
.stack > h2 + p, .stack > h3 + p { margin-top: -4px; }
section { padding: clamp(56px, 8vw, 96px) var(--gutter); }
.inner { max-width: 1180px; margin: 0 auto; }
.primary, .wp-block-button__link, .wp-element-button { display: inline-block; background: var(--accent); color: var(--white); padding: 14px 24px; border-radius: 3px; font-size: 15px; font-weight: 600; line-height: 1.4; border: 0; cursor: pointer; text-decoration: none; }
.primary:hover, .wp-block-button__link:hover, .wp-element-button:hover { background: var(--ink); color: var(--white); }
.text-link { display: inline-block; font-size: 15px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent); padding: 4px 0; }
.text-link:hover { border-bottom-color: var(--clay); color: var(--clay); }
.ne { width: .85em; height: .85em; vertical-align: -0.08em; margin-left: .15em; }
.sr, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Block layout: the concept sets its own gaps and margins, so WordPress's flow spacing stays out of the way
   inside the classes that already space themselves. Patterns that want block gap can still ask for it. */
.stack > * + *, .inner > * + *, .service > * + *, .booking > * + * { margin-block-start: 0; }
.site-main .wp-block-post-content > * + * { margin-block-start: 0; }
.wp-block-group.is-layout-constrained > .inner { max-width: 1180px; }

/* Header: her brand with the terracotta ampersand, her small-caps nav */
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(247, 242, 233, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 0 var(--gutter); }
.bar { max-width: 1180px; margin: 0 auto; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand, .wp-block-site-title.brand, .wp-block-site-title.brand a { font: 400 26px/1.05 var(--serif); letter-spacing: -1px; color: var(--accent); white-space: nowrap; text-decoration: none; margin: 0; }
.brand em { font-style: normal; color: var(--clay); }
.primary-nav, nav.primary-nav ul, .primary-nav .wp-block-navigation__container { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; align-items: center; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; }
nav.primary-nav a, .primary-nav .wp-block-navigation-item__content { padding: 8px 0; border-bottom: 1px solid transparent; }
nav.primary-nav a:hover, .primary-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--clay); }
nav.primary-nav a.cta, .primary-nav .cta .wp-block-navigation-item__content { color: var(--accent); border-bottom: 1px solid var(--accent); }
.primary-nav .cta .wp-block-navigation-item__content::after { content: ""; display: inline-block; width: .85em; height: .85em; vertical-align: -0.08em; margin-left: .25em; background: currentColor; -webkit-mask: var(--ne) center / contain no-repeat; mask: var(--ne) center / contain no-repeat; }
.primary-nav .wp-block-navigation-item__content:focus-visible { outline-offset: 0; }
/* The menu collapses at 900px like the concept, not at WordPress's 600px. The selectors repeat a class
   so they outrank the block's own triple-class rules; the open menu is WordPress's full-screen overlay
   (hasIcon off, so the buttons read "Menu" and "Close" like the concept's toggle). */
.primary-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, .primary-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close, .menu-toggle { display: none; }
@media (max-width: 900px) {
  .primary-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, .primary-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close, .menu-toggle { display: inline-block; background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 3px; padding: 10px 16px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; font-family: var(--sans); line-height: 1.2; cursor: pointer; }
  .primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  /* The header's backdrop-filter makes it the containing block for WordPress's fixed overlay, so the open
     menu becomes the concept's panel under the header instead: absolute, full width, hairline below. */
  .primary-nav.wp-block-navigation { position: static; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 22px; animation: none; }
  .primary-nav .wp-block-navigation__responsive-container-open:has(+ .is-menu-open) { display: none; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 16px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding: 10px 0; }
}

/* Hero */
.hero .inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
h1 em { font-style: italic; color: var(--accent); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.actions, .actions.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.portrait { position: relative; background: var(--soft); min-height: 420px; border-radius: 4px 100px 4px 4px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; overflow: visible; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.portrait .wp-block-image, .portrait figure { position: absolute; inset: 0; margin: 0; border-radius: inherit; }
.photo-label { font-size: 14px; max-width: 240px; line-height: 1.5; }
.portrait.has-photo .photo-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.portrait.has-photo { aspect-ratio: 4 / 5; min-height: 0; }
.hero .portrait.has-photo { aspect-ratio: 525 / 680; }
.photo-label b, .photo-label strong { display: block; font-weight: 700; margin-bottom: 4px; }
.photo-label small { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.scribble { position: absolute; bottom: 22px; left: -20px; padding: 12px 19px; background: var(--bg); color: var(--ink); border-left: 5px solid var(--clay); border-bottom: 3px solid var(--clay); font: italic 23px/1.2 var(--serif); max-width: 80%; text-align: left; margin: 0; }
@media (max-width: 820px) { .hero .inner { grid-template-columns: 1fr; } .portrait { min-height: 360px; } .scribble { left: 12px; } }

/* Statement band */
.statement { background: var(--dark); text-align: center; }
.statement .eyebrow { color: var(--gold); }
.statement h2, .statement p { color: var(--white); }
.statement .inner { display: grid; gap: 20px; justify-items: center; }
.statement h2 { max-width: 20ch; }

/* Recognition */
.recognition .inner { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.recognition .aside { font: italic 21px/1.4 var(--serif); color: var(--ink); }
.recognition h3.mark { display: inline; background: var(--gold); color: var(--ink); padding: 3px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size: 23px; line-height: 1.6; }
.experiences { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; list-style: none; margin: 0; padding: 0; }
.experiences li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 16px; }
.recognition .closing { margin-top: 26px; font: italic 23px/1.3 var(--serif); color: var(--accent); }
@media (max-width: 820px) { .recognition .inner, .experiences { grid-template-columns: 1fr; } }

/* Philosophy: Heart + Mind, on her sage band */
.philosophy { background: var(--soft); }
.philosophy h2 .op { color: var(--clay); font-style: normal; padding: 0 .1em; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choice-row button { border: 1px solid var(--accent); padding: 10px 16px; background: var(--bg); border-radius: 3px; font-size: 14px; font-weight: 600; min-height: 44px; cursor: pointer; }
.choice-row button[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 32px; }
.inner-voice { padding: 28px 0; border-top: 1px solid var(--ink); }
.inner-voice .says { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.inner-voice blockquote { font: 29px/1.3 var(--serif); margin: 10px 0 0; padding: 0; border: 0; color: var(--ink); transition: opacity .25s ease; }
.inner-voice.heart blockquote { color: var(--accent); font-style: italic; }
.switching blockquote { opacity: 0; }
.philosophy .note { margin-top: 26px; max-width: 640px; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; gap: 0; } .inner-voice blockquote { font-size: 23px; } }

/* The Map to MORE */
.mapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 36px 0; }
.map-item { border-top: 2px solid var(--clay); padding-top: 20px; }
/* The pattern's label is a paragraph and the pair an h3 (the concept used span and strong); the arrow is a text glyph. */
.map-item > span, .map-item > p { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; display: block; font-weight: 600; color: var(--muted); }
.map-item strong, .map-item h3 { display: flex; align-items: center; gap: 12px; font: 400 29px/1.3 var(--serif); margin-top: 10px; color: var(--accent); flex-wrap: wrap; }
.map-item svg.ar { width: 22px; height: 22px; }
.map-item .ar { color: var(--clay); flex: none; font-size: 1.2rem; }
.reset { margin-top: 36px; padding: 30px; background: var(--bg); border-left: 5px solid var(--clay); display: grid; grid-template-columns: auto 1fr; gap: 14px 40px; align-items: start; }
.reset h3 { grid-column: 1 / -1; }
.reset-word { font: 400 clamp(40px, 6vw, 56px)/1 var(--serif); letter-spacing: 3px; color: var(--accent); }
.reset-steps { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.reset-steps button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.reset-steps button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); padding-left: 12px; padding-right: 12px; }
#reset-caption, .reset-caption { font: 28px/1.3 var(--serif); margin: 14px 0 0; color: var(--accent); }
#reset-text, .reset-text { margin-top: 10px; max-width: 56ch; font-size: 16px; transition: opacity .25s ease; }
.reset-detail.switching p { opacity: 0; }
.reset .text-link { margin-top: 10px; }
@media (max-width: 820px) { .mapgrid { grid-template-columns: 1fr; gap: 12px; } .map-item strong { margin: 0; font-size: 25px; } .reset { grid-template-columns: 1fr; } }

/* Coaching */
.coaching h2 { text-transform: uppercase; letter-spacing: .5px; font-size: clamp(28px, 3.6vw, 40px); }
.coaching .pattern-line { font: italic 21px/1.4 var(--serif); color: var(--accent); max-width: 560px; }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 35px; margin-top: 30px; }
.service { border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 12px; align-content: start; }
.service p { font-size: 16px; }
.service .small { font-size: 13px; color: var(--muted); }
.service .text-link { justify-self: start; }
@media (max-width: 820px) { .services { grid-template-columns: 1fr; } }

/* About, on her sage band */
.about { background: var(--soft); }
.about .inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.about .portrait { background: var(--bg); border-radius: 4px 4px 4px 100px; }
.about .truths { font: italic 21px/1.5 var(--serif); color: var(--accent); }
@media (max-width: 820px) { .about .inner { grid-template-columns: 1fr; } }

/* Insights: her accordions (core Details blocks carry .wp-block-details) */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
details, .wp-block-details { border-top: 1px solid var(--line); padding: 20px 0; margin: 0; }
summary, .wp-block-details summary { font: 23px/1.3 var(--serif); min-height: 44px; cursor: pointer; color: var(--accent); list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 26px/1 var(--serif); color: var(--clay); flex: none; }
details[open] summary::after { content: "\2013"; }
details .topic { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
details blockquote, .wp-block-details .wp-block-quote { margin: 18px 0 0; padding: 0; border: 0; font: italic 18px/1.5 var(--serif); }
details blockquote p { font: inherit; margin: 0; }
details p { margin-top: 14px; font-size: 15px; }
details .topic + blockquote, details .topic + .wp-block-quote { margin-top: 0; }
details .text-link { margin-top: 14px; }
.wp-block-details > :where(:not(summary)) { margin-block-start: 0; }
@media (max-width: 900px) { .insights-grid { grid-template-columns: 1fr; gap: 0; } }

/* It only takes one, on her teal band */
.one { background: var(--dark); color: var(--white); }
.one .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.one .eyebrow { color: var(--gold); }
.one h2, .one h3, .one p { color: var(--white); }
.one ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 18px; }
.one li em { font-style: italic; }
.one h3 { margin-top: 26px; }
@media (max-width: 820px) { .one .inner { grid-template-columns: 1fr; } }

/* Let's talk */
.contact .head { display: grid; gap: 18px; }
.contact .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; align-items: start; }
.booking { border: 1px solid var(--line); border-radius: 3px; padding: 26px; display: grid; gap: 16px; }
.booking h3 { font-size: 23px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slots span { border: 1px solid var(--line); border-radius: 2px; padding: 10px 6px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.booking .small, .contact .small { font-size: 13px; color: var(--muted); }
form label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
form input, form textarea { width: 100%; padding: 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--soft); font: 16px var(--sans); border-radius: 2px; }
form input:focus, form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
form .primary { margin-top: 18px; }
#form-status, .form-status { margin-top: 14px; font-size: 14px; min-height: 1.5em; }
@media (max-width: 820px) { .contact .cols { grid-template-columns: 1fr; } .slots { grid-template-columns: repeat(2, 1fr); } }

/* Footer: two spans like the concept */
footer.site { padding: 25px var(--gutter); font-size: 13px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); }
footer.site p { margin: 0; }

/* Inner pages and posts (page.html, single.html, index.html): the concept has none, so these follow its rules */
.entry-page .inner, .entry-post .inner, .not-found .inner { max-width: 760px; margin: 0 auto; }
.prose .wp-block-post-content > * + * { margin-block-start: 1em; }
.prose .wp-block-post-content h2, .prose .wp-block-post-content h3 { margin-top: 1.4em; }
.prose .wp-block-post-content ul, .prose .wp-block-post-content ol { padding-left: 1.2em; }
.prose .wp-block-post-content a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.post-image img { border-radius: 4px 100px 4px 4px; }
.post-list .insights-grid { margin-top: 32px; }
.post-list .service h3 a { color: var(--accent); }
.post-list .service h3 a:hover { color: var(--clay); }
.pagination { margin-top: 36px; font-size: 15px; font-weight: 600; color: var(--accent); }
.pagination a { border-bottom: 1px solid var(--accent); padding: 4px 0; }

/* Her logo in the header: the Heart & Mind Aligned lockup (patterns/brand.php), sized by width so it
   sits on the nav's baseline at 46px tall on desktop and 33px on phones. */
.brand-logo { line-height: 0; display: block; flex: 0 0 auto; }
.brand-logo img { width: 350px; height: auto; display: block; }
@media (max-width: 900px) { .brand-logo img { width: 250px; } }
@media (max-width: 380px) { .brand-logo img { width: 215px; } }

/* Grid children: WordPress adds a flow gap before every sibling; the concept's grids set their own gaps. */
.services > * + *, .mapgrid > * + *, .insights-grid > * + *, .cols > * + *, .two > * + * { margin-block-start: 0; }
/* The map arrow is a text glyph; Gelasio has none, so fall back to a system face for that span. */
.map-item .ar { font-family: system-ui, "Segoe UI", Arial, sans-serif; }
/* Loose paragraphs typed into an inner page get normal spacing (the patterns manage their own). */
.entry-page .wp-block-post-content > * + * { margin-block-start: 1em; }

/* Inner pages carry their own h1 at section-heading size; the hero keeps the big one. */
h1.page-title, .site-main h1:not(.hero h1) { font-size: clamp(30px, 4vw, 44px); line-height: 1.13; letter-spacing: -0.5px; }
.coaching h1 { text-transform: uppercase; letter-spacing: .5px; font-size: clamp(28px, 3.6vw, 40px); }
/* Home page teasers */
.actions p { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin: 0; }
.insights-latest .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; list-style: none; padding: 0; }
.insights-latest .insights-grid > li { margin: 0; }
.insights-latest .topic a { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.insights-latest h3 a { color: var(--accent); }
.insights-latest .wp-block-post-excerpt__more-link { font-size: 15px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent); }
.insights-latest .wp-block-post-excerpt__excerpt { font-size: 16px; }
@media (max-width: 900px) { .insights-latest .insights-grid { grid-template-columns: 1fr; } }
.cta .stack { align-items: start; }
/* Map arrows: drawn with CSS so they never depend on a font having the glyph. */
.map-item .ar { display: inline-block; width: 1.2rem; height: 1.2rem; font-size: 0; color: transparent; vertical-align: middle; background: var(--clay); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }