/* Built by tools/make-prod.py from the files named below. Do not edit. */
/* ---- fonts.css ---- */
/* Fonts served from this site (no request to Google). Fetched once from Google Fonts on 5 Oct 2026,
   latin and latin-ext only. Licence: SIL Open Font License 1.1 (Fraunces, Poppins, DM Sans). */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-italic-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-italic-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- site.css ---- */
/* Espaço Leve Alma, website v3 (site-v6/): design tokens in brand v3 (5 October 2026).
   Copied into site-v6/assets/css/tokens.css by tools/make-v6.py. Edit here, not there.
   Source: deck/assets/tokens-v3.css, BRAND.md sections 3 and 4, docs/design-system.md.

   Same token names and roles as versions four and five, so site.css, v2.css to v5.css,
   onepage.css and itacare.css keep working; tools/v6/v6.css (linked last) applies the
   fixed type system and the layout rules on top.

   Only the eight colours (plus tints of them for lines, outlines and wells, and the three
   night colours for screens). Contrast: python3 tools/contrast_v3.py */

:root {
  color-scheme: light dark;

  /* ---- The eight, always by hex ---- */
  --off-white:   #f4e7d9;
  --shell-beige: #ffd9be;
  --apricot:     #ef9e6f;
  --terracotta:  #bb764c;
  --cinnabar:    #bb6b57;
  --jalapeno:    #807b60;
  --bay-leaf:    #6b6142;
  --wine:        #663630;
  /* Night, screens only */
  --night:   #1e1a14;
  --night-2: #27221a;
  --night-3: #322b21;

  /* ---- Surfaces: light ---- */
  --paper:  var(--off-white);   /* the page */
  --shell:  var(--shell-beige); /* the light band */
  --sand:   var(--shell-beige); /* the week band */
  --raised: var(--off-white);   /* sheets that sit over the page (menu, skip link) */
  --well:   color-mix(in srgb, var(--apricot) 26%, var(--paper)); /* tint: today, a picked chip */

  /* Fields carry --on-field, one light text colour per band. */
  --clay-field:      var(--cinnabar);   /* buttons only */
  --forest-field:    var(--bay-leaf);   /* the dark band: small text allowed (5.06) */
  --terracota-field: var(--terracotta); /* titles only (2.97) */
  --salvia-field:    var(--jalapeno);   /* titles only (3.51) */
  --on-field:        var(--off-white);
  --on-field-accent: var(--off-white);  /* one text colour per band: no second light tone */
  --on-field-ink:    var(--wine);

  /* ---- Inks: one text colour, wine on the light page ---- */
  --ink:      var(--wine);
  --ink-soft: var(--wine);
  --clay-ink: var(--cinnabar);  /* the accent: links */
  --link-hover: var(--wine);
  --leaf:     var(--jalapeno);

  /* ---- Marks ---- */
  --scrim: 30 26 20;            /* night, as RGB channels: only behind words on photographs */
  --mark-clay: var(--cinnabar);
  --mark-cream: var(--off-white);
  --logo-colour: var(--cinnabar);

  --clay-soft:   var(--well);
  --line:        color-mix(in srgb, var(--apricot) 70%, transparent);
  --line-strong: var(--apricot);
  --outline:     var(--apricot);

  /* ---- Type ----
     Roca One where installed, otherwise Fraunces set soft: 700 Bold, 400 Regular. */
  --font-display: "Roca One", "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Poppins", "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-narrow: "DM Sans", "Poppins", system-ui, sans-serif;
  --display-weight: 700;
  --display-soft: "SOFT" 100, "WONK" 0;
  --track-t2: 0.02em;

  /* The fixed system, web sizes (BRAND.md 4, "Web sizes"). Desktop / mobile. */
  --t1:      clamp(48px, calc(22px + 4.6vw), 76px);  /* 60 to 90 / 46 to 54, line 0.9 */
  --t1-min:  clamp(46px, calc(18px + 4.4vw), 60px);  /* long lists of T1s (Itacaré) */
  --t1-sup:  26px;   /* 24 to 28 / 18 to 20 */
  --t2:      24px;   /* 24 / 23 */
  --t-label: 20px;   /* 20 / 18 */
  --t-intro: 22px;   /* 22 / 18 */
  --t-body:  18px;   /* 18 / 16 */
  --t-btn:   16px;
  --t-note:  14px;   /* the floor: nothing under 14px */

  /* Older names, mapped onto the system so nothing falls under 14px */
  --t-xs:   var(--t-note);
  --t-sm:   var(--t-note);
  --t-base: var(--t-body);
  --t-lg:   var(--t-body);
  --t-xl:   var(--t-intro);
  --t-2xl:  var(--t2);
  --t-3xl:  var(--t1);
  --t-4xl:  var(--t1);
  --t-5xl:  var(--t1);
  --t-phrase: var(--t1);

  --lh-tight: 0.9;
  --lh-head: 0.9;
  --lh-body: 1.5;
  --track-label: 0;

  /* ---- Space: one unit, three steps (1x lines on one subject, 3x before the content,
     6x a new subject) ---- */
  --u: 16px;
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --gutter: clamp(16px, 5vw, 64px);
  --band: calc(var(--u) * 6);
  --measure: 36rem;
  --max: 1280px;

  /* ---- Shape: one box style (thin apricot line, small radius, no fill, no shadow) ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-pill: 999px;
  --stroke: 1.5px;
  --lift: none;
  --grain: none;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 180ms;
  --slow: 560ms;
  --drift: 26s;
}

@media (max-width: 860px) {
  :root {
    --t1-sup: 20px; --t2: 23px; --t-label: 18px; --t-intro: 18px; --t-body: 16px;
    --u: 12px;
  }
}

/* ---- Night: bay leaf taken almost to black. Text off-white, accent apricot.
   Colour bands keep their colour; photographs are never dimmed. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--night); --shell: var(--night-2); --sand: var(--night-2);
    --raised: var(--night-2);
    --well: var(--night-3);
    --ink: var(--off-white); --ink-soft: var(--off-white);
    --clay-ink: var(--apricot); --link-hover: var(--shell-beige);
    --logo-colour: var(--off-white);
    --line: color-mix(in srgb, var(--apricot) 45%, transparent);
    --line-strong: color-mix(in srgb, var(--apricot) 80%, transparent);
  }
}
:root[data-theme="dark"] {
  --paper: var(--night); --shell: var(--night-2); --sand: var(--night-2);
  --raised: var(--night-2);
  --well: var(--night-3);
  --ink: var(--off-white); --ink-soft: var(--off-white);
  --clay-ink: var(--apricot); --link-hover: var(--shell-beige);
  --logo-colour: var(--off-white);
  --line: color-mix(in srgb, var(--apricot) 45%, transparent);
  --line-strong: color-mix(in srgb, var(--apricot) 80%, transparent);
}


/* ============================================================
   Espaço Leve Alma
   Every value below comes from tokens.css. Nothing is hardcoded.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* sticky header clearance for #anchors */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background:
    var(--grain),
    radial-gradient(140% 90% at 8% 0%, color-mix(in srgb, var(--sand) 46%, transparent) 0, transparent 58%),
    var(--paper);
  background-attachment: scroll, scroll, fixed;
}

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

a { color: var(--clay-ink); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--clay-field);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--raised); color: var(--ink);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  box-shadow: var(--lift); text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: var(--s-4); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

/* The label style used above every section title */
.label {
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}

/* Deck rule: the wooden boards of the deck, as a divider */
.rule {
  height: 6px; border: 0; margin: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 1px,
    transparent 1px 14px
  );
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--clay-field); color: var(--on-field);
  text-decoration: none; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--t-base); font-weight: 500;
  padding: 14px 22px; border-radius: var(--r-pill);
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn--ghost:hover { filter: none; background: color-mix(in srgb, currentColor 10%, transparent); }

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

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 68px; padding-block: var(--s-3);
}
.site-head a { color: inherit; text-decoration: none; }

.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.0625rem;
  letter-spacing: -0.01em; white-space: nowrap; margin-right: auto;
}
.wordmark img { width: 32px; height: 32px; border-radius: 50%; }
.wordmark i { font-style: italic; }

.nav { display: flex; gap: var(--s-5); font-size: var(--t-sm); }
.nav a { padding-block: 4px; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: currentColor; }
.nav a[aria-current="page"] { border-bottom-color: currentColor; }

.lang { display: flex; gap: 8px; font-size: var(--t-sm); align-items: center; }
.lang [aria-current="true"] { opacity: 0.55; }
.head-cta { font-size: var(--t-sm); padding: 9px 16px; }

/* Over-the-hero variant: floats on the photograph until the page scrolls.
   Readable without JavaScript because the hero paints a scrim behind it. */
.site-head--over {
  position: fixed; inset-inline: 0; top: 0;
  background: transparent; color: var(--on-field);
  border-bottom-color: transparent;
}
/* Over the photograph the bar becomes a floating pill, inset from the edges,
   so the image runs behind and past it. */
.site-head--over .wrap {
  margin-block: 14px;
  max-width: calc(var(--max) - 2 * var(--s-4));
  border-radius: var(--r-pill);
  background: rgb(var(--scrim) / 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(247 239 230 / 0.16);
  padding-inline: var(--s-5);
  min-height: 60px;
  transition: background var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.site-head--over.is-stuck .wrap {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.site-head--over.is-stuck { color: var(--ink); }
.site-head--over .btn { background: var(--on-field); color: var(--ink); }
.site-head--over.is-stuck .btn { background: var(--clay-field); color: var(--on-field); }
/* Pages with no photograph at the top: the same floating pill, already in its
   paper state, and the content starts below it. */
.site-head--page + main { padding-top: 92px; }
.menu-langs {
  display: flex; gap: var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.menu-langs [aria-current="true"] { opacity: 0.55; }

/* Mobile disclosure menu: works with JavaScript off */
.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; font-size: var(--t-sm); padding: 8px 14px;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: color-mix(in srgb, currentColor 12%, transparent); }
.menu-sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--raised); color: var(--ink);
  border-block: 1px solid var(--line); box-shadow: var(--lift);
  padding: var(--s-4) var(--gutter) var(--s-5);
  display: grid; gap: 2px;
}
.menu-sheet a {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-xl); font-family: var(--font-display);
}
.menu-sheet a:last-of-type { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 900px);
  display: grid; align-items: end;
  color: var(--on-field); overflow: hidden;
  background: rgb(var(--scrim));
}
.hero-photo {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none;
  object-fit: cover; z-index: -2;
  animation: drift var(--drift) ease-in-out infinite alternate;
}
/* A video needs no drift of its own: the footage is already moving. */
.hero-video { animation: none; inset: 0; width: 100%; height: 100%; }
.hero-video.is-fallback { opacity: 0; }
.hero:has(.hero-video) {
  background: rgb(var(--scrim)) center / cover no-repeat;
}
/* Two scrims: one so the header reads at the top, one so the copy reads at the foot */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--scrim) / 0.62) 0, rgb(var(--scrim) / 0) 26%),
    linear-gradient(0deg, rgb(var(--scrim) / 0.92) 0, rgb(var(--scrim) / 0.55) 34%,
                    rgb(var(--scrim) / 0.18) 56%, rgb(var(--scrim) / 0) 74%);
}
@keyframes drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
}

