/* Garden Romance skin v1 (library w1, A1279). From themes/garden/theme.css (Wave 2, A1263): the fonts, the page
   tokens, "base", "shared type", "buttons", the ink write-on, the engine footer and the sound toggle. Every section on
   a Garden page reads these; colour slots (--c-primary*, --c-secondary*) come from the engine. */
@font-face { font-family: "Great Vibes"; src: url("assets/fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --k-gate-plaster: var(--k-card); --k-gate-metal: var(--c-secondary-light); /* openings_t3 (A1284): Tier-3 gate grounds */
  --k-font-script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --k-font-display: "Cormorant Garamond", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --k-font-body: "Cormorant Garamond", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --k-paper: #FBF7F1; --k-card: #FFFDF9;
  --k-ink: #3A3431; --k-ink-soft: #6B625C;
  --k-line: rgb(var(--c-secondary-rgb) / .35);
  --k-dark: var(--c-primary-deep); --k-on-dark: #FFFDF9; --k-on-dark-soft: rgba(255, 253, 249, .82);
  --k-light-ground: transparent; /* a light section shows the page itself, which is the paper (and the sprays behind) */
  --k-s-1: 4px; --k-s-2: 8px; --k-s-3: 12px; --k-s-4: 16px; --k-s-5: 24px; --k-s-6: 32px; --k-s-7: 48px; --k-s-8: 64px; --k-s-9: 96px;
  --k-gutter: 20px; --k-section-pad: 88px; --k-measure: 560px;
  --k-ease: cubic-bezier(.22, 1, .36, 1);
  /* paper grain: inline SVG noise, 0-4% dark specks (no request, never the LCP image) */
  --k-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23  0 0 0 0 .2  0 0 0 0 .19  .16 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 768px) { :root { --k-gutter: 32px; --k-section-pad: 120px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--k-paper); scrollbar-gutter: stable; /* desktop: no sideways jump when the gate unlocks scrolling */ }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--k-ink);
  /* system serif on body: whitespace behind the gate must not pull web fonts before the tap */
  font: 500 1.1875rem/1.6 "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  background: var(--k-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.k-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kjy-main { font-family: var(--k-font-body); }
.kjy-main { position: relative; overflow: hidden; overflow: clip; }

/* ---------- shared type ---------- */
.k-kicker { font: 600 .75rem/1.4 var(--k-font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--c-secondary-dark); }
.k-title { font: 400 clamp(2.5rem, 11vw, 3.5rem)/1.1 var(--k-font-script); color: var(--c-primary); }
.k-amp { font: italic 500 .42em/1.4 var(--k-font-body); color: var(--k-ink-soft); }
.k-rule { width: 180px; height: auto; margin: var(--k-s-3) auto 0; color: var(--c-secondary); }
.k-foil { color: var(--c-primary); }

/* ---------- buttons ---------- */
.k-btn, .kjy-cal__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s-2);
  min-height: 44px; padding: 0 var(--k-s-5); border-radius: 999px;
  font: 600 .8125rem/1 var(--k-font-display); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.k-btn--solid { min-height: 48px; padding: 0 var(--k-s-6); background: var(--c-primary); color: #fff; border: 1px solid var(--c-primary); }
.k-btn--solid:active { background: var(--c-primary-dark); }
.k-btn--line, .kjy-cal__toggle { background: transparent; color: var(--c-primary); border: 1px solid rgb(var(--c-primary-rgb) / .6); }
.k-btn--line:active, .kjy-cal__toggle:active { background: rgb(var(--c-primary-rgb) / .08); }
.k-ico { width: 18px; height: 18px; flex: none; }

/* ---------- "ink" write-on: a soft mask sweeps left to right, once. The padding gives Great Vibes swashes room
   inside the mask; the equal negative margin keeps the layout unchanged. ---------- */
.k-ink { display: inline-block; padding: .3em .7em .5em; margin: -.3em -.7em -.5em; }
html.kjy-fx [data-k-write] .k-ink {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
html.kjy-fx [data-k-write].is-in .k-ink {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition-property: -webkit-mask-position, mask-position;
  transition-duration: 1.4s; transition-timing-function: cubic-bezier(.5, 0, .2, 1);
}
/* must come last and out-rank the rules above: drop the mask once the ink has written */
html.kjy-fx [data-k-write].is-done .k-ink { -webkit-mask: none; mask: none; }

/* ---------- engine footer + sound toggle ---------- */
.kjy-footer { font: 600 .6875rem/1.4 var(--k-font-body); position: relative; z-index: 1; padding: var(--k-s-6) var(--k-gutter) calc(var(--k-s-8) + env(safe-area-inset-bottom)); text-align: center; }
.kjy-footer a { display: inline-block; padding: 14px 8px; font: 600 .6875rem/1 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--k-ink-soft); text-decoration: none; }
.kjy-footer a { display: inline-flex; align-items: center; gap: 14px; } /* h409 (A1447): "Crafted by" + the main two-line logo, 36 px tall (never under 30), never recoloured */
.kjy-footer__logo { display: block; width: 72px; height: 36px; }
.kjy-footer__logo--porcelain { display: none; } /* a light footer: wine */
.kjy-sound {
  position: fixed; z-index: 90;
  top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgb(var(--c-primary-rgb) / .5);
  background: rgb(255 253 249 / .92); color: var(--c-primary); box-shadow: 0 4px 14px rgb(58 52 49 / .12);
}
.kjy-preview ~ .kjy-sound { top: calc(64px + env(safe-area-inset-top)); }
.kjy-sound[aria-pressed="true"] .kjy-sound__off,
.kjy-sound[aria-pressed="false"] .kjy-sound__on { display: none; }