/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --color-cream: #f2efe4;
  --color-cream-light: #f4f0e3;
  --color-portrait-bg: #e4dfd0;
  --color-panel-cream: #f5f2e7;
  --color-backdrop: rgba(43, 38, 32, 0.42);
  --color-icon-on-teal: #f1ede0;

  /* Brand */
  --color-teal: #12454d;
  --color-teal-dark: #0c333a;
  --color-ink: #2b2620;

  /* Text — warm greys, darkest to lightest */
  --color-text-strong: #3b332a;
  --color-text: #463d30;
  --color-heading: #4a4033;
  --color-label: #4c4237;
  --color-body: #5c5546;
  --color-eyebrow: #8a7c64;
  --color-muted: #8a7f6c;

  --color-rule: rgba(70, 61, 48, 0.16);
  --color-border: rgba(70, 61, 48, 0.28);
  --color-border-mid: rgba(70, 61, 48, 0.35);
  --color-border-strong: rgba(70, 61, 48, 0.45);
  --color-hover-wash: rgba(70, 61, 48, 0.06);
  --color-hover-wash-strong: rgba(70, 61, 48, 0.08);

  /* On the teal panel */
  --color-on-teal: #f4f0e3;
  --color-on-teal-body: rgba(241, 237, 224, 0.85);
  --color-on-teal-muted: rgba(241, 237, 224, 0.68);
  --color-on-teal-rule: rgba(241, 237, 224, 0.18);

  /* Served by the Adobe Fonts kit linked in index.html. Instrument Serif and Mulish
     are the Google-hosted fallbacks if the kit fails to load. Local 'Avenir' is
     deliberately absent: it would shadow the kit on macOS and render differently there. */
  --font-serif: 'ivypresto-display', 'Instrument Serif', Georgia, serif;
  --font-sans: 'avenir-lt-pro', 'Mulish', sans-serif;

  /* The kit ships ivypresto-display at 100/300 and avenir-lt-pro at 200/400/500.
     Pinned to real faces so the browser never synthesises a weight it doesn't have. */
  --weight-serif: 300;
  --weight-label: 500;

  --radius-panel: 28px;
  --radius-portrait: 30px;
  --radius-card: 22px;
  --radius-pill: 999px;

  /* The text sits --gutter from the page's left edge and the portrait card sits
     --gutter from its right, so the two outer margins always match. */
  --page-max: 1400px;
  --gutter: clamp(24px, 5vw, 68px);
  /* The card floats this far from the top and bottom of the viewport, letting it
     fill the height of its column. Vertical only — the right edge uses --gutter. */
  --card-inset: 18px;
  /* Space between the text column and the portrait card. */
  --column-gap: 18px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-cream);
}

body {
  font-family: var(--font-sans);
  color: var(--color-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--color-teal); }
a:hover { color: var(--color-teal-dark); }

:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
}

/* ---------- Page shell ----------
   Grid, not flex, because the portrait must span both rows on desktop while the
   footer sits below the content column. Source order is content → portrait → footer,
   which is already the single-column order; desktop only re-places them. */
.page {
  min-height: 100vh;
  max-width: var(--page-max);
  margin-inline: auto;
  background: var(--color-cream);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "content portrait"
    "footer  portrait";
}

.content {
  grid-area: content;
  min-width: 0;
  display: flex;
}

/* Left-aligned, not centred: once --page-max exceeds ~1345px the left column grows
   past this 760px cap, and auto margins would push the text inward off the gutter. */
.content-inner {
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: clamp(28px, 4.5vh, 52px) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(38px, 5.5vh, 56px);
  /* Lets .headline size itself against this column's content box (100cqi). */
  container-type: inline-size;
}

/* ---------- Brand ---------- */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The supplied logo is the full lockup: the "Encounter" wordmark with
   "COACHING & THERAPY" set above its right shoulder. It replaces the two stacked
   text elements the design used to approximate it. Brown variant for cream ground;
   Logo-04 (cream) and Logo-05 (teal) sit alongside it for other backgrounds. */
.brand-logo {
  width: 165px;
  max-width: 100%;
  height: auto;
}

/* Mobile-only drawer trigger, sitting where a nav menu button normally would.
   Hidden on desktop, where the CTA button is already in view. */
.brand-menu {
  display: none;
  appearance: none;
  margin: 0;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-label);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, color 160ms ease;
}

/* Occludes the bubble behind it, so the two read as overlapping rather than as
   crossing outlines. Declared here, not as a `fill` attribute: var() in an SVG
   presentation attribute isn't reliably supported, and would silently fall back
   to `none`. */
.brand-menu .bubble-front {
  fill: var(--color-cream);
}

/* Because that fill is opaque page-colour, hover shifts the border and stroke
   rather than washing the background — a background tint would seam against it. */
.brand-menu:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}

/* ---------- Intro ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.eyebrow {
  font-size: 12px;
  font-weight: var(--weight-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

/* Each of the three phrases must hold a single line. "Psychological depth." is the
   longest, measuring 8.05x the font-size in IvyPresto, so capping font-size at
   100cqi/8.25 keeps it inside the column with a little slack. The plain clamp is a
   fallback for browsers without container queries.

   Sized to fit rather than forced with `white-space: nowrap`: if the webfonts ever
   fail, Georgia is 12% wider and would overflow the page instead of merely wrapping. */
