/* =========================================================
   Michal Goldstein — emotional therapy through movement

   One warm paper tone runs the whole site. The only saturated
   things on it are the call-to-action and the ghost of a child's
   handprints soaked into the hero.
   ========================================================= */

:root {
  /* Warmth comes from hue, but welcome comes from value: these are all
     high-value and low-saturation. The family is the colour of light
     through a hand held up to a lamp — apricot, coral, warm gold — which
     is where this practice's own handprints come from. */
  --paper:      #FBF4EC;   /* the ground: warm ivory */
  --paper-warm: #F8E9DC;   /* alternating band: an apricot wash */
  --paper-deep: #F2DAC6;   /* soft panels */
  --white:      #FFFDF9;   /* cards — warmed, never pure white */

  --ink:        #3A2A22;   /* warm dark brown */
  --ink-soft:   #74594C;   /* warm taupe */

  --amber:      #B85835;   /* burnt coral — the call to action */
  --amber-deep: #9A4A28;   /* the same note, dark enough to set as text */

  /* The hero is a pool of light: brightest where the sentence sits, with
     warmth gathering at the edges where the handprints are */
  --hero-core:  #FEF9F3;
  --hero-mid:   #FAEBDB;
  --hero-edge:  #F6E2CD;
  --ink-mid:    #5A473D;   /* the hero's sub-headline, which needs more
                              contrast than --ink-soft over the artwork */

  --hairline:   rgba(74, 45, 32, 0.14);
  --hairline-2: rgba(74, 45, 32, 0.24);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 36px;
  --space-5: 52px;
  --space-6: 76px;
  --space-7: clamp(72px, 10vw, 132px);

  --radius:      10px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-soft: 0 2px 6px rgba(74, 42, 28, 0.06), 0 12px 32px rgba(74, 42, 28, 0.09);
  --shadow-lift: 0 4px 10px rgba(74, 42, 28, 0.09), 0 20px 48px rgba(74, 42, 28, 0.15);

  --measure: 64ch;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: "Assistant", "Heebo", "Segoe UI", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.75;
  font-size: 17.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: "Frank Ruhl Libre", "Assistant", Georgia, serif;
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

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

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

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: var(--space-3);
}


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease,
              box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.btn-primary {
  background: var(--amber);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(154, 74, 40, 0.24), 0 10px 24px rgba(154, 74, 40, 0.2);
}

.btn-primary:hover {
  background: var(--amber-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(154, 74, 40, 0.3), 0 16px 34px rgba(154, 74, 40, 0.26);
}

.btn-primary:active { transform: translateY(0); }

.btn-quiet {
  background: transparent;
  color: var(--amber-deep);
  border: 1.5px solid var(--hairline-2);
}

.btn-quiet:hover {
  background: var(--paper-warm);
  border-color: var(--amber);
  transform: translateY(-2px);
}

.btn-quiet:active { transform: translateY(0); }

.btn-small { padding: 10px 20px; font-size: 0.92rem; }
.btn-large { padding: 15px 32px; font-size: 1.05rem; }

.btn-icon-svg {
  width: 19px; height: 19px;
  flex-shrink: 0;
  transition: transform .25s ease;
}

.btn:hover .btn-icon-svg { transform: scale(1.12) rotate(-4deg); }

/* Quiet text link — the way out of a minimal page */
.textlink {
  display: inline-block;
  color: var(--amber-deep);
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--hairline-2);
  transition: border-color .25s ease, color .25s ease;
}

.textlink:hover { border-bottom-color: var(--amber); color: var(--amber); }


/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque, not translucent: over the dark hero a see-through bar goes
     muddy, and the logo's multiply blend has nothing solid to sit on,
     which leaves a pale square around the mark. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--hairline);
  box-shadow: 0 6px 24px rgba(74, 42, 28, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  min-width: 0;
}

.brand-mark { width: 46px; height: 46px; flex-shrink: 0; display: block; }

/* The logo file has a white ground; multiply drops it onto the paper.
   Its paper is #FEFEFE rather than pure white, so lift it the last step
   or a faint square shows through the translucent header. */
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: brightness(1.05);
}

.brand-name {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}


/* ---------- Section scaffolding ---------- */

.section { padding-block: var(--space-7); }

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

.eyebrow {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--amber-deep);
  letter-spacing: 0.11em;
  margin-bottom: var(--space-2);
}

.section-title { font-size: clamp(1.65rem, 3.1vw, 2.3rem); max-width: 22ch; }
.section-head { margin-bottom: var(--space-5); }


