/* ============================================================
   Ms. Ji — shared design system
   Warm-editorial. Lifted + extended from jiye_site.html.
   Fraunces (display) + Inter (body) + Caveat (hand).
   ============================================================ */

:root{
  --paper:#F3ECDD; --paper-2:#FBF6EC; --card:#FCF9F1;
  --ink:#231F19; --ink-soft:#5B5346; --ink-faint:#8B8170;
  --navy:#21314A; --navy-deep:#1A2638;
  --terra:#C56A43; --terra-deep:#AD5630;
  --gold:#E7B652; --gold-soft:#F2D89A;
  --blue:#9CC1DD; --sage:#8FA47E; --plum:#8C6A88; --clay:#CDA07E;
  --line:#E6DAC5; --tape:rgba(202,180,140,.55);
  --shadow:0 18px 40px -22px rgba(60,46,28,.45);
  --shadow-sm:0 8px 22px -14px rgba(60,46,28,.4);
  --r:18px;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; color:var(--ink); background:var(--paper); overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 88% -8%, rgba(231,182,82,.10), transparent 60%),
    radial-gradient(900px 600px at -5% 12%, rgba(156,193,221,.10), transparent 55%),
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:500; line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:0;}
p{margin:0 0 1rem;}
a{color:var(--terra-deep);}
img,video{max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.hand{font-family:'Caveat',cursive; font-weight:600;}
/* reusable one-off handwritten line (Caveat, navy, slight tilt) — keeps the three pages identical */
.handline{font-family:'Caveat',cursive; font-weight:600; font-size:1.5rem; color:var(--navy); line-height:1.3; transform:rotate(-1.5deg);}
.handline.center{text-align:center;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* marker highlights */
.mark{ background:linear-gradient(104deg, transparent .5em, var(--gold-soft) .5em, var(--gold-soft) calc(100% - .35em), transparent calc(100% - .35em)); padding:0 .12em; border-radius:2px; }
.mark.blue{ background-image:linear-gradient(104deg, transparent .5em, rgba(156,193,221,.6) .5em, rgba(156,193,221,.6) calc(100% - .35em), transparent calc(100% - .35em)); }
.mark.terra{ background-image:linear-gradient(104deg, transparent .5em, rgba(197,106,67,.28) .5em, rgba(197,106,67,.28) calc(100% - .35em), transparent calc(100% - .35em)); }

/* ---------- header / nav ---------- */
.top{position:sticky; top:0; z-index:60; background:rgba(243,236,221,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:62px;}
.brand{font-family:'Fraunces',serif; font-weight:600; font-size:1.32rem; letter-spacing:-.02em; color:var(--navy); text-decoration:none; display:flex; align-items:center; min-height:44px; gap:.4rem; white-space:nowrap;}
.brand .dot{color:var(--terra);}
.nav-links{display:flex; align-items:center; gap:1.1rem; margin-left:auto;}
.nav-links a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.96rem; position:relative; display:inline-flex; align-items:center; min-height:44px; padding:.2rem .1rem; white-space:nowrap;}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--terra-deep);}
.nav-links a[aria-current="page"]{color:var(--terra-deep);}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--terra); border-radius:2px;}
.nav-cta{display:inline-flex;}
@media(max-width:520px){ .nav{gap:.55rem;} .nav-links{gap:.6rem;} .nav-links a{font-size:.88rem;} .brand{font-size:1.15rem;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:'Inter'; font-weight:600; font-size:1rem; text-decoration:none; border-radius:999px; padding:.78rem 1.3rem; min-height:48px; border:2px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:3px solid rgba(156,193,221,.7); outline-offset:2px;}
.btn-primary{background:var(--terra); color:#fff; box-shadow:0 10px 22px -10px rgba(197,106,67,.7);}
.btn-primary:hover{background:var(--terra-deep);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-ghost:hover{background:var(--navy); color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-deep);}
.btn-sm{min-height:42px; padding:.55rem 1rem; font-size:.92rem;}
.btn .arrow{transition:transform .15s ease;}
.btn:hover .arrow{transform:translateX(3px);}

/* ---------- hero (landing) ---------- */
.hero{padding:46px 0 30px;}
/* mobile (default): single column, source order = greeting -> photo+bullets -> bio+button */
.hero-grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:start;}
/* desktop: two columns — media (photo+bullets) left, greeting on top-right, bio+button below */
@media(min-width:920px){
  .hero-grid{grid-template-columns:.95fr 1.05fr; column-gap:48px; row-gap:12px; align-items:start; grid-template-rows:min-content 1fr; grid-template-areas:"media greet" "media text";}
  .hero-greet{grid-area:greet;}
  .hero-media{grid-area:media;}
  .hero-text{grid-area:text;}
}
.greet{display:inline-flex; align-items:center; gap:.5rem; color:var(--navy); font-size:1.45rem; transform:rotate(-2deg); margin-bottom:.4rem;}
.greet svg{color:var(--blue);}
.hero h1{font-size:clamp(2.1rem,6vw,3.3rem);}
.hero .role{font-weight:600; color:var(--terra-deep); letter-spacing:.02em; text-transform:uppercase; font-size:.82rem; margin:.2rem 0 1rem;}
.hero .bio{font-size:1.06rem; color:var(--ink-soft); max-width:36em;}
.hero .bio .sig{font-family:'Caveat',cursive; font-size:1.5rem; color:var(--navy); display:inline-block; margin-top:.3rem;}
/* A3 — thin orange divider between H1 and bio */
.hero-rule{border:0; height:3px; width:84px; margin:1rem 0 1.2rem; border-radius:3px; background:var(--terra); opacity:.9;}
/* A4 — Explore Courses right-aligned under the bio; A5 — arrow points down */
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:1.3rem 0 1rem;}
.arrow.arrow-down{transition:transform .15s ease;}
.btn:hover .arrow.arrow-down{transform:translateY(3px);}
.trust-row{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; color:var(--ink-soft); font-size:.92rem; font-weight:500;}
.trust-row b{color:var(--ink);}
.trust-row span{display:inline-flex; align-items:center; gap:.4rem;}
.trust-row .dot{width:6px;height:6px;border-radius:50%;background:var(--sage);}

