/* emberlane.app inner pages (R12b): Books, How it works, For parents, Support, Privacy, Terms, 404. Loads after styles.css, same type and night as Home.
   Parts: 1 page head, 2 books, 3 how it works, 4 parents, 5 support, 6 privacy and terms, 7 404 and the closing band, 8 motion. CSS only. */

/* ---------- 1. page head: one painting, the title over it ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:min(64svh,36rem);padding:calc(var(--head) + 3rem) 0 clamp(2rem,6vw,4rem);background:var(--night)}
.phero.plain{min-height:0;align-items:flex-start;padding:calc(var(--head) + clamp(2.5rem,7vw,5rem)) 0 clamp(1.5rem,4vw,3rem)}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,30,.5),rgba(10,11,30,.3) 38%,rgba(10,11,30,.62) 78%,var(--night))}
.phero h1{font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.035em;line-height:.95;font-size:clamp(3rem,min(9vw,16svh),8rem);text-shadow:0 2px 24px rgba(8,6,24,.55)}
.phero .sub{margin:1.1rem 0 0;max-width:34rem;font:400 clamp(1.2rem,1.8vw,1.55rem)/1.4 var(--serif);font-variation-settings:"opsz" 30;text-shadow:0 2px 16px rgba(8,6,24,.8)}
.phero.right .in{margin-left:auto;width:min(31rem,100%)}
.phero.right h1{font-size:clamp(3rem,min(7.6vw,16svh),7.2rem)}   /* a narrower column and title: at 1440 the old one ran onto the painted hood */
@media (min-width:52rem){.phero.right::before{background:radial-gradient(ellipse 34% 62% at 79% 50%,rgba(10,11,30,.62),rgba(10,11,30,.42) 55%,transparent 100%),linear-gradient(180deg,rgba(10,11,30,.5),rgba(10,11,30,.3) 38%,rgba(10,11,30,.62) 78%,var(--night))}}   /* the title sits on the lit wall: a scrim shaped to its column, Ma and Rowan keep their light */
.sec{padding:clamp(3rem,7vw,6rem) 0}
.sec h2{font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.03em;line-height:1;font-size:clamp(2.2rem,5vw,4rem)}
.sec .lede{margin:1rem 0 0;max-width:34rem;font:400 clamp(1.15rem,1.7vw,1.4rem)/1.45 var(--serif);color:var(--soft)}

/* ---------- 2. books ---------- */
.books{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.4rem,5vw,3.6rem) clamp(1.5rem,3.4vw,3.2rem);grid-template-columns:1fr}
@media (min-width:36rem){.books{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.books{grid-template-columns:repeat(3,1fr)}}
.book img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.6rem;box-shadow:0 22px 40px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1)}
.book h3{margin:1.1rem 0 .4rem;font:400 clamp(1.5rem,2.1vw,1.9rem)/1.15 var(--serif);font-variation-settings:"opsz" 48}
.book p{margin:0 0 .4rem;color:var(--soft);line-height:1.5}
.book .mins{font:italic 400 1rem/1.3 var(--serif);color:var(--cream)}
.book .free{font:italic 400 1rem/1.3 var(--serif);color:var(--amber);margin-left:.6rem}
.library{border-top:1px solid var(--line)}
.library .cta-row{margin-top:2rem}

/* ---------- 3. how it works ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.step{display:grid;gap:1.4rem;padding:clamp(2rem,5vw,3.4rem) 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
@media (min-width:48rem){.step{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem;align-items:center}}
.step h2{font-size:clamp(2rem,3.8vw,3.2rem)}
.step h2::before{counter-increment:s;content:counter(s) ".";display:block;margin-bottom:.4rem;font:italic 300 1.4rem/1 var(--serif);color:var(--amber)}
.step p{margin:.8rem 0 0;font:400 1.3rem/1.4 var(--serif);color:var(--soft)}
.fan{display:flex}
.fan img{width:34%;aspect-ratio:4/3;object-fit:cover;border-radius:.5rem;margin-right:-6%;box-shadow:0 14px 26px rgba(0,0,0,.6)}
.fan img:nth-child(1){rotate:-2deg}.fan img:nth-child(2){rotate:1deg;translate:0 -6px}.fan img:nth-child(3){rotate:-1deg;margin-right:0}
.ways{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.ways li{padding-left:1.1rem;border-left:2px solid var(--amber)}
.ways b{display:block;font:400 clamp(1.6rem,2.6vw,2.2rem)/1.15 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.ways span{color:var(--soft)}
.scene{margin:0;border-radius:.8rem;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.scene img{width:100%;aspect-ratio:16/9;object-fit:cover}
.know{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0 clamp(2rem,5vw,4.5rem)}
@media (min-width:52rem){.know{grid-template-columns:1fr 1fr}}
.know li{padding:1.2rem 0;border-top:1px solid var(--line)}
.know b{display:block;font:400 1.45rem/1.2 var(--serif);font-variation-settings:"opsz" 48;margin-bottom:.25rem}
.know span{color:var(--soft)}

/* ---------- 4. for parents ---------- */
.pblocks{display:grid;gap:0 clamp(2rem,5vw,4.5rem)}
@media (min-width:52rem){.pblocks{grid-template-columns:1fr 1fr}}
.pb{padding:1.6rem 0 1.8rem;border-top:1px solid var(--line)}
.pb h2{font:400 clamp(1.7rem,2.6vw,2.2rem)/1.15 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em}
.pb p{margin:.6rem 0 0;color:var(--soft);font-size:1.1rem;max-width:30rem}
.who{margin-top:clamp(2rem,5vw,3.5rem);display:flex;flex-wrap:wrap;gap:1.2rem 3rem;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:1.8rem}
.who h2{font:400 1.7rem/1.15 var(--serif)}.who p{margin:.4rem 0 0;color:var(--soft)}
.plinks{display:flex;gap:1.6rem}

