/* Garo Feslian · team retreats in nature
   Palette: crema, salvia, azzurro, malva, plus ink and night. No sand.
   The page follows one day: first light, the day's work, the evening, the morning after.
   Shapes: buttons and chips are pills, everything else (photos, tiles, panels) is square. */

@font-face { font-family: 'Nocturno'; src: url('../fonts/nocturno-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nocturno'; src: url('../fonts/nocturno-regular-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nocturno'; src: url('../fonts/nocturno-book.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nocturno'; src: url('../fonts/nocturno-book-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Diurnal'; src: url('../fonts/diurnal-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Diurnal'; src: url('../fonts/diurnal-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Diurnal'; src: url('../fonts/diurnal-regular-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Diurnal'; src: url('../fonts/diurnal-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Diurnal Mono'; src: url('../fonts/diurnal-mono-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Brand palette */
  --crema: #F3F0E5;
  --salvia: #7C8D7E;
  --azzurro: #BAC7C9;
  --malva: #9C818E;
  /* Working shades of the palette, for contrast (AA on their pairing) */
  --crema-deep: #E9E5D9;
  --azzurro-pale: #DCE3E2;
  --salvia-ink: #4F5F52;    /* small text on crema, 6:1 */
  --malva-deep: #5B4753;    /* background, crema text 7.4:1 */
  --malva-ink: #6F5866;     /* small text on crema, 5.6:1 */
  --ink: #22201C;
  --night: #0E0D0B;

  --font-display: 'Nocturno', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-text: 'Diurnal', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Diurnal Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --gap: clamp(16px, 1.8vw, 26px);
  --section-y: clamp(72px, 8vw, 120px);
  --header-h: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --grain: url('../img/grain.png');

  /* z-index scale */
  --z-grain: 30;
  --z-header: 40;
  --z-menu: 60;
}

/* Tones: each section declares its light. */
.tone-dawn  { --bg: var(--azzurro-pale); --fg: var(--ink);   --soft: rgb(34 32 28 / .74); --accent: var(--salvia-ink); --accent-2: var(--malva-ink); --rule: rgb(34 32 28 / .16); }
.tone-day   { --bg: var(--crema);        --fg: var(--ink);   --soft: rgb(34 32 28 / .74); --accent: var(--salvia-ink); --accent-2: var(--malva-ink); --rule: rgb(34 32 28 / .14); }
.tone-dusk  { --bg: var(--malva-deep);   --fg: var(--crema); --soft: rgb(243 240 229 / .84); --accent: var(--azzurro); --accent-2: #D9CCD3; --rule: rgb(243 240 229 / .22); }
.tone-night { --bg: var(--night);        --fg: var(--crema); --soft: rgb(243 240 229 / .74); --accent: var(--azzurro); --accent-2: #C9B8C1; --rule: rgb(243 240 229 / .16); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--crema);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* film grain: one fixed layer, never repainted on scroll */
body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; background-image: var(--grain); background-size: 200px; opacity: .38; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--malva); color: var(--crema); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: .7em 1.1em; background: var(--ink); color: var(--crema); border-radius: 999px; transform: translateY(-160%); transition: transform .3s var(--ease); text-decoration: none; }
.skip:focus { transform: none; }

/* ------------------------------------------------------------------ type */
.h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.h1 { font-size: clamp(2.7rem, 1.1rem + 5.3vw, 7.2rem); line-height: .95; letter-spacing: -.027em; }
.h2 { font-size: clamp(2.2rem, 1.35rem + 2.9vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; }
.h3 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.8rem); line-height: 1.06; letter-spacing: -.014em; }
.h2 em { font-style: italic; }
.lead { font-weight: 300; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.eyebrow { font-family: var(--font-mono); font-size: .72rem; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-feature-settings: "case"; }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; background-color: var(--bg); color: var(--fg); padding-block: var(--section-y); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head .lead { color: var(--soft); }

/* ------------------------------------------------------------------ buttons & links */
.btn {
  --btn-fg: var(--fg); --btn-bg: transparent; --btn-line: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 50px; padding: .9em 1.45em; border-radius: 999px;
  border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-text); font-weight: 500; font-size: .97rem; line-height: 1; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn .icon { width: 1.2em; height: 1.2em; transition: transform .45s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--solid { --btn-bg: var(--ink); --btn-fg: var(--crema); --btn-line: var(--ink); }
.btn--solid:hover { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--light { --btn-bg: var(--crema); --btn-fg: var(--ink); --btn-line: var(--crema); }
.btn--light:hover { --btn-bg: transparent; --btn-fg: var(--crema); }
.btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-line: var(--fg); }
.btn--small { min-height: 40px; padding: .62em 1.1em; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: progress; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em; padding: .2em 0;
  font-weight: 500; font-size: .97rem; text-decoration: none; color: inherit;
  background: none; border: 0; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .icon { width: 1.15em; height: 1.15em; transition: transform .45s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow--down:hover .icon { transform: translateY(3px); }

/* ------------------------------------------------------------------ photos & icons */
.ph { position: relative; overflow: hidden; aspect-ratio: var(--ratio); background-color: var(--ph); }
.ph picture, .ph img { width: 100%; height: 100%; }
.ph img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.icon { width: 1.5em; height: 1.5em; flex: none; }
.botanica { overflow: visible; }
.botanica path, .botanica circle { vector-effect: non-scaling-stroke; }
.botanica g { stroke-width: 1.15px; }

/* ------------------------------------------------------------------ reveal (only when JS runs) */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="img"] { opacity: 1; transform: none; clip-path: inset(6% 0 0 0); transition: clip-path 1.4s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal="img"] img { transform: scale(1.07); transition: transform 2s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal="img"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="img"].is-in img { transform: scale(1); }
.js [data-draw] path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.45, .05, .25, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.js [data-draw] circle { opacity: 0; transition: opacity 1s ease 1.4s; }
.js [data-draw].is-in path { stroke-dashoffset: 0; }
.js [data-draw].is-in circle { opacity: 1; }
.reveal-fallback [data-reveal], .reveal-fallback [data-reveal="img"], .reveal-fallback [data-reveal="img"] img { opacity: 1; transform: none; clip-path: none; }
.reveal-fallback [data-draw] path { stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ header */
.site-header {
  --hdr-fg: var(--ink); --hdr-bg: 220 227 226;
  position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h);
  color: var(--hdr-fg); border-bottom: 1px solid transparent;
  transition: color .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.site-header[data-tone="day"]   { --hdr-fg: var(--ink);   --hdr-bg: 243 240 229; }
.site-header[data-tone="dawn"]  { --hdr-fg: var(--ink);   --hdr-bg: 220 227 226; }
.site-header[data-tone="dusk"]  { --hdr-fg: var(--crema); --hdr-bg: 91 71 83; }
.site-header[data-tone="garden"] { --hdr-fg: var(--crema); --hdr-bg: 93 110 96; }
.site-header[data-tone="night"] { --hdr-fg: var(--crema); --hdr-bg: 14 13 11; }
.site-header.is-solid { background-color: rgb(var(--hdr-bg)); border-bottom-color: rgb(127 127 127 / .16); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; letter-spacing: -.01em; text-decoration: none; color: inherit; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav__links { display: flex; gap: clamp(16px, 2vw, 30px); }
.nav__links a { position: relative; font-size: .95rem; text-decoration: none; padding: .35em 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; }
.menu-toggle .icon { width: 28px; height: 28px; }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 3vh) var(--gutter) 36px;
  background: var(--night); color: var(--crema); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.menu__close { position: absolute; top: 12px; right: calc(var(--gutter) - 10px); width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.menu__close .icon { width: 28px; height: 28px; }
.menu__links { display: grid; gap: .15em; }
.menu__links a { font-family: var(--font-display); font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1.1; text-decoration: none; letter-spacing: -.02em; }
.menu__foot { margin-top: auto; display: grid; gap: 18px; justify-items: start; position: relative; z-index: 1; }
.menu__mail { color: rgb(243 240 229 / .75); text-decoration: none; }
.menu .botanica { position: absolute; right: -36px; bottom: 120px; width: 200px; color: var(--malva); opacity: .5; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: max(620px, 100vh); min-height: max(620px, 100dvh); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); background: #847f78; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .ph { height: 100%; aspect-ratio: auto; }
.js .hero__media img { animation: hero-breathe 3.4s var(--ease) both; }
@keyframes hero-breathe { from { transform: scale(1.1); filter: brightness(.86); } to { transform: none; filter: none; } }
.hero::before { /* dawn haze behind the headline */
  content: ""; position: absolute; inset: 0 0 auto; height: 74%; z-index: -1;
  background:
    radial-gradient(ellipse 60% 60% at 18% 42%, rgb(220 227 226 / .62), rgb(220 227 226 / 0) 72%),
    linear-gradient(to bottom, rgb(220 227 226 / .72) 0%, rgb(220 227 226 / .36) 48%, rgb(220 227 226 / 0) 100%);
}
.hero::after { /* earth shade for the buttons */
  content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: -1;
  background: linear-gradient(to top, rgb(14 13 11 / .58), rgb(14 13 11 / 0));
}
.hero__top { padding-top: calc(var(--header-h) + clamp(32px, 8vh, 92px)); }
.hero .eyebrow { color: var(--salvia-ink); margin-bottom: clamp(18px, 2.6vh, 28px); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { animation: rise 1.5s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * .12s); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero__lead { margin-top: clamp(20px, 3vh, 30px); max-width: 30ch; font-size: clamp(1.1rem, .98rem + .45vw, 1.38rem); line-height: 1.45; }
.hero__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-bottom: clamp(32px, 7vh, 72px); color: var(--crema); }
.js .hero__fade { animation: fade-up 1.3s var(--ease) both; animation-delay: calc(.8s + var(--i, 0) * .12s); }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ approach */
.approach__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: center; }
.approach__text { grid-column: 1 / span 6; display: grid; gap: 22px; }
.approach__text .lead { color: var(--soft); }
.principles { display: grid; gap: 22px; margin-top: 18px; }
.principles li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.principles .icon { width: 30px; height: 30px; color: var(--accent); }
.principles h3 { font-weight: 500; font-size: 1.06rem; line-height: 1.35; }
.principles p { color: var(--soft); font-size: .98rem; line-height: 1.5; max-width: 42ch; }
.approach__media { grid-column: 8 / span 5; position: relative; }
.approach__inset { position: absolute; width: 46%; left: -24%; bottom: 0; box-shadow: 0 30px 60px -30px rgb(34 32 28 / .45); }

/* ------------------------------------------------------------------ garo */
.garo__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; align-items: center; }
.garo__media { grid-column: 1 / span 5; position: relative; }
.garo__inset { position: absolute; width: 42%; right: -22%; bottom: 8%; box-shadow: 0 40px 80px -36px rgb(0 0 0 / .65); }
.garo__text { grid-column: 7 / span 6; display: grid; gap: 22px; }
.garo__role { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.35; color: var(--accent-2); }
.garo__bio { display: grid; gap: 14px; color: var(--soft); max-width: 52ch; }
.garo__bio p:first-child { color: var(--fg); font-weight: 300; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.5; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-top: 20px; border-top: 1px solid var(--rule); }
.facts li { font-size: .92rem; line-height: 1.4; color: var(--soft); }
.facts strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); line-height: 1.15; color: var(--fg); margin-bottom: 2px; }

/* ------------------------------------------------------------------ retreats */
.formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.format a { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.format .ph { margin-bottom: 14px; }
.format .ph img { transition: transform 1.2s var(--ease); }
.format a:hover .ph img { transform: scale(1.04); }
.format__days { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--accent-2); }
.format__name { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; }
.format__name .icon { width: 22px; height: 22px; color: var(--accent); transition: transform .45s var(--ease); }
.format a:hover .format__name .icon { transform: translateX(4px); }
.format__text { margin-top: 4px; color: var(--soft); font-size: .96rem; line-height: 1.5; }
.included { margin-top: clamp(40px, 4.4vw, 64px); padding-top: 26px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 14px 36px; align-items: baseline; }
.included__title { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
.included ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.included li { display: inline-flex; align-items: center; gap: 8px; font-size: .96rem; }
.included .icon { width: 16px; height: 16px; color: var(--accent); }
.included__note { grid-column: 2; color: var(--soft); font-size: .96rem; max-width: 70ch; }

/* ------------------------------------------------------------------ builder */
.design .section-head { max-width: 900px; }
.design .h2 em { color: var(--salvia-ink); }
.builder { --q: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); --bead-y: calc(26px + var(--q) * .6); margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.builder__steps { display: contents; }
.builder .step, .builder .done { grid-column: 6 / span 7; }
/* the sketch holds still on the left while the questions scroll past it */
.builder__aside { grid-column: 1 / span 5; grid-row: 1 / span 6; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 48px); max-height: calc(100svh - var(--header-h) - 48px); }
/* the questions: one thread, one bead each, the one being answered in full light */
.builder .step { position: relative; padding-left: 46px; transition: opacity .6s var(--ease); }
.builder .step::before { content: ""; position: absolute; left: 5px; top: var(--bead-y); width: 1px; height: 100%; background: var(--rule); transition: background-color .6s var(--ease); }
.builder .step[data-contact]::before { display: none; }
.builder .step::after { content: ""; position: absolute; left: 0; top: calc(var(--bead-y) - 5.5px); width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgb(34 32 28 / .4); background: var(--bg); transition: background-color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
.builder .step.is-past::before { background: var(--salvia-ink); }
.builder .step.is-past::after { background: var(--salvia-ink); border-color: var(--salvia-ink); }
.builder .step.is-active::after { background: var(--salvia-ink); border-color: var(--salvia-ink); transform: scale(1.3); box-shadow: 0 0 0 5px rgb(79 95 82 / .18); }
.builder.is-guided .step:not(.is-active):not(:hover):not(:focus-within) { opacity: .4; }
/* a long sketch fades out at the bottom of its card instead of being cut */
@media (min-width: 1024px) {
  .builder__aside .sketch::after { content: ""; position: sticky; bottom: -26px; display: block; height: 56px; margin: 0 calc(-1 * clamp(20px, 2vw, 30px)) -26px; background: linear-gradient(rgb(243 240 229 / 0), var(--crema) 85%); pointer-events: none; }
}
.step { padding: 26px 0 30px; margin: 0; min-width: 0; border: 0; border-top: 1px solid var(--rule); }
.step__legend { float: left; width: 100%; padding: 0; margin: 0; }
.step__legend + * { clear: both; }
.step__q { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--q, 1.5rem); line-height: 1.2; letter-spacing: -.008em; }
.step__hint { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 16px; font-size: .9rem; color: var(--soft); }
.step__count { color: var(--accent-2); font-feature-settings: "lnum"; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: .55em 1.05em; border-radius: 999px; border: 1px solid rgb(34 32 28 / .24); background: rgb(243 240 229 / .6); cursor: pointer; user-select: none; font-size: .97rem; line-height: 1.2; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip .icon { width: 0; height: 15px; margin-right: 0; opacity: 0; transition: width .3s var(--ease), margin .3s var(--ease), opacity .25s ease; }
.chip:hover { border-color: var(--ink); background: var(--crema); }
.chip:has(input:checked) { background: var(--ink); color: var(--crema); border-color: var(--ink); }
.chip:has(input:checked) .icon { width: 15px; margin-right: .45em; opacity: 1; }
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.chip:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.chip:has(input:disabled) input { cursor: not-allowed; }
.chip:active { transform: scale(.97); }

.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.day-opt { position: relative; display: grid; gap: 4px; padding: 14px 14px 13px; border: 1px solid rgb(34 32 28 / .24); background: rgb(243 240 229 / .6); cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.day-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day-opt__n { font-family: var(--font-display); font-size: 2rem; line-height: .9; }
.day-opt__n small { font-family: var(--font-text); font-size: .8rem; margin-left: 5px; }
.day-opt__name { font-size: .86rem; line-height: 1.3; opacity: .85; }
.day-opt:hover { border-color: var(--ink); background: var(--crema); }
.day-opt:has(input:checked) { background: var(--ink); color: var(--crema); border-color: var(--ink); }
.day-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

.practical { display: grid; gap: 20px; margin-top: 24px; }
.practical__row > p { font-size: .9rem; color: var(--soft); margin-bottom: 8px; }
.practical__fields { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 30rem; gap: 22px; }

.field { display: grid; gap: 6px; }
.field label { font-size: .9rem; color: var(--soft); }
.field label b { font-weight: 400; color: var(--accent-2); }
.input { width: 100%; padding: .5em 0 .55em; border: 0; border-bottom: 1px solid rgb(34 32 28 / .38); background: transparent; font-size: 1.08rem; color: var(--ink); border-radius: 0; transition: border-color .3s ease; }
.input::placeholder { color: rgb(34 32 28 / .5); }
.input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
textarea.input { min-height: 104px; resize: vertical; line-height: 1.5; }
.field__error { font-size: .88rem; font-weight: 500; color: var(--malva-ink); }
.field.has-error .input { border-bottom-color: var(--malva-ink); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-grid .field--wide { grid-column: 1 / -1; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.send { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
.send .btn { min-height: 56px; padding-inline: 1.9em; font-size: 1rem; }
.send__note { font-size: .9rem; color: var(--soft); max-width: 56ch; }
.form-status { margin-top: 14px; font-size: .95rem; }
.form-status.is-error { color: var(--malva-ink); font-weight: 500; }

.done { display: none; padding: clamp(26px, 3.4vw, 40px); background: var(--crema); box-shadow: 0 40px 80px -50px rgb(91 71 83 / .5); }
.done.is-visible { display: block; animation: fade-up .9s var(--ease) both; }
.done .botanica { width: 56px; height: 56px; color: var(--salvia-ink); margin-bottom: 18px; }
.done p { margin-top: 14px; color: var(--soft); max-width: 46ch; }
.done__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* the sketch, a page from the notebook */
.sketch { position: relative; background: var(--crema); color: var(--ink); padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px) 26px; box-shadow: 0 1px 0 rgb(34 32 28 / .06), 0 44px 80px -48px rgb(91 71 83 / .55); min-height: 0; overflow: auto; scrollbar-width: thin; }
.sketch__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: nowrap; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--salvia-ink); padding-bottom: 12px; border-bottom: 1px solid rgb(34 32 28 / .14); }
.sketch__title { margin-top: 18px; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; transition: opacity .3s ease; }
.sketch__title.is-swapping { opacity: 0; }
.sketch__for { margin-top: 8px; font-size: .9rem; color: rgb(34 32 28 / .66); }
.sketch__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sketch__tags span { padding: .3em .7em; border-radius: 999px; background: rgb(124 141 126 / .16); font-size: .78rem; line-height: 1.2; }
.sketch__tags span.mood { background: rgb(156 129 142 / .18); }
.sketch__hint { margin-top: 12px; font-size: .85rem; line-height: 1.45; color: rgb(34 32 28 / .68); font-style: italic; }
.sketch__days { margin-top: 20px; display: grid; gap: 20px; }
.sketch__day h4 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--malva-ink); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.sketch__day h4::after { content: ""; flex: 1; height: 1px; background: rgb(34 32 28 / .12); }
.moments { display: grid; position: relative; }
.moments::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: rgb(34 32 28 / .14); }
.moment { position: relative; display: grid; grid-template-columns: 11px 1fr; gap: 0 14px; padding: 6px 0; }
.moment__dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; border: 1px solid rgb(34 32 28 / .3); background: var(--crema); }
.moment[data-tone="dawn"] .moment__dot { background: var(--azzurro); border-color: #8fa0a3; }
.moment[data-tone="day"] .moment__dot { background: var(--crema-deep); }
.moment[data-tone="garden"] .moment__dot { background: var(--salvia); border-color: var(--salvia); }
.moment[data-tone="dusk"] .moment__dot { background: var(--malva); border-color: var(--malva); }
.moment[data-tone="night"] .moment__dot { background: var(--ink); border-color: var(--ink); }
.moment__light { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(34 32 28 / .58); }
.moment__title { font-weight: 500; font-size: .96rem; line-height: 1.3; }
.moment__title em { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--malva-ink); margin-left: 8px; white-space: nowrap; }
.moment__note { font-size: .85rem; line-height: 1.42; color: rgb(34 32 28 / .68); }
.moment.is-new { animation: moment-in .7s var(--ease) both; }
@keyframes moment-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sketch__practical { margin-top: 20px; border-top: 1px solid rgb(34 32 28 / .14); }
.sketch__practical div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 8px 0; font-size: .87rem; line-height: 1.4; }
.sketch__practical div + div { border-top: 1px solid rgb(34 32 28 / .08); }
.sketch__practical dt { color: rgb(34 32 28 / .6); }
.sketch__foot { margin-top: 18px; display: flex; gap: 12px; align-items: center; font-size: .84rem; color: rgb(34 32 28 / .68); line-height: 1.4; }
.sketch__foot .icon { width: 28px; height: 28px; color: var(--salvia-ink); }

/* ------------------------------------------------------------------ faq */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: start; }
.faq__head { grid-column: 1 / span 4; display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 32px); }
.faq__head p { color: var(--soft); max-width: 30ch; }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 22px; height: 22px; color: var(--accent); transition: transform .45s var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--soft); max-width: 60ch; }

/* ------------------------------------------------------------------ footer */
.site-footer { position: relative; overflow: hidden; background: var(--night); color: var(--crema); padding: clamp(80px, 9vw, 130px) 0 28px; }
.footer__main { display: grid; gap: 20px; justify-items: start; }
.footer__title { font-family: var(--font-display); font-style: italic; font-size: clamp(3.6rem, 2rem + 6vw, 8.4rem); line-height: .9; letter-spacing: -.035em; padding-bottom: .06em; }
.footer__text { font-weight: 300; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); color: var(--soft); }
.footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.footer__bottom { margin-top: clamp(64px, 7vw, 100px); padding-top: 22px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: baseline; }
.footer__brand { font-family: var(--font-display); font-size: 1.35rem; text-decoration: none; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: flex-end; font-size: .93rem; }
.footer__links a, .footer__legal a { text-decoration: none; color: var(--soft); transition: color .3s; }
.footer__links a:hover { color: var(--crema); }
.footer__legal { grid-column: 1 / -1; font-size: .82rem; color: rgb(243 240 229 / .6); }

/* ------------------------------------------------------------------ simple pages */
.page { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 110px)); }
.page .h2 { margin: 18px 0 32px; max-width: 16ch; }
.page .prose { color: var(--soft); max-width: 62ch; }
.page .prose p + p { margin-top: 1em; }
.page .prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--fg); margin: 2em 0 .5em; }
.page .prose ul { list-style: disc; padding-left: 1.2em; margin: .8em 0; }
.page .prose li + li { margin-top: .3em; }
.page .prose a { color: var(--fg); }
.lost { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; }
.lost .h1 { margin: 18px 0 26px; }
.lost p { max-width: 36ch; color: var(--soft); margin-bottom: 32px; }

