/* ───────────────────────────────────────────────────────────────────────────
   Bloon Garden — one stylesheet, four pages.

   THE PALETTE IS THEIRS, MEASURED.
   Their logo is a brick-red tulip on a cream paper disc. Both colours are
   sampled straight out of that file: the paper is #FDF9F0 and the tulip is
   #B42F22 — a dark, dusty red rather than a bright one, which is exactly the
   red this site is built on. Olive carries the structure (nav, footer, rules,
   headings' company) so the red stays an accent and never floods the page.
   Pastels — petal, sky, butter — are the washes you walk through: they appear
   as backgrounds behind sections, never as text.

   Everything is set explicitly. There is no dark variant, because the cream
   paper IS the design; `color-scheme: light` keeps native controls in step.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --cream:      #FDF9F0;   /* the ground — their logo's paper */
  --cream-2:    #F7F1E3;   /* alternate band */
  --paper:      #FFFFFF;   /* cards */
  --line:       #E8E0CE;   /* hairlines */

  --ink:        #2B2721;
  --ink-2:      #5C564B;
  --ink-3:      #716A5B;

  --brick:      #B42F22;   /* their tulip, exactly */
  --brick-2:    #8F2317;   /* pressed */
  --brick-soft: #F3DCD6;
  --on-brick:   #FFF6EE;

  --olive:      #5C6B3F;   /* the structure */
  --olive-2:    #45512E;
  --olive-soft: #E8EDDB;
  --on-olive:   #F6F8EE;

  --petal:      #F0C9C2;
  --sky:        #DCE6EA;
  --butter:     #F5E6BC;

  --r:    22px;
  --r-lg: 30px;
  --shadow: 0 18px 40px -26px rgba(69, 81, 46, .55);

  color-scheme: light;
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Karla, system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
  overflow-x: hidden;
}

/* The garden you walk through: three soft washes sitting under everything,
   fixed so they drift past as the page moves. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 12% -8%,  rgba(220, 230, 234, .55), transparent 65%),
    radial-gradient(52vmax 44vmax at 92% 14%,  rgba(240, 201, 194, .40), transparent 62%),
    radial-gradient(64vmax 52vmax at 50% 108%, rgba(232, 237, 219, .85), transparent 68%);
}

h1, h2, h3, .dsp {
  font-family: Quicksand, system-ui, sans-serif;
  font-weight: 500; line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance; margin: 0; color: var(--ink);
}
h1 { font-size: clamp(40px, 7.6vw, 68px); font-weight: 400; letter-spacing: -.028em }
h2 { font-size: clamp(27px, 4.2vw, 40px); font-weight: 400; letter-spacing: -.022em }
h3 { font-size: 20px }
p  { margin: 0 }
a  { color: var(--brick) }
img { display: block; max-width: 100% }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit }
:focus-visible { outline: 2.5px solid var(--brick); outline-offset: 3px; border-radius: 12px }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 22px }
.num  { font-variant-numeric: tabular-nums }

.eyebrow {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--olive);
}
.lede { font-size: 18.5px; color: var(--ink-2); max-width: 38ch }
.muted { color: var(--ink-3); font-size: 13.5px; max-width: 70ch }
.hint  { font-size: 13.5px; color: var(--ink-3) }

/* ── Notice ──────────────────────────────────────────────────────────────── */
.notice {
  background: var(--olive); color: var(--on-olive); text-align: center;
  font-family: Quicksand, sans-serif; font-weight: 500;
  font-size: 12.5px; letter-spacing: .02em; padding: 9px 22px;
}
.notice b { color: var(--butter); font-weight: 600 }

/* ── Header ──────────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
header.site.stuck { border-bottom-color: var(--line) }
.bar { display: flex; align-items: center; gap: 14px 22px; padding-block: 12px; flex-wrap: wrap }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brick) }
.mark img { width: 38px; height: 38px; border-radius: 50%; flex: none }
.mark b {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 19.5px;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}
nav.site { margin-left: auto; display: flex; gap: 6px 4px; align-items: center; flex-wrap: wrap }
nav.site a {
  font-family: Quicksand, sans-serif; font-weight: 500; font-size: 15.5px;
  text-decoration: none; color: var(--ink-2); padding: 8px 13px; border-radius: 999px;
  min-height: 40px; display: inline-flex; align-items: center; transition: background .2s ease, color .2s ease;
}
nav.site a:hover { background: var(--olive-soft); color: var(--olive-2) }
nav.site a[aria-current=page] { color: var(--brick); background: var(--brick-soft) }
/* `nav.site a` outranks `.btn`, so the button in the bar has to say so itself —
   otherwise its label inherits the nav's ink and vanishes into the red. */
