/* ==========================================================================
   Eva Berlander — Design system
   A calm, Scandinavian visual language.
   1. Tokens          5. Layout primitives   9.  Sections
   2. Reset           6. Typography          10. Blog
   3. Base            7. Components          11. Motion
   4. Utilities       8. Header / Footer     12. Print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand */
  --ink:          #4d6471;  /* blue-grey, primary */
  --ink-deep:     #35464f;
  --ink-mid:      #63757f;
  --ink-soft:     #8c9ea7;   /* hairlines and quiet edges — not text */
  /* The same grey-blue, dark enough to read at the smallest sizes. */
  --text-faint:   #626e75;
  --accent:       #dd885d;  /* warm orange */
  --accent-deep:  #c26c42;
  --accent-tint:  #f6e2d6;
  --accent-wash:  #fdf3ed;
  --accent-btn:   #e69267;  /* the orange a filled button can wear with dark text */

  /* Surfaces — always light */
  --paper:        #fcfaf7;
  --paper-warm:   #f6efe8;
  --paper-cool:   #eef2f3;
  --surface:      #ffffff;
  --line:         #e6ded4;
  --line-soft:    #f0eae2;

  /* Text */
  --text:         #2b383f;
  /* 4.64:1 on the warmest background this text ever sits on (#f6efe8). */
  --text-muted:   #5e6e77;
  --text-onDark:  #fdfaf7;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.85rem, 0.82rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.36vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.22rem + 0.78vw, 1.85rem);
  --step-3:  clamp(1.65rem, 1.35rem + 1.45vw, 2.6rem);
  --step-4:  clamp(2rem, 1.48rem + 2.55vw, 3.5rem);
  --step-5:  clamp(2.4rem, 1.55rem + 4.2vw, 4.6rem);

  /* Space (fluid) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  clamp(2.5rem, 4vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 6vw, 5.5rem);
  --space-3xl: clamp(4.5rem, 9vw, 8rem);

  /* Shape */
  --radius-xs: 4px;
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  24px;
  --radius-pill: 999px;

  /* Elevation — feather-light only */
  --shadow-s: 0 1px 2px rgba(43, 56, 63, 0.04), 0 2px 8px rgba(43, 56, 63, 0.03);
  --shadow-m: 0 2px 4px rgba(43, 56, 63, 0.04), 0 12px 28px rgba(43, 56, 63, 0.06);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-press: 140ms;   /* a button, a small icon shifting */
  --dur-hover: 200ms;   /* a surface lifting under the cursor */
  --dur-panel: 220ms;   /* the accordion opening */
  --dur-enter: 450ms;   /* arriving on scroll */
}

/* 2. Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Nothing may pan sideways on a phone. `clip` rather than `hidden`, because
   `overflow: hidden` on the root turns it into a scroll container and the
   sticky header stops sticking. */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html:focus-within { scroll-behavior: smooth; }
body { min-height: 100svh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* 3. Base ----------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--paper);
  background-image:
    radial-gradient(60rem 40rem at 88% -8%, rgba(221, 136, 93, 0.07), transparent 60%),
    radial-gradient(52rem 36rem at -8% 22%, rgba(77, 100, 113, 0.07), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

a { color: inherit; }

::selection { background: var(--accent-tint); color: var(--ink-deep); }

:focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s);
  z-index: 200; transform: translateY(-160%);
  background: var(--ink-deep); color: var(--text-onDark);
  padding: 0.7rem 1.1rem; border-radius: var(--radius-s);
  font-size: var(--step--1); font-weight: 500; text-decoration: none;
  transition: transform 220ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* 4. Utilities ------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.text-center { text-align: center; }

/* 5. Layout primitives ----------------------------------------------------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 46rem); margin-inline: auto; }
.wrap--wide   { width: min(100% - var(--gutter) * 2, 1400px); margin-inline: auto; }

.section { padding-block: var(--space-3xl); position: relative; }
.section--tight { padding-block: var(--space-2xl); }
.section--flush-top { padding-top: 0; }
/* ...but when it follows another section it gets the hairline divider,
   which then needs air between the rule and the content below it. */
.section + .section--flush-top { padding-top: var(--space-2xl); }

.section--warm { background: var(--paper-warm); }
.section--cool { background: var(--paper-cool); }
.section--surface { background: var(--surface); }

/* soft divider used between same-tone sections */
.section + .section:not(.section--warm):not(.section--cool):not(.section--surface)::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0;
  height: 1px; background: var(--line-soft);
}

.stack > * + * { margin-top: var(--flow, var(--space-s)); }

