@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --ink: #14120C;
  --ink-2: #1B1811;
  --parchment: #E6DAB8;
  --parchment-dim: #B7AA85;
  --gold: #B58A3D;
  --gold-bright: #D2A94E;
  --oxblood: #7A2A21;
  --verdigris: #4F6B5C;
  --line: #3A3020;
  --serif-display: 'Cinzel', serif;
  --serif-body: 'EB Garamond', serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(181,138,61,0.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 100%, rgba(79,107,92,0.06), transparent 60%),
    var(--ink);
  color:var(--parchment);
  font-family:var(--serif-body);
  font-size:18px;
  line-height:1.65;
}

a{color:inherit}

.wrap, .heading, .school-inner, header nav{max-width:960px;margin:0 auto}

/* Header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem 2rem;
  border-bottom:1px solid var(--line);
}
header .brand{
  font-family:var(--serif-display);
  font-size:1.05rem;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--parchment);
}
header nav{display:flex;gap:2rem;max-width:none;margin:0}
header nav a{
  text-decoration:none;
  color:var(--parchment-dim);
  font-size:.95rem;
  letter-spacing:.02em;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
header nav a:hover{color:var(--gold-bright);border-color:var(--gold)}

/* Hero */
.hero{
  position:relative;
  padding:7rem 2rem 6rem;
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:780px;height:780px;
  transform:translate(-50%,-50%);
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="92" fill="none" stroke="%23B58A3D" stroke-width="0.6"/><path d="M100 8 C150 8 178 55 178 100 C178 150 140 178 108 178 C138 168 156 140 156 108 C156 68 128 40 90 40 C55 40 30 65 30 100 C30 128 46 150 70 164 C36 152 22 122 22 100 C22 50 60 8 100 8 Z" fill="none" stroke="%23B58A3D" stroke-width="0.6"/><circle cx="176" cy="100" r="4" fill="%23B58A3D"/></svg>') center/contain no-repeat;
  opacity:.14;
  pointer-events:none;
}
.hero .eyebrow{
  font-family:var(--serif-body);
  font-style:italic;
  color:var(--gold-bright);
  letter-spacing:.03em;
  margin:0 0 .6rem;
}
.hero h1{
  font-family:var(--serif-display);
  font-size:clamp(2.4rem,5vw,3.6rem);
  font-weight:500;
  margin:0 0 1.2rem;
  color:var(--parchment);
}
.hero .tagline{
  max-width:700px;margin:0 auto 1.4rem;
  font-family:var(--serif-display);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.55;
  color:var(--gold-bright);
  font-size:1.05rem;
}
.hero .intro{
  max-width:560px;margin:0 auto 2.4rem;
  color:var(--parchment-dim);
}
.actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* Historical plates */
.plate{
  display:flex;flex-direction:column;align-items:center;
  gap:1rem;
  padding:3rem 2rem;
  background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.plate .frame{
  border:1px solid var(--gold);
  padding:10px;
  background:var(--ink);
  max-width:100%;
}
.plate img{
  display:block;
  max-width:100%;
  max-height:420px;
  width:auto;height:auto;
  filter:sepia(.2) saturate(.85) brightness(.84) contrast(1.08) hue-rotate(-3deg);
}
.plate figcaption{
  text-align:center;
  font-style:italic;font-size:.82rem;color:var(--parchment-dim);
  letter-spacing:.02em;
}

.btn{
  display:inline-block;
  padding:.85rem 1.7rem;
  border:1px solid var(--gold);
  color:var(--parchment);
  text-decoration:none;
  font-size:.95rem;
  letter-spacing:.02em;
  transition:background .2s ease, color .2s ease;
}
.btn.primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.primary:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.school-cta{
  padding:1.4rem 3rem;
  font-family:var(--serif-display);
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:.04em;
  border-width:2px;
  box-shadow:0 0 24px rgba(181,138,61,0.35);
}
.btn:not(.primary):hover{background:rgba(181,138,61,0.12)}

/* Section shell */
.section{padding:5.5rem 2rem;border-bottom:1px solid var(--line)}
.heading{text-align:center;margin-bottom:3rem}
.heading .eyebrow{
  font-style:italic;color:var(--gold-bright);margin:0 auto .5rem;
}
.heading h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(1.7rem,3vw,2.2rem);
  margin:0 0 .8rem;
}
.heading p{color:var(--parchment-dim);max-width:520px;margin:0 auto}