/* ---------- taped portrait / frame ---------- */
.portrait-wrap{position:relative; max-width:440px; margin:0 auto; width:100%;}
.portrait{position:relative; background:#fff; padding:14px 14px 52px; border-radius:6px; box-shadow:var(--shadow); transform:rotate(-1.6deg);}
.portrait .ph{aspect-ratio:5/4; border-radius:3px; overflow:hidden; background:linear-gradient(135deg,#EAD9C2,#D9C3A6 60%,#C9B392); display:flex; align-items:center; justify-content:center; position:relative;}
.portrait .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.portrait .cap{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-family:'Caveat',cursive; font-size:1.32rem; color:var(--navy); padding:0 12px;}
.tape{position:absolute; width:104px; height:30px; background:var(--tape); box-shadow:0 1px 3px rgba(0,0,0,.08);}
.tape.t1{top:-13px; left:24px; transform:rotate(-7deg);}
.tape.t2{top:-12px; right:26px; transform:rotate(6deg);}
.stickynote{position:absolute; padding:14px; width:170px; border-radius:3px; box-shadow:var(--shadow-sm); font-family:'Caveat',cursive; font-size:1.18rem; line-height:1.25; color:#3a3328;}
.sn1{background:#D8CCE6; top:-26px; right:-18px; transform:rotate(5deg);}
.sn2{background:#CFE0CB; bottom:14px; left:-26px; transform:rotate(-5deg);}
@media(max-width:560px){ .stickynote{display:none;} .portrait{transform:rotate(-1deg);} }

/* ---------- generic section ---------- */
section{padding:56px 0;}
.sec-head{text-align:center; max-width:46em; margin:0 auto 34px;}
.sec-head .kicker{font-family:'Caveat',cursive; font-size:1.6rem; color:var(--terra); display:block; margin-bottom:.1rem;}
.sec-head h1,.sec-head h2{font-size:clamp(1.7rem,4.6vw,2.5rem);}
.sec-head p{color:var(--ink-soft); margin-top:.7rem;}

/* ---------- course-select cards ---------- */
.courses{background:linear-gradient(180deg, transparent, rgba(255,255,255,.35) 18%, rgba(255,255,255,.35) 82%, transparent);}
.course-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:620px){ .course-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1040px){ .course-grid{grid-template-columns:repeat(4,1fr);} }
.ccard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .25s ease; position:relative; overflow:hidden;}
.ccard:hover,.ccard:focus-visible{transform:translateY(-6px) scale(1.012); box-shadow:var(--shadow);}
.ccard:focus-visible{outline:3px solid rgba(156,193,221,.7); outline-offset:3px;}
.ccard .thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:#EDE3D0;}
.ccard .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.ccard:hover .thumb img,.ccard:focus-visible .thumb img{transform:scale(1.06);}
.ccard .flag{position:absolute; top:12px; left:12px; z-index:2; background:var(--gold); color:#3a2c10; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; padding:.3rem .6rem; border-radius:999px; transform:rotate(-4deg); box-shadow:var(--shadow-sm);}
.ccard .ccard-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:.4rem; flex:1;}
.ccard h3{font-size:1.24rem;}
.ccard p{font-size:.95rem; color:var(--ink-soft); margin:0;}
.ccard .sessions{font-size:.8rem; color:var(--ink-faint); font-weight:600;}
.ccard .more{margin-top:auto; padding-top:.6rem; font-weight:600; color:var(--terra-deep); display:inline-flex; align-items:center; gap:.4rem; transform:translateX(0); transition:transform .2s ease;}
.ccard:hover .more,.ccard:focus-visible .more{transform:translateX(3px);}

/* ---------- course-page hero (2-col) ---------- */
.coursehero{padding:40px 0 6px;}
.coursehero .wrap{display:grid; grid-template-columns:1fr; gap:30px; align-items:center;}
@media(min-width:880px){ .coursehero .wrap{grid-template-columns:1fr 1fr; gap:48px;} .coursehero.flip .media{order:2;} }
.coursehero .body .eyebrow{font-family:'Caveat',cursive; font-size:1.5rem; color:var(--terra); display:block;}
.coursehero .body h1{font-size:clamp(1.9rem,5vw,2.8rem); margin:.1rem 0 .2rem;}
.coursehero .body .sessions-tag{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--terra-deep); background:rgba(197,106,67,.12); border-radius:999px; padding:.3rem .7rem; margin-bottom:.7rem;}
.coursehero .body .lead{color:var(--ink-soft); font-size:1.06rem;}
.coursehero .body .detail-cta{margin-top:1.3rem;}

/* media frame (course pages + detail) */
.media{position:relative;}
.media .frame{background:#fff; padding:12px; border-radius:8px; box-shadow:var(--shadow); transform:rotate(-1.2deg);}
.media.flip .frame{transform:rotate(1.2deg);}
.media .frame img,.media .frame video{display:block; width:100%; height:auto; border-radius:4px;}
.media .cap{font-family:'Caveat',cursive; font-size:1.25rem; color:var(--navy); text-align:center; margin-top:.6rem;}
.media .tape{width:96px;}
.media .badge{position:absolute; top:-14px; left:-12px; background:var(--gold); color:#3a2c10; font-weight:700; font-size:.78rem; padding:.4rem .7rem; border-radius:999px; transform:rotate(-6deg); box-shadow:var(--shadow-sm); z-index:2;}
.photo-duo{display:grid; grid-template-columns:1.3fr .9fr; gap:10px;}
.photo-duo .frame{transform:rotate(-1.4deg);} .photo-duo .frame:last-child{transform:rotate(2deg); margin-top:18px;}
.consent{font-size:.74rem; color:var(--ink-faint); text-align:center; margin-top:.5rem;}
/* play overlay for click-to-play video */
.videowrap{position:relative;}
.playhint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.playhint span{width:74px; height:74px; border-radius:50%; background:rgba(33,49,74,.82); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.5);}

/* layered skills list */
.layered{margin-top:1.2rem;}
.layered .hl{font-family:'Caveat',cursive; font-size:1.45rem; color:var(--navy); display:block; margin-bottom:.6rem;}
.chips{display:flex; flex-wrap:wrap; gap:.5rem;}
.chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:.42rem .85rem; font-size:.86rem; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:.45rem; box-shadow:var(--shadow-sm);}
.chip .d{width:7px;height:7px;border-radius:50%;}

/* ---------- approach band (navy) ---------- */
.approach{background:var(--navy); color:#F4ECDD; position:relative;}
.approach .wrap{display:grid; grid-template-columns:1fr; gap:34px;}
@media(min-width:880px){ .approach .wrap{grid-template-columns:1.1fr .9fr;} }
.approach h2{color:#fff; font-size:clamp(1.6rem,4.4vw,2.3rem);}
.approach .kicker{font-family:'Caveat',cursive; color:var(--gold); font-size:1.5rem;}
.checklist{list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-direction:column; gap:.85rem;}
.checklist li{display:flex; gap:.7rem; align-items:flex-start; color:#EAE0CF;}
.checklist svg{flex:0 0 auto; margin-top:3px; color:var(--gold);}
.approach .handnote{font-family:'Caveat',cursive; font-size:1.5rem; color:#fff; margin-top:1.3rem; line-height:1.3;}
.about-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:24px;}
.about-card h3{color:#fff; font-size:1.25rem; margin-bottom:.4rem;}
.about-card .checklist svg{color:var(--blue);}

/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg, rgba(255,255,255,.4), transparent);}
.contact-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media(min-width:820px){ .contact-grid{grid-template-columns:.95fr 1.05fr; gap:42px;} }
.reach{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow-sm);}
.reach h3{font-size:1.4rem; margin-bottom:.3rem;}
.reach .sub{color:var(--ink-soft); font-size:.98rem;}
.reach-btns{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0 .7rem;}
.num{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; margin-top:.4rem;}
.num .n{font-weight:700; font-size:1.15rem; letter-spacing:.01em; color:var(--ink);}
.copybtn{margin-left:auto; border:1px solid var(--line); background:var(--paper-2); border-radius:8px; padding:.45rem .7rem; min-height:44px; font-weight:600; font-size:.85rem; cursor:pointer; color:var(--navy);}
.copybtn:focus-visible{outline:3px solid rgba(156,193,221,.7); outline-offset:2px;}
.copybtn.ok{background:var(--sage); color:#fff; border-color:var(--sage);}
.ko{font-size:.92rem; color:var(--ink-soft); margin-top:.8rem;}
.ko b{color:var(--ink);}
form{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow-sm);}
form h3{font-size:1.25rem; margin-bottom:.2rem;}
.field{margin-top:.95rem;}
label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--ink);}
label .opt{color:var(--ink-faint); font-weight:500;}
input,select{width:100%; font:inherit; padding:.8rem .85rem; min-height:48px; border:1px solid #d9ccb6; border-radius:11px; background:#fff; color:var(--ink);}
input:focus,select:focus{outline:3px solid rgba(156,193,221,.5); border-color:var(--navy); outline-offset:1px;}
.priv{font-size:.8rem; color:var(--ink-faint); margin-top:.7rem; display:flex; gap:.4rem; align-items:flex-start;}
form .btn{width:100%; justify-content:center; margin-top:1.1rem;}

/* ---------- footer ---------- */
footer{padding:34px 0 110px; text-align:center; color:var(--ink-soft); font-size:.9rem;}
footer .fbrand{font-family:'Fraunces',serif; font-size:1.2rem; color:var(--navy);}
footer .fnav{display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; margin:.6rem 0 .4rem;}
footer .fnav a{color:var(--ink-soft); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; min-height:44px; padding:0 .3rem;}
footer .fnav a:hover{color:var(--terra-deep);}
@media(min-width:760px){ footer{padding-bottom:40px;} }

/* ---------- sticky mobile CTA ---------- */
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:70; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(251,246,236,.94); backdrop-filter:blur(8px); border-top:1px solid var(--line); transform:translateY(120%); transition:transform .25s ease;}
.stickybar.show{transform:translateY(0);}
.stickybar .btn{width:100%; justify-content:center;}
@media(min-width:760px){ .stickybar{display:none;} }

/* ---------- landing credibility strip ---------- */
.about-strip{background:linear-gradient(180deg, rgba(255,255,255,.4), transparent);}
.about-strip .lead-line{max-width:40em; margin:0 auto 1.6rem; text-align:center; color:var(--ink-soft); font-size:1.05rem;}
.creds{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem;}
.cred{display:flex; gap:.55rem; align-items:flex-start; background:none; border:0; border-radius:0; padding:0; box-shadow:none;}
.cred .tick{flex:0 0 auto; width:18px; height:18px; border-radius:0; background:none; display:flex; align-items:center; justify-content:center; margin-top:2px;}
.cred .tick svg{color:var(--sage); width:17px; height:17px;}
.cred .ct{display:flex; flex-direction:column;}
.cred .ct b{font-family:'Inter',sans-serif; font-weight:600; font-size:1rem; color:var(--ink); letter-spacing:0; line-height:1.4;}

/* mini course teaser cards (landing) */
.mini-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:560px){ .mini-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:980px){ .mini-grid{grid-template-columns:repeat(4,1fr);} }
.mcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:.4rem; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .22s ease;}
.mcard:hover,.mcard:focus-visible{transform:translateY(-5px); box-shadow:var(--shadow);}
.mcard:focus-visible{outline:3px solid rgba(156,193,221,.7); outline-offset:3px;}
.mcard .ico{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:.2rem;}
.mcard .flag{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--terra-deep);}
.mcard h3{font-size:1.14rem;}
.mcard p{font-size:.9rem; color:var(--ink-soft); margin:0;}
.mcard .more{margin-top:auto; padding-top:.55rem; font-weight:600; font-size:.9rem; color:var(--terra-deep); display:inline-flex; align-items:center; gap:.35rem; transition:transform .18s ease;}
.mcard:hover .more,.mcard:focus-visible .more{transform:translateX(3px);}

