:root {
  --black: #11100f;
  --cream: #f4efe6;
  --white: #fffdf9;
  --pink: #ff4f87;
  --pink-dark: #ec326d;
  --grey: #79746d;
  --line: rgba(17, 16, 15, 0.18);
  --display: "Space Grotesk", Arial, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --hand: "Nanum Pen Script", cursive;
  --max: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --header: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--black);
  background: var(--cream);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  /* `clip` keeps the bleed contained without turning body into a scroll
     container, which would silently disable every position: sticky below. */
  overflow-x: clip;
}

body,
button,
input,
select {
  font-family: var(--body);
}

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

a {
  color: inherit;
}

button,
input,
select {
  font-size: inherit;
}

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 999;
  background: var(--pink);
  padding: 0.75rem 1rem;
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  height: var(--header);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(var(--max), 100%);
  height: 100%;
  margin: auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font: 700 1.25rem/1 var(--display);
  text-decoration: none;
}

.logo span {
  font: 500 0.66rem/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.footer-nav a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.site-nav li:nth-last-child(2) a {
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1rem;
}

.site-nav a:hover,
.footer-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.nav-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header) + clamp(3rem, 8vh, 7rem)) var(--gutter) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  isolation: isolate;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 940px;
}

.eyebrow,
.section-label {
  margin: 0 0 1.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow::before,
.section-label::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  margin-right: 0.8rem;
  vertical-align: middle;
  background: currentColor;
}

.eyebrow.light {
  color: var(--white);
}

.hero h1,
.reveal h2,
.about h2,
.topics h2,
.pricing h2,
.not-for-you h2,
.booking h2,
.random-question h2,
.legal-page h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.hero h1 {
  margin: 0;
  font-size: clamp(4.4rem, 9.7vw, 9rem);
}

em {
  color: var(--pink);
  font-style: normal;
}

.hero-lede {
  max-width: 38ch;
  margin: 2rem 0;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  min-height: 54px;
  border: 0;
  border-radius: 0;
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button-dark {
  background: var(--black);
  color: var(--white);
}

.button-pink {
  background: var(--pink);
  color: var(--black);
}

.button-pink:hover {
  background: #ff72a0;
}

.hero-portrait {
  position: relative;
  z-index: 1;
  height: min(72vw, 760px);
  min-height: 560px;
  align-self: end;
}

.hero-portrait img {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 50%;
  width: min(930px, 86vw);
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-54%);
  filter: drop-shadow(18px 20px 0 rgba(17, 16, 15, 0.08));
}

.pink-shape {
  position: absolute;
  z-index: 1;
  width: 68%;
  aspect-ratio: 0.85;
  right: 3%;
  bottom: 4%;
  background: var(--pink);
  clip-path: polygon(13% 0, 100% 10%, 88% 100%, 0 89%);
  transform: rotate(3deg);
}

/* Sits in the empty strip right of the silhouette, arrow pointing back at her. */
.hero-portrait .hand-note {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 4%;
  width: min(11rem, 32%);
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 0.95;
  text-align: right;
  transform: rotate(-6deg);
  transform-origin: top right;
}

.hand-arrow {
  display: block;
  width: 4.5rem;
  height: auto;
  margin: 0.1rem auto 0 0;
}

.hand-note {
  font: 400 clamp(1.8rem, 3vw, 3rem)/1 var(--hand);
}