/* ---------- Photos ---------- */

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-deep);
  box-shadow: var(--shadow-soft);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}

.photo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.photo:hover img { transform: scale(1.045); }


/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(82vh, 700px);
  padding-block: var(--space-6);
  background:
    radial-gradient(ellipse 64% 62% at 50% 46%,
      var(--hero-core) 0%, var(--hero-mid) 44%, var(--hero-edge) 100%),
    var(--hero-mid);
}

/* The gradient already puts its lightest point where the words are; this
   is the last of the insurance for the sub-headline where a print runs
   beneath it. Paints above .hero-art (same layer, later in tree order)
   and below .hero-inner (z-index 1). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 46% 42% at 50% 46%,
              rgba(254, 249, 243, 0.62) 0%,
              rgba(254, 249, 243, 0.3) 48%,
              transparent 76%);
  pointer-events: none;
}

/* Signature: a child's handprints soaked into the paper behind the
   sentence. Multiply drops the file's white ground away, the filter
   bleaches the paint back toward the page's own warmth, and the radial
   mask lets the edges dissolve so it reads as the paper itself rather
   than a picture placed on it. */
.hero-art {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: min(1080px, 132vw);
  max-width: none;
  z-index: 0;
  mix-blend-mode: multiply;
  --art-opacity: 0.5;
  opacity: var(--art-opacity);
  filter: saturate(0.5) sepia(0.8) hue-rotate(-12deg) brightness(1.06) contrast(0.92);
  /* Wide enough to keep the fingertips and the outer palms, which the
     tighter mask was fading out — that clipping, more than the opacity,
     was what stopped them reading as hands. */
  -webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 32%, transparent 90%);
          mask-image: radial-gradient(ellipse 64% 64% at 50% 50%, #000 32%, transparent 90%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 740px;
  animation: hero-rise .85s cubic-bezier(.2,.7,.3,1) both;
}

/* Above-the-fold content animates on load, never on intersection */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* One custom property drives the art's opacity, so the keyframe and the
   breakpoints can never drift apart from each other */
@keyframes hero-soak {
  from { opacity: 0; transform: translate(-50%, -46%) scale(1.03); }
  to   { opacity: var(--art-opacity); transform: translate(-50%, -46%); }
}

.hero-art { animation: hero-soak 1.4s cubic-bezier(.2,.7,.3,1) .1s both; }

.hero-title {
  font-size: clamp(2rem, 4.8vw, 3.25rem);
  line-height: 1.24;
  margin: 0;
  max-width: 20ch;
  font-weight: 500;
}

.hero-title { color: var(--ink); }

/* The four verbs are the practice — they carry the emphasis */
.hero-title .accent {
  display: block;
  margin-top: 0.14em;
  font-weight: 800;
  color: var(--amber-deep);
}

.hero-sub {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink-mid);
  max-width: 44ch;
  margin: 0;
}

/* ---------- Areas of practice ---------- */

/* Ten of them, so this is a list rather than a card grid: two columns
   fill exactly, it stays compact on a page meant to be quiet, and the
   names do the scanning work that ten invented icons could not. */
.areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(var(--space-4), 6vw, var(--space-7));
}

.area {
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
  min-width: 0;
}

/* The top row opens the list, so it carries no rule above it */
.areas > .area:nth-child(-n + 2) { border-top: none; padding-top: 0; }

.area-name {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
}

.area-note {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* ---------- Statement: the one sentence the home page keeps ---------- */

.statement-inner {
  max-width: 660px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.statement-text {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}


/* ---------- Galleries ---------- */

.work-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 210px;
  gap: var(--space-3);
}

/* Seven photos tile a 3x3 field exactly: one standing portrait,
   one wide texture, five squares. No holes, no orphan row. */
.work-gallery .photo:nth-child(1) { grid-row: span 2; }
.work-gallery .photo:nth-child(2) { grid-column: span 2; }

.about-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--space-3);
}

/* Thirteen photos leave an orphan in any plain grid, so the opening
   image absorbs the remainder — a different shape at each breakpoint,
   and a full field every time. */
.about-gallery .photo:first-child { grid-column: span 2; grid-row: span 2; }


/* ---------- Method (about page) ---------- */

/* Three facets of one idea — not a numbered sequence, so they get a
   label rather than a counter. */
.method-block {
  max-width: var(--measure);
  padding-block: var(--space-4);
  border-top: 1px solid var(--hairline);
}

/* :first-of-type would match the section head, not the first block */
.section-head + .method-block { border-top: none; padding-top: 0; }

