/* Public site base: reset, typography, layout shell, buttons, forms. Tokens in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-title); margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-h1); letter-spacing: -.5px; }
h2 { font-size: var(--text-h2); }
p { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 900px) { .wrap { padding: 0 var(--gutter-lg); } }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--color-ink); color: var(--color-footer-ink);
  padding: 12px 20px; border-radius: var(--radius-pill); text-decoration: none;
}
.skip-link:focus { top: var(--gutter); }

/* Buttons */
.btn, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap-min); padding: 0 28px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: 1.0625rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn {
  background: var(--color-accent); color: #fff; border: 0;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(214 31 94 / .28); }
.btn:active { transform: scale(.97); }
.btn:disabled { cursor: progress; opacity: .85; transform: none; box-shadow: none; }
.btn-outline { border: 2px solid var(--color-ink); background: transparent; transition: background var(--dur-base), color var(--dur-base); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-footer-ink); }

/* Site header and footer */
html { scroll-padding-top: 92px; } /* a scrolled-to element clears the sticky header */
@media (min-width: 900px) { html { scroll-padding-top: 132px; } }
.site-header { position: sticky; top: 0; z-index: 10; background: rgb(255 248 238 / .92); backdrop-filter: blur(10px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.site-brand { white-space: nowrap; font-size: 1rem; display: inline-flex; align-items: center; min-height: var(--tap-min); font-family: var(--font-display); font-weight: var(--fw-display); text-decoration: none; }
/* Logo: vector, for light backgrounds. Displayed 52 px high (84 px from 1055px): the width is that height at the 133:29 ratio,
   capped to the room left (max-width), the height then follows the ratio, so a narrow phone never overflows. */
.site-brand { flex: 0 1 auto; min-width: 0; }
.site-brand__logo { display: block; width: 239px; max-width: 100%; height: auto; }
/* Padding, nav and button take about 670 px: the logo is 84 px high (385 px wide) from 1055 px and shrinks with the screen down to
   about 47 px (215 px) at 900 px, instead of overflowing or wrapping the menu. */
@media (min-width: 900px) { .site-brand__logo { width: clamp(220px, 100vw - 670px, 385px); } }
.site-nav { display: none; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 16px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-ui); text-decoration: none; transition: background var(--dur-base);
}
.site-nav a:hover { background: var(--color-hover); }
@media (min-width: 900px) { .site-nav { display: flex; } }

.site-footer { background: var(--color-footer-bg); color: var(--color-footer-ink); padding: 32px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 8px; }
.site-footer :focus-visible { outline-color: var(--color-footer-ink); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-display); font-weight: var(--fw-ui); font-size: 1rem; }
.input {
  width: 100%; min-height: var(--tap-min); padding: 12px 18px; border-radius: 18px;
  border: 2px solid #e8d3bb; background: var(--color-surface); color: var(--color-ink); font: inherit;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgb(214 31 94 / .15); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
textarea.input { resize: vertical; }
.field-error { color: var(--color-error); font-size: var(--text-body-sm); animation: shake var(--dur-slow) var(--ease); }
@keyframes shake {
  0% { transform: translateX(0); opacity: 0; }
  30% { transform: translateX(-6px); opacity: 1; }
  60% { transform: translateX(4px); }
  100% { transform: none; }
}

/* Captcha (ADR 0024): the widget is invisible and takes no room (display: contents keeps the wrapper out of flex rows such as
   the footer newsletter form). Its status line is read aloud (sr-only) and only shown while the visitor must wait or retry. */
.captcha { display: contents; }
.captcha altcha-widget { display: none; }
.captcha__status:not(.sr-only), .captcha__nojs { flex: 1 1 100%; margin: .5rem 0 0; font-size: var(--text-body-sm); }
.captcha__status:not(.sr-only) { color: var(--color-ink); }
.captcha__nojs { color: var(--color-error); }

/* Honeypot: off-screen, not display:none (bots skip display:none less often than they should). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / .4); border-top-color: #fff; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Owl mascots: vector <img> (assets/brand), rose on the hero and the dark footer, violet elsewhere */
.owl { display: block; max-width: 100%; height: auto; }
.owl--hero { position: absolute; left: 6%; top: 2%; width: 70px; transform: rotate(-8deg); }
.owl--footer { width: 44px; }
.owl--story { width: 84px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
main:focus { outline: none; }

/* Header of the full site: desktop navigation from 900px, a drawer below. */
.site-nav a[aria-current="page"] { background: var(--color-hover); }
.site-header__cta { display: none; }
@media (min-width: 900px) { .site-header__cta { display: inline-flex; } }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min);
  border: 0; border-radius: 50%; background: var(--color-hover); color: var(--color-ink); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.menu-toggle:active { transform: scale(.94); }
@media (min-width: 900px) { .site-header .menu-toggle { display: none; } }

.drawer {
  margin: 0 0 0 auto; width: 100%; max-width: none; height: 100%; max-height: none; padding: 12px var(--gutter) 24px;
  border: 0; background: var(--color-bg); color: var(--color-ink);
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in .5s var(--ease) both; }
.drawer::backdrop { background: rgb(52 36 58 / .45); }
.drawer__logo { display: block; width: 190px; max-width: 70%; height: auto; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { display: flex; flex-direction: column; margin-top: 24px; }
.drawer__nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 4px;
  border-bottom: 2px solid var(--color-line); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: 1.5rem;
}
.drawer__nav a svg { color: var(--color-accent); }
.drawer__nav a[aria-current="page"] { color: var(--color-accent); }
.drawer[open] .drawer__nav a { animation: drawer-link .5s var(--ease) both; }
.drawer[open] .drawer__nav a:nth-child(2) { animation-delay: .07s; }
.drawer[open] .drawer__nav a:nth-child(3) { animation-delay: .14s; }
.drawer[open] .drawer__nav a:nth-child(4) { animation-delay: .21s; }
.drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.drawer__foot p { font-size: var(--text-body-sm); color: var(--color-ink-soft); }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-link { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .drawer { display: none !important; } }

/* Footer newsletter block */
.site-footer .footer-top { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid rgb(255 248 238 / .2); }
.site-footer .footer-top:not(:has(> *)) { display: none; }
.footer-newsletter { display: flex; flex-direction: column; gap: 14px; }
.footer-follow { display: flex; flex-direction: column; gap: 14px; }
.footer-follow h2 { font-size: 1.1875rem; }
.footer-follow__icons { display: flex; gap: 12px; }
/* Social links (components/_social_icon): 48 px targets, visible focus. */
.site-footer .social--round { padding: 0; }
.site-footer .social--pill { padding: 0 22px 0 16px; }
.social { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; min-height: 48px; text-decoration: none; }
.social:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.social--round { width: 48px; border-radius: 50%; background: var(--color-footer-ink); color: var(--color-ink); }
.social--round:hover { background: #fff; }
.social--pill { padding: 0 22px 0 16px; border-radius: var(--radius-pill); background: #fff; border: 2px solid var(--color-ink); color: var(--color-ink); font: var(--fw-ui, 500) 1.0625rem var(--font-display); }
.social--pill:hover { background: var(--color-tint-pink); }
.social-row { display: flex; flex-wrap: wrap; gap: 12px; }
.social-row .social--pill { flex: 1 1 100%; }
.footer-newsletter h2 { font-size: 1.625rem; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter-form .input { flex: 1 1 220px; width: auto; border-radius: var(--radius-pill); border: 0; padding: 0 22px; }
.newsletter-form .btn { flex: none; }
.newsletter-success { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--radius-card); background: rgb(255 248 238 / .08); border: 2px solid rgb(255 248 238 / .25); }
.newsletter-success:focus-visible { outline: 3px solid var(--color-footer-ink); outline-offset: 3px; }
.newsletter-success p { margin-top: 6px; }
.owl--newsletter { width: 64px; height: auto; flex: none; }
.footer-newsletter__note { font-size: var(--text-body-sm); opacity: .85; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer nav ul { flex-wrap: wrap; }
@media (min-width: 900px) {
  .site-footer .footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .footer-top > :only-child { grid-column: 1 / -1; }
  .newsletter-form { max-width: 560px; }
  .social-row .social--pill { flex: 0 0 auto; }
}