/* Friendly Events, Kolar.
 *
 * They decorate rooms, and every occasion has its own colour scheme. So the
 * page is a set of full screen colour fields, one per occasion, snapped
 * through top to bottom. The colour IS the content. Walking the page should
 * feel like walking through rooms they have dressed.
 *
 * Nothing here is restrained, because their work is not. Saturated, bright,
 * celebratory. A tasteful muted palette would be wrong for a business whose
 * product is a decorated room full of colour.
 *
 * No header bar, no article, no sections inside a page. Just rooms.
 */

:root {
  --ink:   #16141a;
  --white: #fffdf8;

  /* one field per occasion, drawn from Indian event decor */
  --marigold: #d95d0b;
  --rose:     #b8306c;
  --teal:     #0f6159;
  --magenta:  #7d1246;
  --night:    #14131a;
  --gold:     #e3b23c;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans", "Noto Sans Kannada", sans-serif;
  --pad: clamp(1.5rem, 6vw, 5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--ink); color: var(--white);
  font: 400 clamp(1rem, .95rem + .3vw, 1.15rem)/1.5 var(--sans);
}

body [lang="kn"] { display: none; }
:root[data-lang="kn"] body [lang="en"] { display: none; }
:root[data-lang="kn"] body [lang="kn"] { display: inline; }
.lang button[lang="kn"] { display: inline; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--white); color: var(--ink); padding: .7rem 1rem; }

/* ── the reel of rooms ──────────────────────────────────────────────── */

.reel { scroll-snap-type: y mandatory; height: 100svh; overflow-y: auto; }
.reel::-webkit-scrollbar { display: none; }
.reel { scrollbar-width: none; }

.p {
  scroll-snap-align: start;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 10vh, 6rem) var(--pad);
}

.p--open      { background: var(--ink); }
.p--birthday  { background: var(--marigold); }
.p--naming    { background: var(--rose); }
.p--engage    { background: var(--teal); }
.p--reception { background: var(--magenta); }
.p--fire      { background: var(--night); }
.p--book      { background: var(--white); color: var(--ink); }

/* A ribbon down the edge, filling as you move through the rooms. */
.tape {
  position: fixed; top: 0; bottom: 0; left: 0; width: 4px; z-index: 20;
  background: rgb(255 253 248 / .16);
}
.tape i { display: block; width: 100%; height: 0; background: var(--gold); transition: height .2s linear; }

/* ── opening ────────────────────────────────────────────────────────── */

.where {
  margin: 0 0 1.4rem; color: var(--gold);
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
}
h1 {
  margin: 0; font-size: clamp(3.2rem, 16vw, 8rem); line-height: .88;
  font-weight: 800; letter-spacing: -.05em;
}
.line { margin: 1.6rem 0 0; max-width: 22ch; font-size: clamp(1.1rem, 3vw, 1.5rem); color: #cfc9c2; }
.down {
  margin: 2.4rem 0 0; color: var(--gold); font-weight: 700;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  animation: bob 2.2s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: none; } 50% { transform: translateY(7px); } }

/* ── an occasion ────────────────────────────────────────────────────── */

.num {
  margin: 0 0 .6rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .24em; opacity: .72;
}
h2 {
  margin: 0; font-size: clamp(2.6rem, 13vw, 6.5rem); line-height: .92;
  font-weight: 800; letter-spacing: -.045em; max-width: 12ch;
}
.sub { margin: 1.2rem 0 0; font-size: clamp(1.05rem, 3vw, 1.4rem); opacity: .85; max-width: 20ch; }

[data-slot] { position: relative; }
[data-slot]::after {
  content: attr(data-slot); position: absolute; left: .9rem; bottom: .8rem;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgb(255 253 248 / .8);
}
.slot {
  margin-top: clamp(1.6rem, 5vh, 3rem); flex: 0 1 auto; max-height: 42vh;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border: 2px dashed rgb(255 253 248 / .4);
  font-size: .9rem; color: rgb(255 253 248 / .85);
}

/* ── cold fire, their own name for it ───────────────────────────────── */

.sparks { margin-top: 2.5rem; display: flex; gap: .5rem; align-items: flex-end; height: 90px; }
.sparks i {
  display: block; width: 2px; flex: 1; max-width: 3px;
  background: linear-gradient(to top, transparent, var(--gold));
  transform-origin: bottom;
  animation: spark 1.9s var(--ease) infinite;
}
.sparks i:nth-child(2) { animation-delay: .18s } .sparks i:nth-child(3) { animation-delay: .36s }
.sparks i:nth-child(4) { animation-delay: .1s }  .sparks i:nth-child(5) { animation-delay: .44s }
.sparks i:nth-child(6) { animation-delay: .26s } .sparks i:nth-child(7) { animation-delay: .52s }
.sparks i:nth-child(8) { animation-delay: .07s }
@keyframes spark {
  0%,100% { transform: scaleY(.28); opacity: .45; }
  45%     { transform: scaleY(1);   opacity: 1; }
}

/* ── booking ────────────────────────────────────────────────────────── */

