/* =============================================================================
   DARK PLATE + AUM
   Loaded after style.css so .dk can override :root.

   The site already spoke in two registers: parchment sections with brown ink,
   and deep walnut ones with champagne. Dark mode is that second register
   applied to the whole page, so most of this file is re-pointing tokens that
   already existed. Only the rules that baked a light colour in directly need
   an override of their own.
   ========================================================================== */

:root { --ember:#FF7A18; --ember-hot:#FFD07A; }

/* -----------------------------------------------------------------------------
   1. THE DARK PLATE
   Tokens carrying ink invert. Tokens that already describe a dark surface --
   walnut-deep, night, champagne, the --lt family -- are untouched, because the
   deep sections were always drawn with them.
   -------------------------------------------------------------------------- */
.dk {
  --parchment:#16110A; --ivory:#1E1811; --stone:#3B3226;
  --gold:#D9BA73; --gold-deep:#C39F55; --bronze:#A98A5E;
  --ink:#E9DEC8; --walnut:#F0E5CF; --olive:#9FA986; --muted:#B7A585; --bronze-ink:#D9BB7E;
  --shadow:0 24px 60px rgba(0,0,0,.55); --shadow-sm:0 10px 28px rgba(0,0,0,.45);
  --line:rgba(217,186,115,.22); --line-soft:rgba(217,186,115,.12); --line-gold:rgba(217,186,115,.42);
  /* the texture plates carry their stroke colour inside the encoded SVG */
  --geometry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='222' viewBox='0 0 128 222'%3E%3Cg fill='none' stroke='%23C6A25A' stroke-width='0.8'%3E%3Ccircle cx='0' cy='0' r='64'/%3E%3Ccircle cx='128' cy='0' r='64'/%3E%3Ccircle cx='64' cy='111' r='64'/%3E%3Ccircle cx='0' cy='222' r='64'/%3E%3Ccircle cx='128' cy='222' r='64'/%3E%3C/g%3E%3C/svg%3E");
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23D3B478' stroke-width='1.7'%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Ccircle cx='32' cy='23' r='9'/%3E%3Ccircle cx='32' cy='41' r='9'/%3E%3Ccircle cx='24.2' cy='27.5' r='9'/%3E%3Ccircle cx='39.8' cy='27.5' r='9'/%3E%3Ccircle cx='24.2' cy='36.5' r='9'/%3E%3Ccircle cx='39.8' cy='36.5' r='9'/%3E%3Ccircle cx='32' cy='32' r='18' opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
  --floret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23D3B478' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 38 C2 20 8 8 26 5 M2 38 C20 38 32 32 35 14'/%3E%3Cpath d='M26 5 c3 4 1 8 -4 9 c-1 -5 0 -8 4 -9 Z M35 14 c-4 3 -8 1 -9 -4 c5 -1 8 0 9 4 Z'/%3E%3Ccircle cx='9' cy='31' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- the rules that baked a light colour in ------------------------------- */
.dk body {
  background-color: #16110A;
  background-image:
    radial-gradient(1100px 640px at 50% -160px, rgba(164,123,51,.20), transparent 65%),
    radial-gradient(1000px 780px at 88% 12%,    rgba(138,145,115,.07), transparent 70%),
    radial-gradient(820px 700px at 6% 42%,      rgba(164,123,51,.10),  transparent 70%),
    radial-gradient(900px 720px at 78% 88%,     rgba(178,58,5,.07),    transparent 72%),
    linear-gradient(180deg, #1C1509 0%, #16110A 32%, #0F0B06 100%);
}
.dk .site-head { background: rgba(22,17,10,.92); box-shadow: 0 1px 0 rgba(217,186,115,.10) inset, 0 10px 30px rgba(0,0,0,.4); }
.dk .section-tint, .dk .section-sand {
  background: var(--fibres), radial-gradient(900px 500px at 50% 0%, rgba(164,123,51,.10), transparent 70%),
              linear-gradient(180deg, #1F1810, #1A140C);
  background-blend-mode: soft-light, normal, normal;
}
.dk .svc, .dk .step, .dk .quote, .dk .form-card {
  background: var(--fibres), linear-gradient(168deg, #241C12, #1C160E 55%, #17110A);
  box-shadow: 0 1px 0 rgba(217,186,115,.08) inset, 0 18px 44px rgba(0,0,0,.45);
}
.dk .svc:hover { border-color: rgba(217,186,115,.6); }
.dk .split-img  { box-shadow: 0 0 0 6px rgba(30,24,17,.9), var(--shadow); }
.dk .gal figure { box-shadow: 0 0 0 5px rgba(30,24,17,.9), var(--shadow-sm); }
.dk .split-img img, .dk .gal img { filter: sepia(.2) saturate(.9) contrast(.98) brightness(.9); }
.dk .field input, .dk .field select, .dk .field textarea { background: rgba(240,229,207,.06); color: var(--ink); }
.dk .field ::placeholder { color: rgba(183,165,133,.6); }
.dk .choice { background: rgba(240,229,207,.05); }
.dk .choice.sel { background: rgba(198,162,90,.16); color: var(--champagne); }
.dk .btn-ghost { background: rgba(240,229,207,.05); }
.dk .tag, .dk .rail-note { background: rgba(198,162,90,.10); }
.dk .nav a:hover, .dk .nav a.active { color: var(--champagne); }
.dk .btn-primary { background: linear-gradient(180deg, #6B4E2C, #4A3526 60%, #382919); }
@media (max-width: 720px) { .dk .nav { background: linear-gradient(180deg, #1C1509, #14100A); } }

.dk { scrollbar-color: #C39F55 #241C12; }
.dk ::-webkit-scrollbar-track { background: #241C12; }
.dk ::-webkit-scrollbar-thumb { border-color: #241C12; }

/* multiply over a dark ground erases the wordmark entirely */
.dk .emblem-lockup { mix-blend-mode: normal; }
.dk .emblem-medallion { filter: drop-shadow(0 22px 44px rgba(0,0,0,.6)) saturate(1.02); }
/* the ALIREN letters take their colour from #alirenGrad's stops, which are
   animated in style.css -- overriding fill here would freeze them */

/* the booking error carried its colours in a style attribute, where no theme
   could reach them; it lives here now so both plates can speak to it */
.form-error { color:#8C3A2B; background:rgba(140,58,43,.08); border:1px solid rgba(140,58,43,.3);
  border-radius:6px; padding:12px 14px; margin-bottom:14px; }
.dk .form-error { color:#F0A08C; background:rgba(240,160,140,.09); border-color:rgba(240,160,140,.3); }

/* -----------------------------------------------------------------------------
   2. THE TOGGLE, AND THE CHANGE ITSELF
   The switch is a view transition where the browser has one: it cross-fades
   the whole page for free, with no second copy of the document and no layer
   work of ours. Where it does not, the change simply happens.
   -------------------------------------------------------------------------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; }

.theme-toggle {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-gold); border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--bronze-ink);
  transition: color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.theme-toggle:hover, .theme-toggle:focus-visible {
  color: var(--ember); border-color: rgba(255,122,24,.55);
  box-shadow: 0 0 0 4px rgba(255,122,24,.10), 0 0 18px rgba(255,122,24,.35);
}
.theme-toggle svg { width: 19px; height: 19px; display: block; }
.theme-toggle .t-sun { display: none; }
.dk .theme-toggle .t-sun { display: block; }
.dk .theme-toggle .t-moon { display: none; }

/* -----------------------------------------------------------------------------
   3. THE AUM WATERMARKS
   Burnt into the paper rather than printed on it: the char spreads from the
   middle of the glyph outward, the ember rides the spreading edge, and what
   is left holds as a scorch -- warm, not black, so the page keeps its ember.
   -------------------------------------------------------------------------- */
.aum {
  --burn: 0; --heat: 0;
  position: absolute; z-index: 0; pointer-events: none;
  font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", serif;
  line-height: 1; color: #7A3A0E;
  opacity: calc(var(--burn) * var(--weight, .085));
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0%, #000 calc(var(--burn) * 92%),
    rgba(0,0,0,.4) calc(var(--burn) * 92% + 7%), transparent calc(var(--burn) * 92% + 17%));
  mask-image: radial-gradient(circle at 50% 55%, #000 0%, #000 calc(var(--burn) * 92%),
    rgba(0,0,0,.4) calc(var(--burn) * 92% + 7%), transparent calc(var(--burn) * 92% + 17%));
  text-shadow:
    0 0 calc(10px * var(--heat)) rgba(255,122,24, calc(.9 * var(--heat))),
    0 0 calc(26px * var(--heat)) rgba(255,80,0,   calc(.6 * var(--heat))),
    0 0 calc(58px * var(--heat)) rgba(178,58,5,   calc(.4 * var(--heat)));
  filter: url(#burnEdge);
  will-change: opacity;
}
/* the ones sitting behind a block of text keep well back from it */
.aum.behind { --weight: .05; }
.dk .aum { color: #FF8A2B; --weight: .13; }
.dk .aum.behind { --weight: .08; }

@media (prefers-reduced-motion: reduce) {
  .aum { --burn: 1; --heat: 0; filter: none; -webkit-mask-image: none; mask-image: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}