.hero--page { min-height: min(78svh, 720px); }
.hero-name {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: var(--t-4xl); line-height: var(--lh-head); letter-spacing: -0.03em;
  margin: 0 0 var(--s-3);
}
.hero-copy {
  width: 100%; /* auto margins would otherwise shrink this grid item to fit-content */
  padding-block: var(--s-9) var(--s-7);
  text-shadow: 0 1px 28px rgb(var(--scrim) / 0.5);
}
.hero-eyebrow {
  font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; margin: 0 0 var(--s-2);
}
.hero h1 {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-5xl); line-height: var(--lh-tight);
  letter-spacing: -0.035em; margin: 0 0 var(--s-3);
}
.hero-place { font-size: var(--t-sm); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 var(--s-5); }
.hero-lede { font-size: var(--t-xl); max-width: 30ch; margin: 0 0 var(--s-6); }

/* The strip along the foot of the hero: the three facts that are the whole argument */
.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--t-sm); margin-top: var(--s-6);
  padding-top: var(--s-4); border-top: 1px solid rgba(247, 239, 230, 0.28);
}
.hero-facts span { display: flex; align-items: center; gap: 8px; }
.hero-facts span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--band); position: relative; }
.section--tight { padding-block: var(--s-5); }

/* Only a coloured band owns its own field and its own light. Plain sections are
   transparent over the body's one continuous ground, so two paper sections in a
   row never draw an edge between them. */
.section--shell, .section--sand, .section--forest, .section--clay,
.chapter, .chapter--reverse, .chapter--onclay { isolation: isolate; overflow: hidden; }

/* The light on a band moves the way light moves on a deck: slowly, and never
   in a straight line. Transform only, so it stays on the compositor. */
.section--shell::before, .section--sand::before, .section--forest::before,
.section--clay::before, .chapter::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 42% at 32% 26%,
              color-mix(in srgb, var(--sand) 80%, transparent) 0, transparent 72%);
  animation: breathe 34s ease-in-out infinite alternate;
  will-change: transform;
}
.section--shell::before {
  background: radial-gradient(46% 46% at 74% 18%,
              color-mix(in srgb, var(--paper) 92%, transparent) 0, transparent 70%);
  animation-duration: 41s;
}
.section--sand::before {
  background: radial-gradient(48% 46% at 22% 16%,
              color-mix(in srgb, var(--paper) 78%, transparent) 0, transparent 70%);
  animation-duration: 38s;
}
.section--clay::before, .section--forest::before, .chapter--onclay::before {
  background: radial-gradient(46% 46% at 76% 14%, rgb(255 255 255 / 0.16) 0, transparent 70%);
  animation-duration: 44s;
}
.chapter--reverse::before {
  background: radial-gradient(46% 46% at 20% 20%,
              color-mix(in srgb, var(--paper) 88%, transparent) 0, transparent 70%);
  animation-duration: 40s;
}
@keyframes breathe {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.4) translate3d(5%, 4%, 0); }
}

/* Every filled band carries grain plus a light source, so nothing reads as a
   flat rectangle of colour. */
.section--shell {
  background:
    var(--grain),
    radial-gradient(120% 80% at 88% 0%, color-mix(in srgb, var(--paper) 70%, transparent) 0, transparent 62%),
    var(--shell);
}
.section--sand {
  background:
    var(--grain),
    radial-gradient(110% 90% at 12% 8%, color-mix(in srgb, var(--paper) 46%, transparent) 0, transparent 64%),
    var(--sand);
}
.section--forest {
  background:
    var(--grain),
    radial-gradient(110% 80% at 80% 0%, rgb(255 255 255 / 0.09) 0, transparent 60%),
    var(--forest-field);
  color: var(--on-field);
}
.section--forest a:not(.btn) { color: inherit; }
.section--forest .label { color: color-mix(in srgb, var(--on-field) 78%, transparent); }
.section--clay {
  background:
    var(--grain),
    radial-gradient(110% 80% at 80% 0%, rgb(255 255 255 / 0.1) 0, transparent 60%),
    var(--clay-field);
  color: var(--on-field);
}
.section--clay a:not(.btn) { color: inherit; }

/* A low warm sun wash at the top of paper sections. The one piece of atmosphere. */
.section--sun { background: transparent; }

.section h2 {
  font-size: var(--t-3xl); line-height: var(--lh-head);
  margin: 0 0 var(--s-4); letter-spacing: -0.02em;
}
.section h3 { font-size: var(--t-2xl); line-height: var(--lh-head); margin: 0 0 var(--s-3); }
.section-head { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: end; margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: 0; }
.lede { font-size: var(--t-xl); max-width: 40ch; color: var(--ink-soft); }

/* ---------- The week rail ---------- */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.day {
  background: var(--raised); color: var(--ink); text-decoration: none;
  padding: var(--s-4) var(--s-4) var(--s-5);
  min-height: 152px; display: flex; flex-direction: column;
  transition: background var(--fast) var(--ease);
  position: relative;
}
.day:hover { background: var(--paper); }
.day b {
  display: block; font-weight: 500; font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft);
}
.day .what {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-xl); line-height: 1.15; margin: var(--s-3) 0 var(--s-2);
}
.day .when { font-size: var(--t-sm); color: var(--ink-soft); margin-top: auto; }
.day .kind {
  position: absolute; inset-inline: var(--s-4); top: 0; height: 3px; border-radius: 0 0 3px 3px;
}
.kind--flow { background: var(--clay-field); }
.kind--strength { background: var(--leaf); }
.kind--rest { background: var(--forest-field); }
.day--rest { background: var(--shell); }
.day--rest .what { color: var(--ink-soft); }
.day.is-today { background: var(--sand); }
.rail--compact .day { min-height: 0; padding: var(--s-3) var(--s-3) var(--s-3); }
.rail--compact .day .what { font-size: var(--t-lg); margin: var(--s-2) 0 2px; }
.rail--compact .day .when { font-size: var(--t-xs); }
.day.is-today b::after {
  content: " · today"; color: var(--clay-ink); letter-spacing: 0;
}
[lang="pt-BR"] .day.is-today b::after { content: " · hoje"; }

/* ---------- Chapters (photo + copy) ---------- */
.chapter {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
  position: relative; isolation: isolate; overflow: hidden;
  background:
    var(--grain),
    radial-gradient(90% 100% at 100% 0%, color-mix(in srgb, var(--sand) 40%, transparent) 0, transparent 64%),
    var(--paper);
}
.chapter--reverse {
  background:
    var(--grain),
    radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--paper) 74%, transparent) 0, transparent 64%),
    var(--shell);
}
.chapter--onclay {
  background:
    var(--grain),
    radial-gradient(90% 100% at 100% 0%, rgb(255 255 255 / 0.1) 0, transparent 62%),
    var(--clay-field);
}
.chapter--reverse > .chapter-copy { order: -1; }
.chapter img, .chapter .clip { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.clip { display: block; background: rgb(var(--scrim)); }
.chapter-copy {
  padding: var(--band) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.chapter-copy > * { max-width: var(--measure); }
.chapter-copy h2 { font-size: var(--t-3xl); line-height: var(--lh-head); margin: 0 0 var(--s-4); letter-spacing: -0.02em; }
.chapter-meta {
  font-size: var(--t-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--s-4);
}
.chapter--onclay { color: var(--on-field); }
.chapter--onclay .chapter-meta { color: color-mix(in srgb, var(--on-field) 80%, transparent); }
.chapter--onclay .btn { background: var(--on-field); color: var(--ink); }

/* ---------- A morning on the deck ----------
   The photograph holds still while the words over it change. Without scroll
   timeline support the three moments simply stack and read as three cards, so
   nothing is lost. */
.morning { position: relative; }
.morning-stage {
  position: relative; min-height: 62svh;
  display: grid; gap: var(--s-5);
}
.moment { position: relative; display: grid; }
.moment img {
  width: 100%; height: min(62svh, 560px); object-fit: cover;
}
.moment-copy {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: var(--band) var(--gutter) var(--s-7);
  color: var(--on-field);
  background: linear-gradient(0deg, rgb(var(--scrim) / 0.88) 0,
              rgb(var(--scrim) / 0.4) 46%, rgb(var(--scrim) / 0) 100%);
}
.moment-copy > div { max-width: var(--max); margin-inline: auto; }
.moment-copy h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--t-3xl); line-height: 1.02; margin: 0 0 var(--s-3);
}
.moment-copy p { max-width: 42ch; }
.moment-when {
  font-size: var(--t-xs); letter-spacing: var(--track-label);
  text-transform: uppercase; margin: 0 0 var(--s-2);
  color: color-mix(in srgb, var(--on-field) 80%, transparent);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The picture holds for well under one screen of scrolling (the section is
       1.7 screens tall, the stage is one), so the page never feels stuck, and
       the section clips its own stage so nothing bleeds into what follows. */
    .morning { height: 170svh; overflow: clip; }
    .morning-stage {
      position: sticky; top: 0; height: 100svh; gap: 0;
      view-timeline-name: --morning; view-timeline-axis: block;
    }
    .moment { grid-area: 1 / 1; height: 100svh; }
    .moment img { height: 100%; }
    .morning-stage .moment {
      animation: moment-fade linear both;
      animation-timeline: --morning;
    }
    .morning-stage .moment:nth-child(1) { animation-range: contain 0% contain 40%; }
    .morning-stage .moment:nth-child(2) { animation-range: contain 30% contain 70%; }
    .morning-stage .moment:nth-child(3) { animation-range: contain 60% contain 100%; }
    @keyframes moment-fade {
      0%, 10% { opacity: 0; }
      25%, 75% { opacity: 1; }
      90%, 100% { opacity: 0; }
    }
    .morning-stage .moment:first-child { animation-name: moment-fade-first; }
    @keyframes moment-fade-first {
      0%, 70% { opacity: 1; }
      92%, 100% { opacity: 0; }
    }
    .morning-stage .moment:last-child { animation-name: moment-fade-last; }
    @keyframes moment-fade-last {
      0%, 14% { opacity: 0; }
      30%, 100% { opacity: 1; }
    }
  }
}

/* ---------- Card grids ---------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 40%, var(--raised)) 0, var(--raised) 46%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 80%, transparent) inset;
}
.card h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-2); }
.card p { font-size: var(--t-base); color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.card-num {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-2xl); color: var(--clay-ink); display: block; margin-bottom: var(--s-2);
}

/* ---------- Mayra ---------- */
.mayra { display: grid; grid-template-columns: 0.85fr 1.15fr; }
.mayra img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; object-position: center 30%; }
.mayra-copy { padding: var(--band) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.mayra-copy > * { max-width: var(--measure); }
.mayra-copy h2 { font-size: var(--t-3xl); line-height: var(--lh-head); margin: 0 0 var(--s-4); }
.creds { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.creds li {
  font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 6px 12px;
  color: var(--ink-soft);
}
.creds--onphoto { margin-top: var(--s-4); }
.creds--onphoto li { color: var(--on-field); border-color: rgb(247 239 230 / 0.45); }

/* ---------- Story (the Mayra page) ---------- */
.story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); align-items: start; }
.story-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.story-step { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.story-step h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-2); }
.story-step p { max-width: var(--measure); color: var(--ink-soft); margin: 0; }
.story-figure img { border-radius: var(--r-lg); }
.pull { margin: 0; max-width: 34ch; font-size: var(--t-3xl); line-height: 1.18; }
.pull cite { margin-top: var(--s-4); color: color-mix(in srgb, var(--on-field) 78%, transparent); }