.grid { display: grid; gap: var(--space-l); }
@media (min-width: 40em)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52em)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40em)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* 6. Typography ------------------------------------------------------------ */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
}
h1, .h1 { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.025em; }
h2, .h2 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--step-2); line-height: 1.2; }
h4, .h4 { font-size: var(--step-1); line-height: 1.3; }

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44ch;
}
.lead--wide { max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-s);
}
.eyebrow::before {
  content: ""; width: 1.85rem; height: 1px;
  background: currentColor; opacity: 0.55; flex: none;
}
@media (max-width: 40em) { .eyebrow::before { display: none; } }
.eyebrow--plain::before { display: none; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; color: var(--ink-deep); }
.prose em { font-style: italic; }
.prose a {
  color: var(--ink-deep);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 200ms var(--ease);
}
.prose a:hover { color: var(--accent-deep); }
.prose blockquote {
  margin-block: 1.8em;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}
.prose blockquote p + p { margin-top: 0.4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.prose figure img { border-radius: var(--radius-m); }

/* 7. Components ------------------------------------------------------------ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1.05em 1.65em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur-press) var(--ease), color var(--dur-press) var(--ease),
              border-color var(--dur-press) var(--ease), transform var(--dur-press) var(--ease),
              box-shadow var(--dur-press) var(--ease);
}
.btn:active { transform: translateY(0); }

/* Three actions, three looks — because they are not the same kind of thing.
   Warm orange is the personal one (book a session). Blue-grey is the shop
   (the online courses), which should read as a separate offer rather than a
   second helping of the same. Outlined is everything secondary. */

/* White on the brand orange measured 2.6:1, which is unreadable for a lot of
   people on the site's single most important button. Same colour family, a
   touch lighter, with the site's own ink on top: 4.98:1. */
.btn--primary {
  background: var(--accent-btn);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(194, 108, 66, 0.18), 0 8px 20px rgba(194, 108, 66, 0.16);
}
.btn--primary:hover { background: var(--accent); box-shadow: 0 2px 4px rgba(194,108,66,.22), 0 14px 30px rgba(194,108,66,.22); }

.btn--ink {
  background: var(--ink);
  color: var(--text-onDark);
  box-shadow: 0 1px 2px rgba(53, 70, 79, 0.18), 0 8px 20px rgba(53, 70, 79, 0.16);
}
.btn--ink:hover { background: var(--ink-deep); box-shadow: 0 2px 4px rgba(53,70,79,.22), 0 14px 30px rgba(53,70,79,.22); }

.btn--secondary {
  background: transparent;
  color: var(--ink-deep);
  border-color: var(--ink-soft);
}
.btn--secondary:hover { border-color: var(--ink); background: rgba(77, 100, 113, 0.06); }

.btn--ghost { padding-inline: 0.2em; background: none; color: var(--ink-deep); }

.btn__icon { flex: none; transition: transform var(--dur-press) var(--ease); }

/* Text link with animated underline */
.link {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--1); font-weight: 500;
  color: var(--ink-deep); text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 380ms var(--ease), color 260ms var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 2px; color: var(--accent-deep); }
.link .btn__icon { transition: transform var(--dur-press) var(--ease); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* Media — the "arch" is the signature shape of the site */
.media { position: relative; }
.media img {
  width: 100%; height: 100%; object-fit: cover;
  background: linear-gradient(150deg, var(--paper-warm), var(--paper-cool));
}
.media--arch img { border-radius: 14rem 14rem var(--radius-m) var(--radius-m); }
.media--soft img { border-radius: var(--radius-l); }
.media--round img { border-radius: var(--radius-pill); }
.media--portrait { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1; }
.media--wide { aspect-ratio: 16 / 10; }

/* A second arch, offset behind the image — the site's quiet signature. */
.media--framed { isolation: isolate; }
.media--framed::before {
  content: ""; position: absolute; inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 14rem 14rem var(--radius-m) var(--radius-m);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 40em) {
  .media--framed::before { inset: 1rem -1rem -1rem 1rem; }
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%;
  display: flex; flex-direction: column;
  transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.card--link:hover, .card--link:focus-within {
  border-color: var(--accent-tint);
  box-shadow: var(--shadow-m);
}
.card__title { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.card__text { color: var(--text-muted); font-size: var(--step--1); flex: 1; }
.card__foot { margin-top: var(--space-m); }

/* Card icon */
.card__icon {
  width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-m);
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent-deep);
}
.card__icon svg { width: 1.35rem; height: 1.35rem; }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-m); text-align: left;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--ink-deep); line-height: 1.3;
  transition: color 220ms var(--ease);
}
.accordion__trigger:hover { color: var(--accent-deep); }
/* Whole pixels only. A 1.5px rule cannot be drawn: the browser smears it over
   two rows, and how grey it comes out depends on where the element happens to
   land — which is why the same sign looked bolder on one page than another.
   translateY(-50%) of 1.5px was half a pixel on its own, every time. A 16px
   box with the bar at 7px puts it dead centre with nothing left over. */
.accordion__sign { flex: none; position: relative; width: 16px; height: 16px; margin-top: 0.4em; }
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px;
  border-radius: 2px; background: var(--accent-deep);
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { transform: rotate(0deg); opacity: 0; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-panel) var(--ease); }
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { color: var(--text-muted); padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem); max-width: 62ch; }

