/* Learn v2: "The i Style" (style-guide.md, 14 Oct 2026). Scoped to body.learn; overrides /assets/styles.css + pages.css. */
body.learn{--bg:#fff;--ink:#111;--disp:#6b6b6b;--quiet:#bdbdbd;--hair:#eee;--teal:#14a89a;--sand:#c9b49c;
  --an:"Avenir Next","Avenir LT Std",Avenir,"Nunito Sans",system-ui,sans-serif;
  --shadow:none;--shadow-hi:none;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--an)}
@media (prefers-color-scheme:dark){body.learn{--bg:#0d0d0d;--ink:#f2f0ec;--disp:#9a9893;--quiet:#55534f;--hair:#1f1f1f}}
.learn .bar{padding:22px 24px}.learn .mark-text{font-weight:400}
.learn .page{max-width:760px;padding:24px 24px 96px}
.learn h1,.learn .page h1{font:200 clamp(2.25rem,5vw,3.5rem)/1.1 var(--an);color:var(--disp);letter-spacing:0;text-align:center;margin:0 0 24px;text-wrap:balance}
.learn .foot{padding:24px;border-top:1px solid var(--hair);color:var(--quiet)}
.learn a{color:inherit}
.learn .skip,.learn .back,.learn .quiet{display:inline-block;font:400 .8rem/1 var(--an);color:var(--quiet);text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer}
.learn .skip:hover,.learn .back:hover,.learn .quiet:hover{color:var(--ink)}
.learn .quiet{font-size:.9rem;color:var(--disp)}
.learn .back{display:block;text-align:left}
/* Threshold */
.threshold{min-height:calc(100svh - 190px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.t-logo{width:64px;height:64px;border-radius:50%;margin-bottom:24px}
.ph-line{font-size:.9rem;color:var(--quiet);outline:1px dashed #e4cf7a;outline-offset:4px;border-radius:4px;margin:0 0 40px}
.go{font:400 clamp(1.5rem,3vw,1.9rem)/1.2 var(--an);text-decoration:none;color:var(--ink)}
.go:hover{color:var(--teal)}
/* Map: one lens at a time */
.map{padding:96px 0 48px;text-align:center}
.ask{font:200 clamp(1.6rem,3.6vw,2.4rem)/1.2 var(--an);color:var(--disp);margin-bottom:24px}
.words{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0}
.words button{background:none;border:0;cursor:pointer;font:400 clamp(1.5rem,3vw,1.9rem)/1.3 var(--an);color:var(--ink);padding:4px 16px;transition:color .25s}
.words button[aria-pressed="false"]{color:var(--quiet)}.words button:hover{color:var(--c,var(--ink))}
.map .words{flex-direction:row;justify-content:center;gap:24px}
.list{list-style:none;padding:0;margin:48px auto 0;max-width:34em}
.list a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair);text-decoration:none;text-align:left}
.list .t{font-size:1.05rem}.list .m{font-size:.8rem;color:var(--quiet);white-space:nowrap}
.list a:hover .t{color:var(--disp)}
/* Lesson */
.hair{position:fixed;top:0;left:0;height:2px;width:0;z-index:50;transition:width .3s,background .3s}
.l-head{text-align:center;margin:8px 0 24px}.l-title{font:200 1.4rem/1.2 var(--an);color:var(--disp)}
.learn .stage{max-width:34em;margin:0 auto;padding:24px 0 48px;background:none;box-shadow:none;border-radius:0;text-align:center;min-height:55svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.learn .stage::before{display:none}
.learn .stage.flash{animation:fadeIn .25s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.whisper{font-size:.95rem;color:var(--disp);margin-bottom:24px}
.stage .words button{color:var(--ink)}.stage .words button:hover{color:var(--c)}
.learn .quote{font:300 1.5rem/1.5 var(--an);color:var(--ink);text-align:left;max-width:none;margin:0 0 48px;padding-left:24px;border-left:3px solid var(--c)}
.act{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:48px;padding:0 32px;border:0;border-radius:12px;background:var(--ink);color:var(--bg)!important;font:500 .75rem/1 var(--an);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;margin:24px 0 8px}
.q{border:0;padding:0;margin:0 0 48px;width:100%;text-align:left}
.q legend{font:400 1.1rem/1.5 var(--an);margin-bottom:16px}
.learn .opt{display:flex;align-items:center;gap:12px;padding:16px 0;background:none;border-radius:0;border-bottom:1px solid var(--hair);margin:0;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt i{width:8px;height:8px;border-radius:50%;flex:none;background:transparent;transition:background .2s}
.opt:has(input:checked){color:var(--c)}.opt:has(input:checked) i{background:var(--c)}
.opt:has(input:focus-visible){outline:1px solid var(--quiet)}
.label{font:600 .9rem/1 var(--an);align-self:flex-start;margin-bottom:8px}
.branches{list-style:none;padding:0;margin:0 0 24px;width:100%;text-align:left}
.branches a{display:block;padding:12px 0;text-decoration:none;font-size:1rem}.branches a:hover{color:var(--c)}
.learn audio,.learn video{width:100%;margin:0 0 24px}
/* Read */
.meta{display:flex;justify-content:center;align-items:center;gap:16px;font-size:.8rem;color:var(--disp)}
.chip{background:var(--sand);color:#fff;border-radius:999px;padding:4px 12px}
.learn .lesson-body{max-width:34em;margin:48px auto 0}
.learn .lesson-body p{font:400 1.0625rem/1.9 var(--an);color:var(--ink);margin-bottom:24px}
.learn .lesson-body strong{font-weight:600}
.learn .art-img{border-radius:0}
.center-col{text-align:center;margin-top:48px}
@media (max-width:600px){.learn .page{padding:16px 24px 96px}.learn h1{font-size:2.25rem}.act{width:100%}.map .words{gap:12px}.learn .quote{font-size:1.3rem}.learn .lesson-body p{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.learn .stage.flash{animation:none}.hair{transition:none}}

.book-line{font-size:.85rem;color:var(--quiet);margin:0 0 28px}.book-line a{color:var(--disp);text-decoration:underline;text-underline-offset:3px}.book-line a:hover{color:var(--ink)}