.hero-index {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.conversation {
  background: var(--black);
  color: var(--white);
  padding: clamp(6rem, 12vw, 11rem) var(--gutter);
}

.conversation-intro {
  width: min(1100px, 100%);
  margin: 0 auto clamp(5rem, 12vh, 9rem);
}

.conversation-intro h2 {
  margin: 0;
  font: 700 clamp(3rem, 7vw, 7rem)/0.95 var(--display);
  letter-spacing: -0.06em;
}

.conversation-intro h2 span {
  color: #8f8a84;
}

/* Base layout is a plain readable list: it is what visitors get without
   JavaScript and when they ask for reduced motion. The pinned stage below is
   layered on top of it only once the script confirms motion is welcome. */
.question-scroller {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
}

.question-stack {
  margin: 0;
  padding: 0;
  list-style: none;
}

.question-card {
  position: relative;
}

.question-card:nth-child(1) { z-index: 6; --note-tilt: -1.4deg; }
.question-card:nth-child(2) { z-index: 5; --note-tilt: 1.15deg; }
.question-card:nth-child(3) { z-index: 4; --note-tilt: -0.7deg; }
.question-card:nth-child(4) { z-index: 3; --note-tilt: 1.35deg; }
.question-card:nth-child(5) { z-index: 2; --note-tilt: -1.05deg; }
.question-card:nth-child(6) { z-index: 1; --note-tilt: 0.85deg; }

.question-note {
  --peel: 0;
  position: relative;
  min-height: min(60svh, 560px);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.6rem, 5vw, 3.8rem) clamp(2.2rem, 4.5vw, 3.6rem);
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--black);
  border-radius: 3px 3px 10px 4px;
  transform: rotate(var(--note-tilt, -1.1deg));
  transform-origin: 16% 100%;
  backface-visibility: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 calc(18px + var(--peel) * 70px) calc(40px + var(--peel) * 70px)
      rgba(0, 0, 0, calc(0.32 + var(--peel) * 0.22));
}

/* Enhanced mode: one pinned stage, notes piled up like a pad of paper. */
.conversation.is-peeling .question-scroller {
  height: calc(var(--peel-steps, 6) * 72vh);
}

/* The sticky offset roughly centres the pinned note (top 20vh + 60svh tall),
   so a sheet tears away in the middle of the viewport, not under the header. */
.conversation.is-peeling .question-stage {
  position: sticky;
  top: 20vh;
  height: min(60svh, 580px);
}

/* The dead scroll after the last note tears away is exactly the sticky offset
   plus the stage height plus whatever sits below the pile, so all three are
   trimmed here and the reveal is pulled up over the empty tail of the pile. */
.conversation.is-peeling {
  padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

.conversation.is-peeling + .reveal {
  margin-top: calc(-1 * min(37svh, 350px));
  position: relative;
}

.conversation.is-peeling .question-stack,
.conversation.is-peeling .question-card,
.conversation.is-peeling .question-note {
  position: absolute;
  inset: 0;
}

.conversation.is-peeling .question-note {
  min-height: 0;
  margin: 0;
  will-change: transform, opacity;
}

.question-note::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 50%;
  width: 4.6rem;
  height: 1.4rem;
  background: rgba(255, 244, 196, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform: translateX(-50%) rotate(-2deg);
  opacity: calc(1 - var(--peel) * 2.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* Shading that deepens as the sheet curls away from the pad. */
.question-note::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, calc(var(--peel) * 0.5)) 0%,
    rgba(0, 0, 0, 0) 55%
  );
}

.question-card.pink .question-note {
  background: var(--pink);
}

.question-card.cream .question-note {
  background: var(--cream);
}

.question-card.pink .question-note::before,
.question-card.cream .question-note::before {
  background: rgba(255, 255, 255, 0.38);
}

.question-note p {
  margin: 0;
  max-width: 13ch;
  text-align: center;
  font: 700 clamp(2.4rem, 5.9vw, 5.1rem)/0.98 var(--display);
  letter-spacing: -0.06em;
}

.reveal {
  min-height: 100svh;
  padding: clamp(6rem, 12vw, 11rem) var(--gutter);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--white);
}

.reveal-copy > p:first-child {
  max-width: 50ch;
  margin: 0 auto 2rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.reveal .hand-note {
  margin: 0;
  color: var(--pink-dark);
  transform: rotate(-5deg);
}

.reveal h2 {
  margin: 1rem 0 2.5rem;
  font-size: clamp(5rem, 15vw, 14rem);
}

.reveal h2 span {
  color: var(--pink);
}

.about,
.topics,
.pricing,
.booking,
.legal-page {
  padding: clamp(6rem, 12vw, 11rem) var(--gutter);
}

.about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 0.35fr) minmax(0, 1fr);
  background: var(--cream);
}