/* Form */
.field { display: grid; gap: 0.45rem; }
.field label { font-size: var(--step--1); font-weight: 500; color: var(--ink-deep); }
.field input, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  /* 16px exactly: iOS zooms the whole page in when a focused field is
     smaller than this, and the visitor is then left scrolled sideways. */
  font-size: 16px;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field--required label::after { content: " *"; color: var(--accent-deep); }

/* 8. Header / Footer ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-block: 0.9rem;
  background: rgba(252, 250, 247, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease), padding 300ms var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); padding-block: 0.6rem; }

.site-header__inner { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 2rem); }

.brand {
  display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1.1;
  margin-right: auto;
}
.brand__logo {
  /* Sized by height so any logo lines up with the text version, and capped by
     width so a wide wordmark cannot crowd out the menu on a narrow phone. */
  width: auto; height: auto;
  max-height: 2.2rem; max-width: min(58vw, 13.5rem);
}
@media (max-width: 22em) { .brand__logo { max-height: 1.9rem; } }
.brand__name {
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink-deep); white-space: nowrap;
}
@media (max-width: 22em) { .brand__name { font-size: 1.05rem; } }
.brand__tag {
  font-size: 0.62rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 0.2em; white-space: nowrap;
}
@media (max-width: 30em) { .brand__tag { display: none; } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.6rem); list-style: none; padding: 0; margin: 0; }
.nav__link {
  position: relative; text-decoration: none; font-size: var(--step--1); font-weight: 450;
  color: var(--text); padding: 0.4rem 0.15rem; white-space: nowrap;
  transition: color 220ms var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink-deep); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--space-xs); }
.header__cta { display: none; }

.lang-switch { display: flex; align-items: center; gap: 0.35rem; font-size: var(--step--2); letter-spacing: 0.06em; }
.footer__lang { margin-right: auto; }
.footer__lang .lang-switch a { border: 1px solid transparent; }
.footer__lang .lang-switch a[aria-current="true"] { border-color: var(--line); background: var(--surface); }
.lang-switch a {
  text-decoration: none; text-transform: uppercase; color: var(--text-faint);
  padding: 0.3rem 0.4rem; border-radius: var(--radius-xs); font-weight: 500;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.lang-switch a:hover { color: var(--ink-deep); background: rgba(77,100,113,.07); }
.lang-switch a[aria-current="true"] { color: var(--ink-deep); font-weight: 600; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-deep); padding: 0.55rem 0.2rem;
}
/* Same rule as the accordion sign: whole pixels. 14px tall, bars 2px at 2px
   from each edge, so each one travels exactly 4px to meet in the middle and
   the cross closes on the pixel grid instead of between it. The rounded ends
   keep the 45-degree edges from looking chewed. */
.menu-toggle__bars { position: relative; width: 22px; height: 14px; }
.menu-toggle__bars span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 320ms var(--ease), opacity 220ms var(--ease);
}
.menu-toggle__bars span:nth-child(1) { top: 2px; }
.menu-toggle__bars span:nth-child(2) { bottom: 2px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: 6rem var(--gutter) var(--space-xl);
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__list { list-style: none; padding: 0; margin: 0; }
.mobile-nav__list li + li { border-top: 1px solid var(--line-soft); }
.mobile-nav__link {
  display: block; padding: 1rem 0; text-decoration: none;
  font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-deep);
}
.mobile-nav__link[aria-current="page"] { color: var(--accent-deep); }
.mobile-nav__foot { margin-top: auto; padding-top: var(--space-xl); display: grid; gap: var(--space-s); }

@media (min-width: 78em) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header__cta { display: inline-flex; }
  .mobile-nav { display: none; }
}
/* Just above the breakpoint everything fits, but only just — tighten up. */
/* The menu grew to eight items; between these widths it fits only once
   the spacing is tightened. */
@media (min-width: 78em) and (max-width: 88em) {
  .nav__list { gap: 0.9rem; }
  .header__cta { padding-inline: 1.25rem; }
}
/* On the narrowest phones the word "Meny" costs more than it explains;
   the button keeps its name through aria-label. */
@media (max-width: 22em) { .menu-toggle__label { display: none; } }

/* Footer */
.site-footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  padding-block: var(--space-2xl) var(--space-xl);
  margin-top: var(--space-3xl);
}
.footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 46em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-2xl); } }
.footer__blurb { color: var(--text-muted); font-size: var(--step--1); max-width: 34ch; margin-top: var(--space-s); }
.footer__heading {
  font-family: var(--font-body); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--space-s);
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer__list a { text-decoration: none; font-size: var(--step--1); color: var(--text-muted); transition: color 200ms var(--ease); }
.footer__list a:hover { color: var(--accent-deep); }
.footer__contact { display: grid; gap: 0.35rem; font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-m); }
.footer__contact a { text-decoration: none; }
.footer__contact a:hover { color: var(--accent-deep); }
.footer__social { display: flex; gap: var(--space-s); margin-top: var(--space-m); }
.footer__social a {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.footer__social a:hover { background: var(--surface); border-color: var(--accent-tint); color: var(--accent-deep); }
.footer__social svg { width: 1.05rem; height: 1.05rem; }
.footer__bottom {
  margin-top: var(--space-xl); padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m);
  align-items: center; justify-content: space-between;
  font-size: var(--step--2); color: var(--text-faint);
}

