:root{
  /* paper — warmed toward the visiting card */
  --paper:#FBF6EE; --paper-2:#F7EEE1; --paper-3:#F2DFC9; --line:#E4D3BC;
  /* ink — warm bark. Was olive green (#474E2F/#333823/#7A8F78), which read
     muddy against the blush cream and fought the terracotta. Same roles,
     equal or better contrast, warm instead of cold. */
  --forest:#3B3128; --forest-dk:#2A2119; --sage:#7E6E5B;
  /* actions get their own token; they used to borrow the dark ink */
  --action:#A6521A; --action-hi:#C1621F;
  /* accent — logo orange, plus card sand */
  --rust:#B45A1D; --terracotta:#D06D26; --sand:#E3C39C; --clay:#CAB191;
  --gold:#C89A3C;
  /* Night Jar app palette */
  --night:#1C1B20; --night-2:#262430; --night-ink:#E6DFD0;
  --lavender:#B6A7D6; --moon:#F3EBD8; --nj-gold:#D4AF37;
  --ink:#2E2820; --muted:#6E6355;
  --display:'Fraunces',Georgia,serif; --body:'Commissioner',system-ui,sans-serif; --script:'Parisienne',cursive;
  --ease:cubic-bezier(.32,.72,0,1);   /* movement — long, soft settle */
  --ease-soft:cubic-bezier(.28,.11,.32,1); /* fades */
  --col:1160px; --gut:26px; --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:660px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--forest);margin:0;letter-spacing:-.012em}