.divider{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:0 auto 3rem;max-width:300px;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider svg{width:20px;height:20px;flex-shrink:0}

/* Cards */
.cards{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{
  border:1px solid var(--line);
  padding:2.2rem 1.8rem;
  position:relative;
  background:var(--ink-2);
}
.card .sigil{
  width:34px;height:34px;
  color:var(--gold);
  margin-bottom:1.2rem;
}
.card .num{display:none}
.card h3{
  font-family:var(--serif-display);
  font-weight:500;font-size:1.15rem;
  margin:0 0 .7rem;color:var(--parchment);
}
.card p{color:var(--parchment-dim);margin:0 0 1.2rem;font-size:.98rem}
.card p.subtitle{
  color:var(--gold-bright);
  font-style:italic;
  font-size:1.15rem;
  margin:-.35rem 0 .9rem;
}
.card p.subtitle-lg{
  font-size:1.15rem;
}
.card .link{
  color:var(--gold-bright);text-decoration:none;font-size:1.08rem;
  border-bottom:1px solid var(--gold);padding-bottom:1px;
}
.card .link:hover{color:var(--parchment)}

.card.webinar{grid-column:1 / -1}

#free .cards{
  display:flex;flex-wrap:wrap;justify-content:center;
}
#free .card{flex:0 1 300px;text-align:center}
#free .card.wide{flex:0 1 600px}
#free .card .sigil{margin:0 auto 1.2rem;display:block}
#free .card.webinar{flex:1 1 100%}
#free .videos{text-align:center}
.videos{
  display:grid;grid-template-columns:1fr;gap:2.2rem;margin-top:.5rem;
}
.videos div{
  border:1px dashed var(--line);
  padding:1.6rem .8rem;text-align:center;
  color:var(--parchment-dim);font-size:.9rem;
}
.videos small{color:var(--parchment-dim);opacity:.6}
.video-embed{position:relative}
.videos .video-embed-wrap{max-width:760px;margin:0 auto}
.videos .video-label{
  font-style:italic;color:var(--gold-bright);
  margin:0 0 .6rem;font-size:1rem;
}
.videos .video-embed{
  width:100%;padding:0;padding-top:56.25%;height:0;
  border:1px solid var(--gold);
  overflow:hidden;
}
.video-embed iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}

/* School band */
.school{
  padding:5rem 2rem;
  background:linear-gradient(180deg, rgba(181,138,61,0.06), transparent 70%);
  border-bottom:1px solid var(--line);
}
.school-inner{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center;
}
.school .eyebrow{font-style:italic;color:var(--gold-bright);margin:0 auto .5rem}
.school h2{font-family:var(--serif-display);font-weight:500;font-size:clamp(1.7rem,3vw,2.2rem);margin:0 0 .6rem}
.school p{color:var(--parchment-dim);max-width:420px;margin:0 auto}
.school-emblem-frame{
  border:1px solid var(--gold);
  padding:10px;
  background:var(--ink);
  max-width:100%;
  display:inline-block;
}
.school-emblem{
  display:block;
  max-width:100%;
  max-height:420px;
  width:auto;height:auto;
  filter:sepia(.2) saturate(.85) brightness(.84) contrast(1.08) hue-rotate(-3deg);
}
.yt-logo{
  display:block;
  width:150px;height:auto;
  margin:-.2rem auto 1rem;
  filter:sepia(.2) saturate(.85) brightness(.84) contrast(1.08) hue-rotate(-3deg);
}

/* Closing / About */
.closing{
  text-align:center;padding:6rem 2rem;
}
.closing .eyebrow{font-style:italic;color:var(--gold-bright);margin:0 auto .5rem}
.closing h2{font-family:var(--serif-display);font-weight:500;font-size:clamp(1.8rem,3.5vw,2.4rem);margin:0 0 .8rem}
.about-wrap{max-width:680px;margin:0 auto}
.bio{text-align:left;margin:2rem 0 2.6rem}
.bio p{color:var(--parchment-dim);margin:0 0 1.2rem;font-size:1.02rem}
.bio p.signoff{
  font-style:italic;
  color:var(--gold-bright);
  margin-top:2rem;
  padding-left:2rem;
}
.portrait{margin:0 0 2.6rem}
.portrait .frame{
  display:inline-block;
  border:1px solid var(--gold);
  padding:8px;
  background:var(--ink-2);
}
.portrait img{
  display:block;
  max-width:100%;
  max-height:460px;
  width:auto;height:auto;
  filter:sepia(.2) saturate(.85) brightness(.9) contrast(1.05) hue-rotate(-3deg);
}

/* Footer */
footer{
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  padding:2.4rem 2rem;color:var(--parchment-dim);font-size:.85rem;
}
footer svg{width:16px;height:16px;color:var(--gold)}
footer span:first-child{order:2}
footer span:last-child{order:3}

@media (max-width:820px){
  .cards, .cards.two{grid-template-columns:1fr}
  .card.webinar{grid-column:auto}
  .videos{gap:1.6rem}
  header{flex-direction:column;gap:1rem}
  header nav{gap:1.2rem}
  .school-inner{text-align:center}
  .plate img{max-height:280px}
  .plate{padding:2rem 1.2rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}