/* 9. Sections -------------------------------------------------------------- */

/* Section head shared */
.section-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: var(--space-m); }

/* Hero */
.hero { padding-block: clamp(3rem, 7vw, 6rem) var(--space-3xl); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 60em) { .hero__grid { grid-template-columns: 1.05fr 0.85fr; gap: var(--space-3xl); } }
.hero__title { margin-bottom: var(--space-m); }
.hero__text { font-size: var(--step-1); color: var(--text-muted); max-width: 46ch; line-height: 1.6; }
.hero__cta { margin-top: var(--space-xl); }
.hero__media { position: relative; }
.hero__media .media { max-width: 30rem; margin-inline: auto; }
@media (max-width: 60em) { .hero__media .media { max-width: 22rem; } }
@media (max-width: 30em) {
  .hero__cta .btn { width: 100%; }
  .hero__media .media { max-width: 17rem; }
}
.hero__badge {
  position: absolute; left: 0; bottom: 8%;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-m); box-shadow: var(--shadow-m);
  padding: 0.9rem 1.15rem; max-width: 15rem;
  font-size: var(--step--2); color: var(--text-muted); line-height: 1.45;
}
.hero__badge strong { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-deep); }
@media (max-width: 40em) { .hero__badge { position: static; margin-top: var(--space-m); max-width: none; } }

.hero--centered .hero__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero--centered .hero__text { margin-inline: auto; }
.hero--centered .cta-row { justify-content: center; }

/* Hero with a film behind it ------------------------------------------------
   The film runs edge to edge under a veil. The veil is not decoration: it is
   what guarantees the words stay readable over footage nobody can predict, so
   its strength is tied to the text colour rather than left to taste. */
.hero--video {
  display: grid; align-items: center;
  min-height: min(82svh, 44rem);
  padding-block: clamp(4rem, 12vw, 8rem);
  isolation: isolate;
}
@media (max-width: 40em) { .hero--video { min-height: min(72svh, 34rem); } }

.hero__backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--paper-cool); }
.hero__poster, .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: none;            /* beats the global img rule */
}
.hero__video { opacity: 0; transition: opacity 700ms var(--ease); }
.hero__video[data-playing="true"] { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; }

/* The veil strengths below are not taste. They are the weakest veil that
   still clears WCAG AA for the smallest text in the block when the frame
   behind it is at its worst — solid black under the light veil, solid white
   under the dark one. Lighten them and the words stop being readable over
   some footage; the film is not worth that. */

/* Light veil — the site's own palette, dark text. */
.hero--veil-light .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(252, 250, 247, 0.76), rgba(252, 250, 247, 0.68) 45%, rgba(252, 250, 247, 0.78)),
    linear-gradient(105deg, rgba(246, 239, 232, 0.28), rgba(238, 242, 243, 0.22));
}
/* The muted grey used elsewhere only reaches 3.6:1 over a dark frame, and the
   orange eyebrow barely 1.2:1 — over film they both step up to full ink. */
.hero--veil-light .hero__text { color: var(--text); }
.hero--veil-light .eyebrow { color: var(--ink-deep); }

/* Dark veil — for footage that deserves to be seen; the text turns white. */
.hero--veil-dark .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(38, 50, 56, 0.72), rgba(38, 50, 56, 0.66) 45%, rgba(38, 50, 56, 0.74)),
    radial-gradient(75% 60% at 50% 50%, rgba(38, 50, 56, 0.08), rgba(38, 50, 56, 0.22));
}
.hero--veil-dark .hero__title,
.hero--veil-dark .hero__text,
.hero--veil-dark .eyebrow { color: var(--text-onDark); }
.hero--veil-dark .eyebrow::before { background: var(--text-onDark); opacity: 0.6; }
.hero--veil-dark .btn--secondary {
  color: var(--text-onDark);
  border-color: rgba(253, 250, 247, 0.55);
  background: rgba(253, 250, 247, 0.06);
}
.hero--veil-dark .btn--secondary:hover {
  background: rgba(253, 250, 247, 0.16);
  border-color: var(--text-onDark);
}

/* The film is motion the visitor did not ask for. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--space-m); }
@media (min-width: 52em) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding-inline: 0.5rem; }
.stat__value {
  font-family: var(--font-display); font-size: var(--step-3); color: var(--accent-deep);
  line-height: 1; font-variation-settings: "SOFT" 30, "WONK" 1;
}
.stat__label { font-size: var(--step--1); color: var(--text-muted); margin-top: 0.5rem; }
@media (min-width: 52em) {
  .stat + .stat { border-left: 1px solid var(--line); }
}

/* Statement */
.statement__text {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.45;
  color: var(--ink-deep);
  max-width: 34ch;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.statement--lead .statement__text { max-width: 22ch; }
.statement__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 56em) { .statement__grid { grid-template-columns: 0.95fr 1fr; gap: var(--space-2xl); align-items: start; } }
.statement__aside { color: var(--text-muted); }

