/* eGlitz theme — change any value here to recolor the whole site. */
/* ACTIVE SCHEME: Gold. */
:root{
  /* Brand gradient stops (edit these to restyle the "metallic" gradient) */
  --gold-1:#DAA520;
  --gold-2:#F2CA50;
  --gold-3:#B08C10;
  /* Promo-poster brand palette (poster_studio reads these at generation time):
     the poster GOLD tracks --gold-2 above; edit these to restyle the posters'
     dark background and text without touching the website itself. */
  --poster-bg:#090909;
  --poster-text:#e9e6e4;
  --gold-metallic-color: 218 165 32;   /* #DAA520 — catalog filter border */
  /* Palette (R G B channels — used as rgb(var(--x)/<alpha>)) */
  --surface-tint: 246 190 59;   /* #f6be3b */
  --surface-container-lowest: 14 14 14;   /* #0e0e0e */
  --on-surface: 229 226 225;   /* #e5e2e1 */
  --on-error: 105 0 5;   /* #690005 */
  --on-secondary-fixed-variant: 87 69 0;   /* #574500 */
  --tertiary-fixed: 255 224 132;   /* #ffe084 */
  --on-secondary-fixed: 36 26 0;   /* #241a00 */
  --tertiary-fixed-dim: 226 196 104;   /* #e2c468 */
  --primary-fixed-dim: 246 190 59;   /* #f6be3b */
  --on-tertiary-container: 80 63 0;   /* #503f00 */
  --on-secondary-container: 52 40 0;   /* #342800 */
  --on-primary: 64 45 0;   /* #402d00 */
  --background: 19 19 19;   /* #131313 */
  --outline-variant: 77 70 53;   /* #4D4635 */
  --primary-fixed: 255 222 160;   /* #ffdea0 */
  --surface-container-highest: 53 53 52;   /* #353534 */
  --inverse-on-surface: 49 48 48;   /* #313030 */
  --on-tertiary-fixed-variant: 87 69 0;   /* #574500 */
  --surface: 19 19 19;   /* #131313 */
  --inverse-primary: 121 89 0;   /* #795900 */
  --surface-container: 32 32 31;   /* #20201F */
  --primary-container: 218 165 32;   /* #daa520 */
  --secondary: 233 195 73;   /* #e9c349 */
  --surface-bright: 57 57 57;   /* #393939 */
  --on-tertiary: 60 47 0;   /* #3c2f00 */
  --error: 255 180 171;   /* #ffb4ab */
  --surface-container-low: 28 27 27;   /* #1c1b1b */
  --secondary-fixed: 255 224 136;   /* #ffe088 */
  --on-background: 229 226 225;   /* #e5e2e1 */
  --primary: 249 192 61;   /* #f9c03d */
  --on-primary-container: 85 61 0;   /* #553d00 */
  --on-error-container: 255 218 214;   /* #ffdad6 */
  --surface-variant: 53 53 52;   /* #353534 */
  --outline: 156 143 122;   /* #9c8f7a */
  --surface-dim: 19 19 19;   /* #131313 */
  --on-primary-fixed-variant: 92 67 0;   /* #5c4300 */
  --on-surface-variant: 211 197 174;   /* #d3c5ae */
  --on-secondary: 60 47 0;   /* #3c2f00 */
  --tertiary: 228 198 106;   /* #e4c66a */
  --tertiary-container: 199 171 82;   /* #c7ab52 */
  --secondary-container: 175 141 17;   /* #af8d11 */
  --secondary-fixed-dim: 233 195 73;   /* #e9c349 */
  --surface-container-high: 42 42 42;   /* #2a2a2a */
  --on-tertiary-fixed: 35 27 0;   /* #231b00 */
  --on-primary-fixed: 38 25 0;   /* #261900 */
  --error-container: 147 0 10;   /* #93000a */
  --inverse-surface: 229 226 225;   /* #e5e2e1 */
}

