:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.85rem);
  --text-sm:clamp(.85rem,.8rem + .3vw,.95rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.1rem);
  --text-lg:clamp(1.1rem,1rem + .6vw,1.35rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.25rem);

  --font-display:'Cormorant','Georgia',serif;
  --font-body:'Switzer','Helvetica Neue',sans-serif;
}

/* LIGHT (default) — warm cream, sage green, charcoal to match the mark */
:root,[data-theme="light"]{
  --color-bg:#f4f1e9;
  --color-panel:#fbfaf5;
  --color-text:#2c2a24;
  --color-text-muted:#6f6c60;
  --color-text-faint:#a19d90;
  --color-primary:#6f7a55;   /* ash-leaf sage */
  --color-primary-soft:#8f9873;
  --color-border:#ddd8c9;
  --logo-frame:transparent;
  --logo-shadow:0 24px 60px rgba(44,42,36,.14);
}
[data-theme="dark"]{
  --color-bg:#1a1915;
  --color-panel:#f6f3ea;   /* keep logo on light card */
  --color-text:#e7e3d6;
  --color-text-muted:#9c988a;
  --color-text-faint:#6b6759;
  --color-primary:#a7b184;
  --color-primary-soft:#8d9670;
  --color-border:#33312a;
  --logo-frame:#f6f3ea;
  --logo-shadow:0 30px 70px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#1a1915;--color-panel:#f6f3ea;--color-text:#e7e3d6;--color-text-muted:#9c988a;
  --color-text-faint:#6b6759;--color-primary:#a7b184;--color-primary-soft:#8d9670;
  --color-border:#33312a;--logo-frame:#f6f3ea;--logo-shadow:0 30px 70px rgba(0,0,0,.55);
}}

.theme-toggle{
  position:fixed;top:clamp(1rem,3vw,1.75rem);right:clamp(1rem,3vw,1.75rem);z-index:10;
  width:42px;height:42px;display:grid;place-items:center;border-radius:9999px;
  color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-panel);
}
.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary-soft)}

.stage{
  position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;
  padding:clamp(2rem,6vw,5rem) clamp(1.25rem,5vw,3rem);
}

/* soft radial glow behind the mark */
.ember{
  position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  width:min(78vw,720px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in oklab,var(--color-primary) 22%,transparent),transparent 62%);
  filter:blur(30px);opacity:.5;
}

.content{position:relative;display:flex;flex-direction:column;align-items:center;max-width:640px}

.mark{
  display:block;width:clamp(210px,42vw,340px);margin-bottom:clamp(1.5rem,4vw,2.75rem);
  background:var(--logo-frame);border-radius:9999px;
  box-shadow:var(--logo-shadow);
  animation:rise .9s cubic-bezier(.16,1,.3,1) both;
}
.mark img{border-radius:9999px}

.title{
  font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);
  letter-spacing:.22em;text-transform:uppercase;color:var(--color-text);
  padding-left:.22em;margin-bottom:1rem;animation:rise .9s .08s cubic-bezier(.16,1,.3,1) both;
}
.rule{
  width:56px;height:1px;background:var(--color-primary-soft);margin:0 0 1.5rem;
  animation:rise .9s .14s cubic-bezier(.16,1,.3,1) both;
}
.tagline{
  font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:var(--color-text-muted);line-height:1.55;max-width:34ch;margin-bottom:2.5rem;
  animation:rise .9s .2s cubic-bezier(.16,1,.3,1) both;
}
.contact{
  font-family:var(--font-body);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-primary);text-decoration:none;position:relative;padding-bottom:5px;
  animation:rise .9s .26s cubic-bezier(.16,1,.3,1) both;
}
.contact::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--color-primary);transition:width .3s cubic-bezier(.16,1,.3,1),left .3s cubic-bezier(.16,1,.3,1)}
.contact:hover{color:var(--color-primary-soft)}
.contact:hover::after{width:100%;left:0}

.foot{
  position:absolute;bottom:clamp(1.25rem,4vw,2.25rem);left:0;right:0;
  display:flex;gap:.6rem;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-faint);
}
.foot .sep{opacity:.6}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}