nav.site a.btn {
  margin-left: 6px; color: var(--on-brick); background: var(--brick);
  padding: 9px 18px; min-height: 42px;
}
nav.site a.btn:hover, nav.site a.btn[aria-current=page] { background: var(--brick-2); color: var(--on-brick) }
/* On a phone the bar has one row for the mark and one for the nav, and the
   nav has to fit on its row — a wrapped "Book a date" pushes the whole page
   down a line before anybody has read a word. The logo is the way home, so
   Home is the link that goes. */
@media (max-width: 560px) {
  nav.site a[href="/"] { display: none }
  nav.site a { font-size: 15px; padding: 8px 11px }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--brick); color: var(--on-brick); border-radius: 999px;
  padding: 12px 24px; min-height: 48px; text-decoration: none;
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .005em;
  box-shadow: 0 10px 22px -14px rgba(143, 35, 23, .9);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.4), background .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--brick-2); transform: translateY(-2px) }
.btn:active { transform: scale(.96) }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none }
.btn.ghost {
  background: transparent; color: var(--olive-2); box-shadow: inset 0 0 0 1.5px var(--olive);
}
.btn.ghost:hover { background: var(--olive-soft); transform: translateY(-2px) }
.btn.small { min-height: 42px; padding: 9px 18px; font-size: 15px }

/* ── Sections ────────────────────────────────────────────────────────────── */
main { display: block }
section { padding-block: 62px }
@media (max-width: 640px) { section { padding-block: 46px } }
.shead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin-bottom: 32px }
.shead .sub { color: var(--ink-2); font-size: 16px; max-width: 44ch; margin-left: auto }
.band { background: var(--cream-2); border-block: 1px solid var(--line) }
.band.olive { background: var(--olive-soft); border-color: #D9E1C6 }

/* A row of tulips standing between sections — the garden you walk through. */
.row-tulips {
  height: 46px; width: 100%; opacity: .32;
  background-repeat: repeat-x; background-position: center bottom; background-size: 120px 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='46' viewBox='0 0 120 46'%3E%3Cg fill='none' stroke='%235C6B3F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M16 46V21'/%3E%3Cpath d='M58 46V13'/%3E%3Cpath d='M98 46V27'/%3E%3Cpath d='M16 34c-7-1-10-6-10-6s6-1 10 4'/%3E%3Cpath d='M58 30c7-1 10-6 10-6s-6-1-10 4'/%3E%3Cpath d='M98 39c-6-1-9-5-9-5s5-1 9 3.5'/%3E%3Cpath d='M36 46c0-7 2-11 4-13'/%3E%3Cpath d='M80 46c0-6-2-9-4-11'/%3E%3Cpath d='M114 46c0-8 2-12 4-14'/%3E%3C/g%3E%3Cg fill='%235C6B3F'%3E%3Cpath d='M10 22c0-9 3-13 6-13s6 4 6 13c0 3.5-2.7 5.5-6 5.5s-6-2-6-5.5z'/%3E%3Cpath d='M52 14c0-9 3-13 6-13s6 4 6 13c0 3.5-2.7 5.5-6 5.5s-6-2-6-5.5z'/%3E%3Cpath d='M93 28c0-7.5 2.5-11 5-11s5 3.5 5 11c0 3-2.2 4.6-5 4.6s-5-1.6-5-4.6z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
/* Visible by default and hidden only once the page has said it will reveal
   them. Content that depends on JavaScript to become visible is content that
   disappears the one time JavaScript doesn't run. */
html.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1) }
html.js .rise.in { opacity: 1; transform: none }

/* ── Page transition: a balloon inflates, then pops ──────────────────────── */
.balloon {
  position: fixed; z-index: 9998; pointer-events: none; left: 0; top: 0;
  width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #D4584A, var(--brick) 58%, var(--brick-2));
  display: grid; place-items: center; will-change: transform;
}
.balloon svg { width: 46%; height: auto; color: var(--cream); opacity: .9 }
.shard {
  position: fixed; z-index: 9999; pointer-events: none; left: 0; top: 0;
  width: 14px; height: 18px; border-radius: 60% 60% 55% 55%; will-change: transform, opacity;
}

