:root {
  --ls-lilac: #9670C5;
  --ls-lavender: #E9DDF8;
  --ls-pink: #F5DCEB;
  --ls-blue: #DCEBFA;
  --ls-milk: #FAF7F5;
  --ls-purple: #49345F;
  --ls-muted: #65556E;
  --ls-glass: linear-gradient(145deg, #ffffffed, #f9f3ffbe);
  --ls-edge: #ffffffed;
  --ls-line: #d9c9e6;
  --ls-depth: inset 0 1px 0 #fff, 0 2px 5px #49345f0b, 0 16px 36px #49345f18;
  --ls-radius: 24px;
  --ls-blur: 14px;
  --accent: var(--ls-lilac);
  --dark: var(--ls-purple);
  --muted: var(--ls-muted);
  --paper: var(--ls-milk);
  --line: var(--ls-line);
  --bg: var(--ls-milk);
}
body { background: var(--ls-milk); }
:focus-visible { outline: 2px solid var(--ls-purple); outline-offset: 3px; }
.ls-site header, .ls-admin header {
  background: #fbf7fdeF;
  border-bottom-color: #fff;
  box-shadow: 0 5px 22px #49345f0e;
}
.ls-site header, .mobile-menu-links, .ls-site .hero-note, .ls-site .cal {
  -webkit-backdrop-filter: blur(var(--ls-blur));
  backdrop-filter: blur(var(--ls-blur));
}
.ls-site .brand span, .ls-admin .logo span { color: #795398; }
.ls-site .eyebrow, .ls-admin .eyebrow { color: #754b94; }
.ls-site nav { gap: clamp(12px, 1.8vw, 28px); }
.ls-site nav a { padding-block: 8px; color: var(--ls-muted); }
.ls-site nav a:hover { color: var(--ls-purple); }
.ls-site .mobile-menu-links, .ls-site .mobile-menu summary {
  background: var(--ls-glass);
  border: 1px solid var(--ls-edge);
  box-shadow: var(--ls-depth);
}
.ls-site .mobile-menu-links { background-color: var(--ls-milk); }
.ls-site .button, .ls-site .nav-cta, .ls-admin .action.primary {
  background: linear-gradient(155deg, #765396, var(--ls-purple));
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #ffffff55, 0 5px 12px #49345f26;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ls-site .button:hover, .ls-site .nav-cta:hover, .ls-admin .action.primary:hover {
  background: linear-gradient(155deg, #805ba2, #53376d);
  box-shadow: inset 0 1px 0 #ffffff77, 0 7px 16px #49345f36;
}
.ls-site .button:active, .ls-site .nav-cta:active, .ls-admin .action.primary:active { transform: translateY(1px); }
.ls-site main { background: radial-gradient(ellipse at 80% 3%, #e9ddf89c, transparent 34rem); }
.ls-site section[id] { scroll-margin-top: 86px; }
.ls-site .hero { gap: clamp(24px, 4.5vw, 60px); }
.ls-site .hero-image { border-radius: var(--ls-radius); box-shadow: var(--ls-depth); }
.ls-site .hero-note {
  right: auto;
  max-width: calc(100% - 36px);
  border: 1px solid var(--ls-edge);
  border-radius: 14px;
  color: var(--ls-purple);
  background: #faf7f5e0;
}
.ls-site h2 { color: var(--ls-purple); }
.ls-site #portfolio, .ls-site #albumList {
  padding-block: clamp(58px, 7.4vw, 108px);
}
.ls-site #portfolio {
  background: radial-gradient(ellipse at 98% 12%, #f5dceb82, transparent 64%);
  border-top: 1px solid var(--ls-line);
}
.ls-site #sports {
  padding-block: clamp(58px, 7.4vw, 108px);
  background: linear-gradient(125deg, #392749, var(--ls-purple) 58%, #695080);
}
.ls-site #sports h2 { color: var(--ls-milk); }
.ls-site #sports .eyebrow, .ls-site #sports .section-head p { color: var(--ls-lavender); }
.ls-site #about {
  padding-block: clamp(48px, 6.8vw, 98px);
  background: linear-gradient(135deg, #dcebfaa6, var(--ls-milk) 66%);
}
.ls-site .about {
  padding: clamp(20px, 4vw, 52px);
  border: 1px solid var(--ls-edge);
  border-radius: var(--ls-radius);
  background: var(--ls-glass);
  box-shadow: var(--ls-depth);
}
.ls-site .about-mark { color: var(--ls-purple); font-size: clamp(38px, 5.5vw, 76px); }
.ls-site #booking {
  padding-block: clamp(52px, 7vw, 100px);
  background: linear-gradient(125deg, var(--ls-lavender), #f9ebf3 64%, var(--ls-blue));
}
.ls-site .cal, .ls-site .ls-album-card, .ls-admin .work-calendar,
.ls-admin .notice, .ls-admin .card, .ls-admin .bk {
  border: 1px solid var(--ls-edge);
  border-radius: var(--ls-radius);
  background: var(--ls-glass);
  box-shadow: var(--ls-depth);
}
.ls-site .cal { min-width: 0; padding: clamp(16px, 3vw, 30px); }
.ls-site .cal input, .ls-site .cal select, .ls-site .cal textarea {
  border-radius: 12px;
  border-color: var(--ls-line);
}
.ls-site #calDays button, .ls-site .cal-slots button { border-radius: 8px; }
.ls-site #calDays button.on { background: var(--ls-purple); }
.ls-site #bookingPrice { background: linear-gradient(135deg, #f5eafa, #e9ddf8); }
.ls-site #albumList {
  background: radial-gradient(ellipse at 96% 20%, #dcebfaa8, transparent 68%);
  border-bottom: 1px solid var(--ls-line);
}
.ls-site #albumList > p { max-width: 66ch; color: var(--ls-muted); line-height: 1.6; }
.ls-site .dynamic-photo, .ls-site .sports-card {
  border: 1px solid #ffffff99;
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-depth);
}
.ls-site .sports-card img { opacity: 1; }
.ls-site .sports-card > div {
  max-width: calc(100% - 24px);
  left: 12px;
  bottom: 12px;
  padding: 7px 11px;
  border-radius: 10px;
  color: white;
  background: #24182ccb;
  overflow-wrap: anywhere;
}
.ls-site .dynamic-photo, .ls-site .sports-card, .ls-site .ls-album-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.ls-site .ls-album-card:hover { transform: none; box-shadow: var(--ls-depth); }
.ls-site .ls-album-info h3 { overflow-wrap: anywhere; }
.ls-site #albumViewer { border: 1px solid var(--ls-edge); border-radius: var(--ls-radius); box-shadow: var(--ls-depth); }
.ls-admin main { background: radial-gradient(ellipse at 92% 0, #e9ddf889, transparent 42rem); }
.ls-admin .bk { border-left: 5px solid var(--ls-line); }
.ls-admin .bk.pending { border-left-color: #b58727; }
.ls-admin .bk.confirmed { border-left-color: #568264; }
.ls-admin .bk.rejected, .ls-admin .bk.cancelled { border-left-color: #b8665a; }
.ls-admin .bk .info { overflow-wrap: anywhere; }
.ls-admin .work-toolbar { overflow-wrap: anywhere; }
.ls-admin .work-toolbar button[aria-pressed="true"] { background: var(--ls-purple); color: white; border-color: var(--ls-purple); }
.ls-admin .action, .ls-admin .work-toolbar button, .ls-admin .work-toolbar input { border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .ls-site .dynamic-photo:hover, .ls-site .sports-card:hover, .ls-site .ls-album-card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 white, 0 16px 36px #49345f31;
  }
}
.photo-reveal-pending { opacity: 0 !important; }
.photo-reveal-in {
  animation: ls-photo-in 850ms cubic-bezier(.22,.61,.36,1) var(--ls-reveal-delay, 0ms) both;
}
.photo-reveal-out {
  animation: ls-photo-out 340ms ease-out both;
}
@keyframes ls-photo-out {
  from { opacity: 1; }
  to { opacity: .2; filter: blur(3px); transform: translateY(-6px) scale(.985); }
}
@keyframes ls-photo-in {
  from { opacity: 0; filter: blur(var(--ls-reveal-blur, 10px)); transform: translateY(var(--ls-reveal-y, 20px)) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@media (max-width: 760px) {
  :root { --ls-radius: 17px; --ls-blur: 6px; --ls-reveal-blur: 5px; --ls-reveal-y: 10px; }
  .ls-site .hero-image { height: clamp(270px, 95vw, 440px); }
  .ls-site .photo-reveal-in { animation-duration: 720ms; }
  .ls-site .sports-card > div { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ls-site *, .ls-site *::before, .ls-site *::after,
  .ls-admin *, .ls-admin *::before, .ls-admin *::after {
    animation: none !important;
    transition: none !important;
  }
  .ls-site .dynamic-photo:hover, .ls-site .sports-card:hover, .ls-site .ls-album-card:hover,
  .ls-site .dynamic-photo:hover img, .ls-site .sports-card:hover img, .ls-site .button:hover { transform: none; }
  .ls-site .photo-reveal-pending { opacity: 1 !important; }
}

/* Public pages share these tones beneath the glass surfaces. */
html:not(.account-page) .ls-site {
  --ls-public-tint: linear-gradient(150deg, #ffffffbf, #ffffff55 65%, #fff9);
  --ls-public-highlight: inset 0 1px 0 #fffffff2, inset 0 -1px 0 #ffffff66,
    0 3px 7px #49345f10, 0 14px 32px #49345f1c;
  --ls-public-blur: 12px;
}
html:not(.account-page) .ls-site main {
  background:
    radial-gradient(ellipse 43% 500px at 76% 170px, var(--ls-lavender), transparent 100%),
    radial-gradient(ellipse 40% 440px at 8% 200px, #f5dceb9c, transparent 100%),
    radial-gradient(ellipse 32% 440px at 100% 560px, var(--ls-blue), transparent 100%);
}
html:not(.account-page) .ls-site #portfolio {
  background:
    radial-gradient(ellipse at 12% 32%, #e9ddf8ed, transparent 69%),
    radial-gradient(ellipse at 92% 58%, #f5dcebc2, transparent 68%);
}
html:not(.account-page) .ls-site #sports {
  background:
    radial-gradient(ellipse at 92% 36%, #ccdff5, transparent 75%),
    radial-gradient(ellipse at 14% 90%, var(--ls-lavender), transparent 72%),
    linear-gradient(180deg, var(--ls-milk), #edf4fd 27%, #e6effa 78%, var(--ls-milk));
  color: var(--ls-purple);
}
html:not(.account-page) .ls-site #sports h2,
html:not(.account-page) .ls-site #sports .eyebrow,
html:not(.account-page) .ls-site #sports .section-head p { color: var(--ls-purple); }
html:not(.account-page) .ls-site #about {
  background:
    radial-gradient(ellipse at 26% 53%, var(--ls-pink), transparent 73%),
    radial-gradient(ellipse at 92% 52%, #f1e2f8, transparent 70%);
}
html:not(.account-page) .ls-site #booking {
  background:
    radial-gradient(ellipse at 19% 49%, #dcc7f2, transparent 71%),
    radial-gradient(ellipse at 87% 70%, var(--ls-blue), transparent 65%),
    linear-gradient(180deg, var(--ls-milk), #f5eafa 30%, #f0e9f9 78%, var(--ls-milk));
}
html:not(.account-page) .ls-site #albumList {
  background:
    radial-gradient(ellipse at 93% 27%, var(--ls-blue), transparent 67%),
    radial-gradient(ellipse at 9% 63%, #f5dceba8, transparent 65%);
}
html:not(.account-page) .ls-site :is(header, .mobile-menu-links, .hero-note, .about, .cal, .ls-album-card) {
  background: #faf7fc;
  box-shadow: var(--ls-public-highlight);
}
html:not(.account-page) .ls-site .cal :is(input, select, textarea) { background-color: #fff; }
html:not(.account-page) .ls-site .cal input[type="checkbox"] { accent-color: var(--ls-purple); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.account-page) .ls-site :is(header, .mobile-menu-links, .hero-note, .about, .cal) {
    background: var(--ls-public-tint);
    -webkit-backdrop-filter: blur(var(--ls-public-blur)) saturate(1.22);
    backdrop-filter: blur(var(--ls-public-blur)) saturate(1.22);
  }
  html:not(.account-page) .ls-site header {
    background: linear-gradient(170deg, #fff9ffed, #f5ecfcec);
  }
  html:not(.account-page) .ls-site .hero-note,
  html:not(.account-page) .ls-site .mobile-menu-links {
    background: linear-gradient(145deg, #fffdf9f5, #f6eefaf0);
  }
  html:not(.account-page) .ls-site .ls-album-card { background: var(--ls-public-tint); }
}
@media (hover: hover) and (pointer: fine) {
  html:not(.account-page) .ls-site :is(.button, .nav-cta):hover {
    box-shadow: inset 0 1px 0 #ffffff99, 0 7px 18px #9670c55e;
  }
  html:not(.account-page) .ls-site .ls-album-card:hover {
    box-shadow: inset 0 1px 0 white, 0 15px 30px #49345f2e;
  }
}
@media (max-width: 760px) {
  html:not(.account-page) .ls-site { --ls-public-blur: 5px; }
}

/* Keep navigation legible even while dark photographs pass underneath. */
html:not(.account-page) .ls-site header :is(nav a:not(.nav-cta), .desktop-header-actions > a:not(.nav-cta), .mobile-menu a, .mobile-menu summary) {
  color: var(--ls-purple);
  font-weight: 600;
  border-radius: 7px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
html:not(.account-page) .ls-site header .brand span { color: #684285; }
html:not(.account-page) .ls-site header :is(nav a:not(.nav-cta), .mobile-menu-links a)[aria-current="location"] {
  background-color: #e8d9f6;
  box-shadow: inset 0 -2px 0 #795398;
}
html:not(.account-page) .ls-site header :is(nav a:not(.nav-cta), .desktop-header-actions > a:not(.nav-cta), .mobile-menu a, .mobile-menu summary):is(:hover, :focus-visible),
html:not(.account-page) .ls-site header .mobile-menu[open] > summary {
  background-color: #dfccee;
}
html:not(.account-page) .ls-site header .nav-cta:hover {
  background: linear-gradient(155deg, #70498e, #49345f);
  box-shadow: inset 0 1px 0 #ffffff99, 0 7px 18px #9670c57a;
}

html:not(.account-page) .ls-site header .mobile-menu summary:is(:hover, :focus-visible),
html:not(.account-page) .ls-site header .mobile-menu[open] > summary {
  background: linear-gradient(145deg, #f2e8fb, #dfccee);
}

.ls-site header nav { align-items: center; gap: clamp(10px, 1.3vw, 22px); }
.ls-site header .desktop-header-actions .nav-cta { color: #fff; white-space: nowrap; }
.ls-site header :is(nav a, .mobile-menu-links a)[aria-current="page"] {
  color: var(--ls-purple);
  background: #e8d9f6;
  border-radius: 7px;
  box-shadow: inset 0 -2px 0 #795398;
}
.ls-site #albumList h1 { color: var(--ls-purple); }