/* Il Casale — component styles. Every JSX component in components/ renders these classes,
   so a plain-HTML site can use them without React. Prefix: cs- */

/* ---------- Type roles ---------- */
.cs-display { font-family: var(--font-display); font-weight: var(--weight-regular); text-transform: uppercase; color: var(--text-primary); text-wrap: balance; }
.cs-display--1 { font-size: var(--size-display-1); line-height: var(--lh-display-1); letter-spacing: var(--ls-display-1); }
.cs-display--2 { font-size: var(--size-display-2); line-height: var(--lh-display-2); letter-spacing: var(--ls-display-2); }
.cs-display--3 { font-size: var(--size-display-3); line-height: var(--lh-display-3); letter-spacing: var(--ls-display-3); }
.cs-h1, .cs-h2, .cs-h3 { font-family: var(--font-display); font-weight: var(--weight-regular); color: var(--text-primary); text-wrap: balance; }
.cs-h1 { font-size: var(--size-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.cs-h2 { font-size: var(--size-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.cs-h3 { font-size: var(--size-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.cs-body { font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body); color: var(--text-primary); max-width: var(--measure-body); }
.cs-body--lg { font-size: var(--size-body-lg); line-height: var(--lh-body-lg); }
.cs-body--sm { font-size: var(--size-body-sm); line-height: var(--lh-body-sm); }
.cs-caption { font-family: var(--font-body); font-size: var(--size-caption); line-height: var(--lh-caption); color: var(--text-tertiary); }
.cs-script { font-family: var(--font-script); font-size: var(--size-script); line-height: 0.9; font-weight: 400; color: var(--text-accent); text-transform: none; letter-spacing: 0; }
.cs-micro { font-family: var(--font-ui); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--size-label); line-height: 1; }

/* ---------- Eyebrow ---------- */
.cs-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-ui); font-size: var(--size-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--text-accent); line-height: 1; }
.cs-eyebrow--muted { color: var(--text-tertiary); }
.cs-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.cs-eyebrow--bare::before { display: none; }

/* ---------- SectionHeading ---------- */
.cs-section-heading { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.cs-section-heading--center { align-items: center; text-align: center; }
.cs-section-heading__lede { font-family: var(--font-body); font-size: var(--size-body-lg); line-height: var(--lh-body-lg); color: var(--text-secondary); max-width: var(--measure-body); font-style: italic; }

/* ---------- Divider / Ornament ---------- */
.cs-divider { display: flex; align-items: center; gap: var(--space-4); width: 100%; margin: var(--space-6) 0; color: var(--line-art); }
.cs-divider--0 { margin: 0; }
.cs-divider::before, .cs-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.cs-divider--short::after { display: none; } .cs-divider--short::before { flex: 0 0 48px; background: var(--border-accent); }
.cs-divider--short { justify-content: flex-start; }
.cs-ornament { width: 64px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-ornament--lg { width: 120px; height: 52px; }

/* ---------- Line-art illustration ---------- */
.cs-lineart { stroke: var(--line-art); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-lineart--soft { stroke: var(--line-art-soft); }

/* ---------- Button ---------- */
.cs-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--size-button); font-weight: var(--weight-medium); letter-spacing: var(--ls-button); text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-control); height: var(--control-md); padding: 0 var(--space-6); transition: var(--transition-control); }
.cs-button--sm { height: var(--control-sm); padding: 0 var(--space-5); font-size: 13px; }
.cs-button--lg { height: var(--control-lg); padding: 0 var(--space-7); }
.cs-button--full { width: 100%; }
.cs-button--primary { background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary); }
.cs-button--primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.cs-button--cornice { background: transparent; color: var(--action-outline-text); border-color: var(--border-strong); outline: 1px solid var(--border-default); outline-offset: var(--cornice-gap); }
.cs-button--cornice:hover { background: var(--action-outline-hover-bg); outline-color: var(--border-strong); }
.cs-button--cornice:focus-visible { outline-color: var(--focus-ring); }
.cs-button--outline { background: transparent; color: var(--action-outline-text); border-color: var(--border-strong); }
.cs-button--outline:hover { background: var(--action-outline-hover-bg); }
.cs-button--ghost { background: transparent; color: var(--text-primary); border-color: transparent; padding: 0 0 4px; height: auto; }
.cs-button--ghost::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0.35); transform-origin: left; transition: transform var(--duration-base) var(--ease-standard); }
.cs-button--ghost:hover::after { transform: scaleX(1); }
.cs-button:active { opacity: var(--press-opacity); }
.cs-button:disabled, .cs-button[aria-disabled="true"] { background: var(--action-disabled-bg); color: var(--action-disabled-text); border-color: transparent; outline: none; cursor: not-allowed; }

