:root{
  --ink:#171310;
  --ink-2:#241d17;
  --ivory:#F1E9D8;
  --ivory-2:#FBF7EE;
  --brass:#C69A4E;
  --brass-dark:#9c7635;
  --burgundy:#7A2331;
  --text-dark:#2A2420;
  --line: rgba(241,233,216,0.14);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory-2);
  color:var(--text-dark);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
}
a{color:inherit;text-decoration:none;}
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass-dark);
}
img,svg{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(23,19,16,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{
  font-family:'Fraunces', serif;
  font-size:1.44rem;
  color:var(--ivory);
  font-weight:600;
  display:flex;align-items:baseline;gap:8px;
}
.brand .dot{color:var(--brass);}
.nav-links{display:flex;gap:30px;list-style:none;align-items:center;}
.nav-links a{
  color:var(--ivory);font-size:0.92rem;opacity:0.82;
  position:relative;padding-bottom:4px;transition:opacity .2s ease;
}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;color:var(--brass);}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--brass);transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  background:var(--brass);color:var(--ink) !important;padding:10px 20px;
  border-radius:2px;font-size:0.85rem;font-weight:600;opacity:1 !important;
}
.nav-cta::after{display:none;}
.burger{display:none;background:none;border:none;color:var(--ivory);font-size:1.6rem;cursor:pointer;}

/* ---------- PAGE HERO (secondary pages) ---------- */
.page-hero{
  background:var(--ink);color:var(--ivory);
  padding:150px 0 70px;position:relative;overflow:hidden;
}
.page-hero h1{color:var(--ivory);font-size:clamp(2.1rem,4vw,3.2rem);margin:14px 0 16px;}
.page-hero p{color:rgba(241,233,216,0.8);max-width:56ch;font-size:1.02rem;}

/* ---------- HOME HERO ---------- */
.hero{position:relative;background:var(--ink);color:var(--ivory);padding:168px 0 90px;overflow:hidden;}
.staff-lines{position:absolute;inset:0;opacity:0.55;pointer-events:none;}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center;}
.hero h1{color:var(--ivory);font-size:clamp(2.4rem, 4.6vw, 3.9rem);line-height:1.05;margin:18px 0 22px;}
.hero h1 em{font-style:italic;color:var(--brass);}
.hero p.lead{max-width:46ch;font-size:1.08rem;color:rgba(241,233,216,0.82);margin-bottom:34px;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{display:inline-block;padding:14px 26px;font-size:0.92rem;font-weight:600;border-radius:2px;transition:transform .2s ease, background .2s ease;border:none;cursor:pointer;font-family:'Work Sans',sans-serif;}
.btn-primary{background:var(--brass);color:var(--ink);}
.btn-primary:hover{background:var(--ivory);transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(241,233,216,0.4);color:var(--ivory);background:transparent;}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px);}
.btn-ghost-dark{border:1px solid rgba(42,36,32,0.3);color:var(--text-dark);background:transparent;}
.btn-ghost-dark:hover{border-color:var(--brass-dark);color:var(--brass-dark);}