/* Audiences */
.audience-card { position: relative; }
.audience-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Courses */
.courses { display: grid; gap: var(--space-l); align-items: stretch; }
@media (min-width: 56em) { .courses { grid-template-columns: repeat(3, 1fr); } }
.course {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.course:hover { box-shadow: var(--shadow-m); }
.course--featured { border-color: var(--accent-tint); background: var(--accent-wash); box-shadow: var(--shadow-s); }
.course__badge {
  position: absolute; top: -0.75rem; left: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--accent); color: #fff;
  font-size: var(--step--2); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
}
.course__name { font-size: var(--step-2); }
.course__tagline {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 500;
  color: var(--accent-deep); margin-top: 0.35rem;
}
.course__text { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-m); flex: 1; }
.course__price {
  font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-deep);
  margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line-soft);
}
.course__price small { display: block; font-family: var(--font-body); font-size: var(--step--2); color: var(--text-faint); margin-top: 0.2rem; letter-spacing: 0.04em; }
.course__cta { margin-top: var(--space-m); }
.course__cta .btn { width: 100%; }
.courses__footnote { margin-top: var(--space-l); font-size: var(--step--1); color: var(--text-muted); max-width: 52ch; }

/* About / feature split */
.split { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 58em) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .split--imageRight .split__media { order: 2; }
}
.split__media .media { max-width: 32rem; }
@media (max-width: 58em) { .split__media .media { max-width: 24rem; margin-inline: auto; } }
@media (min-width: 58em) { .split--imageRight .split__media .media { margin-left: auto; } }
.split__body .prose { max-width: 42ch; }
.split__body .cta-row { margin-top: var(--space-l); }

/* Points */
.points { display: grid; gap: var(--space-xl); }
@media (min-width: 52em) { .points--grid, .points--numbered { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.point__title { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.point__text { color: var(--text-muted); font-size: var(--step--1); max-width: 40ch; }
.point__num {
  font-family: var(--font-display); font-size: var(--step-3); line-height: 1;
  color: var(--accent); opacity: 0.55; display: block; margin-bottom: var(--space-s);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.points--list { gap: 0; }
.points--list .point {
  display: grid; gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-m);
  border-top: 1px solid var(--line);
}
.points--list .point:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 46em) {
  .points--list .point { grid-template-columns: 16rem 1fr; align-items: baseline; }
}
.points--list .point__text { max-width: 58ch; }

/* Quote */
.quote { text-align: center; max-width: 44rem; margin-inline: auto; }
.quote__mark {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 0.6;
  color: var(--accent); opacity: 0.4; display: block; margin-bottom: var(--space-s);
}
/* A quote is somebody's sentence, not a headline: it reads at the same size as
   the text around it. The italic and the mark are what say it is quoted. */
.quote__text {
  font-family: var(--font-display); font-size: var(--step-0); line-height: 1.6;
  color: var(--ink-deep); font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  max-width: 54ch; margin-inline: auto;
}
.quote__by {
  margin-top: var(--space-m); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}

/* Testimonials */
.testimonial {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-l); padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%; display: flex; flex-direction: column;
}
.testimonial__quote {
  font-family: var(--font-display); font-size: var(--step-0); line-height: 1.6;
  color: var(--ink-deep); font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  flex: 1;
}
.testimonial__by { margin-top: var(--space-m); font-size: var(--step--1); color: var(--text-muted); }
.testimonial__by strong { color: var(--ink-deep); font-weight: 600; display: block; }

/* Podcast */
.podcast__grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 56em) { .podcast__grid { grid-template-columns: 0.8fr 1fr; } }
.podcast__media .media { max-width: 24rem; }
@media (max-width: 56em) { .podcast__media .media { max-width: 18rem; } }

/* Books */
.books { display: grid; gap: var(--space-m); }
@media (min-width: 40em) { .books { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .books { grid-template-columns: repeat(4, 1fr); } }
.book {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-m); padding: var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-2xs);
  position: relative; transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.book:hover { border-color: var(--accent-tint); box-shadow: var(--shadow-s); }