/* ================================================================== craft layer
   Illustrations from Garo's tattoos, light, gradients and slow motion.
   Everything here is decoration: with reduced motion it all sits still, fully drawn. */

/* ------------------------------------------------------------------ illustrations: draw, then dotwork */
.illo { display: block; overflow: visible; }
.illo__lines path { stroke-width: 1.15px; vector-effect: non-scaling-stroke; }
.js .illo[data-draw] .illo__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s cubic-bezier(.45, .05, .25, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .illo[data-draw] .illo__dots circle { opacity: 0; transition: opacity .7s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.js .illo[data-draw].is-in .illo__lines path { stroke-dashoffset: 0; }
.js .illo[data-draw].is-in .illo__dots circle { opacity: 1; }
.js .illo--calligraphy[data-draw] .illo__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.4s cubic-bezier(.55, .08, .3, 1) .2s; }
.js .illo--calligraphy[data-draw].is-in .illo__reveal { stroke-dashoffset: 0; }
.js .icon[data-draw] path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.45, .05, .25, 1); transition-delay: calc(.25s + var(--i, 0) * 70ms); }
.js .icon[data-draw] circle { opacity: 0; transition: opacity .6s ease 1s; }
.js .is-in .icon[data-draw] path, .js .icon[data-draw].is-in path { stroke-dashoffset: 0; }
.js .is-in .icon[data-draw] circle, .js .icon[data-draw].is-in circle { opacity: 1; }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }

/* ------------------------------------------------------------------ split headings: words rise in */
.js [data-split] .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--w, 0) * 55ms); }
.js [data-split].is-in .w { opacity: 1; transform: none; filter: none; }

/* ------------------------------------------------------------------ intro: the first breath */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--crema); color: var(--ink); clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1); }
.intro::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: .4; pointer-events: none; }
.intro__inner { display: grid; justify-items: center; gap: 14px; text-align: center; }
.intro__sprig { width: min(300px, 64vw); color: var(--salvia); margin-bottom: 6px; }
.intro__name { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); letter-spacing: -.02em; line-height: 1; opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) .35s, transform 1.2s var(--ease) .35s; }
.intro__sub { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--malva-ink); opacity: 0; transition: opacity 1s var(--ease) .7s; }
.intro.is-on .intro__name { opacity: 1; transform: none; }
.intro.is-on .intro__sub { opacity: 1; }
.intro.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.skip-intro .intro { display: none; }
.with-intro.js .hero__title .line > span { animation-delay: calc(1.75s + var(--i, 0) * .12s); }
.intro .illo__lines path { transition-duration: 1s !important; transition-delay: calc(var(--i, 0) * 14ms) !important; }
.footer__sprig .illo__lines path { transition-delay: calc(var(--i, 0) * 28ms); }
.with-intro.js .hero__fade { animation-delay: calc(2.2s + var(--i, 0) * .12s); }
.with-intro.js .hero__media img { animation-delay: 1.1s; }