/* ---------- Badge ---------- */
.cs-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--weight-medium); line-height: 1; border: 1px solid var(--border-default); color: var(--text-secondary); background: transparent; }
.cs-badge--accent { color: var(--text-accent); border-color: var(--border-accent); }
.cs-badge--solid { background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary); }
.cs-badge--success { background: var(--status-success-bg); color: var(--status-success); border-color: transparent; }
.cs-badge--warning { background: var(--status-warning-bg); color: var(--status-warning); border-color: transparent; }
.cs-badge--danger  { background: var(--status-danger-bg);  color: var(--status-danger);  border-color: transparent; }
.cs-badge--onImage { background: var(--veil-red); color: var(--crema-100); border-color: transparent; backdrop-filter: blur(6px); }

/* ---------- Logotype ---------- */
.cs-logotype { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-primary); }
.cs-logotype svg { fill: currentColor; height: auto; }
.cs-logotype--sm .cs-logotype__word { width: 140px; }
.cs-logotype--md .cs-logotype__word { width: 200px; }
.cs-logotype--lg .cs-logotype__word { width: 320px; }
.cs-logotype--sm .cs-logotype__mark { width: 32px; }
.cs-logotype--md .cs-logotype__mark { width: 44px; }
.cs-logotype--lg .cs-logotype__mark { width: 72px; }
.cs-logotype--lockup { flex-direction: column; gap: var(--space-3); }
.cs-logotype--accent { color: var(--text-accent); }

/* ---------- Menu ---------- */
.cs-menu-section { display: flex; flex-direction: column; gap: var(--space-5); }
.cs-menu-section__head { display: flex; align-items: baseline; gap: var(--space-4); }
.cs-menu-section__title { font-family: var(--font-display); font-size: var(--size-display-3); letter-spacing: var(--ls-display-3); text-transform: uppercase; line-height: 1; color: var(--text-primary); }
.cs-menu-section__it { font-family: var(--font-body); font-style: italic; font-size: var(--size-body-lg); color: var(--text-tertiary); }
.cs-menu-section__note { font-family: var(--font-body); font-style: italic; font-size: var(--size-body-sm); color: var(--text-tertiary); max-width: var(--measure-body); }
.cs-menu-section__list { display: flex; flex-direction: column; }
.cs-menu-item { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-6); row-gap: 4px; padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); }
.cs-menu-item:last-child { border-bottom: 1px solid var(--border-hairline); }
.cs-menu-item::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--border-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-standard); }
.cs-menu-item:hover::after { transform: scaleX(1); }
.cs-menu-item__name { font-family: var(--font-display); font-style: italic; font-size: var(--size-dish); line-height: var(--lh-dish); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cs-menu-item__price { font-family: var(--font-ui); font-size: var(--size-price); font-weight: var(--weight-medium); letter-spacing: 0.06em; color: var(--text-accent); font-variant-numeric: tabular-nums; align-self: start; padding-top: 6px; }
.cs-menu-item__desc { grid-column: 1; font-family: var(--font-body); font-size: var(--size-body-sm); line-height: var(--lh-body-sm); color: var(--text-secondary); max-width: var(--measure-body); }
.cs-menu-item__tags { grid-column: 1; display: flex; gap: 6px; margin-top: 4px; }
.cs-menu-item__origin { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); font-style: normal; }
.cs-wine-row { display: grid; grid-template-columns: 1fr auto auto; column-gap: var(--space-6); align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--border-hairline); }
.cs-wine-row:last-child { border-bottom: 1px solid var(--border-hairline); }
.cs-wine-row__name { font-family: var(--font-body); font-size: var(--size-body); color: var(--text-primary); }
.cs-wine-row__meta { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-left: var(--space-3); }
.cs-wine-row__price { font-family: var(--font-ui); font-size: var(--size-price); letter-spacing: 0.06em; color: var(--text-accent); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.cs-wine-row__price small { display: block; font-size: 10px; letter-spacing: 0.16em; color: var(--text-tertiary); }

/* ---------- Media ---------- */
.cs-frame { position: relative; overflow: hidden; background: var(--image-placeholder); border-radius: var(--radius-image); }
.cs-frame--arch { border-radius: var(--radius-arch); }
.cs-frame--round { border-radius: var(--radius-round); aspect-ratio: 1/1; }
.cs-frame--cornice { outline: 1px solid var(--border-default); outline-offset: 6px; }
.cs-frame img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-media); }
.cs-frame--hover:hover img { transform: scale(var(--media-hover-scale)); }
.cs-frame__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; }
.cs-frame__scrim--top { background: var(--scrim-top); }
.cs-frame__scrim--tint { background: var(--scrim-tint); }
.cs-frame__caption { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); color: var(--crema-100); display: flex; flex-direction: column; gap: 6px; }
.cs-frame__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.cs-gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(12, 1fr); }
.cs-gallery > * { grid-column: span 4; }
.cs-gallery > *:nth-child(3n+1) { grid-column: span 5; }
.cs-gallery > *:nth-child(3n+2) { grid-column: span 3; }
@media (max-width: 720px) { .cs-gallery > *, .cs-gallery > *:nth-child(n) { grid-column: span 6; } }

