/* MOD Education — own pages: /method, /materials, /about, /contact. Tokens from site.css. */

/* shared */
.section-tight{padding:clamp(64px,7vw,104px) 0}
.small{font-size:14px}
.pg-head{max-width:720px;margin-bottom:48px}
.pg-head .muted{margin-top:14px}
.pg-cta{margin-top:48px;display:flex;flex-wrap:wrap;gap:14px}
.btn-light{background:var(--paper);border-color:var(--paper);color:var(--earth)}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--earth)}

.pg-intro{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,5vw,72px)}
.pg-intro-photo{margin:0;aspect-ratio:3/4;max-height:600px;justify-self:end;width:100%;max-width:440px}
.pg-intro-photo img{width:100%;height:100%;object-fit:cover}
.pg-facts{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;color:var(--muted)}
.pg-facts li{padding-left:18px;position:relative}
.pg-facts li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--leaf-soft)}
.pg-facts b{color:var(--ink)}

.pg-band{background:var(--earth);color:var(--on-earth);padding:clamp(80px,9vw,132px) 0}
.pg-band .eyebrow,.pg-head--on-earth .eyebrow{color:var(--on-earth-muted)}
.pg-band .hand{color:var(--leaf-soft)}
.pg-band p{color:var(--on-earth-muted)}
.pg-band h2,.pg-band h3{color:var(--on-earth)}
.pg-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.pg-band-grid figure{margin:0;aspect-ratio:4/3}
.pg-band-grid img{width:100%;height:100%;object-fit:cover}

.check-list,.kit-list{list-style:none;padding:0;margin:0}
.check-list li,.kit-list li{position:relative;padding:10px 0 10px 32px;border-bottom:1px solid var(--line)}
.check-list li::before,.kit-list li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:14px;border:1.5px solid var(--leaf);border-radius:4px}
.check-list li::after,.kit-list li::after{content:"";position:absolute;left:6px;top:17px;width:5px;height:8px;border:solid var(--leaf);border-width:0 1.5px 1.5px 0;transform:rotate(40deg)}
.num-list{counter-reset:n;list-style:none;padding:0;margin:0 0 18px}
.num-list li{counter-increment:n;position:relative;padding:10px 0 10px 40px;border-bottom:1px solid var(--line)}
.num-list li::before{content:counter(n);position:absolute;left:0;top:10px;font:600 18px/1.4 var(--serif);color:var(--clay)}

.pg-closing{max-width:var(--col);margin:0 auto;text-align:center}
.pg-closing p:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}

/* ---- /method ---- */
.lesson-strip{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative;counter-reset:none}
.lesson-strip::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:0;border-top:1.5px dashed var(--leaf-soft)}
.lesson-strip li{position:relative;padding:0 22px 0 0}
.ls-num{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--blob);background:var(--paper-2);border:1.5px solid var(--leaf);font:600 22px/1 var(--serif);color:var(--ink);margin-bottom:22px}
.lesson-strip h3{font-size:21px;margin-bottom:8px}
.lesson-strip p{font-size:15px;color:var(--muted);margin:0}

.dd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.dd{border-radius:var(--r);padding:36px 40px}
.dd h3{font-size:28px;margin-bottom:18px}
.dd ul{list-style:none;padding:0;margin:0 0 18px}
.dd li{position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--line)}
.dd li::before{position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--sans)}
.dd-yes{background:var(--card);border:1.5px solid var(--leaf)}
.dd-yes li::before{content:"✓";background:var(--leaf);color:#fff}
.dd-no{background:var(--paper-2);border:1.5px dashed rgba(31,42,29,.35)}
.dd-no li::before{content:"–";background:var(--paper);color:var(--clay);border:1.5px solid var(--clay)}

.pace-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,80px);align-items:start}
.pace-table-wrap{overflow-x:auto;background:var(--card);border-radius:var(--r);border:1px solid var(--line);padding:8px 28px}
.pace-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pace-table th,.pace-table td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.pace-table thead th{font:700 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pace-table tbody tr:last-child th,.pace-table tbody tr:last-child td{border-bottom:0}
.pace-table tbody th{font-weight:500}
.pace-table tbody th a{color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:17px}
.pace-table tbody th a:hover{text-decoration:underline}
.pace-table td{font:600 19px/1.3 var(--serif)}
.pace-table small{display:block;font:400 13px/1.4 var(--sans);color:var(--muted);margin-top:4px}

.access-path{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative}
.access-path::before{content:"";position:absolute;left:0;right:0;top:9px;border-top:1.5px solid var(--line)}
.access-path li{position:relative;padding-top:40px}
.ap-dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--leaf)}
.access-path li:last-child .ap-dot{background:var(--leaf)}
.access-path p{color:var(--muted);margin:0}