/* ------------------------------------------------------------------ hero: mist and dust in the first light */
.hero em { font-style: italic; }
.hero__mist { position: absolute; inset: -8% -12%; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__mist span { position: absolute; inset: 0; background:
  radial-gradient(62% 26% at 26% 60%, rgb(220 227 226 / .16), rgb(220 227 226 / 0) 100%),
  radial-gradient(54% 24% at 78% 63%, rgb(243 240 229 / .1), rgb(243 240 229 / 0) 100%);
  animation: mist-drift 26s ease-in-out infinite alternate; }
.hero__mist span + span { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .7; transform: scaleX(-1); }
@keyframes mist-drift { from { translate: -5% 0; } to { translate: 5% -1.5%; } }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.embers--motes { z-index: -1; mix-blend-mode: screen; }
@supports (animation-timeline: scroll()) {
  .hero__media { animation: hero-sink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes hero-sink { to { transform: translate3d(0, 14vh, 0) scale(1.05); } }
}

/* ------------------------------------------------------------------ approach: morning light and the eucalyptus */
.approach { background:
  radial-gradient(60% 55% at 92% 8%, rgb(186 199 201 / .42), rgb(186 199 201 / 0) 70%),
  radial-gradient(50% 45% at 0% 100%, rgb(124 141 126 / .12), rgb(124 141 126 / 0) 70%),
  var(--crema); overflow: hidden; }
.approach__sprig { position: absolute; z-index: 0; left: 35%; bottom: -4%; height: 86%; width: auto; color: var(--salvia); transform-origin: 62% 98%; animation: sway 11s ease-in-out infinite alternate; pointer-events: none; }
.approach__grid { position: relative; z-index: 1; }
.principles .icon { color: var(--salvia-ink); }

/* ------------------------------------------------------------------ marquee */
.marquee { position: relative; overflow: hidden; background: linear-gradient(90deg, #6B7C6D, var(--salvia) 30%, var(--salvia) 70%, #6B7C6D); color: var(--crema); padding-block: clamp(18px, 2.4vw, 30px); }
.marquee::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: .5; pointer-events: none; }
.marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); padding-right: clamp(22px, 2.6vw, 40px); }
.marquee__group span { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1; white-space: nowrap; letter-spacing: -.01em; }
.picto-inline { width: clamp(28px, 2.4vw, 38px); height: clamp(28px, 2.4vw, 38px); color: rgb(243 240 229 / .82); flex: none; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------------ the sun in the header */
.daylight { display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.daylight.is-visible { opacity: 1; }
.daylight svg { width: 150px; height: 30px; overflow: visible; }
.daylight__horizon { stroke: currentColor; stroke-width: 1; opacity: .35; fill: none; }
.daylight__arc { stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 4; fill: none; opacity: .45; }
.daylight__sun { transition: transform 1.4s var(--ease), opacity .35s ease; }
.daylight__sun.is-jumping { opacity: 0; transition: opacity .35s ease; }
.daylight__sun circle { fill: currentColor; transition: fill .6s ease, stroke .6s ease; stroke: currentColor; stroke-width: 1.2; }
.daylight__rays path { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; transition: opacity .6s ease; }
.daylight.is-night .daylight__sun circle { fill: none; }
.daylight.is-night .daylight__rays path { opacity: 0; }
.daylight__label { font-family: var(--font-display); font-style: italic; font-size: 1rem; white-space: nowrap; min-width: 8.5em; transition: opacity .35s ease; }
.daylight__label.is-swapping { opacity: 0; }

/* ------------------------------------------------------------------ photographs: a hairline keeps light images off the paper */
.format .ph::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(34 32 28 / .06); pointer-events: none; }

/* ------------------------------------------------------------------ garo: candlelight and his own line */
.garo { overflow: hidden; background:
  radial-gradient(42% 55% at 22% 48%, rgb(156 129 142 / .42), rgb(156 129 142 / 0) 72%),
  radial-gradient(50% 50% at 100% 100%, rgb(14 13 11 / .45), rgb(14 13 11 / 0) 70%),
  var(--malva-deep); }
.garo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(30% 40% at 24% 50%, rgb(243 240 229 / .07), rgb(243 240 229 / 0) 70%); animation: breathe 5.5s ease-in-out infinite alternate; pointer-events: none; }
.garo__grid { position: relative; z-index: 1; }
.garo__line { position: absolute; z-index: 0; right: 2%; top: 50%; translate: 0 -50%; height: 112%; width: auto; color: rgb(243 240 229 / .1); pointer-events: none; }
.garo__lemon { width: clamp(150px, 15vw, 210px); color: rgb(243 240 229 / .75); margin: 6px 0 -6px auto; }

/* ------------------------------------------------------------------ retreats */
.retreats { background: radial-gradient(50% 50% at 0% 0%, rgb(124 141 126 / .14), rgb(124 141 126 / 0) 70%), var(--crema); }
.format__days { display: inline-flex; align-items: center; gap: 8px; }
.format__icon { width: 22px; height: 22px; color: var(--salvia-ink); }
.format a:hover .format__icon path { animation: redraw 1.1s cubic-bezier(.45, .05, .25, 1); }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ plan: a slow glow and floating pictograms */
.design { overflow: hidden; overflow: clip; } /* clip, not hidden: hidden would unpin the sketch */
.design__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 30% at var(--gx, 30%) var(--gy, 20%), rgb(243 240 229 / .9), rgb(243 240 229 / 0) 70%), radial-gradient(30% 26% at calc(100% - var(--gx, 30%)) 40%, rgb(186 199 201 / .5), rgb(186 199 201 / 0) 70%); animation: glow-drift 18s ease-in-out infinite alternate; }
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --gy { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@keyframes glow-drift { from { --gx: 18%; --gy: 14%; } to { --gx: 62%; --gy: 28%; } }
.design .wrap { position: relative; z-index: 1; }

.pictos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.picto { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--picto, var(--salvia-ink)); opacity: 0; transform: rotate(var(--r)); transition: opacity 1.4s var(--ease) var(--in); animation: picto-float var(--dur) ease-in-out var(--del) infinite alternate; }
.pictos.is-in .picto { opacity: var(--picto-alpha, .2); }
.pictos.is-paused .picto, .marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes picto-float { from { transform: translate3d(0, 0, 0) rotate(var(--r)); } to { transform: translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--r) * -.6)); } }
.pictos--plan { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgb(0 0 0 / .25) 46%, rgb(0 0 0 / .12) 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 22%, rgb(0 0 0 / .25) 46%, rgb(0 0 0 / .12) 100%); --picto-alpha: .26; }
.pictos--faq { right: auto; width: 38%; -webkit-mask-image: linear-gradient(to right, #000 40%, transparent); mask-image: linear-gradient(to right, #000 40%, transparent); --picto-alpha: .16; }
.faq .wrap { position: relative; z-index: 1; }
.sketch { background-image: radial-gradient(120% 60% at 100% 0%, rgb(186 199 201 / .18), rgb(186 199 201 / 0) 60%); background-color: var(--crema); }

/* ------------------------------------------------------------------ footer: embers and rosemary */
.site-footer { background: radial-gradient(60% 50% at 50% 110%, rgb(156 129 142 / .22), rgb(156 129 142 / 0) 70%), var(--night); }
.site-footer .embers { z-index: 0; mix-blend-mode: screen; }
.site-footer .wrap { position: relative; z-index: 1; }
.footer__sprig { position: absolute; right: 4%; top: clamp(70px, 8vw, 110px); width: clamp(220px, 28vw, 420px); height: auto; color: var(--malva); opacity: .9; transform-origin: 0% 80%; animation: sway 12s ease-in-out infinite alternate; z-index: 1; }

/* ------------------------------------------------------------------ the day: the page holds still, the moments pass */
.day {
  --step: 100vh; /* one full screen of scrolling per moment */
  --row: clamp(30px, 4.3vh, 42px);
  --stage-bg: var(--azzurro-pale); --stage-fg: var(--ink); --stage-soft: rgb(34 32 28 / .5); --stage-line: rgb(34 32 28 / .16); --stage-accent: var(--salvia-ink);
  position: relative; background-color: var(--stage-bg); color: var(--stage-fg);
  transition: background-color 1.1s var(--ease), color 1.1s var(--ease);
  scroll-margin-top: calc(-16px - var(--header-h)); /* the nav lands exactly where the day stops */
  overflow-anchor: none; /* a pinned stage must never become the browser's scroll anchor */
}
.day[data-tone="day"]    { --stage-bg: var(--crema); }
.day[data-tone="garden"] { --stage-bg: #5D6E60; --stage-fg: var(--crema); --stage-soft: rgb(243 240 229 / .56); --stage-line: rgb(243 240 229 / .24); --stage-accent: var(--azzurro); }
.day[data-tone="dusk"]   { --stage-bg: var(--malva-deep); --stage-fg: var(--crema); --stage-soft: rgb(243 240 229 / .54); --stage-line: rgb(243 240 229 / .22); --stage-accent: #D9CCD3; }
.day[data-tone="night"]  { --stage-bg: var(--night); --stage-fg: var(--crema); --stage-soft: rgb(243 240 229 / .5); --stage-line: rgb(243 240 229 / .18); --stage-accent: var(--azzurro); }
.day__scroller { position: relative; }
.day__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); overflow: hidden; background-color: var(--stage-bg); transition: background-color 1.1s var(--ease); }
/* invisible steps scroll past the pinned stage; each one is a moment */
.day__steps { margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.day__step { height: var(--step); }
.day__step:last-child { height: calc(var(--step) + 100vh); height: calc(var(--step) + 100svh); }
.day__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; width: 100%; }
.day__side { grid-column: 1 / span 4; display: grid; gap: clamp(22px, 4.4vh, 48px); align-content: center; }
.day__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 1.5vw, 2.75rem); line-height: 1.04; letter-spacing: -.018em; max-width: 12ch; text-wrap: balance; }