/* ---------- before → after block (Math Leap) ---------- */
.beforeafter{display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch; position:relative;}
@media(min-width:760px){ .beforeafter{grid-template-columns:1fr auto 1fr; gap:18px; align-items:center;} }
.ba-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm); height:100%;}
.ba-panel .ba-tag{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:.28rem .7rem; margin-bottom:.7rem;}
.ba-panel.before{background:#FBF6EC;}
.ba-panel.before .ba-tag{background:rgba(139,129,112,.16); color:var(--ink-soft);}
.ba-panel.after{background:#fff; border-color:rgba(143,164,126,.45); box-shadow:var(--shadow);}
.ba-panel.after .ba-tag{background:rgba(143,164,126,.2); color:#5f7350;}
.ba-panel h3{font-size:1.18rem; margin-bottom:.4rem;}
.ba-panel p{font-size:.97rem; color:var(--ink-soft); margin:0;}
.ba-panel .ba-list{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem;}
.ba-panel .ba-list li{background:rgba(143,164,126,.14); border:1px solid rgba(143,164,126,.3); border-radius:999px; padding:.3rem .65rem; font-size:.82rem; font-weight:600; color:#5f7350;}
.ba-panel .ba-media{margin-top:.9rem;}
.ba-panel .ba-media .frame{background:#fff; padding:8px; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-sm); transform:rotate(-1deg);}
.ba-panel .ba-media .frame img{display:block; width:100%; height:auto; border-radius:4px;}
.ba-panel .ba-media .cap{font-family:'Caveat',cursive; font-size:1.15rem; color:var(--navy); text-align:center; margin:.5rem 0 0;}
.ba-arrow{display:flex; align-items:center; justify-content:center; color:var(--terra); font-size:1.6rem; transform:rotate(90deg);}
@media(min-width:760px){ .ba-arrow{transform:none;} }
.ba-arrow svg{width:42px; height:42px;}

/* ---------- CTA band (reusable, every course/landing page) ---------- */
.cta-band{background:var(--navy); color:#F4ECDD; text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; inset:0; background:
   radial-gradient(600px 300px at 12% -20%, rgba(231,182,82,.18), transparent 60%),
   radial-gradient(600px 300px at 92% 120%, rgba(156,193,221,.16), transparent 60%);
   pointer-events:none;}
.cta-band .wrap{position:relative; max-width:42em;}
.cta-band .kicker{font-family:'Caveat',cursive; color:var(--gold); font-size:1.55rem; display:block; margin-bottom:.1rem;}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,4.6vw,2.4rem);}
.cta-band p{color:#E3D9C7; margin:.7rem auto 1.4rem; max-width:34em;}
.cta-band .btn-primary{box-shadow:0 12px 26px -10px rgba(0,0,0,.5);}

/* ---------- contact page (2-col: approach / contact) ---------- */
.contactpage .wrap{display:grid; grid-template-columns:1fr; gap:30px; align-items:start;}
@media(min-width:860px){ .contactpage .wrap{grid-template-columns:.9fr 1.1fr; gap:46px;} }
.approach-col h2{font-size:clamp(1.5rem,4.2vw,2.1rem); margin-bottom:.3rem;}
.approach-col .kicker{font-family:'Caveat',cursive; color:var(--terra); font-size:1.5rem; display:block;}
.approach-col .approach-list{list-style:none; padding:0; margin:1.1rem 0 0; display:flex; flex-direction:column; gap:1rem;}
.approach-col .approach-list li{display:flex; gap:.8rem; align-items:flex-start;}
.approach-col .approach-list .n{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-family:'Fraunces',serif; font-weight:600; display:flex; align-items:center; justify-content:center; font-size:.95rem;}
.approach-col .approach-list .at b{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:1.04rem; color:var(--ink); margin-bottom:.1rem;}
.approach-col .approach-list .at span{font-size:.95rem; color:var(--ink-soft);}
.approach-col .lead{color:var(--ink-soft); margin-top:.6rem; max-width:34em;}
.approach-col .visit{font-family:'Caveat',cursive; font-size:1.4rem; color:var(--navy); margin-top:1.4rem; line-height:1.3;}

.contact-col{display:flex; flex-direction:column; gap:18px;}
.method{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow-sm);}
.method .micon{flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.method .mbody{display:flex; flex-direction:column; gap:.1rem; min-width:0;}
.method .mbody .mlabel{font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}
.method .mbody .mval{font-weight:700; font-size:1.08rem; color:var(--ink); word-break:break-word;}
.method .mactions{margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap;}
@media(max-width:430px){ .method .mactions{margin-left:0; width:100%;} }
.contact-col h2{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.5rem,4.2vw,2.1rem);}
.contact-col .intro{color:var(--ink-soft); margin:.1rem 0 .3rem;}
.method.kakao{align-items:flex-start;}

.micon.phone{background:rgba(197,106,67,.14);}
.micon.email{background:rgba(156,193,221,.22);}
.micon.kakao{background:rgba(231,182,82,.22);}
.method .mbody .mval.mlink{text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; min-height:44px;}
.method .mbody .khint{font-size:.86rem; color:var(--ink-soft); margin-top:.15rem;}
.kakao-qr{margin-top:.7rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; width:112px; box-shadow:var(--shadow-sm);}
.kakao-qr img{display:block; width:100%; height:auto; border-radius:6px;}
.contact-col .ko{margin-top:.2rem;}
.contact-col .form-sub{color:var(--ink-soft); font-size:.95rem;}
.contact-col .ko-foot{font-size:.9rem; text-align:center; margin-top:1rem;}

/* ---------- course image tiles (consolidated landing grid) ---------- */
.tile-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:780px; margin-left:auto; margin-right:auto;}
@media(min-width:760px){ .tile-grid{grid-template-columns:repeat(2,1fr); gap:20px;} }
.tile{position:relative; display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; text-decoration:none; color:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line); background:#241c16; transition:transform .2s ease, box-shadow .25s ease;}
.tile:hover,.tile:focus-visible{transform:translateY(-6px); box-shadow:var(--shadow);}
.tile:focus-visible{outline:3px solid rgba(156,193,221,.7); outline-offset:3px;}
/* SOLID-COLOR BANNER on top — course name in white Fraunces, centered. Fill = the course's deep signature accent (--tcolor). */
.tile .tbanner{background:var(--tcolor); color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.12rem,2.2vw,1.42rem); letter-spacing:-.01em; line-height:1.15; text-align:center; padding:.85rem .8rem;}
/* Story Studio flagship cue — small gold star inside the banner */
.tile .tstar{color:var(--gold); font-size:.9em;}
/* shared 16:9 image area below the banner; TOP-justified cover; dark fill for any gap */
.tile .timg{aspect-ratio:16/10; overflow:hidden; background:#241c16;}
.tile .timg img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .35s ease;}
.tile.tile-math .timg img,.tile.tile-robo .timg img{object-position:center;}
.tile:hover .timg img,.tile:focus-visible .timg img{transform:scale(1.06);}
/* B3 — Tap-any-course subtitle as orange handwriting */
.courses .tile-sub{font-family:'Caveat',cursive; font-weight:600; font-size:1.55rem; color:var(--terra); margin-top:.4rem;}

/* ---------- icon-only copy button ---------- */
.copybtn.icon{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--line); background:var(--paper-2); border-radius:10px; color:var(--navy); cursor:pointer;}
.copybtn.icon svg{width:20px; height:20px;}
.copybtn.icon .ico-check{display:none;}
.copybtn.icon.ok{background:var(--sage); color:#fff; border-color:var(--sage);}
.copybtn.icon.ok .ico-copy{display:none;}
.copybtn.icon.ok .ico-check{display:inline;}

/* ============================================================
   COURSE SECTIONS — one consistent format, four distinct tints
   [big centered title] -> [one-line] -> [info badge] -> [short para] -> [what they learn]
   ============================================================ */
.coursesec{position:relative;}
/* D1 SIGNATURE ACCENT per course — each course is its own warm chapter.
   --accent: the light palette hue (eyebrow, thin rule)
   --accent-deep: the DEEPENED hue (D3 band fill, must clear white-text contrast)
   --accent-soft / --accent-line: tints for the "what they learn" accents
   Story=plum, Math=sage, Writers=terra, Robo=blue (per the Phase-2 pick). */
.sec-story  {--accent:var(--plum); --accent-deep:#6F5070; --accent-soft:rgba(140,106,136,.12); --accent-line:rgba(140,106,136,.32); background:linear-gradient(180deg, rgba(140,106,136,.07), rgba(140,106,136,.04));}
.sec-math   {--accent:var(--sage); --accent-deep:#5f7350; --accent-soft:rgba(143,164,126,.14); --accent-line:rgba(143,164,126,.34); background:linear-gradient(180deg, rgba(143,164,126,.10), rgba(143,164,126,.05));}
.sec-writers{--accent:var(--terra); --accent-deep:#AD5630; --accent-soft:rgba(197,106,67,.12); --accent-line:rgba(197,106,67,.30); background:linear-gradient(180deg, rgba(197,106,67,.07), rgba(197,106,67,.04));}
.sec-robo   {--accent:var(--blue); --accent-deep:#3f7099; --accent-soft:rgba(156,193,221,.18); --accent-line:rgba(156,193,221,.45); background:linear-gradient(180deg, rgba(156,193,221,.10), rgba(156,193,221,.05));}

.coursesec-head{text-align:center; max-width:40em; margin:0 auto 32px;}
.coursesec .course-eyebrow{font-family:'Caveat',cursive; font-weight:700; font-size:1.55rem; color:var(--accent); display:block; margin-bottom:.05rem; transform:rotate(-1.5deg);}
.coursesec-head h2{font-size:clamp(2.1rem,5.6vw,3.1rem); color:var(--ink);}

/* ------------------------------------------------------------
   D3 CHAPTER-HEADER BAND — opens each course as its own chapter.
   Deep-accent fill, big centered title in white, handwritten
   eyebrow rides on top. White text only ever sits on the DEEP
   accent fill (>=3:1 for large text). A thin accent rule under
   the band echoes the signature color onto the paper below.
   ------------------------------------------------------------ */
.chapter-band{background:var(--accent-deep); border-radius:0; padding:26px 22px 28px; text-align:center; box-shadow:var(--shadow-sm); position:relative; width:100vw; margin-left:calc(50% - 50vw);}
.chapter-band > *{max-width:var(--maxw); margin-left:auto; margin-right:auto;}
.chapter-band .course-eyebrow{color:rgba(255,255,255,.9); margin-bottom:.1rem;}
/* Story's plum is dark enough for the gold Caveat to clear large-text contrast (live-site pattern); the lighter deeps read white. */
.sec-story .chapter-band .course-eyebrow{color:var(--gold);}
.chapter-band h2{color:#fff;}
.chapter-band + .course-eyebrow{display:none;} /* legacy eyebrow now lives inside the band */
/* thin signature rule on the paper just below the band */
.chapter-rule{border:0; height:3px; width:96px; margin:1.3rem auto 0; border-radius:3px; background:var(--accent); opacity:.85;}
.coursesec-head .chapter-band{margin-bottom:0;}
.coursesec .course-oneline{font-family:'Fraunces',Georgia,serif; font-weight:400; font-style:italic; font-size:clamp(1.08rem,2.6vw,1.32rem); color:var(--accent-deep); margin:.6rem auto 0; max-width:30em; line-height:1.35;}
.info-badge{display:inline-block; margin-top:1rem; font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); background:rgba(0,0,0,.04); border:1.5px solid currentColor; border-radius:999px; padding:.4rem .95rem;}
.coursesec .course-para{color:var(--ink-soft); font-size:1.04rem; margin:1.1rem auto 0; max-width:34em;}

/* two-column body: media on the left, "what they learn" on the right */
.coursesec-grid{display:grid; grid-template-columns:1fr; gap:30px; align-items:center; max-width:1000px; margin:0 auto;}
@media(min-width:880px){ .coursesec-grid{grid-template-columns:1.05fr .95fr; gap:46px;} }

/* the cohesive "what they learn" block — flowing line, NOT chips */
.learn-col{display:flex; flex-direction:column; gap:.2rem;}
.learn-title{font-family:'Caveat',cursive; font-weight:700; font-size:1.6rem; color:var(--accent-deep); display:block; margin-bottom:.2rem;}
.learn-list{font-size:1.06rem; line-height:1.7; color:var(--ink); border-left:3px solid var(--accent); padding-left:1rem; margin:.1rem 0 0;}
.learn-list strong{color:var(--accent-deep);}
.learn-kicker{font-size:1.4rem; color:var(--navy); transform:rotate(-1.5deg); margin:1rem 0 0; line-height:1.3;}
.coursesec .detail-cta{margin-top:1.4rem;}

/* full-width learn block (Math — needs-based, no media beside it) */
.learn-block{max-width:40em; margin:0 auto 6px; text-align:center;}
.learn-block .learn-title{font-size:1.7rem;}
.learn-block .learn-list{display:inline-block; text-align:left; border-left:3px solid var(--accent); max-width:34em;}

/* hand-drawn arrow pointing at the Leo video / worksheet */
.learn-arrow{display:flex; align-items:center; gap:.5rem; font-family:'Caveat',cursive; font-weight:700; font-size:1.3rem; color:var(--accent-deep); margin-bottom:.7rem;}
.learn-arrow svg{width:62px; height:36px; flex:0 0 auto; transform:scaleX(-1);}
.learn-arrow.left svg{transform:none;}

/* Story: nudge the arrow caption to sit above the learn list, pointing back to the video */
@media(min-width:880px){ .media-arrowed + .learn-col .learn-arrow{margin-left:-8px;} }

/* Math — before/after head + make-row */
.ba-head{text-align:center; max-width:40em; margin:2.4rem auto 22px;}
.ba-head h3{font-size:clamp(1.4rem,4vw,2rem); color:var(--ink);}
.ba-head p{color:var(--ink-soft); margin-top:.5rem;}
/* Aiden before/after sits inside the Math chapter — keep it on Math's sage signature, not blue */
.sec-math .ba-panel.after{border-color:var(--accent-line);}
.sec-math .ba-panel.after .ba-tag{background:var(--accent-soft); color:var(--accent-deep);}
.sec-math .ba-panel .ba-list li{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-deep);}
.sec-math .ba-arrow{color:var(--accent);}

/* Math — "what students make": small worksheet image left, note right */
.make-row{display:grid; grid-template-columns:1fr; gap:24px; align-items:center; max-width:880px; margin:2.8rem auto 0;}
@media(min-width:760px){ .make-row{grid-template-columns:minmax(0,16em) 1fr; gap:40px;} }
.make-media{max-width:16em; margin:0 auto; width:100%;}
.make-note{display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;}
.make-note .make-line{font-size:1.5rem; color:var(--navy); transform:rotate(-1.5deg); line-height:1.3; margin:0;}
.make-note .detail-cta{margin-top:1.2rem;}

/* ============================================================
   SECTION TRANSITIONS — restrained, big breaks only
   T1 torn-paper edge at the major seams; T2 hand-drawn divider
   as the lighter accent between the four course sections.
   ============================================================ */

/* T1 — TORN-PAPER EDGE. A deckle SVG pinned to the TOP of the lower
   section, its fill matching that section so it reads as a ripped
   sheet tearing over the section above. Only at the major seams.
   The host section needs position:relative + .has-torn (extra top
   pad so the title clears the deckle). */
.has-torn{position:relative;}
.torn-edge{position:absolute; top:0; left:0; width:100%; height:30px; line-height:0; z-index:2; pointer-events:none; transform:translateY(-1px);}
.torn-edge svg{display:block; width:100%; height:100%;}
/* fill = the destination section's paper tone */
.torn-paper svg path{fill:var(--paper);}
.torn-card svg path{fill:var(--card);}
.torn-navy svg path{fill:var(--navy);}

/* T2 — HAND-DRAWN DIVIDER between the four course sections: a thin
   wavy ink rule with one tiny Caveat doodle. Lighter than a torn
   edge; used sparingly so the page never gets busy. */
.course-divider{display:flex; align-items:center; justify-content:center; gap:.65rem; padding:6px 18px 2px;}
.course-divider .rule{width:min(200px,38%); height:14px; color:var(--ink-faint); flex:0 0 auto;}
.course-divider .doodle{font-family:'Caveat',cursive; font-weight:700; font-size:1.25rem; color:var(--terra); display:inline-flex; align-items:center; transform:rotate(-4deg);}
.course-divider .doodle svg{width:18px; height:18px;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .portrait,.media .frame,.photo-duo .frame,.ba-panel .ba-media .frame{transform:none !important;}
  .btn,.ccard,.ccard .thumb img,.mcard{transition:none !important;}
}