/* ---------- Quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); }
blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: var(--t-2xl); line-height: 1.32; letter-spacing: -0.01em;
}
blockquote p { margin: 0 0 var(--s-3); }
cite {
  display: block; font-family: var(--font-ui); font-style: normal;
  font-size: var(--t-sm); letter-spacing: 0.06em; color: var(--ink-soft);
}

/* ---------- Prices ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.plan {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column;
}
.plan--feature { border-color: var(--clay-soft); box-shadow: var(--lift); }
.plan .who { font-size: var(--t-sm); color: var(--clay-ink); margin: 0 0 var(--s-2); letter-spacing: 0.06em; text-transform: uppercase; }
.plan h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-4); }
.plan ul { margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.plan li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--t-base);
}
.plan li:last-child { border-bottom: 0; }
.plan li b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan .foot { margin-top: auto; font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- Practical / find us ---------- */
.practical { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); align-items: start; }
.facts { margin: 0; display: grid; gap: var(--s-4); }
.facts div { display: grid; gap: 2px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: 0; font-size: var(--t-base); }

/* ---------- Booking embed ----------
   Momoyoga's widget injects DOM into this page rather than an iframe, so it can
   be dressed in the studio's own tokens. Their classes are momo- prefixed and
   they expose custom properties on .momo-schedule-wrapper. Their markup is
   theirs to change, so these overrides are deliberately shallow: if a selector
   stops matching, the widget still works, it just looks like theirs again. */
.embed {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  min-height: 320px;
}
.embed-fallback { font-size: var(--t-base); color: var(--ink-soft); }

/* The schedule, rendered from Momoyoga's own data in our own markup. */
.sched { display: grid; gap: var(--s-5); }
.sched-day h3 {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400;
  margin: 0 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line); text-transform: capitalize;
}
.sched-class {
  display: grid; grid-template-columns: 8.5rem 1fr auto; gap: var(--s-4);
  align-items: baseline; padding: var(--s-3) var(--s-3) var(--s-3) 0;
  text-decoration: none; color: var(--ink); border-radius: var(--r-md);
  transition: background var(--fast) var(--ease);
}
.sched-class:hover { background: var(--paper); }
.sched-time { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--t-base); }
.sched-name { font-family: var(--font-display); font-style: italic; font-size: var(--t-xl); }
.sched-seats {
  font-size: var(--t-sm); color: var(--ink-soft); white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px 11px;
}
.sched-class.is-tight .sched-seats { color: var(--clay-ink); border-color: var(--clay-soft); }
.sched-class.is-full { opacity: 0.55; }
.sched-class.is-full .sched-name { text-decoration: line-through; }
.sched-foot { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ink-soft); }
[data-momo-profile].is-loading { min-height: 240px; }

@media (max-width: 620px) {
  .sched-class { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); padding-block: var(--s-4); }
  .sched-time { grid-column: 1 / -1; }
  .sched-name { font-size: var(--t-lg); }
}

.momo, .momo-schedule-wrapper {
  --momo-btn-primary-bg: var(--clay-field);
  --momo-btn-primary-bg-hover: var(--clay-ink);
  --momo-btn-primary-color: var(--on-field);
  --momo-btn-secondary-bg: var(--sand);
  font-family: var(--font-ui);
  color: var(--ink);
}
.momo-schedule-wrapper a { color: var(--clay-ink); }
.momo-schedule-wrapper button,
.momo-schedule-wrapper .momo-button,
.momo-schedule-wrapper .momo-button--primary { border-radius: var(--r-pill); }
.momo-schedule-wrapper h1, .momo-schedule-wrapper h2,
.momo-schedule-wrapper h3, .momo-schedule-wrapper h4 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
}
.momo-schedule-item { border-radius: var(--r-md); }

.steps-list { margin: 0; padding-left: 1.15em; font-size: var(--t-base); color: var(--ink-soft); }
.steps-list li { margin-bottom: var(--s-2); }
.steps-list li:last-child { margin-bottom: 0; }

/* ---------- Interior page heads ---------- */
.page-hero { padding-block: var(--s-8) var(--s-6); }
.page-hero h1 {
  font-size: var(--t-4xl); line-height: var(--lh-head);
  letter-spacing: -0.03em; margin: 0 0 var(--s-4); max-width: 16ch;
}
.page-hero .lede { max-width: 46ch; }

.crumbs { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-4); }
.crumbs a { color: inherit; }

.prose { max-width: var(--measure); }
.prose h2 { font-family: var(--font-display); font-size: var(--t-2xl); margin: var(--s-7) 0 var(--s-3); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: var(--s-2); }

/* Frequently asked, as a no-JavaScript disclosure list */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) var(--s-6) var(--s-4) 0;
  font-family: var(--font-display); font-size: var(--t-2xl); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-ui); color: var(--clay-ink); font-size: var(--t-xl);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 var(--s-5); max-width: var(--measure); color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-foot { background: var(--shell); padding-block: var(--band) var(--s-8); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-7); }
.foot-grid h3 { font-family: var(--font-ui); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s-3); font-weight: 500; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-base); }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.family {
  display: flex; gap: var(--s-4); align-items: center;
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-soft);
}
/* The leaf is a single-colour mark, so it is masked rather than placed as an
   image. That drops the cream tile it used to sit on and lets it take --leaf,
   which flips with the theme like the rest of the page. */
.family .leaf {
  width: 40px; height: 40px; flex: none;
  background: var(--leaf);
  -webkit-mask: url("/assets/logo/leve-alma-leaf.svg") center / contain no-repeat;
  mask: url("/assets/logo/leve-alma-leaf.svg") center / contain no-repeat;
}
.family p { margin: 0; max-width: 52ch; }
.family a { color: var(--clay-ink); }

.hero-pause {
  position: absolute; right: var(--gutter); bottom: var(--s-5); z-index: 2;
  display: none; align-items: center; gap: 7px;
  background: rgb(var(--scrim) / 0.5); color: var(--on-field);
  border: 1px solid rgb(247 239 230 / 0.4); border-radius: var(--r-pill);
  padding: 7px 14px; font: inherit; font-size: var(--t-xs); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.js .hero:has(.hero-video) .hero-pause { display: inline-flex; }

/* ---------- Mobile booking bar ---------- */
.bookbar { display: none; }

/* ---------- Motion on scroll ----------
   Native CSS scroll-driven animations. No library, no JavaScript, nothing to
   fail. The default state of every animated element is its FINISHED state, so
   a browser without support, or a reader who asked for less motion, simply
   sees the page. */
.reveal { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(1.75rem); }
      to   { opacity: 1; transform: none; }
    }
    .reveal {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 34%;
    }

    /* Photographs drift slowly the whole time they are on screen. This is the
       same gesture as the hero, carried through the page. */
    @keyframes slow-zoom {
      from { transform: scale(1); }
      to   { transform: scale(1.09); }
    }
    .chapter img, .mayra img {
      animation: slow-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* The hero copy settles as you leave it, so the first scroll feels like a
       hand-off rather than a jump. */
    @keyframes hero-settle {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(-2.5rem); }
    }
    .hero-copy {
      animation: hero-settle linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 88%;
    }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: 1fr; }
  .practical { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 860px) {
  .nav, .head-cta, .lang { display: none; }
  .menu { display: block; }
  .site-head .wrap { position: relative; gap: var(--s-3); }

  .chapter, .chapter--reverse, .mayra, .story { grid-template-columns: 1fr; }
  .chapter--reverse > .chapter-copy { order: 0; }
  .chapter img, .chapter .clip, .mayra img { min-height: 320px; max-height: 62vh; }
  .chapter-copy, .mayra-copy { padding-block: var(--s-7); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; gap: var(--s-6); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .hero { min-height: min(94svh, 780px); }
  .hero-lede { font-size: var(--t-lg); }

  /* The bar that follows you down the page on a phone */
  .bookbar {
    display: flex; gap: var(--s-3); align-items: center;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .bookbar .btn { flex: 1; justify-content: center; }
  .bookbar .btn--ghost { flex: 0 0 auto; }
  body { padding-bottom: 76px; }
}

@media (max-width: 620px) {
  /* On a phone the week reads better as a list than as squeezed columns. */
  .rail { grid-template-columns: 1fr; }
  .day {
    min-height: 0; display: grid; align-items: baseline;
    grid-template-columns: 4.5rem 1fr auto;
    gap: var(--s-3); padding: var(--s-3) var(--s-4);
  }
  .day .kind { inset-inline: 0; top: auto; bottom: 0; height: 2px; border-radius: 0; }
  .day .what { margin: 0; font-size: var(--t-lg); }
  .day .when { margin: 0; }
}

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo, .hero-video { animation: none; }
  .section--shell::before, .section--sand::before, .section--forest::before,
  .section--clay::before, .chapter::before { animation: none; }
  .hero-video { display: none; }
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .site-head, .bookbar, .embed, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: 0; color: #000; }
  .hero-photo, .hero::before { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---- v2.css ---- */
/* ============================================================
   Version two: the few components the proposal adds.
   Every value comes from tokens.css, like site.css. No new motion:
   these use the existing .reveal and nothing else.
   ============================================================ */

.icon { width: 28px; height: 28px; color: var(--clay-ink); margin-bottom: var(--s-3); }

/* ---------- How it works here: three promises ---------- */
.ways-h2 { max-width: 22ch; margin-bottom: var(--s-7) !important; }
.ways {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
  border-top: 1px solid var(--line); padding-top: var(--s-6);
}
.way h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-2); }
.way p { color: var(--ink-soft); font-size: var(--t-base); max-width: 36ch; margin: 0; }

/* ---------- Made for a week in Itacaré ---------- */
.here-card .icon { margin-bottom: var(--s-4); }

/* ---------- One review, larger ---------- */
.feature-quote {
  font-size: var(--t-3xl); line-height: 1.2; max-width: 30ch;
  margin: 0 0 var(--s-8); padding-left: var(--s-5);
  border-left: 3px solid var(--clay-field);
}

/* ---------- Two doors on the price list ---------- */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.door li span { display: grid; gap: 2px; }
.door li small { font-size: var(--t-sm); color: var(--ink-soft); }
.door li { align-items: baseline; }
.door-badge {
  align-self: flex-start; margin: calc(var(--s-2) * -1) 0 var(--s-4);
  font-size: var(--t-sm); color: var(--clay-ink);
  background: var(--clay-soft); border-radius: var(--r-pill); padding: 5px 12px;
}

/* ---------- Tomorrow, picked out on the booking page ---------- */
.sched-day.is-tomorrow {
  background: var(--sand); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-inline: calc(var(--s-4) * -1);
}
.sched-flag {
  font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--clay-ink); margin: 0 0 var(--s-1);
}

@media (max-width: 860px) {
  .ways, .doors { grid-template-columns: 1fr; }
  .feature-quote { font-size: var(--t-2xl); }
}

/* ---- v3.css ---- */
/* ============================================================
   Version three: the glance panel (classes, prices, where, book)
   in the home hero and on the quick guide. Tokens only, no motion.
   ============================================================ */

.glance {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--lift); overflow: hidden;
}
.g-block { padding: var(--s-5); border-bottom: 1px solid var(--line); min-width: 0; }
.glance:not(.glance--photo) .g-block:nth-child(odd) { border-right: 1px solid var(--line); }
.glance:not(.glance--photo) .g-block:nth-last-child(-n+2) { border-bottom: 0; }
.glance .g-h {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ui); font-weight: 500; font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--s-3);
}
.glance .g-h .icon { width: 20px; height: 20px; margin: 0; }
.g-block p { font-size: var(--t-base); margin: 0 0 var(--s-3); }
.g-block p:last-child { margin-bottom: 0; }
.g-week, .g-prices { list-style: none; margin: 0 0 var(--s-3); padding: 0; font-size: var(--t-base); }
.g-week li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4);
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.g-days { grid-column: 1 / -1; font-size: var(--t-xs); letter-spacing: 0.08em;
          text-transform: uppercase; color: var(--ink-soft); }