.method-deck {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--amber-deep);
  margin-bottom: 0.9em;
}

.method-subtitle { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: 0.45em; }

.method-block p { color: var(--ink-soft); }

/* Someone else's words, so they get the panel and the attribution */
.quote {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-deep);
  border-radius: var(--radius-lg);
}

.quote blockquote {
  margin: 0;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.quote figcaption {
  margin-top: 0.6em;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--amber-deep);
}

/* Her own words, so they get no panel — just air and one line each,
   which is how the sentence is written */
.cascade {
  display: flex;
  flex-direction: column;
  gap: 0.28em;
  margin: var(--space-4) 0 0;
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--amber-deep);
}

/* ---------- About ---------- */

.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--space-4), 5vw, var(--space-6));
  align-items: center;
  padding-block: var(--space-7);
}

.about-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 4;
}

.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

.about-content { min-width: 0; }

.about-role {
  color: var(--amber-deep);
  font-weight: 700;
  font-size: 1.08rem;
  margin-top: -0.4em;
  margin-bottom: 1em;
}

.about-content > p { color: var(--ink-soft); max-width: var(--measure); }

.about-edu-title { font-size: 1.15rem; margin: var(--space-4) 0 var(--space-2); }

.credentials-strip { display: grid; gap: var(--space-1); max-width: 46ch; }

.credential {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .3s ease, transform .3s ease;
}

.credential:hover { border-color: var(--hairline-2); transform: translateX(-3px); }

.credential-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  flex-shrink: 0;
  color: var(--amber-deep);
}

.credential-icon svg { width: 20px; height: 20px; }

.credential-text { margin: 0; font-size: 0.97rem; color: var(--ink); line-height: 1.45; }

.section-cta { text-align: center; margin-top: var(--space-6); }


/* ---------- Closing: contact and footer as one ---------- */

.closing { background: var(--paper-warm); border-top: 1px solid var(--hairline); }

.contact-inner { max-width: 620px; text-align: center; padding-block: var(--space-7); }

.contact-inner .section-title { max-width: none; }

.contact-lead { color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 2em; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  text-align: center;
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-4);
}

.closing > .footer-inner:first-child { border-top: none; }

.footer-name {
  font-family: "Frank Ruhl Libre", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.footer-copy { color: var(--ink-soft); font-size: 0.86rem; margin: 0; }


/* ---------- Scroll reveal (progressive enhancement) ---------- */

.reveal { opacity: 1; transform: none; }

html.js-enabled .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

html.js-enabled .reveal.is-visible { opacity: 1; transform: none; }

html.js-enabled .stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }


/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .about-inner { grid-template-columns: 1fr; padding-block: var(--space-6); }
  .about-photo { aspect-ratio: 4 / 3; max-height: 420px; }

  .about-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
  .about-gallery .photo:first-child { grid-column: span 3; grid-row: span 1; }

  /* Two columns still tile exactly (2 + 6 = 8 cells), and the standing
     portrait keeps its shape rather than being cropped to a band. */
  .work-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 175px; }
  .work-gallery .photo:nth-child(1) { grid-row: span 2; }
  .work-gallery .photo:nth-child(2) { grid-column: span 1; }

  /* Keep both hands inside the viewport rather than pushing them
     off the edges, which leaves only the empty gap between them. */
  .hero-art { width: min(880px, 118vw); --art-opacity: 0.47; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .areas { grid-template-columns: 1fr; }
  .areas > .area:nth-child(2) {
    border-top: 1px solid var(--hairline);
    padding-top: var(--space-3);
  }
  .work-gallery { grid-auto-rows: 132px; gap: var(--space-2); }
  .brand-name { font-size: 1rem; }
  .brand-mark { width: 40px; height: 40px; }
  .btn-small { padding: 9px 16px; font-size: 0.86rem; }
  .btn-large { padding: 14px 26px; font-size: 1rem; }
  .hero { min-height: min(78vh, 620px); }
  /* The stacked buttons make the mobile hero tall, so the hands ride
     up to sit behind the sentence rather than behind the buttons. */
  .hero-art { width: 116vw; top: 40%; --art-opacity: 0.44; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .quote { padding: var(--space-3); }
  .about-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 145px;
    gap: var(--space-2);
  }
  .about-gallery .photo:first-child { grid-column: span 2; grid-row: span 1; }
  .footer-inner { flex-direction: column; }
}


/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html.js-enabled .reveal { opacity: 1; transform: none; }
  .hero-inner { animation: none; }
  .hero-art { animation: none; opacity: var(--art-opacity); }
}