.book__spine {
  height: 4px; width: 2.5rem; border-radius: var(--radius-pill);
  background: var(--accent); opacity: 0.8; margin-bottom: var(--space-xs);
}
.book__title { font-size: var(--step-1); line-height: 1.25; }
.book__authors { font-size: var(--step--1); color: var(--text-muted); }
.book__note { font-size: var(--step--2); color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.book__link { margin-top: auto; padding-top: var(--space-s); }
.book__link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* CTA band */
.cta-band {
  background: var(--paper-cool);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 5vw, 3.75rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 100%;
  background: radial-gradient(closest-side, rgba(221,136,93,.16), transparent 70%);
  pointer-events: none;
}
.cta-band__inner { position: relative; max-width: 40rem; margin-inline: auto; }
.cta-band .lead { margin-top: var(--space-m); margin-inline: auto; }
.cta-band .cta-row { justify-content: center; margin-top: var(--space-xl); }

/* Newsletter */
.newsletter {
  background: var(--accent-wash);
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius-l);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: var(--space-l); align-items: center;
}
@media (min-width: 56em) { .newsletter { grid-template-columns: 1.2fr auto; gap: var(--space-2xl); } }
.newsletter__text { color: var(--text-muted); margin-top: var(--space-m); max-width: 52ch; }

/* Contact */
.contact__grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 58em) { .contact__grid { grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); } }
.contact__details { display: grid; gap: var(--space-m); }
.contact__item { display: grid; gap: 0.2rem; padding-block: var(--space-s); border-top: 1px solid var(--line); }
.contact__label { font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.contact__value { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-deep); text-decoration: none; }
a.contact__value:hover { color: var(--accent-deep); }
.contact__form { display: grid; gap: var(--space-m); }
/* The row is a grid at every width. Below 40em that simply means one column,
   so name and e-mail keep the same air between them as every other field in
   the form; before this they sat flush against each other on a phone while
   everything around them breathed. Both forms use this class. */
.contact__form-row { display: grid; gap: var(--space-m); }
@media (min-width: 40em) { .contact__form-row { grid-template-columns: 1fr 1fr; } }
.contact__note { font-size: var(--step--2); color: var(--text-faint); }

/* Page header */
.page-header { padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-xl); }
.page-header__title { margin-bottom: var(--space-m); }
.page-header__text { font-size: var(--step-1); color: var(--text-muted); max-width: 48ch; line-height: 1.6; }
.page-header--portrait .page-header__grid { display: grid; gap: var(--space-2xl); align-items: end; }
@media (min-width: 58em) { .page-header--portrait .page-header__grid { grid-template-columns: 1.2fr 0.8fr; } }
.page-header--portrait .media { max-width: 26rem; margin-left: auto; }
@media (max-width: 58em) { .page-header--portrait .media { max-width: 20rem; margin-inline: auto; } }

/* 10. Blog ---------------------------------------------------------------- */
.post-list { display: grid; gap: var(--space-xl); }
@media (min-width: 46em) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .post-list { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex; flex-direction: column; position: relative;
  background: none;
}
.post-card__media { overflow: hidden; border-radius: var(--radius-m); aspect-ratio: 3 / 2; }
.post-card__media img { transition: transform 700ms var(--ease); }
.post-card__meta {
  margin-top: var(--space-m); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
}
.post-card__meta span + span::before { content: "·"; margin-right: 0.6rem; color: var(--line); }
.post-card__title { font-size: var(--step-2); margin-top: var(--space-2xs); line-height: 1.2; }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title { color: var(--accent-deep); }
.post-card__title { transition: color var(--dur-hover) var(--ease); }
.post-card__excerpt { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-s); }
.post-card__more { margin-top: var(--space-s); }

/* Featured first post */
.post-feature { position: relative; display: grid; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
@media (min-width: 58em) { .post-feature { grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } }
.post-feature__media { overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 16 / 11; }
.post-feature__media img { transition: transform 800ms var(--ease); }
.post-feature__title { font-size: var(--step-4); margin-top: var(--space-2xs); }
.post-feature__title a { text-decoration: none; }
.post-feature__title a::after { content: ""; position: absolute; inset: 0; }
.post-feature__excerpt { color: var(--text-muted); font-size: var(--step-1); margin-top: var(--space-m); max-width: 44ch; }

.article { padding-block: clamp(2rem, 5vw, 4rem) 0; }
.article__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.article__meta {
  font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-m);
}
.article__meta span + span::before { content: "·"; margin-right: 0.6rem; color: var(--line); }
.article__title { font-size: var(--step-4); }
.article__excerpt { font-size: var(--step-1); color: var(--text-muted); margin-top: var(--space-m); }
.article__hero { margin-block: var(--space-xl); }
.article__hero .media img { border-radius: var(--radius-l); }
.article__body { margin-inline: auto; }
.article__body > .prose { margin-inline: auto; }
.article__foot {
  max-width: var(--measure); margin: var(--space-2xl) auto 0;
  padding-top: var(--space-l); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: space-between;
}
.article__share { display: flex; gap: var(--space-2xs); align-items: center; }
.article__share a {
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink);
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
.article__share a:hover { border-color: var(--accent); color: var(--accent-deep); }
.article__share svg { width: 1rem; height: 1rem; }

.back-link { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--step--1); color: var(--text-muted); text-decoration: none; }
.back-link:hover { color: var(--accent-deep); }
.back-link svg { transition: transform var(--dur-press) var(--ease); }

.empty-state { padding-block: var(--space-2xl); color: var(--text-muted); text-align: center; }