/* ---------- Cards ---------- */
.cs-dish-card { display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-primary); }
.cs-dish-card__name { font-family: var(--font-display); font-style: italic; font-size: var(--size-h3); line-height: 1.2; transition: color var(--duration-fast) var(--ease-standard); }
.cs-dish-card:hover .cs-dish-card__name { color: var(--text-accent); }
.cs-dish-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.cs-dish-card__desc { font-family: var(--font-body); font-size: var(--size-body-sm); line-height: var(--lh-body-sm); color: var(--text-secondary); }
.cs-paper { background: var(--surface-paper); color: var(--text-on-paper); padding: var(--space-7); box-shadow: var(--shadow-paper); position: relative; }
.cs-paper::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(57,26,16,0.22); pointer-events: none; }
.cs-paper .cs-h2, .cs-paper .cs-h3, .cs-paper .cs-display { color: var(--text-on-paper); }
.cs-paper .cs-body, .cs-paper p { color: var(--text-on-paper); }
.cs-paper .cs-eyebrow { color: var(--rosso-600); }
.cs-story { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--measure-body); }
.cs-story__text { font-family: var(--font-body); font-size: var(--size-body-lg); line-height: var(--lh-body-lg); color: var(--text-primary); }
.cs-story__text--drop::first-letter { font-family: var(--font-display); font-size: 4.2em; line-height: 0.8; float: left; padding: 8px 12px 0 0; color: var(--text-accent); }
.cs-story__sign { font-family: var(--font-script); font-size: 44px; line-height: 1; color: var(--text-accent); }
.cs-event-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); align-items: start; }
.cs-event-card:last-child { border-bottom: 1px solid var(--border-hairline); }
.cs-event-card__date { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--text-accent); }
.cs-event-card__date small { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 6px; }
.cs-event-card__title { font-family: var(--font-display); font-size: var(--size-h3); line-height: 1.25; color: var(--text-primary); }
.cs-event-card__desc { font-family: var(--font-body); font-size: var(--size-body-sm); color: var(--text-secondary); margin-top: 6px; }
.cs-hours { display: flex; flex-direction: column; gap: 0; font-family: var(--font-body); }
.cs-hours__row { display: flex; justify-content: space-between; gap: var(--space-5); padding: 10px 0; border-top: 1px solid var(--border-hairline); font-size: var(--size-body-sm); }
.cs-hours__row:last-child { border-bottom: 1px solid var(--border-hairline); }
.cs-hours__day { color: var(--text-secondary); }
.cs-hours__time { font-family: var(--font-ui); letter-spacing: 0.08em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-hours__row--closed .cs-hours__time { color: var(--text-tertiary); font-style: italic; font-family: var(--font-body); letter-spacing: 0; }

/* ---------- Forms ---------- */
.cs-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-field__label { font-family: var(--font-ui); font-size: var(--size-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--text-tertiary); }
.cs-field__control { position: relative; display: flex; align-items: center; height: var(--control-md); border: 0; border-bottom: 1px solid var(--border-default); background: transparent; transition: var(--transition-control); }
.cs-field__control:focus-within { border-bottom-color: var(--focus-ring); }
.cs-field--error .cs-field__control { border-bottom-color: var(--status-danger); }
.cs-field__control input, .cs-field__control select { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--text-primary); font-family: var(--font-body); font-size: var(--size-body); outline: none; appearance: none; -webkit-appearance: none; }
.cs-field__control input::placeholder { color: var(--text-tertiary); font-style: italic; }
.cs-field__control select option { color: var(--espresso-800); }
.cs-field__chev { position: absolute; right: 2px; pointer-events: none; color: var(--text-tertiary); }
.cs-field__hint { font-family: var(--font-body); font-size: var(--size-caption); color: var(--text-tertiary); font-style: italic; }
.cs-field--error .cs-field__hint { color: var(--status-danger); }
.cs-field--boxed .cs-field__control { border: 1px solid var(--border-default); padding: 0 var(--space-4); }
.cs-stepper { display: inline-flex; align-items: center; height: var(--control-md); border-bottom: 1px solid var(--border-default); }
.cs-stepper button { width: 36px; height: 100%; background: transparent; border: 0; color: var(--text-secondary); cursor: pointer; font-family: var(--font-display); font-size: 22px; line-height: 1; }
.cs-stepper button:hover { color: var(--text-accent); }
.cs-stepper__value { min-width: 40px; text-align: center; font-family: var(--font-ui); font-size: 18px; letter-spacing: 0.06em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-checkbox { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--font-body); font-size: var(--size-body-sm); color: var(--text-secondary); }
.cs-checkbox input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--border-default); margin: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.cs-checkbox input:checked { border-color: var(--text-accent); }
.cs-checkbox input:checked::before { content: ""; width: 8px; height: 8px; background: var(--text-accent); }
.cs-reservation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-6); align-items: end; padding: var(--space-6) var(--space-7); background: var(--surface-paper); color: var(--text-on-paper); box-shadow: var(--shadow-paper); position: relative; }
.cs-reservation::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(57,26,16,0.22); pointer-events: none; }
.cs-reservation .cs-field__label { color: var(--espresso-600); }
.cs-reservation .cs-field__control { border-bottom-color: rgba(57,26,16,0.3); }
.cs-reservation .cs-field__control:focus-within { border-bottom-color: var(--rosso-600); }
.cs-reservation .cs-field__control input, .cs-reservation .cs-field__control select, .cs-reservation .cs-stepper__value { color: var(--espresso-800); }
.cs-reservation .cs-stepper { border-bottom-color: rgba(57,26,16,0.3); }
.cs-reservation .cs-stepper button { color: var(--espresso-600); }
.cs-reservation .cs-button--primary { background: var(--rosso-600); color: var(--crema-100); border-color: var(--rosso-600); }
.cs-reservation .cs-button--primary:hover { background: var(--rosso-700); border-color: var(--rosso-700); }
@media (max-width: 860px) { .cs-reservation { grid-template-columns: 1fr 1fr; } .cs-reservation > .cs-button { grid-column: 1 / -1; } }

