@font-face {
  font-family: Fahkwang;
  src: url("assets/fahkwang-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Keep the hero's heading on the same lines while Fahkwang loads. */
@font-face {
  font-family: "Fahkwang Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Roboto");
  size-adjust: 116%;
}

@font-face {
  font-family: Manrope;
  src: url("assets/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("assets/libre-baskerville-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --cream: #f1e6df;
  --paper: #faf6f2;
  --sand: #ddcbc0;
  --wine: #81413c;
  --wine-hover: #65312e;
  --navy: #17395e;
  --ink: #354b5c;
  --blue: #afc5d2;
  --line: #d7c8bd;
  /* Lighter navy for surfaces that must lift off the navy background. */
  --navy-soft: #214768;
  /* Cream at 25% for hairlines on wine and navy. */
  --rule-on-dark: #f1e6df40;
  --shadow: #0002;
  --font-body: Manrope, Arial, sans-serif;
  --font-heading: Fahkwang, "Fahkwang Fallback", Arial, sans-serif;
  --font-accent: "Libre Baskerville", Georgia, serif;
  --gutter: clamp(2.5rem, 10vw, 10rem);
  --radius: .5rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Artwork sits behind content; only the skip link sits above navigation. */
  --layer-content: 1;
  --layer-skip: 20;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { margin: 0; background: var(--navy); color: var(--navy); font: 400 1rem/1.75 var(--font-body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .3em; }
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
main:focus { outline: none; }
::selection { background: var(--sand); color: var(--navy); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: var(--font-heading); font-weight: 400; text-wrap: balance; letter-spacing: -.035em; }
h2 { font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.18; }
h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
p { text-wrap: pretty; }
em { font-family: var(--font-accent); font-weight: 400; line-height: 1.3; letter-spacing: -.04em; }
address { font-style: normal; }
.wrap { width: min(80rem, calc(100% - var(--gutter))); margin-inline: auto; }
.section { position: relative; isolation: isolate; padding-block: clamp(5rem, 9vw, 8.5rem); }
.decoration { pointer-events: none; user-select: none; }
.skip-link { position: absolute; z-index: var(--layer-skip); top: 1rem; left: 1rem; padding: .75rem 1rem; background: var(--cream); color: var(--navy); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
/* Words for screen readers only, such as where a link leads: clipped, not hidden, so they are still read. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.625rem; padding: 1rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--cream); color: var(--navy); font-size: .875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; transition: background-color 180ms ease, transform 180ms var(--ease); }
.header__contact:focus-visible, .hero .button:focus-visible { outline-color: var(--navy); }
.contact .button:focus-visible { outline-color: var(--cream); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.75rem; color: inherit; font-size: .875rem; font-weight: 500; text-decoration-thickness: 1px; }
.text-link[href*="wa.me"] { gap: .75rem; }
.text-link > span:not(.whatsapp-icon, .visually-hidden) { flex-shrink: 0; font-size: 1.25rem; transition: transform 200ms var(--ease); }
.brand { display: block; flex-shrink: 0; width: 9.75rem; }
.brand img { width: 100%; }
.brand__compact { display: none; }

.header { position: fixed; z-index: 10; inset: 0 0 auto; padding-top: 1rem; pointer-events: none; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 4.75rem; padding: .625rem 1.5rem; border-radius: 999px; background: var(--cream); pointer-events: auto; transition: background-color 220ms ease, border-radius 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease); }
.js .header:not(.is-scrolled) .header__inner { border-radius: 0; background: transparent; }
.header.is-scrolled .header__inner { background: var(--cream); box-shadow: 0 12px 28px var(--shadow); transform: scale(.965); }
.nav { display: flex; gap: clamp(1.25rem, 2.3vw, 2.5rem); }
.nav a, .header__contact { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .8125rem; text-decoration: none; }
.nav a { transition: color 160ms ease; }
.header__contact { justify-content: center; gap: 1.25rem; padding: .5rem 1rem; border-radius: calc(var(--radius) / 2); background: var(--navy); color: var(--cream); }
.mobile-menu { display: none; }

/* Match the original hero's photo scale, fade, and centered brand artwork. */
.hero { position: relative; isolation: isolate; min-height: 100dvh; background: var(--cream); color: var(--navy); }
.hero::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, var(--cream) 50%, transparent 60%); content: ""; pointer-events: none; }
.hero::after { position: absolute; z-index: 1; inset: auto 0 0; height: clamp(8rem, 18vh, 14rem); background: linear-gradient(180deg, transparent, var(--cream)); content: ""; pointer-events: none; }
.header-sentinel { position: absolute; top: 6rem; width: 1px; height: 1px; pointer-events: none; }
.hero__grid { position: relative; z-index: 3; display: flex; align-items: center; min-height: 100dvh; padding-block: 8rem 5rem; }
.hero__content { width: min(48%, 38rem); }
.hero__audience { margin-bottom: 1.375rem; font-size: .875rem; }
.hero h1 { max-width: 11.5em; font-size: clamp(2.875rem, 4.6vw, 4.375rem); line-height: 1.12; }
.hero h1 em { display: block; margin-top: .05em; color: var(--wine); }
.hero__description { max-width: 27rem; margin-block: 1.75rem 2rem; font-size: 1rem; }
.hero__availability { margin-top: 1rem; font-size: .75rem; }
.hero .button { background: var(--wine); color: var(--cream); }
.hero__portrait { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.hero__image { position: absolute; top: 50%; right: 0; display: block; width: 50%; transform: translateY(-50%); }
.hero__image img { display: block; width: 100%; height: auto; }
.hero__botanical { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; opacity: .5; }
.hero__botanical img { width: 1080px; height: 1080px; max-width: none; }

.challenges { background: var(--cream); padding-top: clamp(4rem, 6vw, 6rem); }
.section-intro { max-width: 48rem; }
.section-intro h2 { color: var(--wine); }
.section-intro > p { max-width: 35rem; margin-top: 1.5rem; color: var(--ink); }
/* The dandelion stands on the central axis; the topics branch off to both sides, each with its seed on the axis side. */
.challenges__board { display: grid; grid-template-columns: minmax(0, 1fr) 15rem minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4.5rem); margin-top: 4rem; }
.challenges__art { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.challenges__flower { --open: 1; display: block; width: 11rem; height: auto; overflow: visible; }
.challenges__art p { margin-top: 2rem; color: var(--wine); text-align: center; font: italic 1.125rem/1.6 var(--font-accent); }
.challenge-list { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(4.5rem, auto); gap: 0 normal; margin: 0; padding: 0; list-style: none; }
.challenge-list li { position: relative; max-width: 26rem; padding-block: .75rem; }
.challenge-list li:nth-child(odd) { grid-column: 1; justify-self: end; padding-right: 3.5rem; text-align: right; }
.challenge-list li:nth-child(even) { grid-column: 3; justify-self: start; padding-left: 3.5rem; }
.challenge-list li:nth-child(1) { grid-row: 1 / span 2; --tilt: -10deg; }
.challenge-list li:nth-child(2) { grid-row: 2 / span 2; --tilt: 6deg; }
.challenge-list li:nth-child(3) { grid-row: 3 / span 2; --tilt: -4deg; }
.challenge-list li:nth-child(4) { grid-row: 4 / span 2; --tilt: 9deg; }
.challenge-list li:nth-child(5) { grid-row: 5 / span 2; --tilt: -7deg; }
.challenge-list li:nth-child(6) { grid-row: 6 / span 2; --tilt: 3deg; }
.challenge-list h3 { margin-bottom: .625rem; color: var(--wine); }
.challenge-list p { color: var(--ink); font-size: .9375rem; }
.challenge-seed, .challenges__flyer, .challenges__air img { width: 2.35rem; height: auto; transform-origin: 50% 22%; pointer-events: none; }
.challenge-seed { position: absolute; top: .55rem; left: 0; rotate: var(--tilt); }
.challenge-list li:nth-child(odd) .challenge-seed { right: 0; left: auto; scale: -1 1; }
/* script.js arms the section when motion is allowed: the flower opens and hands a seed to each topic.
   Without JavaScript or with reduced motion, everything is already in place. */
.challenges__flower .flower__petal { transform-box: view-box; transform-origin: var(--rx) var(--ry); transform: rotate(calc(var(--d) * (1 - var(--open)) * .88)) scale(calc(.9 + .1 * var(--open))); transition: transform 1300ms var(--ease) calc(var(--r) * 260ms); }
.challenges.is-armed .challenges__flower { --open: 0; }
.challenges.is-armed .flower__contour { opacity: 0; transition: opacity 1400ms ease; }
.challenges.is-armed:is(.is-bloomed, .is-complete) .flower__contour { opacity: 1; }
.challenges.is-armed .challenge-list li { transition: border-color 700ms ease; }
.challenges.is-armed .challenge-list li:not(.is-in) { border-color: transparent; }
.challenges.is-armed .challenge-list li:not(.is-in) :is(h3, p), .challenges.is-armed .challenge-list li:not(.has-seed) .challenge-seed { opacity: 0; }
.challenges.is-armed .challenges__art p { opacity: 0; transform: translateY(.5rem); transition: opacity 1000ms ease, transform 1000ms var(--ease); }
.challenges.is-armed.is-complete .challenges__art p { opacity: 1; transform: none; }
.challenges.is-arming, .challenges.is-arming * { transition: none !important; }
.challenges__flyer { position: fixed; z-index: 5; top: 0; left: 0; will-change: transform, opacity; }
.challenges__air { position: absolute; z-index: 2; inset: 0; overflow: clip visible; pointer-events: none; }
.challenges__air img { position: absolute; top: 0; left: 0; will-change: transform; }
.challenges__outro { display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.challenges__outro p { max-width: 36rem; color: var(--ink); font-size: .9375rem; }
.challenges__outro .text-link { flex-shrink: 0; color: var(--wine); }

/* The seal spins in (script.js) without making the page scroll sideways. */
.tcc { overflow-x: clip; background: var(--wine); color: var(--cream); }
.tcc__heading { max-width: 58rem; margin-bottom: 3.5rem; }
.tcc__heading > p { max-width: 42rem; margin-top: 1.75rem; font-size: 1rem; }
.tcc__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(4rem, 9vw, 9rem); align-items: center; }
.tcc__visual { position: relative; padding-bottom: 2rem; }
.tcc__image { width: 100%; aspect-ratio: 1.04; object-fit: cover; object-position: 40% center; border-radius: var(--radius); }
.tcc__seal { position: absolute; right: -3.25rem; bottom: -1.25rem; width: 8rem; padding: 1rem; border-radius: 50%; background: var(--wine); transform: rotate(-12deg); }
.tcc__lead { font-size: .8125rem; }
.tcc__steps { margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.tcc__steps li { padding-block: 1.5rem; border-top: 1px solid var(--rule-on-dark); }
.tcc__steps h3 { margin-bottom: .75rem; font: 400 1.5625rem/1.35 var(--font-heading); letter-spacing: -.035em; }
.tcc__steps p { font-size: .9375rem; }

.about { overflow: clip; background: var(--paper); }
.about__grid { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); max-width: 74rem; }
.about__content { position: relative; z-index: var(--layer-content); }
.about h2 { color: var(--wine); }
.about__credential { margin-block: 1.5rem 1.75rem; font-size: .9375rem; font-weight: 500; line-height: 1.65; }
.about__content > p:not(.about__credential) { max-width: 32rem; margin-top: 1rem; color: var(--ink); font-size: .9375rem; }
.about__portrait { position: relative; }
.about__flower { position: absolute; z-index: 2; bottom: 3rem; left: -1.5rem; width: 4rem; height: 6rem; object-fit: contain; opacity: .6; }
.about__frame { position: relative; isolation: isolate; height: min(35rem, 65svh); overflow: clip; border-radius: 50% 50% var(--radius) var(--radius); background: var(--cream); }
.about__photo { position: relative; z-index: var(--layer-content); width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about__portrait figcaption { position: relative; margin-top: 1rem; color: var(--wine); font-size: .8125rem; text-align: right; }
.about__video { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.video-link { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.video-link[hidden] { display: none; }
.video-link__thumbnail { position: relative; flex: 0 0 8rem; overflow: hidden; border-radius: calc(var(--radius) / 2); }
.video-link__thumbnail img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }
.video-link__play { position: absolute; inset: 0; display: grid; place-content: center; width: 2.75rem; height: 2.75rem; margin: auto; padding-left: .1875rem; border: 1px solid var(--cream); border-radius: 50%; background: var(--wine); color: var(--cream); transition: transform 180ms var(--ease); }
.video-link__copy { display: grid; gap: .5rem; }
.video-link__copy strong { font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.video-link__copy > span { color: var(--wine); font-size: .75rem; text-decoration: underline; text-underline-offset: .25em; }
/* The presentation is a vertical Short: a portrait frame that fits the screen height. */
.video-player { display: block; width: min(100%, 18rem, 45svh); aspect-ratio: 9 / 16; border: 0; border-radius: var(--radius); background: var(--navy); }
.video-fallback { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: .5rem; color: var(--ink); font-size: .75rem; }

.location { background: var(--navy); color: var(--cream); }
.location__heading { max-width: 60rem; margin-bottom: 3.5rem; }
.location__heading em { color: var(--blue); }
/* The address follows the online card; the rest of the gallery's height goes below it. */
.location__mosaic { display: grid; grid-template-columns: .95fr 1.3fr; grid-template-rows: auto 1fr; gap: 2rem 5rem; }
.location__online { position: relative; isolation: isolate; overflow: hidden; align-self: start; padding: 2.5rem; border-radius: var(--radius); background: var(--navy-soft); }
.location__online h3 { position: relative; font: 400 2.25rem/1.25 var(--font-heading); letter-spacing: -.035em; }
.location__online p { position: relative; max-width: 29rem; margin-top: 1.375rem; font-size: .9375rem; }
.location__pattern { position: absolute; z-index: -1; right: -4rem; top: -2rem; width: 70%; opacity: .24; }
.location__address { grid-column: 1; padding: .5rem 2.5rem 0; }
.location__address h3 { margin-bottom: .875rem; }
.location__address address { font-size: .9375rem; }
.location__address .text-link { margin-top: 1rem; font-size: .8125rem; }
.location__gallery { --overlap: 2.5rem; position: relative; grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr .4fr; align-items: end; align-self: start; padding-bottom: 2rem; }
.location__room { grid-area: 1 / 1 / 2 / 3; width: 84%; aspect-ratio: .86; object-fit: cover; object-position: center 55%; border-radius: var(--radius); }
.location__reception { grid-area: 1 / 2; width: calc(100% + var(--overlap)); max-width: none; margin-left: calc(-1 * var(--overlap)); border: .5rem solid var(--navy); border-radius: var(--radius); transform: translateY(2rem); }
/* The reception photo hangs below the room, so the caption keeps to the side of it. */
.location__gallery figcaption { grid-column: 1; padding: 1rem var(--overlap) 0 0; font-size: .75rem; text-wrap: pretty; }
.appointment-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin: 3rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--rule-on-dark); }
.appointment-facts > div + div { padding-left: 2rem; border-left: 1px solid var(--rule-on-dark); }
.appointment-facts dt { margin-bottom: .5rem; color: var(--blue); font-size: .8125rem; }
.appointment-facts dd { margin: 0; font-size: 1rem; }

.faq { background: var(--cream); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.2fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.faq__intro { position: relative; }
.faq h2 { color: var(--wine); font-size: clamp(2.25rem, 3.65vw, 3.25rem); }
.faq__intro > p { max-width: 24rem; margin-top: 1.5rem; color: var(--ink); font-size: .9375rem; }
.faq__flower { width: 5.5rem; margin: 1.75rem 0 0 1rem; opacity: .75; }
.faq__items { border-top: 1px solid var(--line); }
.faq__items details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; padding: 1.375rem .25rem; font-size: .9375rem; font-weight: 500; line-height: 1.55; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
/* Empty alt text keeps the sign out of the question's name, which already announces open or closed; the plain content first is for browsers without alt text. */
.faq summary::after { content: "+"; content: "+" / ""; flex-shrink: 0; font-size: 1.5rem; font-weight: 400; color: var(--wine); }
.faq details[open] summary::after { content: "−"; content: "−" / ""; }
.faq details > div { padding: 0 2.5rem 1.625rem .25rem; color: var(--ink); font-size: .9375rem; }
.faq details p + p { margin-top: .875rem; }
.faq details a { color: var(--wine); }

.contact { overflow: clip; background: var(--wine); color: var(--cream); padding-block: 7rem 7.5rem; }
.contact__inner { position: relative; z-index: var(--layer-content); text-align: center; }
.contact h2 { max-width: 50rem; margin-inline: auto; font-size: clamp(2.5rem, 4.8vw, 4.5rem); }
.contact h2 em { display: inline-block; }
.contact__inner > p { max-width: 31rem; margin: 1.75rem auto 2rem; font-size: 1rem; }
.contact .button { color: var(--wine); }
.whatsapp-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; background: currentColor; mask: url("assets/whatsapp.svg") center / contain no-repeat; }
.contact__inner .contact__note { max-width: 30rem; margin-block: 1.25rem 0; font-size: .75rem; }
.contact__flower { position: absolute; width: clamp(8rem, 15vw, 16rem); left: -1.5rem; bottom: -2.5rem; opacity: .55; }
.contact__line { position: absolute; width: 44rem; max-width: none; right: -31rem; top: 2rem; opacity: .3; transform: rotate(55deg); }
.footer { padding-block: 3.25rem 1.5rem; background: var(--navy); color: var(--cream); }
.footer__main { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
.footer__main > p, .footer__instagram, .footer__top { font-size: .8125rem; }
.footer__instagram { text-decoration: none; }
.footer__instagram > span:last-child { display: block; margin-top: .5rem; text-decoration: underline; text-underline-offset: .3em; }
.footer__top { display: inline-flex; align-items: center; gap: 1rem; min-height: 2.75rem; }
.footer__wordmark { display: block; width: 100%; margin-block: 3.5rem 2.5rem; }
.footer__wordmark img { width: 100%; }
.footer__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-on-dark); font-size: .75rem; }
.privacy { max-width: 28rem; }
.privacy summary { min-height: 2.75rem; padding-block: .75rem; cursor: pointer; }
.privacy__body { padding-block: .5rem 1rem; }
.privacy p { font-size: .8125rem; }
.privacy p + p { margin-top: .625rem; }
.privacy__choice { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
.privacy__change { min-height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; cursor: pointer; }

/* The notice asking to measure the visit floats like the scrolled header: cream, with the same shadow. It sits above the
   header and below the skip link; script.js shows it only while no choice is saved. */
.consent { position: fixed; z-index: 15; right: 1.5rem; bottom: 1.5rem; width: min(23.5rem, calc(100vw - 3rem)); padding: 1.25rem 1.375rem 1.375rem; border-radius: 1.25rem; background: var(--cream); color: var(--navy); box-shadow: 0 12px 28px var(--shadow); opacity: 0; visibility: hidden; translate: 0 1rem; transition: opacity 320ms ease, translate 520ms var(--ease), visibility 0s linear 520ms; }
.consent.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.consent__title { font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.25; letter-spacing: -.035em; }
.consent__title em { color: var(--wine); }
.consent__text { margin-top: .5rem; color: var(--ink); font-size: .875rem; line-height: 1.6; }
.consent__text a { color: var(--navy); font-weight: 500; text-decoration-thickness: 1px; white-space: nowrap; }
/* Where the full text would cover the hero's button, the short one takes its place. */
.consent__text--short, .consent.is-compact .consent__text--full { display: none; }
.consent.is-compact .consent__text--short { display: block; }
/* "Recusar" and "Aceitar" weigh the same: same shape, size and color. */
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.consent__choice { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--navy); border-radius: calc(var(--radius) / 2); background: transparent; color: var(--navy); font-size: .875rem; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.consent__choice:focus-visible { outline-offset: 3px; }
.consent__choice:active { translate: 0 1px; }
/* While the notice is on screen, the end of the page and the keyboard focus stay clear of it. */
.has-consent { scroll-padding-bottom: var(--consent-space); }
.has-consent body { padding-bottom: var(--consent-space); }

@media (hover: hover) {
  .button:hover { background: var(--paper); transform: translateY(-2px); }
  .hero .button:hover { background: var(--wine-hover); }
  .nav a:hover { color: var(--wine); }
  .header__contact:hover { background: var(--navy-soft); }
  .text-link:hover > span:not(.whatsapp-icon, .visually-hidden) { transform: translate(2px, -2px); }
  .text-link:hover, .footer a:hover, .footer__instagram:hover > span:last-child { text-decoration-thickness: 2px; }
  .video-link:hover .video-link__play { transform: scale(1.08); }
  .faq summary:hover { color: var(--wine); }
  .consent__choice:hover { background: var(--navy); color: var(--cream); }
  .consent__text a:hover, .privacy__change:hover { text-decoration-thickness: 2px; }
}
.button:active { transform: translateY(1px); }

/* script.js brings the text in (animateText): headings are split into words, and rules are drawn over their borders.
   Content stays visible without JavaScript or animation support. */
.word, .word > span { display: inline-block; }
.word > span { transform-origin: 0 100%; }
/* A written heading's words are cut just below their own line, so each line rises from its baseline. */
.is-rising .word { clip-path: inset(-.4em -.3em -.16em -.3em); }
.text-rule { position: absolute; max-width: 100%; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  /* The hero text waits for its entrance; the <head> script shows it anyway after 3 s. */
  .hero-pending :is(.hero__audience, .hero h1, .hero__description, .hero__availability, .hero__botanical img) { opacity: 0; }
  /* The dandelion loads once the page has loaded (animateChallenges); out of the layout, it does not start with the hero. */
  .hero-pending .challenges__flower { display: none; }
  .hero__portrait { animation: photo-enter 850ms var(--ease) both; }
  @keyframes photo-enter { from { opacity: .65; } to { opacity: 1; } }
  /* An answer slides open where ::details-content is supported, and closes faster than it opens. */
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 170ms cubic-bezier(.4, 0, .2, 1), content-visibility 170ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; transition-duration: 340ms; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
  @supports (animation-timeline: view()) {
    .drift { animation: botanical-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes botanical-drift { from { transform: translateY(18px); } to { transform: translateY(-18px); } }
  }
  /* The whole flower sways around the foot of its stem (set by script.js), so the compositor turns it without repainting
     the drawing. */
  .challenges.is-armed .challenges__flower { will-change: transform; animation: flower-sway 7s ease-in-out infinite alternate paused; }
  .challenges.is-armed.is-visible .challenges__flower { animation-play-state: running; }
  /* Each topic is revealed by a soft-edged curtain of the section's cream that slides away from its seed, clipped to the
     text; the compositor slides it, where a moving mask repaints the text every frame. */
  .challenges.is-armed .challenge-list li.is-in :is(h3, p) { position: relative; overflow: hidden; overflow: clip; }
  .challenges.is-armed .challenge-list li.is-in :is(h3, p)::after { position: absolute; inset: 0 auto 0 0; width: 250%; background: linear-gradient(90deg, transparent 45%, var(--cream) 55%); content: ""; pointer-events: none; animation: challenge-curtain 1300ms cubic-bezier(.33, 0, .2, 1) both; }
  .challenges.is-armed .challenge-list li.is-in p::after { animation-delay: 140ms; }
  @keyframes flower-sway { from { rotate: -.9deg; } to { rotate: .9deg; } }
  @keyframes challenge-curtain { from { transform: translateX(-60%); } to { transform: none; } }
  @keyframes challenge-curtain-back { from { transform: none; } to { transform: translateX(-60%); } }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 56.3125em) {
  .challenges.is-armed .challenge-list li:nth-child(odd).is-in :is(h3, p)::after { background: linear-gradient(270deg, transparent 45%, var(--cream) 55%); animation-name: challenge-curtain-back; }
}

/* Breakpoints are in em (1em = 16px by default), so a larger text size set in the browser switches to the narrower layout sooner. */
@media (max-width: 90em) {
  .hero__image { width: 58%; }
}

@media (max-width: 68.75em) {
  .header__inner { gap: 1.25rem; padding-inline: 1.125rem; }
  .brand { width: 8.5rem; }
  .nav { gap: 1.25rem; }
  .header__contact { gap: .625rem; padding-inline: .875rem; }
  .hero__content { width: 48%; }
  .challenges__outro { gap: 2rem; }
  .tcc__grid { gap: 4rem; }
  .tcc__steps h3 { font-size: 1.375rem; }
  .location__mosaic { gap: 2rem 3rem; }
  .location__online { padding: 2rem; }
  .location__address { padding-inline: 2rem; }
  .faq__grid { gap: 3rem; }
  .contact__flower { left: -3.5rem; }
}

@media (max-width: 64em) {
  .hero__image { top: 0; right: -13%; width: 74%; transform: none; }
}

@media (max-width: 56.25em) {
  /* Phones and tablets read one list; the flower becomes a band that sticks to the bottom until the last seed lands. */
  .challenges__board { display: flex; flex-direction: column; align-items: center; margin-top: 3.5rem; }
  .challenges__art { order: 2; z-index: 3; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 1.25rem; height: 8.5rem; padding-top: 1rem; overflow: hidden; background: linear-gradient(to top, var(--cream) 80%, transparent); }
  .challenges.is-armed .challenges__art { position: sticky; bottom: 0; }
  .challenges.is-armed .challenges__art.is-released { position: relative; }
  .challenges__flower { flex: none; width: 6.5rem; -webkit-mask-image: linear-gradient(#000 42%, transparent 60%); mask-image: linear-gradient(#000 42%, transparent 60%); }
  .challenges__art p { align-self: center; margin: 0 0 1rem; text-align: left; font-size: 1rem; }
  .challenge-list { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 1.5rem 2rem; }
  .challenge-list li { max-width: none; padding-block: .625rem; }
  .challenge-list li:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; padding-inline: 2.6rem 0; text-align: left; }
  .challenge-seed, .challenges__flyer { width: 1.75rem; }
  .challenge-list li:nth-child(n) .challenge-seed { top: .85rem; right: auto; left: 0; scale: none; }
}

@media (max-width: 56.25em) and (min-width: 48em) {
  .header__inner { gap: 1rem; }
  .brand { width: 7.5rem; }
  .nav { gap: 1rem; }
  .nav a, .header__contact { font-size: .75rem; }
  .hero__image::after { position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(180deg, transparent, var(--cream)); content: ""; pointer-events: none; }
  .hero__grid { padding-top: 7rem; }
  .hero h1 { font-size: 2.75rem; }
  .hero__description { font-size: .9375rem; }
  .tcc__grid { gap: 3rem; }
  .tcc__seal { right: -2rem; width: 6rem; }
  .about__grid { grid-template-columns: 1.15fr 1fr; gap: 2.5rem; }
  .video-link__thumbnail { flex-basis: 6rem; }
  .video-link__copy strong { font-size: .8125rem; }
  .location__mosaic { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .location__online { padding: 1.5rem; }
  .location__address { padding-inline: 0; }
  .location__gallery { align-self: center; }
  .location__online h3 { font-size: 1.875rem; }
  .appointment-facts { gap: 1.5rem; }
  .appointment-facts > div + div { padding-left: 1.5rem; }
  .appointment-facts dd { font-size: .875rem; }
  .faq__grid { grid-template-columns: .85fr 1.2fr; gap: 2.5rem; }
  .footer__main { flex-wrap: wrap; }
}

@media (max-width: 47.9375em) {
  :root { --gutter: 2.5rem; }
  .consent { right: .75rem; bottom: .75rem; left: .75rem; width: auto; padding: 1rem 1.125rem 1.125rem; border-radius: 1rem; }
  .consent__title { font-size: 1.25rem; }
  .consent__text { font-size: .8125rem; line-height: 1.55; }
  .consent__actions { margin-top: .875rem; }
  body { font-size: .9375rem; }
  .section { padding-block: 4.5rem; }
  h2 { font-size: clamp(2.125rem, 7.5vw, 3.375rem); }
  .header { padding-top: .75rem; }
  .header-sentinel { top: .5rem; }
  .header__inner { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .375rem 1rem; padding: .875rem 1rem .375rem; }
  .brand { width: 8.5rem; }
  .header__contact { grid-column: 2; grid-row: 1; padding: .5rem .75rem; font-size: .75rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: .5rem; padding-top: .375rem; }
  .nav a { font-size: .75rem; }
  .header.is-scrolled .header__inner { grid-template-columns: auto 1fr auto; gap: .5rem; min-height: 4rem; padding: .375rem .75rem; transform: scale(.98); }
  .header.is-scrolled .brand { grid-column: 1; grid-row: 1; width: 2.75rem; padding: .25rem; }
  .header.is-scrolled .brand__full, .header.is-scrolled .nav { display: none; }
  .header.is-scrolled .brand__compact { display: block; }
  .header.is-scrolled .header__contact { grid-column: 3; grid-row: 1; }
  .header.is-scrolled .mobile-menu { display: block; grid-column: 2; grid-row: 1; justify-self: end; }
  .mobile-menu summary { display: flex; align-items: center; min-height: 2.75rem; padding-inline: .625rem; font-size: .8125rem; font-weight: 500; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  /* The menu opens just under the header, flush with its right edge. */
  .mobile-menu nav { position: absolute; top: calc(100% + .375rem); right: 0; display: grid; width: min(18rem, 100%); padding: .5rem; border-radius: var(--radius); background: var(--cream); box-shadow: 0 14px 28px var(--shadow); }
  .mobile-menu nav a { display: flex; align-items: center; min-height: 2.75rem; padding-inline: .875rem; font-size: .875rem; text-decoration: none; }
  .mobile-menu nav a:hover { color: var(--wine); }
  /* The photo takes the row after the text, so on a short screen it moves down instead of running under the text. */
  .hero { display: grid; grid-template-rows: auto minmax(23rem, 1fr); min-height: 110dvh; }
  .hero::before { display: none; }
  .hero__grid { min-height: 0; padding-block: 9.5rem 0; }
  .hero__content { width: 100%; }
  .hero h1 { max-width: 12em; font-size: clamp(2.1875rem, 10vw, 3.75rem); }
  .hero h1 em { margin-top: 0; }
  .hero__description { max-width: 31rem; margin-block: 1.25rem 1.5rem; font-size: .9375rem; }
  .hero__availability { margin-top: .875rem; }
  /* The photo fades in from where the text ends; the shelves above her head stay hidden above that edge. */
  .hero__portrait { grid-row: 2; -webkit-mask-image: linear-gradient(transparent, #0009 3.5rem, #000 13rem); mask-image: linear-gradient(transparent, #0009 3.5rem, #000 13rem); }
  .hero__image { inset: -8rem 0 0; width: auto; transform: none; }
  .hero__image img { height: 100%; object-fit: cover; object-position: center 37%; }
  .hero__botanical { display: none; }
  .challenges { padding-top: 4rem; }
  .section-intro > p { margin-top: 1.25rem; font-size: .9375rem; }
  .challenges__board { margin-top: 2.5rem; }
  .challenge-list { grid-template-columns: 1fr; gap: 0; }
  .challenge-list li { padding-block: 1.125rem; border-top: 1px solid var(--line); }
  .challenge-list h3 { margin-bottom: .5rem; font-size: 1.125rem; }
  .challenge-list p { font-size: .9375rem; }
  .challenges__outro { display: block; margin-top: 1rem; padding-top: 1.5rem; }
  .challenges__outro .text-link { margin-top: .875rem; }
  .tcc__heading { margin-bottom: 2rem; }
  .tcc__heading > p { margin-top: 1.5rem; font-size: .9375rem; }
  .tcc__grid { grid-template-columns: 1fr; gap: 2rem; }
  .tcc__visual { width: calc(100% - 1.5rem); padding-bottom: 1rem; }
  .tcc__image { aspect-ratio: 1.2; }
  .tcc__seal { width: 6rem; right: -2rem; bottom: -.75rem; padding: .75rem; }
  .tcc__steps { margin-bottom: 1rem; }
  .tcc__steps li { padding-block: 1.375rem; }
  .tcc__steps h3 { font-size: 1.375rem; }
  /* minmax(0, 1fr): a wide item, like the video link with larger text, cannot stretch the column past the screen. */
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .about__content { display: contents; }
  .about h2 { grid-row: 1; }
  .about__credential { grid-row: 2; margin: 0; font-size: .875rem; }
  .about__portrait { grid-row: 3; width: 100%; justify-self: end; margin-block: .5rem; }
  .about__frame { height: min(23rem, 58svh); }
  .about__flower { left: -.75rem; width: 3rem; height: 4.5rem; }
  .about__portrait figcaption { font-size: .75rem; }
  .about__content > p:not(.about__credential) { max-width: none; margin: 0; }
  .about__video { margin-top: .5rem; }
  .video-link__thumbnail { flex-basis: 7.75rem; }
  .video-link__copy strong { font-size: .875rem; }
  .location__heading { margin-bottom: 2rem; }
  .location__mosaic { display: flex; flex-direction: column; gap: 2rem; }
  .location__online { width: 100%; padding: 1.75rem; }
  .location__online h3 { font-size: 1.875rem; }
  .location__online p { margin-top: 1rem; }
  .location__gallery { --overlap: 1.5rem; width: 100%; max-width: 32rem; padding-bottom: 1rem; align-self: center; }
  .location__room { aspect-ratio: .95; }
  .location__reception { border-width: .375rem; transform: translateY(1rem); }
  .location__address { padding: 0; }
  .appointment-facts { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; padding-top: .75rem; }
  .appointment-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
  .appointment-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-on-dark); }
  .appointment-facts dt { margin: 0; font-size: .75rem; }
  .appointment-facts dd { font-size: .875rem; text-align: right; }
  .faq__grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq h2 { font-size: clamp(2.125rem, 7.5vw, 3.375rem); }
  .faq__intro > p { max-width: 29rem; margin-top: 1.25rem; }
  .faq__flower { display: none; }
  .faq summary { min-height: 4.5rem; gap: 1rem; padding-block: 1.125rem; }
  .faq details > div { padding-right: 1rem; }
  .contact { padding-block: 5rem; }
  .contact h2 { font-size: clamp(2rem, 8.4vw, 3.375rem); }
  .contact__inner > p { max-width: 28rem; font-size: .9375rem; }
  .contact__inner .contact__note { max-width: 18rem; }
  .contact__flower { width: 6.5rem; bottom: -3rem; left: -3.5rem; opacity: .3; }
  .contact__line { width: 22rem; top: 3rem; right: -17rem; opacity: .24; }
  .footer { padding-top: 2.5rem; }
  .footer__main { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__top { justify-self: start; }
  .footer__wordmark { margin-block: 2rem; }
  .footer__bottom { display: grid; gap: .5rem; }
}

@media (max-width: 22.5em) {
  .header__inner { column-gap: .5rem; padding-inline: .75rem; }
  .brand { width: 7.5rem; }
  .header__contact { gap: .5rem; padding-inline: .5rem; }
  .hero h1 { font-size: 2.125rem; }
  .button { gap: 1rem; padding-inline: 1.125rem; }
  .video-link__thumbnail { flex-basis: 6rem; }
  .text-link { gap: 1rem; font-size: .8125rem; }
}

/* Phones held sideways and other short landscape screens: the hero's text, down to its button, fits the first view, and the header keeps to a thin band. */
@media (orientation: landscape) and (max-height: 30em) {
  .header { padding-top: .25rem; }
  .header-sentinel { top: .5rem; }
  .header__inner, .header.is-scrolled .header__inner { min-height: 3.25rem; padding-block: .25rem; }
  /* Without JavaScript the text keeps its room: the header may not fit on one row there. */
  .js .hero__grid { padding-top: 4.25rem; }
  .hero__audience { margin-bottom: .5rem; }
  .hero h1 { max-width: none; font-size: 1.875rem; }
  .hero__description { margin-block: .75rem 1rem; }
}

@media (orientation: landscape) and (max-height: 30em) and (max-width: 47.9375em) {
  /* Sideways, a phone has room for the links on the logo's row, as on a tablet. */
  .header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav { grid-column: 2; grid-row: 1; flex-wrap: wrap; justify-content: center; padding-top: 0; }
  .header__contact { grid-column: 3; }
}

@media (orientation: landscape) and (max-height: 30em) and (min-width: 48em) {
  /* Pinned to the top of a short hero, the photo would show only the shelves above her head: it rises to her face. */
  .hero__image { top: 0; transform: translateY(-20%); }
}

/* Narrower than 20em, the width of a 320px phone at the default text size: phones with a larger text setting. */
@media (max-width: 19.9375em) {
  /* Margins and art keep the share of the screen they have on a 320px phone instead of growing with the text. */
  :root { --gutter: 12.5vw; }
  .challenges__flower { width: 32.5vw; }
  .challenge-list li:nth-child(n) { padding-left: 13vw; }
  .challenge-seed, .challenges__flyer { width: 8.75vw; }
  .location__online { padding: 8.75vw; }
  /* The links move into the Menu, on the row they had, and the button keeps only its icon; its text stays its name. */
  .header__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { max-width: 100%; }
  .nav { display: none; }
  .mobile-menu { display: block; grid-column: 1; grid-row: 2; justify-self: start; }
  .header:not(.is-scrolled) .mobile-menu summary { padding-left: 0; }
  .header__contact { gap: 0; }
  .header__contact > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* A heading shrinks with the screen once its longest word would not fit. */
  h2 { font-size: min(2.125rem, 17.5vw); }
  /* What sits side by side goes one under the other once it no longer fits. */
  .video-link, .appointment-facts > div { flex-wrap: wrap; }
  .appointment-facts dd { margin-left: auto; }
}

/* Narrower than 13em, as phones with nearly twice the default text: the scrolled header tightens to stay on one row, and the flower band grows to fit its caption. */
@media (max-width: 13em) {
  .header.is-scrolled .header__inner { gap: .25rem; padding-inline: .5rem; }
  .header.is-scrolled .brand { width: 2.25rem; }
  .mobile-menu summary { padding-inline: .25rem; }
  .challenges__art { height: auto; min-height: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .header.is-scrolled .header__inner { transform: none; }
  .button:hover, .button:active, .text-link:hover > span:not(.whatsapp-icon, .visually-hidden), .video-link:hover .video-link__play { transform: none; }
  .consent, .consent__choice:active { translate: none; }
}