/* the bulleted list: one thread, one bead per moment, filled up to now */
.day__list { position: relative; display: grid; --at: 0; }
.day__list::before, .day__list::after { content: ""; position: absolute; left: 5px; top: calc(var(--row) / 2); width: 1px; }
.day__list::before { bottom: calc(var(--row) / 2); background: var(--stage-line); transition: background-color 1.1s var(--ease); }
.day__list::after { height: calc(var(--at) * var(--row)); background: var(--stage-accent); transition: height .9s var(--ease), background-color 1.1s var(--ease); }
.day__list li { position: relative; z-index: 1; height: var(--row); display: grid; grid-template-columns: 11px 7.4rem minmax(0, 1fr); column-gap: 16px; align-items: center; cursor: pointer; color: var(--stage-soft); white-space: nowrap; transition: color .6s var(--ease); }
.day__list li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; background: var(--stage-bg); transition: background-color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
.day__list li.is-past::before { background: var(--stage-accent); border-color: var(--stage-accent); }
.day__list li.is-active { color: var(--stage-fg); }
.day__list li.is-active::before { background: var(--stage-accent); border-color: var(--stage-accent); transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage-accent) 22%, transparent); }
.day__list li:hover { color: var(--stage-fg); }
.day__list li > span { overflow: hidden; text-overflow: ellipsis; transition: transform .6s var(--ease); }
.day__list li.is-active > span { transform: translateX(4px); }
.day__time { font-family: var(--font-display); font-style: italic; font-size: .95rem; }
.day__name { font-weight: 500; font-size: .98rem; }

