/* khantabla.com — Teentaal design system
   16 mātrā, 4 vibhag: the rhythm cycle every tabla student learns first
   structures the page — nav sections map to the 4 vibhag, the hero and
   footer marks are literal renderings of the cycle (see js/script.js). */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/fraunces-black.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spacemono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacemono-700.woff2') format('woff2');
}

/* ============ TOKENS ============
   The page deliberately alternates warm-dark and parchment-light grounds
   section by section — that alternation IS the design (it echoes sam and
   khali, the struck and silent beats of a tabla cycle), so the page does
   not additionally respond to the viewer's OS/browser light-dark
   preference. Fixed, single palette, on purpose.
*/
:root{
  --wood:#17130f;       /* bayan shell — deep warm near-black */
  --wood-2:#1e1911;     /* raised wood surface */
  --skin:#efe6d2;       /* goat-skin drumhead — warm parchment */
  --skin-2:#e6d9bd;     /* raised skin surface */
  --ink:#120e0a;        /* syahi — tuning-paste black */
  --brass:#c28a3e;      /* peetal — tuning-block brass, the one accent */
  --brass-bright:#e0ab63;
  --brass-dim:#8e6530;
  --rawhide-line:rgba(184,149,111,.28);
  --skin-line:rgba(18,14,10,.14);
  --wood-line:rgba(239,230,210,.14);
  --max:1180px;
  --gutter:clamp(20px,4vw,56px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--skin);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);}

.display{font-family:'Fraunces',serif;font-weight:900;text-wrap:balance;letter-spacing:-0.01em;}
.mono{font-family:'Space Mono',monospace;}
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow .mk{color:var(--brass);}

h1,h2,h3{margin:0;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:'Space Mono',monospace;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95em 1.5em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-fill{background:var(--brass);color:var(--ink);}
.btn-fill:hover{background:var(--brass-bright);transform:translateY(-1px);}
.btn-line{border-color:var(--rawhide-line);color:inherit;}
.btn-line:hover{border-color:var(--brass);color:var(--brass);}

/* ============ SKIP LINK ============ */
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--ink);padding:10px 16px;z-index:999;}
.skip:focus{left:0;}

/* ============ NAV ============ */
.site-nav{
  position:sticky;top:0;z-index:80;
  background:rgba(23,19,15,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--wood-line);
}
.nav-row{
  max-width:var(--max);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  color:var(--skin);
}
.brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;color:var(--skin);}
.brand-name{font-family:'Fraunces',serif;font-weight:900;font-size:1.05rem;letter-spacing:.01em;}
.brand-tag{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-top:2px;}

.menu-toggle{
  display:none;background:none;border:1px solid var(--rawhide-line);color:var(--skin);
  padding:8px 12px;border-radius:2px;cursor:pointer;font-size:1rem;
}

.nav-links{list-style:none;display:flex;gap:4px;margin:0;padding:0;}
.nav-links a{
  display:block;padding:8px 14px;text-decoration:none;color:var(--skin);
  font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover{color:var(--brass-bright);}
.nav-links a.active{color:var(--brass);border-color:var(--brass);}

/* ============ HERO ============ */
.hero{
  background:var(--wood);
  color:var(--skin);
  position:relative;
  overflow:hidden;
  scroll-margin-top:58px;
}
.hero-grid{
  max-width:var(--max);margin:0 auto;padding:clamp(48px,8vw,96px) var(--gutter) clamp(56px,9vw,110px);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;
}
.hero-eyebrow{color:var(--brass);margin-bottom:22px;}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.03;color:var(--skin);}
.hero h1 em{font-style:italic;font-weight:600;color:var(--brass-bright);}
.hero p.lede{
  margin-top:26px;max-width:46ch;font-size:clamp(1.02rem,1.3vw,1.18rem);color:rgba(239,230,210,.82);
}
.hero-ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;}
.hero-ctas .btn-line{border-color:var(--rawhide-line);color:var(--skin);}
.hero-ctas .btn-line:hover{border-color:var(--brass);color:var(--brass-bright);}

.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;}
.ring-wrap svg{width:100%;height:auto;max-width:420px;}
.ring-caption{text-align:center;max-width:340px;color:rgba(239,230,210,.6);}
.ring-caption .mono{font-size:.68rem;letter-spacing:.08em;display:block;color:var(--brass);margin-bottom:6px;}

.ring-outer{animation:spin 90s linear infinite;transform-origin:center;}
@media (prefers-reduced-motion: reduce){ .ring-outer{animation:none;} }
@keyframes spin{to{transform:rotate(360deg);}}