/* The cursor's own little balloon. Pointer devices only. */
.follower {
  position: fixed; z-index: 55; pointer-events: none; left: 0; top: 0;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  transform: translate(-100px, -100px);
  background: radial-gradient(circle at 34% 28%, #D4584A, var(--brick) 62%, var(--brick-2));
  opacity: 0; transition: opacity .35s ease; will-change: transform;
}
.follower::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 10px;
  margin-left: -.75px; background: var(--olive); opacity: .55; border-radius: 2px;
}
.follower.show { opacity: .62 }
@media (hover: none), (pointer: coarse) { .follower { display: none } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer.site {
  background: var(--olive); color: var(--on-olive);
  padding-block: 44px calc(52px + env(safe-area-inset-bottom, 0px));
  margin-top: 10px;
}
footer.site a { color: var(--butter) }
footer.site .mark b { color: var(--on-olive) }
footer.site .mark { color: var(--butter) }
.foot { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 15px }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-left: auto }
.foot nav a { text-decoration: none }
.foot nav a:hover { text-decoration: underline }
.copy { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 22px; font-size: 14.5px }
.copy code {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 14px;
  background: rgba(0,0,0,.16); border-radius: 9px; padding: 5px 11px;
}
.copy button { font-family: Quicksand, sans-serif; font-weight: 600; font-size: 13.5px; color: var(--butter); text-decoration: underline }
footer.site .muted { color: rgba(246,248,238,.72); margin-top: 18px; font-size: 13px }

/* ───────────────────────────────────────────────────────────────────────────
   HOME
   ─────────────────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: 46px 10px }
@media (min-width: 900px) { .hero { grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center } }
.hero .cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; align-items: center }
.hero .lede { margin-top: 20px }
.heroimg { position: relative }
.heroimg img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50% 50% var(--r-lg) var(--r-lg); box-shadow: var(--shadow);
}
.heroimg::before {
  content: ''; position: absolute; inset: -14px -14px 20px -14px; z-index: -1;
  border-radius: 50% 50% var(--r-lg) var(--r-lg); background: var(--petal); opacity: .45;
}
.float {
  position: absolute; right: -4px; bottom: 14px; background: var(--paper);
  border-radius: 999px; padding: 10px 18px; font-size: 14px; color: var(--ink-2);
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px;
  animation: bob 5.5s ease-in-out infinite;
}
.float i { width: 9px; height: 9px; border-radius: 50%; background: var(--olive); flex: none }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* The three doors. These are the subpages, and they are the point of the
   home page: you choose a room rather than scrolling through all of them. */
.doors { display: grid; grid-template-columns: 1fr; gap: 16px }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(3, 1fr) } }
.door {
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 16px 22px; box-shadow: var(--shadow); min-width: 0;
  transition: transform .28s cubic-bezier(.2,.8,.3,1.2), box-shadow .28s ease, border-color .2s ease;
}
.door:hover { transform: translateY(-6px); border-color: var(--petal); box-shadow: 0 26px 50px -26px rgba(69,81,46,.6) }
.door img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px }
.door .t { font-family: Quicksand, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.015em; padding-inline: 6px }
.door p { color: var(--ink-2); font-size: 15px; padding-inline: 6px }
.door .go {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 15px; color: var(--brick);
  display: inline-flex; align-items: center; gap: 8px; padding-inline: 6px;
}
.door .go svg { width: 17px; height: 17px; transition: transform .25s ease }
.door:hover .go svg { transform: translateX(4px) }

.steps { display: grid; grid-template-columns: 1fr; gap: 28px }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr) } }
.step { min-width: 0 }
.step .k {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brick-soft); color: var(--brick); font-family: Quicksand, sans-serif;
  font-weight: 700; font-size: 15px; margin-bottom: 13px;
}
.step p { color: var(--ink-2); font-size: 15.5px; margin-top: 8px }

.quote {
  font-family: Quicksand, sans-serif; font-weight: 400; font-size: clamp(25px, 3.8vw, 38px);
  line-height: 1.22; letter-spacing: -.02em; max-width: 20ch; margin: 0; color: var(--olive-2);
}
.quote cite {
  display: block; font-family: Quicksand, sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); font-style: normal; margin-top: 18px;
}