/* the stage: one photograph at a time */
.day__panels { grid-column: 5 / span 8; position: relative; height: min(calc(100vh - var(--header-h) - clamp(48px, 10vh, 120px)), 820px); height: min(calc(100svh - var(--header-h) - clamp(48px, 10vh, 120px)), 820px); }
.panel { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1s var(--ease); background-color: rgb(14 13 11 / .1); }
.panel.is-active { opacity: 1; z-index: 1; }
.panel > .ph { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: none; }
.panel .ph img { transform: scale(1.08); transition: transform 2.6s var(--ease); }
.panel.is-active .ph img { transform: scale(1); }
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(14 13 11 / .78) 0%, rgb(14 13 11 / .48) 28%, rgb(14 13 11 / .1) 54%, rgb(14 13 11 / 0) 68%); }
.panel__text { position: absolute; z-index: 1; left: clamp(20px, 2.6vw, 44px); right: clamp(20px, 2.6vw, 44px); bottom: clamp(22px, 3vw, 44px); display: grid; gap: 8px; max-width: 46ch; color: var(--crema); text-shadow: 0 1px 22px rgb(14 13 11 / .3); }
.panel__time { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; color: rgb(243 240 229 / .86); }
.panel__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 1.3rem + 2.1vw, 3.6rem); line-height: 1.02; letter-spacing: -.018em; text-wrap: balance; }
.panel__note { font-weight: 300; font-size: clamp(1rem, .95rem + .25vw, 1.16rem); line-height: 1.5; color: rgb(243 240 229 / .92); }
.panel__text > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.panel.is-active .panel__text > * { opacity: 1; transform: none; }
.panel.is-active .panel__time { transition-delay: .2s; }
.panel.is-active .panel__title { transition-delay: .3s; }
.panel.is-active .panel__note { transition-delay: .42s; }
/* sparks rise around the photograph once night falls */
.day__embers { z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.day[data-tone="night"] .day__embers { opacity: 1; }

/* without JavaScript: the moments simply follow each other */
.no-js .day__stage { position: relative; height: auto; display: block; padding: calc(var(--header-h) + 40px) 0 96px; }
.no-js .day__steps, .no-js .day__list { display: none; }
.no-js .day__grid { display: block; }
.no-js .day__panels { height: auto; display: grid; gap: 24px; margin-top: 36px; }
.no-js .panel { position: relative; height: 72vh; opacity: 1; }
.no-js .panel__text > * { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; }
  .daylight__label { display: none; }
}
@media (max-width: 1240px) and (min-width: 1024px) {
  .daylight svg { width: 110px; }
  .day__side { grid-column: 1 / span 5; }
  .day__panels { grid-column: 6 / span 7; }
}