/* ---- /materials ---- */
.pg-intro--wide{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.medium-index{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.medium-index a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font:500 20px/1.3 var(--serif);transition:padding .25s,color .25s}
.medium-index a:hover{padding-left:14px;color:var(--leaf-dk)}
.medium-index small{font:500 14px/1 var(--sans);color:var(--muted)}

.honest-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:24px;padding-bottom:24px}
.hn{background:var(--paper-2);border-radius:var(--r);padding:26px 24px}
.hn h3{font-size:19px;margin-bottom:8px}
.hn p{font-size:15px;color:var(--muted);margin:0}

.medium{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start;scroll-margin-top:96px}
.medium + .medium{border-top:1px solid var(--line)}
.medium--flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.medium--flip .medium-photo{order:2}
.medium-photo{margin:0;aspect-ratio:9/11;position:sticky;top:110px}
.medium-photo img{width:100%;height:100%;object-fit:cover}
.kit-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;margin:28px 0 22px}
.kit-sheet h3{font-size:20px;margin-bottom:6px}
.kit-list{columns:2;column-gap:32px;margin-bottom:16px}
.kit-list li{break-inside:avoid;font-size:15px}
.kit-sheet .small{margin:0}
.start-with{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:17px}
.start-with a{font:500 19px/1.3 var(--serif)}

.pocket{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0;align-items:center}
.pocket-photo{margin:0;aspect-ratio:8/11;position:relative;z-index:1}
.pocket-photo img{width:100%;height:100%;object-fit:cover}
.pocket-card{background:var(--earth);color:var(--on-earth);border-radius:var(--r);padding:56px 56px 48px 120px;margin-left:-80px}
.pocket-card .eyebrow{color:var(--on-earth-muted)}
.pocket-card .hand{color:var(--leaf-soft)}
.pocket-card .muted{color:var(--on-earth-muted)}
.pocket-card a{color:var(--on-earth)}
.pocket-card .check-list{margin:20px 0 22px}
.pocket-card .check-list li{border-color:rgba(245,240,228,.16)}
.pocket-card .check-list li::before{border-color:var(--leaf-soft)}
.pocket-card .check-list li::after{border-color:var(--leaf-soft)}

/* ---- /about ---- */
.about-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.about-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.about-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,42,29,0) 40%,rgba(31,42,29,.45));z-index:-1}
.about-hero-inner{width:100%;padding-bottom:clamp(40px,5vw,72px)}
.about-hero-card{background:var(--paper);border-radius:var(--r);padding:44px 48px;max-width:640px}
.about-hero-card h1{font-size:clamp(38px,4.6vw,62px)}
.about-hero-card .lead{margin:0}

.about-why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
.about-why-text{max-width:var(--col);column-count:1}
.about-drop{font:500 clamp(21px,1.9vw,26px)/1.5 var(--serif);color:var(--ink)}