.pagehead { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center }
@media (min-width: 900px) { .pagehead { grid-template-columns: 1.08fr .92fr; gap: 52px } }
.pagehead .lede { margin-top: 18px }
.pagehead figure { margin: 0; position: relative }
.pagehead img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 190px 190px var(--r-lg) var(--r-lg); box-shadow: var(--shadow);
}
.pagehead figure::before {
  content: ''; position: absolute; inset: -12px -12px 16px -12px; z-index: -1;
  border-radius: 190px 190px var(--r-lg) var(--r-lg); background: var(--olive-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
   BOUQUETS
   ─────────────────────────────────────────────────────────────────────────── */
.coll { margin-bottom: 38px }
.coll > .eyebrow { display: block; margin-bottom: 5px }
.coll > p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 16px; max-width: 54ch }
.sizes {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding-inline: 20px; box-shadow: var(--shadow);
}
.size {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; align-items: baseline;
  padding-block: 19px; border-top: 1px solid var(--line); min-width: 0;
}
.sizes .size:first-child { border-top: 0 }
.size .nm {
  font-family: Quicksand, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.size .pr {
  font-family: Quicksand, sans-serif; font-size: 22px; font-weight: 600; color: var(--brick);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.size .ds { grid-column: 1 / -1; color: var(--ink-2); font-size: 15px; max-width: 56ch }
.size .st {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--olive-2); background: var(--olive-soft);
  border-radius: 999px; padding: 4px 11px;
}
.size .st.pick { color: var(--brick); background: var(--brick-soft) }

.blooms { display: flex; flex-wrap: wrap; gap: 10px }
.bloom {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 999px;
  padding: 9px 18px 9px 11px; font-size: 15.5px; background: var(--paper);
  border: 1px solid var(--line); box-shadow: 0 6px 14px -12px rgba(69,81,46,.7);
}
.bloom .sw { width: 22px; height: 22px; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14) }

.facts { display: grid; grid-template-columns: 1fr; gap: 16px }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr) } }
.fact {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; box-shadow: var(--shadow); min-width: 0;
}
.fact h3 { margin-bottom: 7px }
.fact p { color: var(--ink-2); font-size: 15.5px }

/* ───────────────────────────────────────────────────────────────────────────
   GALLERY
   ─────────────────────────────────────────────────────────────────────────── */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px }
@media (min-width: 720px) { .gal { grid-template-columns: repeat(4, 1fr) } }
.gal figure { margin: 0; min-width: 0 }
.gal img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r);
  box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.2,.8,.3,1.1);
}
.gal figure:hover img { transform: translateY(-5px) scale(1.012) }
.gal .big { grid-column: span 2; grid-row: span 2 }
.gal .tall img { border-radius: 140px 140px var(--r) var(--r) }

/* ───────────────────────────────────────────────────────────────────────────
   BOOK — calendar and form
   ─────────────────────────────────────────────────────────────────────────── */
.booklay { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start }
.booklay > * { min-width: 0 }
/* Capped, because in the one-column layout a 1fr track is the whole page and a
   calendar stretched to 1080px is seven wide ovals rather than a month. */
.bookcal { width: 100%; max-width: 420px }
@media (min-width: 980px) { .booklay { grid-template-columns: 420px 1fr; gap: 40px } }
@media (min-width: 980px) { .bookcal { position: sticky; top: 92px } }

.cal {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; box-shadow: var(--shadow);
}
.calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 16px }
.calhead .m {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.015em;
  flex: 1 1 auto; min-width: 0; text-align: center;
}
.nav {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  color: var(--olive-2); flex: none; transition: background .18s ease;
}
.nav:hover:not([disabled]) { background: var(--olive-soft) }
.nav[disabled] { opacity: .25; cursor: not-allowed }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 7px }
.dow span {
  text-align: center; font-family: Quicksand, sans-serif; font-weight: 600;
  font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3);
}
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px }
@media (max-width: 440px) { .cal { padding: 14px } .grid, .dow { gap: 4px } }
/* Fixed height rather than a square: a square cell cannot be narrower than it
   is tall, which on a 390px phone makes the whole calendar 380px wide and
   pushes the page sideways. Height is what a thumb needs; width can give. */