/* tablet */
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .approach__text, .approach__media { grid-column: 1 / -1; }
  .approach__sprig { left: 21%; right: auto; bottom: auto; top: 20%; height: 46%; opacity: .55; }
  .garo__line { height: 70%; top: 30%; right: -10%; }
  .approach__media { width: 78%; margin-left: auto; padding-bottom: 0; }
  .approach__inset { left: -28%; bottom: -8%; width: 44%; }
  .garo__media { grid-column: 1 / span 10; }
  .garo__text { grid-column: 1 / -1; }
  .garo__inset { right: -14%; }
  .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .included { grid-template-columns: 1fr; }
  .included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included__note { grid-column: 1; }
  .builder .step, .builder .done { grid-column: 1 / -1; }
  .builder__aside { grid-column: 1 / -1; grid-row: auto; position: relative; top: auto; display: block; max-height: none; margin: 4px 0 30px; }
  .builder .step { padding-left: 34px; }
  .builder .step:has(+ [data-sketch-wrap])::before { height: calc(100% - var(--bead-y)); } /* the thread pauses at the sketch */
  .sketch { max-height: none; overflow: visible; }
  .faq__head { grid-column: 1 / -1; position: static; }
  .faq__list { grid-column: 1 / -1; }
  /* the day, stacked: beads in a row above the photograph */
  .day { --step: 85vh; }
  .day__stage { align-items: stretch; padding: calc(var(--header-h) + 16px) 0 18px; }
  .day__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; height: 100%; }
  .day__side { grid-column: 1; gap: 16px; }
  .day__title { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); max-width: none; }
  .day__list { display: flex; justify-content: space-between; height: 11px; }
  .day__list::before, .day__list::after { left: 5px; top: 5px; bottom: auto; height: 1px; }
  .day__list::before { right: 5px; width: auto; }
  .day__list::after { width: calc((100% - 11px) * var(--at) / (var(--n, 11) - 1)); transition: width .9s var(--ease), background-color 1.1s var(--ease); }
  .day__list li { display: block; height: 11px; width: 11px; }
  .day__list li::before { display: block; }
  .day__list li > span { display: none; }
  .day__panels { grid-column: 1; height: auto; align-self: stretch; }
}