h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.12}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem);line-height:1.18}
h3{font-size:1.1rem;line-height:1.3}
p{margin:0 0 1em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--forest);color:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin:0 0 14px}
.eyebrow.rust{color:var(--rust)}
.lede{font-size:1.08rem;color:var(--muted);max-width:52ch}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center-head{text-align:center;margin-bottom:38px}
.center-head .lede{margin:0 auto}
.script{font-family:var(--script);font-size:1.35rem;line-height:1.6;color:var(--forest)}
.script-lg{font-family:var(--script);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--rust);line-height:1.4;margin:0 0 .6em}
.fine{font-size:.85rem;color:var(--muted)}
.stores{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;font-family:var(--body);font-size:.95rem;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .16s,background .16s,color .16s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--action);color:#FFF8EF}
.btn-primary:hover{background:var(--action-hi)}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:#F7F2EA}
.btn-gold{background:var(--gold);color:#241A05}
.btn-onnight{background:transparent;color:#EFE9DA;border-color:rgba(239,233,218,.45)}
.btn-onnight:hover{background:#EFE9DA;color:var(--night)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 0}
.link-arrow{color:var(--rust);font-weight:600;font-size:.93rem;text-decoration:none;border-bottom:1.5px solid transparent}
.link-arrow::after{content:" →"}
.link-arrow:hover{border-bottom-color:var(--rust)}

/* header */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.head-in{max-width:var(--col);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:26px}
.logo{text-decoration:none;color:var(--forest);font-family:var(--display);font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;line-height:1.25;white-space:nowrap}
.logo em{display:block;font-family:var(--script);font-style:normal;text-transform:none;letter-spacing:0;font-size:1.5rem;line-height:.95}
.site-head nav{margin-left:auto}
.site-head ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin:0;padding:0}
.site-head a{font-size:.92rem;font-weight:500;text-decoration:none;padding-bottom:3px;border-bottom:1.5px solid transparent}
.site-head a:hover,.site-head a[aria-current]{border-bottom-color:var(--rust)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--body);font-weight:600;font-size:.88rem;color:var(--forest);cursor:pointer}

/* sections */
.band{padding:76px 0}
.band-alt{background:var(--paper-3)}
.band-night{background:var(--night);color:var(--night-ink)}
.band-night h2,.band-night h3{color:#F2ECDD}
.band-night .lede{color:#9EA8BC}
.band-night .eyebrow{color:var(--gold)}
.band-night .price{color:var(--gold);font-weight:600;font-size:1.05rem}
.hero{padding:72px 0 78px}
.hero.short{padding:60px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.hero-media img,.media img{border-radius:var(--r)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.reverse .media{order:-1}

/* cards */
.cards-2,.cards-3,.cards-4,.cards-5{display:grid;gap:22px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-5{grid-template-columns:repeat(5,1fr)}
.card,.event-card {background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card img,.event-card img,.event-history-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-b h3{margin-bottom:8px}
.card-b p{font-size:.95rem;color:var(--muted);flex:1}
.card .btn{align-self:flex-start;min-height:44px;padding:0 22px;font-size:.9rem}
.tagdate{display:inline-block;background:var(--rust);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin:0 0 10px;flex:none}
.place{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--rust);margin:0 0 6px}
.when{font-size:.86rem;color:var(--forest);font-weight:600;margin:0 0 8px}
.feel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px}
.feel h3{margin-bottom:10px}
.feel p{font-size:.94rem;color:var(--muted)}
.mini h3{margin-bottom:8px}
.mini p,.mini li{font-size:.92rem;color:var(--muted)}
.mini ul{margin:0;padding-left:18px}
.plainer .feel{text-align:left}
.overlay{gap:18px}
.path{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;display:block;min-height:330px}
.path img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.path>div{position:relative;padding:120px 22px 24px;background:linear-gradient(transparent,rgba(20,26,16,.88) 55%);color:#F4EFE4;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.path h3{color:#fff;margin-bottom:8px}
.path p{font-size:.92rem;color:#DDD8CB;margin-bottom:14px}
.path .link-arrow{color:#F3E4CE}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
.trio.tight{margin-top:26px;gap:22px}
.trio h3{margin-bottom:8px}
.trio p{font-size:.93rem;color:var(--muted);margin:0}
.band-night .trio p{color:#98A2B6}
.mini-3,.mini-4{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.mini-3{grid-template-columns:repeat(3,1fr)}
.mini-4{grid-template-columns:repeat(2,1fr)}
.mini-3 strong,.mini-4 strong{display:block;color:var(--forest);font-family:var(--display);font-weight:500}
.mini-3 span,.mini-4 span{font-size:.9rem;color:var(--muted)}
.feature-list{list-style:none;margin:24px 0 0;padding:0}
.feature-list li{margin-bottom:20px}
.feature-list strong{display:block;font-family:var(--display);font-size:1.08rem;color:var(--forest)}
.feature-list span{font-size:.95rem;color:var(--muted)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:0;padding:0;text-align:center}
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:var(--paper-3);color:var(--rust);font-weight:700;margin-bottom:14px}
.band-alt .steps .num{background:var(--paper)}
.steps p{font-size:.93rem;color:var(--muted)}
.quote-band blockquote{margin:0;background:var(--paper-3);border-radius:var(--r);padding:44px 48px;max-width:760px}
.quote-band p{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--forest);line-height:1.4}
.quote-band cite{font-style:normal;color:var(--rust);font-size:.9rem}
.cta-band{background:var(--paper-3);border-radius:var(--r);padding:52px 48px;text-align:center}
.band-alt .cta-band{background:var(--paper)}
.footprint{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.countries{list-style:none;margin:0;padding:0;columns:2;font-size:.98rem}
.countries li{margin-bottom:8px;break-inside:avoid}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:24px 0 0;padding:0;font-size:.88rem;color:var(--muted)}
.proof.wide{justify-content:center;gap:34px}
.signup{background:var(--forest);color:#F5F0E6;border-radius:20px;padding:52px 48px;text-align:center}
.signup h2{color:#F7F2EA}
.signup .lede{color:#DCD2C4;margin:0 auto}
.signup-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.signup-form.wide{justify-content:center}
.signup-form input{flex:1;min-width:230px;max-width:340px;min-height:50px;border:0;border-radius:999px;padding:0 22px;font-family:var(--body);font-size:.95rem;background:#EFEADC;color:var(--ink)}
.signup .fine{color:#C6BAA8}

/* forms */
.form-card,.bio-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.form-card{padding:32px 30px}
.form-card label{display:block;font-size:.85rem;font-weight:600;color:var(--forest);margin:14px 0 6px}
.form-card input,.form-card textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--body);font-size:.95rem;background:#fff;color:var(--ink)}
.form-card .btn{margin-top:20px}
.bio-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bio-inner{padding:26px 28px}

/* studio */
.filters{display:grid;gap:20px;margin-bottom:34px}
.filter-label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1.5px solid var(--line);background:var(--paper-2);border-radius:999px;padding:9px 18px;font-family:var(--body);font-size:.88rem;font-weight:500;color:var(--forest);cursor:pointer;transition:all .14s}
.chip:hover{border-color:var(--sage)}
.chip[aria-pressed="true"]{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.filter-status{font-size:.9rem;color:var(--muted);margin:4px 0 0}
.clear{background:none;border:0;color:var(--rust);font-family:var(--body);font-weight:600;cursor:pointer;text-decoration:underline}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.klass{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.klass a{text-decoration:none;display:flex;flex-direction:column;height:100%}
.klass .thumb{position:relative;display:block}
.klass img{width:100%;aspect-ratio:16/9;object-fit:cover}
.klass .dur{position:absolute;right:10px;bottom:10px;background:rgba(15,24,38,.85);color:#fff;font-size:.76rem;font-weight:600;padding:3px 8px;border-radius:5px}
.klass .card-b{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.klass .h3{font-family:var(--display);font-size:1.02rem;color:var(--forest);line-height:1.3;margin-bottom:8px;display:block}
.klass .p{font-size:.89rem;color:var(--muted);flex:1;margin-bottom:12px;display:block}
.klass:hover{border-color:var(--sage)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sage);border:1px solid var(--line);border-radius:5px;padding:3px 8px}
.empty{text-align:center;color:var(--muted);margin-top:30px}

/* class page */
.class-page .crumb{font-size:.82rem;color:var(--muted);margin-bottom:10px}
.class-page .crumb a{color:var(--rust);text-decoration:none}
.class-page .meta{list-style:none;display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:14px 0 26px;font-size:.85rem;color:var(--muted)}
.player{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:#000;margin-bottom:26px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.related{list-style:none;padding:0;margin:18px 0 0;max-width:640px}
.related li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:11px 0}
.related a{color:var(--forest);text-decoration:none}
.related a:hover{color:var(--rust)}
.related span{color:var(--muted);font-size:.85rem}

/* footer */
.site-foot{background:var(--paper-3);padding:60px 0 0;margin-top:0;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.4fr;gap:36px;padding-bottom:40px}
.site-foot h2{font-family:var(--body);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.plain{list-style:none;margin:0;padding:0}
.plain li{margin-bottom:9px}
.plain a{text-decoration:none;font-size:.94rem}
.plain a:hover{color:var(--rust)}
.pract li{margin-bottom:14px}
.pract strong{display:block;font-family:var(--display);color:var(--forest)}
.pract span{font-size:.87rem;color:var(--muted)}
.foot-brand p{font-size:.92rem;color:var(--muted);max-width:30ch}
.foot-sign p{font-size:.92rem;color:var(--muted)}
.foot-sign .signup-form{flex-direction:column}
.foot-sign input{max-width:none}
.foot-bar{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px}
.foot-by strong{display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest)}
.foot-by .script{font-size:1.15rem}
.foot-social a{margin-left:16px;font-size:.9rem;text-decoration:none}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px;padding-bottom:26px;font-size:.85rem;color:var(--muted)}
.inline{display:flex;gap:20px}
.foot-legal p{margin:0}

@media(max-width:1000px){
  .cards-4,.cards-5{grid-template-columns:repeat(2,1fr)}
  .cards-3,.classes{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .steps,.steps.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .hero-grid,.split,.footprint{grid-template-columns:1fr;gap:34px}
  .split.reverse .media{order:0}
  .band{padding:56px 0}
  .hero{padding:48px 0 54px}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px}
  .site-head nav{display:none;width:100%;margin:0}
  .site-head nav.open{display:block}
  .head-in{flex-wrap:wrap}
  .site-head ul{flex-direction:column;gap:0;padding:10px 0 6px;width:100%}
  .site-head li{border-bottom:1px solid var(--line)}
  .site-head a{display:block;padding:12px 0}
}
@media(max-width:620px){
  body{font-size:16px}
  .cards-2,.cards-3,.cards-4,.cards-5,.classes,.trio,.mini-3,.mini-4,.steps,.steps.four{grid-template-columns:1fr}
  .signup,.cta-band,.quote-band blockquote{padding:32px 24px}
  .form-card{padding:26px 22px}
  .countries{columns:1}
  .foot-top{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
  .proof{gap:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* ============ premium layer ============ */

/* paper grain — very low opacity, fixed so it reads as stock not overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
main,.site-foot{position:relative;z-index:2}
/* .site-head keeps its own position:sticky and z-index:40 declared above;
   including it here silently overrode the sticky and let page content run
   under the iOS status bar on scroll. */

/* type: more air, finer tracking, optical sizing */
h1{font-variation-settings:'opsz' 120;letter-spacing:-.018em;font-weight:340}
h2{font-variation-settings:'opsz' 72;letter-spacing:-.014em;font-weight:360}
h3{font-variation-settings:'opsz' 24;font-weight:450}
.lede{font-size:1.12rem;line-height:1.72;color:#5F6455}
body{letter-spacing:.002em}

/* generous rhythm */
.band{padding:104px 0}
.hero{padding:96px 0 100px}
.hero.short{padding:76px 0 34px}
.center-head{margin-bottom:52px}
.split,.hero-grid{gap:68px}

/* eyebrow gets a hairline */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:0 0 44px;height:1px;background:currentColor;opacity:.45}
.center-head .eyebrow{justify-content:center}

/* imagery: consistent radius, soft depth, slow zoom on hover */
.hero-media img,.media img{border-radius:20px;box-shadow:0 24px 60px -30px rgba(46,40,24,.5)}
.card,.event-card,.klass{border-radius:18px;box-shadow:0 2px 4px rgba(58,50,30,.03);transition:box-shadow .3s,transform .3s,border-color .3s}
.card:hover,.event-card:hover,.klass:hover{box-shadow:0 20px 44px -26px rgba(46,40,24,.45);transform:translateY(-3px)}
.card img,.event-card img,.event-history-card img,.klass img,.path img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover img,.event-card:hover img,.klass:hover img,.path:hover img{transform:scale(1.045)}
.card,.event-card,.klass{overflow:hidden}

/* buttons: a touch larger, primary lifts */
.btn{min-height:54px;padding:0 32px;letter-spacing:.01em}
.btn-primary{box-shadow:0 10px 24px -14px rgba(59,49,40,.85)}
.btn-primary:hover{box-shadow:0 16px 30px -14px rgba(59,49,40,.9)}

/* home hero: full-bleed feature */
.hero-feature{padding:0;border-bottom:1px solid var(--line)}
.hero-feature .hero-grid{grid-template-columns:1fr 1.15fr;gap:0;align-items:stretch;padding:0;max-width:none}
.hero-feature .hero-copy{padding:100px clamp(28px,5vw,84px) 100px max(var(--gut),calc((100vw - var(--col))/2 + var(--gut)));display:flex;flex-direction:column;justify-content:center}
.hero-feature .hero-media{position:relative;min-height:560px}
.hero-feature .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.hero-feature h1{font-size:clamp(2.5rem,4.6vw,3.9rem)}

/* section headings sit on a quiet rule */
.band-alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* studio filters feel like controls, not tags */
.filters{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:28px 30px}
.band-alt .filters{background:var(--paper)}
.chip{background:transparent}
.chip[aria-pressed="true"]{box-shadow:0 8px 18px -12px rgba(59,49,40,.9)}

/* scroll reveal */
.reveal,.band>.wrap>*,.band>.wrap{--_r:0}
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease)}
/* images settle out of a slight scale — the one Apple move that reads as quality */
[data-reveal] img,[data-reveal].card img,figure[data-reveal] img{
  transform:scale(1.02);transition:transform .9s var(--ease)}
[data-reveal].in img{transform:scale(1)}
.card,.klass,.post-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s ease}
[data-reveal].in{opacity:1;transform:none}

/* footer refinement */
.site-foot{background:var(--paper-2)}
.foot-top{padding-bottom:52px}

@media(max-width:820px){
  .band{padding:66px 0}
  .hero{padding:56px 0 60px}
  .hero-feature .hero-grid{grid-template-columns:1fr}
  .hero-feature .hero-copy{padding:56px var(--gut) 44px}
  .hero-feature .hero-media{min-height:380px}
  .filters{padding:22px 20px}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .card img,.klass img,.path img{transition:none}
}


/* real logo lockup */
.logo{display:inline-block;line-height:0}
.logo img{height:48px;width:auto;display:block}
.foot-brand .logo img{height:56px}
@media(max-width:820px){.logo img{height:40px}}


/* coming-soon buttons */
.btn-soon{background:transparent;color:var(--muted);border:1.5px dashed var(--line);cursor:default;font-weight:500}
.btn-soon:hover{transform:none}
.btn-soon.onnight{color:#95A0B6;border-color:rgba(239,233,218,.28)}

/* upcoming events: wide banner crop matches the source aspect */
.event-card img{aspect-ratio:16/9}

/* contact portrait is a tall shot */
.bio-card img{aspect-ratio:4/5;object-position:50% 18%}

@media(max-width:620px){
  }


/* credits table */
.table-wrap{overflow-x:auto;margin-top:28px}
table.credits{border-collapse:collapse;width:100%;font-size:.92rem;min-width:640px}
table.credits th{text-align:left;font-family:var(--body);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:0 16px 10px 0;border-bottom:1px solid var(--line)}
table.credits td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
table.credits td:first-child{color:var(--forest);font-weight:600}
table.credits a{color:var(--rust)}


/* (c) centred call to action in the closing bands */
.cta-band .btn-row{justify-content:center}
.center-head .btn-row,.signup .btn-row{justify-content:center}


/* click-to-play video facade */
.video-facade{position:relative;display:block;border-radius:20px;overflow:hidden;text-decoration:none;
  box-shadow:0 24px 60px -30px rgba(46,40,24,.5);background:#1B2213;aspect-ratio:16/9}
.video-facade img{width:100%;height:100%;object-fit:cover;border-radius:0;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .3s}
.video-facade:hover img{transform:scale(1.04);opacity:.88}
.video-facade .play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:999px;
  background:rgba(247,242,234,.94);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .25s,background .25s}
.video-facade .play::after{content:"";border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--forest);margin-left:5px}
.video-facade:hover .play{transform:scale(1.08);background:#fff}
.video-facade .vdur{position:absolute;right:14px;bottom:14px;background:rgba(15,24,38,.85);color:#fff;
  font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:6px}
.video-facade .vlabel{position:absolute;left:16px;bottom:14px;color:#fff;font-family:var(--display);
  font-size:1rem;text-shadow:0 2px 12px rgba(0,0,0,.7);max-width:60%}
.video-facade.playing{aspect-ratio:16/9;background:#000}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(prefers-reduced-motion:reduce){.video-facade img,.video-facade .play{transition:none}}


/* class page facade sits where the old player was */
.class-page .video-facade{margin-bottom:14px}
.watch-alt{margin-bottom:26px}
.watch-alt a{color:var(--rust)}


/* Work With Me hero: show the group photo whole, never cropped */
.work-hero .hero-grid{align-items:start}
.work-hero .hero-media img{width:100%;height:auto;object-fit:contain;max-height:none}


/* Instagram reel embed */
.ig-embed{max-width:420px;margin-left:auto;margin-right:auto;margin-inline:auto;width:100%}
.ig-embed iframe{width:100%;aspect-ratio:10/16;border:0;border-radius:20px;background:#fff;
  box-shadow:0 24px 60px -30px rgba(46,40,24,.5);display:block}
.ig-embed .fine{text-align:center;margin:14px 0 0}
.ig-embed .fine a{color:var(--rust)}
@media(max-width:820px){.ig-embed iframe{aspect-ratio:10/17}}


/* ============ brand palette refinements ============ */

.eyebrow{color:var(--rust)}
.eyebrow.rust{color:var(--rust)}
.band-alt{background:var(--paper-3);border-color:var(--line)}
.card,.event-card,.klass,.feel,.form-card,.bio-card{background:#FDFAF4;border-color:var(--line)}
.band-alt .card,.band-alt .feel,.band-alt .klass,.band-alt .event-card,.band-alt {background:#FDFAF4}
.chip{border-color:var(--line);background:#FDFAF4}
.filters{background:#FDFAF4;border-color:var(--line)}
.band-alt .filters{background:var(--paper)}
.tagdate{background:var(--terracotta)}
.place,.link-arrow,.watch-alt a,table.credits a{color:var(--rust)}
.quote-band blockquote{background:var(--paper-3)}
.band-alt .quote-band blockquote{background:var(--paper)}
.cta-band{background:var(--paper-3)}
.band-alt .cta-band{background:var(--paper)}
.signup{background:var(--forest)}
.signup .lede{color:#DED5C7}
.signup .fine{color:#C9BEAC}
.site-foot{background:var(--paper-2);border-top-color:var(--line)}
.btn-gold{background:var(--gold);color:#231903}
.site-head a:hover,.site-head a[aria-current]{border-bottom-color:var(--terracotta)}

/* Night Jar bands use the app's own palette */
.band-night{background:var(--night);color:var(--night-ink)}
.band-night h2,.band-night h3{color:var(--moon)}
.band-night .lede{color:#A99FB8}
.band-night .eyebrow{color:var(--nj-gold)}
.band-night .price{color:var(--nj-gold)}
.band-night .fine.dim{color:#8B8397}
.btn-onnight{color:var(--moon);border-color:rgba(243,235,216,.42)}
.btn-onnight:hover{background:var(--moon);color:var(--night)}
.btn-soon.onnight{color:#8E86A2;border-color:rgba(243,235,216,.26)}

/* ============ phone screens ============ */

.phones{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.phones figure{margin:0;flex:1;max-width:196px}
.phones img{width:100%;height:auto;border-radius:18px;display:block;
  box-shadow:0 22px 50px -22px rgba(12,10,20,.75);border:1px solid rgba(243,235,216,.10)}
.phones.two figure:nth-child(2){transform:translateY(26px)}

.ui-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:0;padding:0;text-align:center}
.ui-steps figure{margin:0 0 22px}
.ui-steps img{width:100%;max-width:212px;height:auto;margin:0 auto;border-radius:18px;display:block;
  box-shadow:0 20px 44px -24px rgba(28,27,32,.6)}
.ui-steps .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;background:var(--paper-3);color:var(--rust);font-weight:700;margin-bottom:12px}
.ui-steps h3{margin-bottom:8px}
.ui-steps p{font-size:.94rem;color:var(--muted);max-width:32ch;margin-left:auto;margin-right:auto;margin-inline:auto}

.labs-mark{height:74px;width:auto;margin:0 0 22px;display:block}
.hero-labs .lede{max-width:50ch}
.labs-line{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.nj-note{margin-top:40px;color:var(--sage)}

@media(max-width:900px){
  .ui-steps{grid-template-columns:1fr;gap:44px}
  .ui-steps img{max-width:220px}
}
@media(max-width:620px){
  .phones{gap:12px}
  .phones figure{max-width:150px}
  .phones.two figure:nth-child(2){transform:translateY(16px)}
  .labs-mark{height:58px}
}


/* ============ true iPhone device frame ============
   Screen art is 9:19.5. The device is 71.6 x 147.6mm (0.485), corner radius
   ~12% of width. Percentage radii are given as h/v pairs so the corners stay
   circular on a tall box rather than turning into ellipses. */

.phones figure,
.ui-steps figure{
  position:relative;
  aspect-ratio:1000 / 2069;
  background:linear-gradient(160deg,#3A3A42 0%,#1A1A1F 26%,#141418 74%,#2C2C33 100%);
  border-radius:12% / 5.8%;
  padding:4.2%;
  box-shadow:0 26px 56px -24px rgba(12,10,20,.78), 0 2px 5px rgba(0,0,0,.35);
  margin:0;
}
.phones figure::after,
.ui-steps figure::after{            /* thin rim highlight */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.phones img,
.ui-steps img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:8.5% / 3.9%;
  box-shadow:none;border:0;max-width:none;margin:0;
}

.phones{align-items:flex-start}
.phones figure{flex:1;max-width:196px}
.ui-steps figure{max-width:206px;margin:0 auto 22px}

@media(max-width:620px){
  .phones figure{max-width:148px}
}


/* ============ legal pages ============ */
.legal{max-width:720px}
.legal h1{margin-bottom:18px}
.legal h2{font-size:1.28rem;margin:42px 0 12px}
.legal h3{font-size:1.02rem;margin:26px 0 8px;color:var(--forest)}
.legal p,.legal li{color:#4E5140}
.legal ul{padding-left:20px;margin:0 0 1em}
.legal li{margin-bottom:9px}
.legal a{color:var(--rust)}
.legal code{background:var(--paper-3);border-radius:4px;padding:1px 6px;font-size:.88em}
.legal-date{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.legal-note{background:#FFF4DC;border:1px solid var(--gold);border-left:4px solid var(--gold);
  border-radius:10px;padding:18px 22px;margin:0 0 34px}
.legal-note strong{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:#8A6714;margin-bottom:8px}
.legal-note p{margin:0;font-size:.92rem;color:#5A481A}
.legal-warn{background:var(--paper-3);border-left:4px solid var(--rust);border-radius:10px;
  padding:20px 24px;margin:0 0 34px}
.legal-warn p{margin:0}


/* ============ screen only — no device frame ============ */
.phones figure,
.ui-steps figure{
  background:none;padding:0;border-radius:0;box-shadow:none;
  aspect-ratio:auto;overflow:visible;
}
.phones figure::after,
.ui-steps figure::after{content:none}
.phones img,
.ui-steps img{
  width:100%;height:auto;display:block;object-fit:fill;
  aspect-ratio:9 / 19.5;
  border-radius:12% / 5.54%;      /* iPhone display corner radius */
  border:0;
  box-shadow:0 26px 54px -26px rgba(12,10,20,.72), 0 3px 8px rgba(0,0,0,.18);
}
.band-night .phones img{box-shadow:0 30px 60px -26px rgba(0,0,0,.85)}


/* ============ Thread the Sky reels ============ */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;align-items:start}
.reel{margin:0}
.reel iframe{
  width:100%;height:560px;border:0;border-radius:18px;background:#fff;display:block;
  box-shadow:0 20px 46px -26px rgba(46,40,24,.5);
}
.reel figcaption{
  margin-top:14px;font-size:.92rem;color:var(--muted);text-align:center;line-height:1.5;
}
.reel-note{margin-top:34px}
.reel-note a{color:var(--rust)}
@media(max-width:1000px){
  .reels{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;margin-inline:auto}
  .reel iframe{height:600px}
}


/* Night Jar band: promo layout — photograph beside the copy, features beneath */
.band-night .split.reverse .media img{border-radius:20px}
.band-night .trio.tight{margin:28px 0 4px;gap:26px;border-top:1px solid rgba(243,235,216,.16);padding-top:26px}
.band-night .trio.tight h3{font-size:1rem;margin-bottom:6px}
.band-night .trio.tight p{font-size:.88rem}
.hero-labs .hero-media img{border-radius:20px}
@media(max-width:820px){
  .band-night .trio.tight{grid-template-columns:1fr;gap:18px}
}


/* ============ book excerpt, set like a page ============ */
.book-page{
  max-width:660px;margin-left:auto;margin-right:auto;margin-inline:auto;
  background:#FDFAF3;border:1px solid var(--line);border-radius:6px;
  padding:60px clamp(28px,6vw,72px) 54px;
  box-shadow:0 24px 60px -34px rgba(46,40,24,.45), 0 1px 0 rgba(255,255,255,.6) inset;
}
.book-page p{
  font-family:var(--display);
  font-size:1.08rem;line-height:1.72;color:#2E3327;
  margin:0 0 1.05em;text-align:justify;hyphens:auto;
  font-variation-settings:'opsz' 14;
}
.book-page p.last{margin-bottom:0}
.book-page .dropcap{text-align:justify}
.book-page .dropcap::first-letter{
  float:left;font-size:3.6em;line-height:.82;padding:.04em .09em 0 0;
  font-weight:400;color:var(--forest);
}
.excerpt-note{margin-top:26px}
.excerpt-note a{color:var(--rust)}

@media(max-width:620px){
  .book-page{padding:38px 24px 34px}
  .book-page p{font-size:1.02rem;text-align:left;hyphens:none}
  .book-page .dropcap{text-align:left}
  .book-page .dropcap::first-letter{font-size:3.1em}
}


/* ============ chapter reading page ============ */
.chapter{padding-top:44px}
.chapter .crumb{font-size:.82rem;color:var(--muted);margin-bottom:26px}
.chapter .crumb a{color:var(--rust);text-decoration:none}
.ch-art{margin:0 auto 40px;max-width:520px}
.ch-art img{width:100%;height:auto;border-radius:8px;
  box-shadow:0 30px 70px -34px rgba(46,40,24,.55);border:1px solid var(--line)}
.ch-meta{text-align:center;margin-bottom:40px}
.ch-meta h1{font-size:clamp(2rem,4.2vw,2.9rem)}
.ch-meta .fine{margin-top:12px}

.book-page.long{padding:64px clamp(28px,6vw,78px) 60px}
.book-page .sep{
  text-align:center;color:var(--sage);font-size:1rem;letter-spacing:.4em;
  margin:2em 0 1.9em;font-family:var(--body);
}
.book-page p + p.dropcap{margin-top:1.4em}

/* feature list without the photograph */
.inside-list{max-width:720px;margin-left:auto;margin-right:auto;margin-inline:auto}
.inside-list .feature-list{margin-top:0}

@media(max-width:620px){
  .ch-art{max-width:none}
  .book-page.long{padding:36px 22px 34px}
}



/* ============ book reader ============ */
/* KDP cream stock, matt */
.reader{--leaf-fs:1rem;--page:#FAF4E6;--page-2:#F6EFDE;--page-ink:#2B2A22;--page-edge:#E5DAC0;
  max-width:1160px;margin:0 auto;padding:0 var(--gut)}

.reader-stage{position:relative;overflow:hidden}
/* Book mode scrolls natively: momentum, rubber-band and trackpad swipe come
   free, and it runs on the compositor so it cannot stutter. */
.reader[data-mode="book"] .reader-stage{overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.reader[data-mode="book"] .reader-stage::-webkit-scrollbar{width:0;height:0}
.reader[data-mode="book"] .leaf{scroll-snap-align:start;scroll-snap-stop:always}
/* On a two-up spread the snap points are the spreads, not the single pages,
   so a swipe or a button turns the whole spread rather than half of it. */
@media (min-width:880px){
  .reader[data-mode="book"] .leaf{scroll-snap-align:none;scroll-snap-stop:normal}
  .reader[data-mode="book"] .leaf:nth-child(odd){scroll-snap-align:start}
}
.leaf-blank{background:var(--page-2);border-left:0}
.reader-track{display:flex;align-items:stretch}
.leaf{flex:0 0 100%;background:var(--page);border:1px solid var(--page-edge);
  display:flex;position:relative;box-sizing:border-box;overflow:hidden}
.leaf-inner{padding:52px clamp(24px,4.4vw,54px) 58px;width:100%;
  display:flex;flex-direction:column}
.leaf p{font-family:var(--display);font-size:var(--leaf-fs);line-height:1.7;color:var(--page-ink);
  margin:0 0 .95em;text-align:justify;hyphens:auto;font-variation-settings:'opsz' 12}
.leaf .run-head{font-size:.72rem;letter-spacing:.07em;color:#A09A82;text-align:left;
  margin-bottom:2.1em;font-variation-settings:'opsz' 9;hyphens:none}
.leaf .folio{margin:auto 0 0;text-align:right;font-size:.82rem;color:#A09A82;
  padding-top:2em;hyphens:none}
.leaf .dropcap::first-letter{float:left;font-size:3.4em;line-height:.84;
  padding:.04em .09em 0 0;color:var(--page-ink)}
.leaf .cut::after{content:"\2009\2026";color:#A09A82}
.leaf-art{padding:0}
.leaf-art img{width:100%;height:100%;object-fit:cover;display:block}
.leaf-end{background:var(--page-2)}
.leaf-end h2{font-size:1.45rem;margin-bottom:.6em;color:var(--forest)}
.leaf-end p{text-align:left;hyphens:none}

.reader-bar{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px}
.rbtn{width:46px;height:46px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--page);color:var(--forest);font-size:1.1rem;cursor:pointer;
  transition:border-color .15s,transform .15s}
.rbtn:hover:not(:disabled){border-color:var(--sage);transform:translateY(-2px)}
.rbtn:disabled{opacity:.35;cursor:default}
.rpos{margin:0;font-size:.88rem;color:var(--muted);min-width:13ch;text-align:center}
.reader-alt{text-align:center;margin-top:14px}
.rlink{background:none;border:0;color:var(--rust);font-family:var(--body);
  font-size:.9rem;cursor:pointer;text-decoration:underline;padding:6px}

/* ---- book mode (script-enabled) ---- */
.reader[data-mode="book"] .reader-stage{
  height:min(78vh,860px);
  box-shadow:0 30px 70px -40px rgba(46,40,24,.5);
}
/* the track must have a definite height too, or the leaves' 100% is ignored
   and every spread sizes to its own content */
.reader[data-mode="book"] .reader-track{
  height:100%;
  transform:translateX(calc(var(--i) * -100%));
  transition:transform .5s cubic-bezier(.3,.75,.3,1);
}
.reader[data-mode="book"].is-turning .reader-track{transition:none}
.reader[data-mode="book"] .leaf{height:100%}
.reader[data-mode="book"] .leaf-inner{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.reader[data-mode="book"] .leaf-inner::-webkit-scrollbar{width:0;height:0}

/* ---- flow mode ---- */
.reader[data-mode="flow"] .reader-track{flex-direction:column;transform:none}
.reader[data-mode="flow"] .leaf{border-top:0;min-height:0}
.reader[data-mode="flow"] .leaf:first-child{border-top:1px solid var(--page-edge)}
.reader[data-mode="flow"] .leaf-blank{display:none}

/* ---- the turning page ---- */
.turn{position:absolute;top:0;bottom:0;left:0;width:100%;display:none;
  transform-style:preserve-3d;will-change:transform;z-index:5}
.reader.is-turning .turn{display:block}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background:var(--page);border:1px solid var(--page-edge);box-sizing:border-box;
  display:flex;box-shadow:0 0 34px rgba(60,48,26,.22)}
.turn-face.back{transform:rotateY(180deg)}
.turn-face .leaf-inner{padding:52px clamp(24px,4.4vw,54px) 58px;overflow:hidden}
.turn-face p{font-size:var(--leaf-fs)}
.turn-face img{width:100%;height:100%;object-fit:cover;display:block}

@media(min-width:880px){
  .reader-stage{perspective:2400px}
  .reader[data-mode="book"] .leaf{flex:0 0 50%}
  .reader[data-mode="book"] .reader-track{transform:none}
  .turn{width:50%}
  /* gutter shading so the spread reads as bound */
  .reader[data-mode="book"] .leaf:nth-child(odd){
    box-shadow:inset -20px 0 24px -24px rgba(70,58,34,.30)}
  .reader[data-mode="book"] .leaf:nth-child(even){
    box-shadow:inset 20px 0 24px -24px rgba(70,58,34,.30)}
}

@media(max-width:879px){
  .reader[data-mode="book"] .reader-stage{height:min(78vh,700px)}
  .leaf-inner,.turn-face .leaf-inner{padding:30px 22px 38px}
  .leaf p{line-height:1.62}
  .leaf .run-head{margin-bottom:1.5em}
  .rpos{font-size:.84rem;min-width:11ch}
}

@media(prefers-reduced-motion:reduce){
  .reader[data-mode="book"] .reader-stage{scroll-behavior:auto}
  .turn{display:none !important}
}


/* A book page that has hit the type floor scrolls rather than losing a line.
   A soft edge at the foot is the only hint that there is more. */


/* ---- Headers condense and go translucent once you leave the top ------- */
.site-head,.lb-head{transition:background-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
.site-head.is-stuck,.lb-head.is-stuck{
  background:rgba(251,246,238,.82);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  backdrop-filter:saturate(170%) blur(16px);
  box-shadow:0 10px 30px -26px rgba(51,54,31,.55)}
.head-in,.lb-head-in{transition:padding .3s ease}
.site-head.is-stuck .head-in{padding-top:9px;padding-bottom:9px}
.lb-head.is-stuck .lb-head-in{padding-block:9px}
.lb-logo img{transition:height .3s ease}
.lb-head.is-stuck .lb-logo img{height:42px}
@media (prefers-reduced-motion:reduce){
  .site-head,.lb-head,.head-in,.lb-head-in,.lb-logo img{transition:none}
}

/* Anchor jumps ease rather than snap, except for reduced-motion visitors. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Sticky headings need somewhere to land under the condensed header. */
html{scroll-padding-top:104px}

/* Reading progress — a hairline that tracks the scroll continuously. */
.reader-progress{height:2px;border-radius:2px;background:var(--line);margin-top:18px;overflow:hidden}
.reader-progress span{display:block;height:100%;background:var(--action);
  transform:scaleX(0);transform-origin:left;transition:transform .12s linear}

/* Images fade in once decoded instead of popping. Applied by script only, so a
   no-JS visitor still sees every image. */
.js-img img{opacity:0;transition:opacity .7s cubic-bezier(.28,.11,.32,1)}
.js-img img.is-loaded{opacity:1}

/* Hero media drifts a little as it enters — scroll-driven, no JS, and simply
   ignored by browsers that do not support it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .hero-media img,.lb-devices{animation:drift linear both;animation-timeline:view();
      animation-range:entry 0% cover 60%}
    @keyframes drift{from{transform:translateY(11px)}to{transform:translateY(-5px)}}
  }
}

/* ======================================================================
   Platform motion — all of it progressive. Every block below is behind a
   support query or a motion preference, so an older browser simply gets
   the site as it was.
   ====================================================================== */

/* 1. Cross-document view transitions: navigating between pages cross-fades
      instead of blinking white. Ignored entirely where unsupported. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root){animation:vtOut .22s var(--ease-soft) both}
::view-transition-new(root){animation:vtIn .34s var(--ease-soft) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* 2. Hero drift already exists further up as `drift`, scroll-driven and
      support-gated. Left as the single implementation rather than layering a
      second animation onto the same elements. */

/* 3. The free studio renders 83 cards. Skipping layout and paint for the ones
      off screen is the difference between a smooth scroll and a sticky one.
      The intrinsic size keeps the scrollbar honest. */
@supports (content-visibility: auto){
  .klass{content-visibility:auto;contain-intrinsic-size:auto 371px}
}


/* ---- Night Jar ritual: three screens read as one sequence -----------------
   The row was sitting in the full 1160px wrap with 206px phones, which left
   about 190px of dead air between each. Narrower track, larger phones, and a
   little more room under each before its number. */
.ui-steps{max-width:1000px;margin-left:auto;margin-right:auto;margin-inline:auto;gap:clamp(20px,3.4vw,46px)}
.ui-steps figure{max-width:250px;margin:0 auto 26px}
@media (max-width:760px){
  .ui-steps{max-width:none}
  .ui-steps figure{max-width:230px}
}

/* A section built for two cards should not leave half a row empty when only
   one is running. */
/* (removed: the single-card :has() workaround is no longer needed — the events
   grid now centres its orphan deterministically) */

/* .lede is capped at 52ch; inside a centred card it needs centring too, or the
   heading sits on the card's midline and the body copy on its own. */
.cta-band .lede{margin-left:auto;margin-right:auto;margin-inline:auto}

/* ---- Home hero botanical field -------------------------------------------
   The approved botanical cluster is independently animated over a static hill
   background. v28 defines the final composition later in this stylesheet. */
.hero-feature .hero-copy{position:relative;overflow:hidden;isolation:isolate}
.hero-feature .hero-copy > *:not(.hero-botanical-layer){position:relative;z-index:2}
.hero-botanical-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-plant-card{position:absolute;height:auto;transform-origin:50% 100%;will-change:transform;filter:saturate(.92)}
@keyframes mbpPlantSway{0%{transform:rotate(-1.1deg) translateX(-1px)}45%{transform:rotate(.8deg) translateX(1px)}100%{transform:rotate(1.55deg) translateX(2px)}}


/* ---- Events: one unified chronology grid -----------------------------------
   Replaces the split upcoming/past grids. Three columns on desktop, two on
   tablet, one on phone. Nine cards leave one orphan in the two-column case, so
   the last card is centred by spanning both columns and capping its width —
   which is deterministic, rather than relying on :has(). */
.events-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); align-items: start; }

.event-history-card {
  background: #FDFAF4; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 4px rgba(58,50,30,.03);
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.event-history-card:hover { box-shadow: 0 20px 44px -26px rgba(46,40,24,.45); transform: translateY(-3px); }
.event-history-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.event-history-card:hover img { transform: scale(1.045); }
.event-history-card .card-b { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.event-history-card h3 { font-size: 1.02rem; line-height: 1.28; margin: 0 0 6px;
  overflow-wrap: break-word; hyphens: auto; }
.event-history-card .when { font-size: .82rem; color: var(--muted); margin: 0 0 10px; }
.event-history-card p:last-child { font-size: .88rem; margin: 0; }

/* the card for an event happening now */
.current-card { border-color: rgba(176,84,35,.42); }
.current-card .tagdate { margin-bottom: 8px; }

/* an event with no verified photograph is text-led rather than illustrated
   with imagery that would imply documentation it does not have */
.event-history-card.no-image .card-b { padding-top: 22px; }
.event-history-card.no-image { border-style: dashed; }

@media (max-width: 900px) {
  .events-grid { grid-template-columns: repeat(2, 1fr); }
  /* nine cards over two columns leaves a single orphan; centre it */
  .events-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 11px); margin-inline: auto; }
}
@media (max-width: 620px) {
  .events-grid { grid-template-columns: 1fr; }
  .events-grid > :last-child:nth-child(odd) { grid-column: auto; max-width: none; margin-inline: 0; }
}

/* a single highlighted card on the homepage keeps the same component, centred */
.events-grid.one-up { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 620px){ .events-grid.one-up { grid-template-columns: 1fr; } }


/* ---- Touch targets -------------------------------------------------------
   Footer navigation and inline arrow links sat at 18-26px tall, well under the
   44px a fingertip needs. Scoped to coarse pointers so the desktop layout keeps
   its density and only touch devices get the extra room. */
@media (pointer: coarse) {
  .foot-top .plain a,
  .foot-social a,
  .foot-legal a,
  .foot-by a { display:inline-flex; align-items:center; min-height:44px; }
  .foot-top .plain li { margin-bottom:0 }
  .link-arrow { display:inline-flex; align-items:center; min-height:44px }
  .chip, .rbtn { min-height:44px }
}

/* ---- Focus, visible and calm ---------------------------------------------
   A single focus treatment across every interactive element, shown only for
   keyboard users so it never interrupts a pointer visit. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--action);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible { outline-offset:4px }


/* ---- Motion, on tai-chi terms --------------------------------------------
   One idea underneath all of it: movement should arrive and depart without a
   seam, carry its weight through, and never snap. Interface motion uses the
   same long settle as the plant in the hero.
   --------------------------------------------------------------------------
   `--ease` is the site's carry curve: quick to release, slow to arrive.
   `--ease-out` returns without a bounce, for states that leave.              */
:root { --ease-out:cubic-bezier(.33,0,.15,1); }

/* Interactive surfaces share one response: rise on approach, settle on leave.
   The leave transition is slower than the enter, which is what stops a grid of
   cards flickering as the pointer crosses it. */
.card, .klass, .post-card, .event-history-card, .chip, .btn, .rbtn, .path {
  transition: transform .45s var(--ease-out),
              box-shadow .45s var(--ease-out),
              border-color .3s var(--ease-out),
              background-color .3s var(--ease-out),
              color .3s var(--ease-out);
}
.card:hover, .klass:hover, .event-history-card:hover, .path:hover, .btn:hover {
  transition-duration: .28s, .28s, .2s, .2s, .2s;
  transition-timing-function: var(--ease);
}

/* Anything that scrolls carries its momentum rather than stopping dead. */
.reader-stage, .journal-doc, .studio-scroll, .phones {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (prefers-reduced-motion: reduce) {
  .card, .klass, .post-card, .event-history-card, .chip, .btn, .rbtn, .path { transition: none }
}


/* ---- Free Studio motion hero ---------------------------------------------
   A quiet breathing-field treatment for the public practice space.
   It reacts to scroll without taking over scrolling. */
.studio-motion-hero{position:relative;overflow:hidden}
.studio-motion-hero > .wrap{position:relative;z-index:2}
.studio-breath{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.62}
.studio-motion-media{transform:translate3d(0,var(--studio-shift,0px),0) rotate(var(--studio-tilt,0deg));transition:transform .12s linear}
.studio-motion-media img{transform:scale(1.015);transition:transform .7s var(--ease)}
.studio-motion-hero:hover .studio-motion-media img{transform:scale(1.025)}
.product-byline{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted);font-size:.78em}
.contact-personal-photo{object-position:50% 50%!important}
@media(prefers-reduced-motion:reduce){
  .studio-breath{opacity:.34}
  .studio-motion-media{transform:none!important;transition:none}
  .studio-motion-media img{transform:none}
}


/* ---- v27 focused hero refinements --------------------------------------- */
/* GOODNIGHT JAR: give the product image more visual presence on desktop. */
@media (min-width: 901px){
  .goodnight-hero .hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.28fr);gap:46px}
  .goodnight-hero .hero-media{margin-right:-3vw}
  .goodnight-hero .hero-media img{width:100%;max-width:none}
}

/* Events hero: two complete class photographs, stacked without cropping. */
.events-hero-stack{display:grid;gap:16px}
.events-hero-stack img{display:block;width:100%;height:auto;object-fit:contain;aspect-ratio:auto}
@media (min-width: 901px){
  .events-hero-stack{align-self:center}
}
@media (max-width: 900px){
  .goodnight-hero .hero-media{margin-right:0}
  .events-hero-stack{gap:12px}
}


/* ============ v29 homepage hero continuity ============
   The hills are one static field underneath both hero columns. The photo overlaps
   that field and is softly masked at its leading edge, so there is no vertical
   seam. One approved botanical cluster sways continuously in a soft breeze. */
.hero-feature{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#F3DDC9;
  background-image:url('images/hero-hills-card.svg');
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:62% 56%;
}
.hero-feature .hero-copy{
  position:relative;
  z-index:2;
  background:transparent;
}
.hero-feature .hero-media{
  position:relative;
  z-index:1;
  margin-left:clamp(-108px,-6.5vw,-62px);
  overflow:hidden;
}
.hero-feature .hero-media img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 5%,rgba(0,0,0,.58) 13%,#000 25%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 5%,rgba(0,0,0,.58) 13%,#000 25%,#000 100%);
}
.hero-feature .hero-media::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  inset:0 auto 0 0;
  width:clamp(84px,10vw,160px);
  background:linear-gradient(90deg,rgba(243,221,201,.38) 0%,rgba(243,221,201,.14) 36%,rgba(243,221,201,0) 100%);
}
.hero-plant-main{
  left:-3%;
  bottom:-10%;
  width:min(43%,430px);
  opacity:.78;
  transform-origin:36% 100%;
  animation:mbpPlantConstantWind 6.4s ease-in-out infinite;
}
@keyframes mbpPlantConstantWind{
  0%,100%{transform:rotate(-1.35deg) translate3d(-1px,0,0)}
  20%{transform:rotate(.55deg) translate3d(1px,-1px,0)}
  43%{transform:rotate(1.55deg) translate3d(3px,0,0)}
  66%{transform:rotate(-.15deg) translate3d(1px,1px,0)}
  84%{transform:rotate(-1.0deg) translate3d(-1px,0,0)}
}
@media(max-width:820px){
  .hero-feature{
    background-position:center top;
    background-size:118% 51%;
  }
  .hero-feature .hero-media{
    margin-left:0;
    margin-top:-18px;
  }
  .hero-feature .hero-media img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.42) 7%,#000 18%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.42) 7%,#000 18%,#000 100%);
  }
  .hero-feature .hero-media::after{
    inset:0 0 auto 0;
    width:auto;
    height:58px;
    background:linear-gradient(180deg,rgba(243,221,201,.42) 0%,rgba(243,221,201,.12) 42%,rgba(243,221,201,0) 100%);
  }
  .hero-plant-main{
    left:-7%;
    bottom:-9%;
    width:min(46%,360px);
    opacity:.58;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-plant-main{animation:none;transform:rotate(.2deg);will-change:auto}
}

/* ============ v29 GOODNIGHT JAR device choreography ============
   Scroll-responsive, Apple-inspired in principle, but tuned for calmness. Paired
   phones share one stage progress value and move as a synchronised mirrored pair.
   JavaScript spring-smooths the transforms instead of fighting scroll with CSS
   transitions, which removes the v28 judder. */
.goodnight-device-stage{
  perspective:1600px;
  perspective-origin:50% 46%;
}
.goodnight-device{
  --device-base-y:0px;
  --device-scroll-y:0px;
  --device-x:0px;
  --device-rx:0deg;
  --device-ry:0deg;
  --device-rz:0deg;
  --device-scale:1;
  --screen-drift:0px;
  position:relative;
  transform-style:preserve-3d;
  transform-origin:50% 54%;
  backface-visibility:hidden;
  transform:
    translate3d(var(--device-x),calc(var(--device-base-y) + var(--device-scroll-y)),0)
    rotateX(var(--device-rx))
    rotateY(var(--device-ry))
    rotateZ(var(--device-rz))
    scale(var(--device-scale));
  will-change:transform;
  filter:drop-shadow(0 28px 24px rgba(18,15,27,.13));
}
.phones.two .goodnight-device:nth-child(2){--device-base-y:26px}
.goodnight-device img{
  transform:translate3d(0,var(--screen-drift),18px) scale(1.01);
  transform-origin:center;
  backface-visibility:hidden;
  will-change:transform;
}
.goodnight-device::before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:-1;
  pointer-events:none;
  border-radius:12.8% / 5.9%;
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(83,75,93,.16) 28%,rgba(17,15,24,.40) 78%,rgba(255,255,255,.16));
  box-shadow:0 26px 58px -28px rgba(12,10,20,.70);
}
.goodnight-device::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:12% / 5.54%;
  background:linear-gradient(118deg,transparent 26%,rgba(255,255,255,.09) 43%,rgba(255,255,255,.02) 50%,transparent 67%);
  background-size:230% 100%;
  background-position:120% 0;
  mix-blend-mode:screen;
  animation:goodnightDeviceGleam 11s ease-in-out infinite;
}
.goodnight-device:hover{filter:drop-shadow(0 32px 28px rgba(18,15,27,.17))}
@keyframes goodnightDeviceGleam{
  0%,68%,100%{background-position:120% 0;opacity:.14}
  78%{background-position:-25% 0;opacity:.56}
  87%{background-position:-75% 0;opacity:.14}
}
@media(max-width:620px){
  .phones.two .goodnight-device:nth-child(2){--device-base-y:16px}
}
@media(prefers-reduced-motion:reduce){
  .goodnight-device{
    transform:translate3d(0,var(--device-base-y),0)!important;
    will-change:auto;
  }
  .goodnight-device img{transform:none!important;will-change:auto}
  .goodnight-device::after{animation:none;opacity:.07;background-position:50% 0}
}

/* Free Studio breathing waves: still quiet, but now visible enough to read as
   part of the hero instead of disappearing into the paper background. */
.studio-breath{opacity:.82}
@media(prefers-reduced-motion:reduce){.studio-breath{opacity:.52}}


/* ============ v30 homepage continuity + Studio waves ============
   One wide mask blends the hero photo into the illustrated field. The old
   divider and extra overlay are removed so the hero reads as one composition. */
.hero-feature{border-bottom:0!important}
.hero-feature .hero-media{margin-left:clamp(-220px,-13vw,-124px)}
.hero-feature .hero-media img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.035) 7%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.34) 23%,rgba(0,0,0,.63) 32%,rgba(0,0,0,.86) 40%,#000 48%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.035) 7%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.34) 23%,rgba(0,0,0,.63) 32%,rgba(0,0,0,.86) 40%,#000 48%,#000 100%);
}
.hero-feature .hero-media::after{content:none!important}

.home-studio-motion{position:relative;overflow:hidden;isolation:isolate}
.home-studio-motion > .wrap{position:relative;z-index:2}
.home-studio-motion .home-studio-breath{z-index:0;opacity:.68}

/* The attached portrait is taller than the previous contact image. A 2:3 frame
   preserves almost the entire handstand while keeping the card balanced. */
.contact-personal-photo{aspect-ratio:2/3!important;object-position:50% 50%!important}

@media(max-width:820px){
  .hero-feature .hero-media{margin-left:0;margin-top:-22px}
  .hero-feature .hero-media img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 6%,rgba(0,0,0,.52) 13%,#000 24%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 6%,rgba(0,0,0,.52) 13%,#000 24%,#000 100%);
  }
  .home-studio-motion .home-studio-breath{opacity:.56}
}
@media(prefers-reduced-motion:reduce){
  .home-studio-motion .home-studio-breath{opacity:.46}
}

/* ============ v31 hero image clarity ============
   Preserve the full 4:3 hero photograph so GOODNIGHT JAR and the book remain
   completely visible. The blend is confined to the far-left edge and reaches
   full opacity well before either product. */
@media (min-width:821px){
  .hero-feature .hero-media{
    margin-left:clamp(-112px,-6.4vw,-72px);
    min-height:0;
    align-self:center;
    overflow:hidden;
  }
  .hero-feature .hero-media img{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center center;
    opacity:1;
    filter:none;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.08) 3%,
      rgba(0,0,0,.30) 7%,
      rgba(0,0,0,.62) 12%,
      rgba(0,0,0,.88) 17%,
      #000 22%,
      #000 100%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.08) 3%,
      rgba(0,0,0,.30) 7%,
      rgba(0,0,0,.62) 12%,
      rgba(0,0,0,.88) 17%,
      #000 22%,
      #000 100%);
  }
}
@media (max-width:820px){
  .hero-feature .hero-media{min-height:0}
  .hero-feature .hero-media img{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center center;
    opacity:1;
    filter:none;
  }
}