/* 11. Motion --------------------------------------------------------------- */
/* Scoped to .js so that, without JavaScript, nothing is ever hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  /* Fewer and gentler, not none. Whitelisting the transition properties keeps
     colour, shadow and opacity doing their work — those carry feedback, not
     movement — while transform, grid-template-rows and background-size snap
     instead of travelling. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, box-shadow,
                         opacity, outline-color !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 12. Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .newsletter, .mobile-nav { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; }
}

/* Package strip ------------------------------------------------------------
   A quiet price row for directly under the hero. Deliberately lighter than
   the full course cards further down the page, so the two don't compete. */
.package-strip--tight { padding-top: 0; }
/* Pull the strip up against the hero so the two read as one block. */
.hero:has(+ .package-strip--tight) { padding-bottom: var(--space-l); }
.package-strip--tight + .section::before { display: none; }

.package-strip__row {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 46em) {
  .package-strip__row { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}

.package-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.15rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.package-chip:hover,
.package-chip:focus-visible {
  border-color: var(--accent-tint);
  box-shadow: var(--shadow-s);
}

.package-chip__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--ink-deep);
}
.package-chip__tagline {
  font-size: var(--step--2);
  color: var(--text-muted);
  line-height: 1.4;
}
.package-chip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-s);
}
.package-chip__price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--accent-deep);
  line-height: 1;
}
.package-chip__icon {
  flex: none;
  color: var(--text-faint);
  transition: transform var(--dur-press) var(--ease), color var(--dur-press) var(--ease);
}
.package-chip__icon svg { width: 1.05rem; height: 1.05rem; }
.package-chip:hover .package-chip__icon {
  color: var(--accent-deep);
}

.package-strip__note {
  margin-top: var(--space-m);
  font-size: var(--step--2);
  color: var(--text-faint);
  max-width: 56ch;
}

/* Show on: mobile or desktop only --------------------------------------------
   The editor can limit a section — or a single image — to one kind of screen.
   The dividing line sits at 48em (768px): narrower than that counts as a
   phone. `!important` because these have to win against whatever `display`
   the element would otherwise take from its own layout rules. */
@media (max-width: 47.999em) {
  .only-desktop { display: none !important; }
}
@media (min-width: 48em) {
  .only-mobile { display: none !important; }
}

@media print {
  .only-mobile { display: none !important; }
  .only-desktop { display: revert !important; }
}

/* 13. Guestbook -------------------------------------------------------------
   The one page that is allowed a voice of its own: these are other people's
   words, hundreds of them, so the page is warmer and a little more hand-made
   than the rest — a wall of notes rather than a tidy grid. */
.guestbook { --gb-ink: #4a5c66; }
.guestbook .section-head { margin-bottom: var(--space-l); }

.gb-tools {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-m);
  padding-bottom: var(--space-m); margin-bottom: var(--space-l);
  border-bottom: 1px solid var(--line);
}
.gb-search { flex: 1 1 18rem; max-width: 26rem; gap: 0.45rem; display: grid; }
.gb-search label { font-size: var(--step--1); font-weight: 500; color: var(--ink-deep); }
.gb-count {
  font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-cool);
  border-radius: var(--radius-pill); padding: 0.45rem 0.9rem;
  margin-left: auto; white-space: nowrap;
}
.gb-tools { border-bottom-color: var(--text-faint); }
.guestbook .section-head .eyebrow::before { background: var(--ink); }

/* Columns rather than a grid: entries are wildly different lengths, and a
   grid would leave a ragged hole beside every short one. */
.gb-wall { columns: 1; column-gap: var(--space-m); }
@media (min-width: 46em) { .gb-wall { columns: 2; } }
@media (min-width: 72em) { .gb-wall { columns: 3; } }

.gb-card {
  break-inside: avoid; margin: 0 0 var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  box-shadow: var(--shadow-s);
}
.gb-card:nth-child(4n+1) { background: var(--paper-warm); border-color: #ece1d4; }
.gb-card:nth-child(4n+3) { background: var(--paper-cool); border-color: #e0e8ea; }

/* Every seventh card is the blue-grey itself. Scattered through a wall of
   pale notes it gives the page somewhere for the eye to land, without the
   whole thing turning into a dark block. Light on ink measures 5.97:1. */
.gb-card:nth-child(7n+4) {
  background: var(--ink); border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(53, 70, 79, 0.12), 0 14px 30px rgba(53, 70, 79, 0.10);
}
.gb-card:nth-child(7n+4) .gb-card__text { color: var(--text-onDark); }
.gb-card:nth-child(7n+4) .gb-card__caption {
  color: var(--accent-tint);
  border-top-color: rgba(253, 250, 247, 0.22);
}

/* One size for every greeting. The long ones used to shrink, which quietly
   said they mattered less. */
.gb-card__text { margin: 0; font-size: var(--step--1); line-height: 1.7; color: var(--text); }
.gb-card__text p { margin: 0; }
.gb-card__text p + p { margin-top: 0.7em; }

.gb-card__caption {
  margin-top: var(--space-s); padding-top: 0.7rem;
  border-top: 1px solid rgba(77, 100, 113, 0.12);
  font-family: var(--font-display); font-size: var(--step--1);
  font-style: italic; color: var(--gb-ink); line-height: 1.4;
}

.gb-empty { text-align: center; color: var(--text-muted); padding: var(--space-xl) 0; }
.gb-more { display: flex; justify-content: center; margin-top: var(--space-l); }
.gb-more[hidden] { display: none; }

/* 14. Speaking --------------------------------------------------------------- */
.speaking__grid { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); }
@media (min-width: 46em) { .speaking__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.speaking-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-m); padding: clamp(1.2rem, 2.6vw, 1.7rem);
}
.speaking-card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.speaking-card p { color: var(--text-muted); font-size: var(--step--1); }