.p--book h2 { max-width: 14ch; }
.acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 800;
  padding: 1rem 1.6rem; background: var(--magenta); color: var(--white);
  border: 2px solid var(--magenta); letter-spacing: -.01em;
}
.btn:hover { background: #5f0d34; border-color: #5f0d34; }
.btn--ghost { background: none; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }

.lang { display: flex; align-items: center; gap: .5rem; margin-top: 2.4rem; font-size: .8rem; color: #6b6660; }
.lang button {
  background: none; border: 0; font: inherit; color: #6b6660; cursor: pointer;
  padding: .3rem .2rem; border-bottom: 2px solid transparent;
}
.lang button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--magenta); font-weight: 700; }

.fine { margin: 1.6rem 0 0; font-size: .74rem; color: #6b6660; max-width: 40ch; }

/* ── floor ──────────────────────────────────────────────────────────── */

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* Snapping without motion is disorienting. Let it be an ordinary page. */
  .reel { scroll-snap-type: none; height: auto; overflow: visible; }
  .p { min-height: 0; }
  .sparks i { transform: scaleY(.8); opacity: 1; }
}

@media print { .tape, .lang, .skip { display: none; } .reel { height: auto; } }

/* Their own logo, an ornate gold FEM monogram. */
.mark { width: clamp(72px, 20vw, 104px); height: auto; display: block; margin-bottom: 1.2rem; }
h1 em { font-style: normal; font-weight: 400; font-size: .42em; letter-spacing: -.01em; opacity: .8; }

/* Their real work fills the rooms. */
figure.slot { margin: clamp(1.4rem, 4vh, 2.4rem) 0 0; padding: 0; border: 0; overflow: hidden; }
figure.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══ THE PLANNER ═════════════════════════════════════════════════════
   This panel is white, so every control is drawn for a light field. The
   occasion colour still drives the page, but through --on-field, which names
   the one text colour that is readable on each. Never let an accent decide
   whether a control can be read. */

.p--book { --field: var(--marigold); --on-field: #14131a; }
.p--book[data-field="rose"]    { --field: var(--rose);    --on-field: #fffdf8; }
.p--book[data-field="teal"]    { --field: var(--teal);    --on-field: #fffdf8; }
.p--book[data-field="magenta"] { --field: var(--magenta); --on-field: #fffdf8; }
.p--book[data-field="gold"]    { --field: var(--gold);    --on-field: #14131a; }

.plan {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  width: 100%; max-width: 62rem; margin: 2rem 0 0; text-align: left;
}
@media (min-width: 52rem) { .plan { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.q {
  margin: 1.6rem 0 .6rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: #5d5766;
}
.plan__q > .q:first-child { margin-top: 0; }

.ch { display: flex; flex-wrap: wrap; gap: .4rem; }
.ch button {
  font: inherit; font-size: .95rem; cursor: pointer; padding: .55rem 1rem;
  border: 2px solid #d3ccda; background: transparent; color: var(--ink);
  border-radius: 999px; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ch button:hover { border-color: var(--ink); }
.ch button[aria-pressed="true"] {
  background: var(--field); border-color: var(--field);
  color: var(--on-field); font-weight: 700;
}
/* Multi-select is outlined and ticked rather than filled, so pick-one and
   pick-many never look the same. */
.ch--many button[aria-pressed="true"] {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.ch--many button[aria-pressed="true"]::before { content: "\2713\00a0"; }

#pDate {
  font: inherit; font-size: 1.05rem; padding: .6rem .8rem; border-radius: 8px;
  border: 2px solid #d3ccda; background: transparent; color: var(--ink);
  width: 100%; max-width: 16rem;
}
#pDate:focus { outline: none; border-color: var(--ink); }

/* The card. The object this whole trade turns on, writing itself as you
   answer. Dark on a white panel so it reads as a printed thing, and so the
   occasion colour can sit on its edge without carrying any text. */
.card {
  background: var(--night); color: var(--white);
  padding: clamp(1.4rem, 4vw, 2rem);
  border-top: 8px solid var(--field);
  box-shadow: 0 18px 40px rgb(22 20 26 / .28);
}
@media (min-width: 52rem) { .card { position: sticky; top: 2rem; } }

.card__occ {
  margin: 0; font-size: clamp(1.5rem, 4.4vw, 2rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -.025em;
}
.card__date { margin: .25rem 0 1.3rem; font-size: 1.05rem; color: #bdb7c6; font-variant-numeric: tabular-nums; }
.card__dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 0 0 1.3rem;
  padding: 1rem 0; border-block: 1px solid rgb(255 253 248 / .2);
}
.card__dl dt, .card__k {
  margin: 0 0 .3rem; font-size: .64rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: #bdb7c6;
}
.card__dl dd { margin: 0; font-size: 1rem; font-weight: 600; }
.card__k { margin-top: 0; }
.card__items { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.card__items:empty::before { content: "\2014"; color: #bdb7c6; font-weight: 400; }

.btn--send { background: #0e7d40; border-color: #0e7d40; color: var(--white); }
.btn--send:hover { background: #0b6733; border-color: #0b6733; }
.fine--wa { max-width: 42ch; }

/* The planner is taller than a screen, and a mandatory snap fights any panel
   that overflows: you get trapped and pushed back. Proximity still snaps the
   rooms, which is the effect worth having, without holding you hostage in
   the one panel that has to scroll. */
.reel { scroll-snap-type: y proximity; }
.p--book { min-height: auto; justify-content: flex-start; }