.day {
  height: 48px; border-radius: 999px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-variant-numeric: tabular-nums; font-size: 15px;
  font-family: Quicksand, sans-serif; font-weight: 600;
  background: var(--olive-soft); color: var(--olive-2);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.4), background .18s ease, color .18s ease;
}
.day:hover:not(.off) { transform: translateY(-3px); background: #DCE4C8 }
.day.pad { background: none; pointer-events: none }
.day.off { background: none; color: #AFA89A; cursor: not-allowed }
.day.off.closed { background: repeating-linear-gradient(135deg, #F1EBDC 0 4px, transparent 4px 8px) }
.day.today { box-shadow: inset 0 0 0 1.5px var(--olive) }
.day.on { background: var(--brick); color: var(--on-brick); transform: translateY(-3px) }
.day .pips { display: flex; gap: 3px; height: 4px }
.day .pips i { width: 4px; height: 4px; border-radius: 50%; background: var(--brick) }
.day .pips i.used { background: transparent; box-shadow: inset 0 0 0 1px #AFA89A }
.day.on .pips i { background: var(--on-brick) }
.day.on .pips i.used { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,246,238,.5) }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--ink-2) }
.legend span { display: flex; align-items: center; gap: 7px }
.key { width: 13px; height: 13px; border-radius: 999px; flex: none }

.slots { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line) }
.slotrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.slot {
  border-radius: 999px; padding: 9px 17px; min-height: 44px; font-size: 15px;
  font-family: Quicksand, sans-serif; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line); background: var(--cream);
  transition: box-shadow .18s ease, background .18s ease;
}
.slot:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--brick) }
.slot.on { background: var(--brick); color: var(--on-brick); box-shadow: none }
.slot[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through }
.slot small { font-weight: 600; font-size: 12.5px; opacity: .72 }
.status { font-size: 14px; color: var(--ink-2); margin-top: 14px; min-height: 1.5em }
.status.warn { color: var(--brick); font-weight: 500 }

/* ── Form ────────────────────────────────────────────────────────────────── */
form { display: grid; gap: 22px; max-width: 720px }
.two { display: grid; grid-template-columns: 1fr; gap: 22px }
@media (min-width: 620px) { .two { grid-template-columns: 1fr 1fr } }
.f { display: grid; gap: 8px; min-width: 0 }
.f > label, .f > .lb {
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--olive);
}
input[type=text], input[type=time], select, textarea {
  font-family: Karla, sans-serif; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 15px; min-height: 50px; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-soft);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.6 }
.chips { display: flex; flex-wrap: wrap; gap: 9px }
.chip { position: relative }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer }
.chip span {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 17px;
  border-radius: 999px; font-size: 15px; background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line); transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.chip span i { width: 16px; height: 16px; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16) }
.chip input:checked + span { background: var(--brick); color: var(--on-brick); box-shadow: none }
.chip input:focus-visible + span { outline: 2.5px solid var(--brick); outline-offset: 3px }
.chip input:disabled + span { opacity: .4; cursor: not-allowed }

.recap {
  background: var(--olive-soft); color: var(--olive-2); border-radius: 16px; padding: 15px 18px;
  font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  border: 1px solid #D9E1C6;
}
.recap b { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 15px }
.err { color: var(--brick); font-size: 15px; font-weight: 500 }
.done {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px 28px; text-align: center; display: grid; gap: 14px; place-items: center;
  box-shadow: var(--shadow);
}
.done .dsp { font-size: 30px; font-weight: 500 }
.done img.seal { width: 74px; height: 74px; border-radius: 50% }

.drop {
  border: 2px dashed #DED5C0; border-radius: 18px; padding: 24px;
  display: grid; gap: 11px; place-items: center; text-align: center;
  background: var(--cream-2); transition: border-color .2s ease, background .2s ease;
}
.drop.over { border-color: var(--brick); background: var(--brick-soft) }
.drop p { color: var(--ink-3); font-size: 13.5px }
.shots { display: flex; flex-wrap: wrap; gap: 10px }
.shot { position: relative; width: 94px; height: 94px; border-radius: 16px; overflow: hidden; background: var(--cream-2); border: 1px solid var(--line) }
.shot img { width: 100%; height: 100%; object-fit: cover }
.shot button {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 999px;
  background: rgba(43,39,33,.72); color: #fff; display: grid; place-items: center; font-size: 16px; line-height: 1;
}
.shot em {
  position: absolute; left: 0; right: 0; bottom: 0; font-style: normal;
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 10px; text-align: center;
  background: rgba(43,39,33,.65); color: #fff; padding: 2px;
}

/* ── Motion off ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important }
  .rise { opacity: 1; transform: none }
  .day:hover:not(.off), .btn:hover, .door:hover { transform: none }
  .follower, .balloon, .shard { display: none !important }
}