:root{
  --bg:#efe7fb;
  --ink:#222;
  --ink-muted:#444;
  --card:#fff;
  --border:#e3dff1;
  --violet:#6b4aa1;
  --violet-700:#5a3f8a;
  --focus:#1a73e8;
  --shadow:0 6px 18px rgba(32,11,71,.07);
  --radius:14px;
  --maxw:1100px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--violet); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible, button:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:8px}

/* Layout */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:1rem}
header{padding:1rem 0 .5rem}
header .brand{display:block; text-align:center}
header img{border-radius:12px; box-shadow:var(--shadow)}
h1{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); text-align:center; margin:.8rem 0 .5rem}
.sub{color:var(--ink-muted); text-align:center; margin:0 0 1rem}
.sub-xl{font-size:clamp(1.3rem, 1.1rem + 1.6vw, 2rem); font-weight:700; color:var(--violet-700)}

/* Nav */
nav[aria-label="Primary"]{
  display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; padding:.75rem 0 1rem;
}
.btn{
  display:inline-block; padding:.6rem 1rem; border:1px solid var(--violet);
  border-radius:10px; background:#fff; color:var(--violet); font-weight:600;
  text-decoration:none; box-shadow:var(--shadow);
  transition:transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover{background:#f9f7ff; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[aria-current="page"]{background:var(--violet); color:#fff}

/* Content */
main{padding:1rem 0 2rem}
.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow)
}
.card h2{margin:.1rem 0 .5rem; font-size:1.2rem}
.card p{margin:.35rem 0; color:var(--ink-muted)}
.cta{margin-top:.6rem}

/* Footer */
footer{text-align:center; padding:1.25rem .5rem 2rem; color:var(--ink-muted)}

/* Accessibility: skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; margin:.5rem; padding:.5rem .75rem;
  background:#fff; border:2px solid var(--focus); border-radius:10px; box-shadow:var(--shadow)
}

/* Print tweaks */
@media print{
  :root{ --bg:#fff }
  body{ background:#fff; color:#000 }
  nav, .cta .btn{ display:none !important }
  header img{ box-shadow:none }
  .card{ box-shadow:none; border-color:#ccc }
}