:root{
  --bg: #0b2a44;        /* deep/inky blue */
  --panel: #0f3b5d;     /* slightly lighter panel blue */
  --gold: #c9a14b;      /* warm gold accent */
  --cream: #f7f5f2;     /* soft white/cream */
  --muted: #9fb0c2;     /* muted blue for subtle elements */
  --max-width: 1100px;
  --radius: 12px;
  --gap: 1.25rem;
  --ff-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-serif: "Georgia", "Times New Roman", serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff-sans);
  color:var(--cream);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.00) 40%),
    linear-gradient(180deg,var(--bg) 0%, #082233 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:3rem;
}

/* page container */
main{max-width:var(--max-width);margin:0 auto;padding:2rem;display:grid;gap:2rem}
header{position:sticky;top:0;background:linear-gradient(180deg, rgba(11,42,68,0.6), rgba(11,42,68,0.35));backdrop-filter: blur(6px);z-index:20}
nav{max-width:var(--max-width);margin:0 auto;padding:0.6rem 1rem;display:flex;align-items:center;justify-content:flex-end}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
nav a{color:var(--cream);text-decoration:none;padding:0.5rem 0.75rem;border-radius:8px;font-weight:600}
nav a:focus, nav a:hover{background:rgba(201,161,75,0.12);outline:none;box-shadow:0 0 0 3px rgba(201,161,75,0.12)}

/* HERO */
#hero{padding:2.5rem 1rem;}
.hero-inner{
  max-width:var(--max-width);margin:0 auto;padding:2rem;border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
  display:grid;gap:1rem;align-items:center;text-align:center;
  position:relative;
}
.hero-inner img{max-width:100%;height:auto;border-radius:8px;border:4px solid rgba(255,255,255,0.03);box-shadow:0 8px 20px rgba(2,6,23,0.6)}

/* CSS book icon (simple, made from gradients & pseudo elements) */
.book-icon{
  width:96px;height:64px;margin:0 auto 0.5rem;position:relative;border-radius:6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.95) 48%, rgba(255,255,255,0.82) 52%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,245,242,0.9));
  box-shadow: 0 6px 18px rgba(2,6,23,0.6), inset 0 -6px 12px rgba(0,0,0,0.06);
  transform:translateY(0);
  outline:3px solid rgba(11,42,68,0.18);
}
.book-icon::before, .book-icon::after{
  content:'';position:absolute;top:6px;bottom:6px;width:42%;border-radius:4px;
  background:linear-gradient(180deg, rgba(11,42,68,0.04), rgba(11,42,68,0.02));
}
.book-icon::before{left:6px;transform:skewY(-6deg)}
.book-icon::after{right:6px;transform:skewY(6deg)}

/* heading typography */
#hero-heading{font-family:var(--ff-serif);font-size:2.2rem;margin:0.25rem 0 0.25rem;color:var(--cream);text-shadow:0 2px 0 rgba(2,6,23,0.6)}
.subtitle{color:var(--muted);margin:0 0 0.75rem}

/* call to action */
.cta a{display:inline-block;padding:0.6rem 1rem;border-radius:999px;background:linear-gradient(90deg,var(--gold), #e4c26f);color:#07202a;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(201,161,75,0.12)}
.cta a:focus, .cta a:hover{transform:translateY(-2px)}

/* sections */
section{background:transparent;padding:1rem;border-radius:10px}
section h2{font-family:var(--ff-serif);font-size:1.25rem;margin:0 0 0.5rem;color:var(--cream);display:flex;align-items:center;gap:0.6rem}
section h2::before{content:"";width:10px;height:10px;border-radius:3px;background:linear-gradient(180deg,var(--gold), #e0bd62);box-shadow:0 2px 6px rgba(0,0,0,0.25)}

/* layout for two-column areas (teaching + highlight) */
#teaching{display:grid;grid-template-columns:1fr 320px;gap:1rem;align-items:start}
.highlight{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}

/* responsive */
@media (max-width:900px){
  #teaching{grid-template-columns:1fr}
  nav{justify-content:center}
}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);margin-top:0.5rem}
.gallery-grid figure{margin:0;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:0.5rem;border-radius:10px}
.gallery-grid img{display:block;width:100%;height:auto;border-radius:6px;object-fit:cover;}

/* testimonials styling with large CSS quotation mark */
#testimonials blockquote{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:1rem 1.25rem;border-left:4px solid rgba(201,161,75,0.12);margin:0 0 1rem;border-radius:8px;color:var(--cream)}
#testimonials blockquote p{margin:0 0 0.5rem;font-style:italic}
#testimonials blockquote::before{content:"“";font-family:var(--ff-serif);font-size:3.5rem;color:var(--gold);opacity:0.95;position:relative;display:block;margin-bottom:-0.6rem}

/* form & inputs */
form{display:grid;gap:0.6rem;max-width:680px}
label{font-weight:600;color:var(--cream)}
input[type="text"],input[type="email"],textarea{
  padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--cream);
  font:inherit;resize:vertical;
}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(201,161,75,0.12);border-color:var(--gold)}

button[type="button"]{background:transparent;border:2px solid var(--gold);color:var(--gold);padding:0.6rem 0.9rem;border-radius:999px;font-weight:700;cursor:pointer}
button[type="button"]:hover{background:linear-gradient(90deg,var(--gold), #e4c26f);color:#07202a}

#contact-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; /* space between buttons */
  max-width: 250px; /* optional */
}

/* footer */
footer{max-width:var(--max-width);margin:2rem auto 0;padding:1rem;color:var(--muted);font-size:0.9rem;border-top:1px solid rgba(255,255,255,0.03)}

/* small utility */
.hidden{display:none}

/* Accessibility helpers */
a:focus{outline-offset:3px}

/* small typographic touch: "book-spine" accent on headings */
h3{position:relative}
h3::after{content:"";position:absolute;left:-1rem;top:50%;transform:translateY(-50%);width:6px;height:60%;background:linear-gradient(180deg,var(--gold), #e0bd62);border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,0.25)}

/* end of stylesheet */