.g-class { font-family: var(--font-display); font-style: italic; font-size: var(--t-xl); line-height: 1.2; }
.g-time { font-variant-numeric: tabular-nums; align-self: end; white-space: nowrap; }
.g-week .g-rest { display: block; color: var(--ink-soft); border-bottom: 0; font-size: var(--t-sm); }
.g-prices li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.g-prices li:last-child { border-bottom: 0; }
.g-prices b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-note { color: var(--ink-soft); font-size: var(--t-sm) !important; }
.g-more { display: inline-block; margin-top: var(--s-4); font-size: var(--t-sm); }
.g-steps { margin: 0; padding-left: 1.2em; }
.g-steps li { margin-bottom: var(--s-3); max-width: var(--measure); }

/* ---------- On the hero photograph ----------
   The same panel as dark glass, so the video still shows around it. Photographs
   are never dimmed in dark mode; the glass carries its own scrim. */
.glance--photo {
  grid-template-columns: 1fr; color: var(--on-field);
  background: rgb(var(--scrim) / 0.66); border-color: rgb(247 239 230 / 0.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: none; position: relative; z-index: 1;
}
.glance--photo .g-block { padding: var(--s-4) var(--s-5); border-bottom-color: rgb(247 239 230 / 0.18); }
.glance--photo .g-block:last-child { border-bottom: 0; }
.glance--photo .g-h, .glance--photo .g-days, .glance--photo .g-note,
.glance--photo .g-rest { color: rgb(247 239 230 / 0.78); }
.glance--photo .g-h .icon { color: var(--on-field); }
.glance--photo .g-week li, .glance--photo .g-prices li { border-bottom-color: rgb(247 239 230 / 0.18); }
.glance--photo a:not(.btn) { color: var(--on-field); }
.glance--photo .btn:not(.btn--ghost) { background: var(--on-field); color: var(--ink); }
.glance--photo .btn--ghost { color: var(--on-field); }
.glance--photo .g-class { font-size: var(--t-lg); }

/* The hero becomes two columns: the name on the left, the answers on the right. */
.hero--glance {
  grid-template-columns: minmax(0, 1fr);
  align-content: end; row-gap: var(--s-5);
  padding-bottom: var(--s-7);
}
.hero--glance .hero-copy { padding-bottom: 0; }
.hero--glance > .glance { margin-inline: var(--gutter); }

@media (min-width: 1100px) {
  .hero--glance {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    column-gap: var(--s-7); align-items: end;
    padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    padding-top: 110px;
  }
  .hero--glance .hero-copy { padding-inline: 0; max-width: none; padding-bottom: var(--s-4); }
  .hero--glance > .glance { margin-inline: 0; }
}

@media (max-width: 860px) {
  .glance { grid-template-columns: 1fr; }
  .glance:not(.glance--photo) .g-block { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .glance:not(.glance--photo) .g-block:last-child { border-bottom: 0 !important; }
  .hero--glance .hero-copy { padding-top: 110px; }
}

/* On a phone the panel already carries the booking buttons, and the booking bar
   follows you down the page, so the hero's own buttons would say it three times. */
@media (max-width: 860px) {
  .hero--glance .hero-copy .btn-row { display: none; }
  .hero--glance .hero-lede { margin-bottom: 0; }
}

/* ---------- Mayra's Itacaré ----------
   The page's own styles live in itacare.css, linked only from the Itacaré pages.
   The light button is the home page teaser's, on the forest band. */
.btn--light { background: var(--on-field); color: var(--ink); }

/* ---------- Language switcher (versions three and four) ----------
   The three names, small and stacked, so the bar stays short. The current
   language is full strength; the others are quieter until hovered. */
.lang { flex-direction: column; align-items: flex-start; gap: 0; }
.lang .lang-link { font-size: 11px; line-height: 1.3; letter-spacing: 0.01em; padding: 0 2px; opacity: 0.6;
                   transition: opacity var(--fast) var(--ease); }
.lang .lang-link:hover, .lang .lang-link:focus-visible { opacity: 1; }
.lang .lang-link[aria-current="true"] { opacity: 1; font-weight: 500; }
.menu-langs [aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---- v5.css ---- */
/* ============================================================
   Version five: version four in Mariane's brand (2 October 2026).
   Copied into site-v5/assets/css/v5.css by tools/make-v5.py and linked
   last on every page, after site.css, v2.css, v3.css (and v4.css,
   onepage.css, itacare.css where a page has them).
   Tokens only (tokens.css). Reference: docs/brand-v2-inputs.md.

   What it does, in her words from the pieces:
   - flat colour fields, no grain, no gradients;
   - a soft bold serif for headlines, big and tightly leaded,
     lowercase for section titles, caps for a phrase on a band;
   - Poppins for everything else;
   - price cards with a thin rounded outline, an italic accent line
     and dotted leaders between an item and its price;
   - the real logo (SVG, one colour) instead of the name set in type.
   ============================================================ */

/* ---------- Base ---------- */
body {
  background: var(--paper);
  font-variation-settings: var(--display-soft); /* Fraunces' soft axis; Poppins ignores it */
}
.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;
}

/* Every display-face element: her semibold soft serif, roman unless it is an accent. */
h1, h2, h3, .hero-name, .moment-copy h3, .sched-day h3, .faq summary, .menu-sheet a,
.rec-group > summary h2, .rec h3, .rec-sub > summary h3, .op-hero h1, .op-street,
.op-big, .op-mid, .op-steps, .prose h2, .card-num {
  font-weight: var(--display-weight);
}
/* The class names were set in italic in version four; her pieces set them roman. */
.day .what, .g-class, .sched-name, .op-cname, .moment-copy h3, .op-hero h1 {
  font-style: normal; font-weight: var(--display-weight); letter-spacing: -0.01em;
}
blockquote { font-weight: 400; }

/* Section titles: lowercase serif, big, tightly leaded ("aulas semanais", "weekly classes"). */
.section h2, .chapter-copy h2, .mayra-copy h2, .rec-group > summary h2 {
  line-height: var(--lh-head); letter-spacing: -0.025em;
}
.section h2, .rec-group > summary h2, .rec-sub > summary h3 { text-transform: lowercase; }
.page-hero h1, .hero-name { line-height: 0.95; letter-spacing: -0.03em; }

/* The small label above a title becomes her italic serif accent, not tracked caps. */
.label, .plan .who, .facts dt, .foot-grid h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--t-lg); letter-spacing: 0; text-transform: none;
  color: var(--clay-ink);
}
.label { margin-bottom: var(--s-2); }

/* ---------- The logo, one colour, from her SVGs ----------
   Masked so it takes currentColor: cream on the video and on fields, vinho on paper.
   The figure is knocked out of the disk, so the ground shows through it. */
.logo-lockup, .logo-wordmark {
  display: block; flex: none; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.logo-lockup { --logo: url("/assets/logo/espaco-lockup.svg"); aspect-ratio: 3300 / 780; height: 40px; }
.logo-wordmark { --logo: url("/assets/logo/espaco-wordmark.svg"); aspect-ratio: 2400 / 600; width: 240px; }

.wordmark { gap: 0; }
.wordmark .logo-lockup { height: 38px; }
.site-head--over .wrap { min-height: 62px; }

/* ---------- Buttons: cream on a field reads in vinho in both modes ---------- */
.btn { font-weight: 500; letter-spacing: 0.005em; }
.site-head--over .btn,
.glance--photo .btn:not(.btn--ghost),
.btn--light,
.chapter--onclay .btn { color: var(--on-field-ink); }
.drop-btn[aria-expanded="true"] { color: var(--on-field-ink); }
.site-head--over.is-stuck .btn { color: var(--on-field); }

/* ---------- Hero: the wordmark instead of "Espaço leve alma" in type ---------- */
.hero h1.hero-logo { font-size: inherit; line-height: 0; letter-spacing: 0; margin: 0 0 var(--s-5); }
.hero-logo .logo-wordmark {
  width: clamp(240px, 30vw, 440px);
  filter: drop-shadow(0 1px 24px rgb(var(--scrim) / 0.55));
}
.hero-place { letter-spacing: 0.16em; }
.hero-lede { font-size: var(--t-xl); line-height: 1.45; }

/* ---------- Flat fields ----------
   Her pieces are flat colour. No grain, no radial light, no breathing light. */
.section--shell { background: var(--shell); }
.section--sand { background: var(--sand); }
.section--forest { background: var(--forest-field); }
.section--clay { background: var(--clay-field); }
.chapter { background: var(--paper); }
.chapter--reverse { background: var(--shell); }
.chapter--onclay { background: var(--clay-field); }
.section--shell::before, .section--sand::before, .section--forest::before,
.section--clay::before, .chapter::before { content: none; animation: none; }
.section--forest .label { color: var(--on-field-accent); }
.section--forest .lede { color: var(--on-field); }

/* ---------- The phrase band ----------
   A big serif phrase in caps, centred on a flat field, the lockup under it:
   her poster and flyer covers. Terracota and salvia only carry large text. */
.band {
  padding: clamp(72px, 11vw, 150px) var(--gutter);
  text-align: center; color: var(--on-field);
}
.band--terracota { background: var(--terracota-field); }
.band--salvia { background: var(--salvia-field); }
.band--oliva { background: var(--forest-field); }
.band-phrase {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--t-phrase); line-height: 0.94; letter-spacing: 0;
  text-transform: uppercase; text-wrap: balance;
  max-width: 14ch; margin: 0 auto;
}
.band-phrase em { font-style: italic; }
.band .logo-lockup { height: clamp(40px, 4.4vw, 56px); margin: clamp(32px, 4vw, 56px) auto 0; }

/* ---------- Cards ---------- */
.card { background: var(--raised); box-shadow: none; }
.card h3 { line-height: 1.05; }

/* ---------- Prices: her price backs ----------
   A thin rounded outline, the title in serif caps, the italic accent line,
   and dotted leaders from the item to its price, as on her price list. */
