:root{
  --bg:#f6ecdd;          /* warm cream */
  --bg-2:#efe1cd;        /* sand band */
  --surface:#fcf6ea;     /* card */
  --surface-2:#ead9c0;   /* deep sand */
  --ink:#2c2620;         /* warm near-black */
  --ink-soft:#574b3c;    /* muted brown */
  --line:#e0cfb4;        /* hairline */
  --terra:#c06a40;       /* terracotta */
  --terra-deep:#a4522c;
  --clay:#dca579;        /* light clay */
  --olive:#8a8a5c;       /* nature accent */
  --maxw:1180px;
  --disp:'Onest',system-ui,sans-serif;
  --hand:'Caveat',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Onest',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.02;letter-spacing:-0.02em;font-weight:800}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section{padding:120px 0;position:relative}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--terra);display:inline-block;border-radius:2px}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch}
.hand{font-family:var(--hand);font-weight:600;color:var(--terra-deep)}

/* doodles */
.spark{position:absolute;color:var(--clay);pointer-events:none}
.wavy{display:block;color:var(--terra);width:120px;height:13px}

/* reveal animations */
.reveal{opacity:1;transform:none}
body.anim .reveal{opacity:0;transform:translateY(26px)}
body.anim .reveal.in{opacity:1;transform:none;animation:reveal .8s cubic-bezier(.2,.75,.2,1)}
@keyframes reveal{from{opacity:0;transform:translateY(26px)}}
@media(prefers-reduced-motion:reduce){body.anim .reveal{opacity:1;transform:none}
  body.anim .reveal.in{animation:none}
  .spin,.floaty,.floaty2,.bob,.btn-cta,.btn-cta::after,.badge{animation:none!important}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(-8deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes badgeGlow{0%,100%{box-shadow:0 14px 34px -16px rgba(141,72,32,.6)}50%{box-shadow:0 22px 48px -14px rgba(141,72,32,.95)}}
.floaty{animation:float 6s ease-in-out infinite}
.floaty2{animation:float2 7s ease-in-out infinite}
.bob{animation:bob 3.4s ease-in-out infinite}
.spin{animation:spin 26s linear infinite}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:700;font-size:1rem;padding:16px 30px;border-radius:999px;background:var(--terra);color:#fff;border:2px solid var(--terra);cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}
.btn:hover{background:var(--terra-deep);border-color:var(--terra-deep);transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(141,72,32,.6)}
.btn .a{transition:transform .25s}
.btn:hover .a{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--surface-2)}
.btn-ghost:hover{background:var(--surface);border-color:var(--clay);box-shadow:none}
.btn-cta{position:relative;overflow:hidden;animation:ctaPulse 2.8s ease-in-out infinite}
.btn-cta::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 24px -12px rgba(141,72,32,.5)}50%{box-shadow:0 16px 38px -10px rgba(141,72,32,.85)}}
@keyframes shine{0%{left:-65%}50%,100%{left:135%}}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:center;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand .dot{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--clay),var(--terra));flex:none}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.93rem;color:var(--ink-soft);font-weight:600;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:11px 22px;font-size:.9rem}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;position:absolute;right:32px;top:50%;transform:translateY(-50%)}
.burger span{width:24px;height:2px;background:var(--ink);display:block;border-radius:2px}

/* placeholders */
.ph{position:relative;border-radius:20px;overflow:hidden;background:var(--surface-2);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(192,106,64,.1) 14px 15px);border:1px solid var(--line);display:flex;align-items:flex-end}
.ph.filled{background:none;border-color:var(--clay)}
.ph.filled::after{display:none}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:attr(data-label);font-family:ui-monospace,Menlo,monospace;font-size:.72rem;line-height:1.35;color:var(--terra-deep);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:8px 11px;margin:12px;border-radius:8px;border:1px dashed var(--clay);max-width:90%;white-space:pre-line}