.theka-strip{
  margin-top:28px;
  font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.02em;
  color:rgba(239,230,210,.75);
  display:flex;flex-wrap:wrap;gap:.4em .6em;justify-content:center;
}
.theka-strip .grp{display:inline-flex;gap:.4em;padding:.25em .5em;border:1px solid var(--rawhide-line);border-radius:2px;}
.theka-strip .sam{color:var(--brass);}
.theka-strip .khali{color:var(--brass-bright);opacity:.85;}

/* ============ MINI SCROLL RING (side wayfinder) ============ */
.mini-ring{
  position:fixed;right:28px;top:50%;transform:translateY(-50%);
  z-index:70;width:64px;height:64px;
  display:none;
}
@media (min-width:1040px){ .mini-ring{display:block;} }
.mini-ring svg{width:100%;height:100%;}

/* ============ SECTIONS ============ */
.section{padding:clamp(56px,9vw,110px) 0;scroll-margin-top:58px;}
.section-dark{background:var(--wood);color:var(--skin);}
.section-light{background:var(--skin);color:var(--ink);}

.section-head{margin-bottom:clamp(32px,5vw,56px);}
.section-eyebrow-dark{color:var(--brass);}
.section-eyebrow-light{color:var(--brass-dim);}
.section-head h2{font-size:clamp(2rem,3.6vw,3.1rem);margin-top:14px;}

/* ---- Bio ---- */
.bio-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.bio-copy p{max-width:62ch;margin:0 0 20px;color:rgba(18,14,10,.86);}
.bio-copy p:last-child{margin-bottom:0;}

.pullquote{
  margin:36px 0;padding:24px 0 24px 28px;border-left:3px solid var(--brass);
}
.pullquote p{font-family:'Fraunces',serif;font-weight:600;font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--wood);margin:0;line-height:1.35;}

.facts{display:flex;flex-wrap:wrap;gap:10px 14px;margin:28px 0 8px;}
.facts span{
  font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.03em;
  padding:.5em .85em;border:1px solid var(--skin-line);border-radius:2px;color:var(--wood);
}

.routing{margin-top:8px;}
.routing-title{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-dim);margin-bottom:12px;}
.routing-chips{display:flex;flex-wrap:wrap;gap:8px;}
.routing-chips span{
  font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.05em;
  background:var(--skin-2);padding:.45em .8em;border-radius:2px;color:var(--wood);
}

.bio-side{position:sticky;top:90px;}
.bio-portrait{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--skin-2);}
.bio-portrait img{width:100%;height:100%;object-fit:cover;filter:sepia(.18) saturate(1.05) contrast(1.02);}
.credits{margin-top:22px;border-top:1px solid var(--skin-line);padding-top:18px;}
.credits-title{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-dim);margin-bottom:12px;}
.credits dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;}
.credits dt{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:.92rem;color:var(--wood);}
.credits dd{margin:0;font-family:'Space Mono',monospace;font-size:.72rem;color:rgba(18,14,10,.55);align-self:center;}

/* ---- Photos & Videos ---- */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:110px;
  grid-auto-flow:dense;
  gap:10px;
}
.gallery figure{
  margin:0;overflow:hidden;border-radius:2px;position:relative;background:var(--wood-2);cursor:pointer;
}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) sepia(.22) saturate(1.3) brightness(.85);
  transition:filter .5s ease, transform .6s ease;
}
.gallery figure:hover img{filter:none;transform:scale(1.04);}
.g-a{grid-column:span 3;grid-row:span 3;}
.g-b{grid-column:span 3;grid-row:span 3;}
.g-c{grid-column:span 2;grid-row:span 2;}
.g-d{grid-column:span 2;grid-row:span 2;}
.g-e{grid-column:span 2;grid-row:span 2;}
.g-f{grid-column:span 3;grid-row:span 2;}
.g-g{grid-column:span 3;grid-row:span 2;}

.video-row{
  margin-top:44px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.video-card{
  text-decoration:none;color:inherit;display:block;position:relative;border-radius:2px;overflow:hidden;
  background:var(--wood-2);
}
.video-card .thumb{aspect-ratio:16/9;overflow:hidden;position:relative;}
.video-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.75);transition:filter .35s ease;}
.video-card:hover img{filter:none;}
.video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.video-play span{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--brass);
  display:flex;align-items:center;justify-content:center;color:var(--brass);
  background:rgba(23,19,15,.55);transition:background .2s ease, transform .2s ease;
}
.video-card:hover .video-play span{background:var(--brass);color:var(--ink);transform:scale(1.06);}
.video-title{padding:12px 4px 0;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.02em;color:rgba(239,230,210,.8);}

/* ---- Lessons ---- */
.lessons-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.lessons-copy p{max-width:60ch;margin:0 0 20px;color:rgba(18,14,10,.86);}

