:root{
--bg:#0a0908;
--bg-panel:#141210;
--bg-panel-2:#1c1814;
--line:#332c24;
--stone:#cdc2ab;
--stone-dim:#8f8574;
--text:#ece6d8;
--text-dim:#a89f8d;
--ember:#22bdad;
--ember-bright:#3ddbc8;
--gold:#8f7a4d;
--flake:22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:'Inter',sans-serif;
font-size:16px;
line-height:1.6;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed; inset:0;
background-image:
radial-gradient(circle at 20% 10%, rgba(34,189,173,0.05), transparent 40%),
radial-gradient(circle at 85% 60%, rgba(143,122,77,0.05), transparent 45%);
pointer-events:none;
z-index:0;
}
h1,h2,h3,h4{
font-family:'Fraunces',serif;
font-weight:600;
letter-spacing:-0.01em;
color:var(--text);
}
a{color:inherit; text-decoration:none;}
.eyebrow{
font-family:'IBM Plex Mono',monospace;
font-size:1.3rem;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--ember-bright);
display:flex;
align-items:center;
gap:16px;
margin-bottom:22px;
}
.eyebrow::before{
content:"";
width:26px; height:26px;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
flex-shrink:0;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
/* ---------- knapped-edge signature shape ---------- */
.knapped{
clip-path: polygon(
0 0, 100% 0, 100% calc(100% - var(--flake)),
calc(100% - var(--flake)) 100%, 0 100%
);
}
.knapped-tl{
clip-path: polygon(
var(--flake) 0, 100% 0, 100% 100%,
0 100%, 0 var(--flake)
);
}
/* ---------- nav ---------- */
header{
position:sticky; top:0; z-index:50;
background:rgba(10,9,8,0.88);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
nav{
max-width:1180px; margin:0 auto; padding:40px 32px 28px;
display:flex; flex-direction:column; gap:28px;
}
.nav-top{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo-mark{display:flex; align-items:center; gap:14px;}
.logo-mark img{height:40px; width:auto; display:block;}
.badge{width:46px; height:46px; flex-shrink:0;}
.badge-word{font-family:'Fraunces',serif; line-height:1.05;}
.badge-word .l1{font-size:2.8rem; font-weight:600; letter-spacing:0.02em; color:var(--stone); text-transform:uppercase; line-height:1;}
.badge-word .l2{font-family:'IBM Plex Mono',monospace; font-size:1.3rem; letter-spacing:0.1em; color:var(--text-dim); text-transform:uppercase; margin-top:8px;}
.nav-links{display:flex; align-items:center; gap:44px; font-size:1.7rem; font-weight:500; letter-spacing:0.01em; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap;}
.nav-links a{color:var(--text-dim); transition:color .2s; position:relative;}
.nav-links a:hover{color:var(--text);}
.nav-item{position:relative;}
.nav-link-btn{
background:none; border:none; padding:0; margin:0;
font-family:'Inter',sans-serif; font-size:1.7rem; font-weight:500; letter-spacing:0.01em;
color:var(--text-dim); cursor:pointer;
display:flex; align-items:center; gap:10px;
transition:color .2s;
}
.nav-link-btn:hover{color:var(--text);}
.nav-link-btn .caret{
font-size:1rem; color:var(--ember);
transition:transform .25s ease;
display:inline-block;
}
.nav-item.open .nav-link-btn{color:var(--text);}
.nav-item.open .caret{transform:rotate(180deg);}
.dropdown{
position:absolute; top:calc(100% + 26px); left:0; min-width:260px;
background:var(--bg-panel); border:1px solid var(--line);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
opacity:0; visibility:hidden; transform:translateY(-10px);
transition:opacity .25s ease, transform .25s ease, visibility .25s;
z-index:60;
}
.nav-item.open .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{
display:flex; align-items:center; gap:12px;
padding:18px 26px; font-size:1.1rem; font-weight:500;
color:var(--text-dim); border-top:1px solid var(--line);
transition:color .2s, background .2s, padding-left .2s;
}
.dropdown a:first-child{border-top:none;}
.dropdown a::before{content:"›"; color:var(--ember); font-family:'IBM Plex Mono',monospace;}
.dropdown a:hover{color:var(--stone); background:var(--bg-panel-2); padding-left:32px;}
.nav-cta{
font-family:'IBM Plex Mono',monospace;
font-size:1.5rem; letter-spacing:0.06em; text-transform:uppercase;
background:var(--ember); color:#fff !important;
padding:20px 38px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
transition: background .2s;
flex-shrink:0;
}
.nav-cta:hover{background:var(--ember-bright);}
.mobile-toggle{display:none; background:none; border:none; color:var(--text); font-size:2.4rem; line-height:1; padding:6px 10px; cursor:pointer;}
.nav-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.nav-portal{
font-family:'IBM Plex Mono',monospace;
font-size:1.1rem; letter-spacing:0.06em; text-transform:uppercase;
color:var(--stone); border:1px solid var(--line);
padding:19px 26px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
transition:all .2s; white-space:nowrap;
}
.nav-portal:hover{border-color:var(--ember); color:var(--ember-bright);}
.nav-staff{border-color:var(--gold); color:var(--gold);}
.nav-super{border-color:var(--ember); color:var(--ember-bright);}
.nav-library{border-color:var(--stone-dim); color:var(--stone);}
.nav-signout{background:none; cursor:pointer;
font-family:'IBM Plex Mono',monospace; font-size:1.1rem; letter-spacing:0.06em;
text-transform:uppercase; color:var(--stone-dim); border:1px solid var(--line);
padding:19px 26px; white-space:nowrap;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
transition:all .2s;}
.nav-signout:hover{border-color:#c0655a; color:#c0655a;}
/* ---------- hero ---------- */
.hero{
position:relative;
min-height:92vh;
display:flex; align-items:flex-end;
padding-bottom:80px;
}
.hero-bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,9,8,0.35) 0%, rgba(10,9,8,0.55) 45%, rgba(10,9,8,0.98) 92%),
url('https://images.squarespace-cdn.com/content/v1/63cbe47df380a770b2b5c9df/a90b25f6-742f-47ef-b629-82391e40ad2b/WPBJJ-June-2025.jpg') center 30% / cover no-repeat;
filter: grayscale(35%) contrast(1.08);
}
.hero-content{position:relative; z-index:2; max-width:760px;}
.hero h1{
font-size:clamp(2.6rem, 6vw, 4.6rem);
line-height:0.98;
text-transform:uppercase;
color:var(--stone);
}
.hero h1 em{
font-style:normal;
color:var(--ember-bright);
}
.hero p.lede{
margin-top:22px; max-width:520px;
color:var(--text-dim); font-size:1.05rem;
}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
.btn{
font-family:'IBM Plex Mono',monospace;
font-size:1.1rem; letter-spacing:0.08em; text-transform:uppercase;
padding:20px 38px;
display:inline-block;
transition:all .2s;
}
.btn-primary{
background:var(--ember); color:#fff;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.btn-primary:hover{background:var(--ember-bright);}
.btn-ghost{
border:1px solid var(--line); color:var(--stone);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.btn-ghost:hover{border-color:var(--gold); color:var(--text);}
/* ---------- stat strip ---------- */
.stat-strip{
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
background:var(--bg-panel);
}
.stat-strip .wrap{
display:grid; grid-template-columns:repeat(4,1fr);
padding:0;
}
.stat{
padding:52px 40px;
border-right:1px solid var(--line);
}
.stat:last-child{border-right:none;}
.stat .num{
font-family:'Fraunces',serif; font-weight:600; font-size:3.1rem; color:var(--stone);
}
.stat .label{
font-family:'IBM Plex Mono',monospace; font-size:1rem; letter-spacing:0.16em;
text-transform:uppercase; color:var(--text-dim); margin-top:10px;
}
/* ---------- section shell ---------- */
section{padding:150px 0; position:relative;}
.section-head{max-width:900px; margin-bottom:90px;}
.section-head h2{font-size:clamp(3rem,6vw,4.6rem); text-transform:uppercase;}
.lineage-h2{white-space:nowrap;}
.section-head p{color:var(--text-dim); margin-top:24px; font-size:1.5rem;}
/* ---------- about ---------- */
.about-grid{
display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center;
}
.about-img{
aspect-ratio:4/5; overflow:hidden;
background:url('https://images.squarespace-cdn.com/content/v1/63cbe47df380a770b2b5c9df/1735839576428-901V0UOI14CO58OKDYW2/WesternPlainsBJJ-location-outside-welcome.jpg') center/cover;
filter:grayscale(20%) contrast(1.05);
border:1px solid var(--line);
}
.about-copy p{color:var(--text-dim); margin-bottom:26px; font-size:1.3rem;}
.lineage-line{
margin-top:40px; padding-top:34px; border-top:1px solid var(--line);
display:flex; gap:18px; align-items:baseline; flex-wrap:wrap;
}
.lineage-line .name{font-family:'Fraunces',serif; font-size:1.7rem; color:var(--stone);}
/* ---------- programs ---------- */
.programs-grid{
display:grid; grid-template-columns:1fr 1fr; gap:2px;
background:var(--line);
border:1px solid var(--line);
}
.program-card{
background:var(--bg-panel);
padding:68px 60px;
position:relative;
}
.program-card .flake-num{
font-family:'IBM Plex Mono',monospace; font-size:1.15rem; color:var(--ember-bright); letter-spacing:0.16em;
}
.program-card h3{font-size:2.6rem; margin:26px 0 20px; text-transform:uppercase;}
.program-card p{color:var(--text-dim); margin-bottom:30px; font-size:1.25rem;}
.program-card ul{list-style:none;}
.program-card li{
font-size:1.15rem; color:var(--text-dim);
padding:14px 0; border-top:1px solid var(--line);
display:flex; gap:14px;
}
.program-card li:first-child{border-top:none;}
.program-card li::before{content:"›"; color:var(--ember-bright);}
.program-card .btn{margin-top:34px;}
/* ---------- instructors ---------- */
.instructor-row{
display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
background:var(--line); border:1px solid var(--line);
overflow-x:auto;
}
.instructor{
background:var(--bg-panel);
padding:36px 16px;
text-align:center;
min-width:140px;
}
.instructor .ring{
width:96px; height:96px; margin:0 auto 24px;
border:1px solid var(--gold);
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces',serif; font-size:2rem; color:var(--stone);
transform:rotate(45deg);
}
.instructor .ring span{transform:rotate(-45deg);}
.instructor .photo{
width:96px; height:96px; margin:0 auto 24px;
border:1px solid var(--gold);
border-radius:50%;
overflow:hidden;
}
.instructor .photo img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(15%) contrast(1.05);}
.instructor .name{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--text);}
.instructor .role{font-family:'IBM Plex Mono',monospace; font-size:0.95rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); margin-top:6px;}
/* ---------- gallery ---------- */
.gallery-grid{
display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:8px;
}
.gallery-grid div{background-size:cover; background-position:center; filter:grayscale(30%) contrast(1.05); border:1px solid var(--line);}
.gallery-grid div:nth-child(1){grid-column:span 2; grid-row:span 2;}
.gallery-grid div:nth-child(4){grid-column:span 2;}
/* ---------- affiliations ---------- */
.affil-row{
display:flex; gap:60px; align-items:center; flex-wrap:wrap;
padding-top:40px; border-top:1px solid var(--line);
}
.affil-row img{height:96px; width:auto; filter:grayscale(100%) brightness(1.6); opacity:0.9;}
/* ---------- faq ---------- */
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
padding:38px 0; display:flex; justify-content:space-between; align-items:center;
cursor:pointer; font-family:'Fraunces',serif; font-size:1.8rem; color:var(--stone);
}
.faq-q .icon{color:var(--ember-bright); font-family:'IBM Plex Mono',monospace; font-size:1.6rem; transition:transform .25s;}
.faq-item.open .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--text-dim); font-size:1.3rem;}
.faq-item.open .faq-a{max-height:260px; padding-bottom:38px;}
/* ---------- cta band ---------- */
.cta-band{
background:var(--bg-panel-2);
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
text-align:center;
padding:150px 0;
}
.cta-band h2{font-size:clamp(3rem,6vw,4.6rem); text-transform:uppercase; color:var(--stone); margin-bottom:30px;}
.cta-band p{color:var(--text-dim); max-width:640px; margin:0 auto 48px; font-size:1.4rem;}
/* ---------- footer ---------- */
footer{padding:100px 0 40px; font-size:1.25rem; color:var(--text-dim);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; padding-bottom:70px;}
.footer-grid h4{font-family:'IBM Plex Mono',monospace; font-size:0.95rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:26px;}
.footer-grid img{height:34px; margin-bottom:16px;}
.footer-grid a{display:block; margin-bottom:16px; color:var(--text-dim); transition:color .2s;}
.footer-grid a:hover{color:var(--stone);}
.footer-bottom{border-top:1px solid var(--line); padding-top:34px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;}
/* ---------- account menu ---------- */
.acct{position:relative;}
.acct-btn{display:flex; align-items:center; gap:11px; cursor:pointer;
background:none; border:1px solid var(--line); padding:11px 18px 11px 11px;
color:var(--stone); font-family:'Inter',sans-serif; font-size:1rem;
clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
transition:all .2s;}
.acct-btn:hover{border-color:var(--ember);}
.acct-av{width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0;
border:1px solid var(--gold); background:var(--bg-panel-2);
display:flex; align-items:center; justify-content:center;}
.acct-av img{width:100%; height:100%; object-fit:cover;}
.acct-av span{font-family:'Fraunces',serif; font-size:.85rem; color:var(--stone-dim);}
.acct-name{max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acct-caret{color:var(--ember); font-size:.85rem; transition:transform .25s;}
.acct.open .acct-caret{transform:rotate(180deg);}
.acct-menu{position:absolute; top:calc(100% + 10px); right:0; min-width:230px;
background:var(--bg-panel); border:1px solid var(--line); z-index:80;
clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .2s, transform .2s, visibility .2s;}
.acct.open .acct-menu{opacity:1; visibility:visible; transform:translateY(0);}
.acct-head{padding:16px 20px; border-bottom:1px solid var(--line);}
.acct-head-name{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--stone);}
.acct-head-role{font-family:'IBM Plex Mono',monospace; font-size:.66rem;
letter-spacing:.12em; text-transform:uppercase; color:var(--ember-bright); margin-top:3px;}
.acct-menu a, .acct-menu button{display:block; width:100%; text-align:left;
padding:13px 20px; background:none; border:none; cursor:pointer;
font-family:'Inter',sans-serif; font-size:.95rem; color:var(--text-dim);
transition:color .2s, background .2s, padding-left .2s;}
.acct-menu a:hover, .acct-menu button:hover{color:var(--stone);
background:var(--bg-panel-2); padding-left:26px;}
.acct-menu #acctSignOut{color:var(--stone-dim);}
.acct-menu #acctSignOut:hover{color:#c0655a;}
.acct-sep{height:1px; background:var(--line); margin:0;}
@media(max-width:860px){
.lineage-h2{white-space:normal;}
.hero{min-height:auto;}
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.stat-strip .wrap{grid-template-columns:repeat(2,1fr);}
.stat:nth-child(2){border-right:none;}
.about-grid, .programs-grid{grid-template-columns:1fr;}
.gallery-grid{grid-template-columns:repeat(2,1fr);}
.gallery-grid div:nth-child(1){grid-column:span 2;}
.footer-grid{grid-template-columns:1fr 1fr;}
.affil-row{gap:32px;}
.affil-row img{height:72px;}
section{padding:90px 0;}
.program-card{padding:44px 32px;}
}
/* ---------- nav (shared) ---------- */
header{
position:sticky; top:0; z-index:50;
background:rgba(10,9,8,0.88);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.nav-links a.current{color:var(--stone);}
.nav-link-btn{
background:none; border:none; padding:0; margin:0;
font-family:'Inter',sans-serif; font-size:1.7rem; font-weight:500; letter-spacing:0.01em;
color:var(--stone); cursor:pointer;
display:flex; align-items:center; gap:10px;
transition:color .2s;
}
/* ---------- page hero ---------- */
.page-hero{
position:relative;
min-height:78vh;
display:flex; align-items:center;
padding:120px 0;
}
.page-hero-bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.72) 55%, rgba(10,9,8,0.98) 100%),
url('https://images.squarespace-cdn.com/content/v1/63cbe47df380a770b2b5c9df/1735839619966-YCBTWHS2Y27DU0M0F835/WesternPlainsBJJ-best-welcoming-environment.jpg') center 35% / cover no-repeat;
filter: grayscale(35%) contrast(1.08);
}
.page-hero-content{position:relative; z-index:2; max-width:820px;}
.page-hero h1{
font-size:clamp(2.8rem, 6.5vw, 5rem);
line-height:1.02;
color:var(--stone);
margin-bottom:24px;
}
.page-hero .subtitle{
font-family:'IBM Plex Mono',monospace;
font-size:1.35rem;
letter-spacing:0.06em;
color:var(--ember-bright);
text-transform:uppercase;
margin-bottom:36px;
}
.page-hero .body-copy{
max-width:640px;
font-size:1.35rem;
color:var(--text-dim);
}
.page-hero .body-copy p{margin-bottom:18px;}
.page-hero .body-copy p:last-child{margin-bottom:0;}
.page-hero-actions{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
/* ---------- history section ---------- */
.history-section{padding:130px 0;}
.section-head{max-width:820px; margin-bottom:60px;}
.section-head h2{font-size:clamp(2.6rem,5vw,3.8rem); text-transform:uppercase; color:var(--text);}
.section-head p{color:var(--text-dim); margin-top:20px; font-size:1.25rem;}
.history-body{max-width:780px; margin-bottom:70px;}
.history-body p{color:var(--text-dim); font-size:1.2rem; margin-bottom:24px;}
.history-body p:last-child{margin-bottom:0;}
/* ---------- footer (shared) ---------- */
footer{padding:100px 0 40px; font-size:1.25rem; color:var(--text-dim); border-top:1px solid var(--line);}
/* ---- merged from Location ---- */
.address-strip .wrap{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.address-strip .addr{
font-family:'IBM Plex Mono',monospace; font-size:1.05rem; color:var(--stone);
}
.address-strip .addr span{color:var(--text-dim); font-size:0.95rem; display:block; margin-top:4px;}
.amenity-item{
border-bottom:1px solid var(--line);
border-left:3px solid transparent;
transition:border-color .25s;
}
.amenity-item.open{
border-left:3px solid var(--ember);
}
.amenity-q{
padding:30px 4px 30px 28px; display:flex; align-items:center; gap:26px;
cursor:pointer; transition:background .2s;
}
.amenity-q:hover{background:var(--bg-panel);}
.amenity-q .bullet{
width:10px; height:10px; border-radius:50%;
background:var(--stone-dim); opacity:0.5;
flex-shrink:0; transition:background .25s, opacity .25s;
}
.amenity-item.open .bullet{background:var(--ember-bright); opacity:1;}
.amenity-q h3{
font-size:1.6rem; text-transform:uppercase; flex:1;
}
.amenity-q .icon{
color:var(--ember); font-family:'IBM Plex Mono',monospace; font-size:1.6rem;
transition:transform .25s; flex-shrink:0;
}
.amenity-item.open .icon{transform:rotate(45deg);}
.amenity-a{
max-height:0; overflow:hidden; transition:max-height .3s ease;
padding-left:64px;
}
.amenity-item.open .amenity-a{max-height:200px; padding-bottom:34px;}
.amenity-a p{color:var(--text-dim); font-size:1.15rem; max-width:640px;}
.gallery-grid div:nth-child(6){grid-column:span 2;}
.cta-band h2{font-size:clamp(2.6rem,5vw,3.8rem); text-transform:uppercase; color:var(--stone); margin-bottom:26px;}
.cta-band p{color:var(--text-dim); max-width:600px; margin:0 auto 44px; font-size:1.3rem;}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.page-hero{padding:90px 0; min-height:auto;}
.history-section{padding:80px 0;}
.history-body p{font-size:1.05rem;}
.gallery-grid{grid-template-columns:repeat(2,1fr);}
.gallery-grid div:nth-child(1){grid-column:span 2;}
.address-strip .wrap{flex-direction:column; align-items:flex-start;}
.amenity-a{padding-left:0;}
}
.eyebrow{
font-family:'IBM Plex Mono',monospace;
font-size:1.1rem;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--ember-bright);
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}
.eyebrow::before{
content:"";
width:22px; height:22px;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
flex-shrink:0;
}
.knapped-br{
clip-path: polygon(
0 0, 100% 0, 100% calc(100% - var(--flake)),
calc(100% - var(--flake)) 100%, 0 100%
);
}
/* ---------- page intro ---------- */
.page-intro{padding:110px 0 90px;}
.page-intro h1{font-size:clamp(2.6rem,5.5vw,4.2rem); text-transform:uppercase; color:var(--stone); margin-bottom:22px;}
.page-intro p{max-width:640px; font-size:1.3rem; color:var(--text-dim);}
/* ---------- instructor blocks ---------- */
.instructor-block{
display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start;
padding:80px 0; border-top:1px solid var(--line);
}
.instructor-block:last-child{border-bottom:1px solid var(--line);}
.instructor-block.reverse{grid-template-columns:1.15fr 0.85fr;}
.instructor-block.reverse .photo-slot{order:2;}
.instructor-block.reverse .instructor-copy{order:1;}
.photo-slot{
aspect-ratio:4/5;
background:var(--bg-panel);
border:2px dashed var(--line);
display:flex; align-items:center; justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
}
.photo-slot.filled{
border:1px solid var(--line);
}
.photo-slot.filled img{
width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(15%) contrast(1.05);
}
.photo-slot .slot-label{
font-family:'IBM Plex Mono',monospace;
font-size:0.85rem;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--stone-dim);
padding:0 20px;
}
.photo-slot .plus{
display:block; font-size:2.4rem; color:var(--ember); margin-bottom:14px; font-family:'Fraunces',serif; font-weight:400;
}
.instructor-copy .role-tag{
font-family:'IBM Plex Mono',monospace; font-size:0.95rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ember-bright); margin-bottom:14px; display:block;
}
.instructor-copy h2{font-size:clamp(1.9rem,3vw,2.6rem); text-transform:uppercase; margin-bottom:24px;}
.instructor-copy .bio p{color:var(--text-dim); font-size:1.15rem; margin-bottom:18px;}
.instructor-copy .bio p:last-child{margin-bottom:0;}
.instructor-copy .bio-pending{
font-family:'IBM Plex Mono',monospace; font-size:1.1rem; letter-spacing:0.05em;
color:var(--stone-dim); font-style:normal;
border-left:2px solid var(--line); padding-left:20px;
}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.instructor-block, .instructor-block.reverse{grid-template-columns:1fr; gap:36px;}
.instructor-block.reverse .photo-slot{order:0;}
.instructor-block.reverse .instructor-copy{order:0;}
.page-intro{padding:70px 0 50px;}
.instructor-block{padding:56px 0;}
}
/* ---------- page intro ---------- */
.page-intro{padding:110px 0 70px;}
.page-intro p{max-width:680px; font-size:1.3rem; color:var(--text-dim);}
/* ---------- lineage chain ---------- */
.chain{
display:flex; align-items:center; flex-wrap:wrap; gap:0;
padding:36px 0 100px;
border-bottom:1px solid var(--line);
}
.chain-link{
font-family:'IBM Plex Mono',monospace;
font-size:0.98rem; letter-spacing:0.04em;
color:var(--stone-dim);
padding:10px 0;
}
.chain-link.current{color:var(--ember-bright);}
.chain-arrow{color:var(--ember); margin:0 16px; font-size:1.1rem;}
/* ---------- lineage blocks ---------- */
.lineage-block{
display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start;
padding:80px 0; border-top:1px solid var(--line);
}
.lineage-block:last-child{border-bottom:1px solid var(--line);}
.lineage-block.reverse{grid-template-columns:1.15fr 0.85fr;}
.lineage-block.reverse .photo-slot{order:2;}
.lineage-block.reverse .lineage-copy{order:1;}
.lineage-copy .link-tag{
font-family:'IBM Plex Mono',monospace; font-size:0.95rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ember-bright); margin-bottom:14px; display:block;
}
.lineage-copy h2{font-size:clamp(1.9rem,3vw,2.6rem); text-transform:uppercase; margin-bottom:8px;}
.lineage-copy .years{
font-family:'IBM Plex Mono',monospace; font-size:1.05rem; color:var(--stone-dim); margin-bottom:24px; display:block;
}
.lineage-copy .bio p{color:var(--text-dim); font-size:1.15rem; margin-bottom:18px;}
.lineage-copy .bio p:last-child{margin-bottom:0;}
.lineage-copy .values{
margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
display:flex; gap:12px; flex-wrap:wrap;
}
.value-chip{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.06em;
color:var(--stone); border:1px solid var(--line); padding:8px 16px;
text-transform:uppercase;
}
.lineage-copy .note{
font-family:'IBM Plex Mono',monospace; font-size:1rem; letter-spacing:0.03em;
color:var(--stone-dim); border-left:2px solid var(--line); padding-left:20px;
}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.lineage-block, .lineage-block.reverse{grid-template-columns:1fr; gap:36px;}
.lineage-block.reverse .photo-slot{order:0;}
.lineage-block.reverse .lineage-copy{order:0;}
.page-intro{padding:70px 0 40px;}
.lineage-block{padding:56px 0;}
.chain{padding:24px 0 60px;}
.chain-arrow{margin:0 10px;}
}
/* ---------- page intro ---------- */
.page-intro{padding:110px 0 80px;}
.page-intro p.callout{color:var(--ember-bright); font-weight:500; margin-top:8px;}
.btn{
font-family:'IBM Plex Mono',monospace;
font-size:1.1rem; letter-spacing:0.08em; text-transform:uppercase;
padding:20px 38px;
display:inline-block;
border:none; cursor:pointer;
transition:all .2s;
}
.btn-ghost{
border:1px solid var(--line); color:var(--stone); background:none;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
/* ---------- contact layout ---------- */
.contact-grid{
display:grid; grid-template-columns:1.3fr 0.9fr; gap:80px; align-items:start;
padding-bottom:130px;
}
/* ---------- form ---------- */
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.field{margin-bottom:26px;}
.field label{
display:block; font-family:'IBM Plex Mono',monospace; font-size:0.85rem;
letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px;
}
.field input, .field textarea{
width:100%; background:var(--bg-panel); border:1px solid var(--line);
color:var(--text); font-family:'Inter',sans-serif; font-size:1.05rem;
padding:16px 18px; transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus{
outline:none; border-color:var(--ember); background:var(--bg-panel-2);
}
.field textarea{resize:vertical; min-height:150px;}
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown){
border-color:#8a3b3b;
}
.form-status{
margin-top:18px; font-size:0.98rem; color:var(--ember-bright);
display:none;
}
.form-status.visible{display:block;}
/* ---------- contact info panel ---------- */
.contact-info{
background:var(--bg-panel); border:1px solid var(--line);
padding:52px 44px;
}
.info-block{padding:26px 0; border-top:1px solid var(--line);}
.info-block:first-child{border-top:none; padding-top:0;}
.info-block .label{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ember-bright); margin-bottom:12px; display:block;
}
.info-block .value{
font-family:'Fraunces',serif; font-size:1.4rem; color:var(--stone); line-height:1.4;
}
.info-block .value a{transition:color .2s;}
.info-block .value a:hover{color:var(--ember-bright);}
.contact-info .btn{width:100%; text-align:center; margin-top:8px;}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.page-intro{padding:70px 0 50px;}
.contact-grid{grid-template-columns:1fr; gap:60px; padding-bottom:80px;}
.form-row{grid-template-columns:1fr;}
.contact-info{padding:38px 30px;}
}
/* ---------- page hero ---------- */
.page-hero{
position:relative;
min-height:72vh;
display:flex; align-items:center;
padding:120px 0;
}
.page-hero-bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.72) 55%, rgba(10,9,8,0.98) 100%),
url('images/kids-class-group.jpg') center 30% / cover no-repeat;
filter: grayscale(35%) contrast(1.08);
}
.page-hero h1{
font-size:clamp(2.8rem, 6.5vw, 5rem);
line-height:1.02;
color:var(--stone);
margin-bottom:24px;
text-transform:uppercase;
}
.kids-h1{white-space:nowrap;}
.page-hero .subtitle{
font-family:'IBM Plex Mono',monospace;
font-size:1.35rem;
letter-spacing:0.04em;
color:var(--ember-bright);
margin-bottom:36px;
}
.page-hero .body-copy{
max-width:640px;
font-size:1.3rem;
color:var(--text-dim);
}
.age-notice{
font-family:'IBM Plex Mono',monospace; font-size:1.05rem; letter-spacing:0.04em;
color:var(--gold); margin-top:32px; text-transform:uppercase;
}
/* ---------- section shell ---------- */
section{padding:130px 0; position:relative;}
.section-head{max-width:820px; margin-bottom:70px;}
.section-head h2{font-size:clamp(2.6rem,5vw,3.6rem); text-transform:uppercase;}
.section-head p{color:var(--text-dim); margin-top:22px; font-size:1.3rem;}
/* ---------- age tracks ---------- */
.track-grid{
display:grid; grid-template-columns:1fr 1fr; gap:2px;
background:var(--line); border:1px solid var(--line);
}
.track-card{background:var(--bg-panel); padding:52px 46px;}
.track-card .age{
font-family:'IBM Plex Mono',monospace; font-size:1.05rem; color:var(--ember-bright); letter-spacing:0.14em;
}
.track-card h3{font-size:2rem; margin:18px 0 16px; text-transform:uppercase;}
.track-card p{color:var(--text-dim); font-size:1.1rem;}
/* ---------- what they learn ---------- */
.learn-list{border-top:1px solid var(--line);}
.learn-item{border-bottom:1px solid var(--line); display:flex; gap:26px; padding:30px 4px; align-items:flex-start;}
.learn-item .bullet{
width:10px; height:10px; border-radius:50%; background:var(--ember); margin-top:10px; flex-shrink:0;
}
.learn-item h4{font-size:1.3rem; text-transform:uppercase; margin-bottom:8px;}
.learn-item p{color:var(--text-dim); font-size:1.1rem; max-width:640px;}
/* ---------- cta band ---------- */
.cta-band{
background:var(--bg-panel-2);
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
text-align:center;
padding:140px 0;
}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.page-hero{padding:90px 0; min-height:auto;}
.track-grid{grid-template-columns:1fr;}
section{padding:80px 0;}
.kids-h1{white-space:normal;}
}
.btn{
font-family:'IBM Plex Mono',monospace;
font-size:1rem; letter-spacing:0.08em; text-transform:uppercase;
padding:16px 30px;
display:inline-block;
border:none; cursor:pointer;
transition:all .2s;
}
.btn-primary{
background:var(--ember); color:#fff;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.btn-ghost{
border:1px solid var(--line); color:var(--stone); background:none;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.note-strip{
background:var(--bg-panel-2); border:1px solid var(--line);
padding:18px 26px; margin-bottom:20px;
font-family:'IBM Plex Mono',monospace; font-size:0.9rem; color:var(--text-dim);
}
/* ---------- calendar nav bar ---------- */
.cal-nav{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
padding-bottom:36px; border-bottom:1px solid var(--line); margin-bottom:44px;
}
.cal-nav-arrows{display:flex; align-items:center; gap:14px;}
.cal-arrow-btn{
width:52px; height:52px; border:1px solid var(--line); background:var(--bg-panel);
color:var(--stone); font-size:1.4rem; cursor:pointer; transition:all .2s;
display:flex; align-items:center; justify-content:center;
}
.cal-arrow-btn:hover{border-color:var(--ember); color:var(--ember-bright);}
.cal-label-btn{
background:none; border:none; cursor:pointer;
font-family:'Fraunces',serif; font-size:1.7rem; color:var(--stone);
display:flex; align-items:center; gap:12px; transition:color .2s;
}
.cal-label-btn:hover{color:var(--ember-bright);}
.cal-label-btn .cal-icon{color:var(--ember); font-family:'IBM Plex Mono',monospace; font-size:1.1rem;}
.cal-nav-actions{display:flex; align-items:center; gap:14px;}
/* ---------- week grid ---------- */
.week-grid{
display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
background:var(--line); border:1px solid var(--line);
margin-bottom:60px;
}
.day-col{
background:var(--bg-panel);
display:flex; flex-direction:column;
cursor:pointer;
transition:background .2s;
}
.day-col:hover{background:var(--bg-panel-2);}
.day-col.today{box-shadow:inset 0 3px 0 var(--ember);}
.day-head{padding:22px 16px 16px; text-align:center; border-bottom:1px solid var(--line);}
.day-head .dname{
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--text-dim);
}
.day-head .dnum{
font-family:'Fraunces',serif; font-size:1.9rem; color:var(--stone); margin-top:6px;
}
.day-col.today .dnum{color:var(--ember-bright);}
.day-chips{padding:16px 12px; flex:1; display:flex; flex-direction:column; gap:8px;}
.chip{
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--text-dim);
border-left:2px solid var(--ember); padding:6px 8px; background:var(--bg-panel-2);
line-height:1.35;
}
.chip .chip-name{display:block; color:var(--stone); font-size:0.82rem; margin-top:2px;}
.no-class{
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--stone-dim);
padding:10px 8px; opacity:0.6;
}
.day-toggle{
text-align:center; padding:10px; font-family:'IBM Plex Mono',monospace;
font-size:0.75rem; color:var(--ember); letter-spacing:0.08em; text-transform:uppercase;
border-top:1px solid var(--line);
}
/* ---------- day detail (expanded) ---------- */
.day-detail{
grid-column:1 / -1;
max-height:0; overflow:hidden; opacity:0;
background:var(--bg-panel-2);
transition:max-height .4s ease, opacity .35s ease, padding .4s ease;
border-top:1px solid var(--line);
}
.day-detail.open{
max-height:900px; opacity:1;
padding:40px 36px;
animation:revealDay .4s ease;
}
@keyframes revealDay{
from{transform:translateY(-14px); opacity:0;}
to{transform:translateY(0); opacity:1;}
}
.day-detail-head{
display:flex; justify-content:space-between; align-items:baseline; margin-bottom:28px; flex-wrap:wrap; gap:12px;
}
.day-detail-head h3{font-size:1.9rem; text-transform:uppercase;}
.day-detail-close{
background:none; border:1px solid var(--line); color:var(--stone-dim);
width:36px; height:36px; cursor:pointer; font-size:1.1rem;
transition:all .2s;
}
.day-detail-close:hover{border-color:var(--ember); color:var(--ember-bright);}
.day-detail-actions{display:flex; align-items:center; gap:12px;}
.edit-day-btn{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase;
padding:12px 20px; border:1px solid var(--line); background:none; color:var(--stone-dim);
cursor:not-allowed; opacity:0.6;
}
.class-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line);}
.class-card{background:var(--bg-panel); transition:background .2s;}
.class-card-head{padding:26px 24px; cursor:pointer; position:relative;}
.class-card-head:hover{background:var(--bg-panel-2);}
.class-card .time{
font-family:'IBM Plex Mono',monospace; font-size:1.05rem; color:var(--ember-bright); letter-spacing:0.04em;
}
.class-card h4{font-size:1.3rem; margin:12px 0 8px; text-transform:uppercase; padding-right:30px;}
.class-card p{color:var(--text-dim); font-size:0.98rem;}
.class-toggle-icon{
position:absolute; top:26px; right:24px;
color:var(--ember); font-family:'IBM Plex Mono',monospace; font-size:1.4rem;
transition:transform .25s ease;
}
.class-card.expanded .class-toggle-icon{transform:rotate(45deg);}
.class-focus-panel{
max-height:0; overflow:hidden; opacity:0;
transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
background:var(--bg-panel-2); border-top:0px solid var(--line);
}
.class-card.expanded .class-focus-panel{
max-height:420px; opacity:1; padding:24px; border-top-width:1px;
animation:revealDay .35s ease;
}
.class-focus-panel .focus-rows{grid-template-columns:1fr; gap:16px;}
.class-focus-panel .today-focus-head h4{padding-right:0; margin:0; font-size:0.85rem;}
.no-class-detail{color:var(--text-dim); font-size:1.15rem; font-family:'Fraunces',serif;}
/* ---------- add event / special events ---------- */
.events-container{margin-top:24px;}
.events-loading{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--stone-dim); padding:16px 4px;
}
.special-event .class-card-head{border-left:3px solid var(--gold);}
.event-badge{
display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em;
text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); padding:4px 10px; margin-bottom:12px;
}
.add-event-btn{
width:100%; margin-top:20px; padding:20px; background:none;
border:2px dashed var(--line); color:var(--stone-dim);
font-family:'IBM Plex Mono',monospace; font-size:0.9rem; letter-spacing:0.06em; text-transform:uppercase;
cursor:pointer; transition:all .2s;
}
.add-event-btn:hover{border-color:var(--ember); color:var(--ember-bright);}
.event-form{
margin-top:20px; padding:26px 24px; background:var(--bg-panel); border:1px solid var(--line);
}
.event-form .focus-row{margin-bottom:18px;}
.event-form .focus-row:last-of-type{margin-bottom:0;}
.event-form-status{
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--stone-dim); margin-top:12px;
}
/* ---------- month picker overlay ---------- */
.picker-overlay{
position:fixed; inset:0; background:rgba(10,9,8,0.82);
display:flex; align-items:center; justify-content:center;
z-index:100; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
padding:20px;
}
.picker-overlay.open{opacity:1; visibility:visible;}
.picker-panel{
background:var(--bg-panel); border:1px solid var(--line);
padding:36px; width:100%; max-width:420px;
position:relative;
transform:scale(0.95); transition:transform .25s;
}
.picker-overlay.open .picker-panel{transform:scale(1);}
.picker-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.picker-head h3{font-size:1.5rem; text-transform:uppercase;}
.picker-nav{display:flex; gap:8px;}
.picker-nav button{
width:36px; height:36px; border:1px solid var(--line); background:none; color:var(--stone);
cursor:pointer; transition:all .2s;
}
.picker-nav button:hover{border-color:var(--ember); color:var(--ember-bright);}
.picker-close{
position:absolute; top:14px; right:14px;
background:none; border:none; color:var(--stone-dim); font-size:1.3rem; cursor:pointer;
}
.picker-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;}
.picker-dow{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--text-dim); padding:6px 0;}
.picker-day{
padding:10px 0; font-family:'Inter',sans-serif; font-size:0.92rem; color:var(--text-dim);
cursor:pointer; border:1px solid transparent; transition:all .15s;
}
.picker-day:hover{border-color:var(--ember); color:var(--stone);}
.picker-day.muted{color:var(--stone-dim); opacity:0.4;}
.picker-day.today{color:var(--ember-bright); font-weight:600;}
.picker-day.selected{background:var(--ember); color:#fff;}
/* ---------- instructor login modal ---------- */
.auth-panel{max-width:400px;}
.auth-demo-tag{
font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
color:var(--gold); border:1px solid var(--line); padding:8px 12px; margin-bottom:24px; display:inline-block;
}
.auth-field{margin-bottom:20px;}
.auth-field label{
display:block; font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px;
}
.auth-field input{
width:100%; background:var(--bg-panel-2); border:1px solid var(--line);
color:var(--text); font-family:'Inter',sans-serif; font-size:1rem;
padding:12px 14px; transition:border-color .2s;
}
.auth-field input:focus{outline:none; border-color:var(--ember);}
.auth-submit{width:100%; text-align:center; margin-top:6px;}
.auth-error{
font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:#c0655a;
margin-top:14px; min-height:1.2em;
}
.auth-note{
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--stone-dim);
margin-top:20px; line-height:1.5;
}
.logged-in-badge{
display:flex; align-items:center; gap:10px;
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--ember-bright);
}
.logged-in-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--ember-bright);}
/* ---------- today's focus (per-day editable) ---------- */
.today-focus{
border:1px solid var(--line); background:var(--bg-panel);
padding:26px 28px; margin-bottom:28px;
}
.today-focus-head{
display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.today-focus-head h4{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ember-bright);
}
.focus-edit-btn{
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
background:none; border:1px solid var(--line); color:var(--stone); padding:8px 16px; cursor:pointer;
transition:all .2s;
}
.focus-edit-btn:hover{border-color:var(--ember); color:var(--ember-bright);}
.focus-rows{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.focus-row .flabel{
font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.1em;
text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; display:block;
}
.focus-row .fvalue{font-family:'Fraunces',serif; font-size:1.25rem; color:var(--stone);}
.focus-row .fvalue.empty{color:var(--stone-dim); font-family:'Inter',sans-serif; font-size:1rem; font-style:italic;}
.focus-row input{
width:100%; background:var(--bg-panel-2); border:1px solid var(--line);
color:var(--text); font-family:'Inter',sans-serif; font-size:1rem; padding:10px 12px;
}
.focus-row input:focus{outline:none; border-color:var(--ember);}
.focus-edit-actions{display:flex; gap:10px; margin-top:18px;}
.focus-edit-actions .btn{padding:10px 22px; font-size:0.85rem;}
/* ---------- section shell ---------- */
section{padding-bottom:130px; position:relative;}
@media(max-width:900px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.page-intro{padding:70px 0 50px;}
section{padding-bottom:80px;}
.week-grid{grid-template-columns:1fr;}
.day-col{border-bottom:1px solid var(--line);}
.day-head{display:flex; align-items:center; justify-content:space-between; text-align:left; padding:16px 18px;}
.day-head .dnum{margin-top:0;}
.day-chips{flex-direction:row; flex-wrap:wrap;}
.day-detail.open{padding:28px 22px;}
.cal-label-btn{font-size:1.3rem;}
}
.page-hero-bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.72) 55%, rgba(10,9,8,0.98) 100%),
url('https://images.squarespace-cdn.com/content/v1/63cbe47df380a770b2b5c9df/5d6f9198-4484-44a0-be13-c509cb14df6f/WPBJJ-adult-fundamental-beginners-class.jpg') center 35% / cover no-repeat;
filter: grayscale(35%) contrast(1.08);
}
.adults-h1{white-space:nowrap;}
/* ---------- class tracks ---------- */
.track-grid{
display:grid; grid-template-columns:1fr 1fr; gap:2px;
background:var(--line); border:1px solid var(--line);
}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.page-hero{padding:90px 0; min-height:auto;}
.track-grid{grid-template-columns:1fr;}
section{padding:80px 0;}
.adults-h1{white-space:normal;}
}
.knapped-tl{clip-path: polygon(var(--flake) 0, 100% 0, 100% 100%, 0 100%, 0 var(--flake));}
.nav-link-btn .caret{font-size:1rem; color:var(--ember); transition:transform .25s ease; display:inline-block;}
/* ---------- page intro ---------- */
.page-intro{padding:100px 0 60px;}
.page-intro h1{font-size:clamp(2.6rem,5.5vw,4.2rem); text-transform:uppercase; color:var(--stone); margin-bottom:20px;}
.page-intro p{max-width:640px; font-size:1.25rem; color:var(--text-dim);}
.btn{
font-family:'IBM Plex Mono',monospace;
font-size:1rem; letter-spacing:0.08em; text-transform:uppercase;
padding:18px 34px; display:inline-block; border:none; cursor:pointer;
transition:all .2s;
}
.btn-primary:disabled{opacity:0.5; cursor:not-allowed;}
/* ---------- auth card ---------- */
.auth-wrap{max-width:520px; margin:0 auto; padding-bottom:140px;}
.auth-card{background:var(--bg-panel); border:1px solid var(--line); padding:44px 40px;}
.verify-note{
font-family:'IBM Plex Mono',monospace; font-size:0.8rem; letter-spacing:0.04em;
color:var(--gold); border:1px solid var(--gold); padding:12px 16px; margin-bottom:28px;
}
.auth-tabs{display:flex; gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:36px;}
.auth-tab{
flex:1; background:var(--bg-panel-2); border:none; cursor:pointer;
padding:16px 10px; color:var(--text-dim);
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase;
transition:all .2s;
}
.auth-tab.active{background:var(--ember); color:#fff;}
.auth-tab:not(.active):hover{color:var(--stone);}
.field{margin-bottom:22px;}
.field label{
display:block; font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:9px;
}
.field input, .field textarea{
width:100%; background:var(--bg-panel-2); border:1px solid var(--line);
color:var(--text); font-family:'Inter',sans-serif; font-size:1rem;
padding:14px 16px; transition:border-color .2s;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--ember);}
.field textarea{resize:vertical; min-height:90px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.full-btn{width:100%; text-align:center;}
.form-msg{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem;
margin-top:16px; min-height:1.2em; line-height:1.5;
}
.form-msg.error{color:#c0655a;}
.form-msg.success{color:var(--ember-bright);}
.auth-hint{
font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--stone-dim);
margin-top:22px; line-height:1.6;
}
.link-btn{
background:none; border:none; padding:0; cursor:pointer;
color:var(--ember-bright); font-family:inherit; font-size:inherit; text-decoration:underline;
}
/* ---------- profile view ---------- */
.profile-wrap{max-width:900px; margin:0 auto; padding-bottom:140px;}
.profile-head{
display:flex; align-items:center; gap:32px; flex-wrap:wrap;
padding-bottom:36px; border-bottom:1px solid var(--line); margin-bottom:44px;
}
.avatar-block{position:relative; flex-shrink:0;}
.avatar{
width:140px; height:140px; border-radius:50%; overflow:hidden;
border:1px solid var(--gold); background:var(--bg-panel-2);
display:flex; align-items:center; justify-content:center;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar .initials{font-family:'Fraunces',serif; font-size:2.6rem; color:var(--stone-dim);}
.avatar-edit{
margin-top:14px; width:100%;
font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
background:none; border:1px solid var(--line); color:var(--stone-dim);
padding:9px 12px; cursor:pointer; transition:all .2s;
}
.avatar-edit:hover{border-color:var(--ember); color:var(--ember-bright);}
.profile-head-text h2{font-size:2.2rem; text-transform:uppercase; margin-bottom:6px;}
.profile-head-text .member-email{
font-family:'IBM Plex Mono',monospace; font-size:0.95rem; color:var(--text-dim);
}
.role-badge{
display:inline-block; margin-top:12px;
font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
padding:6px 14px; border:1px solid var(--line); color:var(--text-dim);
}
.role-badge.role-superuser{border-color:var(--ember); color:var(--ember-bright);}
.role-badge.role-admin{border-color:var(--gold); color:var(--gold);}
.belt-display{display:flex; align-items:center; gap:12px; margin-top:14px;}
.belt-bar{display:inline-flex; align-items:center; justify-content:flex-end; gap:4px;
width:76px; height:22px; border:1px solid #000; border-radius:2px; padding-right:5px;}
.belt-bar .stripe{width:4px; height:14px; background:#fff; display:inline-block;
box-shadow:0 0 0 1px rgba(0,0,0,.5);}
.belt-label{font-family:'IBM Plex Mono',monospace; font-size:0.8rem;
letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);}
.profile-section{margin-bottom:44px;}
.profile-section h3{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ember-bright); margin-bottom:22px;
padding-bottom:12px; border-bottom:1px solid var(--line);
}
.profile-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hidden{display:none !important;}
@media(max-width:860px){
.nav-links{display:none;}
.mobile-toggle{display:block;}
.nav-links.mobile-open{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
width:100%; border-top:1px solid var(--line); padding-top:0; margin-top:22px;
}
.nav-links.mobile-open > a{width:100%; padding:20px 4px; border-bottom:1px solid var(--line); display:block;}
.nav-links.mobile-open .nav-item{width:100%; border-bottom:1px solid var(--line);}
.nav-links.mobile-open .nav-link-btn{width:100%; padding:20px 4px; justify-content:space-between;}
.nav-links.mobile-open .dropdown{
position:static; opacity:1; visibility:visible; transform:none;
max-height:0; overflow:hidden; border:none; clip-path:none;
background:var(--bg-panel-2); transition:max-height .3s ease;
}
.nav-links.mobile-open .nav-item.open .dropdown{max-height:400px;}
.nav-links.mobile-open .dropdown a{padding-left:20px;}
.nav-top{flex-wrap:wrap; row-gap:14px;}
.nav-cta{font-size:0.85rem; padding:14px 20px; letter-spacing:0.04em;}
.nav-actions{gap:8px;}
.acct-name{display:none;}
.acct-btn{padding:9px 12px 9px 9px;}
.acct-menu{right:0; min-width:210px;}
.nav-portal{font-size:0.75rem; padding:13px 14px; letter-spacing:0.02em;}
.mobile-toggle{font-size:2rem; padding:4px 8px;}
.badge-word .l1{font-size:2rem;}
.badge-word .l2{font-size:0.95rem;}
.footer-grid{grid-template-columns:1fr 1fr;}
.page-intro{padding:60px 0 40px;}
.auth-card{padding:32px 24px;}
.field-row{grid-template-columns:1fr; gap:0;}
.profile-head{gap:22px;}
.avatar{width:110px; height:110px;}
}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; color:var(--text);}
.wrap{max-width:1400px; margin:0 auto; padding:0 32px;}
.eyebrow{
font-family:'IBM Plex Mono',monospace; font-size:1.1rem; letter-spacing:0.18em;
text-transform:uppercase; color:var(--ember-bright); margin-bottom:18px;
}
/* ---- slim header (kiosk-friendly) ---- */
header{
background:var(--bg-panel); border-bottom:1px solid var(--line);
padding:20px 0;
}
.kiosk-head{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.kiosk-brand{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--stone); text-transform:uppercase; line-height:1.1;}
.kiosk-brand span{
display:block; font-family:'IBM Plex Mono',monospace; font-size:0.7rem;
letter-spacing:0.14em; color:var(--text-dim); margin-top:4px;
}
.kiosk-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.btn{
font-family:'IBM Plex Mono',monospace; font-size:0.9rem; letter-spacing:0.08em;
text-transform:uppercase; padding:14px 24px; display:inline-block;
border:none; cursor:pointer; transition:all .2s;
}
.btn-primary{background:var(--ember); color:#fff;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);}
.btn-ghost{border:1px solid var(--line); color:var(--stone); background:none;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);}
.btn-ghost:hover{border-color:var(--ember); color:var(--ember-bright);}
/* ---- session bar ---- */
.session-bar{
display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
padding:22px 0 26px; border-bottom:1px solid var(--line); margin-bottom:36px;
}
.session-date{font-family:'Fraunces',serif; font-size:1.8rem; color:var(--stone);}
.session-meta{font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--text-dim); margin-top:4px;}
.class-select{
background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text);
font-family:'Inter',sans-serif; font-size:1rem; padding:14px 16px; min-width:260px;
}
.class-select:focus{outline:none; border-color:var(--ember);}
.count-pill{
font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.08em;
text-transform:uppercase; color:var(--ember-bright);
border:1px solid var(--ember); padding:10px 18px;
}
/* ---- search ---- */
.search-row{margin-bottom:32px;}
.search-row input{
width:100%; background:var(--bg-panel-2); border:1px solid var(--line);
color:var(--text); font-family:'Inter',sans-serif; font-size:1.1rem; padding:16px 20px;
}
.search-row input:focus{outline:none; border-color:var(--ember);}
/* ---- member grid ---- */
.member-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
gap:20px; padding-bottom:100px;
}
.grid-divider{grid-column:1/-1; margin:14px 0 4px; padding-top:14px;
border-top:1px solid var(--line);
font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--stone-dim);}
.member-tile{
background:var(--bg-panel); border:1px solid var(--line);
padding:24px 14px; text-align:center; cursor:pointer;
transition:all .18s; user-select:none; position:relative;
}
.member-tile:hover{border-color:var(--stone-dim); background:var(--bg-panel-2);}
.member-tile:active{transform:scale(0.96);}
.member-tile.checked-in{border-color:var(--ember); background:rgba(34,189,173,0.08);}
.tile-avatar{
width:88px; height:88px; border-radius:50%; margin:0 auto 14px;
overflow:hidden; border:1px solid var(--gold); background:var(--bg-panel-2);
display:flex; align-items:center; justify-content:center;
}
.member-tile.checked-in .tile-avatar{border-color:var(--ember);}
.tile-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.tile-avatar .initials{font-family:'Fraunces',serif; font-size:1.9rem; color:var(--stone-dim);}
.tile-name{
font-family:'Inter',sans-serif; font-size:1rem; font-weight:500; color:var(--stone);
line-height:1.3; word-break:break-word;
}
.tile-belt{display:inline-flex; align-items:center; justify-content:flex-end; gap:2px;
width:44px; height:9px; border:1px solid #000; border-radius:2px;
margin-top:8px; padding-right:3px;}
.tile-belt i{width:2px; height:5px; background:#fff; display:inline-block;
box-shadow:0 0 0 1px rgba(0,0,0,.5);}
.tile-status{
font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
text-transform:uppercase; margin-top:8px; min-height:1.2em;
color:var(--stone-dim);
}
.member-tile.checked-in .tile-status{color:var(--ember-bright);}
.check-mark{
position:absolute; top:10px; right:12px; color:var(--ember-bright);
font-size:1.2rem; opacity:0; transition:opacity .2s;
}
.member-tile.checked-in .check-mark{opacity:1;}
.state-msg{
padding:60px 20px; text-align:center; color:var(--text-dim);
font-family:'IBM Plex Mono',monospace; font-size:1rem;
}
.state-msg.error{color:#c0655a;}
/* ---- toast ---- */
.toast{
position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px);
background:var(--ember); color:#fff; padding:18px 34px;
font-family:'IBM Plex Mono',monospace; font-size:1rem; letter-spacing:0.04em;
opacity:0; pointer-events:none; transition:all .3s; z-index:100;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.undo{background:var(--bg-panel); border:1px solid var(--gold); color:var(--gold);}
@media(max-width:700px){
.wrap{padding:0 18px;}
.member-grid{grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:14px;}
.tile-avatar{width:70px; height:70px;}
.session-date{font-size:1.4rem;}
.class-select{min-width:100%;}
}
:root{
--bg:#0a0908; --bg-panel:#141210; --bg-panel-2:#1c1814; --line:#332c24;
--stone:#cdc2ab; --stone-dim:#8f8574; --text:#ece6d8; --text-dim:#a89f8d;
--ember:#22bdad; --ember-bright:#3ddbc8; --gold:#8f7a4d; --danger:#c0655a;
}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; color:var(--text);}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
header{background:var(--bg-panel); border-bottom:1px solid var(--line); padding:20px 0;}
.cp-head{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cp-brand{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--stone); text-transform:uppercase; line-height:1.1;}
.cp-brand span{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.14em; color:var(--ember-bright); margin-top:4px;}
.btn{font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.06em;
text-transform:uppercase; padding:12px 22px; border:none; cursor:pointer; transition:all .2s;
display:inline-block;}
.btn-primary{background:var(--ember); color:#fff;
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);}
.btn-ghost{border:1px solid var(--line); color:var(--stone); background:none;
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);}
.btn-danger{border:1px solid var(--danger); color:var(--danger); background:none;
clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-sm{font-size:0.72rem; padding:9px 14px;}
.page-title{padding:44px 0 10px;}
.page-title h1{font-size:clamp(2rem,4vw,2.8rem); text-transform:uppercase; color:var(--stone);}
.notice{
background:var(--bg-panel-2); border:1px solid var(--gold); color:var(--gold);
padding:16px 22px; margin:24px 0;
font-family:'IBM Plex Mono',monospace; font-size:0.85rem;
}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:36px;}
.stat{background:var(--bg-panel); padding:22px 20px;}
.stat .n{font-family:'Fraunces',serif; font-size:1.9rem; color:var(--stone);}
.stat .l{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
text-transform:uppercase; color:var(--text-dim); margin-top:4px;}
.toolbar{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}
.toolbar input{flex:1; min-width:220px; background:var(--bg-panel-2);
border:1px solid var(--line); color:var(--text); font-size:1rem; padding:13px 16px;}
.toolbar input:focus{outline:none; border-color:var(--ember);}
.member-row{
background:var(--bg-panel); border:1px solid var(--line); margin-bottom:2px;
padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.m-avatar{width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0;
border:1px solid var(--gold); background:var(--bg-panel-2);
display:flex; align-items:center; justify-content:center;}
.m-avatar img{width:100%; height:100%; object-fit:cover;}
.m-avatar .ini{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--stone-dim);}
.m-info{flex:1; min-width:180px;}
.m-name{font-weight:500; color:var(--stone);}
.m-email{font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--text-dim); word-break:break-all;}
.m-meta{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--stone-dim); margin-top:3px;}
.m-history{margin-top:5px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.m-history .hist{color:var(--ember-bright);}
.m-history .hist.stale{color:var(--stone-dim);}
.m-history .hist-sep{color:var(--line);}
.m-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.role-pill{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.1em;
text-transform:uppercase; padding:6px 12px; border:1px solid var(--line); color:var(--text-dim);}
.role-pill.superuser{border-color:var(--ember); color:var(--ember-bright);}
.role-pill.admin{border-color:var(--gold); color:var(--gold);}
.role-select{background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text);
font-family:'IBM Plex Mono',monospace; font-size:0.78rem; padding:9px 10px;}
.role-select:focus{outline:none; border-color:var(--ember);}
.belt-chip{display:inline-flex; align-items:center;}
.belt-bar{display:inline-flex; align-items:center; justify-content:flex-end; gap:3px;
width:56px; height:16px; border:1px solid #000; border-radius:2px; padding-right:4px;}
.belt-bar .stripe{width:3px; height:10px; background:#fff; display:inline-block;
box-shadow:0 0 0 1px rgba(0,0,0,.5);}
.promo-date{background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text);
font-family:'IBM Plex Mono',monospace; font-size:.75rem; padding:8px 10px;
color-scheme:dark; min-width:132px;}
.promo-date:focus{outline:none; border-color:var(--ember);}
.program-select{min-width:104px;}
.belt-select{min-width:92px;} .stripe-select{min-width:64px;}
.sub-toggle{cursor:pointer; border:1px solid var(--line); background:none;}
.sub-toggle.sub-on{border-color:var(--ember); color:var(--ember-bright);}
.sub-toggle.sub-off{color:var(--stone-dim);}
.sub-toggle:hover{opacity:.8;}
.membership-tag{font-family:'IBM Plex Mono',monospace; font-size:0.68rem;
letter-spacing:0.08em; text-transform:uppercase; color:var(--stone-dim);
border:1px dashed var(--line); padding:6px 12px;}
.state{padding:50px 20px; text-align:center; color:var(--text-dim);
font-family:'IBM Plex Mono',monospace;}
.state.error{color:var(--danger);}
.section{margin-bottom:60px;}
.section > h2{font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.14em;
text-transform:uppercase; color:var(--ember-bright); padding-bottom:12px;
border-bottom:1px solid var(--line); margin-bottom:22px;}
.collapse-head{
width:100%; background:none; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:14px;
font-family:'IBM Plex Mono',monospace; font-size:.85rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--ember-bright); text-align:left;
padding:0 0 12px; border-bottom:1px solid var(--line); margin-bottom:0;
transition:color .2s;
}
.collapse-head:hover{color:var(--stone);}
.collapse-icon{font-size:1.3rem; line-height:1; transition:transform .25s;}
.collapse-head[aria-expanded="true"] .collapse-icon{transform:rotate(45deg);}
.collapse-body{
max-height:0; overflow:hidden; opacity:0;
transition:max-height .4s ease, opacity .3s ease, margin .3s ease;
}
.collapse-body.open{max-height:20000px; opacity:1; margin-top:22px;}
.chart-card{background:var(--bg-panel); border:1px solid var(--line); padding:26px 24px; margin-bottom:2px;}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px; margin-bottom:6px;}
.chart-head h3{font-family:'Fraunces',serif; font-size:1.3rem; color:var(--stone);}
.chart-range{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--text-dim);}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 20px;}
.legend span{display:flex; align-items:center; gap:7px;
font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-dim);}
.swatch{width:12px; height:12px; display:inline-block;}
.sw-kids{background:#e879a6;} .sw-teens{background:#e3c04a;} .sw-adults{background:#22bdad;}
.chart-svg{width:100%; height:auto; display:block; overflow:visible;}
.chart-empty{padding:34px 10px; text-align:center; color:var(--stone-dim);
font-family:'IBM Plex Mono',monospace; font-size:.85rem;}
.modal{position:fixed; inset:0; background:rgba(10,9,8,.85); display:flex;
align-items:center; justify-content:center; padding:20px; z-index:100;
opacity:0; visibility:hidden; transition:.2s;}
.modal.open{opacity:1; visibility:visible;}
.modal-box{background:var(--bg-panel); border:1px solid var(--danger);
padding:34px; max-width:460px; width:100%;}
.modal-box h3{font-size:1.4rem; margin-bottom:14px; color:var(--stone);}
.modal-box p{color:var(--text-dim); font-size:0.95rem; margin-bottom:12px;}
.modal-box .warn{color:var(--danger); font-family:'IBM Plex Mono',monospace; font-size:0.82rem;}
.modal-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
background:var(--ember); color:#fff; padding:16px 30px; font-family:'IBM Plex Mono',monospace;
font-size:0.9rem; opacity:0; pointer-events:none; transition:.3s; z-index:200;}
.toast.bad{background:var(--danger);}
@media(max-width:700px){
.wrap{padding:0 18px;}
.member-row{gap:12px;}
.m-actions{width:100%;}
}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
font-size:16px; line-height:1.6; overflow-x:hidden;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:1.1rem; letter-spacing:0.18em;
text-transform:uppercase; color:var(--ember-bright); margin-bottom:18px;}
.lib-head{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.lib-brand{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--stone);
text-transform:uppercase; line-height:1.1;}
.lib-brand span{display:block; font-family:'IBM Plex Mono',monospace; font-size:.7rem;
letter-spacing:.14em; color:var(--ember-bright); margin-top:4px;}
.lib-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn{font-family:'IBM Plex Mono',monospace; font-size:.85rem; letter-spacing:.06em;
text-transform:uppercase; padding:12px 22px; border:none; cursor:pointer;
transition:all .2s; display:inline-block;}
.btn-danger{border:1px solid var(--danger); color:var(--danger); background:none;}
.btn-sm{font-size:.72rem; padding:8px 14px;}
.page-title{padding:44px 0 8px;}
.page-title h1{font-size:clamp(2rem,4.5vw,3rem); text-transform:uppercase; color:var(--stone);}
.page-title p{color:var(--text-dim); margin-top:12px; max-width:620px;}
.filters{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 30px;
padding-bottom:24px; border-bottom:1px solid var(--line);}
.filters select, .filters input{background:var(--bg-panel-2); border:1px solid var(--line);
color:var(--text); font-family:'Inter',sans-serif; font-size:.95rem; padding:12px 14px;}
.filters select:focus, .filters input:focus{outline:none; border-color:var(--ember);}
.filters input{flex:1; min-width:200px;}
.vid-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:22px; padding-bottom:120px;}
.vid-card{background:var(--bg-panel); border:1px solid var(--line);}
.vid-frame{position:relative; width:100%; padding-top:56.25%; background:#000;}
.vid-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vid-body{padding:18px 20px;}
.vid-body h3{font-size:1.15rem; margin-bottom:8px; color:var(--stone);}
.vid-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.tag{font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.1em;
text-transform:uppercase; padding:5px 10px; border:1px solid var(--line); color:var(--text-dim);}
.tag.pos{border-color:var(--ember); color:var(--ember-bright);}
.tag.tech{border-color:var(--gold); color:var(--gold);}
.vid-notes{color:var(--text-dim); font-size:.92rem;}
.vid-admin{display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.state{padding:60px 20px; text-align:center; color:var(--text-dim);
font-family:'IBM Plex Mono',monospace;}
.state a{color:var(--ember-bright); text-decoration:underline;}
.modal{position:fixed; inset:0; background:rgba(10,9,8,.9); display:flex;
align-items:center; justify-content:center; padding:20px; z-index:200;
opacity:0; visibility:hidden; transition:.2s; overflow-y:auto;}
.modal-box{background:var(--bg-panel); border:1px solid var(--ember);
padding:34px; max-width:520px; width:100%; margin:auto;}
.modal-box h3{font-size:1.5rem; margin-bottom:22px; color:var(--stone);}
.field{margin-bottom:18px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.72rem;
letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px;}
.field input, .field textarea{width:100%; background:var(--bg-panel-2);
border:1px solid var(--line); color:var(--text); font-family:'Inter',sans-serif;
font-size:1rem; padding:12px 14px;}
.field textarea{min-height:80px; resize:vertical;}
.field-hint{font-family:'IBM Plex Mono',monospace; font-size:.72rem;
color:var(--stone-dim); margin-top:6px;}
.modal-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.modal-msg{font-family:'IBM Plex Mono',monospace; font-size:.8rem;
margin-top:14px; min-height:1.2em; color:var(--danger);}
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
background:var(--ember); color:#fff; padding:16px 30px;
font-family:'IBM Plex Mono',monospace; font-size:.9rem;
opacity:0; pointer-events:none; transition:.3s; z-index:300;}
@media(max-width:700px){
.wrap{padding:0 18px;}
.vid-grid{grid-template-columns:1fr;}
}