/* Aspen Alpine Arc — Foreground Theme v2 (NO background edits). */

:root{
  --text: rgba(248,250,255,.94);
  --muted: rgba(248,250,255,.78);
  --muted2: rgba(248,250,255,.62);
  --link: rgba(165,210,255,.98);
  --link2: rgba(120,185,255,1);
  --panel: rgba(10,12,16,.72);
  --panel2: rgba(10,12,16,.58);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);
  --shadow: 0 18px 60px rgba(0,0,0,.46);
  --shadow2: 0 10px 28px rgba(0,0,0,.34);
  --r: 18px;
  --max: 1120px;
  --pad: clamp(18px, 3.2vw, 44px);
  --gap: clamp(14px, 2.2vw, 22px);
  --h1: clamp(44px, 5.0vw, 64px);
  --h2: clamp(28px, 3.0vw, 40px);
  --h3: clamp(18px, 2.1vw, 22px);
  --base: clamp(15px, 1.2vw, 16.5px);
}

*{box-sizing:border-box}
html{ text-size-adjust:100% }
body{
  margin:0;
  color:var(--text);
  font: 500 var(--base)/1.62 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  letter-spacing:.01em;
  background: transparent !important; /* keep HUD background visible */
}

/* containers */
.wrap, main, .container{
  width:min(var(--max), calc(100% - 2*var(--pad)));
  margin:0 auto;
}
main{ padding: clamp(18px, 3vw, 28px) 0 54px; }

/* typography */
h1,h2,h3{ margin:0 0 .5em 0; letter-spacing:-.02em; }
h1{ font: 750 var(--h1)/1.02 ui-serif,Georgia,Times,serif; }
h2{ font: 750 var(--h2)/1.10 ui-serif,Georgia,Times,serif; margin-top: 28px; }
h3{ font: 750 var(--h3)/1.18 ui-sans-serif,system-ui; margin-top: 18px; }
p{ margin:.7em 0; color:var(--muted); max-width: 78ch; }
small,.small{ color:var(--muted2); }
ul{ margin:.6em 0 .6em 1.15em; color:var(--muted); }
li{ margin:.35em 0; }

/* links */
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link2); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
a:focus{ outline: none; box-shadow: 0 0 0 4px rgba(120,185,255,.18); border-radius: 10px; }

/* IMPORTANT: do NOT override generic layout classes like .row/.section with grid.
   That was causing “jumbled” layout. */

/* panels/cards (glass) */
.card, .panel, .box, .callout, .tile, .section-card, .glass{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(16px, 2.4vw, 26px);
}
.card>*+*, .panel>*+*, .box>*+*, .callout>*+*, .tile>*+*, .section-card>*+*, .glass>*+*{
  margin-top: 10px;
}

/* Make “lens” blocks readable when background is bright */
.card, .panel, .box, .callout, .tile, .section-card, .glass{
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* buttons */
button, .btn, a.btn, input[type="submit"]{
  appearance:none;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.08);
  color:var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.26);
}
button:hover, .btn:hover, a.btn:hover, input[type="submit"]:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  text-decoration:none;
}

/* forms */
label{ display:block; margin: 12px 0 6px; color:var(--muted); font-weight:800; }
input, textarea, select{
  width:100%;
  border-radius: 12px;
  border:1px solid var(--stroke2);
  background: rgba(8,10,14,.62);
  color:var(--text);
  padding: 10px 12px;
  outline:none;
}
textarea{ min-height: 108px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: rgba(120,185,255,.55);
  box-shadow: 0 0 0 4px rgba(120,185,255,.16);
}

/* footer */
footer, .footer{
  margin-top: 46px;
  padding: 28px 0 46px;
  border-top:1px solid var(--stroke);
  color:var(--muted2);
}