.theka-card{
  background:var(--skin-2);border-radius:2px;padding:28px;border:1px solid var(--skin-line);
}
.theka-card .routing-title{margin-bottom:16px;}
.theka-card .theka-strip{color:var(--wood);justify-content:flex-start;}
.theka-card .theka-strip .grp{border-color:var(--rawhide-line);}
.theka-card .theka-strip .sam{color:var(--brass-dim);}
.theka-card .theka-strip .khali{color:var(--brass);}
.theka-note{margin-top:16px;font-size:.82rem;color:rgba(18,14,10,.6);}

.lessons-cta{
  margin-top:30px;background:var(--wood);color:var(--skin);border-radius:2px;padding:28px;
}
.lessons-cta h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.3rem;margin-bottom:8px;}
.lessons-cta p{color:rgba(239,230,210,.7);margin:0 0 18px;font-size:.92rem;}

/* ---- Tour ---- */
.tour-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start;}
.tour-plaque{
  border:1px solid var(--brass);border-radius:2px;padding:36px;text-align:center;
}
.tour-plaque .mono{color:var(--brass);font-size:.72rem;letter-spacing:.1em;}
.tour-plaque h3{font-family:'Fraunces',serif;font-weight:900;font-size:1.6rem;margin:12px 0 10px;color:var(--skin);}
.tour-plaque p{color:rgba(239,230,210,.65);margin:0 0 22px;font-size:.92rem;}

.manifest-title{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;}
.manifest{list-style:none;margin:0;padding:0;border-top:1px solid var(--wood-line);}
.manifest li{
  display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--wood-line);
  font-size:.9rem;
}
.manifest .venue{color:var(--skin);}
.manifest .venue small{display:block;color:rgba(239,230,210,.5);font-family:'Space Mono',monospace;font-size:.7rem;margin-top:3px;}
.manifest .code{font-family:'Space Mono',monospace;font-size:.76rem;color:var(--brass-bright);align-self:center;}

/* ============ LIGHTBOX ============ */
.lightbox{
  display:none;position:fixed;inset:0;background:rgba(9,7,5,.94);z-index:200;
  align-items:center;justify-content:center;padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:82vh;border-radius:2px;}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;background:rgba(239,230,210,.08);border:1px solid var(--rawhide-line);
  color:var(--skin);cursor:pointer;font-family:'Space Mono',monospace;font-size:1.2rem;line-height:1;
  padding:10px 14px;border-radius:2px;transition:border-color .15s ease,color .15s ease;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{border-color:var(--brass);color:var(--brass);}
.lightbox-close{top:24px;right:24px;}
.lightbox-prev{left:24px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:24px;top:50%;transform:translateY(-50%);}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink);color:rgba(239,230,210,.75);padding:56px 0 26px;}
.footer-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;
  padding-bottom:28px;border-bottom:1px solid var(--wood-line);
}
.footer-brand{display:flex;align-items:center;gap:14px;}
.footer-brand svg{width:40px;height:40px;flex:none;}
.footer-brand-text .display{font-size:1.05rem;color:var(--skin);}
.footer-brand-text .mono{font-size:.65rem;color:var(--brass);letter-spacing:.1em;margin-top:2px;}
.footer-contact a{color:var(--skin);text-decoration:none;font-family:'Space Mono',monospace;font-size:.85rem;}
.footer-social{display:flex;gap:12px;}
.footer-social a{
  text-decoration:none;color:rgba(239,230,210,.75);border:1px solid var(--wood-line);
  padding:.6em 1em;border-radius:2px;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.04em;
  transition:color .15s ease, border-color .15s ease;
}
.footer-social a:hover{color:var(--brass);border-color:var(--brass);}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 0;padding:0;}
.footer-nav a{text-decoration:none;color:rgba(239,230,210,.75);font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;}
.footer-nav a:hover{color:var(--brass);}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-top:20px;font-size:.72rem;color:rgba(239,230,210,.4);font-family:'Space Mono',monospace;
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .ring-wrap{order:-1;}
  .bio-layout, .lessons-layout, .tour-layout{grid-template-columns:1fr;}
  .bio-side{position:static;}
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:90px;}
  .g-a{grid-column:span 4;grid-row:span 3;}
  .g-b,.g-c,.g-d,.g-e,.g-f,.g-g{grid-column:span 2;grid-row:span 2;}
  .video-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .menu-toggle{display:inline-block;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--wood);
    padding:8px var(--gutter) 20px;flex-direction:column;gap:0;border-bottom:1px solid var(--wood-line);
  }
  .nav-links.open{display:flex;}
  .hero-ctas{flex-direction:column;align-items:flex-start;}
  .video-row{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr;grid-auto-rows:auto;}
  .gallery figure{aspect-ratio:4/3;}
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f,.g-g{grid-column:auto;grid-row:auto;}
}