/* Sage Light skin v1 (sage_light_core w1, INV-05, A1311). A bright room on cream cotton paper: warm-brown ink,
   sage lines, Gilda Display names and numbers, Montserrat small text, Pinyon Script for the little words.
   Light always comes from the upper left, so every shadow falls to the lower right. Colour slots come from the
   engine. Structure follows the Golden Garden skin (A1300). */
@font-face { font-family: "Gilda Display"; src: url("assets/fonts/gilda-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("assets/fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --k-gate-plaster: var(--k-card); --k-gate-metal: #A9B48C;
  --k-font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --k-font-display: "Gilda Display", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --k-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --k-paper: #F4F1EA; --k-card: #FAF8F3; --k-paper-deep: #EAE5DA;
  --k-ink: #4A3F35; --k-ink-soft: #6F6458;
  --k-line: rgb(var(--c-secondary-rgb) / .55);
  --k-dark: #3E372F; --k-on-dark: #F6F1E7; --k-on-dark-soft: rgba(246, 241, 231, .84);
  --k-light-ground: transparent;
  --k-shadow-paper: 0 1px 1px rgb(74 63 53 / .07), 6px 14px 32px rgb(74 63 53 / .10);
  --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);
  --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 sans on body: whitespace behind the gate must not pull web fonts before the tap */
  font: 400 1rem/1.65 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-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: 500 .72rem/1.4 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--c-secondary-dark); }
.k-title { font: 400 clamp(2.4rem, 10vw, 3.4rem)/1.15 var(--k-font-script); color: var(--c-primary); }
.k-caps { font-family: var(--k-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: var(--k-ink); }
.k-amp { font: 400 1.35rem/1 var(--k-font-script); color: var(--k-ink-soft); text-transform: none; letter-spacing: 0; }
.k-rule { display: block; width: 200px; height: auto; margin: var(--k-s-4) auto 0; color: var(--c-secondary); }

/* ---------- buttons: a thin sage line or solid brown ink, 2 px corners ---------- */
.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: 2px;
  font: 500 .72rem/1 var(--k-font-body); 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: #FAF8F3; 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-secondary-rgb) / .6); }
.k-btn--line:active, .kjy-cal__toggle:active { background: rgb(var(--c-secondary-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 .8em .5em; margin: -.3em -.8em -.5em; } /* Pinyon swashes are wide */
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: 500 .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: 500 .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(250 248 243 / .92); color: var(--c-primary); box-shadow: 0 4px 14px rgb(74 63 53 / .14);
}
.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; }