.bg-gold-metallic,.bg-gold-metallic-gradient,.gold-gradient-bg{background:linear-gradient(135deg,var(--gold-1) 0%,var(--gold-2) 50%,var(--gold-3) 100%);}
.text-gradient-gold,.text-gold-gradient,.gold-gradient-text{background:linear-gradient(135deg,var(--gold-1) 0%,var(--gold-2) 50%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* Shared compact footer — one visual system across every public page. */
.site-footer{width:100%;padding:28px 0 18px;border-top:1px solid rgb(var(--outline-variant)/.28);background:rgb(var(--surface-container-lowest));color:rgb(var(--on-surface-variant));}
.site-footer__inner{width:100%;max-width:1280px;margin:0 auto;padding:0 64px;box-sizing:border-box;}
.site-footer__grid{display:grid;grid-template-columns:3fr 2fr 2fr 5fr;column-gap:24px;row-gap:24px;}
.site-footer__name,.site-footer__heading{margin:0 0 12px;color:rgb(var(--primary));font-size:13px;line-height:1.25;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.site-footer__name{text-transform:none;letter-spacing:0;font-size:14px;}
.site-footer__description{max-width:250px;margin:0 0 14px;font-size:13px;line-height:1.55;}
.site-footer__links,.site-footer__legal-links{display:grid;margin:0;padding:0;list-style:none;column-gap:24px;row-gap:7px;}
.site-footer__legal-links{grid-template-columns:repeat(2,minmax(0,1fr));}
.site-footer__link{color:rgb(var(--on-surface-variant));font-size:13px;line-height:1.45;text-decoration:none;transition:color .2s ease;}
.site-footer__link:hover,.site-footer__link:focus-visible{color:rgb(var(--primary));}
.site-footer__socials{display:flex;gap:10px;}
.site-footer__social{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid rgb(var(--primary)/.22);border-radius:6px;color:rgb(var(--primary));transition:border-color .2s ease,color .2s ease;}
.site-footer__social:hover,.site-footer__social:focus-visible{border-color:rgb(var(--primary));color:rgb(var(--primary));}
.site-footer__social svg{width:18px;height:18px;}
.site-footer__social .material-symbols-outlined{font-size:20px;line-height:1;}
.site-footer__bottom{margin-top:22px;padding-top:12px;border-top:1px solid rgb(var(--primary)/.1);}
.site-footer__copyright{margin:0;color:rgb(var(--on-surface-variant)/.62);font-size:10px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;}
@media (max-width:1024px){.site-footer__inner{padding-right:44px;padding-left:44px;}}
@media (max-width:767px){.site-footer__inner{padding-right:24px;padding-left:24px;}.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}.site-footer__brand,.site-footer__legal{grid-column:span 2;}}
@media (max-width:480px){.site-footer{padding-top:24px}.site-footer__inner{padding-right:16px;padding-left:16px}.site-footer__legal-links{grid-template-columns:1fr}.site-footer__bottom{text-align:center}}

/* Form hCaptcha rendered at 60% (zoom shrinks the widget AND its box — no cropping). */
.h-captcha{zoom:.6;}

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVENESS — site-wide baseline.
   Loaded after tw.css on every page, so these override the flat (non-responsive)
   tw.css utilities. Reflows spacing + typography for touch devices at 1024/768/
   640/480. Page-specific <style> blocks load later still and refine on top.
   Desktop (≥1025px) is unchanged.
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .px-margin-desktop{ padding-left:44px; padding-right:44px; }
  .py-stack-lg{ padding-top:56px; padding-bottom:56px; }
  .text-display-lg{ font-size:44px; }
}
@media (max-width:768px){
  .px-margin-desktop{ padding-left:30px; padding-right:30px; }
  .py-stack-lg{ padding-top:48px; padding-bottom:48px; }
  .mb-stack-lg{ margin-bottom:44px; }
  .text-display-lg{ font-size:38px; line-height:1.12; }
  .text-headline-lg{ font-size:28px; }
}
@media (max-width:640px){
  .px-margin-desktop{ padding-left:20px; padding-right:20px; }
  .py-stack-lg{ padding-top:44px; padding-bottom:44px; }
  .mb-stack-lg{ margin-bottom:36px; }
  .text-display-lg{ font-size:31px; line-height:1.15; }
  .text-headline-lg{ font-size:24px; line-height:1.22; }
  .text-headline-md{ font-size:21px; line-height:1.25; }
  /* comfortable, full-width primary CTAs with ≥48px tap height on phones */
  a.bg-gold-metallic, a.bg-primary.rounded-md, a.bg-on-primary{ min-height:48px; }
}
@media (max-width:480px){
  .px-margin-desktop{ padding-left:16px; padding-right:16px; }
  .text-display-lg{ font-size:28px; }
  .text-headline-lg{ font-size:22px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   "LIVING GOLD" — the signature eGlitz logo animation (site-wide).
   Warm-gold light is masked to the logo's own shape and sweeps left→right (from the
   crescent into the "Glitz" script); a calm breathing glow + a few drifting gold
   particles near the crescent. GPU-friendly (transform/opacity/filter only).
   Structure is built by assets/js/logo-anim.js which wraps the nav logo in .eg-logo.
══════════════════════════════════════════════════════════════════════════════ */
.eg-logo{ position:relative; display:inline-flex; align-items:center; height:100%;
  --eg-mask:url(../images/logo.png); }
.eg-logo img{ display:block; animation: egFadeIn 1s ease both; will-change:opacity, filter; }
@media (prefers-reduced-motion: no-preference){
  .eg-logo img{ animation: egFadeIn 1s ease both, egBreath 10s ease-in-out 1.6s infinite; }
}
@keyframes egFadeIn{ from{ opacity:0; transform:translateY(2px) scale(.99); } to{ opacity:1; transform:none; } }
@keyframes egBreath{ 0%,100%{ filter: drop-shadow(0 0 5px rgba(218,165,32,.20)); }
                     50%{ filter: drop-shadow(0 0 11px rgba(240,205,130,.36)); } }
/* the travelling reflection — warm amber band, clipped to the logo shape */
.eg-shine{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:screen;
  -webkit-mask:var(--eg-mask) no-repeat center / contain; mask:var(--eg-mask) no-repeat center / contain;
  background:linear-gradient(100deg, transparent 42%, rgba(240,205,130,.5) 49%, rgba(255,236,190,.72) 51%, rgba(240,205,130,.5) 53%, transparent 60%);
  background-size:250% 100%; background-repeat:no-repeat;
  animation: egShine 11s ease-in-out 1.2s infinite; will-change:background-position, opacity; }
@keyframes egShine{
  0%{ background-position:-60% 0; opacity:0; }
  3%{ opacity:1; }
  22%{ background-position:200% 0; opacity:1; }
  26%,100%{ background-position:200% 0; opacity:0; }
}
/* accessibility — keep only a single, subtle reflection; no motion loops */
@media (prefers-reduced-motion: reduce){
  .eg-logo img{ animation: egFadeIn 1s ease both; }
  .eg-shine{ animation: egShine 3.6s ease-out .6s 1; }
}