.plan {
  background: transparent; box-shadow: none;
  border: var(--stroke) solid var(--outline); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.plan h3 {
  text-transform: uppercase; font-size: var(--t-2xl); line-height: 1.02;
  letter-spacing: 0.005em; margin-bottom: var(--s-3);
}
.plan .who { margin-bottom: var(--s-2); }
.plan li, .g-prices li { border-bottom: 0; align-items: baseline; padding-block: 7px; gap: var(--s-2); }
.plan li > span, .g-prices li > span { order: 0; }
.plan li > b, .g-prices li > b { order: 2; font-weight: 600; }
.plan li::after, .g-prices li::after {
  content: ""; order: 1; flex: 1 1 0; min-width: 0; /* collapses when the row is tight */
  align-self: baseline; border-bottom: 2px dotted var(--line-strong);
}
.plan .foot { padding-top: var(--s-3); }
.door-badge {
  background: none; border-radius: 0; padding: 0; margin: 0 0 var(--s-4);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: var(--t-xl); line-height: 1.2; color: var(--clay-ink);
}

/* The residents' card is the filled one, like her terracota flyer back. */
.plan--feature { background: var(--clay-field); border-color: var(--clay-field); color: var(--on-field); box-shadow: none; }
.plan--feature .who, .plan--feature li small, .plan--feature .foot { color: var(--on-field); }
.plan--feature .door-badge { color: var(--on-field-accent); } /* bold and >= 20px: large text */
.plan--feature li::after { border-bottom-color: color-mix(in srgb, var(--on-field) 50%, transparent); }
.plan--feature li { border-bottom: 0; }

/* The leaders on the glass panel in the hero */
.glance--photo .g-prices li::after { border-bottom-color: color-mix(in srgb, var(--on-field) 45%, transparent); }

/* ---------- Week rail ---------- */
.rail { border-radius: var(--r-lg); }
.day .what { font-size: var(--t-xl); line-height: 1.05; }

/* ---------- The Itacaré list and the FAQ: semibold serif titles ---------- */
.faq summary { line-height: 1.15; }
.chip { font-weight: 500; }

/* ---------- Quick guide ---------- */
.op-hero h1 { letter-spacing: -0.02em; line-height: 0.95; }
.op-brand { gap: 0; }
.op-big small, .op-mid small, .op-from { font-weight: 400; }
.op-steps { font-weight: 500; }
@media screen and (max-width: 899px) {
  .op-hero h1 { font-size: 1.5em; max-width: 62%; }  /* clear of the Share pill */
  .op-steps { font-family: var(--font-ui); font-weight: 500; }
}
.op-brand .logo-lockup { height: 2.2em; }

/* ---------- Footer: an oliva field, the lockup in cream, as on her flyer backs ---------- */
.site-foot { background: var(--forest-field); color: var(--on-field); border-top: 0; }
.foot-logo { margin: 0 0 var(--s-7); }
.foot-logo .logo-lockup { height: clamp(48px, 5vw, 64px); }
.foot-grid h3 { color: var(--on-field-accent); }
.foot-links, .foot-links a { color: var(--on-field); }
.family { color: var(--on-field); border-top-color: color-mix(in srgb, var(--on-field) 28%, transparent); }
.family .leaf { background: var(--on-field); }
.family a { color: var(--on-field-accent); }
.site-foot :focus-visible { outline-color: var(--on-field); }

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .wordmark .logo-lockup { height: 32px; }
  .band-phrase { max-width: 12ch; }
}

/* A note set with the label class and an inline reset (version four's markup):
   it is a sentence, not a label, so it reads in Poppins. */
p.label[style] { font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: var(--t-base); color: var(--ink-soft); }
.section--forest p.label[style] { color: var(--on-field); }

/* Reduced motion hides the hero video (site.css); show its still frame instead of an empty field. */
@media (prefers-reduced-motion: reduce) {
  .hero:has(.hero-video) { background-image: url("/assets/video/hero-poster.jpg"); }
}

/* Version four dimmed some cream labels on fields to 78 to 82 percent. On her colours that
   falls under 4.5:1, so on a field they are full cream. */
.op-book .op-h, .op-book .icon, .chapter--onclay .chapter-meta, .pull cite,
.section--forest cite { color: var(--on-field); }

/* A title that is two sentences keeps its capitals; lowercase is for short titles. */
.section h2.ways-h2 { text-transform: none; }

/* ---- v6.css ---- */
/* ============================================================
   Website v3 (site-v6/): website v2 (site-v5/) in brand v3.
   Copied into site-v6/assets/css/v6.css by tools/make-v6.py and linked
   last on every page. Tokens only (tokens.css).
   Rules: BRAND.md sections 3 (colour), 4 (type), 5 (logo) and
   "Layout: grid, zones and formats"; the brand book's website mock.

   - One text colour per band: wine on off-white and shell beige,
     off-white on bay leaf, terracotta and jalapeño (titles only there).
   - Cinnabar buttons with off-white text; links SemiBold in the accent,
     no underline, the colour changes on hover.
   - The fixed type system: T1, T1 support line, T2, label, intro line,
     body, note. Nothing under 14px.
   - One box style: a thin apricot line, a small radius, no fill.
   - One left edge, tops aligned, space in 1x / 3x / 6x.
   ============================================================ */

/* ---------- Base ---------- */
body {
  background: var(--paper);
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.5;
  font-variation-settings: var(--display-soft);
}
p { margin: 0 0 var(--u); }
main p, main li, main dd { max-width: 62ch; }   /* body lines of 45 to 75 characters */
b, strong { font-weight: 600; }

a { color: var(--clay-ink); font-weight: 600; text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--link-hover); text-decoration: none; }
:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }

/* ---------- The fixed type system ---------- */
/* T1: Roca One (Fraunces soft) Bold, always lowercase, line height 0.9 */
.section h2, .chapter-copy h2, .mayra-copy h2, .page-hero h1, .hero-name,
.band-phrase, .pull, .pull p, .moment-copy h3, .rec-group > summary h2, .t1 {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 700; font-style: normal; text-transform: lowercase;
  font-size: var(--t1); line-height: 0.9; letter-spacing: -0.015em;
  overflow-wrap: break-word; hyphens: manual;
  margin: 0 0 var(--u);
}
.band-phrase em { font-style: normal; }

/* T1 support line: Regular, lowercase */
.hero-place {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 400; font-style: normal; text-transform: lowercase; letter-spacing: 0;
  font-size: var(--t1-sup); line-height: 1.2;
}

/* T2: Bold, UPPERCASE, open 0.02em, line height 1.15 (room for Ã, É, Ç), space below */
.section h3, .card h3, .plan h3, .way h3, .story-step h3, .foot-grid h3, .glance .g-h,
.op-h, .sched-day h3, .rec h3, .rec-sub > summary h3, .grid h2, .t2 {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 700; font-style: normal; text-transform: uppercase;
  letter-spacing: var(--track-t2); font-size: var(--t2); line-height: 1.15;
  color: inherit; margin: 0 0 var(--u);
}

/* Label: Regular Italic, normal capitalisation; optional, never heavy */
.label, .chapter-meta, .door-badge, .moment-when, .plan--feature .door-badge {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: var(--t-label); line-height: 1.3; color: inherit;
  background: none; border-radius: 0; padding: 0;
}
.label { margin: 0 0 var(--s-2); }

/* Intro line: Regular, sentence case, three lines at most */
.lede, .hero-lede, .faq summary, .quotes blockquote, .quotes blockquote p {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: var(--t-intro); line-height: 1.3; color: inherit;
}
.lede { max-width: 40ch; }

/* Body: Poppins Regular */
.card p, .way p, .story-step p, .facts dd, .g-block p, .rec-sum, .steps-list, .faq .answer,
.foot-links, .prose, blockquote.feature-quote, blockquote.feature-quote p, .embed-fallback {
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.5;
  font-style: normal; font-weight: 400; color: inherit; letter-spacing: 0;
}

/* Note: Poppins Regular 14px, line 1.4 */
.crumbs, small, cite, .plan .foot, .g-note, .g-days, .g-rest, .rec-kind, .rec-meta, .rec-credit,
.rec-n, .rec-count, .rec-from, .rec-note, .rec-preview, .family, .family p, .creds li,
.sched-seats, .sched-foot, .sched-flag, .op-foot, .hero-pause, .day .when, .g-more {
  font-family: var(--font-ui); font-size: var(--t-note); line-height: 1.4;
  font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit;
}
.crumbs a, .g-more { font-weight: 600; }

/* Emphasis: Poppins SemiBold at body size */
.facts dt, .plan .who, .day b, .g-class, .sched-name, .day .what, .op-cname {
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.3;
  font-weight: 600; font-style: normal; text-transform: none; letter-spacing: 0; color: inherit;
}

/* ---------- Buttons: cinnabar, off-white text, Poppins Medium 16, sentence case ---------- */
.btn, .site-head--over .btn, .site-head--over.is-stuck .btn, .glance--photo .btn:not(.btn--ghost),
.btn--light, .chapter--onclay .btn, .op-book .btn:not(.btn--ghost) {
  background: var(--cinnabar); color: var(--off-white);
  font-family: var(--font-ui); font-size: var(--t-btn); font-weight: 500; line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  padding: 14px 24px; border-radius: var(--r-pill); box-shadow: none;
}
.btn:hover { color: var(--off-white); filter: brightness(0.94); transform: none; }
.btn--ghost, .glance--photo .btn--ghost, .op-book .btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--cinnabar);
}
.btn--ghost:hover { color: var(--ink); background: var(--well); filter: none; }
.head-cta { padding: 10px 20px; }

/* ---------- The logo, brand v3 files, one colour ---------- */
.logo-lockup, .logo-wordmark {
  display: block; flex: none; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
/* Horizontal (icon beside the name): header, bands. 200px wide at least. */
.logo-lockup { --logo: url("/assets/logo/v3/espaco-horizontal.svg"); aspect-ratio: 1177.5 / 263.5; width: 200px; height: auto; }
/* Main (icon above the name): the home opening block and the footer. */
.logo-wordmark { --logo: url("/assets/logo/v3/espaco-main.svg"); aspect-ratio: 858.2 / 607.9; height: auto; }

/* ---------- Header ----------
   The horizontal logo at 220px (200 on a phone), half an x of clear space at least
   (x = 11.2% of its width). Cinnabar on the light bar, off-white over the photograph. */
.wordmark { color: var(--logo-colour); gap: 0; padding-block: 12px; }
.wordmark .logo-lockup { width: 220px; height: auto; }
.site-head--over .wordmark { color: var(--off-white); }
.site-head--over.is-stuck .wordmark, .site-head--page .wordmark { color: var(--logo-colour); }
.site-head .wrap { min-height: 76px; }
.site-head--over .wrap {
  background: rgb(var(--scrim) / 0.42);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--off-white) 22%, transparent);
  min-height: 76px;
}
.site-head--over.is-stuck .wrap, .site-head--page .wrap {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.site-head--page + main { padding-top: 104px; }

.nav { gap: var(--s-5); font-size: 15px; }
.nav a { font-weight: 400; border-bottom: 0; padding-block: 6px; color: inherit; }
.nav a:hover, .site-head--over.is-stuck .nav a:hover, .site-head--page .nav a:hover { color: var(--clay-ink); border-bottom: 0; }
.site-head--over:not(.is-stuck) .nav a:hover { color: var(--shell-beige); }
.nav a[aria-current="page"] { font-weight: 600; border-bottom: 0; }

/* Language: both names at 14px, side by side; the current one SemiBold. */
.lang { flex-direction: row; gap: var(--s-3); align-items: center; }
.lang .lang-link { font-size: var(--t-note); line-height: 1.4; opacity: 1; padding: 0; font-weight: 400; color: inherit; }
.lang .lang-link[aria-current="true"] { font-weight: 600; }
.lang .lang-link:hover { color: var(--clay-ink); }
.site-head--over:not(.is-stuck) .lang .lang-link:hover { color: var(--shell-beige); }

/* Phone menu */
.menu > summary { font-size: var(--t-btn); font-weight: 500; padding: 10px 18px; box-shadow: inset 0 0 0 1.5px currentColor; }
.menu-sheet {
  background: var(--paper); color: var(--ink); box-shadow: none;
  border-block: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md);
}
.menu-sheet a {
  font-family: var(--font-ui); font-size: var(--t-body); font-weight: 400;
  padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.menu-sheet a:hover { color: var(--clay-ink); }
.menu-langs { border-top-color: var(--line); }
.menu-langs a { border-bottom: 0; font-size: var(--t-note); }
.menu-langs [aria-current="true"] { text-decoration: none; font-weight: 600; opacity: 1; }

/* ---------- Home opening block: logo, support line, intro, buttons, centred ----------
   The opening block may be centred with the logo (BRAND.md 4). */
.hero-copy { text-align: center; text-shadow: none; padding-block: 160px var(--s-8); }
.hero h1.hero-logo { margin: 0 auto calc(var(--u) * 1.5); line-height: 0; font-size: inherit; }
.hero-logo .logo-wordmark { width: clamp(220px, 24vw, 340px); margin-inline: auto; filter: none; color: var(--off-white); }
.hero-place { margin: 0 auto var(--u); }
.hero-lede { margin: 0 auto calc(var(--u) * 2); max-width: 34ch; }
.hero-copy .btn-row { justify-content: center; }
.hero-copy .btn--ghost { color: var(--off-white); box-shadow: inset 0 0 0 1.5px var(--off-white); }
.hero-copy .btn--ghost:hover { background: rgb(var(--scrim) / 0.35); color: var(--off-white); }
.hero { background: var(--night); }

/* Interior hero with a video (Mayra): left aligned, T1 + intro + notes */
.hero--page .hero-copy { text-align: left; }
.hero--page .hero-lede { margin-inline: 0; }
.creds li { border: 1.5px solid var(--apricot); color: inherit; padding: 6px 14px; }
.creds--onphoto li { color: var(--off-white); border-color: var(--off-white); }

/* ---------- The answers panel over the video ---------- */
.drop-btn {
  font-size: var(--t-btn); font-weight: 500; color: var(--off-white);
  background: rgb(var(--scrim) / 0.42); box-shadow: inset 0 0 0 1.5px var(--off-white);
}
.drop-btn:hover { background: rgb(var(--scrim) / 0.6); }
.drop-btn[aria-expanded="true"] { background: var(--off-white); color: var(--wine); box-shadow: none; }
.glance--photo {
  background: var(--bay-leaf); color: var(--off-white);
  border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--r-md);
}
.glance--photo .g-block { border-bottom-color: color-mix(in srgb, var(--apricot) 45%, transparent); padding: var(--s-5); }
.glance--photo .g-h, .glance--photo .g-days, .glance--photo .g-note, .glance--photo .g-rest,
.glance--photo .g-h .icon { color: var(--off-white); }
.glance .g-h { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t2); }
.glance .g-h .icon { width: 24px; height: 24px; }
.glance--photo .g-week li, .glance--photo .g-prices li { border-bottom: 0; }
.glance--photo a:not(.btn) { color: var(--off-white); }
.glance--photo a:not(.btn):hover { color: var(--shell-beige); }
.glance--photo .btn--ghost { color: var(--off-white); box-shadow: inset 0 0 0 1.5px var(--off-white); }
.glance--photo .btn--ghost:hover { background: color-mix(in srgb, var(--off-white) 14%, transparent); color: var(--off-white); }
@media (min-width: 1360px) {
  .drop-panel > .glance--photo .g-block:nth-child(odd) { border-right-color: color-mix(in srgb, var(--apricot) 45%, transparent); }
}
.g-week li { border-bottom: 0; padding: 6px 0; }
.g-time { font-size: var(--t-body); }