.about-copy {
  max-width: 1050px;
}

.about h2 {
  max-width: 12ch;
  margin: 0 0 4rem;
  font-size: clamp(3.5rem, 7vw, 7rem);
}

.about-copy > p:not(.mega-accent, .about-close) {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.about-lines {
  margin: 3rem 0;
  border-top: 1px solid var(--black);
}

.about-lines p {
  margin: 0;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  font: 600 clamp(1.2rem, 2.4vw, 2.25rem)/1.2 var(--display);
}

.mega-accent {
  margin: 0 0 3rem;
  color: var(--pink);
  font: 700 clamp(6rem, 18vw, 17rem)/0.75 var(--display);
  letter-spacing: -0.095em;
}

.about-close {
  max-width: 35ch;
  margin: 0 0 0 auto;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

.about-stamp {
  position: absolute;
  left: var(--gutter);
  bottom: 10%;
  width: 120px;
  aspect-ratio: 1;
  border: 2px solid var(--black);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font: 400 1.55rem/0.7 var(--hand);
  transform: rotate(-12deg);
}

.topics {
  background: var(--pink);
}

.topics h2 {
  margin: 0 0 clamp(4rem, 9vw, 8rem);
  font-size: clamp(4rem, 10vw, 10rem);
}

.topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--black);
}

.topic-list li {
  padding: clamp(1.5rem, 3vw, 3rem) 0;
  border-bottom: 1px solid rgba(17, 16, 15, 0.45);
  font: 600 clamp(1.6rem, 3.7vw, 3.9rem)/1.05 var(--display);
  letter-spacing: -0.045em;
}

.topic-list li:nth-child(even) {
  padding-left: 12%;
}

.topics-outro {
  margin: clamp(4rem, 9vw, 8rem) 0 0 auto;
  max-width: 22ch;
  font: 600 clamp(2rem, 4vw, 4rem)/1.1 var(--display);
}

.topics-outro em {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.14em;
}

.pricing {
  background: var(--white);
}

.pricing h2 {
  margin: 0 0 5rem;
  font-size: clamp(4rem, 9vw, 9rem);
}

.price-list {
  border-top: 2px solid var(--black);
}

.price-list article {
  min-height: 190px;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
  display: grid;
  grid-template-columns: 1fr auto minmax(180px, 0.6fr);
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--black);
}

.price-list p {
  margin: 0;
}

.price-list article > div p {
  font: 600 clamp(1.6rem, 3vw, 3rem)/1 var(--display);
  letter-spacing: -0.045em;
}

.price-list article > div span {
  color: var(--grey);
}

.price-list strong {
  color: var(--pink);
  font: 700 clamp(2.2rem, 5vw, 5rem)/1 var(--display);
  letter-spacing: -0.07em;
  white-space: nowrap;
}

.price-note {
  max-width: 25ch;
}

.not-for-you {
  padding: clamp(6rem, 12vw, 11rem) var(--gutter);
  background: var(--black);
  color: var(--white);
}

.not-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 9rem);
}

.not-for-you h2 {
  margin: 0;
  font-size: clamp(4rem, 9vw, 9rem);
}

.not-for-you h2 span {
  color: var(--pink);
}

.not-grid > div:last-child {
  padding-top: 5rem;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.not-grid ul {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  font: 600 clamp(1.4rem, 2.4vw, 2.35rem)/1.3 var(--display);
}

.not-grid li::before {
  content: "×";
  display: inline-block;
  width: 1.3em;
  color: var(--pink);
}

.not-punch {
  margin: 4rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid #777;
  font-weight: 600;
}

.booking {
  background: var(--cream);
}

.booking-head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 0.4fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 5rem;
}

.booking h2 {
  margin: 0;
  font-size: clamp(4rem, 10vw, 10rem);
}

