:root{
    --bg:#faf7f0;
    --ink:#211a12;
    --muted:#6f6455;
    --gold:#b8892e;
    --gold-soft:#e9d9ae;
    --hairline:#e4dcc9;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--ink);
    font-family:'Figtree',sans-serif;font-weight:300;
    -webkit-font-smoothing:antialiased;line-height:1.65;
  }
  img{display:block;max-width:100%}
  .wordmark{
    position:absolute;top:0;left:0;right:0;z-index:3;
    text-align:center;padding:2.4rem 1rem 0;
    font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
    color:#f5efe2;font-weight:500;
  }
  .wordmark span{color:var(--gold-soft)}
  .hero{
    position:relative;min-height:92vh;
    display:flex;align-items:flex-end;justify-content:center;
    background:#2a2119;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:center 30%/cover no-repeat;
  }
  .hero.home::before{background-image:url("../img/practice.jpg");background-position:center 38%}
  .hero.becoming::before{background-image:url("../img/hero.jpg")}
  .hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(24,18,11,.34) 0%,rgba(24,18,11,.06) 38%,rgba(24,18,11,.55) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;text-align:center;
    padding:0 1.5rem 5rem;color:#f7f2e7;
  }
  .hero .rune{
    font-family:'Cormorant Garamond',serif;font-size:1.5rem;
    color:var(--gold-soft);display:block;margin-bottom:1.8rem;
  }
  h1{
    font-family:'Cormorant Garamond',serif;font-weight:500;
    font-size:clamp(2.6rem,8vw,4.6rem);line-height:1.08;letter-spacing:.01em;
    text-shadow:0 1px 24px rgba(20,14,8,.35);
  }
  .hero p.sub{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
    font-size:clamp(1.15rem,3.2vw,1.45rem);color:#efe7d5;margin-top:1.4rem;
  }
  main{max-width:44rem;margin:0 auto;padding:0 1.5rem}
  .hairline{width:56px;height:1px;background:var(--gold);margin:3.4rem auto}
  .label{
    font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--gold);font-weight:500;text-align:center;margin-bottom:2rem;
  }
  h2{
    font-family:'Cormorant Garamond',serif;font-weight:500;
    font-size:clamp(1.7rem,4.5vw,2.3rem);line-height:1.2;
    text-align:center;margin-bottom:1.8rem;
  }
  .prose{max-width:37rem;margin:0 auto;color:var(--muted);font-size:1.02rem}
  .prose p{margin-bottom:1.3rem}
  .prose p:last-child{margin-bottom:0}
  .prose em{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:1.16em;color:var(--ink);
  }
  .prose h3{
    font-family:'Cormorant Garamond',serif;font-weight:500;
    font-size:1.3rem;line-height:1.3;color:var(--ink);
    margin:2.2rem 0 .9rem;
  }
  .prose h3 .num{
    color:var(--gold);font-style:italic;margin-right:.5rem;
  }
  .prose a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-soft)}
  .prose a:hover{border-color:var(--gold)}
  section{padding-top:1rem}
  .split{
    max-width:62rem;margin:0 auto;padding:0 1.5rem;
    display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center;
  }
  .split .photo{border-radius:2px;overflow:hidden}
  .split .photo img{width:100%;height:100%;object-fit:cover}
  .split .prose{margin:0}
  .band{max-width:72rem;margin:0 auto;padding:0 1.5rem}
  .band img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:2px}
  .quad{
    max-width:72rem;margin:0 auto;padding:0 1.5rem;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  }
  .quad img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
  .areas{list-style:none;max-width:37rem;margin:2.2rem auto 0}
  .areas li{
    padding:1.2rem .2rem;border-top:1px solid var(--hairline);
    display:flex;align-items:baseline;gap:1rem;
  }
  .areas li:last-child{border-bottom:1px solid var(--hairline)}
  .areas .dot{color:var(--gold);font-size:.85rem}
  .areas .t{
    font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:500;
    display:block;
  }
  .areas .d{display:block;font-size:.92rem;color:var(--muted);margin-top:.25rem}
  .ticks{list-style:none;max-width:37rem;margin:1.6rem auto 0}
  .ticks li{
    padding:.7rem .2rem;display:flex;align-items:baseline;gap:.9rem;
    font-size:1rem;color:var(--ink);
  }
  .ticks .dot{color:var(--gold);font-size:.8rem}
  .ticks li span:last-child{line-height:1.5}
  .becoming{
    text-align:center;padding:3.4rem 1rem 1rem;margin-top:1rem;
  }
  .becoming h2{margin-bottom:.8rem}
  .becoming .tag{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:1.2rem;color:var(--muted);
  }
  .cta{padding:2.2rem 0 3.5rem;text-align:center}
  .btn{
    display:inline-block;font-family:'Figtree',sans-serif;
    font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
    text-decoration:none;padding:1.05rem 2.6rem;margin:.4rem;
    border:1px solid var(--ink);color:var(--ink);transition:all .25s ease;
  }
  .btn:hover{background:var(--ink);color:var(--bg)}
  .btn.primary{background:var(--ink);color:var(--bg)}
  .btn.primary:hover{background:var(--gold);border-color:var(--gold)}
  .price-note{margin-top:1.4rem;font-size:.8rem;color:var(--muted);letter-spacing:.06em}
  .enter{padding:0 0 4.5rem;text-align:center}
  .enter a{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;
    color:var(--gold);text-decoration:none;
    border-bottom:1px solid var(--gold-soft);padding-bottom:2px;transition:border-color .25s ease;
  }
  .enter a:hover{border-color:var(--gold)}
  footer{
    border-top:1px solid var(--hairline);text-align:center;
    padding:2.2rem 1rem 2.6rem;font-size:.72rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }
  footer .name{color:var(--ink);font-weight:500}
  @media (max-width:760px){
    .split{grid-template-columns:1fr;gap:2rem}
    .quad{grid-template-columns:1fr 1fr}
    .band img{aspect-ratio:4/3}
  }

  /* site nav */
  .nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:1.9rem 2.4rem;flex-wrap:wrap;gap:.5rem}
  .brand{font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:#f5efe2;text-decoration:none;font-weight:500}
  .brand span{color:var(--gold-soft)}
  .nav nav a{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#f5efe2;text-decoration:none;margin-left:1.9rem;opacity:.88;transition:opacity .2s ease}
  .nav nav a:hover{opacity:1}
  .nav.on-light .brand,.nav.on-light nav a{color:var(--ink)}
  .page-top{padding:9rem 1.5rem 0;text-align:center}
  .page-top .tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;color:var(--muted)}
  .cards{max-width:62rem;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
  .card{border:1px solid var(--hairline);padding:2.4rem 2rem;text-decoration:none;color:var(--ink);transition:border-color .25s ease;display:block}
  .card:hover{border-color:var(--gold)}
  .card .kicker{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:500}
  .card h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.55rem;margin:.8rem 0 .5rem}
  .card p{font-size:.95rem;color:var(--muted)}
  @media (max-width:760px){
    .nav{padding:1.4rem 1.2rem;justify-content:center}
    .nav nav a{margin:0 .8rem;font-size:.6rem}
    .cards{grid-template-columns:1fr}
  }

  .quote{max-width:34rem;margin:2.6rem auto 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink);text-align:center}
  .quote .attr{display:block;margin-top:.8rem;font-family:'Figtree',sans-serif;font-style:normal;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}