@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Work+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg: #FFFFFF;
  --bg-soft: #FAF8F5;
  --text: #332D27;
  --sage: #8FA085;
  --sage-deep: #6F7F66;
  --sage-soft: #DCE2D6;
  --line: #E6E3DC;
  --max-width: 980px;

  /* one spacing scale — use these, never ad-hoc values */
  --sp-section: 68px;
  --sp-section-tight: 48px;
  --sp-cta: 40px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Sticky bar clearance for in-page jump targets (#ask, #fees) */
[id] { scroll-margin-top: 108px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Balance short blocks across their lines so no line is left with a single
   word, and let paragraphs avoid orphans too. Browsers without support simply
   ignore these and wrap as before. */
h1, h2, h3,
.hero-sub,
.pillars-intro, .pillars-foot,
.cta-note, .post-card h3,
.reader-question,
.points h3, .points p, .fee-row .what, .linkedin-note, .blog-empty {
  text-wrap: balance;
}

p, li, .post-body p, .prose-center p { text-wrap: pretty; }

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.5em 0;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); font-weight: 400; margin-bottom: 26px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 34px; }
h3 { font-size: 1.3rem; margin-bottom: 10px; }

p { margin: 0 0 1.1em 0; max-width: 62ch; }

a { color: var(--text); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* Nav */
header.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sage-soft);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---- The mark ----
   An enso with a bodhi leaf at its centre. It appears in four places and
   nowhere else: beside the name in the bar, beside the name in the footer,
   once above the home page heading, and in the browser tab. That restraint is
   deliberate. A mark repeated down a page stops being a signature and becomes
   wallpaper. The artwork lives in images/mark.svg and is generated by
   ops/make-logo.py, which carries the rules for redrawing it. */
/* The wordmark is NOT the heading face. It was Cormorant italic, the same face
   in the same style as every h1 on the site, so the logo read as a line of the
   page rather than as a mark of its own. It is now Work Sans in widely spaced
   capitals: the spacing is what turns a name into a mark, and a plain sans
   leaves the enso as the only expressive thing in the lockup. */
.brand {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.66rem;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
  /* The mark sits ABOVE the name, not beside it. Side by side, the ring has to
     be drawn heavy enough to read at the height of a line of text and it closes
     up around the leaf; stacked, it keeps the fine drawing and its air. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1;
  /* the spacing is added to the right of the last letter, so nudge it back to
     keep the name optically centred under the mark */
  text-indent: 0.2em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: block;
  flex: 0 0 auto;
}

footer .brand-mark { width: 40px; height: 40px; }
footer .brand { font-size: 0.72rem; letter-spacing: 0.22em; }

@media (max-width: 520px) {
  .brand-mark { width: 30px; height: 30px; }
  .brand { font-size: 0.6rem; letter-spacing: 0.16em; gap: 5px; }
}

/* The single standalone use, above the home page heading. Kept small: it
   introduces the page, it does not decorate it. */
.hero-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
}
@media (max-width: 520px) { .hero-mark { width: 46px; height: 46px; margin-bottom: 18px; } }

nav.links { display: flex; gap: 26px; flex-wrap: wrap; }

nav.links a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

nav.links a { padding-bottom: 3px; border-bottom: 2px solid transparent; white-space: nowrap; }
nav.links a:hover { opacity: 1; }
nav.links a.active { opacity: 1; border-bottom-color: var(--sage); }
footer nav.links a { border-bottom: none; padding-bottom: 0; }

/* small booking button that lives in the nav */
.nav-cta {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--sage-deep);
  color: var(--sage-deep);
  border-radius: 2px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-cta:hover { background: var(--sage-deep); color: #FFFFFF; }
@media (max-width: 620px) { .nav-cta { display: none; } }

/* Sections */
section { padding: var(--sp-section) 0; }
section.tight { padding: var(--sp-section-tight) 0; }
section.soft { background: var(--bg-soft); }

.hero {
  padding: 76px 0 44px;
  text-align: center;
}

/* A hero followed by more of the same background stacked two paddings and
   left a gap of over 100px. One padding is enough. */
.hero + section:not(.soft) { padding-top: 38px; }

.hero .eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--sage-deep);
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.hero h1 { margin: 0 auto 22px; max-width: 17ch; }
.hero h1.wide { max-width: 26ch; }
.hero.hero-tight { padding-bottom: 18px; }