/* ---------- Sections: flat colour, one text colour per band ---------- */
.section--shell, .chapter--reverse { background: var(--shell); }
.section--sand { background: var(--sand); }
.section--forest { background: var(--bay-leaf); color: var(--off-white); }
.section--forest .label, .section--forest .lede, .section--forest cite, .section--forest a:not(.btn) { color: var(--off-white); }
.section--forest a:not(.btn):hover { color: var(--shell-beige); }
.chapter { background: var(--paper); }
.chapter--reverse { background: var(--shell); }
.section { padding-block: var(--band); }
.section--tight { padding-block: calc(var(--u) * 2); }

/* Section opening: label, T1, intro, then the link, on one left edge; 3x before the content. */
.section-head { display: block; margin-bottom: calc(var(--u) * 3); }
.section-head > div { margin-bottom: var(--u); }
.section-head > a { display: inline-block; }
.section-head h2 { margin-bottom: var(--u); }
.section-head .lede { margin-top: var(--u); }
.section .label + h2, .label + h2 { margin-top: 0; }
.section h2.ways-h2 { text-transform: lowercase; max-width: 18ch; margin-bottom: calc(var(--u) * 3) !important; }

/* Phrase bands: a T1 on a flat terracotta or jalapeño field, the logo under it (titles only). */
.band { padding: calc(var(--band) * 1.1) var(--gutter); color: var(--off-white); text-align: center; }
.band--terracota { background: var(--terracotta); }
.band--salvia { background: var(--jalapeno); }
.band-phrase { max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.band .logo-lockup { width: 220px; height: auto; margin: calc(var(--u) * 3) auto 0; color: var(--off-white); }
.pull { max-width: 18ch; }
.pull p { margin: 0; }
.pull cite { margin-top: calc(var(--u) * 2); color: var(--off-white); font-size: var(--t-note); }

/* ---------- Boxes: one style per page ---------- */
.card, .plan, .plan--feature, .embed, .op-tile, .rec, .rec-filters, .glance:not(.glance--photo) {
  background: transparent; color: inherit;
  border: var(--stroke) solid var(--outline); border-radius: var(--r-md);
  box-shadow: none;
}
.card, .plan { padding: calc(var(--u) * 2); }
.card p { color: inherit; }
.card p:last-child { margin-bottom: 0; }
.icon { color: currentColor; width: 28px; height: 28px; margin-bottom: var(--u); }

/* Three or four short cards: body lines would fall under 45 characters in three or four
   columns, so on a wide screen each card is a row (icon and T2 left, body right), and
   four cards go two by two. */
.grid { gap: calc(var(--u) * 1.5); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 861px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--3 > .card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    column-gap: calc(var(--u) * 2); align-items: start;
  }
  .grid--3 > .card > .icon { grid-column: 1; grid-row: 1; }
  .grid--3 > .card > h3 { grid-column: 1; grid-row: 2; margin: 0; }
  .grid--3 > .card > p { grid-column: 2; grid-row: 1 / span 2; }
  .ways { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 1px solid var(--line); }
  .way {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: calc(var(--u) * 2);
    padding-block: calc(var(--u) * 2); border-bottom: 1px solid var(--line); align-items: start;
  }
  .way > .icon { grid-column: 1; grid-row: 1; }
  .way > h3 { grid-column: 1; grid-row: 2; margin: 0; }
  .way > p { grid-column: 2; grid-row: 1 / span 2; max-width: 62ch; }
}
.way p { color: inherit; font-size: var(--t-body); max-width: 62ch; }
.ways { border-top-color: var(--line); }

/* ---------- Prices: item Regular, price SemiBold, same size, dotted leader; units in a note ---------- */
.doors { gap: calc(var(--u) * 1.5); align-items: start; }
.plan, .plan--feature { color: inherit; }
.plan .who { margin: 0 0 var(--s-2); color: inherit; }
.plan h3 { margin-bottom: var(--u); }
.door-badge { margin: calc(var(--u) * -0.5) 0 var(--u); color: inherit; }
.plan ul { margin: 0 0 var(--u); }
.plan li, .g-prices li {
  font-size: var(--t-body); padding-block: 8px; border-bottom: 0; gap: var(--s-2); align-items: baseline;
}
.plan li > b, .g-prices li > b { font-weight: 600; font-size: inherit; }
.plan li span { display: grid; gap: 2px; }
.plan li small, .door li small { display: block; font-size: var(--t-note); color: inherit; }
.plan li::after, .g-prices li::after, .plan--feature li::after, .glance--photo .g-prices li::after {
  border-bottom: 2px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.plan .foot { color: inherit; padding-top: 0; }
.plan--feature .who, .plan--feature li small, .plan--feature .foot { color: inherit; }

/* ---------- The week ---------- */
.rail { background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); gap: 1px; }
.day { background: var(--sand); color: var(--ink); }
.day:hover { background: var(--well); color: var(--ink); }
.day--rest { background: var(--sand); }
.day.is-today { background: var(--well); }
.day b { font-size: var(--t-note); color: inherit; }
.day .what { margin: var(--s-3) 0 var(--s-2); }
.day--rest .what, .day .when { color: inherit; }
.day.is-today b::after { color: inherit; }
.kind--flow { background: var(--cinnabar); }
.kind--strength { background: var(--jalapeno); }
.kind--rest { background: var(--bay-leaf); }
p.label[style] { font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: var(--t-body); color: inherit; }

/* ---------- Chapters (photo + copy): tops aligned ---------- */
.chapter-copy, .mayra-copy { justify-content: flex-start; padding: var(--band) var(--gutter); }
.chapter-copy > *, .mayra-copy > * { max-width: 34rem; }
.chapter-copy p, .mayra-copy p { font-size: var(--t-body); }
.chapter-meta { margin: 0 0 calc(var(--u) * 2); color: inherit; }

/* ---------- A morning on the deck ---------- */
.moment-copy h3 { color: var(--off-white); }
.moment-when { color: var(--off-white); margin: 0 0 var(--s-2); }
.moment-copy p { font-size: var(--t-body); }

/* ---------- Mayra and the story ---------- */
.story-step p { color: inherit; }
.story-steps, .story-step { border-color: var(--line); }

/* ---------- Quotes ---------- */
.feature-quote { max-width: 62ch; border-left: 3px solid var(--apricot); padding-left: calc(var(--u) * 1.5); margin-bottom: calc(var(--u) * 4); }
.feature-quote cite, .quotes cite { margin-top: var(--s-3); }
.quotes { gap: calc(var(--u) * 3) calc(var(--u) * 4); }
blockquote { font-style: normal; }

/* ---------- Finding the deck ---------- */
.facts div { border-bottom-color: var(--line); }
.facts dd { color: inherit; }

/* ---------- FAQ ---------- */
.faq, .faq details { border-color: var(--line); }
.faq summary { padding-block: calc(var(--u) * 1.25); }
.faq summary::after { color: var(--clay-ink); font-size: var(--t2); }
.faq .answer { color: inherit; }

/* ---------- Booking ---------- */
.embed { padding: calc(var(--u) * 2); }
.steps-list { color: inherit; }
.sched-day h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; border-bottom-color: var(--line); padding-bottom: var(--s-2); }
.sched-class:hover { background: var(--well); }
.sched-time { color: inherit; font-size: var(--t-body); }
.sched-seats { color: inherit; border-color: var(--apricot); }
.sched-class.is-tight .sched-seats { color: inherit; border-color: var(--cinnabar); }
.sched-day.is-tomorrow { background: var(--well); }
.sched-flag { font-weight: 600; color: inherit; }
.momo, .momo-schedule-wrapper { --momo-btn-primary-bg: var(--cinnabar); --momo-btn-primary-bg-hover: var(--cinnabar); --momo-btn-secondary-bg: var(--well); }

/* ---------- Footer: bay leaf, everything off-white ---------- */
.site-foot { background: var(--bay-leaf); color: var(--off-white); border-top: 0; padding-block: var(--band) calc(var(--u) * 4); }
.foot-logo { margin: 0 0 calc(var(--u) * 3); line-height: 0; color: var(--off-white); }
.foot-logo .logo-lockup { width: 240px; height: auto; }
.foot-grid h3 { color: var(--off-white); font-size: var(--t2); }
.foot-links { font-size: var(--t-body); }
.foot-links, .foot-links a { color: var(--off-white); font-weight: 400; }
.foot-links a:hover { color: var(--shell-beige); text-decoration: none; }
.family { color: var(--off-white); border-top-color: color-mix(in srgb, var(--apricot) 50%, transparent); }
.family .leaf { background: var(--off-white); }
.family a { color: var(--off-white); font-weight: 600; }
.family a:hover { color: var(--shell-beige); }
.site-foot :focus-visible { outline-color: var(--off-white); }