/* ---------- 5. support ---------- */
.narrow{width:min(100% - 2*var(--px),46rem);margin-inline:auto}
.contact h2{font:400 clamp(1.8rem,3vw,2.4rem)/1.15 var(--serif);margin-bottom:1rem}
.contact address{font-style:normal;color:var(--soft)}
.contact address p{margin:0 0 .5rem}
.contact a:not(.btn){color:var(--cream)}
.acts{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 1rem}
.pl{display:flex;gap:1.6rem;margin:1rem 0 0}.pl a{color:var(--soft)}
.faq{margin-top:clamp(2.4rem,6vw,4rem)}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:400 1.35rem/1.3 var(--serif);font-variation-settings:"opsz" 36;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--amber);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.7rem 0 0;color:var(--soft)}

/* ---------- 6. privacy and terms: the text is the policy, only the dress is ours ---------- */
.doc main{width:min(100% - 2*var(--px),44rem);margin:0 auto;padding:calc(var(--head) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(3rem,6vw,5rem)}
.doc main h1{font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.03em;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;margin:0 0 .6rem}
.doc main h2{font:400 clamp(1.5rem,2.4vw,1.9rem)/1.2 var(--serif);font-variation-settings:"opsz" 48;margin:2.6rem 0 .5rem}
.doc main p,.doc main li{margin:.6rem 0;line-height:1.7}
.doc main ul{padding-left:1.3rem}
.doc main a{color:var(--amber);text-underline-offset:3px}
.doc .meta span{white-space:nowrap}
.doc .meta{color:var(--soft);margin:0 0 2.2rem;font-style:italic;font-family:var(--serif);font-size:1.1rem;text-wrap:balance}
.langs{margin:.4rem 0 1.4rem;color:var(--soft);font-size:.98rem;line-height:1.7}
.langs a{color:var(--amber);text-underline-offset:3px;white-space:nowrap}
.langs a[aria-current]{color:var(--soft);text-decoration:none}
.doc .confirm{background:rgba(246,196,106,.22);padding:0 .2em;border-radius:3px}
.doc main footer{position:static;z-index:auto;background:none;border-top:1px solid var(--line);margin-top:3rem;padding:1.2rem 0 0;color:var(--soft);font-size:.98rem}
.doc main footer a{text-decoration:underline;color:var(--amber)}

/* ---------- 7. 404 and the closing band ---------- */
.closer{padding:clamp(4rem,9vw,7rem) 0;text-align:center;border-top:1px solid var(--line);background:linear-gradient(var(--night),var(--night2))}
.closer h2{font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.03em;line-height:1;font-size:clamp(2.4rem,5.5vw,4.6rem);margin-bottom:1.8rem}
.nf{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:flex-start;padding:calc(var(--head) + 3svh) 0 3rem}
.nf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-2}
.nf::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,5,26,.98) 8%,rgba(3,5,26,.95) 38%,rgba(3,5,26,.85) 48%,rgba(3,5,26,.3) 60%,transparent 72%),linear-gradient(0deg,rgba(3,5,22,.7),transparent 30%)}
.nf h1{font-weight:300;font-variation-settings:"opsz" 144;letter-spacing:-.035em;line-height:.96;font-size:clamp(2.8rem,min(7vw,12svh),7rem);max-width:11em;text-wrap:balance}
.nf .lead{margin:1.2rem 0 1.8rem;font:400 clamp(1.2rem,1.8vw,1.6rem)/1.4 var(--serif)}

/* ---------- 8. motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .phero .in>*,.nf .wrap>*{animation:rise 1.2s var(--ease) both}
  .phero .in>*:nth-child(2),.nf .wrap>*:nth-child(2){animation-delay:.25s}
  .nf .wrap>*:nth-child(3){animation-delay:.5s}
  @supports (animation-timeline:view()){
    .book,.step,.know li,.pb,.faq details{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
.doc main h1:lang(ja),.doc main h1:lang(ko){font-size:clamp(2rem,5.4vw,3rem);letter-spacing:0;line-height:1.25}
.doc main:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
.doc dl.tok{margin:1.6rem 0 0}
.doc dl.tok dt{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line);color:var(--soft);font-size:.95rem}
.doc dl.tok dd{margin:.3rem 0 0;line-height:1.8}