.hero p.lead {
  max-width: 48ch;
  margin: 0 auto;
  font-size: 1.1rem;
  opacity: 0.85;
}

/* The two hero paragraphs are one block of text, not two tiers. They sat at
   different sizes (1.1rem and 1rem) and different measures (48ch and 54ch),
   which stepped the page inwards like a stack of plates. Identical size,
   spacing, colour and measure, so their lines run to the same length. */
.hero p.lead,
.hero p.hero-body {
  /* 54ch, chosen by measuring: at this width both paragraphs set as three
     full lines of matching length, with no short fragment left at the end. */
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0.85;
  /* NOT text-wrap: balance. Balancing pulled the longer paragraph's lines
     inwards, so the two blocks stepped in like a pudding. They fill the same
     measure instead, and their lines end level. */
  text-wrap: pretty;
}

/* The subtitle under a page heading, set in Caveat: the one handwritten line
   on the site. It sits under the heading rather than on it, because a script
   across two large lines is harder to read at the moment a stranger is
   deciding whether to stay, and the h1 is the line search engines weigh most.
   Caveat runs small for its point size, hence the larger clamp, and it needs
   a tighter line-height than a serif because its ascenders are long. */
.hero-sub {
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.1vw, 2.25rem);
  line-height: 1.15;
  margin: 0 auto 26px;
  max-width: 24ch;
  opacity: 0.88;
}

/* The About page opens on the handwritten line instead of a serif heading, at
   her request: the page is an introduction, not a title. It is the only h1 on
   the site set in Caveat, and it takes the place of the .hero-sub there. */
h1.handwritten {
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-weight: 500;
  font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 auto 20px;
}

/* "Hello, I'm Elizabeth Berkhout." The page needs to greet the reader the way
   the flyer does, before the story starts. */
.greeting {
  font-size: 1.1rem;
  margin-bottom: 22px;
}

.closing-invite { max-width: 52ch; margin: 0 auto; }

/* A standalone photograph kept small in proportion to the page, never cropped */
.figure-small {
  display: block;
  margin: 28px auto 0;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 2px;
}

/* A narrower variant for portraits, which read as larger than a landscape
   photograph at the same width because the face carries the whole frame. */
.figure-small.narrow { max-width: 280px; }

.hero-body {
  max-width: 52ch;
  margin: 20px auto 0;
  opacity: 0.85;
}

/* The one-line credentials summary under the Training heading. It used to sit
   in the About hero; the page now opens on the story rather than the CV, so it
   moved down here where the qualifications actually are. */
.training-intro {
  max-width: 54ch;
  margin: -14px auto 34px;
  text-align: center;
  font-size: 0.97rem;
  opacity: 0.8;
  text-wrap: pretty;
}

/* The line above the two pillars. It used to be large Cormorant, which made it
   shout over the two headings that are the actual navigation. It now matches
   the other running text in the section, so the headings lead. */
.pillars-intro {
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0 auto;
  text-align: center;
  opacity: 0.8;
}

/* ---- The two pillars ----
   Each pillar is one link wrapping its heading, its sentence and its cue, so
   the whole block is clickable rather than only a small line of text at the
   bottom. A hairline above each, in the same sage as the blog cards, gives the
   pair structure without turning them into boxes. */
.pillars { gap: 0; margin-top: 30px; }

.pillar {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--sage-soft);
  padding: 26px 20px 28px;
  transition: background 0.2s ease;
}
.pillar:last-child { border-bottom: 1px solid var(--sage-soft); }
.pillar:hover { background: rgba(143, 160, 133, 0.07); }
.pillar:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

.points .pillar h3 {
  font-size: clamp(1.45rem, 2.6vw, 1.8rem);
  font-weight: 400;
  color: var(--sage-deep);
  margin: 0 0 10px;
}
.pillar:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.points .pillar p { margin: 0 auto; max-width: 44ch; }

.pillar-cue {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-deep);
  border-bottom: 1px solid var(--sage);
  padding-bottom: 3px;
}
.pillar:hover .pillar-cue { border-bottom-color: var(--sage-deep); }