.headline {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: clamp(42px, 4.6vw, 66px);
  font-size: min(clamp(42px, 4.6vw, 66px), calc(100cqi / 8.25));
  line-height: 1.08;
  letter-spacing: 0.002em;
  color: var(--color-heading);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  animation: pulse 2.4s ease-in-out infinite;
}

.status-label {
  font-size: 11px;
  font-weight: var(--weight-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-label);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.72); }
}

/* ---------- Lede ---------- */
.lede {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lede-body {
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-body);
  max-width: 58ch;
}

.lede-pull {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: clamp(24px, 2.1vw, 29px);
  line-height: 1.38;
  color: var(--color-text);
  max-width: 24em;
}

/* ---------- Services panel ---------- */
.services {
  background: var(--color-teal);
  border-radius: var(--radius-panel);
  padding: clamp(28px, 3.2vw, 44px) clamp(26px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--color-on-teal-rule);
}

.service:first-child {
  padding-top: 0;
  border-top: 0;
}

.service-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: 26px;
  color: var(--color-on-teal);
}

.service-body {
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-on-teal-body);
}

.services-note {
  padding-top: 22px;
  border-top: 1px solid var(--color-on-teal-rule);
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--color-on-teal-muted);
}

/* ---------- Contact ---------- */
.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.contact-body {
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-body);
  max-width: 56ch;
}

/* A <button>, so the font must be set explicitly — buttons don't inherit it. */
.button {
  appearance: none;
  border: none;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.button-primary {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 17px 30px;
}

.button-primary:hover {
  background: var(--color-teal);
  color: var(--color-cream);
}

/* ---------- Footer ----------
   Mirrors .content-inner's width and inline padding so the rule lines up with the
   copy above it, even though the two are now separate grid items. */
.site-footer {
  grid-area: footer;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(38px, 5.5vh, 56px) var(--gutter) clamp(26px, 3vh, 40px);
}

.site-footer-inner {
  border-top: 1px solid var(--color-rule);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ---------- Portrait ---------- */
/* No max-width or auto margins: the column's own `fr` track sizes it, so the card's
   right edge lands exactly --gutter from the page edge and stays there. Centring it
   inside a wider column is what threw the left/right balance off. */
.portrait {
  grid-area: portrait;
  min-width: min(320px, 100%);
  padding: var(--card-inset) var(--gutter) var(--card-inset) var(--column-gap);
}

.portrait-frame {
  position: sticky;
  top: var(--card-inset);
  height: calc(100vh - 2 * var(--card-inset));
  min-height: 520px;
  border-radius: var(--radius-portrait);
  overflow: hidden;
  background: var(--color-portrait-bg);
}

/* The supplied photo is already framed at 2:3, close to the frame's own ratio, so
   cover barely crops. The bias keeps the head in shot if the frame goes narrower. */
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Single column: content, then the portrait, then the footer. The portrait stops
   being sticky and is capped so it doesn't run away on tall phones. */
@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "content"
      "portrait"
      "footer";
  }

  /* Single column: there's no portrait beside it, so the text recentres. */
  .content-inner {
    margin-inline: auto;
  }

  /* The card centres on the page too, so both its insets are the gutter. */
  .portrait {
    padding-inline: var(--gutter);
    padding-top: clamp(32px, 4vh, 44px);
  }

  .portrait-frame {
    position: static;
    height: min(62vh, 520px);
    min-height: 0;
  }

  /* At full size the wordmark competes with the headline for the eye. */
  .brand-logo {
    width: 150px;
  }

  .brand-menu {
    display: inline-flex;
  }
}

/* ---------- Contact drawer ----------
   Stays mounted so the panel animates out as well as in. `visibility` is what
   actually removes it from the tab order; delaying it by the slide duration lets
   the close transition finish before the drawer becomes unreachable. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

.drawer[data-open] {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.drawer[data-open] .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: min(430px, calc(100vw - 28px));
  background: var(--color-panel-cream);
  border-radius: var(--radius-panel);
  box-shadow: -18px 0 60px rgba(43, 38, 32, 0.25);
  transform: translateX(calc(100% + 46px));
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: clamp(28px, 4.5vh, 42px) clamp(24px, 3vw, 36px);
  overflow: auto;
}

.drawer[data-open] .drawer-panel { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.drawer-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: 31px;
  line-height: 1.15;
  color: var(--color-text);
  max-width: 9em;
}

.drawer-close {
  appearance: none;
  margin: 0;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border-mid);
  background: transparent;
  color: var(--color-label);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease;
}

.drawer-close:hover { background: var(--color-hover-wash-strong); }

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  text-decoration: none;
  background: transparent;
  transition: background-color 160ms ease;
}

.contact-card:hover { background: var(--color-hover-wash); }

.contact-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-icon-on-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.contact-name {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: 22px;
  color: var(--color-text-strong);
}

.contact-sub {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* A long address must not widen the card past the panel. */
.contact-sub-email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-arrow {
  font-size: 17px;
  color: var(--color-label);
}

/* margin-top: auto pins this to the foot of the panel when the cards don't fill
   it. If the panel ever overflows, the auto margin collapses and the note simply
   follows the cards rather than being pushed out of reach. */
.drawer-note {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}