/* phone */
@media (max-width: 767px) {
  body { font-size: 1.02rem; }
  .hero::before { height: 80%; background: linear-gradient(to bottom, rgb(220 227 226 / .76) 0%, rgb(220 227 226 / .62) 52%, rgb(220 227 226 / .2) 82%, rgb(220 227 226 / 0) 100%); }
  .hero::after { height: 34%; }
  .hero__lead { font-size: 1.12rem; }
  .hero__bottom .btn { width: 100%; }
  .approach__media { width: 86%; }
  .principles li { grid-template-columns: 30px 1fr; gap: 14px; }
  .garo__media { grid-column: 1 / -1; margin-right: 16%; }
  .garo__inset { right: -20%; width: 46%; }
  .facts { gap: 12px; }
  .included ul { grid-template-columns: 1fr; }
  .facts li { font-size: .84rem; }
  /* formats become a swipeable row */
  .formats { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .formats::-webkit-scrollbar { display: none; }
  .format { scroll-snap-align: start; }
  .days { grid-template-columns: 1fr 1fr; }
  .practical__fields, .contact-grid { grid-template-columns: 1fr; }
  .send .btn { width: 100%; }
  .footer__bottom { grid-template-columns: 1fr; }
  .footer__links { justify-content: flex-start; }
  .footer__sprig { width: 190px; top: 34px; right: -4%; opacity: .7; }
  .daylight { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal="img"], .js [data-reveal="img"] img { opacity: 1; transform: none; clip-path: none; }
  .js [data-draw] path, .js .illo[data-draw] .illo__lines path, .js .illo--calligraphy[data-draw] .illo__reveal { stroke-dashoffset: 0; }
  .js [data-draw] circle, .js .illo[data-draw] .illo__dots circle { opacity: 1; }
  .js [data-split] .w { opacity: 1; transform: none; filter: none; }
  .pictos .picto { opacity: var(--picto-alpha, .2); }
  .intro, .embers { display: none !important; }
}

@media print {
  body::after, .site-header, .menu, .builder, .hero__media { display: none !important; }
  .section, .day, .site-footer { background: #fff !important; color: #000 !important; }
  .day__stage { position: static; height: auto; display: block; }
  .day__steps, .day__list, .day__embers { display: none !important; }
  .day__panels { height: auto; display: grid; gap: 12px; }
  .panel { position: relative; height: 40vh; opacity: 1; break-inside: avoid; }
  .panel__text > * { opacity: 1; transform: none; }
}