.season-mosaic{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.season-mosaic li:nth-child(even){margin-top:56px}
.season-mosaic figure{margin:0 0 20px;aspect-ratio:3/4}
.season-mosaic img{width:100%;height:100%;object-fit:cover}
.season-mosaic h3{font-size:26px;margin-bottom:2px}
.sm-months{font:700 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.season-mosaic p:last-child{font-size:15px}

.made{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.made-photo{margin:0;aspect-ratio:3/4;max-width:460px}
.made-photo img{width:100%;height:100%;object-fit:cover}
.made-list{margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px 36px}
.made-list dt{font:600 19px/1.3 var(--serif);margin-bottom:6px;padding-top:14px;border-top:1.5px solid var(--leaf-soft)}
.made-list dd{margin:0;color:var(--muted);font-size:15px}

.who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.who{border:1.5px solid var(--leaf);border-radius:var(--blob);padding:44px 34px;min-height:240px;display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--card)}
.who:nth-child(2){border-radius:45% 55% 40% 60% / 55% 45% 55% 45%}
.who:nth-child(3){border-radius:55% 45% 60% 40% / 45% 55% 45% 55%}
.who-level{font:500 26px/1.2 var(--serif);margin-bottom:10px}
.who p{font-size:15px;color:var(--muted);margin:0}
.who--quiet{border-style:dashed;border-color:rgba(31,42,29,.35);background:transparent}

.company-note{max-width:var(--col);margin:0 auto;text-align:center;padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.company-note p{margin-left:auto;margin-right:auto}

.about-cta{background:var(--earth);color:var(--on-earth);padding:clamp(72px,8vw,120px) 0;text-align:center}
.about-cta h2{color:var(--on-earth)}
.about-cta .hand{color:var(--leaf-soft)}
.about-cta p{color:var(--on-earth-muted)}
.about-cta p:last-child{margin:28px 0 0}

/* ---- /contact ---- */
.contact-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(56px,7vw,96px)}
.contact-photo{margin:0;aspect-ratio:8/11;max-width:360px;justify-self:end;width:100%}
.contact-photo img{width:100%;height:100%;object-fit:cover}

.ways{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.way{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px;display:flex;flex-direction:column;align-items:flex-start}
.way p{color:var(--muted);font-size:15px}
.way--main{background:var(--earth);border-color:var(--earth);color:var(--on-earth)}
.way--main h3{color:var(--on-earth)}
.way--main p{color:var(--on-earth-muted)}
.way--main .btn{margin-top:auto;background:var(--paper);border-color:var(--paper);color:var(--earth)}
.way--main .btn:hover{background:#fff;border-color:#fff}
.way-icon{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;color:var(--leaf)}
.way--main .way-icon{color:var(--leaf-soft)}
.way-link{font:500 18px/1.3 var(--serif);word-break:break-all}
.way-addr{font:500 17px/1.5 var(--serif);color:var(--ink)!important;margin-top:auto}

.order-help{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.order-card{background:var(--paper-2);border-radius:var(--r);padding:36px 40px}
.order-card h3{margin-bottom:12px}

.faq{max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative;font:500 20px/1.35 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:18px;font:400 26px/1 var(--sans);color:var(--leaf);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);max-width:var(--col);margin:0 0 22px}
.faq-more{margin-top:24px}

/* basic responsiveness */
@media (max-width:1000px){
  .lesson-strip{grid-template-columns:1fr;gap:28px}
  .lesson-strip::before{left:27px;right:auto;top:28px;bottom:28px;border-top:0;border-left:1.5px dashed var(--leaf-soft)}
  .lesson-strip li{padding:0 0 0 80px}
  .ls-num{position:absolute;left:0;top:0}
  .honest-notes,.who-grid,.season-mosaic{grid-template-columns:1fr 1fr}
  .season-mosaic li:nth-child(even){margin-top:0}
  .ways{grid-template-columns:1fr}
}
@media (max-width:860px){
  .pg-intro,.pg-intro--wide,.pg-band-grid,.dd-grid,.pace-grid,.medium,.medium--flip,.pocket,.about-why,.made,.contact-hero,.order-help{grid-template-columns:1fr}
  .medium--flip .medium-photo{order:0}
  .medium-photo{position:static;max-width:440px}
  .pg-intro-photo,.contact-photo{justify-self:start}
  .access-path{grid-template-columns:1fr;gap:28px}
  .access-path::before{display:none}
  .pocket-card{margin:-60px 0 0;padding:80px 28px 36px}
  .kit-list{columns:1}
  .made-list{grid-template-columns:1fr}
  .dd{padding:28px 24px}
}
@media (max-width:560px){
  .honest-notes,.who-grid,.season-mosaic{grid-template-columns:1fr}
  .about-hero-card{padding:28px 24px}
}