/* -------- Base -------- */
:root{
  --bg-light: #F3F6EF;
  --fg-light: #1E3635;
  --bg-dark: #0E2A24;
  --fg-dark: #EAF2EA;
  --accent:  #D7F550;
  --gap: clamp(16px, 3vw, 28px);

  /* PNG is at repo root */
  --dark-bg-image: url("./background.png");
}
*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.25;
  color:var(--fg-light);
  background:var(--bg-light);
  overflow:hidden; /* no scrolling */
}

a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* -------- Layout -------- */
.stage{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows: 1fr auto;
  place-items:center;
  padding: env(safe-area-inset-top) var(--gap) calc(env(safe-area-inset-bottom) + var(--gap));
}

/* -------- Dark PNG Background -------- */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;                        /* hidden in light */
  transition: opacity .35s ease;
  background: center center / cover no-repeat var(--dark-bg-image), var(--bg-dark);
}
.theme-dark .bg{ opacity:1; }

/* -------- Brand -------- */
.brand{
  display:grid; place-items:center; gap: clamp(20px, 3.6vw, 28px);
  transform: translateY(-6vh);
  text-align:center; user-select:none;
}
.logo-wrap{ position: relative; display:inline-block; }
.logo{ width: min(56vw, 520px); height:auto; }

/* Lozenge toggle hit area — no hover glow */
.lozenge-hit{
  position:absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 34%; height: 78%;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.lozenge-hit:hover,
.lozenge-hit:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Tagline + accent underline */
.tagline{
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing:.02em;
  position:relative; margin:0; padding-bottom: clamp(6px, 1.2vw, 8px);
}
.tag-underline{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width: clamp(200px, 42vw, 460px); height: 2px; background: var(--accent);
  border-radius: 999px; opacity:.85;
}

/* -------- Contact -------- */
.contact{ position:absolute; left:50%; bottom: clamp(78px, 12vh, 140px); transform: translateX(-50%); }
.email{
  display:inline-block; font-size: clamp(14px, 1.8vw, 18px); letter-spacing:.02em;
  padding:.25rem .4rem; border-radius:8px; transition: transform .2s ease, text-shadow .2s ease;
}
.email:hover{ transform: translateY(-1px); text-shadow: 0 0 8px rgba(215,245,80,.25); }

/* -------- Footer -------- */
.legal{
  position:absolute; left: clamp(10px, 2vw, 24px); bottom: clamp(10px, 2vh, 20px);
  font-size: clamp(12px, 1.5vw, 14px); opacity:.8;
}

/* -------- Themes -------- */
.theme-dark body{ background: var(--bg-dark); color: var(--fg-dark); }
.theme-dark .tagline{ color: #fff; }
.theme-dark .tag-underline{ opacity:.9; }

/* We handle logo swap in JS now; remove any previous .theme-*.logo content rules */

/* -------- Small screens -------- */
@media (max-width: 480px){
  .brand{ transform: translateY(-4vh); }
  .contact{ bottom: clamp(70px, 14vh, 120px); }
}