/* ---------- Phone booking bar ---------- */
.bookbar { background: var(--paper); border-top: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Mayra's Itacaré ---------- */
.rec-preview { background: none; border: 1.5px solid var(--apricot); color: inherit; }
.rec-filters { background: transparent; }
.rec-row .label { font-size: var(--t-label); }
.chip { font-size: var(--t-note); font-weight: 500; color: var(--ink); border: 1.5px solid var(--apricot); }
.chip:hover { background: var(--well); }
.chip[aria-pressed="true"] { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--off-white); }
.rec-groups { border-top-color: var(--line); }
.rec-group, .rec-sub { border-color: var(--line); }
.rec-group > summary h2 { font-size: var(--t1-min); margin: 0; }
.rec-group > summary::after, .rec-sub > summary::after { color: var(--clay-ink); box-shadow: inset 0 0 0 1.5px var(--apricot); }
.rec-group > summary:hover::after, .rec-sub > summary:hover::after { background: var(--well); }
.rec-sub > summary h3 { margin: 0; }
.recs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); gap: calc(var(--u) * 1.5); }
.rec { padding: calc(var(--u) * 1.25); --thumb: 96px; }
.rec h3 { margin: 0 0 var(--s-1); font-size: var(--t2); }
.rec-ph { background: var(--well); color: inherit; }
.rec-sum, .rec-meta, .rec-kind, .rec-credit { color: inherit; }
.rec-links { border-top-color: var(--line); }

/* ---------- The quick guide (one screen) ----------
   Its sizes follow the window; the floors keep every line at 14px or more. */
.op-tile { background: transparent; }
.op-hero { background: var(--night); border: 0; }
.op-hero h1 { font-family: var(--font-display); font-weight: 700; font-style: normal; text-transform: lowercase; line-height: 0.9; letter-spacing: -0.015em; }
.op-hero p { font-size: max(14px, 1.1em); }
.op-h { font-size: max(14px, 1.15em); display: flex; align-items: center; gap: 0.5em; color: inherit; padding-bottom: 0.7em; margin-bottom: auto; }
.op .icon { color: currentColor; }
.op-small { font-size: max(14px, 0.9em); color: inherit; }
.op-days { font-size: max(14px, 0.85em); letter-spacing: 0; text-transform: none; color: inherit; }
.op-cname { font-size: max(18px, 1.6em); }
.op-time { font-weight: 400; }
.op-big, .op-mid { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }
.op-big small, .op-mid small { font-size: max(14px, 0.26em) !important; color: inherit; font-weight: 400; }
.op-from { font-size: max(14px, 0.5em); color: inherit; font-weight: 400; }
.op-street { font-family: var(--font-ui); font-weight: 600; font-size: max(18px, 1.5em); }
.op-where p, .op-facts li { font-size: max(14px, 1em); }
.op-book { background: transparent; color: inherit; border-color: var(--outline); }
.op-book .op-h, .op-book .icon { color: inherit; }
.op-steps { font-family: var(--font-ui); font-weight: 400; font-size: max(14px, 1.1em); }
.op .btn { font-size: max(14px, 0.95em); }
.op-book .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--cinnabar); }
.op-foot { color: inherit; font-size: max(14px, 0.85em); }
.op-tile, .op-class, .op-mid, .op-week .op-small { border-color: var(--line); }
.op-share > summary { font-size: max(14px, 0.95em); background: rgb(var(--scrim) / 0.42); border-color: var(--off-white); }
.op-share-menu { background: var(--paper); border-color: var(--line); box-shadow: none; }
.op-share-menu .op-share-ico { color: currentColor; }
.op-share-menu > a, .op-share-menu > button { font-size: max(14px, 0.95em); font-weight: 400; }
@media screen and (max-width: 899px) {
  .op-big, .op-mid { font-size: 1.6em; }
  .op-big small, .op-mid small { font-size: 14px !important; }
  .op-hero h1 { font-size: 2.4em; }
  .op-cname { font-size: 18px; }
  .op-days, .op-time, .op-facts li, .op-steps { font-size: 14px; }
}

/* ---------- 404 ---------- */
.lost-logo { width: 240px; margin: 0 auto calc(var(--u) * 2); color: var(--logo-colour); }

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  .wordmark .logo-lockup { width: 200px; }
  .site-head .wrap, .site-head--over .wrap { min-height: 68px; }
  .site-head--page + main { padding-top: 96px; }
  .hero-copy { padding-block: 140px calc(var(--u) * 3); }
  .hero-logo .logo-wordmark { width: 200px; }
  .grid--4 { grid-template-columns: 1fr; }
  .band .logo-lockup { width: 200px; }
  .foot-logo .logo-lockup { width: 200px; }
  .chapter-copy, .mayra-copy { padding-block: calc(var(--u) * 4); }
  .card, .plan { padding: calc(var(--u) * 1.75); }
  .rec { --thumb: 76px; }
}

/* Reduced motion: the still frame instead of the video. */
@media (prefers-reduced-motion: reduce) {
  .hero:has(.hero-video) { background-image: url("/assets/video/hero-poster.jpg"); }
}

/* The pause button on the hero video */
.hero-pause { border: 1.5px solid var(--off-white); background: rgb(var(--scrim) / 0.5); color: var(--off-white); }

/* The answers button clears the taller header bar. */
.drop { top: 116px; }
.drop-panel > .glance { max-height: calc(100svh - 116px - 48px - var(--s-3) - var(--s-5)); }
@media (max-width: 860px) { .drop { top: 104px; } }
.hero-copy > p, .hero-copy > .btn-row { margin-inline: auto; }
.hero--page .hero-copy > p { margin-inline: 0; }

/* Pages without a photograph start below the taller header bar. */
.site-head--page + main { padding-top: 120px; }
@media (max-width: 860px) { .site-head--page + main { padding-top: 104px; } }
/* The quick guide on a phone: with a 14px floor it no longer fits one screen, so it scrolls. */
@media screen and (max-width: 899px) {
  .op { height: auto; min-height: 0; }
  .op-grid { grid-template-rows: 200px auto auto auto auto auto; }
  .op-hero-copy { padding-right: 1em; padding-top: 3.5em; }
}
.hero h1.hero-name { font-style: normal; font-size: var(--t1); line-height: 0.9; letter-spacing: -0.015em; }

/* ============================================================
   Words on photographs (brand book, photography): never on a wash.
   They sit on a solid bay-leaf panel (off-white text, small text allowed),
   on one side of the photo on a wide screen and under it on a phone.
   The photographs themselves are untouched: no fades anywhere.
   ============================================================ */
.hero::before { content: none; background: none; }
.hero-copy {
  width: min(540px, calc(100% - 2 * var(--gutter)));
  justify-self: start; align-self: end;
  margin: 0 0 calc(var(--u) * 3) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding: calc(var(--u) * 2.5) calc(var(--u) * 2);
  background: var(--bay-leaf); color: var(--off-white);
  border-radius: var(--r-md); text-shadow: none;
}
.hero-logo .logo-wordmark { width: clamp(180px, 15vw, 240px); }
.hero-lede { max-width: none; }
.hero--page .hero-copy { padding: calc(var(--u) * 2); }
.hero--page .hero-name { margin-bottom: var(--u); }