.pillars-foot {
  max-width: 54ch;
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.97rem;
  opacity: 0.8;
}

.points .read-more { display: inline-block; margin-top: 2px; }

.hero-img {
  margin: 36px auto 0;
  display: block;
  width: 100%;
  max-width: 780px;
  aspect-ratio: 16 / 6.5;
  object-fit: cover;
  border-radius: 2px;
}

/* Two-column split */
.split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 44px;
  align-items: center;
}

.split.reverse .split-img { order: 2; }

.split-img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg-soft);
  justify-self: center;
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse .split-img { order: 0; }
}

/* ---- Buttons: one spacing, one look ---- */
.cta { margin-top: var(--sp-cta); }
.cta .btn + .btn { margin-left: 12px; }
p + .cta { margin-top: var(--sp-cta); }
.cta-note { margin: 12px 0 0; font-size: 0.86rem; opacity: 0.62; max-width: 46ch; }
.center .cta-note,
.hero .cta-note,
.contact-block .cta-note { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--sage-deep);
  background: var(--sage-deep);
  color: #FFFFFF;
  border-radius: 2px;
  text-decoration: none;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover { opacity: 0.82; }

.btn-quiet {
  background: transparent;
  color: var(--sage-deep);
  border-color: var(--sage-deep);
}

.btn-quiet:hover { background: var(--sage-deep); color: #FFFFFF; opacity: 1; }

/* An image the text wraps around. No cropping: it keeps its own shape. */
.wrap-img {
  float: right;
  width: 320px;
  max-width: 42%;
  height: auto;
  margin: 4px 0 20px 32px;
  border-radius: 2px;
}

.wrap-img.left { float: left; margin: 4px 32px 20px 0; }

.prose { max-width: 820px; margin: 0 auto; }
.prose::after { content: ""; display: block; clear: both; }

@media (max-width: 700px) {
  .wrap-img { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
}

/* Divider */
hr.rule { border: none; border-top: 1px solid var(--line); margin: 0; }

/* Footer */
footer {
  padding: 44px 0 40px;
  text-align: center;
  border-top: 1px solid var(--sage-soft);
  background: var(--bg-soft);
}

footer .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
footer p { margin: 0 auto; font-size: 0.88rem; opacity: 0.6; }
footer p.footer-note { margin-bottom: 8px; opacity: 0.7; }
footer nav.links { justify-content: center; margin: 14px 0; font-size: 0.86rem; }

/* Centred intro */
.intro { max-width: 60ch; margin: 0 auto; text-align: center; }
.intro p { margin-left: auto; margin-right: auto; }
.intro p:last-of-type { margin-bottom: 0; }
.center { text-align: center; }
.prose-center { max-width: 62ch; margin: 0 auto; text-align: center; }

.prose-center p { margin-left: auto; margin-right: auto; }
.prose-center .figure-small { margin: 4px auto 30px; }
.prose-center p:last-of-type { margin-bottom: 0; }
.center p { margin-left: auto; margin-right: auto; }
.center p:last-of-type { margin-bottom: 0; }

/* ---- The closing section on the home page ----
   This was two stacked sections: a large Cormorant question, then a much
   smaller answer, then a separate heading and invitation. Four different text
   sizes in a row, which read as fragmented, and the big question shouted over
   "Ready when you are", which is the part that actually asks for the booking.
   Now it is one section: the reader's own two questions in italic serif, the
   answer and the invitation at running-text size, and the heading as the only
   large thing, the same rule as the two pillars above. */
section.closing { padding: 52px 0 var(--sp-section-tight); }

.closing .reader-question {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  max-width: 48ch;
  margin: 0 auto 14px;
  opacity: 0.85;
}

.closing .reader-answer {
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 40px;
  opacity: 0.8;
}

.closing h2 { margin-bottom: 18px; }
.closing .closing-invite { font-size: 0.97rem; max-width: 52ch; margin: 0 auto; opacity: 0.85; }

/* Detail points */
.points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin-top: 36px;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.points { text-align: center; }
.points h3 { font-size: 1.15rem; margin-bottom: 8px; }
.points p { margin: 0 auto; font-size: 0.97rem; opacity: 0.85; max-width: 40ch; }

/* ---- Fees ---- */
.fees { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
@media (max-width: 700px) { .fees { grid-template-columns: 1fr; } }

.fee-group { border-top: 2px solid var(--sage-soft); padding-top: 18px; }
.fee-group h3 { font-size: 1.15rem; margin-bottom: 12px; }

.fee-row { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 7px 0; }
.fee-row + .fee-row { border-top: 1px solid var(--line); }
.fee-row .what { font-size: 0.97rem; }
.fee-row .what small { display: block; opacity: 0.6; font-size: 0.84rem; }
.fee-row .amount { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; white-space: nowrap; }

.fee-package { margin-top: 14px; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--sage); border-radius: 2px; padding: 14px 16px; }
section.soft .fee-package { background: #FFFFFF; }
.fee-package .fee-row { padding: 0; }
.fee-package .label { font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.55; font-weight: 500; display: block; margin-bottom: 6px; }

.fee-note { margin-top: 26px; font-size: 0.92rem; opacity: 0.78; max-width: 64ch; }

.linkedin-note { font-size: 0.92rem; opacity: 0.75; margin: 0 auto; }
.linkedin-note a { border-bottom: 1px solid var(--sage); text-decoration: none; }

/* ---- Blog ---- */
.post-list { max-width: 720px; margin: 0 auto; text-align: left; }

.post-card {
  border-top: 1px solid var(--sage-soft);
  padding: 26px 0;
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.post-card-img {
  flex: 0 0 160px;
  width: 160px;
  display: block;
  line-height: 0;
}

.post-card-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.post-card-body { flex: 1 1 auto; min-width: 0; }

@media (max-width: 620px) {
  .post-card { display: block; }
  .post-card-img { width: 100%; margin-bottom: 18px; }
  .post-card-img img { aspect-ratio: 16 / 9; }
}
.post-card:last-child { border-bottom: 1px solid var(--sage-soft); }

.post-meta {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 10px;
}

.post-card h3 { font-size: 1.45rem; margin: -6px 0 10px; line-height: 1.25; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { opacity: 0.75; }
.post-card p { margin: 0 0 14px; font-size: 1rem; max-width: none; }

.read-more {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--sage-soft);
  padding-bottom: 2px;
}

.read-more:hover { border-bottom-color: var(--sage-deep); }

.blog-empty { max-width: 46ch; margin: 0 auto; text-align: center; opacity: 0.75; }

/* A single post */
.post-body { max-width: 660px; margin: 0 auto; text-align: left; }
.post-body p { max-width: none; }
.post-body h2 { font-size: 1.4rem; margin-top: 40px; margin-bottom: 18px; }
.post-body blockquote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 2px solid var(--sage-soft);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.45;
}
.post-body img { width: 100%; height: auto; border-radius: 2px; margin: 28px 0; }
.post-next {
  font-size: 0.92rem;
  opacity: 0.72;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--sage-soft);
}
.post-body .post-next:last-of-type { border-bottom: none; border-top: 1px solid var(--sage-soft); padding: 18px 0 0; margin: 26px 0 0; }

.post-footer { border-top: 1px solid var(--sage-soft); margin-top: 44px; padding-top: 26px; text-align: center; }

/* ---- Contact ---- */
.contact-block { max-width: 56ch; margin: 0 auto; text-align: center; }

.contact-details {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  text-align: center;
}

.contact-details h3 { font-size: 0.78rem; margin-bottom: 6px; opacity: 0.55; letter-spacing: 0.09em; text-transform: uppercase; font-family: 'Work Sans', sans-serif; font-weight: 500; }
.contact-details p { margin: 0; font-size: 0.97rem; }
.contact-details a { text-decoration: none; border-bottom: 1px solid var(--sage); }

/* ---- Form ---- */
.form { max-width: 34rem; margin: 28px auto 0; text-align: left; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.86rem; margin-bottom: 6px; opacity: 0.75; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px 12px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sage-deep); }
.form .btn { cursor: pointer; }
.form-note { font-size: 0.84rem; opacity: 0.62; margin: 14px 0 0; }