.piano-art{position:relative;display:flex;justify-content:center;}
.keyboard-card{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:22px 22px 26px;width:100%;}
.keyboard-hint{font-family:'Space Mono', monospace;font-size:0.7rem;color:rgba(241,233,216,0.55);letter-spacing:0.06em;margin-bottom:14px;text-align:center;}
.keyboard{position:relative;display:flex;height:150px;user-select:none;}
.key{position:relative;border:1px solid var(--ink);cursor:pointer;}
.key.white{flex:1;background:linear-gradient(to bottom, var(--ivory-2), var(--ivory));border-radius:0 0 4px 4px;z-index:1;transition:transform .06s ease, background .1s ease;}
.key.white:active,.key.white.pressed{background:linear-gradient(to bottom,#e7dcc2,#e7dcc2);transform:translateY(3px);}
.key.black{position:absolute;top:0;width:6.2%;height:62%;background:linear-gradient(to bottom,#2a231c,#0c0906);border-radius:0 0 3px 3px;z-index:2;transition:transform .06s ease, background .1s ease;}
.key.black:active,.key.black.pressed{background:#000;transform:translateY(3px);}
.key-label{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:'Space Mono', monospace;font-size:0.62rem;color:var(--brass-dark);pointer-events:none;}

/* ---------- SECTIONS ---------- */
section{padding:100px 0;}
.section-head{max-width:760px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-top:10px;}
.section-head p{color:#544c42;margin-top:14px;font-size:1.02rem;}

/* Courses */
.courses{background:var(--ivory-2);}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.course-card{background:var(--ink);color:var(--ivory);border-radius:6px;padding:38px 34px;position:relative;overflow:hidden;border:1px solid var(--line);}
.course-card .glyph{font-family:'Fraunces', serif;font-style:italic;font-size:3.4rem;color:var(--brass);opacity:0.9;line-height:1;margin-bottom:18px;}
.course-card h3{color:var(--ivory);font-size:1.5rem;margin-bottom:12px;}
.course-card p{color:rgba(241,233,216,0.75);font-size:0.96rem;margin-bottom:20px;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag{font-family:'Space Mono', monospace;font-size:0.68rem;letter-spacing:0.05em;color:var(--brass);border:1px solid rgba(198,154,78,0.4);padding:5px 10px;border-radius:20px;}

/* Workshop callout */
.workshop{background:var(--burgundy);color:var(--ivory);position:relative;}
.workshop-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.workshop .eyebrow{color:var(--brass);}
.workshop h2{color:var(--ivory);font-size:clamp(2rem,3.4vw,2.7rem);margin:14px 0 20px;}
.workshop h2 .accent{color:var(--brass);font-style:italic;}
.workshop p{color:rgba(241,233,216,0.86);font-size:1.02rem;margin-bottom:26px;max-width:48ch;}
.workshop-facts{display:flex;flex-direction:column;gap:16px;margin-bottom:30px;}
.fact{display:flex;gap:14px;align-items:flex-start;font-size:0.95rem;}
.fact .mark{color:var(--brass);font-family:'Fraunces', serif;font-style:italic;font-size:1.1rem;flex:0 0 auto;}
.workshop-card{background:rgba(23,19,16,0.35);border:1px solid rgba(241,233,216,0.22);border-radius:8px;padding:38px;}
.workshop-card .badge{display:inline-block;background:var(--brass);color:var(--ink);font-family:'Space Mono', monospace;font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;padding:6px 12px;border-radius:20px;margin-bottom:20px;}
.workshop-card ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:26px;}
.workshop-card li{display:flex;gap:12px;font-size:0.95rem;color:rgba(241,233,216,0.9);}
.workshop-card li::before{content:"—";color:var(--brass);}

/* FAQ */
.faq-item{border-top:1px solid rgba(241,233,216,0.18);padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid rgba(241,233,216,0.18);}
.faq-item h3{color:var(--ivory);font-size:1.05rem;margin-bottom:8px;}
.faq-item p{color:rgba(241,233,216,0.75);font-size:0.94rem;}

/* Format */
.format{background:var(--ivory-2);}
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.format-card{padding:30px 8px 0 0;border-top:1px solid rgba(42,36,32,0.15);}
.format-card .num{font-family:'Space Mono', monospace;font-size:0.75rem;color:var(--brass-dark);display:block;margin-bottom:14px;}
.format-card h3{font-size:1.2rem;margin-bottom:10px;}
.format-card p{color:#544c42;font-size:0.94rem;}

/* Contact / CTA */
.contact{background:var(--ink);color:var(--ivory);text-align:center;padding:120px 0;position:relative;}
.contact .eyebrow{color:var(--brass);}
.contact h2{color:var(--ivory);font-size:clamp(2.1rem,4vw,3.2rem);margin:16px auto 22px;max-width:16ch;}
.contact p{color:rgba(241,233,216,0.78);max-width:52ch;margin:0 auto 36px;}
.email-link{font-family:'Fraunces', serif;font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--brass);border-bottom:1px solid var(--brass);padding-bottom:4px;transition:opacity .2s ease;}
.email-link:hover{opacity:0.75;}
.spots-note{margin-top:22px;font-family:'Space Mono', monospace;font-size:0.72rem;letter-spacing:0.06em;color:rgba(241,233,216,0.55);text-transform:uppercase;}

/* ---------- FORMS ---------- */
.form-section{background:var(--ivory-2);}
.form-card{
  background:#fff;border:1px solid rgba(42,36,32,0.1);border-radius:8px;
  padding:44px;max-width:720px;margin:0 auto;
  box-shadow:0 20px 50px rgba(23,19,16,0.06);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.form-group{margin-bottom:20px;display:flex;flex-direction:column;gap:8px;}
.form-group label{
  font-family:'Space Mono', monospace;font-size:0.7rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--brass-dark);
}
.form-group input,
.form-group select,
.form-group textarea{
  font-family:'Work Sans', sans-serif;font-size:0.98rem;color:var(--text-dark);
  padding:13px 14px;border:1px solid rgba(42,36,32,0.2);border-radius:4px;
  background:var(--ivory-2);transition:border-color .2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--brass);background:#fff;
}
.form-group textarea{resize:vertical;min-height:120px;}
.form-note{font-size:0.85rem;color:#7a7268;margin-top:18px;}
.form-submit{margin-top:8px;}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.blog-card{
  background:var(--ink);color:var(--ivory);border-radius:6px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
}
.blog-card-body{padding:32px;}
.blog-card .cat{font-family:'Space Mono', monospace;font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--brass);}
.blog-card h3{color:var(--ivory);font-size:1.3rem;margin:12px 0 10px;}
.blog-card p{color:rgba(241,233,216,0.72);font-size:0.94rem;margin-bottom:18px;}
.blog-card .meta{font-family:'Space Mono', monospace;font-size:0.68rem;color:rgba(241,233,216,0.45);}
.blog-card a.read-more{color:var(--brass);font-size:0.88rem;font-weight:600;}

.article-hero{background:var(--ink);color:var(--ivory);padding:150px 0 60px;}
.article-hero .cat{color:var(--brass);}
.article-hero h1{color:var(--ivory);font-size:clamp(2rem,3.6vw,2.8rem);margin:14px 0 10px;}
.article-hero .meta{font-family:'Space Mono', monospace;font-size:0.75rem;color:rgba(241,233,216,0.55);}
.article-body{max-width:70ch;margin:0 auto;padding:80px 32px;}
.article-body p{margin-bottom:20px;font-size:1.05rem;color:var(--text-dark);}
.article-body h2{font-size:1.5rem;margin:36px 0 16px;}
.article-back{display:inline-block;margin-bottom:20px;color:var(--brass-dark);font-size:0.9rem;}

/* ---------- SHOP ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.product-card{
  background:var(--ink);color:var(--ivory);border-radius:6px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
}
.product-thumb{
  height:180px;display:flex;align-items:center;justify-content:center;
  background:var(--ink-2);font-family:'Fraunces',serif;font-style:italic;
  font-size:3rem;color:var(--brass);
}
.product-info{padding:26px;display:flex;flex-direction:column;flex:1;}
.product-cat{font-family:'Space Mono', monospace;font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--brass-dark);}
.product-info h3{color:var(--ivory);font-size:1.15rem;margin:10px 0 8px;}
.product-info p{color:rgba(241,233,216,0.7);font-size:0.9rem;margin-bottom:18px;flex:1;}
.product-price{font-family:'Space Mono', monospace;color:var(--brass);font-size:1.1rem;margin-bottom:16px;}
.shop-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
.shop-filters a{
  font-family:'Space Mono', monospace;font-size:0.72rem;letter-spacing:0.05em;
  text-transform:uppercase;padding:8px 16px;border:1px solid rgba(42,36,32,0.2);
  border-radius:20px;color:var(--text-dark);
}
.shop-filters a.active{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
.shop-note{
  background:#fff;border:1px solid rgba(42,36,32,0.1);border-radius:8px;
  padding:24px 28px;margin-bottom:44px;font-size:0.92rem;color:#544c42;
}

footer{background:var(--ink-2);color:rgba(241,233,216,0.55);padding:34px 0;font-size:0.85rem;}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr;}
  .course-grid{grid-template-columns:1fr;}
  .workshop-grid{grid-template-columns:1fr;}
  .format-grid{grid-template-columns:1fr;gap:34px;}
  .blog-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .nav-links{
    position:fixed;top:74px;left:0;right:0;background:var(--ink);
    flex-direction:column;padding:20px 32px 30px;gap:18px;
    border-bottom:1px solid var(--line);transform:translateY(-130%);
    transition:transform .3s ease;align-items:flex-start;
  }
  .nav-links.open{transform:translateY(0);}
  .burger{display:block;}
}
@media (max-width: 560px){
  .product-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}