/* Bars and pills that sit over a photograph: solid bay leaf, not glass. */
.site-head--over:not(.is-stuck) .wrap {
  background: var(--bay-leaf); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.drop-btn, .drop-btn:hover { background: var(--bay-leaf); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.drop-btn:hover { background: var(--cinnabar); }
.hero-pause { background: var(--bay-leaf); -webkit-backdrop-filter: none; backdrop-filter: none; }
.op-share > summary, .op-share > summary:hover, .op-share[open] > summary {
  background: var(--bay-leaf); border-color: var(--bay-leaf); color: var(--off-white);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* A morning on the deck: the words on a bay-leaf panel at the lower left. */
.moment-copy {
  background: var(--bay-leaf); color: var(--off-white);
  inset: auto auto calc(var(--u) * 3) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  width: min(520px, calc(100% - 2 * var(--gutter)));
  padding: calc(var(--u) * 2); border-radius: var(--r-md);
}
.moment-copy > div { max-width: none; margin: 0; }
.moment-copy h3 { font-size: var(--t1-min); }

/* The quick guide: the words on a bay-leaf band across the foot of the photo (a third at most). */
.op-hero-copy { background: var(--bay-leaf); padding: 1em 1.4em 1.1em; }
.op-hero h1 { font-size: 2.6em; }

@media (max-width: 860px) {
  /* The hero stacks: the photograph on top, the panel under it, nothing over the picture
     but the header and the answers button. */
  .hero, .hero--page { display: block; min-height: 0 !important; background: var(--bay-leaf); }
  .hero-photo, .hero-video { position: absolute; inset: 0 0 auto 0; width: 100%; height: 62svh; }
  .hero-copy {
    width: 100%; margin: 62svh 0 0; border-radius: 0;
    padding: calc(var(--u) * 2.5) var(--gutter) calc(var(--u) * 3);
  }
  .hero--page .hero-copy { padding: calc(var(--u) * 2.5) var(--gutter) calc(var(--u) * 3); }
  .hero-logo .logo-wordmark { width: 180px; }
  /* Each moment: the photograph, then its panel under it. */
  .moment { grid-template-rows: minmax(0, 1fr) auto; }
  .moment img { min-height: 0; }
  .moment-copy { position: static; width: 100%; border-radius: 0; padding: calc(var(--u) * 2) var(--gutter) calc(var(--u) * 2.5); }
}
@media screen and (max-width: 899px) {
  .op-grid { grid-template-rows: 260px auto auto auto auto auto; }
  .op-hero h1 { font-size: 2.1em; margin: 0; }
  .op-hero-copy { padding: 0.8em 1em; }
}
/* Reduced motion shows the still frame, each page its own, above the panel. */
@media (prefers-reduced-motion: reduce) {
  .hero--page:has(.hero-video) { background-image: url("/assets/video/mayra-poster.jpg"); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .hero:has(.hero-video) { background-size: auto 62svh; background-position: center top; background-repeat: no-repeat;
    background-color: var(--bay-leaf); }
}
/* The photo tile has no inner padding, so the panel runs edge to edge along its foot. */
.op-tile.op-hero { padding: 0; }
.op-hero-copy { border-radius: 0 0 var(--r-md) var(--r-md); }

/* ---- v7.css ---- */
/* ============================================================
   Website "v3 adjusted" (site-v7/): website v3 (site-v6/) with Junior's
   changes of 5 October 2026. Copied into site-v7/assets/css/v7.css by
   tools/make-v7.py and linked after v6.css on every page. Tokens only.

   INTENTIONAL EXCEPTION, this variant only: the brand book puts words on
   photographs on a solid panel and uses no gradients. Here, at Junior's
   request, the words sit straight on the video and on the morning photos
   (over a soft dark scrim and a text shadow, as in website v1 and v2), the
   top bar, the answers button and the answers panel are see-through, and
   blocks fade into each other. Website v3 (site-v6/) keeps the book's rules.

   1. Top bar: website v2's see-through pill over the video, frosted paper
      once the page scrolls; the two languages stacked.
   2. Home and Mayra openings: logo, place and intro on the video, no panel;
      the answers button and panel are website v1's glass.
   3. One background: shell beige bands become off-white (night in dark mode).
   4. A morning on the deck: the words on the photographs, no panel.
   5. Box lines in jalapeño instead of apricot.
   6. (markup, make-v7.py) no Itacaré link in the top bar or the phone menu.
   7. Fades where two blocks of a different colour meet (classes and colours
      set by make-v7.py), and at the top and bottom of the side photographs.
   ============================================================ */

:root {
  --fade: clamp(56px, 8vw, 112px);         /* two flat colours meeting */
  --fade-media: clamp(40px, 5vw, 72px);  /* the space under words on a picture (fades between blocks removed 5 Oct) */
}

/* ---------- 3 and 5. One off-white background; jalapeño box lines ---------- */
:root {
  --shell: var(--paper);
  --sand: var(--paper);
  --outline: var(--jalapeno);
  --line-strong: var(--jalapeno);
  --line: color-mix(in srgb, var(--jalapeno) 55%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell: var(--paper); --sand: var(--paper);
    --line: color-mix(in srgb, var(--jalapeno) 75%, transparent);
    --line-strong: var(--jalapeno);
  }
}
:root[data-theme="dark"] {
  --shell: var(--paper); --sand: var(--paper);
  --line: color-mix(in srgb, var(--jalapeno) 75%, transparent);
  --line-strong: var(--jalapeno);
}
.creds li, .rec-preview, .chip, .sched-seats { border-color: var(--jalapeno); }
.creds--onphoto li { border-color: var(--off-white); }
.rec-group > summary::after, .rec-sub > summary::after { box-shadow: inset 0 0 0 1.5px var(--jalapeno); }
.feature-quote { border-left-color: var(--jalapeno); }

/* ---------- 1. Top bar ---------- */
.site-head--over:not(.is-stuck) .wrap {
  background: rgb(var(--scrim) / 0.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--off-white) 18%, transparent);
}
/* The same frosted glass on every page and all the way down (Junior, 5 Oct): off-white words
   and logo on a blurred, tinted pill. Over the hero the tint is light (30%), as the video is
   dark already; over the off-white page it is deeper (66%), so the 14 to 15px links keep at
   least 4.5:1 on the lightest background behind them. */
.site-head--over.is-stuck .wrap, .site-head--page .wrap {
  background: rgb(var(--scrim) / 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--off-white) 18%, transparent);
}
.site-head--over.is-stuck, .site-head--page { color: var(--off-white); }
.site-head--over.is-stuck .wordmark, .site-head--page .wordmark { color: var(--off-white); }
.site-head--over.is-stuck .nav a:hover, .site-head--page .nav a:hover,
.site-head--over.is-stuck .lang .lang-link:hover, .site-head--page .lang .lang-link:hover { color: var(--shell-beige); }
.site-head--over .nav a, .site-head--over .lang .lang-link {
  text-shadow: 0 1px 10px rgb(var(--scrim) / 0.45);
}
/* The two languages, one above the other */
.lang { flex-direction: column; align-items: flex-start; gap: 0; }
.lang .lang-link { line-height: 1.3; }

/* ---------- 2. The opening on the video ---------- */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Shading for the words, as on v2: dark under the top bar and at the foot where the words sit. */
  background:
    linear-gradient(180deg, rgb(var(--scrim) / 0.55) 0, rgb(var(--scrim) / 0) 24%),
    linear-gradient(0deg, rgb(var(--scrim) / 0.85) 0, rgb(var(--scrim) / 0.45) 38%, rgb(var(--scrim) / 0) 64%);
}
.hero-copy, .hero--page .hero-copy {
  width: 100%; max-width: var(--max); justify-self: stretch; align-self: end;
  margin: 0 auto; border-radius: 0; background: none; color: var(--off-white);
  padding: var(--s-9) var(--gutter) calc(var(--fade-media) + var(--s-3));
  text-align: left;
  text-shadow: 0 1px 28px rgb(var(--scrim) / 0.55), 0 1px 3px rgb(var(--scrim) / 0.35);
}
.hero-copy > p, .hero-copy > .btn-row { margin-inline: 0; }
.hero h1.hero-logo { margin: 0 0 var(--u); }
.hero-logo .logo-wordmark {
  width: clamp(200px, 19vw, 280px); margin-inline: 0;
  filter: drop-shadow(0 1px 20px rgb(var(--scrim) / 0.5));
}
.hero-place { margin: 0 0 var(--u); }
.hero-lede { max-width: 36ch; margin: 0 0 calc(var(--u) * 2); }
.hero-copy .btn-row { justify-content: flex-start; }
.hero-copy .btn { text-shadow: none; }
.hero-copy .btn--ghost { background: rgb(var(--scrim) / 0.25); }

/* The answers button and panel: website v1's glass */
.drop-btn, .drop-btn:hover, .drop-btn[aria-expanded="true"] {
  color: var(--off-white);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.drop-btn { background: rgb(var(--scrim) / 0.3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--off-white) 55%, transparent); }
.drop-btn:hover { background: rgb(var(--scrim) / 0.5); }
.drop-btn[aria-expanded="true"] { background: rgb(var(--scrim) / 0.5); box-shadow: inset 0 0 0 1.5px var(--off-white); }
.glance--photo {
  background: rgb(var(--scrim) / 0.66); color: var(--off-white);
  border: 1px solid color-mix(in srgb, var(--off-white) 22%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.glance--photo .g-block { border-bottom-color: color-mix(in srgb, var(--off-white) 18%, transparent); }
@media (min-width: 1360px) {
  .drop-panel > .glance--photo .g-block:nth-child(odd) { border-right-color: color-mix(in srgb, var(--off-white) 18%, transparent); }
}
.hero-pause {
  background: rgb(var(--scrim) / 0.4); border-color: color-mix(in srgb, var(--off-white) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* ---------- 4. A morning on the deck: words on the photographs ---------- */
.morning { isolation: isolate; }
.moment-copy {
  inset: auto 0 0 0; width: auto; border-radius: 0; color: var(--off-white);
  padding: var(--band) var(--gutter) calc(var(--fade-media) + var(--s-3));
  background: linear-gradient(0deg, rgb(var(--scrim) / 0.85) 0, rgb(var(--scrim) / 0.45) 60%, rgb(var(--scrim) / 0) 100%);
  text-shadow: 0 1px 24px rgb(var(--scrim) / 0.55), 0 1px 3px rgb(var(--scrim) / 0.35);
}
.moment-copy > div { max-width: var(--max); margin-inline: auto; }
.moment-copy p { max-width: 42ch; }
.morning-stage { gap: 0; }
/* The photographs fill the screen and are framed on what matters (Junior, 5 Oct: on a wide
   screen the walk showed only sky and the class only the roof). In the scrolling version the
   picture used to keep its own height and show its top; now it is cut to the screen, and each
   one is placed on its subject. The words sit bottom left, so the subject stays above them. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .moment { overflow: hidden; }
    .moment img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
  }
}
.moment img[src*="concha-walk"] { object-position: 52% 85%; }   /* Mayra on the rocks, the sea behind */
.moment img[src*="deck-class"]  { object-position: 55% 45%; }   /* raised hands down to the mats */
.moment img[src*="detail-hands"] { object-position: 50% 70%; }  /* hair, arms and the hands on the feet */

/* ---------- 7. Fades between blocks: removed 5 Oct (Junior: "to rethink later"). ---------- */

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  /* Website v3 stacked the photo over a panel; here the words go back on the picture. */
  .hero { display: grid; min-height: min(94svh, 780px) !important; background-color: var(--night); }
  .hero--page { min-height: min(84svh, 720px) !important; }
  .hero-photo { position: absolute; inset: -4%; width: 108%; height: 108%; }
  .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-copy, .hero--page .hero-copy {
    width: 100%; margin: 0;
    padding: 132px var(--gutter) calc(var(--fade-media) + var(--s-2));
  }
  .hero-logo .logo-wordmark { width: 180px; }
  .moment { grid-template-rows: none; }
  .moment-copy {
    position: absolute; width: auto;
    padding: var(--band) var(--gutter) calc(var(--fade-media) + var(--s-2));
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .hero:has(.hero-video) { background-size: cover; background-position: center; background-color: var(--night); }
}

/* ---- prod.css ---- */
/* ============================================================
   Production site (dist-prod/, tools/make-prod.py): what the live site adds to
   website "v3 adjusted" (site-v7/). Copied to assets/css/prod.css and linked last.
   Tokens only (tokens.css + v7.css), so dark mode follows the site.

   1. The cookie card: discreet. Off-white card, wine text, Poppins 14px, a thin
      jalapeño line like the site's boxes, two equal buttons (cinnabar Accept,
      outline Decline). Bottom left on a computer; on a phone a slim bar that sits
      above the booking bar, never over it (consent.js sets --consent-above).
      position: fixed, so it never moves the page.
   2. The footer line: Privacy and Cookies.
   3. The privacy pages.
   ============================================================ */

/* ---------- 1. Cookie card ---------- */
.consent {
  --consent-above: 0px;
  position: fixed; z-index: 70;
  right: var(--s-5); bottom: var(--s-5);  /* right: the opening's buttons sit at the left */
  width: min(360px, calc(100vw - 2 * var(--s-5)));
  padding: var(--s-4);
  background: var(--raised); color: var(--ink);
  border: 1.5px solid var(--jalapeno); border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: var(--t-note); line-height: 1.4;
}
.consent[hidden] { display: none; }
.consent-text { margin: 0 0 var(--s-3); max-width: none; font-size: var(--t-note); }
.consent-text a { color: var(--clay-ink); font-weight: 600; white-space: nowrap; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.consent .btn {
  justify-content: center; text-align: center;
  font-size: var(--t-note); padding: 9px 14px; min-height: 40px;
}
.consent .btn--ghost { color: var(--ink); background: transparent; }
.consent .btn--ghost:hover { background: var(--well); }

@media (max-width: 860px) {
  .consent {
    left: var(--s-3); right: var(--s-3); width: auto;
    bottom: calc(var(--consent-above) + var(--s-2));
    padding: var(--s-3) var(--s-4);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  }
  .consent-text { margin: 0; flex: 1 1 260px; }
  .consent-btns { flex: 1 1 200px; }
}
@media print { .consent { display: none !important; } }

/* ---------- 2. Footer: Privacy and Cookies ---------- */
.foot-legal {
  margin: var(--s-4) 0 0; font-family: var(--font-ui); font-size: var(--t-note); line-height: 1.4;
  color: var(--off-white);
}
.foot-legal a { color: var(--off-white); font-weight: 600; }
.foot-legal a:hover { color: var(--shell-beige); }
.foot-legal span { margin-inline: var(--s-2); opacity: 0.7; }
.op-foot a { font-weight: 600; }

/* ---------- 3. Privacy pages ---------- */
.privacy { padding-top: 0; }
.privacy .prose { max-width: 44rem; }
.privacy .prose h2 {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-t2);
  font-size: var(--t2); line-height: 1.15; margin: var(--s-7) 0 var(--s-3);
}
.privacy .prose h2:first-child { margin-top: 0; }
.privacy .prose p, .privacy .prose li { max-width: 62ch; }
.privacy-table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0 var(--s-4); font-size: var(--t-note); line-height: 1.4; }
.privacy-table th, .privacy-table td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line); }
.privacy-table th { font-weight: 600; }
.privacy-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .privacy-table thead { display: none; }
  .privacy-table tr { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .privacy-table td { display: block; border: 0; padding: 2px 0; }
}
.privacy .updated { margin-top: var(--s-7); font-size: var(--t-note); }

/* ---------- 4. Tap targets ----------
   The stacked English / Português links were 18px tall (Lighthouse target-size wants 24). */
.lang .lang-link { display: inline-flex; align-items: center; min-height: 24px; }