.booking-head > p {
  max-width: 30ch;
  font-size: 1.2rem;
}

#booking-form {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 16px 16px 0 var(--pink);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

fieldset.field {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.field legend {
  font-size: 0.85rem;
  font-weight: 700;
}

.field label > span {
  font-weight: 400;
}

input,
select {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0;
  color: var(--black);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--black);
  border-radius: 0;
}

.service-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.choice {
  min-height: 96px;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--line);
  cursor: pointer;
}

.choice:has(input:checked) {
  border: 2px solid var(--black);
  background: var(--pink);
}

.choice input,
.consent input {
  width: auto;
  min-height: auto;
  margin: 0.3rem 0 0;
  accent-color: var(--black);
}

.choice small {
  display: block;
  margin-top: 0.3rem;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1rem 0;
}

.form-status {
  min-height: 1.5rem;
  font-weight: 600;
}

.form-status.ok {
  color: #176c3a;
}

.form-status.err {
  color: #b31f36;
}

.button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.random-question {
  min-height: 85svh;
  padding: clamp(6rem, 12vw, 11rem) var(--gutter);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: var(--white);
}

.random-question .hand-note {
  margin: 0;
  color: var(--pink-dark);
}

.random-question h2 {
  margin: 1rem 0 2rem;
  font-size: clamp(4.5rem, 11vw, 11rem);
}

.random-question .button {
  margin-bottom: 1.75rem;
}

.question-output {
  width: min(800px, 100%);
  min-height: 5.5em;
  margin-bottom: 0;
  display: grid;
  place-items: center;
  font: 600 clamp(1.4rem, 2.8vw, 2.7rem)/1.15 var(--display);
  letter-spacing: -0.035em;
}

.question-output.is-changing {
  animation: question-in 350ms ease;
}

@keyframes question-in {
  from { opacity: 0; transform: translateY(15px) rotateX(-15deg); }
  to { opacity: 1; transform: none; }
}

.site-footer {
  padding: 4rem var(--gutter) 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  color: var(--white);
  background: var(--black);
}

.footer-brand {
  font: 700 clamp(2.5rem, 5vw, 5rem)/0.85 var(--display);
  letter-spacing: -0.07em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 1.25rem 2rem;
}

.site-footer > p {
  grid-column: 1 / -1;
  margin: 3rem 0 0;
  padding-top: 1rem;
  color: #aaa49d;
  border-top: 1px solid #403e3b;
  font-size: 0.8rem;
}

/* Legal page keeps the original content in the redesigned visual system. */
.legal-page {
  max-width: 1050px;
  margin: var(--header) auto 0;
}

.legal-page h1 {
  margin: 0 0 2rem;
  font-size: clamp(4rem, 9vw, 8rem);
}

.legal-page h2 {
  max-width: none;
  margin: 3rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font: 700 clamp(1.5rem, 2.5vw, 2.25rem)/1.1 var(--display);
  letter-spacing: -0.04em;
}

.legal-page p,
.legal-page li {
  max-width: 72ch;
  color: #4d4944;
}

.cert-link {
  color: var(--pink-dark);
  font-weight: 700;
}