/* hero */
.hero{padding:48px 0 110px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.role{font-family:var(--disp);font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:560px){.role{font-size:.92rem;letter-spacing:.08em;white-space:nowrap}}
.hero h1{font-size:clamp(3.4rem,8vw,6.6rem);text-transform:uppercase;margin:14px 0 6px;letter-spacing:-.03em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block}
.hero .tagline{font-size:1.28rem;color:var(--ink-soft);margin:24px 0 32px;max-width:40ch}
.hero .tagline b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:30px;margin-top:42px;flex-wrap:wrap}
.hero-meta .it b{font-family:var(--disp);font-size:1.5rem;font-weight:800;display:block}
.hero-meta .it span{font-size:.82rem;color:var(--ink-soft)}
.hero-photo{position:relative}
.hero-photo .ph{aspect-ratio:4/5;border-radius:26px}
.badge{position:absolute;left:-30px;bottom:36px;width:142px;height:142px;display:grid;place-items:center;text-align:center;background:var(--terra);color:#fff;border-radius:50%;z-index:3;animation:bob 3.6s ease-in-out infinite,badgeGlow 2.8s ease-in-out infinite}
.badge .ring{position:absolute;inset:6px;width:auto;height:auto}
.badge span{font-family:var(--disp);font-weight:700;font-size:.82rem;line-height:1.2;z-index:1;padding:0 14px}
.badge .arr{width:1.05em;height:1.05em;margin-top:4px;display:inline-block;vertical-align:-.15em}
.badge:hover{transform:scale(1.06);transition:transform .3s;animation-play-state:paused}
.badge:hover .spin{animation-play-state:paused}
.badge-static{position:static;left:auto;bottom:auto;width:190px;height:190px}
.badge-static span{font-size:.82rem;padding:0 22px}
.anno{position:absolute;font-family:var(--hand);font-weight:600;color:var(--terra-deep);font-size:1.5rem;line-height:1.05;z-index:3;text-align:center}
.anno.a1{top:6%;right:-6%}
.anno.a2{bottom:20%;right:-9%;color:#fff;text-shadow:0 2px 6px rgba(20,15,10,.85),0 0 14px rgba(20,15,10,.7),0 0 2px rgba(20,15,10,.9)}
.anno svg{display:block;margin:2px auto 0;color:var(--terra);width:46px;height:34px}

/* about */
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.about-photos .ph{aspect-ratio:3/4}
.about-photos .ph:nth-child(1){transform:rotate(-2.5deg)}
.about-photos .ph:nth-child(2){transform:rotate(2deg);margin-top:24px}
.about-photos .ph.wide{grid-column:1/3;aspect-ratio:16/10;transform:rotate(-1deg);margin-top:8px}
h2.big{font-size:clamp(2.4rem,5vw,3.7rem);text-transform:lowercase;margin:16px 0 24px}
.about p+p{margin-top:16px}
.about .sign{font-family:var(--hand);font-size:1.9rem;color:var(--terra-deep);margin-top:22px}

/* approach */
.approach{background:var(--bg-2);overflow:hidden}
.ap-head{display:grid;grid-template-columns:1.32fr .68fr;gap:48px;align-items:center}
.ap-head h2{font-size:clamp(2.4rem,5vw,3.7rem);text-transform:lowercase;margin:14px 0 18px}
.ap-head .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.ap-head .u .squig{position:absolute;left:0;bottom:-11px;width:100%;height:13px;color:var(--terra)}
.ap-head .lead{margin-bottom:18px}
.ap-head .hnote{display:inline-flex;align-items:center;gap:9px;font-family:var(--hand);font-size:1.45rem;color:var(--terra-deep);transform:rotate(-2deg);white-space:nowrap}
.ap-head .hnote svg{width:42px;height:32px;color:var(--terra);flex:none}
.ap-photo .ph{aspect-ratio:4/5;transform:rotate(2.5deg)}
.method-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.mcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:38px 28px 28px;display:flex;flex-direction:column;gap:7px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.mcard:nth-child(1){transform:rotate(-2deg)}
.mcard:nth-child(2){transform:rotate(1.6deg);margin-top:20px;background:#f4e4d0}
.mcard:nth-child(3){transform:rotate(-1deg);background:#f8ddc7}
.mcard:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 28px 54px -28px rgba(44,38,32,.55);z-index:2}
.mcard .tape{position:absolute;top:-11px;left:50%;width:92px;height:22px;background:rgba(220,165,121,.5);border:1px dashed rgba(164,82,44,.45);transform:translateX(-50%) rotate(-3deg)}
.mcard .num{position:absolute;top:12px;right:22px;font-family:var(--hand);font-size:2.2rem;color:var(--clay);line-height:1}
.mcard .ac{font-family:var(--disp);font-weight:800;font-size:2.6rem;color:var(--terra);line-height:1;text-transform:uppercase}
.mcard h3{font-size:1.16rem;text-transform:lowercase;margin-top:4px}
.mcard p{color:var(--ink-soft);font-size:.97rem;line-height:1.5}
.ap-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:50px}
.ap-foot .hlabel{font-family:var(--hand);font-size:1.6rem;color:var(--terra-deep)}

/* who */
.who-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.who-head h2{max-width:15ch}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.who-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.who-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -26px rgba(44,38,32,.45);border-color:var(--clay)}
.who-card .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
.who-card .head h3{font-size:1.6rem;text-transform:lowercase}
.who-card .age{font-size:.74rem;color:var(--terra);font-weight:700;background:var(--bg-2);padding:5px 12px;border-radius:999px;white-space:nowrap}
.who-card ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.who-card li{font-size:.96rem;color:var(--ink-soft);padding-left:20px;position:relative;line-height:1.45}
.who-card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--clay)}
.who-note{margin-top:28px;font-size:1.05rem;color:var(--ink-soft)}
.who-note a{color:var(--terra-deep);font-weight:700;border-bottom:2px solid var(--clay)}
.who{overflow:hidden}
.who-head .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.who-head .u .squig{position:absolute;left:0;bottom:-8px;width:100%;height:12px;color:var(--terra)}
.topics-grid{column-count:3;column-gap:18px}
.topic{break-inside:avoid;margin:0 0 18px;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.topic:nth-child(3n+1){transform:rotate(-1.4deg)}
.topic:nth-child(3n+2){transform:rotate(1deg)}
.topic:nth-child(3n){transform:rotate(-.6deg)}
.topic:nth-child(2n){background:#f4e4d0}
.topic:nth-child(5n){background:#f8ddc7}
.topic:hover{transform:rotate(0) translateY(-6px);box-shadow:0 24px 46px -28px rgba(44,38,32,.5);border-color:var(--clay);position:relative;z-index:2}
.topic .dood{height:32px;width:auto;color:var(--terra);flex:none}
.topic h3{font-size:1.16rem;font-weight:800;font-family:var(--disp);text-transform:lowercase;line-height:1.15}
.topic p{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.topic.accent{background:var(--terra);border-color:var(--terra)}
.topic.accent .dood{color:#fff}
.topic.accent h3{color:#fff}
.topic.accent p{color:#fbe7da}

/* format */
.format{background:var(--bg-2);overflow:hidden}
.fmt-head{max-width:780px}
.fmt-head h2{font-size:clamp(2.4rem,5vw,3.7rem);text-transform:lowercase;margin:14px 0 14px;max-width:18ch}
.fmt-head .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.fmt-head .u .squig{position:absolute;left:0;bottom:-9px;width:100%;height:12px;color:var(--terra)}
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.fmt-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:34px 32px 30px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.fmt-card:nth-child(1){transform:rotate(-1.2deg)}
.fmt-card:nth-child(2){transform:rotate(1deg);background:#f4e4d0}
.fmt-card:nth-child(3){transform:rotate(-.6deg);background:#f8ddc7}
.fmt-card:hover{transform:rotate(0) translateY(-6px);box-shadow:0 26px 50px -28px rgba(44,38,32,.5)}
.fmt-card .kicker{font-family:var(--hand);font-size:1.4rem;color:var(--terra-deep)}
.fmt-card h3{font-size:1.85rem;text-transform:lowercase;margin:2px 0 10px}
.fmt-card p{color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
.fmt-card .meta{margin-top:18px;font-weight:700;font-family:var(--disp);color:var(--terra-deep);font-size:1rem;padding-top:16px;border-top:1px dashed var(--line)}
.fmt-where{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.fmt-where .hlabel{font-family:var(--hand);font-size:1.6rem;color:var(--terra-deep)}
.wtag{display:inline-flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:12px 22px;font-weight:600;font-size:.98rem}
.wtag svg{width:22px;height:22px;color:var(--terra);flex:none}
.wtag:nth-of-type(1){transform:rotate(-1.5deg)}
.wtag:nth-of-type(2){transform:rotate(1.5deg)}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.price-row .hlabel{font-family:var(--hand);font-size:1.6rem;color:var(--terra-deep)}
.ptag{display:inline-flex;align-items:baseline;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 20px}
.ptag .pl{font-size:.95rem;color:var(--ink-soft)}
.ptag .pv{font-family:var(--disp);font-weight:800;font-size:1.1rem;color:var(--terra-deep)}
.ptag:nth-of-type(1){transform:rotate(-1.2deg)}
.ptag:nth-of-type(2){transform:rotate(1deg)}
.ptag:nth-of-type(3){transform:rotate(-.8deg)}
.price-note{font-size:.9rem;color:var(--ink-soft);margin-top:12px;font-style:italic}
.path{margin-top:58px}
.path .phead{font-family:var(--hand);font-size:1.8rem;color:var(--terra-deep);margin-bottom:22px}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.step:nth-child(1){transform:rotate(-1deg)}
.step:nth-child(5){transform:rotate(1.2deg)}
.step .n{font-family:var(--hand);font-size:2.3rem;color:var(--clay);line-height:1}
.step h4{font-size:1.22rem;text-transform:lowercase;margin:2px 0 6px}
.step p{color:var(--ink-soft);font-size:.93rem;line-height:1.5}
.step-arrow{color:var(--terra);width:50px;height:30px;flex:none}
.terms{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;background:var(--surface);border:1px dashed var(--clay);border-radius:20px;padding:22px 26px}
.terms .hlabel{font-family:var(--hand);font-size:1.5rem;color:var(--terra-deep)}
.terms-pills{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tpill{background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.88rem;font-weight:600;color:var(--ink)}
.terms .btn{margin-left:auto;padding:13px 24px;font-size:.94rem}
@media(max-width:680px){.terms .btn{margin-left:0;width:100%;justify-content:center}
.terms-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.tpill{text-align:center;font-size:.8rem;padding:9px 8px;line-height:1.25}}

/* setting */
.setting{background:var(--bg);overflow:hidden}
.setting .head{max-width:760px}
.setting h2{font-size:clamp(2.4rem,5vw,3.7rem);text-transform:lowercase;margin:14px 0 14px}
.setting .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.setting .u .squig{position:absolute;left:0;bottom:-9px;width:100%;height:12px;color:var(--terra)}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.rule{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;gap:10px;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
.rule:nth-child(3n+1){transform:rotate(-1deg)}
.rule:nth-child(3n+2){transform:rotate(.7deg)}
.rule:nth-child(3n){transform:rotate(-.5deg)}
.rule:nth-child(2n){background:#f6e7d2}
.rule:hover{transform:rotate(0) translateY(-5px);box-shadow:0 22px 42px -28px rgba(44,38,32,.5);border-color:var(--clay);z-index:2}
.rule .ic{width:46px;height:46px;border-radius:13px;background:var(--terra);color:#fff;display:grid;place-items:center;flex:none}
.rule .ic svg{width:24px;height:24px}
.rule h3{font-family:var(--disp);font-weight:800;font-size:1.16rem;text-transform:lowercase;line-height:1.18}
.rule p{font-size:.94rem;color:var(--ink-soft);line-height:1.5}
.setting-note{margin-top:30px;display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px dashed var(--clay);border-radius:18px;padding:22px 26px;max-width:820px}
.setting-note .hn{font-family:var(--hand);font-size:1.5rem;color:var(--terra-deep);flex:none;line-height:1.1}
.setting-note p{font-size:.98rem;color:var(--ink-soft);line-height:1.55}
.setting-note b{color:var(--ink);font-weight:700}

/* education + experience */
.edu-wrap{display:grid;grid-template-columns:1.45fr .55fr;gap:54px;align-items:start}
.edu-scroll{position:relative}
.edu-sticky{position:static}
.panel-stage{position:relative}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 4px}
.tab{font-family:var(--disp);font-weight:700;font-size:1rem;padding:11px 24px;border:2px solid var(--terra-deep);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s;text-transform:lowercase;border-radius:225px 18px 235px 18px/18px 225px 18px 235px}
.tab:nth-child(2){border-radius:18px 235px 18px 225px/225px 18px 235px 18px}
.tab:nth-child(3){border-radius:235px 18px 225px 22px/20px 230px 16px 235px}
.tab:hover{transform:translateY(-2px) rotate(-1deg)}
.tab.active{background:var(--terra);border-color:var(--terra-deep);color:#fff}
.panel{display:none}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tl2{list-style:none;position:relative;margin-top:24px;padding-left:26px}
.tl2::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;border-left:2px dashed var(--clay)}
.tl2 li{position:relative;padding:15px 0;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;border-top:1px solid var(--line)}
.tl2 li:first-child{border-top:none}
.tl2 li::before{content:"";position:absolute;left:-26px;top:22px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2.5px solid var(--terra)}
.tl2 li.now::before{background:var(--terra)}
.tl2 .yr{font-family:var(--disp);font-weight:800;color:var(--terra);font-size:.9rem;line-height:1.3}
.tl2 .txt b{display:block;font-weight:700;font-size:1.05rem;margin-bottom:2px}
.tl2 .txt span{font-size:.9rem;color:var(--ink-soft)}
.learn-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:2px solid var(--terra-deep);padding:9px 16px;font-size:.88rem;font-weight:600;border-radius:225px 14px 235px 14px/14px 225px 14px 235px;transition:transform .2s,background .2s}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra);flex:none}
.chip:nth-of-type(even){transform:rotate(-1.6deg);border-radius:14px 235px 14px 225px/225px 14px 235px 14px}
.chip:nth-of-type(odd){transform:rotate(1.3deg)}
.chip:hover{transform:rotate(0) translateY(-3px);background:var(--bg-2)}
.chip b{color:var(--terra-deep)}
.chip{cursor:pointer}
.chip.active{background:var(--terra);border-color:var(--terra);color:#fff}
.chip.active::before{background:#fff}
.chip-detail{margin-top:16px;background:var(--surface);border:1px solid var(--clay);border-radius:16px;padding:0 22px;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease,padding .35s ease}
.chip-detail.open{max-height:240px;opacity:1;padding:18px 22px;box-shadow:0 16px 36px -28px rgba(44,38,32,.45)}
.chip-detail .dt{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:var(--terra-deep);margin-bottom:4px;display:flex;align-items:baseline;gap:10px}
.chip-detail .dt .dyr{font-family:var(--hand);font-weight:600;font-size:1.2rem;color:var(--terra)}
.chip-detail .dd{font-size:.96rem;color:var(--ink-soft);line-height:1.55}
.learn-note{margin-top:22px;font-size:.98rem;color:var(--ink-soft);line-height:1.6;max-width:62ch}
.learn-note b{color:var(--ink);font-weight:700}
.lcards{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:background .25s,border-color .25s,box-shadow .25s}
.lcard.open{background:#fbf2e6;border-color:var(--clay);box-shadow:0 16px 36px -28px rgba(44,38,32,.45)}
.lcard-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 20px;font-family:var(--disp);font-weight:700;font-size:1.04rem;color:var(--ink);line-height:1.25}
.lcard-q .yr{font-family:var(--hand);font-size:1.3rem;font-weight:600;color:var(--terra);flex:none;min-width:54px}
.lcard-q .t{flex:1}
.lcard-q .tog{flex:none;width:28px;height:28px;border-radius:50%;background:var(--terra);position:relative;transition:transform .3s cubic-bezier(.3,.7,.3,1.4)}
.lcard.open .tog{transform:rotate(135deg)}
.lcard-q .tog::before,.lcard-q .tog::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px}
.lcard-q .tog::before{width:12px;height:2.2px;transform:translate(-50%,-50%)}
.lcard-q .tog::after{width:2.2px;height:12px;transform:translate(-50%,-50%)}
.lcard-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.lcard-a .inner{padding:0 20px 18px 88px;color:var(--ink-soft);font-size:.94rem;line-height:1.55}
@media(max-width:560px){.lcard-a .inner{padding-left:20px}}
.edu-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.edu-aside .ph{aspect-ratio:3/4;transform:rotate(2deg)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 24px;transform:rotate(-1.5deg);box-shadow:0 16px 34px -26px rgba(44,38,32,.45)}
.stat .row{display:flex;align-items:center;gap:14px;padding:12px 0}
.stat .row+.row{border-top:1px dashed var(--line)}
.stat .big-n{font-family:var(--disp);font-weight:800;font-size:1.9rem;color:var(--terra);line-height:1;min-width:90px}
.stat .lbl{font-size:.92rem;color:var(--ink-soft)}

/* materials */
.materials{overflow:hidden}
.mat-head{max-width:780px}
.mat-head h2{font-size:clamp(2.4rem,5vw,3.7rem);text-transform:lowercase;margin:14px 0 12px;max-width:18ch}
.mat-head .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.mat-head .u .squig{position:absolute;left:0;bottom:-9px;width:100%;height:12px;color:var(--terra)}
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;margin-top:48px}
.mat{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 26px 24px;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.mat:nth-child(3n+1){transform:rotate(-1.5deg)}
.mat:nth-child(3n+2){transform:rotate(1deg);background:#f4e4d0;margin-top:16px}
.mat:nth-child(3n){transform:rotate(-.6deg);background:#f8ddc7}
.mat:hover{transform:rotate(0) translateY(-7px);box-shadow:0 28px 52px -28px rgba(44,38,32,.55);z-index:2}
.mat .pin{position:absolute;top:-11px;left:50%;width:22px;height:22px;transform:translateX(-50%) rotate(-8deg)}
.mat .pin::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd9bf,var(--terra) 56%,var(--terra-deep));box-shadow:0 5px 9px -3px rgba(80,40,20,.55),inset 0 -2px 3px rgba(0,0,0,.2)}
.mat .pin::after{content:"";position:absolute;left:50%;top:78%;width:3px;height:9px;background:linear-gradient(var(--terra-deep),#6e3417);transform:translateX(-50%);border-radius:0 0 2px 2px}
.mat .k{font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.mat b{font-family:var(--disp);font-weight:700;font-size:1.2rem;line-height:1.26}
.mat .go{margin-top:auto;font-family:var(--hand);font-size:1.4rem;color:var(--terra-deep);display:inline-flex;align-items:center;gap:8px}
.mat .go svg{width:30px;height:18px;color:var(--terra);transition:transform .25s}
.mat:hover .go svg{transform:translateX(4px)}

/* faq */
/* faq */
.faq{overflow:hidden}
.faq h2{max-width:16ch;margin-bottom:6px}
.faq .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.faq .u .squig{position:absolute;left:0;bottom:-9px;width:100%;height:12px;color:var(--terra)}
.acc{max-width:900px;margin-top:40px;display:flex;flex-direction:column;gap:14px}
.acc-item{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:background .3s,box-shadow .3s,border-color .3s}
.acc-item.open{background:#fbf2e6;border-color:var(--clay);box-shadow:0 18px 42px -28px rgba(44,38,32,.45)}
.acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:24px 26px;font-family:var(--disp);font-weight:700;font-size:1.26rem;color:var(--ink);text-transform:lowercase;line-height:1.2}
.acc-q .num{font-family:var(--hand);font-size:1.7rem;font-weight:600;color:var(--terra);flex:none;min-width:32px}
.acc-q .qtext{flex:1}
.acc-q .tog{flex:none;width:36px;height:36px;border-radius:50%;background:var(--terra);position:relative;transition:transform .35s cubic-bezier(.3,.7,.3,1.4)}
.acc-item.open .acc-q .tog{transform:rotate(135deg)}
.acc-q .tog::before,.acc-q .tog::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px}
.acc-q .tog::before{width:15px;height:2.4px;transform:translate(-50%,-50%)}
.acc-q .tog::after{width:2.4px;height:15px;transform:translate(-50%,-50%)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc-a .inner{padding:0 26px 26px 26px;color:var(--ink-soft);font-size:1.05rem;line-height:1.6;max-width:74ch}

/* contacts */
.contacts{background:var(--bg-2);overflow:hidden}
.contacts-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.contacts h2{margin-bottom:12px}
.contacts .u{position:relative;white-space:nowrap;color:var(--terra-deep)}
.contacts .u .squig{position:absolute;left:0;bottom:-9px;width:100%;height:12px;color:var(--terra)}
.contacts .hnote{font-family:var(--hand);font-size:1.5rem;color:var(--terra-deep);margin:8px 0 0;transform:rotate(-1deg)}
.channels{display:flex;flex-direction:column;gap:14px;max-width:470px;margin-top:28px}
.channel{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 22px;transition:transform .25s,border-color .25s,box-shadow .25s}
.channel:hover{transform:translateX(6px);border-color:var(--clay);box-shadow:0 16px 32px -20px rgba(44,38,32,.45)}
.channel .ic{width:52px;height:52px;border-radius:15px;background:var(--terra);color:#fff;display:grid;place-items:center;flex:none}
.channel .ic svg{width:26px;height:26px}
.channel .tx{flex:1}
.channel b{display:block;font-weight:700;font-size:1.1rem;font-family:var(--disp)}
.channel span{font-size:.9rem;color:var(--ink-soft)}
.channel .go{color:var(--terra);flex:none;width:22px;height:22px;transition:transform .25s}
.channel:hover .go{transform:translate(3px,-3px)}
.contacts-photo{position:relative}
.contacts-photo .ph{aspect-ratio:4/5;transform:rotate(2deg)}
.contacts-photo .anno{position:absolute;bottom:34px;left:-30px;font-family:var(--hand);font-size:1.5rem;color:var(--terra-deep);text-align:center;z-index:3;transform:rotate(-4deg)}
.contacts-photo .anno svg{display:block;margin:2px auto 0;width:44px;height:32px;color:var(--terra)}

/* transitions */
.qbreak{padding:30px 0;display:flex;justify-content:center;overflow:hidden}
.qbreak.cream{background:var(--bg)}
.qbreak.sand{background:var(--bg-2)}
.qbreak .inner{position:relative;max-width:470px;padding:40px 58px;text-align:center}
.qbreak .ell{position:absolute;inset:0;width:100%;height:100%;color:var(--clay);pointer-events:none}
.qbreak p{font-family:var(--hand);font-weight:600;font-size:1.55rem;line-height:1.22;color:var(--ink)}
.qbreak cite{display:block;font-family:var(--hand);font-size:1.35rem;color:var(--terra-deep);font-style:normal;margin-top:8px}
@media(max-width:560px){.qbreak{padding:18px 0}
.qbreak .inner{padding:38px 52px}
.qbreak p{font-size:1.2rem;line-height:1.28;text-wrap:balance}
.qbreak cite{font-size:1.05rem}}

/* footer */
footer{background:var(--ink);color:#d8c9b3;padding:64px 0 40px}
.foot-inner{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.foot-quote{font-family:var(--hand);font-size:1.9rem;color:#f3e9d8;max-width:18ch;line-height:1.2}
.foot-quote cite{display:block;font-family:var(--disp);font-size:.8rem;font-style:normal;color:var(--clay);margin-top:10px;letter-spacing:.04em}
.foot-meta{font-size:.92rem;line-height:1.9}
.foot-meta a{color:var(--clay)}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:#9c8d78}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;background:var(--bg);z-index:60;display:none;flex-direction:column;padding:30px 32px;gap:6px}
.mobile-menu.open{display:flex}
.mobile-menu .close{align-self:flex-end;background:none;border:none;font-size:2.2rem;cursor:pointer;color:var(--ink);line-height:1}
.mobile-menu a{font-family:var(--disp);font-weight:700;font-size:1.7rem;text-transform:lowercase;padding:12px 0;border-bottom:1px solid var(--line)}
.fab{position:fixed;right:22px;bottom:22px;z-index:55;display:inline-flex;align-items:center;gap:.5em;font-family:var(--disp);font-weight:700;font-size:.95rem;padding:14px 24px;border-radius:999px;background:var(--terra);color:#fff;border:2px solid var(--terra);box-shadow:0 14px 30px -12px rgba(141,72,32,.7);text-decoration:none;opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .35s,transform .35s,background .25s}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{background:var(--terra-deep)}
.fab .fa{transition:transform .25s}
.fab:hover .fa{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.fab{transition:opacity .2s}}
@media(max-width:560px){.fab{right:16px;bottom:16px;padding:13px 20px}
.badge-static{width:150px;height:150px}
.badge-static span{padding:0 16px;font-size:.78rem}}

@media(max-width:920px){
  .nav-links{display:none}.burger{display:flex}
  .hero-grid,.about-grid,.ap-head,.edu-wrap,.contacts-grid{grid-template-columns:1fr;gap:42px}
  .edu-aside{position:static}
  .edu-scroll{height:auto}
  .edu-sticky{position:static}
  .panel-stage{min-height:0}
  .hero-photo{order:-1;max-width:440px;margin:0 auto}
  .topics-grid{column-count:2}
  .method-cards{grid-template-columns:1fr}
  .fmt-grid,.steps,.mat-grid{grid-template-columns:1fr}
  .rules-grid{grid-template-columns:1fr 1fr}
  .step-arrow{display:none}
  .section{padding:84px 0}
  .anno.a1{right:2%}.anno.a2{right:0}
}
@media(max-width:560px){
  .wrap{padding:0 22px}.nav-inner{padding:0 22px}
  .hero{padding:30px 0 80px}
  .hero h1{font-size:clamp(2.9rem,15vw,4rem)}
  .hero .tagline{font-size:1.12rem}
  .hero-meta{gap:22px}.hero-photo .badge{left:8px;width:108px;height:108px}
  .anno.a1{font-size:1.15rem;right:4%}
  .anno.a2{font-size:1.15rem}
  .contacts-photo .anno{left:10px;bottom:22px;font-size:1.15rem;text-shadow:0 1px 3px rgba(246,236,221,.95),0 0 9px rgba(246,236,221,.8)}
  .mat-grid{grid-template-columns:1fr}
  .topics-grid{column-count:1}
  .rules-grid{grid-template-columns:1fr}
  .tl2 li{grid-template-columns:1fr;gap:3px}
  .tl2 li::before{top:18px}
}