.speaking__form {
  display: grid; gap: var(--space-m);
  background: var(--paper-warm); border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: clamp(1.4rem, 3.5vw, 2.4rem);
  max-width: 44rem;
}

/* 15. Videos ----------------------------------------------------------------- */
.videos__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 52em) { .videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }

.video-frame { position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--paper-cool); }
.video-frame::before { content: ""; display: block; padding-top: 56.25%; }
.video-frame__play, .video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video-frame__play { padding: 0; cursor: pointer; display: block; }
.video-frame--empty { display: grid; place-items: center; }
.video-frame--empty img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame__play img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.video-frame__badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; border-radius: var(--radius-pill);
  background: rgba(252, 250, 247, 0.92); color: var(--accent-deep);
  display: grid; place-items: center;
  box-shadow: var(--shadow-m);
  transition: transform var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.video-frame__badge svg { width: 1.4rem; height: 1.4rem; }
.video-frame__play:hover .video-frame__badge { background: var(--surface); }

.video-item__body { margin-top: var(--space-m); }
.video-item__body h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.prose--tight p { font-size: var(--step--1); color: var(--text-muted); }

.speaking__photo { margin-block: var(--space-xl); }

/* Paging a long list ------------------------------------------------------- */
.pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.35rem; margin-top: var(--space-2xl);
}
.pager__btn {
  min-width: 2.5rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: var(--step--1); color: var(--text-muted); background: transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.pager__btn:hover:not(:disabled) { color: var(--ink-deep); border-color: var(--ink-soft); }
.pager__btn[aria-current="page"] {
  background: var(--ink); border-color: var(--ink); color: var(--text-onDark); font-weight: 500;
}
.pager__btn:disabled { opacity: 0.4; cursor: default; }
.pager__btn--step { min-width: 0; }
@media (max-width: 30em) {
  /* On a narrow screen the step buttons carry the work; the numbers wrap. */
  .pager { gap: 0.3rem; }
  .pager__btn { padding: 0.45rem 0.6rem; min-width: 2.2rem; }
}
.post-list > [tabindex="-1"]:focus { outline: none; }
.post-list[data-paginate], .post-feature {
  transition: opacity 120ms var(--ease);
}
.post-list[data-swapping="true"], .post-feature[data-swapping="true"] {
  opacity: 0;
}

/* Form feedback ------------------------------------------------------------- */
.form-status {
  font-size: var(--step--1); border-radius: var(--radius-s);
  padding: 0.8rem 1rem; margin-top: var(--space-s);
}
.form-status:empty { display: none; }
.form-status[data-state="sending"] { background: var(--paper-cool); color: var(--ink-deep); }
.form-status[data-state="sent"] { background: #eaf3ee; color: #35604a; }
.form-status[data-state="fallback"] { background: var(--accent-wash); color: var(--accent-deep); }
/* The one moment the visitor is actually waiting for an answer. */
.form-status { transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.form-status[data-state="sent"] { animation: status-in 260ms var(--ease); }
@keyframes status-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hover motion ---------------------------------------------------------------
   A tap on a touch screen fires :hover and leaves it stuck until the next tap
   somewhere else. Colour and shadow survive that happily; movement does not.
   So everything that shifts a thing under the cursor lives behind a real
   pointer. Keyboard focus keeps its own affordances above, ungated. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover .btn__icon { transform: translateX(3px); }
  .btn--external:hover .btn__icon { transform: translate(2px, -2px); }
  .link:hover .btn__icon { transform: translateX(3px); }
  .card--link:hover { transform: translateY(-4px); }
  .nav__link:hover::after { transform: scaleX(1); }
  .course:hover { transform: translateY(-4px); }
  .book:hover { transform: translateY(-3px); }
  .post-card:hover .post-card__media img { transform: scale(1.035); }
  .post-feature:hover .post-feature__media img { transform: scale(1.03); }
  .back-link:hover svg { transform: translateX(-3px); }
  .package-chip:hover { transform: translateY(-3px); }
  .package-chip:hover .package-chip__icon { transform: translate(2px, -2px); }
  .video-frame__play:hover .video-frame__badge { transform: translate(-50%, -50%) scale(1.07); }
}