/* ---------- Navigation ---------- */
.cs-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); height: 88px; padding: 0 var(--gutter-lg); color: var(--text-primary); }
.cs-topbar--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-header); background: var(--scrim-top); }
.cs-topbar--solid { background: var(--surface-page); border-bottom: 1px solid var(--border-hairline); }
.cs-topbar__nav { display: flex; gap: var(--space-6); }
.cs-topbar__nav--end { justify-content: flex-end; align-items: center; }
.cs-nav-link { position: relative; font-family: var(--font-ui); font-size: var(--size-nav); letter-spacing: var(--ls-nav); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--text-primary); padding: 6px 0; }
.cs-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--text-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-standard); }
.cs-nav-link:hover::after, .cs-nav-link[aria-current="page"]::after { transform: scaleX(1); }
.cs-nav-link[aria-current="page"] { color: var(--text-accent); }
.cs-lang { display: inline-flex; gap: 2px; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.cs-lang button { background: transparent; border: 0; padding: 4px 6px; color: var(--text-tertiary); cursor: pointer; }
.cs-lang button[aria-pressed="true"] { color: var(--text-primary); border-bottom: 1px solid var(--text-accent); }
.cs-lang button:hover { color: var(--text-primary); }
.cs-footer { padding: var(--space-9) var(--gutter-lg) var(--space-7); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
.cs-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.cs-footer__title { font-family: var(--font-ui); font-size: var(--size-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.cs-footer a, .cs-footer p { font-family: var(--font-body); font-size: var(--size-body-sm); color: var(--text-secondary); }
.cs-footer a:hover { color: var(--text-accent); }
.cs-footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); flex-wrap: wrap; }
@media (max-width: 680px) { .cs-footer { grid-template-columns: 1fr 1fr; } .cs-topbar { grid-template-columns: auto 1fr auto; } .cs-topbar__nav:first-child { display: none; } }

/* ---------- Layout helpers ---------- */
.cs-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.cs-section { padding: var(--section-y) 0; }
.cs-hero { position: relative; overflow: hidden; min-height: 560px; display: grid; place-items: center; text-align: center; }
.cs-hero__glow { position: absolute; inset: 0; background: var(--glow); animation: cs-lume var(--duration-lume) var(--ease-standard) infinite; pointer-events: none; }
.cs-sipario { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--crema-100); animation: cs-sipario var(--duration-sipario) var(--ease-entrance) 200ms forwards; pointer-events: none; }
.cs-rise { animation: cs-rise var(--duration-slow) var(--ease-entrance) both; }

/* ---------- Filo: scroll-drawn line-art & parallax layers ---------- */
.cs-filo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cs-filo > svg { position: absolute; }
.cs-filo path, .cs-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
@supports (animation-timeline: view()) {
  .cs-filo path, .cs-draw path { animation: cs-draw linear both; animation-timeline: view(); animation-range: var(--filo-range-start) var(--filo-range-end); }
}
.cs-filo path[data-drawn], .cs-draw path[data-drawn] { stroke-dashoffset: 0; }
.cs-parallax { will-change: transform; }
.cs-layer { position: absolute; left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
  .cs-filo path, .cs-draw path { animation: none; stroke-dashoffset: 0; }
  .cs-parallax { transform: none !important; }
}

/* ---------- Tralcio: the vine that wanders through the page and grows as you scroll ---------- */
.cs-tralcio { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.cs-tralcio svg { display: block; overflow: visible; }
.cs-tralcio__base { fill: none; stroke: var(--line-art); opacity: 0.14; stroke-width: 1; stroke-linecap: round; }
.cs-tralcio__grow { fill: none; stroke: var(--line-art); stroke-width: 1.4; stroke-linecap: round; }
.cs-tralcio__orn path { fill: none; stroke: var(--line-art); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 900ms var(--ease-standard); }
.cs-tralcio__orn.is-open path { stroke-dashoffset: 0; }
.cs-tralcio__orn--bee path, .cs-tralcio__orn--butterfly path { transition-delay: 300ms; }
.cs-tralcio__orn--bee, .cs-tralcio__orn--butterfly { opacity: 0; transition: opacity var(--duration-base) var(--ease-standard) 300ms; }
.cs-tralcio__orn--bee.is-open, .cs-tralcio__orn--butterfly.is-open { opacity: 1; }
.cs-tralcio__petals { transform: scale(0.15) rotate(-60deg); opacity: 0; transition: transform 1000ms var(--ease-entrance) 200ms, opacity var(--duration-base) var(--ease-standard) 200ms; }
.cs-tralcio__orn--rose .cs-tralcio__petals path { stroke-dasharray: none; stroke-dashoffset: 0; }
.cs-tralcio__orn--rose.is-open .cs-tralcio__petals { transform: scale(1.25) rotate(0deg); opacity: 1; }
.cs-tralcio__bud { fill: var(--oro-300); opacity: 0; transform: scale(0.3); transform-origin: center; transition: opacity var(--duration-base) var(--ease-standard) 500ms, transform 600ms var(--ease-entrance) 500ms; }
.cs-tralcio__orn--rose.is-open .cs-tralcio__bud { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .cs-tralcio__orn path, .cs-tralcio__petals, .cs-tralcio__bud, .cs-tralcio__orn { transition: none; } }