/* css-a25 — Luxury static template (WCAG 2.2 AA) */
/* Palette (swap as needed) */
:root{
  --bg:#000000;
  --panel:#0a0a0a;
  --text:#cccccc;
  --muted:#999999;
  --headings:#b3b3b3;
  --accent:#ff9900;
  --accent-hover:#ffff33;
  --borders:#1f1f1f;

  --radius:16px;
  --shadow:0 10px 30px rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.04) inset;

  --font-body: Verdana, Arial, Helvetica, sans-serif;
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-300:.95rem;
  --fs-400:1rem;
  --fs-500:clamp(1.1rem,2.5vw,1.25rem);
  --fs-600:clamp(1.4rem,3vw,1.6rem);
  --fs-700:clamp(1.8rem,4vw,2.2rem);

  --container:min(1100px,92vw);
  --gap:clamp(1rem,2.5vw,1.5rem);
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-400); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent); text-decoration:none}
a:hover, a:focus-visible{color:var(--accent-hover); text-decoration:underline; outline:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
img{max-width:100%; height:auto; display:block}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#111; padding:.5rem .75rem; border-radius:.5rem; z-index:1000}

.container{width:var(--container); margin-inline:auto; padding:clamp(1rem,3vw,2rem)}
.hero{
  border:1px solid var(--borders); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow);
  padding:clamp(1rem,3.5vw,2rem); margin-top:1rem;
}
h1,h2,h3{font-family:var(--font-head); color:var(--headings); margin:0 0 .6rem 0}
h1{font-size:var(--fs-700)}
h2{font-size:var(--fs-600)}
h3{font-size:var(--fs-500)}
p{margin:0 0 1em 0}

.lead{color:var(--muted)}
.cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  padding:.65rem 1rem; border-radius:12px; cursor:pointer; font-weight:600; text-decoration:none;
}
.btn:hover{background:rgba(255,153,0,.08)}
.btn.outline{background:transparent; color:var(--accent); border:1px solid var(--accent)}

.card{
  border:1px solid var(--borders); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow);
  padding:clamp(1rem,2.5vw,1.4rem); margin-top:var(--gap);
}

.grid{display:grid; gap:var(--gap)}
@media(min-width:900px){
  .cols-3{grid-template-columns:repeat(3,1fr)}
}

ul.list{padding-left:1.1rem; margin:0}
ul.list li{margin:.6rem 0; color:var(--text)}
.note{border:1px dashed var(--borders); border-radius:12px; padding:1rem}

.small{font-size:var(--fs-300); color:var(--muted)}
footer{color:var(--muted); font-size:var(--fs-300); padding:2rem 0}

/* Optional: rounded corners for media inside cards */
.card img{border-radius:12px}