@media (max-width: 900px) {
  :root {
    --header: 66px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle i,
  .nav-toggle i::before,
  .nav-toggle i::after {
    width: 24px;
    height: 2px;
    display: block;
    position: relative;
    background: var(--black);
    transition: transform 180ms ease;
  }

  .nav-toggle i::before,
  .nav-toggle i::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle i::before { top: -7px; }
  .nav-toggle i::after { top: 7px; }

  .nav-toggle[aria-expanded="true"] i { background: transparent; }
  .nav-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

  .site-nav {
    position: absolute;
    top: var(--header);
    left: 0;
    right: 0;
    display: none;
    background: var(--cream);
    border-bottom: 2px solid var(--black);
  }

  .site-nav.open {
    display: block;
  }

  .site-nav ul {
    padding: 1.25rem var(--gutter) 2rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav a {
    display: block;
    padding: 0.8rem 0;
    font-size: 1rem;
  }

  .site-nav li:nth-last-child(2) a {
    margin-top: 0.5rem;
    padding: 0.8rem;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header) + 3rem);
  }

  .hero-copy {
    z-index: 4;
  }

  /* The forced line "co máš dělat." is ~5.5em wide, so on narrow phones a 4rem
     floor no longer fits the gutter-padded column and the headline breaks apart.
     Cap the size at whatever that line can actually occupy. */
  .hero h1 {
    font-size: min(clamp(4rem, 14vw, 7rem), calc((100vw - 2 * var(--gutter)) / 5.9));
  }

  .hero-portrait {
    width: min(700px, 105%);
    height: 60svh;
    min-height: 440px;
    justify-self: end;
    margin: -3rem -10% 0 0;
  }

  .hero-portrait img {
    transform: translateX(-50%);
  }

  .hero-index {
    display: none;
  }

  /* Portrait bleeds off the right edge here, so the note moves to its left. */
  .hero-portrait .hand-note {
    top: 4.6rem;
    right: auto;
    left: 4%;
    width: min(9.5rem, 46%);
    font-size: clamp(1.25rem, 5.4vw, 1.7rem);
    text-align: left;
    transform: rotate(-5deg);
    transform-origin: top left;
  }

  .hero-portrait .hand-arrow {
    width: 3.4rem;
    margin: 0.1rem 0 0 auto;
    transform: scaleX(-1);
  }

  .about {
    grid-template-columns: 1fr;
  }

  .about-stamp {
    display: none;
  }

  .not-grid,
  .booking-head {
    grid-template-columns: 1fr;
  }

  .not-grid > div:last-child {
    padding-top: 0;
  }

  .price-list article {
    grid-template-columns: 1fr auto;
  }

  .price-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .logo span {
    display: none;
  }

  .hero {
    min-height: 900px;
    align-content: start;
  }

  .hero-lede {
    max-width: 24ch;
  }

  .hero-portrait {
    height: 500px;
    min-height: 0;
    margin-top: -1rem;
  }

  /* Below the CTA, level with her head, where the left strip is still empty. */
  .hero-portrait .hand-note {
    top: 2.2rem;
    left: -4%;
    width: min(8.5rem, 42%);
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  }

  .hero-portrait .hand-arrow {
    width: 2.9rem;
  }

  .conversation.is-peeling .question-scroller {
    height: calc(var(--peel-steps, 6) * 68vh);
  }

  .conversation.is-peeling .question-stage {
    top: 22vh;
    height: min(56svh, 500px);
  }

  .conversation.is-peeling + .reveal {
    margin-top: calc(-1 * min(33svh, 280px));
  }

  .question-note {
    min-height: 56svh;
    padding: 2.2rem 1.25rem 1.6rem;
  }

  .question-note p {
    max-width: 12ch;
    font-size: clamp(1.95rem, 9.6vw, 3.2rem);
  }

  .about h2 {
    margin-bottom: 2.5rem;
  }

  .mega-accent {
    font-size: 23vw;
  }

  .topic-list li:nth-child(even) {
    padding-left: 0;
  }

  .price-list article {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .form-grid,
  .service-choices {
    grid-template-columns: 1fr;
  }

  #booking-form {
    box-shadow: 8px 8px 0 var(--pink);
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    justify-content: flex-start;
  }
}

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

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

  /* Force the plain stack back, whatever the script decided. */
  .conversation.is-peeling .question-scroller,
  .conversation.is-peeling .question-stage {
    position: static;
    height: auto;
  }

  .conversation.is-peeling .question-stack,
  .conversation.is-peeling .question-card {
    position: relative;
    inset: auto;
  }

  .conversation.is-peeling .question-note {
    position: relative;
    inset: auto;
    min-height: min(60svh, 560px);
    margin-bottom: 2.5rem;
    opacity: 1 !important;
    transform: rotate(var(--note-tilt, -1.1deg)) !important;
  }
}